@astral/ui 4.55.4 → 4.57.0

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

@@ -4,8 +4,14 @@ import { type DataGridRow } from '../../DataGrid';
 import { type CellValue } from '../../DataGrid/types';
 import { type DataGridInfiniteProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridInfiniteProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, }: UseLogicParams<TData, TSortField>) => {
+    containerCssVars: import("react").CSSProperties;
+    mobileSkeletonProps: {
+        cellsCount: number;
+        rowsCount: number;
+    };
     isNoData: boolean;
+    isMobile: boolean;
     isDataGridDisabled: boolean | undefined;
     isStickyButtonActive: boolean;
     treeRenderConfig: {

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

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const enums_1 = require("../../DataGrid/enums");
+const hooks_1 = require("../../DataGrid/useLogic/hooks");
 const utils_1 = require("../../DataGrid/utils");
 const useToggle_1 = require("../../useToggle");
+const useViewportType_1 = require("../../useViewportType");
 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 useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, }) => {
     const virtuoso = (0, react_1.useRef)(null);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const [hasVerticalScroll, setHasVerticalScroll] = (0, react_1.useState)(false);
     const [isStickyButtonActive, showStickyButton, hideStickyButton] = (0, useToggle_1.useToggle)();
     const isNoData = Boolean(rows?.length);
@@ -62,8 +65,15 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
         }
     };
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
+    const { mobileSkeletonProps } = (0, hooks_1.useDataGridMobileLogic)({
+        columns,
+    });
+    const containerCssVars = (0, utils_1.getDataGridCssVars)(maxHeight);
     return {
+        containerCssVars,
+        mobileSkeletonProps,
         isNoData,
+        isMobile,
         isDataGridDisabled,
         isStickyButtonActive,
         treeRenderConfig,

package/node/components/DateRangePicker/styles.js

@@ -32,5 +32,5 @@ exports.PickerSplitter = styled_1.styled.div `
   margin: ${({ theme }) => theme.spacing(-3, 4)};
 
   border-left: 1px solid
-    ${({ theme }) => theme.palette.grey[300]};
+    ${({ theme }) => theme.palette.components.border.default};
 `;

package/node/components/Description/Name/styles.js

@@ -18,7 +18,7 @@ exports.DashedSeparator = styled_1.styled.div `
   height: 4px;
   margin-right: ${({ theme }) => theme.spacing(2)};
 
-  border-bottom: 1px dashed ${({ theme }) => theme.palette.grey[400]};
+  border-bottom: 1px dashed ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;

package/node/components/DescriptionCell/styles.js

@@ -1,18 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemWrapper = exports.IconWrapper = exports.Wrapper = void 0;
-const Typography_1 = require("@mui/material/Typography");
+const constants_1 = require("../Description/constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("../Typography/constants");
+const constants_3 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   display: flex;
   align-items: center;
 
-  &.${constants_1.descriptionCellClassnames.hasIcon} {
+  &.${constants_3.descriptionCellClassnames.hasIcon} {
     gap: ${({ theme }) => theme.spacing(2)};
   }
 
-  &.${constants_1.descriptionCellClassnames.iconRight} {
+  &.${constants_3.descriptionCellClassnames.iconRight} {
     flex-direction: row-reverse;
   }
 `;
@@ -23,15 +24,23 @@ exports.IconWrapper = styled_1.styled.div `
     width: 24px;
     height: 24px;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 exports.ItemWrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;
 
-  dl {
-    .${Typography_1.typographyClasses.root} {
+  & .${constants_1.descriptionClassnames.root} {
+    & .${constants_2.typographyClassnames.root} {
       font-size: unset;
       color: unset;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(1)};
+  }
 `;

package/node/components/DescriptionList/styles.js

@@ -24,7 +24,7 @@ exports.Wrapper = styled_1.styled.article `
     padding: ${({ theme }) => theme.spacing(4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 exports.ListWrapper = (0, styled_1.styled)('dl', {
@@ -36,7 +36,9 @@ exports.ListWrapper = (0, styled_1.styled)('dl', {
   margin: 0;
   padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(4, 0) : theme.spacing(3, 0)};
 
-  border-top: ${({ $hasDivider, theme }) => $hasDivider ? `1px solid ${theme.palette.grey[300]}` : 'none'};
+  border-top: ${({ $hasDivider, theme }) => $hasDivider
+    ? `1px solid ${theme.palette.components.border.default}`
+    : 'none'};
 
   &:first-of-type {
     padding-top: 0;

package/node/components/ExpansionPanel/styles.js

@@ -9,7 +9,7 @@ exports.Wrapper = (0, styled_1.styled)('details') `
 
   width: 100%;
   
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
   
   /* Причина игнора: Не критично для отображения */

package/node/components/InfiniteDataList/styles.js

@@ -25,7 +25,7 @@ exports.Item = styled_1.styled.li `
     ${({ theme }) => theme.breakpoints.down('sm')} {
       padding: ${({ theme }) => theme.spacing(5, 4)};
 
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
   }
 `;

package/node/components/InfiniteTreeList/TreeItem/styles.js

@@ -44,7 +44,7 @@ exports.Wrapper = styled_1.styled.div `
   margin-top: ${({ theme }) => theme.spacing(1)};
   margin-left: ${({ $level }) => `calc(${$level} * 20px)`};
 
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
   
   &.${constants_1.infiniteTreeListClassnames.addAnimation} {

package/node/components/MenuOrganization/styles.js

@@ -13,7 +13,7 @@ const constants_2 = require("./constants");
 exports.ActionWrapper = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(2)};
 
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};
@@ -23,7 +23,7 @@ exports.SearchWrapper = styled_1.styled.div `
   max-width: 300px;
   padding: ${({ theme }) => theme.spacing(2, 3)};
 
-  border-bottom: ${({ theme }) => `1px solid ${theme.palette.grey['300']}`};
+  border-bottom: ${({ theme }) => `1px solid ${theme.palette.components.border.default}`};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     max-width: unset;

package/node/components/NewStepper/Step/Description/styles.js

@@ -11,7 +11,7 @@ exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography) `
 
   text-align: start;
 
-  border-left: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-left: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     margin-bottom: 0;

package/node/components/NewStepper/Step/styles.js

@@ -192,7 +192,7 @@ exports.LineConnector = styled_1.styled.div `
 
   height: 2px;
 
-  border-top: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
   &.${constants_4.stepClassnames.alternativeLabel} {
     position: absolute;
@@ -208,7 +208,7 @@ exports.LineConnector = styled_1.styled.div `
     margin-left: 9px;
 
     border-top: unset;
-    border-left: 2px solid ${({ theme }) => theme.palette.grey[300]};
+    border-left: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
       margin-left: 11px;

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

@@ -1,4 +1,5 @@
 export { NewStepper } from './NewStepper';
+export { stepperClassnames } from './constants';
 export { Step, type StepProps, stepClassnames } from './Step';
 export type { StepperProps } from './types';
 export { stepIconClassnames } from './StepIcon';

package/node/components/NewStepper/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.NewStepper = void 0;
+exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.stepperClassnames = exports.NewStepper = void 0;
 var NewStepper_1 = require("./NewStepper");
 Object.defineProperty(exports, "NewStepper", { enumerable: true, get: function () { return NewStepper_1.NewStepper; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "stepperClassnames", { enumerable: true, get: function () { return constants_1.stepperClassnames; } });
 var Step_1 = require("./Step");
 Object.defineProperty(exports, "Step", { enumerable: true, get: function () { return Step_1.Step; } });
 Object.defineProperty(exports, "stepClassnames", { enumerable: true, get: function () { return Step_1.stepClassnames; } });

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

@@ -1,3 +1,4 @@
+export { stepperClassnames } from './constants';
 export { NewStepper } from './NewStepper';
 export { Step, type StepProps, stepClassnames } from './Step';
 export { stepIconClassnames } from './StepIcon';

package/node/components/NewStepper/public.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.NewStepper = void 0;
+exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.NewStepper = exports.stepperClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "stepperClassnames", { enumerable: true, get: function () { return constants_1.stepperClassnames; } });
 var NewStepper_1 = require("./NewStepper");
 Object.defineProperty(exports, "NewStepper", { enumerable: true, get: function () { return NewStepper_1.NewStepper; } });
 var Step_1 = require("./Step");

package/node/components/PageAside/styles.js

@@ -11,8 +11,8 @@ exports.Wrapper = styled_1.styled.aside `
   width: ${constants_1.PAGE_ASIDE_WIDTH};
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
-  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding: ${({ theme }) => theme.spacing(4)};
@@ -26,7 +26,7 @@ exports.Wrapper = styled_1.styled.aside `
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};  
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;

package/node/components/PageContent/PageContentHeader/styles.js

@@ -10,13 +10,13 @@ exports.Wrapper = styled_1.styled.header `
 
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
       margin: ${({ theme }) => theme.spacing(0, 4)};
 
       background-color: ${({ theme }) => theme.palette.background.default};
-      border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border: 1px solid ${({ theme }) => theme.palette.components.border.default};
       border-bottom: none;
       border-top-left-radius: ${({ theme }) => theme.shape.medium};
       border-top-right-radius: ${({ theme }) => theme.shape.medium};

package/node/components/PageContent/styles.js

@@ -20,7 +20,9 @@ exports.Wrapper = (0, styled_1.styled)('article', {
   grid-row: 2;
   flex-direction: column;
 
-  border-top: ${({ $isSeparatorShown, theme }) => $isSeparatorShown ? `1px solid ${theme.palette.grey[300]}` : 'none'};
+  border-top: ${({ $isSeparatorShown, theme }) => $isSeparatorShown
+    ? `1px solid ${theme.palette.components.border.default}`
+    : 'none'};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     overflow: unset;
@@ -78,7 +80,7 @@ exports.Content = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(4, 4, 3)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: ${({ theme }) => theme.shape.medium};
 
     /* Причина игнора: Не критично для отображения */

package/node/components/PageHeader/HeaderContent/styles.js

@@ -21,7 +21,7 @@ exports.PageSubheader = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 exports.DesktopTitleWrapper = styled_1.styled.div `

package/node/components/PageHeader/styles.js

@@ -44,7 +44,7 @@ exports.Wrapper = styled_1.styled.header `
     }
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
   }
 
@@ -82,7 +82,7 @@ exports.MobileTitleWrapper = styled_1.styled.div `
       .${constants_1.pageHeaderClassnames.filters},
       .${constants_1.pageHeaderClassnames.subheader}
     ))) {
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
 

package/node/components/PageLayoutLoader/styles.js

@@ -6,7 +6,7 @@ exports.Wrapper = styled_1.styled.div `
   height: 100%;
 
   background-color: ${({ theme }) => theme.palette.common.white};
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/PageLayoutSection/PageLayoutSection.d.ts

@@ -5,6 +5,10 @@ export type PageLayoutSectionProps = {
      * Название класса, применяется к корневому компоненту
      */
     className?: string;
+    /**
+     * Отключает боковые отступы на мобильных разрешениях
+     */
+    isNoMobileSidePadding?: boolean;
 };
 /**
  * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.

package/node/components/PageLayoutSection/PageLayoutSection.js

@@ -3,7 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayoutSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
+const sectionWrapperCva = (0, cva_1.cva)(constants_1.pageLayoutSectionClassnames.wrapper, {
+    variants: {
+        isNoMobileSidePadding: {
+            true: constants_1.pageLayoutSectionClassnames.isNoMobileSidePadding,
+        },
+    },
+});
 /**
  * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
  *
@@ -16,7 +26,6 @@ const styles_1 = require("./styles");
  *   </PageLayoutSectionContainer>
  * } />
  */
-exports.PageLayoutSection = (0, react_1.forwardRef)((props, ref) => {
-    const { children, className } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.Section, { className: className, ref: ref, children: (0, jsx_runtime_1.jsx)(styles_1.SectionInner, { children: children }) }));
+exports.PageLayoutSection = (0, react_1.forwardRef)(({ children, className, isNoMobileSidePadding = false }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.Section, { className: (0, classNames_1.classNames)(className, constants_1.pageLayoutSectionClassnames.root), ref: ref, children: (0, jsx_runtime_1.jsx)(styles_1.SectionWrapper, { className: sectionWrapperCva({ isNoMobileSidePadding }), children: children }) }));
 });

package/node/components/PageLayoutSection/PageLayoutSectionContainer/styles.js

@@ -17,7 +17,7 @@ exports.SectionContainer = styled_1.styled.div `
   &.${constants_1.pageLayoutSectionContainerClassnames.withAside} {
     padding-top: ${({ theme }) => theme.spacing(4)};
 
-    border-top: ${({ theme }) => `1px solid ${theme.palette.grey[300]}`};
+    border-top: ${({ theme }) => `1px solid ${theme.palette.components.border.default}`};
   }
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {

package/node/components/PageLayoutSection/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const pageLayoutSectionClassnames: {
+    root: string;
+    wrapper: string;
+    isNoMobileSidePadding: string;
+};

package/node/components/PageLayoutSection/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageLayoutSectionClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.pageLayoutSectionClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('page-layout__section'),
+    wrapper: (0, createUIKitClassname_1.createUIKitClassname)('page-layout__section-wrapper'),
+    isNoMobileSidePadding: (0, createUIKitClassname_1.createUIKitClassname)('page-layout__section-wrapper_no-mobile-side-padding'),
+};

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

@@ -3,7 +3,7 @@ export declare const Section: 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<HTMLElement>, HTMLElement>, {}>;
-export declare const SectionInner: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+export declare const SectionWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     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>, {}>;

package/node/components/PageLayoutSection/styles.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionInner = exports.Section = void 0;
+exports.SectionWrapper = exports.Section = void 0;
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.Section = styled_1.styled.section `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     margin: ${({ theme }) => theme.spacing(0, 4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;
-exports.SectionInner = styled_1.styled.div `
+exports.SectionWrapper = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
@@ -20,5 +21,9 @@ exports.SectionInner = styled_1.styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};
+
+    &.${constants_1.pageLayoutSectionClassnames.isNoMobileSidePadding} {
+      padding: ${({ theme }) => theme.spacing(4, 0)};
+    }
   }
 `;

package/node/components/PagePinnableAside/styles.js

@@ -34,7 +34,7 @@ exports.Aside = (0, styled_1.styled)('aside', {
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;
@@ -50,8 +50,8 @@ exports.Dummy = (0, styled_1.styled)('div', {
   width: 40px;
   height: 100%;
 
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
-  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ $isPinned }) => $isPinned && 'display: none;'}
 `;
@@ -80,8 +80,8 @@ exports.Content = (0, styled_1.styled)('div', {
   height: 100%;
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
-  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   transition: ${({ theme }) => {
     return theme.transitions.create(['transform'], {
@@ -129,7 +129,7 @@ exports.Footer = styled_1.styled.footer `
   margin-top: auto;
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;

package/node/components/PdfViewer/PdfPage/styles.js

@@ -26,12 +26,12 @@ exports.Wrapper = styled_1.styled.div `
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    border-top: ${({ $isViewerLite, theme }) => ($isViewerLite ? 'unset' : `1px solid ${theme.palette.grey[300]}`)};
+    border-top: ${({ $isViewerLite, theme }) => ($isViewerLite ? 'unset' : `1px solid ${theme.palette.components.border.default}`)};
     border-radius: ${({ $isViewerLite }) => !$isViewerLite && 0};
     box-shadow: ${({ $isViewerLite }) => !$isViewerLite && 'none'};
     
     &:last-child {
-      border-bottom: ${({ $isViewerLite, theme }) => ($isViewerLite ? 'unset' : `1px solid ${theme.palette.grey[300]}`)};
+      border-bottom: ${({ $isViewerLite, theme }) => ($isViewerLite ? 'unset' : `1px solid ${theme.palette.components.border.default}`)};
     }
   }
 `;

package/node/components/Radio/styles.js

@@ -8,7 +8,7 @@ const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, }) =>
     if (isDisabled) {
         return isChecked
             ? theme.palette.components.disabled
-            : theme.palette.grey[300];
+            : theme.palette.components.border.default;
     }
     if (isError) {
         return isHover ? theme.palette.error[700] : theme.palette.error[800];
@@ -16,7 +16,9 @@ const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, }) =>
     if (isChecked) {
         return isHover ? theme.palette.primary[700] : theme.palette.primary[800];
     }
-    return isHover ? theme.palette.grey[900] : theme.palette.grey[300];
+    return isHover
+        ? theme.palette.grey[900]
+        : theme.palette.components.border.default;
 };
 const getFillColor = ({ theme, isHover, isDisabled, isError, isChecked, }) => {
     if (isDisabled) {

package/node/components/RadioCard/styles.js

@@ -15,10 +15,14 @@ exports.Wrapper = styled_1.styled.label `
 
   background-color: ${({ theme }) => theme.palette.background.default};
   border-right: 1px solid
-    ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.grey[300]};
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    ${({ $isError, theme }) => $isError
+    ? theme.palette.error[700]
+    : theme.palette.components.border.default};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-left: 1px solid
-    ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.grey[300]};
+    ${({ $isError, theme }) => $isError
+    ? theme.palette.error[700]
+    : theme.palette.components.border.default};
 
   ${({ $isDisabled, theme }) => $isDisabled &&
     `
@@ -29,14 +33,18 @@ exports.Wrapper = styled_1.styled.label `
 
   &:first-of-type {
     border-top: 1px solid
-      ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.grey[300]};
+      ${({ $isError, theme }) => $isError
+    ? theme.palette.error[700]
+    : theme.palette.components.border.default};
     border-top-left-radius: ${({ theme }) => theme.shape.medium};
     border-top-right-radius: ${({ theme }) => theme.shape.medium};
   }
 
   &:last-of-type {
     border-bottom: 1px solid
-      ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.grey[300]};
+      ${({ $isError, theme }) => $isError
+    ? theme.palette.error[700]
+    : theme.palette.components.border.default};
     border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
     border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
   }

package/node/components/SideDialogActions/styles.js

@@ -18,7 +18,7 @@ exports.StyledDialogActions = (0, styled_1.styled)(DialogActions_1.DialogActions
 
     width: 100%;
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/SideDialogHeader/styles.js

@@ -18,7 +18,7 @@ exports.StyledDialogHeader = (0, styled_1.styled)(DialogHeader_1.DialogHeader) `
 
     width: 100%;
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/SideDialogTitle/styles.js

@@ -18,6 +18,6 @@ exports.StyledDialogTitle = (0, styled_1.styled)(DialogTitle_1.DialogTitle) `
 
     width: 100%;
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;

package/node/components/Stepper/styles.js

@@ -24,14 +24,14 @@ exports.StyledStepper = (0, styled_1.styled)(Stepper_1.default) `
     min-height: 22px;
     margin-left: 9px;
 
-    border-color: ${({ theme }) => theme.palette.grey[300]};
+    border-color: ${({ theme }) => theme.palette.components.border.default};
     border-left-width: 2px;
   }
 
   .${StepConnector_1.stepConnectorClasses.lineVertical} {
     min-height: 14px;
 
-    border-color: ${({ theme }) => theme.palette.grey[300]};
+    border-color: ${({ theme }) => theme.palette.components.border.default};
     border-left-width: 2px;
   }