@astral/ui 4.18.4 → 4.18.5

package/node/components/DashboardSidebar/DashboardSidebar.js

@@ -6,7 +6,8 @@ const react_1 = require("react");
 const DashboardSidebarSkeleton_1 = require("../DashboardSidebarSkeleton");
 const NavMenu_1 = require("../NavMenu");
 const PinButton_1 = require("../PinButton");
-const utils_1 = require("../utils");
+const classNames_1 = require("../utils/classNames");
+const getInertProps_1 = require("../utils/getInertProps");
 const constants_1 = require("./constants");
 const SidebarNav_1 = require("./SidebarNav");
 const styles_1 = require("./styles");
@@ -19,5 +20,5 @@ exports.DashboardSidebar = (0, react_1.forwardRef)((props, ref) => {
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(DashboardSidebarSkeleton_1.DashboardSidebarSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: (0, utils_1.classNames)(className, constants_1.dashboardSidebarClassnames.root), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...(0, utils_1.getInertProps)(isMobile && !isPinned), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { variant: "outlined", children: [(0, jsx_runtime_1.jsxs)(styles_1.SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && (0, jsx_runtime_1.jsx)(styles_1.SidebarHeader, { children: header }), (0, jsx_runtime_1.jsx)(SidebarNav_1.SidebarNav, { menu: (0, jsx_runtime_1.jsx)(NavMenu_1.NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: (0, classNames_1.classNames)(className, constants_1.dashboardSidebarClassnames.root), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...(0, getInertProps_1.getInertProps)(isMobile && !isPinned), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { variant: "outlined", children: [(0, jsx_runtime_1.jsxs)(styles_1.SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && (0, jsx_runtime_1.jsx)(styles_1.SidebarHeader, { children: header }), (0, jsx_runtime_1.jsx)(SidebarNav_1.SidebarNav, { menu: (0, jsx_runtime_1.jsx)(NavMenu_1.NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
 });

package/node/components/DashboardSidebar/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dashboardSidebarClassnames = void 0;
-const utils_1 = require("../utils");
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.dashboardSidebarClassnames = {
-    root: (0, utils_1.createUIKitClassname)('dashboard-layout-sidebar'),
+    root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar'),
 };

package/node/components/DashboardSidebar/useLogic/useLogic.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const DashboardContext_1 = require("../../DashboardContext");
-const DashboardLayout_1 = require("../../DashboardLayout");
+const Header_1 = require("../../DashboardLayout/Header");
+const Main_1 = require("../../DashboardLayout/Main");
 const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
 const useViewportType_1 = require("../../hooks/useViewportType");
 const useTheme_1 = require("../../theme/hooks/useTheme");
@@ -56,9 +57,9 @@ const useLogic = (props) => {
         }
         const handleMouseEnter = () => onToggleSidebar(false);
         //Основные элементы DashboardLayout
-        const mainElement = document.querySelector(`.${DashboardLayout_1.dashboardLayoutMainClassnames.main}`);
-        const pageAlertElement = document.querySelector(`.${DashboardLayout_1.dashboardLayoutMainClassnames.alert}`);
-        const headerElement = document.querySelector(`.${DashboardLayout_1.dashboardLayoutHeaderClassnames.root}`);
+        const mainElement = document.querySelector(`.${Main_1.dashboardLayoutMainClassnames.main}`);
+        const pageAlertElement = document.querySelector(`.${Main_1.dashboardLayoutMainClassnames.alert}`);
+        const headerElement = document.querySelector(`.${Header_1.dashboardLayoutHeaderClassnames.root}`);
         if (mainElement) {
             mainElement.addEventListener('mouseenter', handleMouseEnter);
         }

package/node/components/DashboardSidebarPopover/SidebarPopoverItem/SidebarPopoverItem.js

@@ -5,13 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const forwardRefWithGeneric_1 = require("../../forwardRefWithGeneric");
 const Tooltip_1 = require("../../Tooltip");
 const Typography_1 = require("../../Typography");
-const utils_1 = require("../../utils");
+const getInertProps_1 = require("../../utils/getInertProps");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const SidebarPopoverItemInner = ({ icon, title, description, component, isDisabled, disabledReason, onClick, ...props }, ref) => {
     const Component = component ?? 'div';
     const { handleItemClick } = (0, useLogic_1.useLogic)({ onClick });
-    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { withoutContainer: !isDisabled, title: isDisabled && disabledReason, placement: "bottom", children: (0, jsx_runtime_1.jsx)(styles_1.Item, { onClick: handleItemClick, ...(0, utils_1.getInertProps)(isDisabled), "$isDisabled": isDisabled, children: (0, jsx_runtime_1.jsx)(Component, { ref: ref, ...props, className: constants_1.sidebarPopoverItemClassnames.content, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$hasDescription": Boolean(description), children: [icon && (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { children: icon }), (0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "subtitle1", children: title }), description && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "textSecondary", variant: "body1", children: description }))] })] }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { withoutContainer: !isDisabled, title: isDisabled && disabledReason, placement: "bottom", children: (0, jsx_runtime_1.jsx)(styles_1.Item, { onClick: handleItemClick, ...(0, getInertProps_1.getInertProps)(isDisabled), "$isDisabled": isDisabled, children: (0, jsx_runtime_1.jsx)(Component, { ref: ref, ...props, className: constants_1.sidebarPopoverItemClassnames.content, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$hasDescription": Boolean(description), children: [icon && (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { children: icon }), (0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "subtitle1", children: title }), description && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "textSecondary", variant: "body1", children: description }))] })] }) }) }) }) }));
 };
 exports.SidebarPopoverItem = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(SidebarPopoverItemInner);

package/node/components/DashboardSidebarPopover/SidebarPopoverItem/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sidebarPopoverItemClassnames = void 0;
-const utils_1 = require("../../utils");
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
 exports.sidebarPopoverItemClassnames = {
-    content: (0, utils_1.createUIKitClassname)('sidebar-popover-item__content'),
+    content: (0, createUIKitClassname_1.createUIKitClassname)('sidebar-popover-item__content'),
 };

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

@@ -3,17 +3,11 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const Title: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "center" | "left" | "right" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const Title: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;
     colorIntensity?: import("../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "slot" | "style" | "title" | import("react").ComponentType<any> | "search" | "big" | "sub" | "sup" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view") | undefined;
+    component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;

package/node/components/DashboardSidebarSkeleton/DashboardSidebarSkeleton.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardSidebarSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DashboardSidebar_1 = require("../DashboardSidebar");
+const constants_1 = require("../DashboardSidebar/constants");
 const Skeleton_1 = require("../Skeleton");
-const utils_1 = require("../utils");
+const classNames_1 = require("../utils/classNames");
 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 })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isPinned": isPinned, className: (0, classNames_1.classNames)(constants_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/DataGrid/Body/Body.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ConfigProvider_1 = require("../../ConfigProvider");
 const ContentState_1 = require("../../ContentState");
-const utils_1 = require("../../utils");
+const classNames_1 = require("../../utils/classNames");
 const constants_1 = require("../constants");
 const Row_1 = require("../Row");
 const RowContext_1 = require("../Row/RowContext");
@@ -21,7 +21,7 @@ const Body = (props) => {
         const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
         return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
     });
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, utils_1.classNames)(constants_1.dataGridClassnames.body, {
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(constants_1.dataGridClassnames.body, {
             [constants_1.dataGridClassnames.bodyEmpty]: isNoData,
         }), "$minDisplayRows": minDisplayRows, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, errorState: {
                 imgAlt: 'Что-то пошло не так',

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OverflowTypography_1 = require("../../OverflowTypography");
-const utils_1 = require("../../utils");
+const getInertProps_1 = require("../../utils/getInertProps");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const Cell = (props) => {
     const { formattedValue, hasStartAdornment } = (0, useLogic_1.useLogic)(props);
     const { className, startAdornment, row, cell, isDisabled } = props;
     const { renderCell, align = 'left' } = cell;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isDisabled": isDisabled, "$align": align, "$hasStartAdornment": hasStartAdornment, className: className, ...(0, utils_1.getInertProps)(isDisabled), children: [startAdornment && startAdornment, renderCell?.(row), !renderCell && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isDisabled": isDisabled, "$align": align, "$hasStartAdornment": hasStartAdornment, className: className, ...(0, getInertProps_1.getInertProps)(isDisabled), children: [startAdornment && startAdornment, renderCell?.(row), !renderCell && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] }));
 };
 exports.Cell = Cell;

package/node/components/DataGrid/DataGrid.js

@@ -4,7 +4,8 @@ exports.DataGrid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ConfigProvider_1 = require("../ConfigProvider");
-const utils_1 = require("../utils");
+const classNames_1 = require("../utils/classNames");
+const getInertProps_1 = require("../utils/getInertProps");
 const Body_1 = require("./Body");
 const constants_1 = require("./constants");
 const DataGridContext_1 = require("./DataGridContext");
@@ -29,6 +30,6 @@ const DataGrid = (props) => {
         }
         return null;
     }, [noDataPlaceholder, noDataOptions, isLoading]);
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { "$maxHeight": maxHeight, "$isAllowHorizontalScroll": isAllowHorizontalScroll, className: (0, utils_1.classNames)(constants_1.dataGridClassnames.root, className), children: [(0, jsx_runtime_1.jsxs)(TableContainer, { "$isAllowHorizontalScroll": isAllowHorizontalScroll, ...(0, utils_1.getInertProps)(isDataGridDisabled), children: [headPreAddon, !isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, sorting: sorting, onSort: onSort })), (0, jsx_runtime_1.jsx)(Body_1.Body, { ...bodyProps, activeRowId: activeRowId, keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, rows: renderRows, columns: columns, variant: variant, emptyCellValue: emptyCellValue, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, isLoading: isLoading, isError: isError, errorMsg: errorMsg, noDataPlaceholder: renderedPlaceholder(), onRowClick: onRowClick, onRetry: onRetry })] }), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), footer && footer] }) }));
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { "$maxHeight": maxHeight, "$isAllowHorizontalScroll": isAllowHorizontalScroll, className: (0, classNames_1.classNames)(constants_1.dataGridClassnames.root, className), children: [(0, jsx_runtime_1.jsxs)(TableContainer, { "$isAllowHorizontalScroll": isAllowHorizontalScroll, ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), children: [headPreAddon, !isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, sorting: sorting, onSort: onSort })), (0, jsx_runtime_1.jsx)(Body_1.Body, { ...bodyProps, activeRowId: activeRowId, keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, rows: renderRows, columns: columns, variant: variant, emptyCellValue: emptyCellValue, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, isLoading: isLoading, isError: isError, errorMsg: errorMsg, noDataPlaceholder: renderedPlaceholder(), onRowClick: onRowClick, onRetry: onRetry })] }), (0, jsx_runtime_1.jsx)(Loader_1.Loader, { ...loaderProps }), footer && footer] }) }));
 };
 exports.DataGrid = DataGrid;

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

@@ -1,4 +1,4 @@
-import { type PlaceholderSize } from '../../placeholders';
+import { type PlaceholderSize } from '../../placeholders/Placeholder';
 export type NoDataProps = {
     /**
      * Заголовок

package/node/components/DataGrid/NoData/NoData.js

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../Button");
 const ConfigProvider_1 = require("../../ConfigProvider");
-const placeholders_1 = require("../../placeholders");
+const Placeholder_1 = require("../../placeholders/Placeholder");
 const NoData = ({ title = 'Нет\u00a0данных', imgAlt = title, action, size = 'small', }) => {
     const { imagesMap: { noDataImgSrc }, } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    return ((0, jsx_runtime_1.jsx)(placeholders_1.Placeholder, { title: title, imgSrc: noDataImgSrc, size: size, Actions: action ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: action.onClick, "aria-label": action.text, children: action.text })) : undefined, imgAlt: imgAlt }));
+    return ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { title: title, imgSrc: noDataImgSrc, size: size, Actions: action ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: action.onClick, "aria-label": action.text, children: action.text })) : undefined, imgAlt: imgAlt }));
 };
 exports.NoData = NoData;

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

@@ -6,13 +6,13 @@ const react_1 = require("react");
 const Checkbox_1 = require("../../Checkbox");
 const personalDataSecurity_1 = require("../../personalDataSecurity");
 const Tooltip_1 = require("../../Tooltip");
-const utils_1 = require("../../utils");
 const checkIsDeepEqual_1 = require("../../utils/checkIsDeepEqual");
+const getInertProps_1 = require("../../utils/getInertProps");
 const constants_1 = require("./constants");
 const NestedChildren_1 = require("./NestedChildren");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const utils_2 = require("./utils");
+const utils_1 = require("./utils");
 const RowComponent = (props) => {
     const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, } = (0, useLogic_1.useLogic)(props);
     const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, 
@@ -24,7 +24,7 @@ const RowComponent = (props) => {
         if (!isRenderCollapseButton && (!isSelectable || isNotSelectable)) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRenderCollapseButton && ((0, jsx_runtime_1.jsx)(styles_1.CollapseCell, { children: (0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { variant: "text", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, utils_1.getInertProps)(disabled), onClick: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps }) }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRenderCollapseButton && ((0, jsx_runtime_1.jsx)(styles_1.CollapseCell, { children: (0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { variant: "text", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, getInertProps_1.getInertProps)(disabled), onClick: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps }) }))] }));
     };
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)();
     const renderCells = (0, react_1.useCallback)(() => {
@@ -33,7 +33,7 @@ const RowComponent = (props) => {
             : undefined;
         return columns?.map((cell, index) => {
             const cellId = `${rowId}-${index}`;
-            const isDisabledCell = (0, utils_2.checkIsDisabled)(disabled, availableCellsByIndex, index);
+            const isDisabledCell = (0, utils_1.checkIsDisabled)(disabled, availableCellsByIndex, index);
             const isFirstCell = !index;
             return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { "$level": isFirstCell ? level : 0, row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, className: cell.isHidePersonalData ? hidePersonalDataClassname : '' }, cellId));
         });

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dataGridClassnames = exports.DISABLE_ROW_ATTR = void 0;
-const utils_1 = require("../../utils");
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
 exports.DISABLE_ROW_ATTR = 'data-row-disable';
 exports.dataGridClassnames = {
-    hidden: (0, utils_1.createUIKitClassname)('data-grid__row_hidden'),
+    hidden: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row_hidden'),
 };

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
-const utils_1 = require("../../../utils");
+const redirectToLink_1 = require("../../../utils/redirectToLink");
 const DataGridContext_1 = require("../../DataGridContext");
 const enums_1 = require("../../enums");
 const constants_1 = require("../constants");
 const RowContext_1 = require("../RowContext");
-const utils_2 = require("./utils");
+const utils_1 = require("./utils");
 const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, }) => {
     const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
     const { checkIsOpened, toggleOpenItems } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
@@ -26,7 +26,7 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeR
     const isChecked = isSelectable &&
         Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
     const isShowConnector = Object.is(variant, enums_1.Variant.Tree);
-    const childrenColumns = (0, react_1.useMemo)(() => (0, utils_2.mergeColumnsOptions)(columns, options?.childrenColumns), [columns, options]);
+    const childrenColumns = (0, react_1.useMemo)(() => (0, utils_1.mergeColumnsOptions)(columns, options?.childrenColumns), [columns, options]);
     const handleToggle = (event) => {
         event.stopPropagation();
         toggleOpenItems(rowId);
@@ -54,7 +54,7 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeR
             return undefined;
         }
         if (href) {
-            return (0, utils_1.redirectToLink)(href, target);
+            return (0, redirectToLink_1.redirectToLink)(href, target);
         }
         onRowClick?.(row);
     };

package/node/components/DataGrid/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dataGridClassnames = exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = exports.EXPANDED_LEVEL_BY_DEFAULT = exports.MIN_DISPLAY_ROWS_BY_DEFAULT = exports.TREE_LINE_WIDTH = exports.ROOT_ACTION_CELL_WIDTH = exports.MIN_ROW_HEIGHT = void 0;
-const utils_1 = require("../utils");
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.MIN_ROW_HEIGHT = 44;
 exports.ROOT_ACTION_CELL_WIDTH = 32;
 exports.TREE_LINE_WIDTH = exports.ROOT_ACTION_CELL_WIDTH / 2;
@@ -9,8 +9,8 @@ exports.MIN_DISPLAY_ROWS_BY_DEFAULT = 10;
 exports.EXPANDED_LEVEL_BY_DEFAULT = 1;
 exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = 2;
 exports.dataGridClassnames = {
-    header: (0, utils_1.createUIKitClassname)('data-grid__header'),
-    root: (0, utils_1.createUIKitClassname)('data-grid'),
-    body: (0, utils_1.createUIKitClassname)('data-grid__body'),
-    bodyEmpty: (0, utils_1.createUIKitClassname)('data-grid__body_empty'),
+    header: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__header'),
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid'),
+    body: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__body'),
+    bodyEmpty: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__body_empty'),
 };

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

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import { type Target } from '../utils';
+import { type Target } from '../utils/redirectToLink';
 import { type Variant } from './enums';
 import type { NoDataProps } from './NoData';
 export type AlignVariant = 'left' | 'center' | 'right';

package/node/components/DataGrid/useLogic/useLogic.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useFirstMountState_1 = require("../../hooks/useFirstMountState");
-const utils_1 = require("../../utils");
+const prop_1 = require("../../utils/prop");
+const uniqueBy_1 = require("../../utils/uniqueBy");
 const enums_1 = require("../enums");
-const utils_2 = require("./utils");
+const utils_1 = require("./utils");
 const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, }) => {
     const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
     const isSelectable = Boolean(onSelectRow);
@@ -25,8 +26,8 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
             prevRowsRef.current = rows;
         }
     }, [rows, isLoading]);
-    const gridColumns = (0, utils_2.getGridTemplateColumns)(columns);
-    const isAllowHorizontalScroll = (0, utils_2.getIsAllowHorizontalScroll)(columns);
+    const gridColumns = (0, utils_1.getGridTemplateColumns)(columns);
+    const isAllowHorizontalScroll = (0, utils_1.getIsAllowHorizontalScroll)(columns);
     const uncheckedRowsCount = (0, react_1.useMemo)(() => {
         return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
     }, [availableRows, selectedRows, keyId]);
@@ -42,7 +43,7 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
             return;
         }
         if (event.target.checked) {
-            const mergedSelectedRows = (0, utils_1.uniqueBy)([...selectedRows, ...availableRows], (0, utils_1.prop)(keyId));
+            const mergedSelectedRows = (0, uniqueBy_1.uniqueBy)([...selectedRows, ...availableRows], (0, prop_1.prop)(keyId));
             return onSelectRow(mergedSelectedRows);
         }
         const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));

package/node/components/DataGridInfinite/DataGridInfinite.js

@@ -14,7 +14,8 @@ const Row_1 = require("../DataGrid/Row");
 const styles_1 = require("../DataGrid/styles");
 const Loader_1 = require("../Loader");
 const ScrollToTopButton_1 = require("../ScrollToTopButton");
-const utils_1 = require("../utils");
+const classNames_1 = require("../utils/classNames");
+const getInertProps_1 = require("../utils/getInertProps");
 const constants_2 = require("./constants");
 const EndData_1 = require("./EndData");
 const ErrorMessage_1 = require("./ErrorMessage");
@@ -30,7 +31,7 @@ const DataGridInfinite = (props) => {
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = constants_1.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_1.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const TableContainer = isDisabled ? styles_2.DisabledDataGridWrapper : styles_2.DataGridWrapper;
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { "$maxHeight": maxHeight, className: (0, utils_1.classNames)(constants_1.dataGridClassnames.root, className), children: [headPreAddon, (0, jsx_runtime_1.jsxs)(TableContainer, { ...(0, utils_1.getInertProps)(isDataGridDisabled), children: [!isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, errorState: {
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { "$maxHeight": maxHeight, className: (0, classNames_1.classNames)(constants_1.dataGridClassnames.root, className), children: [headPreAddon, (0, jsx_runtime_1.jsxs)(TableContainer, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), children: [!isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, errorState: {
                                 imgAlt: 'Что-то пошло не так',
                                 errorList: [errorMsg || ''],
                                 imgSrc: imagesMap.defaultErrorImgSrc,

package/node/components/DataGridInfinite/NoData/NoData.js

@@ -4,11 +4,11 @@ exports.NoData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ConfigProvider_1 = require("../../ConfigProvider");
-const placeholders_1 = require("../../placeholders");
+const Placeholder_1 = require("../../placeholders/Placeholder");
 const constants_1 = require("./constants");
 const NoData = () => {
     const { imagesMap } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const { noDataImgSrc } = imagesMap;
-    return (0, jsx_runtime_1.jsx)(placeholders_1.Placeholder, { title: constants_1.NO_DATA_TEXT, imgSrc: noDataImgSrc });
+    return (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { title: constants_1.NO_DATA_TEXT, imgSrc: noDataImgSrc });
 };
 exports.NoData = NoData;

package/node/components/DataGridInfinite/useLogic/useLogic.js

@@ -5,7 +5,8 @@ const react_1 = require("react");
 const enums_1 = require("../../DataGrid/enums");
 const utils_1 = require("../../DataGrid/useLogic/utils");
 const useToggle_1 = require("../../hooks/useToggle");
-const utils_2 = require("../../utils");
+const prop_1 = require("../../utils/prop");
+const uniqueBy_1 = require("../../utils/uniqueBy");
 const constants_1 = require("../constants");
 const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, }) => {
     const virtuoso = (0, react_1.useRef)(null);
@@ -35,7 +36,7 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
             return;
         }
         if (event.target.checked) {
-            const mergedSelectedRows = (0, utils_2.uniqueBy)([...selectedRows, ...availableRows], (0, utils_2.prop)(keyId));
+            const mergedSelectedRows = (0, uniqueBy_1.uniqueBy)([...selectedRows, ...availableRows], (0, prop_1.prop)(keyId));
             return onSelectRow(mergedSelectedRows);
         }
         const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));

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

@@ -3,17 +3,11 @@ export declare const PaginationWrapper: import("@emotion/styled/dist/declaration
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Range: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "center" | "left" | "right" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const Range: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;
     colorIntensity?: import("../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "slot" | "style" | "title" | import("react").ComponentType<any> | "search" | "big" | "sub" | "sup" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view") | undefined;
+    component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -1,15 +1,9 @@
 /// <reference types="react" />
-export declare const Range: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "center" | "left" | "right" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const Range: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;
     colorIntensity?: import("../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "slot" | "style" | "title" | import("react").ComponentType<any> | "search" | "big" | "sub" | "sup" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view") | undefined;
+    component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;

package/node/components/DatePicker/DateCalendar/DateCalendarHead/styles.d.ts

@@ -2,17 +2,11 @@
 export declare const HeadButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../StaticCalendar/StaticCalendarButton/useLogic").UseLogicParams, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const HeadText: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "center" | "left" | "right" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const HeadText: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
     color?: import("../../../Typography").TypographyColor | undefined;
     variant?: import("../../../Typography").TypographyVariant | undefined;
     colorIntensity?: import("../../../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "slot" | "style" | "title" | import("react").ComponentType<any> | "search" | "big" | "sub" | "sup" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view") | undefined;
+    component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;