@itcase/ui 1.2.28 → 1.2.29

package/dist/cjs/components/SiteMenu.js

@@ -5,22 +5,26 @@ var React = require('react');
 var clsx = require('clsx');
 var UIContext = require('../context/UIContext.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-CkynFJm4.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../appearance/Text.js');
 
 function SiteMenu(props) {
     var children = props.children, className = props.className, closeText = props.closeText, closeTextSize = props.closeTextSize, closeTextColor = props.closeTextColor, closeTextColorHover = props.closeTextColorHover, iconCloseBgFill = props.iconCloseBgFill, iconCloseFill = props.iconCloseFill, iconCloseSize = props.iconCloseSize, iconClose = props.iconClose, onClose = props.onClose;

package/dist/cjs/components/Swiper.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var react = require('swiper/react');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Title = require('../../Title-B-N0qkn3.js');
+var Title = require('../../Title-Ze_OL1Co.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -16,6 +16,7 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../appearance/Title.js');
 
 function Swiper(props) {
     var activeSlideIndex = props.activeSlideIndex, autoHeight = props.autoHeight, breakpoints = props.breakpoints, children = props.children, className = props.className, direction = props.direction, allowTouchMove = props.allowTouchMove, swiperSlideClass = props.swiperSlideClass, preventClicks = props.preventClicks, preventClicksPropagation = props.preventClicksPropagation, simulateTouch = props.simulateTouch, forwardedRef = props.forwardedRef, // https://github.com/vercel/next.js/issues/4957

package/dist/cjs/components/Tab.js

@@ -3,12 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('../appearance/Tab.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Badge = require('../../Badge-2JkquAEb.js');
+var Badge = require('../../Badge-TyPbVqR_.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
 var Link = require('../../Link-CqWzwh8V.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -18,16 +19,18 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../appearance/Badge.js');
 require('../../tslib.es6-CCZ3TN_7.js');
+require('../appearance/Text.js');
 
 var tabConfig = {
-    appearance: undefined,
+    appearance: index.tabAppearance,
     setAppearance: function (newComponent) {
         tabConfig.appearance = newComponent;
     },
 };
 function Tab(props) {
-    var children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, className = props.className, dataTour = props.dataTour, _d = props.dividerDirection, dividerDirection = _d === void 0 ? 'horizontal' : _d, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextAlign = props.labelTextAlign, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, reset = props.reset, set = props.set, target = props.target, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, className = props.className, dataTour = props.dataTour, _d = props.dividerDirection, dividerDirection = _d === void 0 ? 'horizontal' : _d, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextAlign = props.labelTextAlign, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, reset = props.reset, set = props.set, target = props.target, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
     var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -79,7 +82,7 @@ function Tab(props) {
     // @ts-expect-error
     var tab = useStyles.useStyles(props).styles;
     var appearanceConfig = appearance && tabConfig.appearance && tabConfig.appearance[appearance];
-    return (jsxRuntime.jsx("div", { "data-tour": dataTour, style: tab, className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass ||
+    return (jsxRuntime.jsx("div", { className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass ||
             (isDisabled
                 ? fillDisabledClass ||
                     ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillDisabled) &&
@@ -94,9 +97,9 @@ function Tab(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
                 "tab_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), fillActiveClass, fillActiveHoverClass, shapeClass, typeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.type) &&
-                "tab_type_".concat(appearanceConfig.type).replace(/([A-Z])/g, '-$1').toLowerCase()), widthClass, reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass, onClick && 'cursor_type_pointer'), onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { fill: linkFill, className: clsx('tab__link', alignDirectionClass, alignClass), href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColorHover: labelTextColorHover, textColor: isDisabled
+                "tab_type_".concat(appearanceConfig.type).replace(/([A-Z])/g, '-$1').toLowerCase()), widthClass, reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass, onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('tab__link', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, textColor: isDisabled
                                             ? labelColorDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorDisabled)
-                                            : labelColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColor), textColorActive: isActive && (labelColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorActive)), textColorGradient: labelTextGradient, textStyle: labelTextStyle, textAlign: labelTextAlign, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue)) && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeAppearance), size: badgeSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeSize), textColor: badgeTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextColor), textSize: badgeTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextSize), value: badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue) }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: isDisabled
+                                            : labelColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColor), textColorActive: isActive && (labelColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorActive)), children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue)) && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeAppearance), size: badgeSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeSize), textColor: badgeTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextColor), textSize: badgeTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextSize), value: badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue) }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: isDisabled
                                     ? dividerFillDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillDisabled)
                                     : dividerFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFill), fillHover: isHover && (dividerFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillHover)), direction: dividerDirection, fillActive: isActive && (dividerFillActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillActive)), fillActiveHover: dividerFillActiveHover, size: dividerSize })] })), after] }) }) }));
 }
@@ -145,7 +148,7 @@ function TabGroup(props) {
     });
     // @ts-expect-error
     var _a = useStyles.useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass), "data-tour": dataTour, id: id, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass), "data-tour": dataTour, id: id, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "tab-group__wrapper group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 }
 
 exports.Tab = Tab;

package/dist/cjs/components/Text.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var Text = require('../../Text-_YhyTsQ1.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('react/jsx-runtime');
 require('clsx');
+require('../appearance/Text.js');
 require('../hooks/useDeviceTargetClass.js');
 require('react');
 require('lodash/castArray');

package/dist/cjs/components/Textarea.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('../appearance/Textarea.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -12,17 +13,18 @@ require('../hooks/useMediaQueries.js');
 require('react-responsive');
 
 var textareaConfig = {
-    state: {},
-    setState: function (newComponent) {
-        textareaConfig.state = newComponent;
-    },
-    appearance: {},
+    appearance: index.textareaAppearance,
     setAppearance: function (newComponent) {
         textareaConfig.appearance = newComponent;
     },
+    state: index.textareaState,
+    // eslint-disable-next-line perfectionist/sort-objects
+    setState: function (newComponent) {
+        textareaConfig.state = newComponent;
+    },
 };
 function Textarea(props) {
-    var appearance = props.appearance, id = props.id, className = props.className, placeholder = props.placeholder, disabled = props.disabled, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
+    var id = props.id, appearance = props.appearance, className = props.className, disabled = props.disabled, placeholder = props.placeholder, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
     var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -95,7 +97,7 @@ function Textarea(props) {
             ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
                 "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass), id: id, disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass), disabled: disabled, id: id, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
 }
 Textarea.defaultProps = {
     size: 'm',

package/dist/cjs/components/Tile.js

@@ -4,9 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Badge = require('../../Badge-2JkquAEb.js');
-var Text = require('../../Text-_YhyTsQ1.js');
-var Title = require('../../Title-B-N0qkn3.js');
+var Badge = require('../../Badge-TyPbVqR_.js');
+var Text = require('../../Text-CC0xnhmx.js');
+var Title = require('../../Title-Ze_OL1Co.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -17,6 +17,9 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../appearance/Badge.js');
+require('../appearance/Text.js');
+require('../appearance/Title.js');
 
 function Tile(props) {
     var children = props.children, direction = props.direction, after = props.after, badge = props.badge, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;

package/dist/cjs/components/Title.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var Title = require('../../Title-B-N0qkn3.js');
+var Title = require('../../Title-Ze_OL1Co.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
+require('../appearance/Title.js');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');

package/dist/cjs/components/Tooltip.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var Tooltip = require('../../Tooltip-DsTCGS6h.js');
+var Tooltip = require('../../Tooltip-PrwacZFC.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
+require('../appearance/Tooltip.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -15,8 +16,10 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-_YhyTsQ1.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
 
 
 

package/dist/cjs/components/Video.js

@@ -17,13 +17,13 @@ function Video(props) {
     var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;
     // @ts-expect-error
     var videoStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxRuntime.jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && jsxRuntime.jsx("source", { src: webm, type: "video/webm", 
+    return (jsxRuntime.jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxRuntime.jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && (jsxRuntime.jsx("source", { src: webm, type: "video/webm", 
                         // @ts-expect-error
-                        codecs: "vp8, vorbis" }), ogv && jsxRuntime.jsx("source", { src: ogv, type: "video/ogg", 
+                        codecs: "vp8, vorbis" })), ogv && (jsxRuntime.jsx("source", { src: ogv, type: "video/ogg", 
                         // @ts-expect-error
-                        codecs: "theora, vorbis" }), mp4 && jsxRuntime.jsx("source", { src: mp4, type: "video/mp4", 
+                        codecs: "theora, vorbis" })), mp4 && (jsxRuntime.jsx("source", { src: mp4, type: "video/mp4", 
                         // @ts-expect-error
-                        codecs: "avc1.42E01E, mp4a.40.2" })] }), children] }));
+                        codecs: "avc1.42E01E, mp4a.40.2" }))] }), children] }));
 }
 
 exports.Video = Video;

package/dist/cjs/hooks.js

@@ -1,2 +1,3 @@
 'use strict';
+'use strict';
 

package/dist/components/Accordion.js

@@ -1,4 +1,4 @@
-import { b as __spreadArray } from '../tslib.es6-5FtW-kfi.js';
+import { b as __spreadArray } from '../tslib.es6-w7hdJ3oZ.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useCallback, useState, useMemo } from 'react';
 import clsx from 'clsx';
@@ -6,8 +6,8 @@ import castArray from 'lodash/castArray';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { I as Icon } from '../Icon-CliIEdbp.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
@@ -17,9 +17,13 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
+import '../appearance/Icon.js';
+import '../Link-CzC1kU5C.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
+import '../appearance/Text.js';
 
 var ChevronDown16 = function ChevronDown16(props) {
   return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {

package/dist/components/Avatar.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-CliIEdbp.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
 import { I as Image } from '../Image-8t6PvsaZ.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -12,14 +12,18 @@ import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'react-inlinesvg';
+import '../appearance/Icon.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
+import '../appearance/Text.js';
 
 function Avatar(props) {
     var className = props.className, Dot = props.Dot, icon = props.icon, _a = props.size, size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, _c = props.textColor, textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;

package/dist/components/Badge.js

@@ -1,6 +1,7 @@
-export { B as Badge, b as badgeConfig } from '../Badge-CrhdvxY6.js';
+export { B as Badge, b as badgeConfig } from '../Badge-BZYBmgBK.js';
 import 'react/jsx-runtime';
 import 'clsx';
+import '../appearance/Badge.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
 import 'lodash/castArray';
@@ -13,4 +14,5 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-CG3xPG27.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';

package/dist/components/Breadcrumbs.js

@@ -1,13 +1,13 @@
-import { a as __rest, _ as __assign } from '../tslib.es6-5FtW-kfi.js';
+import { _ as __rest, a as __assign } from '../tslib.es6-w7hdJ3oZ.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import camelCase from 'lodash/camelCase';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-CliIEdbp.js';
-import { a as LinkWrapper } from '../Link-CeQuavin.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
+import { a as LinkWrapper } from '../Link-CzC1kU5C.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import 'prop-types';
@@ -17,8 +17,12 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
+import '../appearance/Icon.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
+import '../appearance/Text.js';
 
 function BreadcrumbsItem(props) {
     var children = props.children, className = props.className, cursor = props.cursor, _a = props.set, set = _a === void 0 ? 'default' : _a, text = props.text, textSize = props.textSize, textColor = props.textColor, textColorHover = props.textColorHover, href = props.href, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick;

package/dist/components/Button.js

@@ -1,7 +1,8 @@
-export { B as Button, b as buttonConfig } from '../Button-C0M-Ap20.js';
+export { B as Button, b as buttonConfig } from '../Button-avhviao1.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../appearance/Button.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -13,11 +14,16 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-CliIEdbp.js';
+import '../Icon-ClsRaxDk.js';
 import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Text-CG3xPG27.js';
-import '../Title-CqwqEtm7.js';
-import '../Loader-CJ8ZCdwy.js';
+import '../appearance/Icon.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
+import '../Loader-CU_5Ydmy.js';
+import '../appearance/Loader.js';

package/dist/components/Card.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { I as Image } from '../Image-8t6PvsaZ.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -14,6 +14,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+import '../appearance/Text.js';
 
 function Card(props) {
     var children = props.children, className = props.className, size = props.size, src = props.src, text = props.text, textSize = props.textSize, textColor = props.textColor, textTag = props.textTag, title = props.title, titleSize = props.titleSize, titleTag = props.titleTag, titleColor = props.titleColor, image = props.image, imageShape = props.imageShape, type = props.type, onClick = props.onClick;

package/dist/components/Cell.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-CliIEdbp.js';
-import { L as Label } from '../Label-ukXod6pv.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
+import { L as Label } from '../Label-BfotYOmD.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -16,10 +16,15 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
+import '../appearance/Icon.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
+import '../appearance/Label.js';
+import '../appearance/Text.js';
 
 function Cell(props) {
     var isActive = props.isActive, isDisabled = props.isDisabled, isEqual = props.isEqual, after = props.after, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, titleLabelTextSize = props.titleLabelTextSize, titleTag = props.titleTag, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, valueLabelTextSize = props.valueLabelTextSize, valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, valueTextSize = props.valueTextSize, valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;

package/dist/components/Checkbox.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { checkboxAppearance, checkboxState } from '../appearance/Checkbox.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -9,24 +10,25 @@ import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../appearance/Text.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
 var checkboxConfig = {
-    appearance: undefined,
+    appearance: checkboxAppearance,
     setAppearance: function (newComponent) {
         checkboxConfig.appearance = newComponent;
     },
-    state: undefined,
+    state: checkboxState,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         checkboxConfig.state = newComponent;
     },
 };
 function Checkbox(props) {
-    var id = props.id, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, after = props.after, appearance = props.appearance, before = props.before, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -67,13 +69,12 @@ function Checkbox(props) {
         prefix: 'width_',
         propsKey: 'width',
     });
-    // prettier-ignore
-    var appearanceConfig = (appearance && checkboxConfig.appearance && checkboxConfig.appearance[appearance]);
+    var appearanceConfig = appearance && checkboxConfig.appearance && checkboxConfig.appearance[appearance];
     return (jsxs(Tag, { className: clsx(className, 'checkbox', fillClass, shapeClass, widthClass), htmlFor: Tag === 'label' && id, children: [before, jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass ||
                     ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateCheckmarkFill) &&
                         "checkbox_checkmark_fill_".concat(appearanceConfig.stateCheckmarkFill)
                             .replace(/([A-Z])/g, '-$1')
-                            .toLowerCase())), children: [jsx("input", { checked: checked, className: "checkbox__input", disabled: disabled, 
+                            .toLowerCase())), children: [jsx("input", { className: "checkbox__input", checked: checked, disabled: disabled, 
                         // @ts-expect-error
                         id: id, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
                             ? stateBorderColorDisabledClass

package/dist/components/Chips.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { chipsAppearance } from '../appearance/Chips.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -13,9 +14,10 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+import '../appearance/Text.js';
 
 var chipsConfig = {
-    appearance: undefined,
+    appearance: chipsAppearance,
     setAppearance: function (newComponent) {
         chipsConfig.appearance = newComponent;
     },
@@ -64,8 +66,7 @@ function Chips(props) {
     });
     // @ts-expect-error
     var chipsStyles = useStyles(props).styles;
-    // prettier-ignore
-    var appearanceConfig = (appearance && chipsConfig.appearance && chipsConfig.appearance[appearance]);
+    var appearanceConfig = appearance && chipsConfig.appearance && chipsConfig.appearance[appearance];
     return (jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', isActive
             ? fillActiveClass ||
                 ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&