@astral/ui 4.17.5 → 4.17.6

package/node/components/DashboardSidebarPopover/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledBottomDrawer = exports.Title = exports.Wrapper = void 0;
+const BottomDrawer_1 = require("../BottomDrawer");
+const styled_1 = require("../styled");
+const Typography_1 = require("../Typography");
+const constants_1 = require("./constants");
+exports.Wrapper = styled_1.styled.ul `
+  display: flex;
+  flex-direction: column;
+
+  width: ${constants_1.LIST_WIDTH};
+  margin: 0;
+  padding: ${({ theme }) => theme.spacing(0)};
+
+  list-style-type: none;
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: unset;
+  }
+`;
+exports.Title = (0, styled_1.styled)(Typography_1.Typography) `
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+exports.StyledBottomDrawer = (0, styled_1.styled)(BottomDrawer_1.BottomDrawer) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;

package/node/components/DashboardSidebarPopover/useLogic/useLogic.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
+const useLogic = () => {
+    const { setIsPopupOpen, isPopupOpen } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
+    const handleClosePopover = () => {
+        setIsPopupOpen(false);
+    };
+    return { handleClosePopover, isPopupOpen };
+};
+exports.useLogic = useLogic;

package/node/components/DashboardSidebarProvider/DashboardSidebarProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode, type RefObject } from 'react';
-export type SidebarContextProps = {
+export type DashboardSidebarContextProps = {
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean) => void;
     isPinned: boolean;
@@ -22,7 +22,7 @@ export type DashboardSidebarProviderProps = {
     localStorageKey?: string;
     isFocusedMode?: boolean;
 };
-export declare const SidebarContext: import("react").Context<SidebarContextProps>;
+export declare const DashboardSidebarContext: import("react").Context<DashboardSidebarContextProps>;
 /**
  * Провайдер предназначен для проброса состояния боковой панел, а так же управления этим состоянием.
  * В данный провайдер обернут компонент DashboardLayout.

package/node/components/DashboardSidebarProvider/DashboardSidebarProvider.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardSidebarProvider = exports.SidebarContext = void 0;
+exports.DashboardSidebarProvider = exports.DashboardSidebarContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const constants_1 = require("./constants");
 const hooks_1 = require("./hooks");
-exports.SidebarContext = (0, react_1.createContext)({
+exports.DashboardSidebarContext = (0, react_1.createContext)({
     collapsedIn: false,
     onToggleSidebar: () => undefined,
     isPinned: true,
@@ -28,6 +28,6 @@ const DashboardSidebarProvider = ({ children, localStorageKey = constants_1.LOCA
         setIsPopupOpen,
         popoverAnchorRef,
     };
-    return ((0, jsx_runtime_1.jsx)(exports.SidebarContext.Provider, { value: value, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.DashboardSidebarContext.Provider, { value: value, children: children }));
 };
 exports.DashboardSidebarProvider = DashboardSidebarProvider;

package/node/components/DashboardSidebarSkeleton/DashboardSidebarSkeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DashboardSidebarSkeleton: () => JSX.Element;

package/node/components/DashboardSidebarSkeleton/DashboardSidebarSkeleton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardSidebarSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DashboardSidebar_1 = require("../DashboardSidebar");
+const Skeleton_1 = require("../Skeleton");
+const utils_1 = require("../utils");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const DashboardSidebarSkeleton = () => {
+    const { isPinned } = (0, useLogic_1.useLogic)();
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isPinned": isPinned, className: (0, utils_1.classNames)(DashboardSidebar_1.dashboardSidebarClassnames.root), children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { shapeSize: isPinned ? 'medium' : 'small', height: 40, variant: "rounded" }), (0, jsx_runtime_1.jsxs)(styles_1.ListWrapper, { "$isPinned": isPinned, children: [(0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), (0, jsx_runtime_1.jsx)(styles_1.SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), (0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), (0, jsx_runtime_1.jsx)(styles_1.SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), (0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), (0, jsx_runtime_1.jsx)(styles_1.SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), isPinned && ((0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), (0, jsx_runtime_1.jsx)(styles_1.SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }))] })] }));
+};
+exports.DashboardSidebarSkeleton = DashboardSidebarSkeleton;

package/node/components/DashboardSidebarSkeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './DashboardSidebarSkeleton';

package/node/components/DashboardSidebarSkeleton/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DashboardSidebarSkeleton"), exports);

package/node/components/DashboardSidebarSkeleton/public.d.ts

@@ -0,0 +1 @@
+export { DashboardSidebarSkeleton } from './DashboardSidebarSkeleton';

package/node/components/DashboardSidebarSkeleton/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardSidebarSkeleton = void 0;
+var DashboardSidebarSkeleton_1 = require("./DashboardSidebarSkeleton");
+Object.defineProperty(exports, "DashboardSidebarSkeleton", { enumerable: true, get: function () { return DashboardSidebarSkeleton_1.DashboardSidebarSkeleton; } });

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isPinned: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ListWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isPinned: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkeletonDescription: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").SkeletonProps<import("react").ElementType, unknown>>, "animation" | "variant"> & {
+    component?: import("react").ElementType | undefined;
+    variant?: "text" | "rounded" | "circular" | undefined;
+    shapeSize?: "large" | "medium" | "small" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isPinned: boolean;
+}, {}, {}>;

package/node/components/DashboardSidebarSkeleton/styles.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonDescription = exports.ItemWrapper = exports.ListWrapper = exports.Wrapper = void 0;
+const Skeleton_1 = require("../Skeleton");
+const styled_1 = require("../styled");
+exports.Wrapper = (0, styled_1.styled)('div', {
+    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
+}) `
+  position: relative;
+
+  grid-column: 1;
+  grid-row: 2 / -1;
+
+  width: ${({ $isPinned }) => ($isPinned ? '242px' : '58px')};
+  padding: ${({ theme, $isPinned }) => $isPinned ? theme.spacing(4, 3) : theme.spacing(4, 2)};
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme }) => theme.shape.medium};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+exports.ListWrapper = (0, styled_1.styled)('div', {
+    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
+}) `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+
+  padding: ${({ theme, $isPinned }) => $isPinned ? theme.microSpacing(12, 3) : theme.microSpacing(12, 5)};
+`;
+exports.ItemWrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  align-items: center;
+`;
+exports.SkeletonDescription = (0, styled_1.styled)(Skeleton_1.Skeleton, {
+    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
+}) `
+  display: ${({ $isPinned }) => ($isPinned ? 'unset' : 'none')};
+`;

package/node/components/DashboardSidebarSkeleton/useLogic/useLogic.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
+const hooks_1 = require("../../hooks");
+const useLogic = () => {
+    // Достается напрямую, т.к. нет гарантий, что скелетон будет обернут в контекст
+    const [storageState = true] = (0, hooks_1.useLocalStorage)(DashboardSidebarProvider_1.LOCAL_STORAGE_KEY, true);
+    const [isPinned, setPinned] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        setPinned(storageState);
+    }, []);
+    return { isPinned };
+};
+exports.useLogic = useLogic;

package/node/components/DataGrid/Body/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {

package/node/components/DataGrid/Body/styles.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../../styles");
+const styled_1 = require("../../styled");
 const constants_1 = require("../constants");
-exports.Wrapper = (0, styles_1.styled)('ul', {
+exports.Wrapper = (0, styled_1.styled)('ul', {
     shouldForwardProp: (prop) => !['$minDisplayRows'].includes(prop),
 }) `
   overflow-y: auto;

package/node/components/DataGrid/Cell/styles.d.ts

@@ -5,7 +5,7 @@ type HeadCellProps = {
     $isDisabled?: boolean;
     $hasStartAdornment?: boolean;
 };
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & HeadCellProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DataGrid/Cell/styles.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../../styles");
+const styled_1 = require("../../styled");
 const constants_1 = require("../constants");
 const utils_1 = require("../utils");
-exports.Wrapper = (0, styles_1.styled)('div', {
+exports.Wrapper = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$align', '$isDisabled', '$hasStartAdornment'].includes(prop),
 }) `
   overflow: hidden;

package/node/components/DataGrid/Head/styles.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     $gridColumns: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const CheckboxCell: import("@emotion/styled").StyledComponent<{
+export declare const CheckboxCell: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DataGrid/Head/styles.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxCell = exports.Wrapper = void 0;
-const styles_1 = require("../../styles");
+const styled_1 = require("../../styled");
 const constants_1 = require("../constants");
-exports.Wrapper = (0, styles_1.styled)('header', {
+exports.Wrapper = (0, styled_1.styled)('header', {
     shouldForwardProp: (prop) => !['$gridColumns'].includes(prop),
 }) `
   display: grid;
@@ -14,7 +14,7 @@ exports.Wrapper = (0, styles_1.styled)('header', {
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
 `;
-exports.CheckboxCell = styles_1.styled.div `
+exports.CheckboxCell = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;

package/node/components/DataGrid/HeadCell/styles.d.ts

@@ -5,7 +5,7 @@ type HeadCellProps = {
     $isSortable?: boolean;
     $hasStartAdornment?: boolean;
 };
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & HeadCellProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DataGrid/HeadCell/styles.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
 const HintIcon_1 = require("../../HintIcon");
-const styles_1 = require("../../styles");
+const styled_1 = require("../../styled");
 const utils_1 = require("../utils");
-exports.Wrapper = (0, styles_1.styled)('div', {
+exports.Wrapper = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$align', '$isSortable', '$hasStartAdornment'].includes(prop),
 }) `
   cursor: ${({ $isSortable }) => ($isSortable ? 'pointer' : 'initial')};

package/node/components/DataGrid/Loader/styles.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
-export declare const Backdrop: import("@emotion/styled").StyledComponent<{
+export declare const Backdrop: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledDivider: import("@emotion/styled").StyledComponent<import("../../Divider").DividerProps & {
+export declare const StyledDivider: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Divider").DividerProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const LoaderWrapper: import("@emotion/styled").StyledComponent<{
+export declare const LoaderWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledLinearProgress: import("@emotion/styled").StyledComponent<import("@mui/material").LinearProgressProps & {
+export declare const StyledLinearProgress: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material").LinearProgressProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/DataGrid/Loader/styles.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLinearProgress = exports.LoaderWrapper = exports.StyledDivider = exports.Backdrop = void 0;
 const material_1 = require("@mui/material");
 const Divider_1 = require("../../Divider");
-const styles_1 = require("../../styles");
-exports.Backdrop = styles_1.styled.div `
+const styled_1 = require("../../styled");
+exports.Backdrop = styled_1.styled.div `
   position: absolute;
   top: 0;
 
@@ -14,13 +14,13 @@ exports.Backdrop = styles_1.styled.div `
   opacity: 0.3;
   background-color: ${({ theme }) => theme.palette.background.element};
 `;
-exports.StyledDivider = (0, styles_1.styled)(Divider_1.Divider) `
+exports.StyledDivider = (0, styled_1.styled)(Divider_1.Divider) `
   border-width: 1px;
 `;
-exports.LoaderWrapper = styles_1.styled.div `
+exports.LoaderWrapper = styled_1.styled.div `
   height: 2px;
 `;
-exports.StyledLinearProgress = (0, styles_1.styled)(material_1.LinearProgress) `
+exports.StyledLinearProgress = (0, styled_1.styled)(material_1.LinearProgress) `
   height: 2px;
   
   .${material_1.linearProgressClasses.barColorPrimary} {

package/node/components/DataGrid/Row/NestedChildren/styles.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-export declare const NestedRows: import("@emotion/styled").StyledComponent<{
+export declare const NestedRows: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     $level: number;
     $isShowConnector: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const MoreButtonRow: import("@emotion/styled").StyledComponent<{
+export declare const MoreButtonRow: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -14,8 +14,8 @@ export declare const MoreButtonRow: import("@emotion/styled").StyledComponent<{
     $isShowConnector: boolean;
     $gridColumns: string;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const MoreButton: import("@emotion/styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
-    variant?: "link" | "light" | "outlined" | "contained" | "text" | undefined;
+export declare const MoreButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
     loading?: boolean | undefined;
     color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
     component?: import("react").ElementType | undefined;

package/node/components/DataGrid/Row/NestedChildren/styles.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MoreButton = exports.MoreButtonRow = exports.NestedRows = void 0;
 const Button_1 = require("../../../Button");
-const styles_1 = require("../../../styles");
+const styled_1 = require("../../../styled");
 const constants_1 = require("../../constants");
-exports.NestedRows = (0, styles_1.styled)('ul', {
+exports.NestedRows = (0, styled_1.styled)('ul', {
     shouldForwardProp: (prop) => !['$level', '$isShowConnector'].includes(prop),
 }) `
   position: relative;
@@ -30,7 +30,7 @@ exports.NestedRows = (0, styles_1.styled)('ul', {
     border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
   }
 `;
-exports.MoreButtonRow = (0, styles_1.styled)('li', {
+exports.MoreButtonRow = (0, styled_1.styled)('li', {
     shouldForwardProp: (prop) => !['$level', '$isShowConnector', '$gridColumns'].includes(prop),
 }) `
   position: relative;
@@ -58,7 +58,7 @@ exports.MoreButtonRow = (0, styles_1.styled)('li', {
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
   }
 `;
-exports.MoreButton = (0, styles_1.styled)(Button_1.Button, {
+exports.MoreButton = (0, styled_1.styled)(Button_1.Button, {
     shouldForwardProp: (prop) => !['$moreButtonColumnPosition'].includes(prop),
 }) `
   grid-column: ${({ $moreButtonColumnPosition }) => $moreButtonColumnPosition};

package/node/components/DataGrid/Row/styles.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     $isShowConnector: boolean;
     $level: number;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
+export declare const ContentWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -16,21 +16,21 @@ export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
     $gridColumns: string;
     $level: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CellStyled: import("@emotion/styled").StyledComponent<import("../Cell").CellProps<Record<string, unknown>> & {
+export declare const CellStyled: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Cell").CellProps<Record<string, unknown>> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $level: number;
 }, {}, {}>;
-export declare const CheckboxCell: import("@emotion/styled").StyledComponent<{
+export declare const CheckboxCell: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CollapseCell: import("@emotion/styled").StyledComponent<{
+export declare const CollapseCell: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CollapseButton: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
-    variant?: "link" | "light" | "outlined" | "contained" | "text" | undefined;
+export declare const CollapseButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
     loading?: boolean | undefined;
     color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
     component?: import("react").ElementType | undefined;
@@ -40,7 +40,7 @@ export declare const CollapseButton: import("@emotion/styled").StyledComponent<O
 }, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const ChevronIcon: import("@emotion/styled").StyledComponent<{
+export declare const ChevronIcon: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;

package/node/components/DataGrid/Row/styles.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChevronIcon = exports.CollapseButton = exports.CollapseCell = exports.CheckboxCell = exports.CellStyled = exports.ContentWrapper = exports.Wrapper = void 0;
 const icons_1 = require("../../../icons");
 const IconButton_1 = require("../../IconButton");
-const styles_1 = require("../../styles");
+const styled_1 = require("../../styled");
 const Cell_1 = require("../Cell");
 const constants_1 = require("../constants");
 const constants_2 = require("./constants");
-exports.Wrapper = styles_1.styled.li `
+exports.Wrapper = styled_1.styled.li `
   position: relative;
 
   &:not(:last-of-type)::before,
@@ -27,7 +27,7 @@ exports.Wrapper = styles_1.styled.li `
     border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
   }
 `;
-exports.ContentWrapper = styles_1.styled.div `
+exports.ContentWrapper = styled_1.styled.div `
   position: relative;
 
   display: grid;
@@ -66,10 +66,10 @@ exports.ContentWrapper = styles_1.styled.div `
     : theme.palette.background.elementHover};
   }
 `;
-exports.CellStyled = (0, styles_1.styled)(Cell_1.Cell) `
+exports.CellStyled = (0, styled_1.styled)(Cell_1.Cell) `
   margin-left: ${({ $level }) => `${$level * constants_1.ROOT_ACTION_CELL_WIDTH}px`};
 `;
-exports.CheckboxCell = styles_1.styled.div `
+exports.CheckboxCell = styled_1.styled.div `
   display: flex;
   align-items: center;
   align-self: center;
@@ -77,14 +77,14 @@ exports.CheckboxCell = styles_1.styled.div `
 
   width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
 `;
-exports.CollapseCell = styles_1.styled.div `
+exports.CollapseCell = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
 
   width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
 `;
-exports.CollapseButton = (0, styles_1.styled)(IconButton_1.IconButton) `
+exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
   width: 24px;
   height: 24px;
 
@@ -94,7 +94,7 @@ exports.CollapseButton = (0, styles_1.styled)(IconButton_1.IconButton) `
     background-color: ${({ theme }) => theme.palette.grey[300]};
   }
 `;
-exports.ChevronIcon = (0, styles_1.styled)(icons_1.ChevronROutlineMd, {
+exports.ChevronIcon = (0, styled_1.styled)(icons_1.ChevronROutlineMd, {
     shouldForwardProp: (prop) => prop !== '$isActive',
 }) `
   transform: rotateZ(${({ $isActive }) => ($isActive ? 90 : 0)}deg);

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

@@ -1,18 +1,18 @@
 /// <reference types="react" />
-export declare const Container: import("@emotion/styled").StyledComponent<{
+export declare const Container: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     $maxHeight?: number | undefined;
     $isAllowHorizontalScroll?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DataGridWrapper: import("@emotion/styled").StyledComponent<{
+export declare const DataGridWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     $isAllowHorizontalScroll?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DisabledDataGridWrapper: import("@emotion/styled").StyledComponent<{
+export declare const DisabledDataGridWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {

package/node/components/DataGrid/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DisabledDataGridWrapper = exports.DataGridWrapper = exports.Container = void 0;
-const styles_1 = require("../styles");
-exports.Container = (0, styles_1.styled)('div', {
+const styled_1 = require("../styled");
+exports.Container = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$maxHeight', '$isAllowHorizontalScroll'].includes(prop),
 }) `
   position: relative;
@@ -15,7 +15,7 @@ exports.Container = (0, styles_1.styled)('div', {
   height: 100%;
   max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : 'initial'};
 `;
-exports.DataGridWrapper = (0, styles_1.styled)('div', {
+exports.DataGridWrapper = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$isAllowHorizontalScroll'].includes(prop),
 }) `
   position: relative;
@@ -26,7 +26,7 @@ exports.DataGridWrapper = (0, styles_1.styled)('div', {
 
   height: 100%;
 `;
-exports.DisabledDataGridWrapper = (0, styles_1.styled)(exports.DataGridWrapper, {
+exports.DisabledDataGridWrapper = (0, styled_1.styled)(exports.DataGridWrapper, {
     shouldForwardProp: (prop) => !['$isAllowHorizontalScroll'].includes(prop),
 }) `
   pointer-events: none;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DataGridActionCell/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const styles_1 = require("../styles");
-exports.Wrapper = styles_1.styled.div `
+const styled_1 = require("../styled");
+exports.Wrapper = styled_1.styled.div `
   display: inline-flex;
   align-items: center;
 `;