@itcase/ui 1.2.31 → 1.2.33

package/dist/{Badge-DQnTpE4I.js → Badge-DBjlLLfX.js}

@@ -1,9 +1,51 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { badgeAppearance } from './appearance/Badge.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { T as Text } from './Text-DlSG_p4u.js';
+import { T as Text } from './Text-C4Bg2Mv6.js';
+
+var badgeAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        textColor: 'accentTextPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        textColor: 'primaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextInverse',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        textColor: 'secondaryTextPrimary',
+    },
+    disabled: {
+        fill: 'accentDisabled',
+        fillHover: 'none',
+        textColor: 'accentTextDisabled',
+    },
+};
 
 var badgeConfig = {
     appearance: badgeAppearance,
@@ -65,4 +107,4 @@ Badge.defaultProps = {
     size: 'm',
 };
 
-export { Badge as B, badgeConfig as b };
+export { Badge as B, badgeConfig as a, badgeAppearance as b };

package/dist/{Badge-BMKD9teI.js → Badge-_xQzAcyN.js}

@@ -2,13 +2,55 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/Badge.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Text = require('./Text-1b-Bk7yG.js');
+var Text = require('./Text-R6XNq6Ca.js');
+
+var badgeAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        textColor: 'accentTextPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        textColor: 'primaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextInverse',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        textColor: 'secondaryTextPrimary',
+    },
+    disabled: {
+        fill: 'accentDisabled',
+        fillHover: 'none',
+        textColor: 'accentTextDisabled',
+    },
+};
 
 var badgeConfig = {
-    appearance: index.badgeAppearance,
+    appearance: badgeAppearance,
     setAppearance: function (newComponent) {
         badgeConfig.appearance = newComponent;
     },
@@ -68,4 +110,5 @@ Badge.defaultProps = {
 };
 
 exports.Badge = Badge;
+exports.badgeAppearance = badgeAppearance;
 exports.badgeConfig = badgeConfig;

package/dist/{Button-DS2l65oq.js → Button-C8MATksY.js}

@@ -1,13 +1,72 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { buttonAppearance } from './appearance/Button.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { I as Icon } from './Icon-B7BJo5kW.js';
+import { I as Icon } from './Icon-DptCmI_y.js';
 import { a as LinkWrapper } from './Link-CeQuavin.js';
-import { L as Loader } from './Loader-CqEocvjh.js';
-import { T as Text } from './Text-DlSG_p4u.js';
+import { L as Loader } from './Loader-DHNcD09o.js';
+import { T as Text } from './Text-C4Bg2Mv6.js';
+
+var buttonAppearance = {
+    dev: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        label: 'Button',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'l',
+        shape: 'rounded',
+        size: 'xxl',
+    },
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentSecondary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        labelTextColor: 'primaryTextPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        labelTextColor: 'secondaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceDisabled: {
+        fill: 'surfaceDisabled',
+        fillHover: 'surfaceDisabled',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
 
 var buttonConfig = {
     appearance: buttonAppearance,
@@ -88,4 +147,4 @@ var Button = React.forwardRef(function Button(props, ref) {
             'button_type_with-icon', loading && 'button_state_loading'), "data-test-id": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", disabled: isDisabled, href: link || href, rel: rel, style: buttonStyles, target: target, type: htmlType, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [loading && (jsx(Loader, { className: clsx(className, 'button__loader', shapeClass), fill: loaderFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderFill), itemFill: loaderItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderItemFill), set: loaderSet })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", fill: fillIconBefore, fillSize: iconBeforeFillSize, iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", fill: fillIcon, fillSize: iconFillSize, iconFill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize) || undefined, sizeMobile: labelTextSizeMobile, style: labelStyles, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, children: children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", fill: fillIconAfter, fillSize: iconAfterFillSize, iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
-export { Button as B, buttonConfig as b };
+export { Button as B, buttonAppearance as a, buttonConfig as b };

package/dist/{Button-x4mnZJoS.js → Button-ChSAts3j.js}

@@ -3,16 +3,75 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/Button.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Icon = require('./Icon-PoesVPJn.js');
+var Icon = require('./Icon-C8ACV9r7.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Loader = require('./Loader-DRTOGvF1.js');
-var Text = require('./Text-1b-Bk7yG.js');
+var Loader = require('./Loader-DReoCdZ2.js');
+var Text = require('./Text-R6XNq6Ca.js');
+
+var buttonAppearance = {
+    dev: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        label: 'Button',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'l',
+        shape: 'rounded',
+        size: 'xxl',
+    },
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentSecondary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        labelTextColor: 'primaryTextPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        labelTextColor: 'secondaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceDisabled: {
+        fill: 'surfaceDisabled',
+        fillHover: 'surfaceDisabled',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
 
 var buttonConfig = {
-    appearance: index.buttonAppearance,
+    appearance: buttonAppearance,
     setAppearance: function (newComponent) {
         buttonConfig.appearance = newComponent;
     },
@@ -91,4 +150,5 @@ var Button = React.forwardRef(function Button(props, ref) {
 });
 
 exports.Button = Button;
+exports.buttonAppearance = buttonAppearance;
 exports.buttonConfig = buttonConfig;

package/dist/{Divider-3upWnf8a.js → Divider-BoB-f9Gr.js}

@@ -2,12 +2,15 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/Divider.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 
+var dividerAppearance = {
+    dev: {},
+};
+
 var dividerConfig = {
-    appearance: index.dividerAppearance,
+    appearance: dividerAppearance,
     setAppearance: function (newComponent) {
         dividerConfig.appearance = newComponent;
     },

package/dist/{Divider-DE2Q5J36.js → Divider-DHIuQUsH.js}

@@ -1,9 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { dividerAppearance } from './appearance/Divider.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 
+var dividerAppearance = {
+    dev: {},
+};
+
 var dividerConfig = {
     appearance: dividerAppearance,
     setAppearance: function (newComponent) {

package/dist/{DropdownItem-DzDP45iO.js → DropdownItem-B8IMNQww.js}

@@ -3,10 +3,9 @@ import React, { useRef, useState, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { dropdownItemAppearance } from './appearance/DropdownItem.js';
-import { D as Divider } from './Divider-DE2Q5J36.js';
+import { D as Divider } from './Divider-DHIuQUsH.js';
 import { L as Link } from './Link-CeQuavin.js';
-import { T as Text } from './Text-DlSG_p4u.js';
+import { T as Text } from './Text-C4Bg2Mv6.js';
 
 function Dropdown(props) {
     var children = props.children, isOpen = props.isOpen, after = props.after, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, className = props.className, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen;
@@ -82,6 +81,10 @@ function Dropdown(props) {
                 onAnimationEnd: onAnimationEnd, children: children })), after] }));
 }
 
+var dropdownItemAppearance = {
+    dev: {},
+};
+
 var dropdownItemConfig = {
     appearance: dropdownItemAppearance,
     setAppearance: function (newComponent) {

package/dist/{DropdownItem-CT9Dmiub.js → DropdownItem-E9HkOU63.js}

@@ -5,10 +5,9 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var index = require('./cjs/appearance/DropdownItem.js');
-var Divider = require('./Divider-3upWnf8a.js');
+var Divider = require('./Divider-BoB-f9Gr.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Text = require('./Text-1b-Bk7yG.js');
+var Text = require('./Text-R6XNq6Ca.js');
 
 function Dropdown(props) {
     var children = props.children, isOpen = props.isOpen, after = props.after, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, className = props.className, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen;
@@ -84,8 +83,12 @@ function Dropdown(props) {
                 onAnimationEnd: onAnimationEnd, children: children })), after] }));
 }
 
+var dropdownItemAppearance = {
+    dev: {},
+};
+
 var dropdownItemConfig = {
-    appearance: index.dropdownItemAppearance,
+    appearance: dropdownItemAppearance,
     setAppearance: function (newComponent) {
         dropdownItemConfig.appearance = newComponent;
     },

package/dist/{Group-Dc70Z4_7.js → Group-BCvs5UxK.js}

@@ -1,10 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { groupAppearance } from './appearance/Group.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 
+var groupAppearance = {
+    dev: {
+        borderWidth: 1,
+        borderColor: 'surfaceBorderPrimary',
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+    },
+};
+
 var groupConfig = {
     appearance: groupAppearance,
     setAppearance: function (newComponent) {

package/dist/{Group-BiN0haVp.js → Group-u6YDbMxn.js}

@@ -3,12 +3,21 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/Group.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 
+var groupAppearance = {
+    dev: {
+        borderWidth: 1,
+        borderColor: 'surfaceBorderPrimary',
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+    },
+};
+
 var groupConfig = {
-    appearance: index.groupAppearance,
+    appearance: groupAppearance,
     setAppearance: function (newComponent) {
         groupConfig.appearance = newComponent;
     },

package/dist/{Icon-PoesVPJn.js → Icon-C8ACV9r7.js}

@@ -5,14 +5,24 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
-var index = require('./cjs/appearance/Icon.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Tooltip = require('./Tooltip-CNJN2lf5.js');
+var Tooltip = require('./Tooltip-BswHy19O.js');
+
+var iconAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        fillSize: 40,
+        iconFill: 'accentItemPrimary',
+        iconSize: 24,
+        imageSrc: 'img/filter.svg',
+    },
+};
 
 var iconConfig = {
-    appearance: index.iconAppearance,
+    appearance: iconAppearance,
     setAppearance: function (newComponent) {
         iconConfig.appearance = newComponent;
     },
@@ -102,7 +112,6 @@ var Icon = React.forwardRef(function Icon(props, ref) {
     });
     // @ts-expect-error
     var iconStyles = useStyles.useStyles(props).styles;
-    console.log('>>>>' + iconSizeClass);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', onClick && cursorClass), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
 });
 var removeFillStroke = function (code) {

package/dist/{Icon-B7BJo5kW.js → Icon-DptCmI_y.js}

@@ -3,11 +3,21 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
-import { iconAppearance } from './appearance/Icon.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 import { a as LinkWrapper } from './Link-CeQuavin.js';
-import { T as Tooltip } from './Tooltip-f5EWhsGj.js';
+import { T as Tooltip } from './Tooltip--c-4Qp04.js';
+
+var iconAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        fillSize: 40,
+        iconFill: 'accentItemPrimary',
+        iconSize: 24,
+        imageSrc: 'img/filter.svg',
+    },
+};
 
 var iconConfig = {
     appearance: iconAppearance,
@@ -100,7 +110,6 @@ var Icon = React.forwardRef(function Icon(props, ref) {
     });
     // @ts-expect-error
     var iconStyles = useStyles(props).styles;
-    console.log('>>>>' + iconSizeClass);
     return (jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', onClick && cursorClass), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
 });
 var removeFillStroke = function (code) {

package/dist/{Input-HGM-rzzr.js → Input-CgjHxZmK.js}

@@ -1,9 +1,63 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { inputAppearance, inputState } from './appearance/Input.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 
+var inputAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+        textSize: 'm',
+    },
+};
+var inputState = {
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    disabled: {
+        borderColor: 'surfaceBorderDisabled',
+        borderColorHover: 'surfaceBorderDisabled',
+        placeholderTextColor: 'surfaceTextDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    error: {
+        borderColor: 'errorBorderPrimary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    errorFilled: {
+        borderColor: 'errorBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+    },
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    readonly: {
+        borderColor: 'surfaceBorderDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    require: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
 var inputConfig = {
     appearance: inputAppearance,
     setAppearance: function (newComponent) {

package/dist/{Input-DXbt_RWB.js → Input-KgHOW5DR.js}

@@ -3,15 +3,69 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/Input.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 
+var inputAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+        textSize: 'm',
+    },
+};
+var inputState = {
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    disabled: {
+        borderColor: 'surfaceBorderDisabled',
+        borderColorHover: 'surfaceBorderDisabled',
+        placeholderTextColor: 'surfaceTextDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    error: {
+        borderColor: 'errorBorderPrimary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    errorFilled: {
+        borderColor: 'errorBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+    },
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    readonly: {
+        borderColor: 'surfaceBorderDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    require: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
 var inputConfig = {
-    appearance: index.inputAppearance,
+    appearance: inputAppearance,
     setAppearance: function (newComponent) {
         inputConfig.appearance = newComponent;
     },
-    state: index.inputState,
+    state: inputState,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         inputConfig.state = newComponent;