@12-apps/ui 6.11.1 → 6.12.0

package/src/components/form/InputOTP/InputOTP.tsx

@@ -1,5 +1,6 @@
-import { Box, TextField } from '@mui/material';
-import { styled } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import TextField from '@mui/material/TextField/index.js';
+import { styled } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';

package/src/components/form/Label/Label.parts.tsx

@@ -1,4 +1,6 @@
-import { Box, CircularProgress, useTheme } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import CircularProgress from '@mui/material/CircularProgress/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { LabelProps } from './Label.types';

package/src/components/form/Label/Label.styles.ts

@@ -1,5 +1,5 @@
-import { alpha } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material';
+import { alpha } from '@mui/material/styles/index.js';
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { LabelProps } from './Label.types';
 import { accentFor} from '../../../tokens/scales';

package/src/components/form/Label/Label.tsx

@@ -1,4 +1,7 @@
-import { Box, Tooltip, Typography, useTheme } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import Tooltip from '@mui/material/Tooltip/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';

package/src/components/form/Menubar/Menubar.item.tsx

@@ -1,15 +1,13 @@
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import {
-  Box,
-  Button,
-  Chip,
-  Divider,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  useTheme,
-} from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import Button from '@mui/material/Button/index.js';
+import Chip from '@mui/material/Chip/index.js';
+import Divider from '@mui/material/Divider/index.js';
+import ListItemIcon from '@mui/material/ListItemIcon/index.js';
+import ListItemText from '@mui/material/ListItemText/index.js';
+import Menu from '@mui/material/Menu/index.js';
+import MenuItem from '@mui/material/MenuItem/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { sizeStyles } from './Menubar.styles';

package/src/components/form/Menubar/Menubar.separator.tsx

@@ -1,4 +1,4 @@
-import { Divider } from '@mui/material';
+import Divider from '@mui/material/Divider/index.js';
 import React from 'react';
 
 import type { MenubarSeparatorProps } from './Menubar.types';

package/src/components/form/Menubar/Menubar.styles.ts

@@ -1,5 +1,5 @@
-import { alpha } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material';
+import { alpha } from '@mui/material/styles/index.js';
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { MenubarProps } from './Menubar.types';
 import { accentFor} from '../../../tokens/scales';

package/src/components/form/Menubar/Menubar.toolbar.tsx

@@ -1,5 +1,7 @@
-import { Box, CircularProgress, Toolbar } from '@mui/material';
-import type { CSSObject } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import CircularProgress from '@mui/material/CircularProgress/index.js';
+import Toolbar from '@mui/material/Toolbar/index.js';
+import type { CSSObject } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { MenubarItemView } from './Menubar.item';

package/src/components/form/Menubar/Menubar.tsx

@@ -1,16 +1,14 @@
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import {
-  AppBar,
-  Box,
-  Button,
-  Divider,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import AppBar from '@mui/material/AppBar/index.js';
+import Box from '@mui/material/Box/index.js';
+import Button from '@mui/material/Button/index.js';
+import Divider from '@mui/material/Divider/index.js';
+import ListItemIcon from '@mui/material/ListItemIcon/index.js';
+import ListItemText from '@mui/material/ListItemText/index.js';
+import Menu from '@mui/material/Menu/index.js';
+import MenuItem from '@mui/material/MenuItem/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React, { useState } from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';

package/src/components/form/PasswordStrength/PasswordStrength.helpers.tsx

@@ -1,7 +1,8 @@
 import SecurityIcon from '@mui/icons-material/Security';
 import SuccessIcon from '@mui/icons-material/CheckCircle';
 import WarningIcon from '@mui/icons-material/Warning';
-import { Box, Typography } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import Typography from '@mui/material/Typography/index.js';
 import React from 'react';
 
 import type { PasswordRequirementCopy, PasswordStrengthCopy } from '../../../copy';

package/src/components/form/PasswordStrength/PasswordStrength.tsx

@@ -1,17 +1,13 @@
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 
-import {
-  alpha,
-  Box,
-  Chip,
-  Fade,
-  keyframes,
-  LinearProgress,
-  Stack,
-  styled,
-  Typography,
-  useTheme } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import Chip from '@mui/material/Chip/index.js';
+import Fade from '@mui/material/Fade/index.js';
+import LinearProgress from '@mui/material/LinearProgress/index.js';
+import Stack from '@mui/material/Stack/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';
 import type { FC} from 'react';
 import React, { useMemo } from 'react';
 

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -1,17 +1,14 @@
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import PhoneIcon from '@mui/icons-material/Phone';
-import {
-  alpha,
-  Box,
-  InputAdornment,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  styled,
-  TextField,
-  Typography,
-  useTheme } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import InputAdornment from '@mui/material/InputAdornment/index.js';
+import ListItemIcon from '@mui/material/ListItemIcon/index.js';
+import ListItemText from '@mui/material/ListItemText/index.js';
+import Menu from '@mui/material/Menu/index.js';
+import MenuItem from '@mui/material/MenuItem/index.js';
+import TextField from '@mui/material/TextField/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { alpha, styled, useTheme } from '@mui/material/styles/index.js';
 import type { FC} from 'react';
 import React, {  } from 'react';
 

package/src/components/form/RadioGroup/RadioGroup.animations.ts

@@ -1,4 +1,4 @@
-import { keyframes } from '@mui/material';
+import { keyframes } from '@mui/material/styles/index.js';
 
 export const glowAnimation = keyframes`
   0% {

package/src/components/form/RadioGroup/RadioGroup.styles.ts

@@ -1,5 +1,5 @@
-import { alpha } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material';
+import { alpha } from '@mui/material/styles/index.js';
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from './RadioGroup.animations';
 

package/src/components/form/RadioGroup/RadioGroup.tsx

@@ -1,4 +1,5 @@
-import { Box, FormHelperText } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import FormHelperText from '@mui/material/FormHelperText/index.js';
 import React, { forwardRef } from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';

package/src/components/form/RadioGroup/RadioGroup.types.ts

@@ -1,5 +1,5 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
-import type { RadioGroupProps as MuiRadioGroupProps } from '@mui/material';
+import type { RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup/index.js';
 import type React from 'react';
 
 export interface RadioOption {

package/src/components/form/RadioGroup/RadioGroup.variants.tsx

@@ -1,15 +1,13 @@
-import {
-  Box,
-  ButtonBase,
-  Card,
-  CardContent,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup as MuiRadioGroup,
-  Typography,
-} from '@mui/material';
-import { styled } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import ButtonBase from '@mui/material/ButtonBase/index.js';
+import Card from '@mui/material/Card/index.js';
+import CardContent from '@mui/material/CardContent/index.js';
+import FormControlLabel from '@mui/material/FormControlLabel/index.js';
+import FormLabel from '@mui/material/FormLabel/index.js';
+import Radio from '@mui/material/Radio/index.js';
+import MuiRadioGroup from '@mui/material/RadioGroup/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import {

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -1,11 +1,9 @@
-import {
-  alpha,
-  Box,
-  Paper,
-  useTheme } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import Paper from '@mui/material/Paper/index.js';
+import { alpha, useTheme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
-import type { Theme } from '@mui/material';
+import type { Theme } from '@mui/material/styles/index.js';
 import { useRichTextEditor } from './RichTextEditor.hooks';
 import type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types';
 import { RichTextEditorToolbar } from './RichTextEditorToolbar';

package/src/components/form/RichTextEditor/RichTextEditorToolbar.tsx

@@ -8,7 +8,13 @@ import FormatStrikethrough from '@mui/icons-material/FormatStrikethrough';
 import FormatUnderlined from '@mui/icons-material/FormatUnderlined';
 import Image from '@mui/icons-material/Image';
 import Link from '@mui/icons-material/Link';
-import { alpha, Box, Divider, IconButton, Toolbar, Tooltip, Typography } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import Divider from '@mui/material/Divider/index.js';
+import IconButton from '@mui/material/IconButton/index.js';
+import Toolbar from '@mui/material/Toolbar/index.js';
+import Tooltip from '@mui/material/Tooltip/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { alpha } from '@mui/material/styles/index.js';
 import type { FC, ReactElement } from 'react';
 import React from 'react';
 

package/src/components/form/SearchPalette/SearchPalette.parts.tsx

@@ -1,16 +1,14 @@
 import KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn';
 import SearchIcon from '@mui/icons-material/Search';
-import {
-  Avatar,
-  Box,
-  Chip,
-  CircularProgress,
-  InputBase,
-  List,
-  ListItemButton,
-  Paper,
-  Typography,
-} from '@mui/material';
+import Avatar from '@mui/material/Avatar/index.js';
+import Box from '@mui/material/Box/index.js';
+import Chip from '@mui/material/Chip/index.js';
+import CircularProgress from '@mui/material/CircularProgress/index.js';
+import InputBase from '@mui/material/InputBase/index.js';
+import List from '@mui/material/List/index.js';
+import ListItemButton from '@mui/material/ListItemButton/index.js';
+import Paper from '@mui/material/Paper/index.js';
+import Typography from '@mui/material/Typography/index.js';
 import React from 'react';
 
 import type { SearchFilterChip, SearchResultLead } from './SearchPalette.types';

package/src/components/form/Select/Select.tsx

@@ -1,15 +1,9 @@
-import {
-  alpha,
-  type CSSObject,
-  FormControl,
-  FormHelperText,
-  InputLabel,
-  keyframes,
-  MenuItem,
-  Select as MuiSelect,
-  styled,
-  type Theme,
-} from '@mui/material';
+import FormControl from '@mui/material/FormControl/index.js';
+import FormHelperText from '@mui/material/FormHelperText/index.js';
+import InputLabel from '@mui/material/InputLabel/index.js';
+import MenuItem from '@mui/material/MenuItem/index.js';
+import MuiSelect from '@mui/material/Select/index.js';
+import { alpha, type CSSObject, keyframes, styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { SelectProps } from './Select.types';

package/src/components/form/Select/Select.types.ts

@@ -1,5 +1,5 @@
 import type { SizeValue } from '../../../tokens/scales';
-import type { SelectProps as MuiSelectProps } from '@mui/material';
+import type { SelectProps as MuiSelectProps } from '@mui/material/Select/index.js';
 
 export type SelectVariant = 'default' | 'glass' | 'gradient';
 

package/src/components/form/Slider/Slider.animations.ts

@@ -1,4 +1,4 @@
-import { keyframes } from '@mui/material';
+import { keyframes } from '@mui/material/styles/index.js';
 
 export const glowAnimation = keyframes`
   0% {

package/src/components/form/Slider/Slider.styles.ts

@@ -1,5 +1,5 @@
-import { alpha } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material';
+import { alpha } from '@mui/material/styles/index.js';
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { glowAnimation, gradientShiftAnimation, pulseAnimation } from './Slider.animations';
 

package/src/components/form/Slider/Slider.tsx

@@ -1,5 +1,7 @@
-import { Box, Slider as MuiSlider, Typography } from '@mui/material';
-import { styled } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import MuiSlider from '@mui/material/Slider/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { styled } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';

package/src/components/form/Slider/Slider.types.ts

@@ -1,5 +1,5 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
-import type { SliderProps as MuiSliderProps } from '@mui/material';
+import type { SliderProps as MuiSliderProps } from '@mui/material/Slider/index.js';
 
 export interface SliderProps extends Omit<MuiSliderProps, 'color' | 'size'> {
   /**

package/src/components/form/Switch/Switch.animations.ts

@@ -1,4 +1,4 @@
-import { keyframes } from '@mui/material';
+import { keyframes } from '@mui/material/styles/index.js';
 
 export const glowAnimation = keyframes`
   0% {

package/src/components/form/Switch/Switch.parts.tsx

@@ -1,5 +1,8 @@
-import { Box, FormHelperText, Switch as MuiSwitch, Typography } from '@mui/material';
-import { styled } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import FormHelperText from '@mui/material/FormHelperText/index.js';
+import MuiSwitch from '@mui/material/Switch/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { switchSx } from './Switch.styles';

package/src/components/form/Switch/Switch.styles.ts

@@ -1,5 +1,5 @@
-import { alpha } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material';
+import { alpha } from '@mui/material/styles/index.js';
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import {
   bounceAnimation,

package/src/components/form/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
 import React, { forwardRef } from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';

package/src/components/form/Switch/Switch.types.ts

@@ -1,5 +1,5 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
-import type { SwitchProps as MuiSwitchProps } from '@mui/material';
+import type { SwitchProps as MuiSwitchProps } from '@mui/material/Switch/index.js';
 import type { FocusEventHandler,MouseEventHandler, ReactNode } from 'react';
 
 export interface SwitchProps extends Omit<MuiSwitchProps, 'color' | 'size'> {

package/src/components/form/Textarea/Textarea.styles.ts

@@ -1,5 +1,5 @@
-import { alpha, keyframes } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material';
+import { alpha, keyframes } from '@mui/material/styles/index.js';
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 const glowAnimation = keyframes`
   0% {

package/src/components/form/Textarea/Textarea.tsx

@@ -1,11 +1,9 @@
-import {
-  alpha,
-  Box,
-  FormHelperText,
-  InputLabel,
-  TextareaAutosize } from '@mui/material';
-import type { Theme } from '@mui/material';
-import { styled } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import FormHelperText from '@mui/material/FormHelperText/index.js';
+import InputLabel from '@mui/material/InputLabel/index.js';
+import TextareaAutosize from '@mui/material/TextareaAutosize/index.js';
+import { alpha, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React, { lazy, Suspense, useState } from 'react';
 
 import {

package/src/components/form/Textarea/Textarea.types.ts

@@ -1,6 +1,6 @@
 import type { RichEditorToolbarCopy } from '../../../copy';
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
-import type { TextareaAutosizeProps } from '@mui/material';
+import type { TextareaAutosizeProps } from '@mui/material/TextareaAutosize/index.js';
 import type React from 'react';
 
 /**

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -8,9 +8,12 @@ import FormatListNumbered from '@mui/icons-material/FormatListNumbered';
 import FormatQuote from '@mui/icons-material/FormatQuote';
 import FormatUnderlined from '@mui/icons-material/FormatUnderlined';
 import Link from '@mui/icons-material/Link';
-import { alpha, Box, Divider, IconButton, Tooltip } from '@mui/material';
-import type { Theme } from '@mui/material';
-import { styled } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import Divider from '@mui/material/Divider/index.js';
+import IconButton from '@mui/material/IconButton/index.js';
+import Tooltip from '@mui/material/Tooltip/index.js';
+import { alpha, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { floatAnimation, getColorFromTheme } from './Textarea.styles';

package/src/components/form/Toggle/Toggle.styles.ts

@@ -1,5 +1,5 @@
-import { alpha, keyframes } from '@mui/material';
-import type { CSSObject, PaletteColor, Theme } from '@mui/material';
+import { alpha, keyframes } from '@mui/material/styles/index.js';
+import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';
 
 const glowAnimation = keyframes`
   0% { box-shadow: 0 0 5px currentColor; }

package/src/components/form/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
-import { ToggleButton } from '@mui/material';
-import { styled } from '@mui/material';
+import ToggleButton from '@mui/material/ToggleButton/index.js';
+import { styled } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import {

package/src/components/form/Toggle/Toggle.types.ts

@@ -1,5 +1,5 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
-import type { ToggleButtonProps } from '@mui/material';
+import type { ToggleButtonProps } from '@mui/material/ToggleButton/index.js';
 import type React from 'react';
 
 export interface ToggleProps extends Omit<ToggleButtonProps, 'color' | 'size'> {

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -1,6 +1,8 @@
-import { alpha, Box, ToggleButton, ToggleButtonGroup, useTheme } from '@mui/material';
-import type { Theme } from '@mui/material';
-import { styled } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import ToggleButton from '@mui/material/ToggleButton/index.js';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup/index.js';
+import { alpha, useTheme, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import type { ToggleGroupProps } from './ToggleGroup.types';

package/src/components/form/ToggleGroup/ToggleGroup.types.ts

@@ -1,5 +1,5 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
-import type { ToggleButtonGroupProps } from '@mui/material';
+import type { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup/index.js';
 import type React from 'react';
 
 export interface ToggleOption {

package/src/components/form/UploadButton/UploadButton.parts.tsx

@@ -1,6 +1,10 @@
 import AttachFileOutlined from '@mui/icons-material/AttachFileOutlined';
 import CloudUploadOutlined from '@mui/icons-material/CloudUploadOutlined';
-import { Box, Button, LinearProgress, Typography, useTheme } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import Button from '@mui/material/Button/index.js';
+import LinearProgress from '@mui/material/LinearProgress/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import type React from 'react';
 
 import type { DragHandlers } from './UploadButton.hooks';

package/src/components/form/UploadButton/UploadButton.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box/index.js';
 import React from 'react';
 
 import { useUploadButton } from './UploadButton.hooks';

package/src/components/layout/Accordion/Accordion.styles.ts

@@ -1,5 +1,5 @@
-import { alpha } from '@mui/material';
-import type { Theme } from '@mui/material';
+import { alpha } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 
 import type { AccordionVariant } from './Accordion.types';
 

package/src/components/layout/Accordion/Accordion.tsx

@@ -1,11 +1,9 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { 
-  Accordion as MuiAccordion,
-  AccordionActions as MuiAccordionActions,
-  AccordionDetails as MuiAccordionDetails,
-  AccordionSummary as MuiAccordionSummary,
-  alpha,
-  useTheme} from '@mui/material';
+import MuiAccordion from '@mui/material/Accordion/index.js';
+import MuiAccordionActions from '@mui/material/AccordionActions/index.js';
+import MuiAccordionDetails from '@mui/material/AccordionDetails/index.js';
+import MuiAccordionSummary from '@mui/material/AccordionSummary/index.js';
+import { alpha, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { accordionVariantStyles } from './Accordion.styles';

package/src/components/layout/Accordion/Accordion.types.ts

@@ -1,4 +1,4 @@
-import type { AccordionProps as MuiAccordionProps } from '@mui/material';
+import type { AccordionProps as MuiAccordionProps } from '@mui/material/Accordion/index.js';
 import type { ReactNode } from 'react';
 
 export type AccordionVariant = 'default' | 'glass' | 'bordered' | 'separated';

package/src/components/layout/Card/Card.styles.ts

@@ -1,5 +1,5 @@
-import { alpha, keyframes } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material';
+import { alpha, keyframes } from '@mui/material/styles/index.js';
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { CardProps, CardVariant } from './Card.types';
 

package/src/components/layout/Card/Card.tsx

@@ -1,13 +1,11 @@
-import {
-  Box,
-  Card as MuiCard,
-  CardActions as MuiCardActions,
-  CardContent as MuiCardContent,
-  CardHeader as MuiCardHeader,
-  CardMedia as MuiCardMedia,
-  CircularProgress,
-  useTheme,
-} from '@mui/material';
+import Box from '@mui/material/Box/index.js';
+import MuiCard from '@mui/material/Card/index.js';
+import MuiCardActions from '@mui/material/CardActions/index.js';
+import MuiCardContent from '@mui/material/CardContent/index.js';
+import MuiCardHeader from '@mui/material/CardHeader/index.js';
+import MuiCardMedia from '@mui/material/CardMedia/index.js';
+import CircularProgress from '@mui/material/CircularProgress/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { resolveCardProps } from './Card.helpers';

package/src/components/layout/Card/Card.types.ts

@@ -1,4 +1,4 @@
-import type { CardProps as MuiCardProps } from '@mui/material';
+import type { CardProps as MuiCardProps } from '@mui/material/Card/index.js';
 import type { ReactNode } from 'react';
 
 export type CardVariant = 'elevated' | 'outlined' | 'glass' | 'gradient' | 'neumorphic' | 'section';