@itcase/ui 1.4.5 → 1.4.7

package/dist/components/Modal.js

@@ -1,12 +1,13 @@
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import clsx from 'clsx';
 import ReactDOM from 'react-dom';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { O as Overlay } from '../Overlay-BKh07Vb2.js';
-import { L as Loader } from '../Loader-D4_r7LML.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { O as Overlay } from '../Overlay-CZixnXZ6.js';
+import { T as Title } from '../Title-Byi9vhDt.js';
+import { L as Loader } from '../Loader-VK3q7PBN.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -18,14 +19,19 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Text-C6NSmetx.js';
 
-var modalAppearance = {
-    dev: {},
+var modalAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+    },
 };
 
+var modalAppearance = __assign({}, modalAppearanceSurface);
+
 var modalConfig = {
     appearance: modalAppearance,
-    setAppearance: function (newComponent) {
-        modalConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        modalConfig.appearance = appearanceConfig;
     },
 };
 var getOrCreateModalElement = function (modalQuerySelector, className) {
@@ -50,7 +56,7 @@ var getOrCreateModalElement = function (modalQuerySelector, className) {
 };
 // Modal component that is an abstraction around the portal API.
 var Modal = React.forwardRef(function Modal(props, ref) {
-    var id = props.id, children = props.children, _a = props.isCloseOnBlur, isCloseOnBlur = _a === void 0 ? true : _a, _b = props.isOpen, initialIsOpen = _b === void 0 ? false : _b, _c = props.isOverlay, isOverlay = _c === void 0 ? true : _c, _d = props.isScrollOnOpen, isScrollOnOpen = _d === void 0 ? true : _d, _e = props.isSetFocusOnOpen, isSetFocusOnOpen = _e === void 0 ? true : _e, appearance = props.appearance, className = props.className, closeButton = props.closeButton, contentClassName = props.contentClassName, _f = props.modalQuerySelector, modalQuerySelector = _f === void 0 ? '#modal-global' : _f, overlayClassName = props.overlayClassName, overlayFill = props.overlayFill, overlayFillGradient = props.overlayFillGradient, overlayOpacity = props.overlayOpacity, dataTestId = props.dataTestId, dataTour = props.dataTour, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal;
+    var id = props.id, className = props.className, appearance = props.appearance, title = props.title, contentClassName = props.contentClassName, dataTestId = props.dataTestId, dataTour = props.dataTour, _a = props.modalQuerySelector, modalQuerySelector = _a === void 0 ? '#modal-global' : _a, overlayClassName = props.overlayClassName, closeButton = props.closeButton, _b = props.isCloseOnBlur, isCloseOnBlur = _b === void 0 ? true : _b, _c = props.isOpen, initialIsOpen = _c === void 0 ? false : _c, _d = props.isOverlay, isOverlay = _d === void 0 ? true : _d, _e = props.isScrollOnOpen, isScrollOnOpen = _e === void 0 ? true : _e, _f = props.isSetFocusOnOpen, isSetFocusOnOpen = _f === void 0 ? true : _f, isSkeleton = props.isSkeleton, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal, children = props.children;
     // Query DOM element
     var _g = useState(null), modalElement = _g[0], setModalElement = _g[1];
     var _h = useState(initialIsOpen), isOpen = _h[0], setIsOpen = _h[1];
@@ -131,20 +137,22 @@ var Modal = React.forwardRef(function Modal(props, ref) {
         }
     }, []);
     // Save ref things
-    useImperativeHandle(ref, function () { return ({ isOpen: isOpen, closeModal: closeModal, modalElement: modalElement, openModal: openModal }); }, [isOpen, openModal, closeModal, modalElement]);
-    // @ts-expect-error
-    var appearanceConfig = modalConfig.appearance && modalConfig.appearance[appearance];
+    useImperativeHandle(ref, function () { return ({ modalElement: modalElement, openModal: openModal, closeModal: closeModal, isOpen: isOpen }); }, [isOpen, openModal, closeModal, modalElement]);
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultAppearance), (_a = modalConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass;
+    var fillClass = propsGenerator.fillClass, titleTextColor = propsGenerator.titleTextColor, titleTextColorHover = propsGenerator.titleTextColorHover, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWidth = propsGenerator.titleTextWidth, titleTextWrap = propsGenerator.titleTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, elevationClass = propsGenerator.elevationClass, overlayFill = propsGenerator.overlayFill, overlayFillGradient = propsGenerator.overlayFillGradient, overlayOpacity = propsGenerator.overlayOpacity, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var modalStyles = useStyles(props).styles;
     // Use a portal to render the children into the element
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { className: clsx('modal-content', contentClassName, fillClass && "fill_".concat(fillClass), shapeClass && "modal-shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass)), "data-testid": dataTestId, "data-tour": dataTour, ref: modalContentRef, id: id, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [closeButton && (jsx("div", { className: "modal-content__close", onClick: closeModal, children: closeButton })), jsx("div", { className: "modal-content__wrapper", children: children })] }), jsx(Overlay, { className: clsx('modal__overlay', 'overlay_type_modal', overlayClassName), 
+        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal-content', contentClassName, fillClass && "fill_".concat(fillClass), shapeClass && "modal-shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), isSkeleton && 'modal_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, ref: modalContentRef, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [title && (jsx(Title, { className: "modal-content__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeButton && (jsx("div", { className: "modal-content__close", onClick: closeModal, children: closeButton })), jsx("div", { className: "modal-content__wrapper", children: children })] }), jsx(Overlay, { className: clsx('modal__overlay', 'overlay_type_modal', overlayClassName), 
                     // ref={modalOverlayRef}
-                    fill: overlayFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.overlayFill), opacity: overlayOpacity || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.overlayOpacity), fillGradient: overlayFillGradient || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.overlayFillGradient), isOverlay: isOverlay || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.isOverlay), onClick: onClickOverlay })] })) : null, 
+                    fill: overlayFill, fillGradient: overlayFillGradient, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element
         modalElement));
 });

package/dist/components/Notification.js

@@ -53,8 +53,8 @@ var notificationItemAppearance = {
 
 var notificationItemConfig = {
     appearance: notificationItemAppearance,
-    setAppearance: function (newComponent) {
-        notificationItemConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        notificationItemConfig.appearance = appearanceConfig;
     },
 };
 function NotificationItem(props) {

package/dist/components/Overlay.js

@@ -1,4 +1,4 @@
-export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay-BKh07Vb2.js';
+export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay-CZixnXZ6.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/components/Pagination.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem-g5jWbyJy.js';
-import { I as Icon } from '../Icon-htF_V35Y.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-mr__S8vt.js';
+import { I as Icon } from '../Icon-OJ_3E3eM.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
@@ -19,10 +19,10 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Divider-BQcBkzt1.js';
-import '../Link-BhJ5BdyS.js';
+import '../Link-DaKqf1pb.js';
 import 'react-inlinesvg';
-import '../Tooltip-BYgzNVYI.js';
-import '../Title-Dck3eHNM.js';
+import '../Tooltip-5lQyt5-Y.js';
+import '../Title-Byi9vhDt.js';
 
 var paginationAppearance = {
     default: {
@@ -61,8 +61,8 @@ var paginationAppearance = {
 
 var paginationConfig = {
     appearance: paginationAppearance,
-    setAppearance: function (newComponent) {
-        paginationConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        paginationConfig.appearance = appearanceConfig;
     },
 };
 function Pagination(props) {

package/dist/components/Panel.js

@@ -3,7 +3,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { G as Group } from '../Group-DiMnEfge.js';
+import { G as Group } from '../Group-BICb8bYQ.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
@@ -18,8 +18,8 @@ import '../hooks/useStyles/styleAttributes.js';
 
 var panelConfig = {
     appearance: undefined,
-    setAppearance: function (newComponent) {
-        panelConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        panelConfig.appearance = appearanceConfig;
     },
 };
 var Panel = React.forwardRef(function Panel(props, ref) {

package/dist/components/Radio.js

@@ -36,8 +36,8 @@ var radioState = {
 
 var radioConfig = {
     appearance: radioAppearance,
-    setAppearance: function (newComponent) {
-        radioConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        radioConfig.appearance = appearanceConfig;
     },
     state: radioState,
     // eslint-disable-next-line perfectionist/sort-objects

package/dist/components/Response.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button-Bsrw4D7p.js';
-import { G as Group } from '../Group-DiMnEfge.js';
+import { B as Button } from '../Button-xYLCmT3D.js';
+import { G as Group } from '../Group-BICb8bYQ.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -17,11 +17,11 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon-htF_V35Y.js';
-import '../Link-BhJ5BdyS.js';
-import '../Tooltip-BYgzNVYI.js';
-import '../Title-Dck3eHNM.js';
-import '../Loader-D4_r7LML.js';
+import '../Icon-OJ_3E3eM.js';
+import '../Link-DaKqf1pb.js';
+import '../Tooltip-5lQyt5-Y.js';
+import '../Title-Byi9vhDt.js';
+import '../Loader-VK3q7PBN.js';
 
 var img$6 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M93.2275 101.842H84.0659C83.8263 99.1898 83.976 96.839 84.515 94.7895C85.1138 92.74 86.2216 90.8111 87.8383 89.0027C89.515 87.1341 91.7904 85.2051 94.6647 83.2159C96.5808 81.8898 97.9581 80.5637 98.7964 79.2375C99.6946 77.9114 100.144 76.4345 100.144 74.807C100.144 72.2753 99.2156 70.1957 97.3593 68.5682C95.503 66.9406 93.0778 66.1269 90.0838 66.1269C87.3892 66.1269 84.7246 66.9105 82.0898 68.4777C79.4551 69.9847 77.0299 72.3959 74.8144 75.7112L67 67.9352C70.0539 64.0774 73.5868 61.1237 77.5988 59.0742C81.6707 57.0247 85.9521 56 90.4431 56C94.5749 56 98.2575 56.8439 101.491 58.5317C104.725 60.1592 107.269 62.3896 109.126 65.2227C111.042 67.9955 112 71.1601 112 74.7166C112 78.0922 111.042 81.1062 109.126 83.7584C107.269 86.4107 104.455 88.8821 100.683 91.1727C97.7485 92.8605 95.7725 94.4881 94.7545 96.0553C93.7365 97.6226 93.2275 99.5515 93.2275 101.842ZM96.1916 115.767C96.1916 117.756 95.4731 119.474 94.0359 120.92C92.5988 122.307 90.8323 123 88.7365 123C86.6407 123 84.8743 122.307 83.4371 120.92C82 119.474 81.2814 117.756 81.2814 115.767C81.2814 113.717 82 111.999 83.4371 110.613C84.8743 109.166 86.6407 108.443 88.7365 108.443C90.8323 108.443 92.5988 109.166 94.0359 110.613C95.4731 111.999 96.1916 113.717 96.1916 115.767Z' fill='%23747474'/%3e%3c/svg%3e";
 

package/dist/components/Search.js

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon-htF_V35Y.js';
+import { I as Icon } from '../Icon-OJ_3E3eM.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import { S as Scrollbar } from '../Scrollbar-Bo7z7ELm.js';
 import '../tslib.es6-5FtW-kfi.js';
@@ -17,9 +17,9 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-BhJ5BdyS.js';
-import '../Tooltip-BYgzNVYI.js';
-import '../Title-Dck3eHNM.js';
+import '../Link-DaKqf1pb.js';
+import '../Tooltip-5lQyt5-Y.js';
+import '../Title-Byi9vhDt.js';
 import 'react-scrollbars-custom';
 
 var searchAppearance = {
@@ -34,8 +34,8 @@ var searchAppearance = {
 
 var searchInputConfig = {
     appearance: searchAppearance,
-    setAppearance: function (newComponent) {
-        searchInputConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        searchInputConfig.appearance = appearanceConfig;
     },
 };
 var SearchInput = React.forwardRef(function SearchInput(props, ref) {

package/dist/components/Segmented.js

@@ -16,22 +16,32 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 
 var segmentedAppearance = {
+    default: {
+        size: 's',
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 's',
+        indicatorFill: 'accentPrimary',
+        shape: 'rounded',
+    },
     dev: {
         width: 'fill',
         fill: 'surfaceSecondary',
         fillHover: 'surfacePrimaryHover',
-        indicatorFill: 'accentPrimary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextSize: 'm',
+        indicatorFill: 'accentPrimary',
         shape: 'rounded',
     },
 };
 
 var segmentedConfig = {
     appearance: segmentedAppearance,
-    setAppearance: function (newComponent) {
-        segmentedConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        segmentedConfig.appearance = appearanceConfig;
     },
 };
 var Segmented = React.forwardRef(function (props, ref) {

package/dist/components/Select.js

@@ -1,14 +1,14 @@
 import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-htF_V35Y.js';
+import { I as Icon } from '../Icon-OJ_3E3eM.js';
 import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text-C6NSmetx.js';
-import { B as Badge } from '../Badge-C68XnlcL.js';
-import { G as Group } from '../Group-DiMnEfge.js';
+import { B as Badge } from '../Badge-BxT2_kz_.js';
+import { G as Group } from '../Group-BICb8bYQ.js';
 import { D as Divider } from '../Divider-BQcBkzt1.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles/useStyles.js';
@@ -20,9 +20,9 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Link-BhJ5BdyS.js';
-import '../Tooltip-BYgzNVYI.js';
-import '../Title-Dck3eHNM.js';
+import '../Link-DaKqf1pb.js';
+import '../Tooltip-5lQyt5-Y.js';
+import '../Title-Byi9vhDt.js';
 import 'lodash/castArray';
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
@@ -148,8 +148,8 @@ var SelectValueContainer = function (props) {
 
 var selectConfig = {
     appearance: selectAppearance,
-    setAppearance: function (newComponent) {
-        selectConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        selectConfig.appearance = appearanceConfig;
     },
 };
 var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {

package/dist/components/Swiper.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { T as Title } from '../Title-Dck3eHNM.js';
+import { T as Title } from '../Title-Byi9vhDt.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Switch.js

@@ -8,8 +8,8 @@ var switchAppearance = {
 
 var switchConfig = {
     appearance: switchAppearance,
-    setAppearance: function (newComponent) {
-        switchConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        switchConfig.appearance = appearanceConfig;
     },
 };
 var Switch = React.forwardRef(function Switch(props, ref) {

package/dist/components/Tab.js

@@ -4,9 +4,9 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge } from '../Badge-C68XnlcL.js';
+import { B as Badge } from '../Badge-BxT2_kz_.js';
 import { D as Divider } from '../Divider-BQcBkzt1.js';
-import { a as Link } from '../Link-BhJ5BdyS.js';
+import { a as Link } from '../Link-DaKqf1pb.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -17,10 +17,10 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon-htF_V35Y.js';
+import '../Icon-OJ_3E3eM.js';
 import 'react-inlinesvg';
-import '../Tooltip-BYgzNVYI.js';
-import '../Title-Dck3eHNM.js';
+import '../Tooltip-5lQyt5-Y.js';
+import '../Title-Byi9vhDt.js';
 
 var tabAppearance = {
     accent: {

package/dist/components/Textarea.js

@@ -69,8 +69,8 @@ var textareaState = {
 var textareaConfig = {
     appearance: textareaAppearance,
     state: textareaState,
-    setAppearance: function (newComponent) {
-        textareaConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        textareaConfig.appearance = appearanceConfig;
     },
     setState: function (newComponent) {
         textareaConfig.state = newComponent;

package/dist/components/Tile.js

@@ -3,9 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge } from '../Badge-C68XnlcL.js';
+import { B as Badge } from '../Badge-BxT2_kz_.js';
 import { T as Text } from '../Text-C6NSmetx.js';
-import { T as Title } from '../Title-Dck3eHNM.js';
+import { T as Title } from '../Title-Byi9vhDt.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -16,10 +16,10 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon-htF_V35Y.js';
+import '../Icon-OJ_3E3eM.js';
 import 'react-inlinesvg';
-import '../Link-BhJ5BdyS.js';
-import '../Tooltip-BYgzNVYI.js';
+import '../Link-DaKqf1pb.js';
+import '../Tooltip-5lQyt5-Y.js';
 
 var tileAppearance = {
     dev: {},

package/dist/components/Title.js

@@ -1,9 +1,9 @@
-export { T as Title, a as titleAppearance, t as titleConfig } from '../Title-Dck3eHNM.js';
+export { T as Title, a as titleAppearance, t as titleConfig } from '../Title-Byi9vhDt.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../context/UIContext.js';
-import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-BYgzNVYI.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-5lQyt5-Y.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -15,4 +15,4 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Text-C6NSmetx.js';
-import '../Title-Dck3eHNM.js';
+import '../Title-Byi9vhDt.js';

package/dist/components/Video.js

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

package/dist/css/components/Cell/Cell.css

@@ -57,24 +57,6 @@
     }
   }
 }
-.cell {
-  &_set {
-    &_horizontal {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-.cell {
-  &_set {
-    &_vertical {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
 .cell {
   &&_state {
     &_active {
@@ -116,22 +98,20 @@
   }
 }
 .cell {
-  &&_mode {
-    &_skeleton {
-      ^^&__data {
-        ^^^&__title,
-        ^^^&__value {
-          color: transparent;
-          background-image: linear-gradient(
-            90deg,
-            var(--color-surface-secondary),
-            var(--color-surface-tertiary),
-            var(--color-surface-secondary)
-          );
-          background-size: 200%;
-          border-radius: 6px;
-          animation: cellSkeleton 3s infinite linear;
-        }
+  &_skeleton {
+    ^&__data {
+      ^^&__title,
+      ^^&__value {
+        color: transparent;
+        background-image: linear-gradient(
+          90deg,
+          var(--color-surface-secondary),
+          var(--color-surface-tertiary),
+          var(--color-surface-secondary)
+        );
+        background-size: 200%;
+        border-radius: 6px;
+        animation: cellSkeleton 3s infinite linear;
       }
     }
   }

package/dist/css/components/HeroTitle/HeroTitle.css

@@ -4,19 +4,17 @@
   }
 }
 .hero-title {
-  &&_mode {
-    &_skeleton {
-      color: transparent;
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      border-radius: 6px;
-      animation: heroTitleSkeleton 3s infinite linear;
-    }
+  &_skeleton {
+    color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    border-radius: 6px;
+    animation: heroTitleSkeleton 3s infinite linear;
   }
 }
 @keyframes heroTitleSkeleton {

package/dist/css/components/Image/Image.css

@@ -32,19 +32,17 @@
   }
 }
 .image {
-  &&_mode {
-    &_skeleton {
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      animation: imageSkeleton 3s infinite linear;
-      ^^&__item {
-        opacity: 0%;
-      }
+  &_skeleton {
+    background-image: linear-gradient(
+      90deg,
+      x var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    animation: imageSkeleton 3s infinite linear;
+    ^^&__item {
+      opacity: 0%;
     }
   }
 }

package/dist/css/components/Loader/Loader.css

@@ -70,6 +70,25 @@
     }
   }
 }
+.loader {
+  &_shape {
+    &_rounded {
+      border-radius: var(--loader-shape-rounded-default, 6px);
+      @each $size in xxl, xl, l, m, s, xs, xxs {
+        &^^&_size_$(size) {
+          ^^^&__item {
+            border-radius: var(--loader-$(size)-shape-rounded, 6px);
+          }
+        }
+      }
+    }
+    &_circular {
+      ^^&__item {
+        border-radius: 50%;
+      }
+    }
+  }
+}
 :root {
   --loader-l-min-width: 112px;
   --loader-l-min-height: 56px;

package/dist/css/components/Title/Title.css

@@ -4,19 +4,17 @@
   }
 }
 .title {
-  &&_mode {
-    &_skeleton {
-      color: transparent;
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      border-radius: 6px;
-      animation: titleSkeleton 3s infinite linear;
-    }
+  &_skeleton {
+    color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    border-radius: 6px;
+    animation: titleSkeleton 3s infinite linear;
   }
 }
 @keyframes titleSkeleton {