@astral/ui 4.89.0 → 4.90.1

package/components/Accordion/styles.d.ts

@@ -42,7 +42,7 @@ export declare const Chevron: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/AutoSaveIndicator/DefaultState/styles.d.ts

@@ -6,7 +6,7 @@ export declare const DefaultIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/AutoSaveIndicator/ErrorState/styles.d.ts

@@ -17,7 +17,7 @@ export declare const ErrorIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/AutoSaveIndicator/LoadingState/styles.d.ts

@@ -3,7 +3,7 @@ export declare const LoadingIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/AutoSaveIndicator/SuccessState/styles.d.ts

@@ -3,7 +3,7 @@ export declare const SuccessIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Badge/styles.js

@@ -1,4 +1,5 @@
 import Badge from '@mui/material/Badge';
+import { iconButtonClassnames } from '../IconButton';
 import { styled } from '../styled';
 import { badgeClassnames } from './constants';
 const getBgColor = ({ $customColor, theme, $variantColor, }) => {
@@ -53,6 +54,12 @@ export const StyledBadge = styled(Badge, {
     flex-grow: 1;
   }
 
+  /* Причина игнора: прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  &:has(.${iconButtonClassnames.root}) {
+    width: max-content;
+  }
+
   .${badgeClassnames.content} {
     cursor: default;
     user-select: none;

package/components/BulletListItem/styles.d.ts

@@ -7,7 +7,7 @@ export declare const Icon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Chevron/styles.d.ts

@@ -6,7 +6,7 @@ export declare const ChevronIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & ChevronWrapperProps, {}, {}>;

package/components/Chip/ChipStatusIcon/styled.d.ts

@@ -3,7 +3,7 @@ export declare const StatusIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/ComplianceStatus/styles.d.ts

@@ -20,7 +20,7 @@ export declare const EmptyIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement>, {}, {}>;
 export declare const RejectIcon: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -31,7 +31,7 @@ export declare const RejectIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement>, {}, {}>;
 export declare const SuccessIcon: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -42,7 +42,7 @@ export declare const SuccessIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement>, {}, {}>;
 export declare const StyledLoader: import("../styled").StyledComponent<import("../Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;

package/components/CopyTypography/styles.d.ts

@@ -18,7 +18,7 @@ export declare const StyledCopyIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/DataGrid/Row/styles.d.ts

@@ -34,7 +34,7 @@ export declare const ChevronIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/DataGridCollapsibleRow/styles.d.ts

@@ -33,7 +33,7 @@ export declare const ChevronIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DatePicker/DateCalendar/DateCalendarChevronButton/DateCalendarNextButton/styles.d.ts

@@ -6,7 +6,7 @@ export declare const NextIcon: import("../../../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -18,7 +18,7 @@ export declare const DoubleNextIcon: import("../../../../styled").StyledComponen
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DatePicker/DateCalendar/DateCalendarChevronButton/DateCalendarPrevButton/styles.d.ts

@@ -6,7 +6,7 @@ export declare const PrevIcon: import("../../../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -18,7 +18,7 @@ export declare const DoublePrevIcon: import("../../../../styled").StyledComponen
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/FormHelperText/FormHelperTextContent/styles.d.ts

@@ -11,7 +11,7 @@ export declare const SuccessIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -19,7 +19,7 @@ export declare const ErrorIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/HintIcon/HintIcon.d.ts

@@ -1,2 +1,2 @@
 import { type HintIconProps } from './types';
-export declare const HintIcon: ({ variant, title, note, iconOption, tooltipPlacement, renderIcon, tooltipWidth, }: HintIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HintIcon: ({ variant, title, note, iconOption, size, tooltipPlacement, renderIcon, tooltipWidth, }: HintIconProps) => import("react/jsx-runtime").JSX.Element;

package/components/HintIcon/HintIcon.js

@@ -3,7 +3,7 @@ import { BottomDrawer } from '../BottomDrawer';
 import { Icon } from './Icon';
 import { DrawerContent } from './styles';
 import { useLogic } from './useLogic';
-export const HintIcon = ({ variant, title, note, iconOption, tooltipPlacement = 'bottom', renderIcon, tooltipWidth, }) => {
+export const HintIcon = ({ variant, title, note, iconOption, size, tooltipPlacement = 'bottom', renderIcon, tooltipWidth, }) => {
     const { handleClose, handleOpen, open } = useLogic();
-    return (_jsxs(_Fragment, { children: [_jsx(Icon, { onClick: handleOpen, variant: variant, iconOption: iconOption, note: note, tooltipPlacement: tooltipPlacement, renderIcon: renderIcon, tooltipWidth: tooltipWidth }), _jsx(BottomDrawer, { title: title, open: open, onClose: handleClose, children: _jsx(DrawerContent, { children: note }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Icon, { onClick: handleOpen, variant: variant, iconOption: iconOption, size: size, note: note, tooltipPlacement: tooltipPlacement, renderIcon: renderIcon, tooltipWidth: tooltipWidth }), _jsx(BottomDrawer, { title: title, open: open, onClose: handleClose, children: _jsx(DrawerContent, { children: note }) })] }));
 };

package/components/HintIcon/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import type { SyntheticEvent } from 'react';
 import type { HintIconProps, TooltipPlacement } from '../types';
-export type IconProps = Pick<HintIconProps, 'variant' | 'iconOption' | 'note' | 'renderIcon' | 'tooltipWidth'> & {
+export type IconProps = Pick<HintIconProps, 'variant' | 'iconOption' | 'size' | 'note' | 'renderIcon' | 'tooltipWidth'> & {
     onClick: (e: SyntheticEvent) => void;
     tooltipPlacement: TooltipPlacement;
 };

package/components/HintIcon/Icon/Icon.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '../../Tooltip';
-import { hintIconClassnames } from '../constants';
+import { hintIconClassnames, ICONS } from '../constants';
 import { IconWrapper } from './styles';
 import { useLogic } from './useLogic';
 export const Icon = (props) => {
-    const { getIcon, iconColor } = useLogic(props);
-    const { onClick, note, tooltipPlacement, tooltipWidth } = props;
-    return (_jsx(Tooltip, { title: note, placement: tooltipPlacement, width: tooltipWidth, children: _jsx(IconWrapper, { onClick: onClick, "$color": iconColor, className: hintIconClassnames.iconWrapper, children: getIcon() }) }));
+    const { iconColor } = useLogic(props);
+    const { onClick, variant, iconOption, size, note, tooltipPlacement, tooltipWidth, renderIcon, } = props;
+    const IconVariant = () => {
+        if (renderIcon) {
+            return renderIcon();
+        }
+        const Component = ICONS[variant ?? 'info'][iconOption?.variant ?? 'fill'];
+        return _jsx(Component, { size: size });
+    };
+    return (_jsx(Tooltip, { title: note, placement: tooltipPlacement, width: tooltipWidth, children: _jsx(IconWrapper, { onClick: onClick, "$color": iconColor, className: hintIconClassnames.iconWrapper, children: _jsx(IconVariant, {}) }) }));
 };

package/components/HintIcon/Icon/useLogic/useLogic.d.ts

@@ -1,8 +1,6 @@
-import { type ReactNode } from 'react';
 import { type IconProps } from '../Icon';
 type UseLogicParams = IconProps;
-export declare const useLogic: ({ iconOption, variant, renderIcon, }: UseLogicParams) => {
-    getIcon: () => ReactNode;
+export declare const useLogic: ({ iconOption, renderIcon }: UseLogicParams) => {
     iconColor: string;
 };
 export {};

package/components/HintIcon/Icon/useLogic/useLogic.js

@@ -1,17 +1,5 @@
-import { ICONS } from '../../constants';
 import { useIconColor } from './hooks';
-export const useLogic = ({ iconOption, variant, renderIcon, }) => {
+export const useLogic = ({ iconOption, renderIcon }) => {
     const iconColor = useIconColor({ color: iconOption?.color, renderIcon });
-    const { variant: iconOptionVariant = 'fill' } = iconOption || {};
-    const getIcon = () => {
-        if (renderIcon) {
-            return renderIcon();
-        }
-        const icon = ICONS[variant][iconOptionVariant];
-        if (icon) {
-            return icon;
-        }
-        return ICONS.info.fill;
-    };
-    return { getIcon, iconColor };
+    return { iconColor };
 };

package/components/HintIcon/constants.d.ts

@@ -1,13 +1,14 @@
+/// <reference types="react" />
 export declare const hintIconClassnames: {
     iconWrapper: string;
 };
 export declare const ICONS: {
     question: {
-        fill: import("react/jsx-runtime").JSX.Element;
-        outline: import("react/jsx-runtime").JSX.Element;
+        fill: import("react").FunctionComponent<import("..").SvgIconProps>;
+        outline: import("react").FunctionComponent<import("..").SvgIconProps>;
     };
     info: {
-        fill: import("react/jsx-runtime").JSX.Element;
-        outline: import("react/jsx-runtime").JSX.Element;
+        fill: import("react").FunctionComponent<import("..").SvgIconProps>;
+        outline: import("react").FunctionComponent<import("..").SvgIconProps>;
     };
 };

package/components/HintIcon/constants.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { InfoFillMd } from '../../icons/InfoFillMd';
 import { InfoOutlineMd } from '../../icons/InfoOutlineMd';
 import { QuestionFillMd } from '../../icons/QuestionFillMd';
@@ -9,11 +8,11 @@ export const hintIconClassnames = {
 };
 export const ICONS = {
     question: {
-        fill: _jsx(QuestionFillMd, {}),
-        outline: _jsx(QuestionOutlineMd, {}),
+        fill: QuestionFillMd,
+        outline: QuestionOutlineMd,
     },
     info: {
-        fill: _jsx(InfoFillMd, {}),
-        outline: _jsx(InfoOutlineMd, {}),
+        fill: InfoFillMd,
+        outline: InfoOutlineMd,
     },
 };

package/components/HintIcon/types.d.ts

@@ -20,6 +20,12 @@ export type HintIconProps = {
          */
         color?: 'warning' | 'grey' | 'lightGrey';
     };
+    /**
+     * Размеры (width и height) иконки.
+     *
+     * sm = 16px, md = 24px, auto = 1em
+     */
+    size?: 'sm' | 'md' | 'auto';
     /**
      *  Текст заголовка BottomDrawer
      */

package/components/IconButton/IconButton.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonVariants } from '../Button';
 import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
+import { classNames } from '../utils/classNames';
+import { iconButtonClassnames } from './constants';
 import { StyledButton } from './styles';
 const UnwrappedIconButton = (props, ref) => {
-    const { variant = ButtonVariants.Contained, children, ...restProps } = props;
-    return (_jsx(StyledButton, { variant: variant, ...restProps, ref: ref, children: children }));
+    const { variant = ButtonVariants.Contained, children, className, ...restProps } = props;
+    return (_jsx(StyledButton, { variant: variant, className: classNames(iconButtonClassnames.root, className), ...restProps, ref: ref, children: children }));
 };
 export const IconButton = forwardRefWithGeneric(UnwrappedIconButton);

package/components/IconButton/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const iconButtonClassnames: {
+    root: string;
+};

package/components/IconButton/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const iconButtonClassnames = {
+    root: createUIKitClassname('icon-button'),
+};

package/components/IconButton/index.d.ts

@@ -1 +1,2 @@
 export * from './IconButton';
+export { iconButtonClassnames } from './constants';

package/components/IconButton/index.js

@@ -1 +1,2 @@
 export * from './IconButton';
+export { iconButtonClassnames } from './constants';

package/components/IconButton/public.d.ts

@@ -1 +1,2 @@
+export { iconButtonClassnames } from './constants';
 export * from './IconButton';

package/components/IconButton/public.js

@@ -1 +1,2 @@
+export { iconButtonClassnames } from './constants';
 export * from './IconButton';

package/components/JsonViewer/JsonNode/styles.d.ts

@@ -16,7 +16,7 @@ export declare const Chevron: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/LegacyNotification/styles.d.ts

@@ -3,7 +3,7 @@ export declare const InfoNotificationIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -11,7 +11,7 @@ export declare const SuccessNotificationIcon: import("../styled").StyledComponen
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -19,7 +19,7 @@ export declare const WarningNotificationIcon: import("../styled").StyledComponen
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -27,7 +27,7 @@ export declare const ErrorNotificationIcon: import("../styled").StyledComponent<
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Loader/styles.d.ts

@@ -12,7 +12,7 @@ export declare const StyledSvgIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/NavMenu/Item/ItemButton/styles.d.ts

@@ -642,7 +642,7 @@ export declare const NavMenuItemButtonChevron: import("../../../styled").StyledC
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
@@ -659,7 +659,7 @@ export declare const StyledPageDotOutlineMd: import("../../../styled").StyledCom
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/NewPopover/styles.js

@@ -6,7 +6,7 @@ export const StyledMuiPopper = styled(MuiPopper) `
     --arrow-base: ${ARROW_BASE}px;
     --arrow-height: ${ARROW_HEIGHT}px;
 
-    z-index: ${({ theme }) => theme.zIndex.tooltip};
+    z-index: ${({ theme }) => theme.zIndex.modal};
   }
 
   /* Anchor ушёл за скролл/вьюпорт — прячем стрелку. */

package/components/NewStepper/Step/styles.d.ts

@@ -11,7 +11,7 @@ export declare const ArrowConnector: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Notification/styles.d.ts

@@ -3,7 +3,7 @@ export declare const InfoNotificationIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -11,7 +11,7 @@ export declare const SuccessNotificationIcon: import("../styled").StyledComponen
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -19,7 +19,7 @@ export declare const WarningNotificationIcon: import("../styled").StyledComponen
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -27,7 +27,7 @@ export declare const ErrorNotificationIcon: import("../styled").StyledComponent<
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/SearchField/styles.d.ts

@@ -3,7 +3,7 @@ export declare const SearchIcon: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Stepper/ArrowConnector/ArrowConnector.d.ts

@@ -3,7 +3,7 @@ export declare const ArrowConnector: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Stepper/StepIcon/styles.d.ts

@@ -3,7 +3,7 @@ export declare const ErrorIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -11,7 +11,7 @@ export declare const SuccessIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -19,7 +19,7 @@ export declare const SelectIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
@@ -29,7 +29,7 @@ export declare const DefaultIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -37,7 +37,7 @@ export declare const ActiveIcon: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "auto" | undefined;
 } & import("react").SVGProps<SVGSVGElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/SvgIcon/SvgIcon.js

@@ -1,8 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
 import { SIZES, svgIconClassnames } from './constants';
 import { StyledSvg } from './styles';
+const svgCva = cva(svgIconClassnames.root, {
+    variants: {
+        size: {
+            auto: svgIconClassnames.sizeAuto,
+            sm: svgIconClassnames.sizeSm,
+            md: svgIconClassnames.sizeMd,
+        },
+    },
+});
 export const SvgIcon = (props) => {
     const { children, color = 'inherit', titleAccess, size, width, height, viewBox = '0 0 24 24', xmlns = 'http://www.w3.org/2000/svg', className, ...restProps } = props;
-    return (_jsxs(StyledSvg, { className: classNames(className, svgIconClassnames.root), viewBox: viewBox, "aria-hidden": titleAccess ? undefined : true, role: titleAccess ? 'img' : undefined, xmlns: xmlns, color: color, width: SIZES[size] || width || '1em', height: SIZES[size] || height || '1em', ...restProps, children: [children, titleAccess ? _jsx("title", { children: titleAccess }) : null] }));
+    return (_jsxs(StyledSvg, { className: classNames(className, svgCva({ size })), viewBox: viewBox, "aria-hidden": titleAccess ? undefined : true, role: titleAccess ? 'img' : undefined, xmlns: xmlns, color: color, width: SIZES[size] || width || '1em', height: SIZES[size] || height || '1em', ...restProps, children: [children, titleAccess ? _jsx("title", { children: titleAccess }) : null] }));
 };