@astral/ui 4.55.4 → 4.56.0

package/components/BottomDrawer/styles.js

@@ -27,7 +27,7 @@ export const Header = styled.header `
   height: ${({ drawerHeaderHeight }) => `${drawerHeaderHeight}px`};
   padding: ${({ theme }) => theme.spacing(1, 2, 1, 4)};
 
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 `;
 export const HeaderTitle = styled(Typography) `
   margin-right: ${({ theme }) => theme.spacing(2)};

package/components/CardGridInfinite/Footer/styles.js

@@ -9,7 +9,7 @@ export const Wrapper = styled.footer `
   max-height: 76px;
   margin-top: ${({ theme }) => theme.spacing(4)};
 
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
 `;
 export const FooterDummy = styled.div `
   min-height: 20px;

package/components/CheckableTag/styles.js

@@ -86,7 +86,7 @@ const getBorder = ({ isChecked, variant, color, theme, disabled, tagState = 'def
     if (tagState === 'default') {
         `1px solid ${theme.palette.grey[600]}`;
     }
-    return `1px solid ${theme.palette.grey[400]}`;
+    return `1px solid ${theme.palette.components.border.default}`;
 };
 export const Wrapper = styled.label `
   width: fit-content;

package/components/Checkbox/styles.js

@@ -3,7 +3,7 @@ import { easeOutBackTransition } from '../styled/mixins';
 import { CHECKBOX_SIZE, checkboxClassnames, MOBILE_CHECKBOX_SIZE, } from './constants';
 const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, isIndeterminate, }) => {
     if (isDisabled) {
-        return theme.palette.grey[300];
+        return theme.palette.components.border.default;
     }
     if (isError) {
         return isHover ? theme.palette.error[700] : theme.palette.error[800];
@@ -11,7 +11,9 @@ const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, isInd
     if (isChecked || isIndeterminate) {
         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;
 };
 export const Wrapper = styled('span', {
     shouldForwardProp: (prop) => !['$isDisabled', '$isError', '$isChecked', '$isIndeterminate'].includes(prop),

package/components/Chip/styles.js

@@ -14,7 +14,7 @@ export const Wrapper = styled.div `
   padding: ${({ theme }) => theme.spacing(0, 2)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border: 1px solid ${({ theme }) => theme.palette.grey[400]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {

package/components/CodeField/styles.js

@@ -7,7 +7,7 @@ const getBorder = (theme, isDisabled, isError) => {
     }
     return isError
         ? `1px solid ${theme.palette.error[800]}`
-        : `1px solid ${theme.palette.grey[300]};`;
+        : `1px solid ${theme.palette.components.border.default};`;
 };
 export const Wrapper = styled.div `
   display: flex;

package/components/ComplianceStatus/styles.js

@@ -37,7 +37,7 @@ export const Wrapper = styled.article `
   &.${complianceStatusClassnames.outlined} {
     padding: ${({ theme }) => theme.spacing(3)};
 
-    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 export const Inner = styled('ul') `

package/components/DashboardLayout/DashboardWrapper/styles.js

@@ -19,7 +19,7 @@ export const DecorativeHeaderBackground = styled.div `
   height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : HEADER_HEIGHT_DESKTOP)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   transition: ${({ theme }) => {
     return theme.transitions.create(['height'], {

package/components/DashboardLayout/Header/styles.js

@@ -42,7 +42,7 @@ export const HeaderRoot = styled('header', {
     padding: ${({ theme }) => theme.spacing(0, 2, 0, 1)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
     transition: unset;
   }
@@ -157,14 +157,14 @@ export const PriorityFeatureWrapper = styled.div `
         height: ${MOBILE_BUTTON_HEIGHT};
         padding: ${({ theme }) => theme.spacing(3, 4)};
 
-        border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
         &:hover {
-          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+          border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
         }
 
         &:active {
-          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+          border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
         }
       }
 

package/components/DashboardLayoutSkeleton/styles.js

@@ -6,7 +6,7 @@ export const Content = styled.div `
   min-height: 0;
 
   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/DashboardSidebar/styles.js

@@ -85,7 +85,7 @@ export const SidebarHeader = styled.header `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
     /* Причина игнора: Не критично для отображения */
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -148,7 +148,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};
   border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
   border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
   

package/components/DashboardSidebarSkeleton/styles.js

@@ -12,7 +12,7 @@ export const Wrapper = styled('div', {
   padding: ${({ theme, $isPinned }) => $isPinned ? theme.spacing(4, 3) : theme.spacing(4, 2)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
-  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-radius: ${({ theme }) => theme.shape.medium};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/components/DataGrid/Head/styles.js

@@ -9,7 +9,7 @@ export const Wrapper = styled('header', {
   width: fit-content;
   min-width: 100%;
 
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 `;
 export const CheckboxCell = styled.div `
   display: flex;

package/components/DataGrid/PinnedSections/Section/styles.js

@@ -40,7 +40,7 @@ export const DataGridSection = styled.div `
 
       height: 100%;
 
-      border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-right: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
 
     & .${dataGridClassnames.header} {
@@ -79,7 +79,7 @@ export const DataGridSection = styled.div `
 
       height: 100%;
 
-      border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
 
     & .${dataGridClassnames.header} {

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

@@ -24,7 +24,7 @@ export const NestedRows = styled('ul', {
     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 MoreButtonRow = styled('li', {
@@ -50,8 +50,8 @@ export const MoreButtonRow = styled('li', {
     width: ${TREE_LINE_WIDTH}px;
     height: 50%;
 
-    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/DataGrid/Row/styles.js

@@ -21,7 +21,7 @@ export const Wrapper = 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 ContentWrapper = styled.div `
@@ -44,8 +44,8 @@ export const ContentWrapper = styled.div `
     width: ${TREE_LINE_WIDTH}px;
     height: 50%;
 
-    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/DateRangePicker/styles.js

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

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/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/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/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/styles.js

@@ -4,7 +4,7 @@ export const Section = styled.section `
     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};
   }
 `;

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};