@itcase/ui 1.2.28 → 1.2.30

package/dist/components/Segmented.js

@@ -1,27 +1,29 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
+import { segmentedAppearance } from '../appearance/Segmented.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.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';
 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 segmentedConfig = {
-    appearance: undefined,
+    appearance: segmentedAppearance,
     setAppearance: function (newComponent) {
         segmentedConfig.appearance = newComponent;
     },
 };
 var Segmented = React.forwardRef(function (props, ref) {
-    var appearance = props.appearance, name = props.name, className = props.className, type = props.type, segments = props.segments, activeSegment = props.activeSegment, setActiveSegment = props.setActiveSegment, size = props.size, labelTextColor = props.labelTextColor, labelTextActiveColor = props.labelTextActiveColor, labelTextSize = props.labelTextSize, labelTextWrap = props.labelTextWrap, onChange = props.onChange;
+    var isDisabled = props.isDisabled, _a = props.activeSegment, activeSegment = _a === void 0 ? {} : _a, appearance = props.appearance, className = props.className, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveHoverColor = props.labelTextActiveHoverColor, labelTextColor = props.labelTextColor, labelTextHoverColor = props.labelTextHoverColor, labelTextSize = props.labelTextSize, labelTextWrap = props.labelTextWrap, name = props.name, segments = props.segments, setActiveSegment = props.setActiveSegment, size = props.size, type = props.type, onChange = props.onChange;
     var controlRef = useRef(null);
     var segmentsRefs = useMemo(function () { return new Map(segments.map(function (item) { return [item.value, createRef()]; })); }, [segments]);
     var onChangeValue = useCallback(function (item) {
@@ -81,22 +83,26 @@ var Segmented = React.forwardRef(function (props, ref) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
                 "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), widthClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
-                "segmented_width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), size && "segmented_size_".concat(size), type && "segmented_type_".concat(type), borderColorClass, borderWidthClass, borderTypeClass), ref: controlRef, children: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments === null || segments === void 0 ? void 0 : segments.map(function (item, i) { return (jsxs("div", { className: clsx('segmented__item', fillHoverClass ||
+                "segmented_width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), size
+            ? "segmented_size_".concat(size)
+            : (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "segmented_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase(), type
+            ? "segmented_type_".concat(type)
+            : (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.type) &&
+                "segmented_type_".concat(appearanceConfig.type).replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass, borderWidthClass, borderTypeClass), ref: controlRef, children: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments === null || segments === void 0 ? void 0 : segments.map(function (item, i) { return (jsxs("div", { className: clsx('segmented__item', fillHoverClass ||
                             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
                                 "fill_hover_".concat(appearanceConfig.fillHover)
                                     .replace(/([A-Z])/g, '-$1')
-                                    .toLowerCase()), item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value) && 'segmented__item_active'), ref: segmentsRefs.get(item.value), children: [jsx("input", { checked: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value), className: "segmented__item-radio", id: item.label, name: name, type: "radio", value: item.value, onChange: function () { return onChangeValue(item); } }), jsx("label", { className: clsx('segmented__item-label'), htmlFor: item.label, children: jsx(Text, { className: clsx('segmented__item-label-text', labelTextWrap && "word-wrap_".concat(labelTextWrap)), size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
+                                    .toLowerCase()), item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value) && 'segmented__item_active', onChange && 'cursor_type_pointer', isDisabled && 'cursor_type_default'), ref: segmentsRefs.get(item.value), children: [jsx("input", { className: "segmented__item-radio", name: name, checked: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value), id: item.label, type: "radio", value: item.value, onChange: function () { return onChangeValue(item); } }), jsx("label", { className: clsx('segmented__item-label'), htmlFor: item.label, children: jsx(Text, { className: clsx('segmented__item-label-text', labelTextWrap && "word-wrap_".concat(labelTextWrap)), size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
                                         ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
-                                        : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), children: item.label }) })] }, item.value)); }), jsx("div", { className: clsx('segmented__indicator', indicatorFillClass ||
+                                        : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
+                                        ? labelTextActiveHoverColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveHoverColor)
+                                        : labelTextHoverColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextHoverColor), children: item.label }) })] }, item.value)); }), jsx("div", { className: clsx('segmented__indicator', indicatorFillClass ||
                             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.indicatorFill) &&
                                 "fill_".concat(appearanceConfig.indicatorFill)
                                     .replace(/([A-Z])/g, '-$1')
                                     .toLowerCase())), children: "\u00A0" })] }) }) }));
 });
 Segmented.displayName = 'Segmented';
-Segmented.defaultProps = {
-    activeSegment: {},
-    size: 'normal',
-};
 
 export { Segmented, segmentedConfig };

package/dist/components/Select.js

@@ -1,16 +1,18 @@
-import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
+import { selectAppearance } from '../appearance/Select.js';
+import { a as __assign } from '../tslib.es6-w7hdJ3oZ.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-CliIEdbp.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { T as Text } from '../Text-CG3xPG27.js';
-import { B as Badge } from '../Badge-CrhdvxY6.js';
-import { G as Group } from '../Group-CVUfaHaS.js';
+import { T as Text } from '../Text-kxGZButz.js';
+import { B as Badge } from '../Badge-BZYBmgBK.js';
+import { G as Group } from '../Group-Dc70Z4_7.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
 import 'react-inlinesvg';
+import '../appearance/Icon.js';
 import '../hooks/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
@@ -20,10 +22,15 @@ import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
+import '../Link-CzC1kU5C.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
 import 'lodash/castArray';
+import '../appearance/Text.js';
+import '../appearance/Badge.js';
+import '../appearance/Group.js';
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
 //   extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}
@@ -309,7 +316,7 @@ SelectContainer.defaultProps = {
 };
 
 var selectConfig = {
-    appearance: {},
+    appearance: selectAppearance,
     setAppearance: function (newComponent) {
         selectConfig.appearance = newComponent;
     },

package/dist/components/SiteMenu.js

@@ -3,22 +3,26 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useSiteMenuContext } from '../context/UIContext.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.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 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 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 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/components/Swiper.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { T as Title } from '../Title-CqwqEtm7.js';
+import { T as Title } from '../Title-CQ_Fr1hO.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -14,6 +14,7 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+import '../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/components/Tab.js

@@ -1,12 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
+import { tabAppearance } from '../appearance/Tab.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-CrhdvxY6.js';
+import { B as Badge } from '../Badge-BZYBmgBK.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { L as Link } from '../Link-CeQuavin.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { L as Link } from '../Link-CzC1kU5C.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -16,16 +17,18 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../appearance/Badge.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../appearance/Text.js';
 
 var tabConfig = {
-    appearance: undefined,
+    appearance: 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(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -77,7 +80,7 @@ function Tab(props) {
     // @ts-expect-error
     var tab = useStyles(props).styles;
     var appearanceConfig = appearance && tabConfig.appearance && tabConfig.appearance[appearance];
-    return (jsx("div", { "data-tour": dataTour, style: tab, className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass ||
+    return (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) &&
@@ -92,9 +95,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: jsx(Link, { fill: linkFill, className: clsx('tab__link', alignDirectionClass, alignClass), href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(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: jsx(Link, { className: clsx('tab__link', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(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)) && (jsx(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) }))] }), jsx(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)) && (jsx(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) }))] }), jsx(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] }) }) }));
 }
@@ -143,7 +146,7 @@ function TabGroup(props) {
     });
     // @ts-expect-error
     var _a = useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
-    return (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 ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+    return (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 ? (jsx("div", { className: "tab-group__wrapper group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 }
 
 export { Tab, TabGroup, tabConfig };

package/dist/components/Text.js

@@ -1,6 +1,7 @@
-export { T as Text, t as textConfig } from '../Text-CG3xPG27.js';
+export { T as Text, t as textConfig } from '../Text-kxGZButz.js';
 import 'react/jsx-runtime';
 import 'clsx';
+import '../appearance/Text.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
 import 'lodash/castArray';

package/dist/components/Textarea.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
+import { textareaAppearance, textareaState } from '../appearance/Textarea.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -10,17 +11,18 @@ import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 
 var textareaConfig = {
-    state: {},
-    setState: function (newComponent) {
-        textareaConfig.state = newComponent;
-    },
-    appearance: {},
+    appearance: textareaAppearance,
     setAppearance: function (newComponent) {
         textareaConfig.appearance = newComponent;
     },
+    state: 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(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -93,7 +95,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/components/Tile.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-CrhdvxY6.js';
-import { T as Text } from '../Text-CG3xPG27.js';
-import { T as Title } from '../Title-CqwqEtm7.js';
+import { B as Badge } from '../Badge-BZYBmgBK.js';
+import { T as Text } from '../Text-kxGZButz.js';
+import { T as Title } from '../Title-CQ_Fr1hO.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -15,6 +15,9 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+import '../appearance/Badge.js';
+import '../appearance/Text.js';
+import '../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/components/Title.js

@@ -1,7 +1,8 @@
-export { T as Title, t as titleConfig } from '../Title-CqwqEtm7.js';
+export { T as Title, t as titleConfig } from '../Title-CQ_Fr1hO.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../appearance/Title.js';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';

package/dist/components/Tooltip.js

@@ -1,7 +1,8 @@
-export { T as Tooltip, t as tooltipConfig } from '../Tooltip-B2vv4OAX.js';
+export { T as Tooltip, t as tooltipConfig } from '../Tooltip-ccRCMYQM.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../appearance/Tooltip.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -13,5 +14,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-CG3xPG27.js';
-import '../Title-CqwqEtm7.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';

package/dist/components/Video.js

@@ -15,13 +15,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(props).styles;
-    return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && jsx("source", { src: webm, type: "video/webm", 
+    return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && (jsx("source", { src: webm, type: "video/webm", 
                         // @ts-expect-error
-                        codecs: "vp8, vorbis" }), ogv && jsx("source", { src: ogv, type: "video/ogg", 
+                        codecs: "vp8, vorbis" })), ogv && (jsx("source", { src: ogv, type: "video/ogg", 
                         // @ts-expect-error
-                        codecs: "theora, vorbis" }), mp4 && jsx("source", { src: mp4, type: "video/mp4", 
+                        codecs: "theora, vorbis" })), mp4 && (jsx("source", { src: mp4, type: "video/mp4", 
                         // @ts-expect-error
-                        codecs: "avc1.42E01E, mp4a.40.2" })] }), children] }));
+                        codecs: "avc1.42E01E, mp4a.40.2" }))] }), children] }));
 }
 
 export { Video };

package/dist/context/Notifications.js

@@ -1,5 +1,5 @@
 'use client';
-import { b as __spreadArray } from '../tslib.es6-5FtW-kfi.js';
+import { b as __spreadArray } from '../tslib.es6-w7hdJ3oZ.js';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';

package/dist/css/components/Badge/Badge.css

@@ -64,19 +64,3 @@
     }
   }
 }
-:root {
-  --badge-width-size-xxs: 16px;
-  --badge-height-size-xxs: 16px;
-  --badge-width-size-xs: 18px;
-  --badge-height-size-xs: 18px;
-  --badge-width-size-s: 20px;
-  --badge-height-size-s: 20px;
-  --badge-width-size-m: 24px;
-  --badge-height-size-m: 24px;
-  --badge-width-size-l: 32px;
-  --badge-height-size-l: 32px;
-  --badge-width-size-xl: 40px;
-  --badge-height-size-xl: 40px;
-  --badge-width-size-xxl: 48px;
-  --badge-height-size-xxl: 48px;
-}

package/dist/css/components/Badge/Badge.tokens.css

@@ -0,0 +1,20 @@
+:root {
+  /* Size */
+  --badge-width-size-xxs: 14px;
+  --badge-height-size-xxs: 14px;
+  --badge-width-size-xs: 14px;
+  --badge-height-size-xs: 14px;
+  --badge-width-size-s: 20px;
+  --badge-height-size-s: 20px;
+  --badge-width-size-m: 23px;
+  --badge-height-size-m: 23px;
+  --badge-width-size-l: 32px;
+  --badge-height-size-l: 32px;
+  --badge-width-size-xl: 40px;
+  --badge-height-size-xl: 40px;
+  --badge-width-size-xxl: 48px;
+  --badge-height-size-xxl: 48px;
+  /* Status */
+  --badge-status-width-size-xxs: 8px;
+  --badge-status-height-size-xxs: 8px;
+}

package/dist/css/components/Pagination/Pagination.css

@@ -17,7 +17,7 @@
   &__input {
     background: var(--color-surface-primary);
     padding: 3px 7px;
-    border: 1px solid var(--color-surface-border-tertiary);
+    border: 1px solid var(--pagination-input-color, --color-surface-border-tertiary);
     border-radius: 8px;
     position: relative;
     display: flex;

package/dist/css/components/Segmented/Segmented.css

@@ -88,7 +88,7 @@
 }
 .segmented {
   &_size {
-    @each $size in normal, compact {
+    @each $size in normal, compact, xxs, xs, s, m, l, xl, xxl {
       &_$(size) {
         ^^&__item {
           &-label {

package/dist/hooks.js

@@ -1 +1 @@
-
+'use strict';

package/dist/stories/Appearance.stories.js

@@ -1,6 +1,6 @@
+import { badgeAppearance } from '../../../appearance/Badge'
+import { tabAppearance } from '../../../appearance/Tab'
 import { badgeConfig } from '../../Badge'
-import badgeAppearance from '../../Badge/appearance.json'
-import tabAppearance from '../appearance.json'
 import { Tab, tabConfig } from '../Tab'
 import { argTypes } from './args'
 

package/dist/stories/Badge.stories.js

@@ -1,3 +1,4 @@
+import { badgeAppearance } from '../../../appearance/Badge'
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -8,7 +9,6 @@ import {
   sizeProps,
   textColorProps,
 } from '../../../constants'
-import badgeAppearance from '../../Badge/appearance.json'
 import { Badge, badgeConfig } from '../Badge'
 
 badgeConfig.setAppearance(badgeAppearance)

package/dist/stories/Button.stories.js

@@ -1,7 +1,7 @@
+import { badgeAppearance } from '../../../appearance/Badge'
+import { buttonAppearance } from '../../../appearance/Button'
 import { icon24 } from '../../../icons'
 import { Badge, badgeConfig } from '../../Badge'
-import badgeAppearance from '../../Badge/appearance.json'
-import buttonAppearance from '../../Button/appearance.json'
 import { Button, buttonConfig } from '../Button'
 import { argTypes } from './args'
 

package/dist/stories/Checkbox.stories.js

@@ -1,6 +1,6 @@
+import { checkboxState } from '../../../appearance/Checkbox'
 import { fillProps, textColorProps, textSizeProps } from '../../../constants'
 import { Checkbox, checkboxConfig } from '../Checkbox'
-import checkboxState from '../state.json'
 
 checkboxConfig.setState(checkboxState)
 

package/dist/stories/Chips.stories.js

@@ -1,5 +1,5 @@
+import { chipsAppearance } from '../../../appearance/Chips'
 import { Icon } from '../../Icon'
-import chipsAppearance from '../appearance.json'
 import { Chips, chipsConfig } from '../Chips'
 import { argTypes } from './args'
 

package/dist/stories/Group.stories.js

@@ -1,3 +1,5 @@
+import { badgeAppearance } from '../../../appearance/Badge'
+import { tabAppearance } from '../../../appearance/Tab'
 import {
   directionProps,
   fillProps,
@@ -7,13 +9,10 @@ import {
   wrapProps,
 } from '../../../constants'
 import { badgeConfig } from '../../Badge'
-import badgeAppearance from '../../Badge/appearance.json'
-import tabAppearance from '../appearance.json'
 import { Tab, tabConfig } from '../Tab'
 import { TabGroup } from '../TabGroup'
 
 tabConfig.setAppearance(tabAppearance)
-
 badgeConfig.setAppearance(badgeAppearance)
 
 const tabs = {

package/dist/stories/Icon.stories.js

@@ -1,3 +1,5 @@
+import { badgeAppearance } from '../../../appearance/Badge'
+import { iconAppearance } from '../../../appearance/Icon'
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -9,8 +11,6 @@ import {
   sizePXProps,
 } from '../../../constants'
 import { Badge, badgeConfig } from '../../Badge'
-import badgeAppearance from '../../Badge/appearance.json'
-import iconAppearance from '../appearance.json'
 import { Icon, iconConfig } from '../Icon'
 
 iconConfig.setAppearance(iconAppearance)

package/dist/stories/Input.stories.js

@@ -1,6 +1,6 @@
+import { inputState } from '../../../appearance/Input'
 import { borderColorProps, textColorProps, textSizeProps } from '../../../constants'
 import { Input, inputConfig } from '../Input'
-import inputState from '../state.json'
 
 inputConfig.setState(inputState)
 

package/dist/stories/InputPassword.stories.js

@@ -1,3 +1,4 @@
+import { InputPasswordState } from '../../../appearance/InputPassword'
 import {
   borderColorProps,
   fillProps,
@@ -6,9 +7,8 @@ import {
   textSizeProps,
 } from '../../../constants'
 import { InputPassword, inputPasswordConfig } from '../InputPassword'
-import inputPasswordState from '../state.json'
 
-inputPasswordConfig.setState(inputPasswordState)
+inputPasswordConfig.setState(InputPasswordState)
 
 export default {
   argTypes: {

package/dist/stories/Label.stories.js

@@ -1,3 +1,4 @@
+import { labelAppearance } from '../../../appearance/Label'
 import {
   borderColorProps,
   borderTypeProps,
@@ -8,7 +9,6 @@ import {
   textSizeProps,
   widthProps,
 } from '../../../constants'
-import labelAppearance from '../appearance.json'
 import { Label, labelConfig } from '../Label'
 
 labelConfig.setAppearance(labelAppearance)

package/dist/stories/Loader.stories.js

@@ -1,3 +1,4 @@
+import { loaderAppearance } from '../../../appearance/Loader'
 import {
   heightProps,
   positionProps,
@@ -5,7 +6,6 @@ import {
   textSizeProps,
   widthProps,
 } from '../../../constants'
-import loaderAppearance from '../appearance.json'
 import { Loader, loaderConfig } from '../Loader'
 
 loaderConfig.setAppearance(loaderAppearance)

package/dist/stories/MenuItem.stories.js

@@ -1,3 +1,4 @@
+import { menuItemAppearance } from '../../../appearance/MenuItem'
 import {
   fillProps,
   shapeProps,
@@ -12,7 +13,6 @@ import {
   textWrapProps,
   underlineProps,
 } from '../../../constants'
-import menuItemAppearance from '../appearance.json'
 import { MenuItem, menuItemConfig } from '../MenuItem'
 
 menuItemConfig.setAppearance(menuItemAppearance)