diff --git a/apps/zero-runtime-next-app/src/app/accordion/page.tsx b/apps/zero-runtime-next-app/src/app/accordion/page.tsx
deleted file mode 100644
index ad3990c6112c7d..00000000000000
--- a/apps/zero-runtime-next-app/src/app/accordion/page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import Typography from '@mui/material/Typography';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import Accordion from '@/components/Accordion/Accordion';
-import AccordionSummary from '@/components/Accordion/AccordionSummary';
-
-export default function AccordionExpandDefault() {
- return (
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
- sit amet blandit leo lobortis eget.
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
- sit amet blandit leo lobortis eget.
-
-
-
-
- );
-}
diff --git a/apps/zero-runtime-next-app/src/components/Accordion/Accordion.js b/apps/zero-runtime-next-app/src/components/Accordion/Accordion.js
deleted file mode 100644
index ed939a5cef6ce9..00000000000000
--- a/apps/zero-runtime-next-app/src/components/Accordion/Accordion.js
+++ /dev/null
@@ -1,315 +0,0 @@
-'use client';
-import * as React from 'react';
-import { isFragment } from 'react-is';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import chainPropTypes from '@mui/utils/chainPropTypes';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/zero-runtime';
-import { useThemeProps } from '@mui/material/styles';
-import Collapse from '@mui/material/Collapse';
-import Paper from '@mui/material/Paper';
-/* eslint-disable-next-line no-restricted-imports */
-import AccordionContext from '@mui/material/Accordion/AccordionContext';
-import { useControlled } from '@mui/material/utils';
-/* eslint-disable-next-line no-restricted-imports */
-import useSlot from '@mui/material/utils/useSlot';
-import { accordionClasses, getAccordionUtilityClass } from '@mui/material/Accordion';
-
-const useUtilityClasses = (ownerState) => {
- const { classes, square, expanded, disabled, disableGutters } = ownerState;
-
- const slots = {
- root: [
- 'root',
- !square && 'rounded',
- expanded && 'expanded',
- disabled && 'disabled',
- !disableGutters && 'gutters',
- ],
- region: ['region'],
- };
-
- return composeClasses(slots, getAccordionUtilityClass, classes);
-};
-
-const AccordionRoot = styled(Paper, {
- name: 'MuiAccordion',
- slot: 'Root',
- overridesResolver: (props, styles) => {
- const { ownerState } = props;
-
- return [
- { [`& .${accordionClasses.region}`]: styles.region },
- styles.root,
- !ownerState.square && styles.rounded,
- !ownerState.disableGutters && styles.gutters,
- ];
- },
-})(
- ({ theme }) => {
- const transition = {
- duration: theme.transitions.duration.shortest,
- };
-
- return {
- position: 'relative',
- transition: theme.transitions.create(['margin'], transition),
- overflowAnchor: 'none', // Keep the same scrolling position
- '&::before': {
- position: 'absolute',
- left: 0,
- top: -1,
- right: 0,
- height: 1,
- content: '""',
- opacity: 1,
- backgroundColor: (theme.vars || theme).palette.divider,
- transition: theme.transitions.create(['opacity', 'background-color'], transition),
- },
- '&:first-of-type': {
- '&::before': {
- display: 'none',
- },
- },
- [`&.${accordionClasses.expanded}`]: {
- '&::before': {
- opacity: 0,
- },
- '&:first-of-type': {
- marginTop: 0,
- },
- '&:last-of-type': {
- marginBottom: 0,
- },
- '& + &': {
- '&::before': {
- display: 'none',
- },
- },
- },
- [`&.${accordionClasses.disabled}`]: {
- backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
- },
- };
- },
- ({ theme }) => ({
- variants: [
- {
- props: (props) => !props.square,
- style: {
- borderRadius: 0,
- '&:first-of-type': {
- borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
- borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
- },
- '&:last-of-type': {
- borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
- borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
- // Fix a rendering issue on Edge
- '@supports (-ms-ime-align: auto)': {
- borderBottomLeftRadius: 0,
- borderBottomRightRadius: 0,
- },
- },
- },
- },
- {
- props: (props) => !props.disableGutters,
- style: {
- [`&.${accordionClasses.expanded}`]: {
- margin: '16px 0',
- },
- },
- },
- ],
- }),
-);
-
-const Accordion = React.forwardRef(function Accordion(inProps, ref) {
- const props = useThemeProps({ props: inProps, name: 'MuiAccordion' });
- const {
- children: childrenProp,
- className,
- defaultExpanded = false,
- disabled = false,
- disableGutters = false,
- expanded: expandedProp,
- onChange,
- square = false,
- slots = {},
- slotProps = {},
- TransitionComponent: TransitionComponentProp,
- TransitionProps: TransitionPropsProp,
- ...other
- } = props;
-
- const [expanded, setExpandedState] = useControlled({
- controlled: expandedProp,
- default: defaultExpanded,
- name: 'Accordion',
- state: 'expanded',
- });
-
- const handleChange = React.useCallback(
- (event) => {
- setExpandedState(!expanded);
-
- if (onChange) {
- onChange(event, !expanded);
- }
- },
- [expanded, onChange, setExpandedState],
- );
-
- const [summary, ...children] = React.Children.toArray(childrenProp);
- const contextValue = React.useMemo(
- () => ({ expanded, disabled, disableGutters, toggle: handleChange }),
- [expanded, disabled, disableGutters, handleChange],
- );
-
- const ownerState = {
- ...props,
- square,
- disabled,
- disableGutters,
- expanded,
- };
-
- const classes = useUtilityClasses(ownerState);
-
- const backwardCompatibleSlots = { transition: TransitionComponentProp, ...slots };
- const backwardCompatibleSlotProps = { transition: TransitionPropsProp, ...slotProps };
-
- const [TransitionSlot, transitionProps] = useSlot('transition', {
- elementType: Collapse,
- externalForwardedProps: {
- slots: backwardCompatibleSlots,
- slotProps: backwardCompatibleSlotProps,
- },
- ownerState,
- });
-
- return (
-
- {summary}
-
-
- {children}
-
-
-
- );
-});
-
-Accordion.propTypes /* remove-proptypes */ = {
- // ┌────────────────────────────── Warning ──────────────────────────────┐
- // │ These PropTypes are generated from the TypeScript type definitions. │
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
- // └─────────────────────────────────────────────────────────────────────┘
- /**
- * The content of the component.
- */
- children: chainPropTypes(PropTypes.node.isRequired, (props) => {
- const summary = React.Children.toArray(props.children)[0];
- if (isFragment(summary)) {
- return new Error(
- "MUI: The Accordion doesn't accept a Fragment as a child. " +
- 'Consider providing an array instead.',
- );
- }
-
- if (!React.isValidElement(summary)) {
- return new Error('MUI: Expected the first child of Accordion to be a valid element.');
- }
-
- return null;
- }),
- /**
- * Override or extend the styles applied to the component.
- */
- classes: PropTypes.object,
- /**
- * @ignore
- */
- className: PropTypes.string,
- /**
- * If `true`, expands the accordion by default.
- * @default false
- */
- defaultExpanded: PropTypes.bool,
- /**
- * If `true`, the component is disabled.
- * @default false
- */
- disabled: PropTypes.bool,
- /**
- * If `true`, it removes the margin between two expanded accordion items and the increase of height.
- * @default false
- */
- disableGutters: PropTypes.bool,
- /**
- * If `true`, expands the accordion, otherwise collapse it.
- * Setting this prop enables control over the accordion.
- */
- expanded: PropTypes.bool,
- /**
- * Callback fired when the expand/collapse state is changed.
- *
- * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
- * @param {boolean} expanded The `expanded` state of the accordion.
- */
- onChange: PropTypes.func,
- /**
- * The props used for each slot inside.
- * @default {}
- */
- slotProps: PropTypes.shape({
- transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
- }),
- /**
- * The components used for each slot inside.
- * @default {}
- */
- slots: PropTypes.shape({
- transition: PropTypes.elementType,
- }),
- /**
- * If `true`, rounded corners are disabled.
- * @default false
- */
- square: PropTypes.bool,
- /**
- * The system prop that allows defining system overrides as well as additional CSS styles.
- */
- sx: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
- PropTypes.func,
- PropTypes.object,
- ]),
- /**
- * The component used for the transition.
- * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
- * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
- */
- TransitionComponent: PropTypes.elementType,
- /**
- * Props applied to the transition element.
- * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
- * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
- */
- TransitionProps: PropTypes.object,
-};
-
-export default Accordion;
diff --git a/apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js b/apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js
deleted file mode 100644
index 01380e00bb63ab..00000000000000
--- a/apps/zero-runtime-next-app/src/components/Accordion/AccordionActions.js
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client';
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/zero-runtime';
-import { useThemeProps } from '@mui/material/styles';
-import { getAccordionActionsUtilityClass } from '@mui/material/AccordionActions';
-
-const useUtilityClasses = (ownerState) => {
- const { classes, disableSpacing } = ownerState;
-
- const slots = {
- root: ['root', !disableSpacing && 'spacing'],
- };
-
- return composeClasses(slots, getAccordionActionsUtilityClass, classes);
-};
-
-const AccordionActionsRoot = styled('div', {
- name: 'MuiAccordionActions',
- slot: 'Root',
- overridesResolver: (props, styles) => {
- const { ownerState } = props;
-
- return [styles.root, !ownerState.disableSpacing && styles.spacing];
- },
-})({
- display: 'flex',
- alignItems: 'center',
- padding: 8,
- justifyContent: 'flex-end',
- variants: [
- {
- props: (props) => !props.disableSpacing,
- style: {
- '& > :not(style) ~ :not(style)': {
- marginLeft: 8,
- },
- },
- },
- ],
-});
-
-const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) {
- const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' });
- const { className, disableSpacing = false, ...other } = props;
- const ownerState = { ...props, disableSpacing };
-
- const classes = useUtilityClasses(ownerState);
-
- return (
-
- );
-});
-
-AccordionActions.propTypes /* remove-proptypes */ = {
- // ┌────────────────────────────── Warning ──────────────────────────────┐
- // │ These PropTypes are generated from the TypeScript type definitions. │
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
- // └─────────────────────────────────────────────────────────────────────┘
- /**
- * The content of the component.
- */
- children: PropTypes.node,
- /**
- * Override or extend the styles applied to the component.
- */
- classes: PropTypes.object,
- /**
- * @ignore
- */
- className: PropTypes.string,
- /**
- * If `true`, the actions do not have additional margin.
- * @default false
- */
- disableSpacing: PropTypes.bool,
- /**
- * The system prop that allows defining system overrides as well as additional CSS styles.
- */
- sx: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
- PropTypes.func,
- PropTypes.object,
- ]),
-};
-
-export default AccordionActions;
diff --git a/apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js b/apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js
deleted file mode 100644
index 3cbb1874a147fd..00000000000000
--- a/apps/zero-runtime-next-app/src/components/Accordion/AccordionSummary.js
+++ /dev/null
@@ -1,200 +0,0 @@
-'use client';
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/zero-runtime';
-import { useThemeProps } from '@mui/material/styles';
-import ButtonBase from '@mui/material/ButtonBase';
-/* eslint-disable-next-line no-restricted-imports */
-import AccordionContext from '@mui/material/Accordion/AccordionContext';
-import {
- accordionSummaryClasses,
- getAccordionSummaryUtilityClass,
-} from '@mui/material/AccordionSummary';
-
-const useUtilityClasses = (ownerState) => {
- const { classes, expanded, disabled, disableGutters } = ownerState;
-
- const slots = {
- root: ['root', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
- focusVisible: ['focusVisible'],
- content: ['content', expanded && 'expanded', !disableGutters && 'contentGutters'],
- expandIconWrapper: ['expandIconWrapper', expanded && 'expanded'],
- };
-
- return composeClasses(slots, getAccordionSummaryUtilityClass, classes);
-};
-
-const AccordionSummaryRoot = styled(ButtonBase, {
- name: 'MuiAccordionSummary',
- slot: 'Root',
- overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => {
- const transition = {
- duration: theme.transitions.duration.shortest,
- };
-
- return {
- display: 'flex',
- minHeight: 48,
- padding: theme.spacing(0, 2),
- transition: theme.transitions.create(['min-height', 'background-color'], transition),
- [`&.${accordionSummaryClasses.focusVisible}`]: {
- backgroundColor: (theme.vars || theme).palette.action.focus,
- },
- [`&.${accordionSummaryClasses.disabled}`]: {
- opacity: (theme.vars || theme).palette.action.disabledOpacity,
- },
- [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
- cursor: 'pointer',
- },
- variants: [
- {
- props: (props) => !props.disableGutters,
- style: {
- [`&.${accordionSummaryClasses.expanded}`]: {
- minHeight: 64,
- },
- },
- },
- ],
- };
-});
-
-const AccordionSummaryContent = styled('div', {
- name: 'MuiAccordionSummary',
- slot: 'Content',
- overridesResolver: (props, styles) => styles.content,
-})(({ theme }) => ({
- display: 'flex',
- flexGrow: 1,
- margin: '12px 0',
- variants: [
- {
- props: (props) => !props.disableGutters,
- style: {
- transition: theme.transitions.create(['margin'], {
- duration: theme.transitions.duration.shortest,
- }),
- [`&.${accordionSummaryClasses.expanded}`]: {
- margin: '20px 0',
- },
- },
- },
- ],
-}));
-
-const AccordionSummaryExpandIconWrapper = styled('div', {
- name: 'MuiAccordionSummary',
- slot: 'ExpandIconWrapper',
- overridesResolver: (props, styles) => styles.expandIconWrapper,
-})(({ theme }) => ({
- display: 'flex',
- color: (theme.vars || theme).palette.action.active,
- transform: 'rotate(0deg)',
- transition: theme.transitions.create('transform', {
- duration: theme.transitions.duration.shortest,
- }),
- [`&.${accordionSummaryClasses.expanded}`]: {
- transform: 'rotate(180deg)',
- },
-}));
-
-const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref) {
- const props = useThemeProps({ props: inProps, name: 'MuiAccordionSummary' });
- const { children, className, expandIcon, focusVisibleClassName, onClick, ...other } = props;
-
- const { disabled = false, disableGutters, expanded, toggle } = React.useContext(AccordionContext);
- const handleChange = (event) => {
- if (toggle) {
- toggle(event);
- }
- if (onClick) {
- onClick(event);
- }
- };
-
- const ownerState = {
- ...props,
- expanded,
- disabled,
- disableGutters,
- };
-
- const classes = useUtilityClasses(ownerState);
-
- return (
-
-
- {children}
-
- {expandIcon && (
-
- {expandIcon}
-
- )}
-
- );
-});
-
-AccordionSummary.propTypes /* remove-proptypes */ = {
- // ┌────────────────────────────── Warning ──────────────────────────────┐
- // │ These PropTypes are generated from the TypeScript type definitions. │
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
- // └─────────────────────────────────────────────────────────────────────┘
- /**
- * The content of the component.
- */
- children: PropTypes.node,
- /**
- * Override or extend the styles applied to the component.
- */
- classes: PropTypes.object,
- /**
- * @ignore
- */
- className: PropTypes.string,
- /**
- * The icon to display as the expand indicator.
- */
- expandIcon: PropTypes.node,
- /**
- * This prop can help identify which element has keyboard focus.
- * The class name will be applied when the element gains the focus through keyboard interaction.
- * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
- * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
- * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
- * if needed.
- */
- focusVisibleClassName: PropTypes.string,
- /**
- * @ignore
- */
- onClick: PropTypes.func,
- /**
- * The system prop that allows defining system overrides as well as additional CSS styles.
- */
- sx: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
- PropTypes.func,
- PropTypes.object,
- ]),
-};
-
-export default AccordionSummary;