@itcase/ui 1.9.23 → 1.9.25

package/dist/components/Code.js

@@ -46,7 +46,7 @@ const codeAppearanceError = {
         inputBorderColorHover: 'errorBorderSecondary',
         inputCaretColor: 'surfaceItemPrimary',
         inputFill: 'errorTertiary',
-        inputFillHover: 'errorTertiary',
+        inputFillHover: 'errorHoverTertiary',
         inputPlaceholderTextColor: 'surfaceTextQuaternary',
         inputTextColor: 'surfaceTextPrimary',
     },
@@ -71,21 +71,21 @@ const codeAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -103,19 +103,19 @@ const codeAppearanceSize = {
 };
 
 const codeAppearanceStyle = {
-    full: {
-        inputBorderColor: 'none',
-    },
-    ghost: {
+    solid: {
         inputBorderColor: 'none',
-        inputFill: 'none',
     },
     outlined: {
         inputFill: 'none',
     },
-    solid: {
+    full: {
         inputBorderColor: 'none',
     },
+    ghost: {
+        inputBorderColor: 'none',
+        inputFill: 'none',
+    },
 };
 
 const codeAppearanceSuccess = {
@@ -124,7 +124,7 @@ const codeAppearanceSuccess = {
         inputBorderColorHover: 'successBorderSecondary',
         inputCaretColor: 'surfaceItemPrimary',
         inputFill: 'successTertiary',
-        inputFillHover: 'successTertiary',
+        inputFillHover: 'successHoverTertiary',
         inputPlaceholderTextColor: 'surfaceTextQuaternary',
         inputTextColor: 'surfaceTextPrimary',
     },
@@ -148,7 +148,7 @@ const codeConfig = {
     },
 };
 function Code(props) {
-    const { className, appearance, initialValue = '', isDisabled, inputAutoFocus, inputCount = 6, inputPlaceholder, inputType = 'number', separatorComponent, before, after, isSkeleton, onBlur, onChange, onFocus, } = props;
+    const { appearance, className, initialValue = '', inputAutoFocus, inputCount = 6, inputPlaceholder, inputType = 'number', separatorComponent, before, after, isDisabled, isSkeleton, onBlur, onChange, onFocus, } = props;
     const [otp, setOtp] = useState(initialValue);
     const appearanceConfig = useAppearanceConfig(appearance, codeConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);

package/dist/components/CookiesWarning.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { B as Button } from '../Button_es_CvRcO3xM.js';
+import { B as Button } from '../Button_es_ljlle2Pu.js';
 import { T as Text } from '../Text_es_CU9KR5AE.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/DatePeriod.js

@@ -5,17 +5,17 @@ import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_DWvsJ5bu.js';
-import { D as DatePickerInput } from '../DatePicker_es_B-WPA9y9.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CbzUWqG9.js';
+import { D as DatePickerInput } from '../DatePicker_es_CtbVXMmy.js';
 import 'react-select';
 import '../Icon_es_CtZHchZc.js';
-import { a as SelectContainer } from '../SelectContainer_es_BKIz5i19.js';
+import { a as SelectContainer } from '../SelectContainer_es_DGTrm8OT.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import '../context/UIContext.js';
-import '../Group_es_BwTj-yH-.js';
+import '../Group_es_nBtACpoG.js';
 import 'lodash/castArray';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
@@ -27,7 +27,7 @@ import '../hooks/useStyles/useStyles.js';
 import '../Text_es_CU9KR5AE.js';
 import 'date-fns/locale';
 import 'react-datepicker';
-import '../Button_es_CvRcO3xM.js';
+import '../Button_es_ljlle2Pu.js';
 import '../Link_es_P2b6ya7P.js';
 import '../Loader_es_BvTBRuay.js';
 import '../Input_es_I8GPoibb.js';

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_B-WPA9y9.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_CtbVXMmy.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -20,7 +20,7 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Button_es_CvRcO3xM.js';
+import '../Button_es_ljlle2Pu.js';
 import '../Icon_es_CtZHchZc.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';

package/dist/components/Group.js

@@ -1,4 +1,4 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_BwTj-yH-.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_nBtACpoG.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Notification.js

@@ -4,7 +4,7 @@ import { L as Loader } from '../Loader_es_BvTBRuay.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_CvRcO3xM.js';
+import { B as Button } from '../Button_es_ljlle2Pu.js';
 import { I as Icon } from '../Icon_es_CtZHchZc.js';
 import { T as Text } from '../Text_es_CU9KR5AE.js';
 import { icons24 } from '@itcase/icons/default';

package/dist/components/Response.js

@@ -6,8 +6,8 @@ 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_CvRcO3xM.js';
-import { G as Group } from '../Group_es_BwTj-yH-.js';
+import { B as Button } from '../Button_es_ljlle2Pu.js';
+import { G as Group } from '../Group_es_nBtACpoG.js';
 import { T as Text } from '../Text_es_CU9KR5AE.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';

package/dist/components/Select.js

@@ -1,4 +1,4 @@
-export { a as Select, S as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_BKIz5i19.js';
+export { a as Select, S as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_DGTrm8OT.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -18,7 +18,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Group_es_BwTj-yH-.js';
+import '../Group_es_nBtACpoG.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../Text_es_CU9KR5AE.js';

package/dist/components/Swiper.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useRef, useCallback, useImperativeHandle, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
-import { G as Group } from '../Group_es_BwTj-yH-.js';
+import { G as Group } from '../Group_es_nBtACpoG.js';
 import { T as Text } from '../Text_es_CU9KR5AE.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';

package/dist/components/Textarea.js

@@ -22,32 +22,28 @@ const textareaAppearanceDefault = {
         fillHover: 'surfaceTertiary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
-    defaultSecondary: {
+    defaultQuaternary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfaceTertiary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
-    defaultTertiary: {
+    defaultSecondary: {
         fill: 'surfacePrimary',
+        fillHover: 'surfaceTertiary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
-    defaultQuaternary: {
+    defaultTertiary: {
         fill: 'surfacePrimary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
@@ -59,7 +55,6 @@ const textareaAppearanceDisabled = {
         borderColor: 'errorBorderQuaternary',
         borderColorHover: 'errorBorderQuaternary',
         textColor: 'surfaceTextQuaternary',
-        iconBeforeFill: 'errorItemQuaternary',
         iconClearFill: 'errorItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
@@ -67,7 +62,6 @@ const textareaAppearanceDisabled = {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextSecondary',
     },
@@ -77,17 +71,15 @@ const textareaAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
-        borderColorHover: 'errorBorderQuaternary',
+        borderColorHover: 'errorBorderHoverQuaternary',
         textColor: 'surfaceTextPrimary',
-        iconBeforeFill: 'errorItemQuaternary',
         iconClearFill: 'errorItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
     errorSecondary: {
         fill: 'errorSecondary',
         borderColor: 'errorBorderTertiary',
-        borderColorHover: 'errorBorderQuaternary',
-        iconBeforeFill: 'errorItemQuaternary',
+        borderColorHover: 'errorBorderHoverQuaternary',
         iconClearFill: 'errorItemPrimary',
         placeholderTextColor: 'errorTextSecondary',
     },
@@ -99,7 +91,6 @@ const textareaAppearanceRequire = {
         borderColor: 'warningBorderQuaternary',
         borderColorHover: 'warningBorderQuaternary',
         textColor: 'surfaceTextPrimary',
-        iconBeforeFill: 'warningItemQuaternary',
         iconClearFill: 'warningItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
@@ -107,7 +98,6 @@ const textareaAppearanceRequire = {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextSecondary',
     },
@@ -188,11 +178,10 @@ const textareaAppearanceStyle = {
 const textareaAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
-        fillHover: 'successTertiary',
+        fillHover: 'successHoverTertiary',
         borderColor: 'successBorderQuaternary',
         borderColorHover: 'successBorderQuaternary',
         textColor: 'surfaceTextPrimary',
-        iconBeforeFill: 'successItemQuaternary',
         iconClearFill: 'successItemPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },
@@ -200,7 +189,6 @@ const textareaAppearanceSuccess = {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextSecondary',
     },
@@ -224,12 +212,12 @@ const textareaConfig = {
     },
 };
 function Textarea(props) {
-    const { id, className, appearance, isDisabled, placeholder, value, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const { id, appearance, className, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, textareaConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsx("div", { className: clsx('textarea', className, sizeClass && `textarea_size_${sizeClass}`), children: jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderHoverClass && `border-color_hover_${borderHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, placeholderTextColorClass &&
-                `placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), disabled: isDisabled && 'disabled', placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
+                `placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
 }
 
 export { Textarea, textareaAppearance, textareaConfig };

package/dist/components/Video.js

@@ -18,7 +18,7 @@ import '../hooks/useStyles/styleAttributes.js';
 function Video(props) {
     const { id, className, position, mp4, ogv, poster, webm, children } = props;
     const { styles: videoStyles } = useStyles(props);
-    return (jsxs("div", { id: id, className: clsx('video', className, poster && `video_poster`, position && `video_position_${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, codecs: "vp8, vorbis" }), ogv && jsx("source", { type: "video/ogg", src: ogv, codecs: "theora, vorbis" }), mp4 && (jsx("source", { type: "video/mp4", src: mp4, codecs: "avc1.42E01E, mp4a.40.2" }))] }), children] }));
+    return (jsxs("div", { id: id, className: clsx('video', className, poster && `video_poster`, position && `video_position_${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; codecs="vp8, vorbis"', src: webm }), ogv && jsx("source", { type: 'video/ogg; codecs="theora, vorbi"', src: ogv }), mp4 && (jsx("source", { type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', src: mp4 }))] }), children] }));
 }
 
 export { Video };

package/dist/components/Warning.js

@@ -184,14 +184,14 @@ const warningConfig = {
     },
 };
 function Warning(props) {
-    const { appearance, className, label, description, isSkeleton } = props;
+    const { appearance, className, label, description, isSkeleton, children } = props;
     const appearanceConfig = useAppearanceConfig(appearance, warningConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     // @ts-ignore
     const { styles: warningStyles } = useStyles(props);
     const [isVisible, setIsVisible] = useState(true);
-    return (jsx(Fragment, { children: isVisible && (jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: 'warning__content', children: [label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsx(Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
+    return (jsx(Fragment, { children: isVisible && (jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: 'warning__content', children: [label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsx(Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description })), children] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
 }
 
 export { Warning, warningAppearance, warningConfig };

package/dist/css/styles/bundles.css

@@ -35599,6 +35599,25 @@ textarea.fill {
         }
       }
 }
+.hover-filter {
+  &_brightness {
+    &09 {
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
+    &1 {
+      &:hover {
+        filter: brightness(1);
+      }
+    }
+    &11 {
+      &:hover {
+        filter: brightness(1.1);
+      }
+    }
+  }
+}
 .hover-item-color {
       &_accent {
         &-item {
@@ -64743,8 +64762,8 @@ h2.react-datepicker__current-month {
       align-items: flex-start;
       &-reverse {
         display: flex;
-        align-items: flex-start;
         flex-direction: row-reverse;
+        align-items: flex-start;
       }
     }
     &_vertical {
@@ -64753,29 +64772,29 @@ h2.react-datepicker__current-month {
       align-items: flex-start;
       &-reverse {
         display: flex;
-        align-items: flex-start;
         flex-direction: column-reverse;
+        align-items: flex-start;
       }
     }
       &_row {
         display: flex;
-        align-items: flex-start;
         flex-direction: row;
+        align-items: flex-start;
       }
       &_row-reverse {
         display: flex;
-        align-items: flex-start;
         flex-direction: row-reverse;
+        align-items: flex-start;
       }
       &_column {
         display: flex;
-        align-items: flex-start;
         flex-direction: column;
+        align-items: flex-start;
       }
       &_column-reverse {
         display: flex;
-        align-items: flex-start;
         flex-direction: column-reverse;
+        align-items: flex-start;
       }
   }
 }

package/dist/snippets/Group.snippets.json

@@ -2,7 +2,7 @@
     "Group": {
         "prefix": "group",
         "body": [
-            "<Group width=\"${1|fill,auto}\" direction=\"${2|horizontal,vertical,row-reverse,column-reverse|}\">",
+            "<Group width=\"${1|fill,auto|}\" direction=\"${2|horizontal,vertical,row-reverse,column-reverse|}\">",
             "  $3",
             "</Group>"
         ],

package/dist/types/components/Button/Button.d.ts

@@ -58,7 +58,7 @@ declare const Button: React.ForwardRefExoticComponent<{
     href?: string;
     htmlType?: string;
     isDisabled?: boolean;
-    isLoading: boolean;
+    isLoading?: boolean;
     isSkeleton?: boolean;
     label?: string;
     labelTextTruncate?: boolean;

package/dist/types/components/Button/Button.interface.d.ts

@@ -62,7 +62,7 @@ type ButtonProps = ButtonAppearanceProps & StyleAttributes & {
     href?: string;
     htmlType?: string;
     isDisabled?: boolean;
-    isLoading: boolean;
+    isLoading?: boolean;
     isSkeleton?: boolean;
     label?: string;
     labelTextTruncate?: boolean;

package/dist/types/components/Cell/Cell.appearance.d.ts

@@ -1,2 +1,2 @@
-import { CellAppearanceType } from './Cell.interface';
-export declare const cellAppearance: CellAppearanceType;
+import { CellAppearance } from './Cell.interface';
+export declare const cellAppearance: CellAppearance;

package/dist/types/components/Cell/Cell.interface.d.ts

@@ -1,75 +1,86 @@
-import { ElementType, ReactNode } from 'react';
-import { AppearanceKeysDefault, DirectionProps, FillProps, IconFillSizeProps, ItemColorProps, ShapeProps, SizeProps, TextAlignProps, TextColorProps, TextSizeProps, TextWeightProps, TextWrapProps } from '@itcase/types';
+import { ReactNode } from 'react';
+import { AppearanceKeysDefault, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceDefaultSizeStyleKey, DirectionProps, FillActiveHoverProps, FillHoverProps, FillProps, ItemColorProps, ShapeProps, SizeProps, TextColorProps } from '@itcase/types';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
-export interface CellThemeColor {
-}
-type AppearanceKeys = AppearanceKeysDefault & {};
-export type CellAppearanceType = {
-    [key in AppearanceKeys]?: CellThemeColor;
-};
-export interface CellConfig {
-    [key: number | string | symbol]: any;
-    appearance: CellAppearanceType | undefined;
-    setAppearance: (newComponent: CellAppearanceType) => void;
-}
-export interface CellProps extends CellThemeColor, StyleAttributes {
-    [key: number | string | symbol]: any;
-    after?: ReactNode;
-    appearance?: AppearanceKeys;
-    before?: ReactNode;
-    className?: string;
+import { IconProps } from '../Icon/Icon.interface';
+import { LabelProps } from '../Label/Label.interface';
+import { TextProps } from '../Text/Text.interface';
+type CellAppearanceProps = {
+    borderColor?: BorderColorProps;
+    borderColorActive?: BorderColorProps;
+    borderColorActiveHover?: BorderColorProps;
+    borderColorHover?: BorderColorProps;
     direction?: DirectionProps;
-    mode?: string;
-    reverse?: boolean;
-    showTitleLabel?: boolean;
-    showValueLabel?: boolean;
+    fill?: FillProps;
+    fillActive?: FillProps;
+    fillActiveHover?: FillActiveHoverProps;
+    fillHover?: FillHoverProps;
+    labelTextColor?: TextColorProps;
+    shape?: ShapeProps;
     size?: SizeProps;
-    title?: any;
-    titleIcon?: ElementType;
-    titleIconFill?: FillProps;
+    titleIconFill?: IconProps['fill'];
     titleIconFillHover?: ItemColorProps;
-    titleIconFillSize?: IconFillSizeProps;
+    titleIconFillSize?: IconProps['fillSize'];
     titleIconItemFill?: ItemColorProps;
-    titleIconShape?: ShapeProps;
-    titleIconSrc?: string;
-    titleLabel?: string;
-    titleLabelAppearance?: AppearanceKeys;
+    titleIconShape?: IconProps['shape'];
+    titleIconSrc?: IconProps['imageSrc'];
+    titleLabelAppearance?: LabelProps['appearance'];
+    titleLabelAppearanceSize?: AppearanceSizeKey;
     titleLabelShape?: ShapeProps;
     titleLabelSize?: SizeProps;
-    titleLabelTextSize?: TextSizeProps;
-    titleTag?: ElementType;
+    titleLabelTextSize?: TextProps['size'];
     titleTextColor?: TextColorProps;
-    titleTextSize?: TextSizeProps;
-    titleTextTruncate?: boolean;
-    titleTextWeight?: TextWeightProps;
-    titleTextWrap?: TextWrapProps;
-    value?: any;
-    valueIcon?: ElementType;
-    valueIconFill?: FillProps;
+    titleTextSize?: TextProps['size'];
+    titleTextTruncate?: TextProps['textTruncate'];
+    titleTextWeight?: TextProps['textWeight'];
+    titleTextWrap?: TextProps['textWrap'];
+    valueIconFill?: IconProps['fill'];
     valueIconFillHover?: ItemColorProps;
-    valueIconFillSize?: IconFillSizeProps;
+    valueIconFillSize?: IconProps['fillSize'];
     valueIconItemFill?: ItemColorProps;
-    valueIconShape?: ShapeProps;
-    valueIconSrc?: string;
+    valueIconShape?: IconProps['shape'];
+    valueIconSrc?: IconProps['imageSrc'];
     valueLabel?: string;
-    valueLabelAppearance?: AppearanceKeys;
+    valueLabelAppearance?: LabelProps['appearance'];
+    valueLabelAppearanceSize?: AppearanceSizeKey;
     valueLabelShape?: ShapeProps;
     valueLabelSize?: SizeProps;
-    valueLabelTextSize?: TextSizeProps;
-    valueTag?: ElementType;
-    valueTextAlign?: TextAlignProps;
-    valueTextColor?: TextColorProps;
-    valueTextSize?: TextSizeProps;
-    valueTextTruncate?: boolean;
-    valueTextWeight?: TextWeightProps;
-    valueTextWrap?: TextWrapProps;
+    valueLabelTextSize?: TextProps['size'];
+    valueTextAlign?: TextProps['textAlign'];
+    valueTextColor?: TextProps['textColor'];
+    valueTextSize?: TextProps['size'];
+    valueTextTruncate?: TextProps['textTruncate'];
+    valueTextWeight?: TextProps['textWeight'];
+    valueTextWrap?: TextProps['textWrap'];
     zeroGap?: boolean;
     zeroPadding?: boolean;
+};
+type CellProps = CellAppearanceProps & StyleAttributes & {
+    after?: string;
+    appearance?: CompositeAppearanceDefaultSizeStyleKey;
+    before?: string;
+    className?: string;
     isActive?: boolean;
-    isDisabled?: boolean;
     isEqual?: boolean;
+    isSameWidth?: boolean;
     onClick?: () => void;
     onMouseEnter?: () => void;
-    set?: string;
-}
-export {};
+    reverse?: boolean;
+    showTitleLabel?: boolean;
+    showValueLabel?: boolean;
+    title?: string;
+    titleIcon?: IconProps['SvgImage'];
+    titleLabel?: string;
+    titleTag?: ReactNode;
+    value?: string;
+    valueIcon?: IconProps['SvgImage'];
+    valueTag?: TextProps['tag'];
+};
+type AppearanceKeys = AppearanceKeysDefault | AppearanceSizeKey | AppearanceStyleKey;
+type CellAppearance = {
+    [key in AppearanceKeys]?: CellAppearanceProps;
+};
+type CellConfig = {
+    appearance: CellAppearance;
+    setAppearance: (appearanceConfig: CellAppearance) => void;
+};
+export type { CellAppearance, CellConfig, CellProps };