@itcase/ui 1.8.31 → 1.8.33

package/dist/components/Search.js

@@ -1,11 +1,11 @@
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
-import { icon16, icon24 } from '@itcase/icons/default';
+import { icons16, icons24 } from '@itcase/icons/default';
 import { jsxs, jsx } from 'react/jsx-runtime';
 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 '../Tooltip_es_BPMRrd2L.js';
+import { I as Icon } from '../Tooltip_es_B0nm9irO.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import { S as Scrollbar } from '../Scrollbar_es_CThJeCLF.js';
 import 'lodash/camelCase';
@@ -28,7 +28,7 @@ var searchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderQuaternary',
-        borderHover: 'surfaceBorderQuaternaryHover',
+        borderColorHover: 'surfaceBorderQuaternaryHover',
         iconAfterFill: 'surfaceItemQuaternary',
         iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemQuaternary',
@@ -41,7 +41,7 @@ var searchAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         borderColor: 'surfaceBorderDisabled',
-        borderHover: 'surfaceBorderDisabledHover',
+        borderColorHover: 'surfaceBorderDisabledHover',
         iconAfterFill: 'surfaceItemPrimary',
         iconBeforeFill: 'surfaceItemPrimary',
         iconClearFill: 'surfaceItemPrimary',
@@ -54,7 +54,7 @@ var searchAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
-        borderHover: 'errorBorderQuaternaryHover',
+        borderColorHover: 'errorBorderQuaternaryHover',
         iconAfterFill: 'errorItemSecondary',
         iconBeforeFill: 'errorItemSecondary',
         iconClearFill: 'errorItemSecondary',
@@ -67,7 +67,7 @@ var searchAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         borderColor: 'warningBorderSecondary',
-        borderHover: 'warningBorderSecondaryHover',
+        borderColorHover: 'warningBorderSecondaryHover',
         iconAfterFill: 'warningItemSecondary',
         iconBeforeFill: 'warningItemSecondary',
         iconClearFill: 'warningItemSecondary',
@@ -79,61 +79,62 @@ var searchAppearanceRequire = {
 var searchAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
-        iconBefore: icon24.Search,
-        iconClear: icon24.Clear,
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
         inputTextSize: 'l',
         placeholderTextSize: 'l',
     },
     sizeXL: {
         size: 'xl',
-        iconBefore: icon24.Search,
-        iconClear: icon24.Clear,
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
         inputTextSize: 'm',
         placeholderTextSize: 'm',
     },
     sizeL: {
         size: 'l',
-        iconBefore: icon24.Search,
-        iconClear: icon24.Clear,
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
         inputTextSize: 's',
         placeholderTextSize: 's',
     },
     sizeM: {
         size: 'm',
-        iconBefore: icon24.Search,
-        iconClear: icon24.Clear,
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
         inputTextSize: 'm',
         placeholderTextSize: 'm',
     },
     sizeS: {
         size: 's',
-        iconBefore: icon24.Search,
-        iconClear: icon24.Clear,
+        iconBefore: icons24.Security.Search,
+        iconClear: icons24.Action.Clear,
         inputTextSize: 's',
         placeholderTextSize: 's',
     },
     sizeXS: {
         size: 'xs',
-        iconBefore: icon16.Search,
-        iconClear: icon16.Clear,
+        iconBefore: icons16.Security.Search,
+        iconClear: icons16.Action.Clear,
         inputTextSize: 's',
         placeholderTextSize: 's',
     },
 };
 
 var searchAppearanceStyle = {
-    full: {
+    solid: {
         borderColor: 'none',
-    },
-    ghost: {
-        fill: 'none',
-        borderWidth: '0',
+        borderColorHover: 'none',
     },
     outlined: {
         fill: 'none',
     },
-    solid: {
-        borderWidth: '0',
+    full: {
+        borderColor: 'none',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
     },
 };
 
@@ -141,7 +142,7 @@ var searchAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         borderColor: 'accentBorderQuaternary',
-        borderHover: 'accentBorderQuaternary',
+        borderColorHover: 'accentBorderQuaternary',
         textColor: 'surfaceTextPrimary',
         iconAfterFill: 'successItemSecondary',
         iconBeforeFill: 'successItemSecondary',
@@ -175,9 +176,9 @@ var SearchInput = React.forwardRef(function SearchInput(props, ref) {
         return (__assign(__assign({}, resultConfig), (_a = searchInputConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var size = propsGenerator.size, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, iconClear = propsGenerator.iconClear, iconClearFill = propsGenerator.iconClearFill, iconClearSize = propsGenerator.iconClearSize, iconClearSrc = propsGenerator.iconClearSrc, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextStyleClass = propsGenerator.inputTextStyleClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, placeholderTextColor = propsGenerator.placeholderTextColor, placeholderTextSize = propsGenerator.placeholderTextSize, placeholderTextStyle = propsGenerator.placeholderTextStyle, placeholderTextWeight = propsGenerator.placeholderTextWeight, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
+    var size = propsGenerator.size, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, iconClear = propsGenerator.iconClear, iconClearFill = propsGenerator.iconClearFill, iconClearSize = propsGenerator.iconClearSize, iconClearSrc = propsGenerator.iconClearSrc, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextStyleClass = propsGenerator.inputTextStyleClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, placeholderTextColor = propsGenerator.placeholderTextColor, placeholderTextSize = propsGenerator.placeholderTextSize, placeholderTextStyle = propsGenerator.placeholderTextStyle, placeholderTextWeight = propsGenerator.placeholderTextWeight, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
     var searchInputStyles = useStyles(props).styles;
-    return (jsxs("label", { className: clsx(className, 'search-input', shapeClass && "search_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), widthClass && "width_".concat(widthClass), borderColorClass && "border-color_".concat(borderColorClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), size && "search-input_size_".concat(size), type && "search-input_type_".concat(type), isSkeleton && "search-input_skeleton"), "data-tour": dataTour, style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && "fill_".concat(inputFillClass), inputShapeClass && "search-input_shape_".concat(inputShapeClass)), children: [jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
+    return (jsxs("label", { className: clsx(className, 'search-input', shapeClass && "search_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), widthClass && "width_".concat(widthClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), size && "search-input_size_".concat(size), type && "search-input_type_".concat(type), isSkeleton && "search-input_skeleton"), "data-tour": dataTour, style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && "fill_".concat(inputFillClass), inputShapeClass && "search-input_shape_".concat(inputShapeClass)), children: [jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
                             inputTextWeightClass ||
                             inputTextColorClass ||
                             inputTextStyleClass) &&

package/dist/components/Segmented.js

@@ -33,7 +33,7 @@ var segmentedAppearanceDefault = {
         fill: 'surfaceSecondary',
         fillActive: 'accentPrimary',
         fillActiveHover: 'accentPrimary',
-        fillHover: 'surfaceSecondary',
+        fillHover: 'surfaceTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         indicatorFill: 'accentPrimary',

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 '../Tooltip_es_BPMRrd2L.js';
+import { I as Icon, B as Badge } from '../Tooltip_es_B0nm9irO.js';
 import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';

package/dist/components/Swiper/stories/__mock__.js

@@ -0,0 +1,14 @@
+import { jsxs } from 'react/jsx-runtime';
+
+var slidesMock = Array.from({ length: 10 }, function (_, index) { return (jsxs("div", { style: {
+        width: '100%',
+        height: 'auto',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: 24,
+        fontWeight: 'bold',
+        display: 'flex',
+        background: "hsl(".concat(index * 60, ", 70%, 80%)"),
+    }, children: ["Slide ", index + 1] }, index)); });
+
+export { slidesMock };

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

package/dist/components/Tab/stories/__mock__.js

@@ -1,11 +1,16 @@
-import { icon16 } from '@itcase/icons/default';
+import { icons16 } from '@itcase/icons/default';
 
 var tabListMock = {
     tabList: [
         { key: 1, label: 'Tab 1', isActive: true },
         { key: 2, label: 'Tab 2', isActive: false },
         { key: 3, label: 'Tab 3', badgeValue: 3, isActive: false },
-        { key: 4, label: 'Tab 4', icon: icon16.Placeholder, isActive: false },
+        {
+            key: 4,
+            label: 'Tab 4',
+            icon: icons16.Placeholder.Default,
+            isActive: false,
+        },
     ],
 };
 

package/dist/components/Tab.js

@@ -4,7 +4,7 @@ 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, I as Icon } from '../Tooltip_es_BPMRrd2L.js';
+import { B as Badge, I as Icon } from '../Tooltip_es_B0nm9irO.js';
 import { D as Divider } from '../Divider_es_kY-30pft.js';
 import { L as Link } from '../Link_es_DxtZLeKY.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';

package/dist/components/Tile.js

@@ -3,7 +3,7 @@ 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 Title, B as Badge, I as Icon } from '../Tooltip_es_BPMRrd2L.js';
+import { b as Title, B as Badge, I as Icon } from '../Tooltip_es_B0nm9irO.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import 'react';
 import 'lodash/camelCase';

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Tooltip_es_BPMRrd2L.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Tooltip_es_B0nm9irO.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 '../Tooltip_es_BPMRrd2L.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_B0nm9irO.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/context/Notifications.js

@@ -127,7 +127,7 @@ function createNotification(notification, onClose) {
     var status = STATUSES.warning;
     // let appearance = STATUSES.appearance
     var closeByTime = 4500;
-    var textColor = '';
+    var appearance = '';
     if (typeof notification === 'string') {
         text = notification;
     }
@@ -140,24 +140,24 @@ function createNotification(notification, onClose) {
     }
     switch (status) {
         case 'success':
-            textColor = 'successTextPrimary';
+            appearance = 'successPrimary';
             break;
         case 'info':
-            textColor = 'infoTextPrimary';
+            appearance = 'infoPrimary';
             break;
         case 'error':
-            textColor = 'errorTextPrimary';
+            appearance = 'errorPrimary';
             break;
         case 'warning':
-            textColor = 'warningTextPrimary';
+            appearance = 'warningPrimary';
             break;
     }
     return {
         id: id,
+        appearance: appearance,
         title: title,
         status: status,
         text: text,
-        textColor: textColor,
         closeByTime: closeByTime,
         onClose: onClose,
     };

package/dist/css/components/Choice/Choice.css

@@ -8,12 +8,6 @@
     border-right: var(--chioce-item-border-right);
   }
   */
-  &_state_disabled {
-    background: var(--choice-item-state-disabled-background);
-    &:hover {
-      background: var(--choice-item-state-disabled-background);
-    }
-  }
   & input {
     width: 100%;
     height: 100%;
@@ -35,9 +29,6 @@
     transition: color 0.5s ease;
     cursor: pointer;
   }
-  &-icon {
-    padding: var(--choice-item-icon-padding);
-  }
 }
 .choice__item {
   &_shape {
@@ -54,8 +45,11 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        min-height: var(--choice-size-$(size)-min-height);
+        min-height: var(--choice-item-size-$(size)-min-height);
         padding: var(--choice-item-size-$(size)-padding);
+        ^^&-label {
+          gap: var(--choice-item-size-$(size)-gap);
+        }
       }
     }
   }
@@ -145,28 +139,29 @@
 }
 :root {
   --choice-size-s-height: 28px;
-  --choice-size-m-height: 36px;
-  --choice-size-l-height: 40px;
-
   --choice-size-s-min-height: 28px;
-  --choice-size-m-min-height: 36px;
-  --choice-size-l-min-height: 40px;
-
   --choice-size-s-row-gap: 12px;
   --choice-size-s-column-gap: 12px;
 
   --choice-size-m-row-gap: 12px;
   --choice-size-m-column-gap: 12px;
+  --choice-size-m-height: 36px;
+  --choice-size-m-min-height: 36px;
 
+  --choice-size-l-height: 40px;
+  --choice-size-l-min-height: 40px;
   --choice-size-l-row-gap: 12px;
   --choice-size-l-column-gap: 12px;
 
-  --choice-shape-rounded: 8px;
-
   --choice-item-size-s-padding: 0px 6px;
+  --choice-item-size-s-min-height: 24px;
+  --choice-item-size-s-gap: 8px;
+
   --choice-item-size-m-padding: 0px 12px;
-  --choice-item-size-l-padding: 0px 12px;
+  --choice-item-size-m-min-height: 32px;
+  --choice-item-size-m-gap: 8px;
 
-  --choice-item-icon-padding: 0;
-  --choice-item-shape-rounded: 8px;
+  --choice-item-size-l-padding: 0px 12px;
+  --choice-item-size-l-min-height: 36px;
+  --choice-item-size-l-gap: 8px;
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -8,12 +8,6 @@
     border-right: var(--chioce-item-border-right);
   }
   */
-  &_state_disabled {
-    background: var(--choice-item-state-disabled-background);
-    &:hover {
-      background: var(--choice-item-state-disabled-background);
-    }
-  }
   & input {
     width: 100%;
     height: 100%;
@@ -35,7 +29,4 @@
     transition: color 0.5s ease;
     cursor: pointer;
   }
-  &-icon {
-    padding: var(--choice-item-icon-padding);
-  }
 }

package/dist/css/components/Choice/css/__item/choice__item_size.css

@@ -2,8 +2,11 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        min-height: var(--choice-size-$(size)-min-height);
+        min-height: var(--choice-item-size-$(size)-min-height);
         padding: var(--choice-item-size-$(size)-padding);
+        ^^&-label {
+          gap: var(--choice-item-size-$(size)-gap);
+        }
       }
     }
   }

package/dist/css/components/Code/Code.css

@@ -1,5 +1,4 @@
 .code {
-  width: 100%;
   &__wrapper {
     width: 100%;
     display: flex;
@@ -40,7 +39,6 @@
 .code__input {
   border: none;
   outline: none;
-
   &:focus {
     outline: none;
   }
@@ -78,11 +76,11 @@
   }
 }
 :root {
-  --code-input-shape-rounded: 0;
   --code-input-size-l-width: 56px;
-  --code-input-size-l-height: 48px;
-  --code-input-size-l-gap: 8px;
+  --code-input-size-l-height: 56px;
+  --code-size-l-gap: 8px;
+
   --code-input-size-m-width: 48px;
-  --code-input-size-m-height: 40px;
-  --code-input-size-m-gap: 6px;
+  --code-input-size-m-height: 48px;
+  --code-size-m-gap: 6px;
 }

package/dist/css/components/{DadataHintField/DadataHintField.css → Dadata/Dadata.css}

@@ -3,13 +3,13 @@
     width: 100%;
     ^&__input {
       height: auto;
-      color: var(--react-dadata-color);
-      padding: var(--react-dadata-padding);
-      border: 1px solid var(--react-dadata-border);
-      border-radius: var(--react-dadata-border-radius);
+      color: var(--dadata-color);
+      padding: var(--dadata-padding);
+      border: 1px solid var(--dadata-border);
+      border-radius: var(--dadata-border-radius);
       box-shadow: none;
       &:hover {
-        border: solid 1px var(--react-dadata-hover-border);
+        border: solid 1px var(--dadata-hover-border);
       }
     }
   }
@@ -19,7 +19,7 @@
   &__suggestion {
     position: relative !important;
     &:hover {
-      background: var(--react-dadata-suggestion-hover-color, --color-accent-tertiary);
+      background: var(--dadata-suggestion-hover-color, --color-accent-tertiary);
     }
   }
   &--highlighted {
@@ -27,13 +27,13 @@
   }
   & .input_state {
     &_error {
-      border: solid 1px var(--react-dadata-error-border);
+      border: solid 1px var(--dadata-error-border);
       &:hover {
-        border: solid 1px var(--react-dadata-error-border);
+        border: solid 1px var(--dadata-error-border);
       }
     }
     &_focus {
-      border: solid 1px var(--react-dadata-focus-border);
+      border: solid 1px var(--dadata-focus-border);
     }
   }
 }

package/dist/css/components/HTMLContent/HTMLContent.css

@@ -2,43 +2,43 @@
   & h1 {
     width: 100%;
     color: var(--html-content-title-h1-color);
-    padding: var(--html-content-title-h1-padding, 0);
-    margin: var(--html-content-title-h1-margin, 0);
+    padding: var(--html-content-title-h1-padding);
+    margin: var(--html-content-title-h1-margin);
     @mixin h1;
   }
   & h2 {
     width: 100%;
     color: var(--html-content-title-h2-color);
-    padding: var(--html-content-title-h2-padding, 0);
-    margin: var(--html-content-title-h2-margin, 0);
+    padding: var(--html-content-title-h2-padding);
+    margin: var(--html-content-title-h2-margin);
     @mixin h2;
   }
   & h3 {
     width: 100%;
     color: var(--html-content-title-h3-color);
-    padding: var(--html-content-title-h3-padding, 0);
-    margin: var(--html-content-title-h3-margin, 0);
+    padding: var(--html-content-title-h3-padding);
+    margin: var(--html-content-title-h3-margin);
     @mixin h3;
   }
   & h4 {
     width: 100%;
     color: var(--html-content-title-h4-color);
-    padding: var(--html-content-title-h4-padding, 0);
-    margin: var(--html-content-title-h4-margin, 0);
+    padding: var(--html-content-title-h4-padding);
+    margin: var(--html-content-title-h4-margin);
     @mixin h4;
   }
   & h5 {
     width: 100%;
     color: var(--html-content-title-h5-color);
-    padding: var(--html-content-title-h5-padding, 0);
-    margin: var(--html-content-title-h5-margin, 0);
+    padding: var(--html-content-title-h5-padding);
+    margin: var(--html-content-title-h5-margin);
     @mixin h5;
   }
   & h6 {
     width: 100%;
     color: var(--html-content-title-h6-color);
-    padding: var(--html-content-title-h6-padding, 0);
-    margin: var(--html-content-title-h6-margin, 0);
+    padding: var(--html-content-title-h6-padding);
+    margin: var(--html-content-title-h6-margin);
     @mixin h6;
   }
 }
@@ -64,22 +64,47 @@
       }
     }
   }
+  & ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    & li {
+      padding: 0 0 16px 24px;
+    }
+    & > li {
+      gap: 32px;
+      padding: 0 0 16px 0;
+      margin: 0;
+      display: block;
+      @mixin p;
+    }
+  }
 }
 .html-content {
   & table {
-    margin: var(--html-content-table-margin, 0);
+    margin: var(--html-content-table-margin);
     @media (--mobile) {
-      margin: var(--html-content-table-margin-mobile, 0);
+      margin: var(--html-content-table-margin-mobile);
       display: flex;
     }
     & tr {
-      display: flex;
       flex-wrap: wrap;
+      @media (--mobile) {
+        display: flex;
+      }
+      & th {
+        padding: var(--html-content-table-th-padding);
+        @media (--mobile) {
+          padding: var(--html-content-table-th-padding-mobile);
+        }
+        @mixin p;
+      }
       & td {
-        padding: var(--html-content-table-td-padding, 0);
+        padding: var(--html-content-table-td-padding);
         @media (--mobile) {
-          padding: var(--html-content-table-td-padding-mobile, 0);
+          padding: var(--html-content-table-td-padding-mobile);
         }
+        @mixin p;
       }
     }
   }
@@ -87,13 +112,55 @@
 .html-content {
   & p {
     color: var(--html-content-p-color);
-    margin: var(--html-content-p-margin, 0);
+    margin: var(--html-content-p-margin);
     @mixin p;
   }
   & a {
     color: var(--html-content-link-color);
     text-decoration: none;
+    @mixin p;
   }
 }
 .html-content {
 }
+:root {
+  --html-content-p-color: 0;
+  --html-content-p-margin: 0;
+  --html-content-link-color: 0;
+
+  /* h1 */
+  --html-content-title-h1-color: 0;
+  --html-content-title-h1-padding: 0;
+  --html-content-title-h1-margin: 0;
+
+  /* h2 */
+  --html-content-title-h2-color: 0;
+  --html-content-title-h2-padding: 0;
+  --html-content-title-h2-margin: 0;
+
+  /* h3 */
+  --html-content-title-h3-color: 0;
+  --html-content-title-h3-padding: 0;
+  --html-content-title-h3-margin: 0;
+
+  /* h4 */
+  --html-content-title-h4-color: 0;
+  --html-content-title-h4-padding: 0;
+  --html-content-title-h4-margin: 0;
+
+  /* h5 */
+  --html-content-title-h5-color: 0;
+  --html-content-title-h5-padding: 0;
+  --html-content-title-h5-margin: 0;
+
+  /* h6 */
+  --html-content-title-h6-color: 0;
+  --html-content-title-h6-padding: 0;
+  --html-content-title-h6-margin: 0;
+
+  /* Table */
+  --html-content-table-margin: 0;
+  --html-content-table-margin-mobile: 0;
+  --html-content-table-td-padding: 0;
+  --html-content-table-td-padding-mobile: 0;
+}

package/dist/css/components/Input/Input.css

@@ -38,6 +38,7 @@
   &&_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
+        min-height: var(--input-size-$(size)-min-height);
         padding: var(--input-size-$(size)-padding);
       }
     }
@@ -78,6 +79,11 @@
   --input-size-l-padding: 9px 15px;
   --input-size-xl-padding: 13px 20px;
   --input-size-xxl-padding: 17px 25px;
+  --input-size-s-min-height: 28px;
+  --input-size-m-min-height: 36px;
+  --input-size-l-min-height: 40px;
+  --input-size-xl-min-height: 48px;
+  --input-size-xxl-min-height: 56px;
 
   --input-caret-color: var(--color-accent-fill-primary);