@astral/ui 4.55.4 → 4.57.0

package/components/Description/Name/styles.js

@@ -15,7 +15,7 @@ export const DashedSeparator = 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/components/DescriptionCell/styles.js

@@ -1,5 +1,6 @@
-import { typographyClasses } from '@mui/material/Typography';
+import { descriptionClassnames } from '../Description/constants';
 import { styled } from '../styled';
+import { typographyClassnames } from '../Typography/constants';
 import { descriptionCellClassnames } from './constants';
 export const Wrapper = styled.div `
   display: flex;
@@ -20,15 +21,23 @@ export const IconWrapper = styled.div `
     width: 24px;
     height: 24px;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 export const ItemWrapper = styled.div `
   display: flex;
   flex-direction: column;
 
-  dl {
-    .${typographyClasses.root} {
+  & .${descriptionClassnames.root} {
+    & .${typographyClassnames.root} {
       font-size: unset;
       color: unset;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(1)};
+  }
 `;

package/components/DescriptionList/styles.js

@@ -21,7 +21,7 @@ export const Wrapper = 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};
   }
 `;
 export const ListWrapper = styled('dl', {
@@ -33,7 +33,9 @@ export const ListWrapper = 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/components/ExpansionPanel/styles.js

@@ -6,7 +6,7 @@ export const Wrapper = 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/components/InfiniteDataList/styles.js

@@ -22,7 +22,7 @@ export const Item = 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/components/InfiniteTreeList/TreeItem/styles.js

@@ -41,7 +41,7 @@ export const Wrapper = 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};
   
   &.${infiniteTreeListClassnames.addAnimation} {

package/components/MenuOrganization/styles.js

@@ -10,7 +10,7 @@ import { menuOrganizationClassnames, PLACEHOLDER_HEIGHT } from './constants';
 export const ActionWrapper = 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)};
@@ -20,7 +20,7 @@ export const SearchWrapper = 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/components/NewStepper/Step/Description/styles.js

@@ -8,7 +8,7 @@ export const StyledTypography = styled(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/components/NewStepper/Step/styles.js

@@ -189,7 +189,7 @@ export const LineConnector = styled.div `
 
   height: 2px;
 
-  border-top: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
   &.${stepClassnames.alternativeLabel} {
     position: absolute;
@@ -205,7 +205,7 @@ export const LineConnector = 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/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/components/NewStepper/index.js

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

package/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/components/NewStepper/public.js

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

package/components/PageAside/styles.js

@@ -8,8 +8,8 @@ export const Wrapper = styled.aside `
   width: ${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)};
@@ -23,7 +23,7 @@ export const Wrapper = 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/components/PageContent/PageContentHeader/styles.js

@@ -7,13 +7,13 @@ export const Wrapper = 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/components/PageContent/styles.js

@@ -17,7 +17,9 @@ export const Wrapper = 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;
@@ -75,7 +77,7 @@ export const Content = 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/components/PageHeader/HeaderContent/styles.js

@@ -18,7 +18,7 @@ export const PageSubheader = 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};
   }
 `;
 export const DesktopTitleWrapper = styled.div `

package/components/PageHeader/styles.js

@@ -41,7 +41,7 @@ export const Wrapper = 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};
     }
   }
 
@@ -79,7 +79,7 @@ export const MobileTitleWrapper = styled.div `
       .${pageHeaderClassnames.filters},
       .${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/components/PageLayoutLoader/styles.js

@@ -3,7 +3,7 @@ export const Wrapper = 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/components/PageLayoutSection/PageLayoutSection.d.ts

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

package/components/PageLayoutSection/PageLayoutSection.js

@@ -1,6 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Section, SectionInner } from './styles';
+import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
+import { pageLayoutSectionClassnames } from './constants';
+import { Section, SectionWrapper } from './styles';
+const sectionWrapperCva = cva(pageLayoutSectionClassnames.wrapper, {
+    variants: {
+        isNoMobileSidePadding: {
+            true: pageLayoutSectionClassnames.isNoMobileSidePadding,
+        },
+    },
+});
 /**
  * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
  *
@@ -13,7 +23,6 @@ import { Section, SectionInner } from './styles';
  *   </PageLayoutSectionContainer>
  * } />
  */
-export const PageLayoutSection = forwardRef((props, ref) => {
-    const { children, className } = props;
-    return (_jsx(Section, { className: className, ref: ref, children: _jsx(SectionInner, { children: children }) }));
+export const PageLayoutSection = forwardRef(({ children, className, isNoMobileSidePadding = false }, ref) => {
+    return (_jsx(Section, { className: classNames(className, pageLayoutSectionClassnames.root), ref: ref, children: _jsx(SectionWrapper, { className: sectionWrapperCva({ isNoMobileSidePadding }), children: children }) }));
 });

package/components/PageLayoutSection/PageLayoutSectionContainer/styles.js

@@ -14,7 +14,7 @@ export const SectionContainer = styled.div `
   &.${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/components/PageLayoutSection/constants.d.ts

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

package/components/PageLayoutSection/constants.js

@@ -0,0 +1,6 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const pageLayoutSectionClassnames = {
+    root: createUIKitClassname('page-layout__section'),
+    wrapper: createUIKitClassname('page-layout__section-wrapper'),
+    isNoMobileSidePadding: createUIKitClassname('page-layout__section-wrapper_no-mobile-side-padding'),
+};

package/components/PageLayoutSection/styles.d.ts

@@ -3,7 +3,7 @@ export declare const Section: import("../styled").StyledComponent<{
     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("../styled").StyledComponent<{
+export declare const SectionWrapper: import("../styled").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/components/PageLayoutSection/styles.js

@@ -1,14 +1,15 @@
 import { styled } from '../styled';
+import { pageLayoutSectionClassnames } from './constants';
 export const Section = 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};
   }
 `;
-export const SectionInner = styled.div `
+export const SectionWrapper = styled.div `
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
@@ -17,5 +18,9 @@ export const SectionInner = styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};
+
+    &.${pageLayoutSectionClassnames.isNoMobileSidePadding} {
+      padding: ${({ theme }) => theme.spacing(4, 0)};
+    }
   }
 `;

package/components/PagePinnableAside/styles.js

@@ -31,7 +31,7 @@ export const Aside = 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};
   }
 `;
@@ -47,8 +47,8 @@ export const Dummy = 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;'}
 `;
@@ -77,8 +77,8 @@ export const Content = 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'], {
@@ -126,7 +126,7 @@ export const Footer = 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/components/PdfViewer/PdfPage/styles.js

@@ -23,12 +23,12 @@ export const Wrapper = 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/components/Radio/styles.js

@@ -5,7 +5,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];
@@ -13,7 +13,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/components/RadioCard/styles.js

@@ -12,10 +12,14 @@ export const Wrapper = 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 &&
     `
@@ -26,14 +30,18 @@ export const Wrapper = 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/components/SideDialogActions/styles.js

@@ -15,7 +15,7 @@ export const StyledDialogActions = styled(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/components/SideDialogHeader/styles.js

@@ -15,7 +15,7 @@ export const StyledDialogHeader = styled(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/components/SideDialogTitle/styles.js

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

package/components/Stepper/styles.js

@@ -18,14 +18,14 @@ export const StyledStepper = styled(Stepper) `
     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;
   }
 
   .${stepConnectorClasses.lineVertical} {
     min-height: 14px;
 
-    border-color: ${({ theme }) => theme.palette.grey[300]};
+    border-color: ${({ theme }) => theme.palette.components.border.default};
     border-left-width: 2px;
   }
 

package/components/Tag/styles.js

@@ -230,7 +230,7 @@ export const Wrapper = styled.div `
     variant: $variant,
 })};
   border: ${({ theme, $variant, $color }) => $variant !== 'text' && $color === 'default'
-    ? `1px solid ${theme.palette.grey[400]}`
+    ? `1px solid ${theme.palette.components.border.default}`
     : 'none'};
   border-radius: ${({ theme }) => theme.shape.medium};
   

package/components/Tree/TreeItem/styles.js

@@ -32,7 +32,7 @@ export const Item = styled('li', {
     width: 0;
     height: 100%;
 
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 export const ItemContent = styled('div', {
@@ -130,8 +130,8 @@ export const LabelWrapper = styled('div', {
     /* Добавляем к высоте половину нижнего отступа, который не входит в высоту текущего элемента */
     height: ${({ theme }) => `calc(50% + ${theme.spacing(1)}/2)`};
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
   }
 `;

package/components/fileUploading/FileUploaderDropzone/DropzoneWrapper/styles.js

@@ -6,7 +6,7 @@ const getBorderColor = (theme, isActive, isError) => {
     if (isError) {
         return theme.palette.error[900];
     }
-    return theme.palette.grey[400];
+    return theme.palette.components.border.default;
 };
 export const Wrapper = styled.div `
   display: flex;

package/components/fileUploading/FileUploaderFile/styles.js

@@ -6,7 +6,7 @@ const getBorderColor = (theme, isLoading, isError) => {
     if (isError) {
         return theme.palette.error[400];
     }
-    return theme.palette.grey[200];
+    return theme.palette.components.border.default;
 };
 export const Wrapper = styled('div', {
     shouldForwardProp: (prop) => !['$isLoading', '$isError'].includes(prop),

package/components/placeholders/LoadingPlaceholder/LoadingPlaceholder.d.ts

@@ -13,9 +13,13 @@ type Props = {
      * Используется вместе с хуком `useLoadingState`
      */
     isShowLoader?: boolean;
+    /**
+     * Класс применяемый для корневого элемента
+     */
+    className?: string;
 };
 /**
  * Дефолтный лоадер загрузки
  */
-export declare const LoadingPlaceholder: ({ title, content, isShowLoader, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingPlaceholder: ({ title, content, isShowLoader, className, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/placeholders/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Loader } from '../../Loader';
 import { Typography } from '../../Typography';
+import { classNames } from '../../utils/classNames';
 import { loadingPlaceholderClassnames } from './constants';
 import { LoadingContainer } from './styles';
 /**
  * Дефолтный лоадер загрузки
  */
-export const LoadingPlaceholder = ({ title, content, isShowLoader = true, }) => {
+export const LoadingPlaceholder = ({ title, content, isShowLoader = true, className, }) => {
     if (!isShowLoader) {
-        return _jsx(LoadingContainer, { className: loadingPlaceholderClassnames.root });
+        return (_jsx(LoadingContainer, { className: classNames(loadingPlaceholderClassnames.root, className) }));
     }
     if (content) {
-        return (_jsx(LoadingContainer, { className: loadingPlaceholderClassnames.root, children: content }));
+        return (_jsx(LoadingContainer, { className: classNames(loadingPlaceholderClassnames.root, className), children: content }));
     }
-    return (_jsxs(LoadingContainer, { className: loadingPlaceholderClassnames.root, children: [_jsx(Loader, {}), title && _jsx(Typography, { variant: "h4", children: title })] }));
+    return (_jsxs(LoadingContainer, { className: classNames(loadingPlaceholderClassnames.root, className), children: [_jsx(Loader, {}), title && _jsx(Typography, { variant: "h4", children: title })] }));
 };

package/components/theme/components/MuiButton.js

@@ -77,7 +77,7 @@ const getBorder = ({ theme, variant, color, buttonState, selected, disabled, })
         return `1px solid ${theme.palette[color]['900']};`;
     }
     if (buttonState === 'default') {
-        return `1px solid ${theme.palette[color]['300']};`;
+        return `1px solid ${color === 'grey' ? theme.palette.components.border.default : theme.palette[color]['300']};`;
     }
     if (buttonState === 'hover') {
         return `1px solid ${theme.palette[color]['700']};`;