@astral/ui 4.100.0 → 4.102.0

package/components/PageHeader/MobilePageActions/styles.js

@@ -37,10 +37,6 @@ export const ShowMoreButton = styled(Button) `
     height: 40px;
     min-height: 40px;
     padding: 0;
-
-    &:hover {
-      background-color: unset;
-    }
   }
 `;
 export const StyledCollapse = styled(Collapse) `

package/components/Radio/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { easeOutBackTransition } from '../styled/mixins';
 import { MOBILE_RADIO_SIZE, RADIO_SIZE, radioClassnames } from './constants';
@@ -58,22 +59,24 @@ export const Wrapper = styled('span', {
     ${easeOutBackTransition}; 
   }
 
-  &:hover {    
-    .${radioClassnames.outerCircle} {
-      fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
+  ${HOVER_MEDIA} {
+    &:hover {
+      .${radioClassnames.outerCircle} {
+        fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
     theme,
     isHover: true,
     isDisabled: $isDisabled,
     isError: $isError,
     isChecked: $isChecked,
 })};
-      stroke: ${({ theme, $isDisabled, $isError, $isChecked }) => getOutlineColor({
+        stroke: ${({ theme, $isDisabled, $isError, $isChecked }) => getOutlineColor({
     theme,
     isHover: true,
     isDisabled: $isDisabled,
     isError: $isError,
     isChecked: $isChecked,
 })};
+      }
     }
   }
 `;

package/components/RadioCard/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { Radio, radioClassnames } from '../Radio';
 import { styled } from '../styled';
 import { radioCardClassnames } from './constants';
@@ -63,10 +64,12 @@ export const Wrapper = styled.label `
     cursor: default;
   }
 
-  &:hover {
-    background-color: ${({ theme, $isDisabled }) => $isDisabled
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, $isDisabled }) => $isDisabled
     ? theme.palette.background.element
     : theme.palette.background.elementHover};
+    }
   }
 `;
 export const Content = styled.div `

package/components/StaticCalendar/StaticCalendarGridButton/styles.js

@@ -1,4 +1,5 @@
 import { buttonClasses } from '@mui/material/Button';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { StaticCalendarButton } from '../StaticCalendarButton';
 import { getBgColor, getLeftBorderRadius, getRightBorderRadius, getTextColor, } from './utils';
@@ -53,11 +54,13 @@ export const StaticCalendarGridButton = styled(StaticCalendarButton, {
     background-color: currentColor;
   }
   
-  &:hover {
-    border-radius: ${(props) => getLeftBorderRadius({ isHovered: true, ...props })}
-    ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
-    ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
-    ${(props) => getLeftBorderRadius({ isHovered: true, ...props })};
+  ${HOVER_MEDIA} {
+    &:hover {
+      border-radius: ${(props) => getLeftBorderRadius({ isHovered: true, ...props })}
+      ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
+      ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
+      ${(props) => getLeftBorderRadius({ isHovered: true, ...props })};
+    }
   }
 
   &,

package/components/Tabs/Tab/styles.js

@@ -1,4 +1,5 @@
 import Tab from '@mui/material/Tab';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 export const StyledTab = styled(Tab) `
   min-height: 36px;
@@ -13,8 +14,10 @@ export const StyledTab = styled(Tab) `
     margin-right: 0;
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary[800]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
   }
 
   &:active {

package/components/ToggleButton/styles.js

@@ -2,6 +2,7 @@ import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import MuiToggleButton, { toggleButtonClasses, } from '@mui/material/ToggleButton';
 import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 import { buttonClasses } from '../Button';
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../constants';
 import { css, styled } from '../styled';
 import { SIZES } from './constants';
 const getSize = (size) => {
@@ -64,23 +65,33 @@ export const StyledToggleButton = styled(MuiToggleButton, {
   
   ${({ theme, $color, disabled, $variant }) => toggleButtonColorStyle({ theme, color: $color, disabled, variant: $variant })}
 
-  &:hover {
-    ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'hover' })};
+  ${HOVER_MEDIA} {
+    &:hover {
+      ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'hover' })};
+    }
   }
-  
+
   &:active {
     z-index: 3;
 
     ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'active' })};
   }
-  
+
   &.${toggleButtonClasses.selected} {
     z-index: 2;
 
     ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, selected: true })}
 
-    &:hover {
-      ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, selected: true, disabled, state: 'hover' })};
+    ${HOVER_MEDIA} {
+      &:hover {
+        ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, selected: true, disabled, state: 'hover' })};
+      }
+    }
+    
+    ${HOVER_NONE_MEDIA} {
+      &:hover {
+        ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, selected: true, disabled, state: 'default' })};
+      }
     }
     
     &:active {
@@ -97,8 +108,10 @@ export const StyledToggleButton = styled(MuiToggleButton, {
   &.${buttonBaseClasses.root}.${toggleButtonGroupClasses.grouped}:not(:first-of-type) {
      border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color })};
 
-    &:hover {
-      border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, state: 'hover' })};
+    ${HOVER_MEDIA} {
+      &:hover {
+        border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, state: 'hover' })};
+      }
     }
 
     &:active {
@@ -108,13 +121,15 @@ export const StyledToggleButton = styled(MuiToggleButton, {
     &.${toggleButtonClasses.selected} {
       border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, isSelected: true })};
 
-      &:hover {
-        border-left-color: ${({ theme, $color }) => getBorderColor({
+      ${HOVER_MEDIA} {
+        &:hover {
+          border-left-color: ${({ theme, $color }) => getBorderColor({
     theme,
     color: $color,
     isSelected: true,
     state: 'hover',
 })};
+        }
       }
 
       &:active {

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/styles.js

@@ -106,10 +106,10 @@ export const BackButton = styled(IconButton) `
       width: ${COLLAPSE_BUTTON_WIDTH};
       height: ${COLLAPSE_BUTTON_WIDTH};
     }
-
-    &:hover {
+    
+    &:active {
       background-color: transparent;
-    }
+    } 
   }
 `;
 export const ParentContent = styled.div `

package/components/Tree/TreeItem/styles.js

@@ -2,6 +2,7 @@ import { typographyClasses } from '@mui/material/Typography';
 import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
 import { buttonClasses } from '../../Button';
 import { Collapse } from '../../Collapse';
+import { HOVER_MEDIA } from '../../constants';
 import { descriptionClassnames } from '../../Description';
 import { IconButton } from '../../IconButton';
 import { OverflowTypography } from '../../OverflowTypography';
@@ -66,14 +67,22 @@ export const ItemContent = styled('div') `
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &.${treeClassnames.selected} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
 
-    &:hover, &:focus {
+    ${HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
+    }
+
+    &:focus {
       background-color: ${({ theme }) => theme.palette.primary[100]};
     }
   }
@@ -83,7 +92,13 @@ export const ItemContent = styled('div') `
 
     color: ${({ theme }) => theme.palette.text.disabled};
 
-    &:hover, &:focus {
+    ${HOVER_MEDIA} {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &:focus {
       background-color: transparent;
     }
   }
@@ -137,8 +152,10 @@ export const CollapseButton = styled(IconButton) `
     height: ${COLLAPSE_BUTTON_WIDTH};
   }
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.grey[300]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.grey[300]};
+    }
   }
 
   &.${treeClassnames.open} .${svgIconClassnames.root} {
@@ -167,10 +184,6 @@ export const CollapseButton = styled(IconButton) `
       width: ${MOBILE_COLLAPSE_BUTTON_WIDTH};
       height: auto;
     }
-
-    &:hover {
-      background-color: transparent;
-    }
   }
 `;
 export const ChevronIcon = styled(ChevronROutlineMd) `

package/components/constants/index.d.ts

@@ -2,3 +2,4 @@ export * from './date';
 export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
+export * from './media';

package/components/constants/index.js

@@ -2,3 +2,4 @@ export * from './date';
 export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
+export * from './media';

package/components/constants/media.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Медиа-выражение проверяющее что устройство поддерживает hover и является точным указателем
+ */
+export declare const HOVER_MEDIA = "@media (hover: hover) and (pointer: fine)";
+/**
+ * Медиа-выражение проверяющее что устройство не поддерживает hover
+ */
+export declare const HOVER_NONE_MEDIA = "@media (hover: none)";

package/components/constants/media.js

@@ -0,0 +1,8 @@
+/**
+ * Медиа-выражение проверяющее что устройство поддерживает hover и является точным указателем
+ */
+export const HOVER_MEDIA = '@media (hover: hover) and (pointer: fine)';
+/**
+ * Медиа-выражение проверяющее что устройство не поддерживает hover
+ */
+export const HOVER_NONE_MEDIA = '@media (hover: none)';

package/components/theme/components/MuiButton.js

@@ -1,5 +1,6 @@
 import { buttonClasses } from '@mui/material/Button';
 import { ButtonSizes, ButtonStates, ButtonVariants, buttonClassnames, } from '../../Button';
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../../constants';
 import { svgIconClassnames } from '../../SvgIcon';
 /**
  * Вспомогательная утилита для получения значения из values
@@ -366,29 +367,51 @@ export const MuiButton = {
                     buttonState: ButtonStates.Default,
                 }),
                 borderRadius: theme.shape.medium,
-                '&:hover': {
-                    color: getButtonColor({
-                        selected,
-                        theme,
-                        variant,
-                        color,
-                        buttonState: ButtonStates.Hover,
-                    }),
-                    backgroundColor: getButtonBackgroundColor({
-                        selected,
-                        color,
-                        variant,
-                        theme,
-                        buttonState: ButtonStates.Hover,
-                    }),
-                    boxShadow: 'none',
-                    border: getBorder({
-                        theme,
-                        variant,
-                        color,
-                        buttonState: ButtonStates.Hover,
-                        selected,
-                    }),
+                // Переопределяем media наследованное от Mui
+                [HOVER_NONE_MEDIA]: {
+                    '&:hover': {
+                        backgroundColor: getButtonBackgroundColor({
+                            selected,
+                            color,
+                            variant,
+                            theme,
+                            buttonState: ButtonStates.Default,
+                        }),
+                        boxShadow: 'unset',
+                        border: getBorder({
+                            theme,
+                            variant,
+                            color,
+                            buttonState: ButtonStates.Default,
+                            selected,
+                        }),
+                    },
+                },
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        color: getButtonColor({
+                            selected,
+                            theme,
+                            variant,
+                            color,
+                            buttonState: ButtonStates.Hover,
+                        }),
+                        backgroundColor: getButtonBackgroundColor({
+                            selected,
+                            color,
+                            variant,
+                            theme,
+                            buttonState: ButtonStates.Hover,
+                        }),
+                        boxShadow: 'none',
+                        border: getBorder({
+                            theme,
+                            variant,
+                            color,
+                            buttonState: ButtonStates.Hover,
+                            selected,
+                        }),
+                    },
                 },
                 '&:active': {
                     color: getButtonColor({

package/components/theme/components/MuiListItemButton.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../../constants';
 export const MuiListItemButton = {
     styleOverrides: {
         root({ theme }) {
@@ -6,9 +7,16 @@ export const MuiListItemButton = {
                 '&.Mui-selected': {
                     color: theme.palette.primary[800],
                     backgroundColor: theme.palette.grey[200],
+                    [HOVER_NONE_MEDIA]: {
+                        '&:hover': {
+                            backgroundColor: theme.palette.grey[200],
+                        },
+                    },
                 },
-                '&:hover': {
-                    backgroundColor: theme.palette.background.elementHover,
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        backgroundColor: theme.palette.background.elementHover,
+                    },
                 },
             };
         },

package/components/theme/components/MuiMenuItem.js

@@ -1,11 +1,14 @@
 import { menuItemClasses } from '@mui/material/MenuItem';
+import { HOVER_MEDIA } from '../../constants';
 export const MuiMenuItem = {
     styleOverrides: {
         root({ theme }) {
             return {
                 padding: theme.spacing(2, 2, 2, 3),
-                '&:hover': {
-                    backgroundColor: theme.palette.background.elementHover,
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        backgroundColor: theme.palette.background.elementHover,
+                    },
                 },
                 [`&.${menuItemClasses.selected}`]: {
                     background: `linear-gradient(90deg, ${theme.palette.primary.main} 0, ${theme.palette.primary.main} 3px, ${theme.palette.primary['100']} 3px)`,

package/components/theme/components/MuiOutlinedInput.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../constants';
 export const MuiOutlinedInput = {
     defaultProps: {
         notched: false,
@@ -10,28 +11,30 @@ export const MuiOutlinedInput = {
                 color: theme.palette.grey[900],
                 background: theme.palette.background.element,
                 padding: theme.microSpacing(1, 0),
-                '&:hover': {
-                    background: theme.palette.background.elementHover,
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        background: theme.palette.background.elementHover,
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                        borderColor: theme.palette.grey[800],
+                        transition: theme.transitions.create(['border-color'], {
+                            easing: theme.transitions.easing.easeIn,
+                            duration: theme.transitions.duration.shortest,
+                        }),
+                    },
+                    '&.Mui-error:hover:not(.Mui-focused) .MuiOutlinedInput-notchedOutline': {
+                        borderColor: theme.palette.error[900],
+                    },
                 },
                 '&.Mui-disabled': {
                     backgroundColor: theme.palette.components.disabled,
                 },
-                '&:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.grey[800],
-                    transition: theme.transitions.create(['border-color'], {
-                        easing: theme.transitions.easing.easeIn,
-                        duration: theme.transitions.duration.shortest,
-                    }),
-                },
                 '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
                     border: 'none',
                 },
                 '&.Mui-error .MuiOutlinedInput-notchedOutline': {
                     borderColor: theme.palette.error.dark,
                 },
-                '&.Mui-error:hover:not(.Mui-focused) .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error[900],
-                },
                 '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                     borderColor: theme.palette.primary[700],
                     transition: 'none',

package/components/theme/components/MuiSwitch.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../constants';
 const prepareColorToUrl = (color) => color.replace('#', '%23');
 const getCheckBackgroundImage = (color) => {
     const preparedColor = prepareColorToUrl(color);
@@ -30,13 +31,15 @@ export const MuiSwitch = {
                         opacity: 1,
                     },
                 },
-                // CHECKED HOVER
-                '& .Mui-checked:hover + .MuiSwitch-track': {
-                    backgroundColor: theme.palette.primary[700],
-                },
-                // NOT CHECKED HOVER
-                '& :not(.Mui-checked):hover + .MuiSwitch-track': {
-                    backgroundColor: theme.palette.grey[600],
+                [HOVER_MEDIA]: {
+                    // CHECKED HOVER
+                    '& .Mui-checked:hover + .MuiSwitch-track': {
+                        backgroundColor: theme.palette.primary[700],
+                    },
+                    // NOT CHECKED HOVER
+                    '& :not(.Mui-checked):hover + .MuiSwitch-track': {
+                        backgroundColor: theme.palette.grey[600],
+                    },
                 },
                 // DISABLED TRACK
                 '& .MuiButtonBase-root.MuiSwitch-switchBase.Mui-disabled': {
@@ -58,8 +61,10 @@ export const MuiSwitch = {
         },
         switchBase: {
             padding: 0,
-            '&:hover, &.Mui-checked:hover': {
-                backgroundColor: 'transparent',
+            [HOVER_MEDIA]: {
+                '&:hover, &.Mui-checked:hover': {
+                    backgroundColor: 'transparent',
+                },
             },
         },
         track({ theme }) {

package/components/theme/components/MuiTableRow.js

@@ -1,10 +1,18 @@
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../../constants';
 export const MuiTableRow = {
     styleOverrides: {
         root({ theme }) {
             return {
-                '&.MuiTableRow-hover:hover': {
-                    backgroundColor: theme.palette.background.elementHover,
-                    cursor: 'pointer',
+                [HOVER_MEDIA]: {
+                    '&.MuiTableRow-hover:hover': {
+                        backgroundColor: theme.palette.background.elementHover,
+                        cursor: 'pointer',
+                    },
+                },
+                [HOVER_NONE_MEDIA]: {
+                    '&.MuiTableRow-hover:hover': {
+                        backgroundColor: 'transparent',
+                    },
                 },
                 '&.Mui-selected': {
                     backgroundColor: theme.palette.primary['100'],

package/node/components/Alert/styles.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Title = exports.StyledTypography = exports.BodyWrapper = exports.IconWrapper = exports.Wrapper = exports.StyledIconButton = exports.StyledGrid = void 0;
+const constants_1 = require("../constants");
 const Grid_1 = require("../Grid");
 const IconButton_1 = require("../IconButton");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.StyledGrid = (0, styled_1.styled)(Grid_1.Grid) `
   grid-auto-flow: column;
   justify-content: flex-start;
@@ -23,8 +24,17 @@ exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.IconButton) `
     margin-top: ${({ theme }) => `calc(${theme.microSpacing(3)} + (20px - 40px) / 2)`};
   }
 
-  &:hover {
-    background-color: rgb(0 0 0 / 4%);
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: rgb(0 0 0 / 4%);
+    }
+  }
+  
+  /* Переопределяем active на мобильных устройствах для сохранения исходной стилизации */
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    &:active {
+      background-color: rgb(0 0 0 / 4%);
+    }
   }
 `;
 exports.Wrapper = styled_1.styled.div `
@@ -36,38 +46,38 @@ exports.Wrapper = styled_1.styled.div `
   border: 1px solid transparent;
   border-radius: ${({ theme }) => theme.shape.medium};
 
-  &.${constants_1.alertClassnames.severityInfo} {
+  &.${constants_2.alertClassnames.severityInfo} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
     border-color: ${({ theme }) => theme.palette.primary[300]};
 
-    .${constants_1.alertClassnames.iconWrapper} {
+    .${constants_2.alertClassnames.iconWrapper} {
       color: ${({ theme }) => theme.palette.primary[800]};
     }
   }
 
-  &.${constants_1.alertClassnames.severitySuccess} {
+  &.${constants_2.alertClassnames.severitySuccess} {
     background-color: ${({ theme }) => theme.palette.success[100]};
     border-color: ${({ theme }) => theme.palette.success[300]};
 
-    .${constants_1.alertClassnames.iconWrapper} {
+    .${constants_2.alertClassnames.iconWrapper} {
       color: ${({ theme }) => theme.palette.success[800]};
     }
   }
 
-  &.${constants_1.alertClassnames.severityError} {
+  &.${constants_2.alertClassnames.severityError} {
     background-color: ${({ theme }) => theme.palette.error[100]};
     border-color: ${({ theme }) => theme.palette.error[300]};
 
-    .${constants_1.alertClassnames.iconWrapper} {
+    .${constants_2.alertClassnames.iconWrapper} {
       color: ${({ theme }) => theme.palette.error[800]};
     }
   }
 
-  &.${constants_1.alertClassnames.severityWarning} {
+  &.${constants_2.alertClassnames.severityWarning} {
     background-color: ${({ theme }) => theme.palette.warning[100]};
     border-color: ${({ theme }) => theme.palette.warning[300]};
 
-    .${constants_1.alertClassnames.iconWrapper} {
+    .${constants_2.alertClassnames.iconWrapper} {
       color: ${({ theme }) => theme.palette.warning[800]};
     }
   }
@@ -102,15 +112,15 @@ exports.BodyWrapper = styled_1.styled.div `
   min-width: 0;
   margin-block: ${({ theme }) => theme.microSpacing(3)};
 
-  .${constants_1.alertClassnames.hasCloseButton} & {
+  .${constants_2.alertClassnames.hasCloseButton} & {
     margin-right: ${({ theme }) => theme.spacing(1)};
   }
 
-  & > .${constants_1.alertClassnames.title} + .${constants_1.alertClassnames.content} {
+  & > .${constants_2.alertClassnames.title} + .${constants_2.alertClassnames.content} {
     margin-top: ${({ theme }) => theme.spacing(1)};
   }
 
-  & > .${constants_1.alertClassnames.actions} {
+  & > .${constants_2.alertClassnames.actions} {
     margin-top: ${({ theme }) => theme.spacing(2)};
   }
 `;