@itcase/ui 1.8.64 → 1.8.66

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_2b-hX4HZ.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_fKHB3LUT.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -17,7 +17,7 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_DrQu8Zp8.js';
+import '../Icon_es_Xh3eVHNS.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';

package/dist/components/HeroTitle.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_DrQu8Zp8.js';
+import { I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Icon.js

@@ -1,4 +1,4 @@
-export { I as Icon, e as iconAppearance, i as iconConfig } from '../Icon_es_DrQu8Zp8.js';
+export { I as Icon, e as iconAppearance, i as iconConfig } from '../Icon_es_Xh3eVHNS.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/InputPassword.js

@@ -4,7 +4,7 @@ import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon } from '../Icon_es_DrQu8Zp8.js';
+import { I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';

package/dist/components/Label.js

@@ -1,4 +1,4 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_CH68RBo-.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_DnTcY7ih.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -18,7 +18,7 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_DrQu8Zp8.js';
+import '../Icon_es_Xh3eVHNS.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';

package/dist/components/MenuItem.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon, T as Tooltip } from '../Icon_es_DrQu8Zp8.js';
+import { I as Icon, T as Tooltip } from '../Icon_es_Xh3eVHNS.js';
 import { L as Link } from '../Link_es_BnUIX0QT.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';

package/dist/components/Modal.js

@@ -5,9 +5,10 @@ import ReactDOM from 'react-dom';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { b as Title, I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import { O as Overlay } from '../Overlay_es_BvehRqIP.js';
-import { b as Title } from '../Icon_es_DrQu8Zp8.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { icons24, icons40 } from '@itcase/icons/default';
 import { L as Loader } from '../Loader_es_DhNCKZ8Y.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -27,14 +28,81 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_BnUIX0QT.js';
 import '../Text_es_BvmOR4nv.js';
 
+var modalAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+};
+
+var modalAppearanceSize = {
+    sizeXL: {
+        size: 'xl',
+        titleTextSize: 'h2',
+        closeIconImage: icons40.Action.Close,
+        closeIconSize: '40',
+    },
+    sizeL: {
+        size: 'l',
+        titleTextSize: 'h3',
+        closeIconImage: icons40.Action.Close,
+        closeIconSize: '40',
+    },
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'h4',
+        closeIconImage: icons24.Action.Close,
+        closeIconSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        titleTextSize: 'h5',
+        closeIconImage: icons24.Action.Close,
+        closeIconSize: '24',
+    },
+};
+
+var modalAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+
 var modalAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        borderColor: 'surfaceBorderPrimary',
+        closeIconAppearance: 'surfacePrimary solid circular',
     },
 };
 
-var modalAppearance = __assign({}, modalAppearanceSurface);
+var modalAppearance = __assign(__assign(__assign(__assign({}, modalAppearanceSurface), modalAppearanceShape), modalAppearanceStyle), modalAppearanceSize);
 
 var modalConfig = {
     appearance: modalAppearance,
@@ -64,7 +132,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, 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, scroll = props.scroll, 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;
+    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, scroll = props.scroll, _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];
@@ -148,16 +216,16 @@ var Modal = React.forwardRef(function Modal(props, ref) {
     useImperativeHandle(ref, function () { return ({ modalElement: modalElement, openModal: openModal, closeModal: closeModal, isOpen: isOpen }); }, [isOpen, openModal, closeModal, modalElement]);
     var appearanceConfig = useAppearanceConfig(appearance, modalConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    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;
+    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, overlayOpacity = propsGenerator.overlayOpacity, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, closeIconAppearance = propsGenerator.closeIconAppearance, closeIconImage = propsGenerator.closeIconImage, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize;
     // @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", { 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), scroll && "modal-scroll_".concat(scroll), isSkeleton && 'modal_skeleton'), dataTestId: dataTestId, dataTour: 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), 
+        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', contentClassName, fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "shape_".concat(shapeClass), sizeClass && "modal_size_".concat(sizeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), scroll && "modal-scroll_".concat(scroll), isSkeleton && 'modal_skeleton'), dataTestId: dataTestId, dataTour: dataTour, ref: modalContentRef, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur && closeModal, children: [(title || closeIconImage) && (jsxs("div", { className: "modal__header", children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIconImage && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: closeIconAppearance, SvgImage: closeIconImage, iconSize: closeIconSize, shape: closeIconShape }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
-                    fill: overlayFill, fillGradient: overlayFillGradient, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
+                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element
         modalElement));
 });

package/dist/components/Notification.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_DrQu8Zp8.js';
+import { I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons20 } from '@itcase/icons/default';

package/dist/components/Pagination.js

@@ -6,8 +6,8 @@ import ReactPaginate from 'react-paginate';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_2b-hX4HZ.js';
-import { I as Icon } from '../Icon_es_DrQu8Zp8.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_fKHB3LUT.js';
+import { I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons14, icons24, icons16 } from '@itcase/icons/default';

package/dist/components/Response.js

@@ -7,7 +7,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_BSxEly4r.js';
+import { B as Button } from '../Button_es_3cCwdJcQ.js';
 import { G as Group } from '../Group_es_CruwH8Al.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import '@itcase/common';
@@ -23,7 +23,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_DrQu8Zp8.js';
+import '../Icon_es_Xh3eVHNS.js';
 import 'react-inlinesvg';
 import '../Link_es_BnUIX0QT.js';
 import '../Loader_es_DhNCKZ8Y.js';

package/dist/components/Search.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_DrQu8Zp8.js';
+import { I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { S as Scrollbar } from '../Scrollbar_es_CThJeCLF.js';
 import 'lodash/camelCase';

package/dist/components/Segmented.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_DrQu8Zp8.js';
+import { I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';

package/dist/components/Select.js

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon, B as Badge } from '../Icon_es_DrQu8Zp8.js';
+import { I as Icon, B as Badge } from '../Icon_es_Xh3eVHNS.js';
 import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';

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 { b as Title } from '../Icon_es_DrQu8Zp8.js';
+import { b as Title } from '../Icon_es_Xh3eVHNS.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Tab.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge, I as Icon } from '../Icon_es_DrQu8Zp8.js';
+import { B as Badge, I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import { D as Divider } from '../Divider_es_CiRU0sTz.js';
 import { L as Link } from '../Link_es_BnUIX0QT.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';

package/dist/components/Tile.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, B as Badge, I as Icon } from '../Icon_es_DrQu8Zp8.js';
+import { b as Title, B as Badge, I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_DrQu8Zp8.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_Xh3eVHNS.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_DrQu8Zp8.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_Xh3eVHNS.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/Warning.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, Fragment } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_DrQu8Zp8.js';
+import { I as Icon } from '../Icon_es_Xh3eVHNS.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/css/components/Label/Label.css

@@ -41,6 +41,7 @@
       &_$(size) {
         padding: var(--label-size-$(size)-padding);
         gap: var(--label-size-$(size)-gap);
+        min-height: var(--label-size-$(size)-min-height);
       }
     }
   }
@@ -67,10 +68,23 @@ div.label {
 :root {
   --label-size-xxl-padding: 10px 10px;
   --label-size-xxl-gap: 8px;
+  --label-size-xxl-min-height: 40px;
+
   --label-size-xl-padding: 7px 8px;
+  --label-size-xl-min-height: 32px;
+
   --label-size-l-padding: 4px 6px;
+  --label-size-l-min-height: 28px;
+
   --label-size-m-padding: 2px 8px;
+  --label-size-m-min-height: 24px;
+
   --label-size-s-padding: 2px 6px;
+  --label-size-s-min-height: 18px;
+
   --label-size-xs-padding: 0px 4px;
+  --label-size-xs-min-height: 16px;
+
   --label-size-xxs-padding: 0px 4px;
+  --label-size-xxs-min-height: 12px;
 }

package/dist/css/components/Modal/Modal.css

@@ -8,6 +8,31 @@
   left: 0;
   top: 0;
   z-index: 1000000;
+  &__content {
+    width: 100%;
+    min-width: 200px;
+    min-height: 200px;
+    max-width: var(--modal-max-width);
+    position: relative;
+    z-index: 100;
+    &:focus {
+      outline: 0;
+    }
+    &-wrapper {
+      width: 100%;
+    }
+  }
+  &__header {
+    position: relative;
+    display: flex;
+    ^&__title {
+      flex: 1;
+    }
+    ^&__close {
+      z-index: 1;
+      cursor: pointer;
+    }
+  }
   &__overlay {
     z-index: -1;
   }
@@ -15,30 +40,22 @@
     display: flex;
   }
 }
-.modal-shape {
-  &_rounded {
-    border-radius: var(--modal-shape-rounded);
-  }
-  &_circular {
-    border-radius: 50%;
-  }
-}
-.modal-content {
-  width: 100%;
-  min-width: 200px;
-  min-height: 200px;
-  max-width: var(--modal-max-width);
-  position: relative;
-  z-index: 100;
-  &:focus {
-    outline: 0;
-  }
-  &__close {
-    position: relative;
-    z-index: 1;
-  }
-  &__wrapper {
-    width: 100%;
+.modal {
+  @each $size in xxl, xl, l, m, s, xs, xxs {
+    &_size_$(size) {
+      min-width: var(--modal-$(size)-min-width);
+      min-height: var(--modal-$(size)-min-height);
+      padding: var(--modal-$(size)-padding) 0;
+      ^&__header {
+        padding: 0 var(--modal-$(size)-padding);
+        gap: var(--modal-$(size)-gap);
+      }
+      ^&__content {
+        &-wrapper {
+          padding: var(--modal-$(size)-padding) 0;
+        }
+      }
+    }
   }
 }
 .modal {
@@ -58,6 +75,24 @@
   }
 }
 :root {
-  --modal-shape-rounded: 0;
-  --modal-max-width: 450px;
+  --modal-max-width: 500px;
+  --modal-xl-padding: 24px;
+  --modal-xl-gap: 24px;
+  --modal-xl-min-width: 500px;
+  --modal-xl-min-height: 240px;
+
+  --modal-l-padding: 24px;
+  --modal-l-gap: 24px;
+  --modal-l-min-width: 500px;
+  --modal-l-min-height: 240px;
+
+  --modal-m-padding: 24px;
+  --modal-m-gap: 24px;
+  --modal-m-min-width: 500px;
+  --modal-m-min-height: 240px;
+
+  --modal-s-padding: 24px;
+  --modal-s-gap: 24px;
+  --modal-s-min-width: 320px;
+  --modal-s-min-height: 240px;
 }

package/dist/types/components/Label/appearance/{labelDisable.d.ts → labelDisabled.d.ts}

@@ -1,12 +1,12 @@
-declare const labelAppearanceDisable: {
-    disableMutedPrimary: {
+declare const labelAppearanceDisabled: {
+    disabledMutedPrimary: {
         fill: string;
         labelTextColor: string;
         borderColor: string;
         iconAfterFillIcon: string;
         iconBeforeFillIcon: string;
     };
-    disablePrimary: {
+    disabledPrimary: {
         fill: string;
         labelTextColor: string;
         borderColor: string;
@@ -14,4 +14,4 @@ declare const labelAppearanceDisable: {
         iconBeforeFillIcon: string;
     };
 };
-export { labelAppearanceDisable };
+export { labelAppearanceDisabled };

package/dist/types/components/Modal/appearance/modalShape.d.ts

@@ -0,0 +1,25 @@
+declare const modalAppearanceShape: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { modalAppearanceShape };

package/dist/types/components/Modal/appearance/modalSize.d.ts

@@ -0,0 +1,27 @@
+declare const modalAppearanceSize: {
+    sizeXL: {
+        size: string;
+        titleTextSize: string;
+        closeIconImage: string;
+        closeIconSize: string;
+    };
+    sizeL: {
+        size: string;
+        titleTextSize: string;
+        closeIconImage: string;
+        closeIconSize: string;
+    };
+    sizeM: {
+        size: string;
+        titleTextSize: string;
+        closeIconImage: string;
+        closeIconSize: string;
+    };
+    sizeS: {
+        size: string;
+        titleTextSize: string;
+        closeIconImage: string;
+        closeIconSize: string;
+    };
+};
+export { modalAppearanceSize };

package/dist/types/components/Modal/appearance/modalStyle.d.ts

@@ -0,0 +1,14 @@
+declare const modalAppearanceStyle: {
+    solid: {
+        borderColor: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    full: {};
+    ghost: {
+        fill: string;
+        borderColor: string;
+    };
+};
+export { modalAppearanceStyle };

package/dist/types/components/Modal/appearance/modalSurface.d.ts

@@ -1,7 +1,8 @@
 declare const modalAppearanceSurface: {
     surfacePrimary: {
         fill: string;
-        fillHover: string;
+        borderColor: string;
+        closeIconAppearance: string;
     };
 };
 export { modalAppearanceSurface };

package/dist/types/components/Title/appearance/titleSize.d.ts

@@ -1,55 +1,41 @@
 declare const titleAppearanceSize: {
-    sizeXXL: {
+    h1: {
         size: string;
-        labelTextSize: string;
         iconAfterFillSize: string;
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
     };
-    sizeXL: {
+    h2: {
         size: string;
-        labelTextSize: string;
         iconAfterFillSize: string;
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
     };
-    sizeL: {
+    h3: {
         size: string;
-        labelTextSize: string;
         iconAfterFillSize: string;
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
     };
-    sizeM: {
+    h4: {
         size: string;
-        labelTextSize: string;
         iconAfterFillSize: string;
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
     };
-    sizeS: {
+    h5: {
         size: string;
-        labelTextSize: string;
         iconAfterFillSize: string;
         iconAfterSize: string;
         iconBeforeFillSize: string;
         iconBeforeSize: string;
     };
-    sizeXS: {
+    h6: {
         size: string;
-        labelTextSize: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
-    };
-    sizeXXS: {
-        size: string;
-        labelTextSize: string;
         iconAfterFillSize: string;
         iconAfterSize: string;
         iconBeforeFillSize: string;