@astral/ui 4.18.2 → 4.18.4

package/node/components/Tag/Tag.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const icons_1 = require("../../icons");
+const CrossSmOutlineSm_1 = require("../../icons/CrossSmOutlineSm");
 const Typography_1 = require("../Typography");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -26,5 +26,5 @@ exports.Tag = (0, react_1.forwardRef)(({ onDelete, color = 'grey', variant = 'co
                     tagColor: color,
                 }),
             })] }));
-    return ((0, jsx_runtime_1.jsx)(TagContext_1.TagContextProvider, { variant: variant, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: ref, "$size": size, "$color": color, "$variant": variant, "$isDisabled": disabled, "$isRemovable": Boolean(onDelete), className: classnames, ...restProps, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.tagClassnames.icon, children: icon })), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", component: styles_1.Label, children: labelContent }), onDelete && !disabled && ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { onClick: handleDelete, "$color": color, "$variant": variant, "$size": size, "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442", children: (0, jsx_runtime_1.jsx)(icons_1.CrossSmOutlineSm, {}) }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(TagContext_1.TagContextProvider, { variant: variant, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: ref, "$size": size, "$color": color, "$variant": variant, "$isDisabled": disabled, "$isRemovable": Boolean(onDelete), className: classnames, ...restProps, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.tagClassnames.icon, children: icon })), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", component: styles_1.Label, children: labelContent }), onDelete && !disabled && ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { onClick: handleDelete, "$color": color, "$variant": variant, "$size": size, "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442", children: (0, jsx_runtime_1.jsx)(CrossSmOutlineSm_1.CrossSmOutlineSm, {}) }))] }) }));
 });

package/node/components/Tag/styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type BadgeColor } from '../Badge';
-import { type Theme } from '../theme';
+import { type Theme } from '../theme/types';
 import { type TagColor, type TagSize, type TagVariant } from './types';
 type StyledTagProps = {
     color: TagColor;
@@ -28,10 +28,10 @@ export declare const IconWrapper: import("@emotion/styled/dist/declarations/src/
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledIconButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "variant" | "component" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
-    variant?: "light" | "link" | "outlined" | "text" | "contained" | undefined;
+export declare const StyledIconButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material/Button").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
-    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {

package/node/components/Tag/styles.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabelWrapper = exports.Wrapper = exports.StyledIconButton = exports.IconWrapper = exports.Label = exports.LabelContainer = exports.getDeleteIconColor = exports.getBadgeColor = void 0;
-const material_1 = require("@mui/material");
+const Button_1 = require("@mui/material/Button");
+const Typography_1 = require("@mui/material/Typography");
 const Grid_1 = require("../Grid");
 const IconButton_1 = require("../IconButton");
 const SvgIcon_1 = require("../SvgIcon");
@@ -122,7 +123,7 @@ exports.LabelContainer = (0, styled_1.styled)(Grid_1.Grid, {
   justify-content: flex-start;
 
   /* Разделитель между badge слева и label справа */
-  & > .${constants_1.tagClassnames.badge} + .${material_1.typographyClasses.root}::before {
+  & > .${constants_1.tagClassnames.badge} + .${Typography_1.typographyClasses.root}::before {
     content: '';
 
     display: ${({ $variant }) => $variant === 'text' ? 'none' : 'inline-block'};
@@ -138,7 +139,7 @@ exports.LabelContainer = (0, styled_1.styled)(Grid_1.Grid, {
   }
 
   /* Разделитель между label слева и badge справа */
-  & > .${material_1.typographyClasses.root} + .${constants_1.tagClassnames.badge}::before {
+  & > .${Typography_1.typographyClasses.root} + .${constants_1.tagClassnames.badge}::before {
     content: '';
 
     display: ${({ $variant }) => $variant === 'text' ? 'none' : 'inline-block'};
@@ -180,7 +181,7 @@ exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.IconButton, {
   background-color: transparent;
   border-radius: ${({ $size }) => ($size === 'large' ? '60px' : '30px')};
 
-  &.${material_1.buttonClasses.root} .${SvgIcon_1.svgIconClassnames.root} {
+  &.${Button_1.buttonClasses.root} .${SvgIcon_1.svgIconClassnames.root} {
     font-size: 16px;
   }
 

package/node/components/TagsList/useLogic/useLogic.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
-const theme_1 = require("../../theme");
+const useTheme_1 = require("../../theme/hooks/useTheme");
 const useLogic = ({ data = [], keyId, getOptionLabel, onChange, }) => {
     // Сколько тегов можно отобразить в инпуте
     const [maxItems, setMaxItems] = (0, react_1.useState)(1);
     const ignoreResizeRef = (0, react_1.useRef)(false);
     const tagsContainerRef = (0, react_1.useRef)(null);
-    const theme = (0, theme_1.useTheme)();
+    const theme = (0, useTheme_1.useTheme)();
     /**
      * Определяет, сколько тегов можно отобразить в строке,
      * учитывая ширину контейнера и промежутки (gap) между тегами.

package/node/components/TextField/TextField.d.ts

@@ -1,4 +1,4 @@
-import { type TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import type { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
 import { type ReactNode } from 'react';
 import { type WithoutEmotionSpecific } from '../types';
 export type TextFieldProps = Omit<WithoutEmotionSpecific<MuiTextFieldProps>, 'variant' | 'color' | 'select' | 'margin' | 'multiline' | 'SelectProps'> & {

package/node/components/TextField/styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTextField: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    variant?: import("@mui/material").TextFieldVariants | undefined;
-} & Omit<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & {
+    variant?: import("@mui/material/TextField").TextFieldVariants | undefined;
+} & Omit<import("@mui/material/TextField").OutlinedTextFieldProps | import("@mui/material/TextField").StandardTextFieldProps | import("@mui/material/TextField").FilledTextFieldProps, "variant"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/TextField/styles.js

@@ -1,13 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTextField = void 0;
-const material_1 = require("@mui/material");
+const FormHelperText_1 = require("@mui/material/FormHelperText");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const styled_1 = require("../styled");
 const constants_1 = require("./constants");
-exports.StyledTextField = (0, styled_1.styled)(material_1.TextField) `
+exports.StyledTextField = (0, styled_1.styled)(TextField_1.default) `
   &.${constants_1.textFieldClassnames.hideHelperText}{
     
-    .${material_1.formHelperTextClasses.root}.${material_1.formHelperTextClasses.contained} {
+    .${FormHelperText_1.formHelperTextClasses.root}.${FormHelperText_1.formHelperTextClasses.contained} {
       min-height: 0;
       margin: 0;
       

package/node/components/ThemeProvider/ThemeProvider.d.ts

@@ -1,6 +1,5 @@
-import type { PropsWithChildren } from 'react';
-import { type ReactNode } from 'react';
-import { type Theme } from '../theme';
+import type { PropsWithChildren, ReactNode } from 'react';
+import { type Theme } from '../theme/types';
 export type ThemeProviderProps = {
     children: ReactNode;
     /**

package/node/components/ThemeProvider/ThemeProvider.js

@@ -1,12 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@emotion/react");
-const material_1 = require("@mui/material");
+const ThemeProvider_1 = __importDefault(require("@mui/material/styles/ThemeProvider"));
 const GlobalStyles_1 = require("../GlobalStyles");
 const ThemeProvider = (props) => {
     const { children, theme, withScopedStyles = false } = props;
-    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, { withScopedStyles: withScopedStyles, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { theme: theme, children: (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, { withScopedStyles: withScopedStyles, children: children }) }) }));
 };
 exports.ThemeProvider = ThemeProvider;

package/node/components/ToggleButton/styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 type ToggleButtonColor = 'grey' | 'primary' | 'error' | 'success' | 'warning';
-export declare const StyledToggleButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material").ToggleButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "action" | "color" | "classes" | "className" | "children" | "sx" | "tabIndex" | "onChange" | "onClick" | "fullWidth" | "size" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "selected"> & {
+export declare const StyledToggleButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/ToggleButton").ToggleButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "sx" | "classes" | "className" | "style" | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "disabled" | "size" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "value" | "selected"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $color: ToggleButtonColor;

package/node/components/ToggleButton/styles.js

@@ -1,7 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledToggleButton = void 0;
-const material_1 = require("@mui/material");
+const ButtonBase_1 = require("@mui/material/ButtonBase");
+const ToggleButton_1 = __importStar(require("@mui/material/ToggleButton"));
+const ToggleButtonGroup_1 = require("@mui/material/ToggleButtonGroup");
 const Button_1 = require("../Button");
 const styled_1 = require("../styled");
 const constants_1 = require("./constants");
@@ -50,7 +75,7 @@ const toggleButtonColorStyle = ({ theme, color, selected, disabled, state = 'def
   background-color: ${getBgColor({ theme, color, isSelected: selected, isDisabled: disabled, state })};
   border-color: ${getBorderColor({ theme, color, isSelected: selected, state })};
 `;
-exports.StyledToggleButton = (0, styled_1.styled)(material_1.ToggleButton, {
+exports.StyledToggleButton = (0, styled_1.styled)(ToggleButton_1.default, {
     shouldForwardProp: (prop) => !['$color'].includes(prop),
 }) `
   gap: ${({ theme }) => theme.spacing(1)};
@@ -75,7 +100,7 @@ exports.StyledToggleButton = (0, styled_1.styled)(material_1.ToggleButton, {
     ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'active' })};
   }
   
-  &.${material_1.toggleButtonClasses.selected} {
+  &.${ToggleButton_1.toggleButtonClasses.selected} {
     z-index: 2;
 
     ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, selected: true })}
@@ -95,7 +120,7 @@ exports.StyledToggleButton = (0, styled_1.styled)(material_1.ToggleButton, {
     border-color: ${({ theme }) => theme.palette.components.focused};
   }
   
-  &.${material_1.buttonBaseClasses.root}.${material_1.toggleButtonGroupClasses.grouped}:not(:first-of-type) {
+  &.${ButtonBase_1.buttonBaseClasses.root}.${ToggleButtonGroup_1.toggleButtonGroupClasses.grouped}:not(:first-of-type) {
      border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color })};
 
   &:hover {
@@ -106,7 +131,7 @@ exports.StyledToggleButton = (0, styled_1.styled)(material_1.ToggleButton, {
     border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, state: 'active' })};
   }
 
-  &.${material_1.toggleButtonClasses.selected} {
+  &.${ToggleButton_1.toggleButtonClasses.selected} {
     border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, isSelected: true })};
 
     &:hover {

package/node/components/ToggleButton/types.d.ts

@@ -1,4 +1,4 @@
-import type { ToggleButtonProps as MuiToggleButtonProps } from '@mui/material';
+import type { ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';
 import type { WithoutEmotionSpecific } from '../types';
 declare module '@mui/material/ToggleButton' {
     interface ToggleButtonPropsColorOverrides {

package/node/components/ToggleButton/useLogic/useLogic.d.ts

@@ -6,22 +6,11 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
     isVisibleCounter: boolean;
     children: import("react").ReactNode;
     disabled: boolean | undefined;
-    color: "grey" | "error" | "success" | "warning" | "primary";
+    color: "primary" | "success" | "warning" | "error" | "grey";
     selected: boolean | undefined;
     counterLabel: string | number | undefined;
     restProps: {
-        form?: string | undefined;
-        slot?: string | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined;
-        inert?: boolean | undefined;
-        action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-        content?: string | undefined;
-        translate?: "no" | "yes" | undefined;
         classes?: (Partial<import("@mui/material").ToggleButtonClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
-        className?: string | undefined;
-        ref?: import("react").Ref<HTMLButtonElement> | undefined;
-        key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
@@ -29,20 +18,26 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
         accessKey?: string | undefined;
         autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
         autoFocus?: boolean | undefined;
+        className?: string | undefined;
         contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "previous" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
+        slot?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: import("react").CSSProperties | undefined;
         tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: import("react").AriaRole | undefined;
         about?: string | undefined;
+        content?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
         prefix?: string | undefined;
@@ -65,13 +60,14 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
         popover?: "" | "auto" | "manual" | "hint" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
         part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "inline" | "none" | "list" | "both" | undefined;
+        "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -81,7 +77,7 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
@@ -91,7 +87,7 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "true" | "false" | "tree" | undefined;
+        "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
@@ -108,7 +104,7 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
         "aria-posinset"?: number | undefined;
         "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
         "aria-readonly"?: (boolean | "true" | "false") | undefined;
-        "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
         "aria-required"?: (boolean | "true" | "false") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
@@ -294,10 +290,13 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-        fullWidth?: boolean | undefined;
+        ref?: import("react").Ref<HTMLButtonElement> | undefined;
+        form?: string | undefined;
         size?: import("@mui/types").OverridableStringUnion<"large" | "medium" | "small", import("@mui/material").ToggleButtonPropsSizeOverrides> | undefined;
         name?: string | undefined;
         type?: "button" | "submit" | "reset" | undefined;
+        key?: import("react").Key | null | undefined;
+        action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
         centerRipple?: boolean | undefined;
         disableRipple?: boolean | undefined;
         disableTouchRipple?: boolean | undefined;
@@ -308,6 +307,7 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
         TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
         touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
         disableFocusRipple?: boolean | undefined;
+        fullWidth?: boolean | undefined;
         formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;

package/node/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,4 +1,4 @@
-import { type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material';
+import { type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
 import { type ReactNode } from 'react';
 import type { WithoutEmotionSpecific } from '../types';
 export type ToggleButtonGroupProps = WithoutEmotionSpecific<Omit<MuiToggleButtonGroupProps, 'orientation'>> & {

package/node/components/ToggleButtonGroup/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const StyledToggleButtonGroup: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material").ToggleButtonGroupProps & {
+export declare const StyledToggleButtonGroup: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/ToggleButtonGroup").ToggleButtonGroupProps & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $isError?: boolean | undefined;

package/node/components/ToggleButtonGroup/styles.js

@@ -1,9 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledToggleButtonGroup = void 0;
-const material_1 = require("@mui/material");
+const ToggleButtonGroup_1 = __importDefault(require("@mui/material/ToggleButtonGroup"));
 const styled_1 = require("../styled");
-exports.StyledToggleButtonGroup = (0, styled_1.styled)(material_1.ToggleButtonGroup, {
+exports.StyledToggleButtonGroup = (0, styled_1.styled)(ToggleButtonGroup_1.default, {
     shouldForwardProp: (prop) => !['$isError'].includes(prop),
 }) `
   position: relative;

package/node/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type TooltipProps as MuiTooltipProps } from '@mui/material';
+import { type TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip';
 import { type WithoutEmotionSpecific } from '../types';
 import { type TooltipSize } from './types';
 export type TooltipProps = WithoutEmotionSpecific<MuiTooltipProps> & {

package/node/components/Tooltip/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type TooltipProps as MuiTooltipProps } from '@mui/material';
+import { type TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip';
 import { type WithoutEmotionSpecific } from '../types';
 import { type TooltipSize } from './types';
 export declare const StyledTooltip: import("@emotion/styled/dist/declarations/src/types").StyledComponent<WithoutEmotionSpecific<MuiTooltipProps> & {

package/node/components/Tooltip/styles.js

@@ -1,11 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentWrapper = exports.StyledTooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Tooltip_1 = __importStar(require("@mui/material/Tooltip"));
 const styled_1 = require("../styled");
-exports.StyledTooltip = (0, styled_1.styled)(({ className, ...props }) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { ...props, classes: { popper: className } }))) `
-  & .${material_1.tooltipClasses.tooltip} {
+exports.StyledTooltip = (0, styled_1.styled)(({ className, ...props }) => ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { ...props, classes: { popper: className } }))) `
+  & .${Tooltip_1.tooltipClasses.tooltip} {
     margin: 0;
 
     font-size: ${({ size, theme }) => size === 'small'
@@ -21,24 +44,24 @@ exports.StyledTooltip = (0, styled_1.styled)(({ className, ...props }) => ((0, j
     border-radius: ${({ theme }) => theme.shape.small};
   }
 
-  & .${material_1.tooltipClasses.arrow} {
+  & .${Tooltip_1.tooltipClasses.arrow} {
     font-size: ${({ theme }) => theme.typography.caption.fontSize};
     color: ${({ theme }) => theme.palette.grey[900]};
   }
 
-  &&[data-popper-placement*='top'] .${material_1.tooltipClasses.tooltip} {
+  &&[data-popper-placement*='top'] .${Tooltip_1.tooltipClasses.tooltip} {
     margin-bottom: ${({ theme }) => theme.spacing(2)};
   }
 
-  &&[data-popper-placement*='bottom'] .${material_1.tooltipClasses.tooltip} {
+  &&[data-popper-placement*='bottom'] .${Tooltip_1.tooltipClasses.tooltip} {
     margin-top: ${({ theme }) => theme.spacing(2)};
   }
 
-  &&[data-popper-placement*='left'] .${material_1.tooltipClasses.tooltip} {
+  &&[data-popper-placement*='left'] .${Tooltip_1.tooltipClasses.tooltip} {
     margin-right: ${({ theme }) => theme.spacing(2)};
   }
 
-  &&[data-popper-placement*='right'] .${material_1.tooltipClasses.tooltip} {
+  &&[data-popper-placement*='right'] .${Tooltip_1.tooltipClasses.tooltip} {
     margin-left: ${({ theme }) => theme.spacing(2)};
   }
 `;

package/node/components/Tree/MultipleTreeList/TreeItem/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = exports.StyledTreeItem = exports.StyledCheckbox = void 0;
-const material_1 = require("@mui/material");
+const FormControlLabel_1 = require("@mui/material/FormControlLabel");
 const Checkbox_1 = require("../../../Checkbox");
 const styled_1 = require("../../../styled");
 const mixins_1 = require("../../../styled/mixins");
@@ -20,7 +20,7 @@ exports.StyledCheckbox = (0, styled_1.styled)(Checkbox_1.Checkbox) `
   }
 `;
 exports.StyledTreeItem = (0, styled_1.styled)(TreeItem_1.TreeItem) `
-  .${material_1.formControlLabelClasses.root} .${material_1.formControlLabelClasses.label} {
+  .${FormControlLabel_1.formControlLabelClasses.root} .${FormControlLabel_1.formControlLabelClasses.label} {
     margin-left: 0;
   }