@itcase/ui 1.2.16 → 1.2.18

package/dist/components/List.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useStyles } from '../hooks/useStyles.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { L as Link } from '../Link-BSquFKSX.js';
+import { L as Link } from '../Link-CeQuavin.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/maxBy';

package/dist/components/Logo.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { a as LinkWrapper } from '../Link-BSquFKSX.js';
+import { a as LinkWrapper } from '../Link-CeQuavin.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';

package/dist/components/Menu.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { M as MenuItem } from '../MenuItem-p5bhKFb0.js';
+import { M as MenuItem } from '../MenuItem-BL6WBNjL.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -13,7 +13,7 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-BSquFKSX.js';
+import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import '../Text-CG3xPG27.js';
 

package/dist/components/MenuItem.js

@@ -1,4 +1,4 @@
-export { M as MenuItem, m as menuItemConfig } from '../MenuItem-p5bhKFb0.js';
+export { M as MenuItem, m as menuItemConfig } from '../MenuItem-BL6WBNjL.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -13,6 +13,6 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-BSquFKSX.js';
+import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import '../Text-CG3xPG27.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 { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem-sLbGv_08.js';
-import { I as Icon } from '../Icon-BanAVsve.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-D0dOP4NL.js';
+import { I as Icon } from '../Icon-DD_Vyrw0.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -18,7 +18,7 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Divider-U5UdY-ef.js';
-import '../Link-BSquFKSX.js';
+import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
 import '../Tooltip-DJufHBiQ.js';

package/dist/components/Response.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-YvFWfIzn.js';
+import { B as Button } from '../Button--5mnRJi2.js';
 import { G as Group } from '../Group-12uup5mu.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { T as Title } from '../Title-BfSFPJtJ.js';
@@ -17,8 +17,8 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-BanAVsve.js';
-import '../Link-BSquFKSX.js';
+import '../Icon-DD_Vyrw0.js';
+import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import '../Tooltip-DJufHBiQ.js';
 import '../Loader-CJ8ZCdwy.js';

package/dist/components/Search.js

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-BanAVsve.js';
+import { I as Icon } from '../Icon-DD_Vyrw0.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { S as Scrollbar } from '../Scrollbar-CrGXCZ_F.js';
 import 'lodash/castArray';
@@ -16,7 +16,7 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-BSquFKSX.js';
+import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import '../Tooltip-DJufHBiQ.js';
 import '../Title-BfSFPJtJ.js';

package/dist/components/Select.js

@@ -1,7 +1,7 @@
 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-BanAVsve.js';
+import { I as Icon } from '../Icon-DD_Vyrw0.js';
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
@@ -20,7 +20,7 @@ import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
-import '../Link-BSquFKSX.js';
+import '../Link-CeQuavin.js';
 import '../Tooltip-DJufHBiQ.js';
 import '../Title-BfSFPJtJ.js';
 import 'lodash/castArray';
@@ -128,7 +128,7 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
     var clearStyle = useMemo(function () { return new Proxy({}, { get: function () { return function () { }; } }); }, []);
     var elevation = props.elevation, isClearable = props.isClearable, isCreatable = props.isCreatable, isDisabled = props.isDisabled, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, closeMenuOnSelect = props.closeMenuOnSelect, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, dropdownFillHover = props.dropdownFillHover, dropdownIcon = props.dropdownIcon, dropdownIconFill = props.dropdownIconFill, dropdownIconShape = props.dropdownIconShape, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, 
     // @ts-expect-error // because there is a defaultValue
-    initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
+    initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
     var defaultRef = useRef(null);
     var selectRef = ref || defaultRef;
     // React-select wai function as "loadingMessage" property
@@ -264,7 +264,7 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             (selectAppearanceItem.size &&
                 "select_size_".concat(selectAppearanceItem.size).replace(/([A-Z])/g, '-$1').toLowerCase()), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set)), ref: selectRef, after: after, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, before: before, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, closeMenuOnSelect: closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : false, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, elevation: elevation || selectAppearanceItem.elevation, filterOption: filterOption, headingFill: headingFillClass, headingFillHover: headingFillHoverClass, headingTextColor: headingTextColorClass, headingTextSize: headingTextSizeClass, headingTextWeight: headingTextWeightClass, hideSelectedOptions: hideSelectedOptions, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputTextSize: inputTextSizeClass || selectAppearanceItem.inputTextSize, instanceId: instanceId, 
         // @ts-expect-error
-        loadingMessage: getLoadingMessage, menuAfter: menuAfter, menuBefore: menuBefore, menuItemSize: menuItemSize, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass, noOptionBorderType: optionBorderTypeClass, noOptionsFill: optionFillClass, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText || selectAppearanceItem.noOptionsText, openMenuOnClick: openMenuOnClick, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, options: options, optionSelected: optionSelected, optionShape: optionShapeClass, placeholder: placeholder || selectAppearanceItem.placeholder, placeholderTextColor: placeholderTextColor || selectAppearanceItem.placeholderTextColor, placeholderTextSize: placeholderTextSize || selectAppearanceItem.placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, components: {
+        loadingMessage: getLoadingMessage, menuAfter: menuAfter, menuBefore: menuBefore, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass, noOptionBorderType: optionBorderTypeClass, noOptionsFill: optionFillClass, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText || selectAppearanceItem.noOptionsText, openMenuOnClick: openMenuOnClick, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, options: options, optionSelected: optionSelected, optionShape: optionShapeClass, placeholder: placeholder || selectAppearanceItem.placeholder, placeholderTextColor: placeholderTextColor || selectAppearanceItem.placeholderTextColor, placeholderTextSize: placeholderTextSize || selectAppearanceItem.placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, components: {
             ClearIndicator: SelectClearIndicator,
             Control: SelectControl,
             DropdownIndicator: SelectDropdownIndicator,

package/dist/components/SiteMenu.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useSiteMenuContext } from '../context/UIContext.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-BanAVsve.js';
+import { I as Icon } from '../Icon-DD_Vyrw0.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
@@ -15,7 +15,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-BSquFKSX.js';
+import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import '../Tooltip-DJufHBiQ.js';
 import '../Title-BfSFPJtJ.js';

package/dist/components/Tab.js

@@ -5,7 +5,7 @@ import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { B as Badge } from '../Badge-CrhdvxY6.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { L as Link } from '../Link-BSquFKSX.js';
+import { L as Link } from '../Link-CeQuavin.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -25,7 +25,7 @@ var tabConfig = {
     },
 };
 function Tab(props) {
-    var children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, className = props.className, dataTour = props.dataTour, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextAlign = props.labelTextAlign, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, reset = props.reset, set = props.set, target = props.target, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, className = props.className, dataTour = props.dataTour, _d = props.dividerDirection, dividerDirection = _d === void 0 ? 'horizontal' : _d, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextAlign = props.labelTextAlign, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, reset = props.reset, set = props.set, target = props.target, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
     var alignDirectionClass = useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -98,14 +98,9 @@ function Tab(props) {
                                     ? dividerFillDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillDisabled)
                                     : dividerFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFill), fillHover: isHover && (dividerFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillHover)), direction: dividerDirection, fillActive: isActive && (dividerFillActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillActive)), fillActiveHover: dividerFillActiveHover, size: dividerSize })] })), after] }) }) }));
 }
-Tab.defaultProps = {
-    direction: 'horizontal',
-    LinkComponent: 'a',
-    size: 'normal',
-};
 
 function TabGroup(props) {
-    var id = props.id, dataTour = props.dataTour, children = props.children, className = props.className, horizontalScroll = props.horizontalScroll, set = props.set, style = props.style;
+    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, set = props.set, style = props.style;
     var contentAlignClass = useDeviceTargetClass(props, {
         prefix: 'group_content-align_',
         propsKey: 'contentAlign',
@@ -148,7 +143,7 @@ function TabGroup(props) {
     });
     // @ts-expect-error
     var _a = useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
-    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass), id: id, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass), "data-tour": dataTour, id: id, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 }
 
 export { Tab, TabGroup, tabConfig };

package/dist/css/mixins/mixin_typography.css

@@ -1,70 +1,153 @@
-@define-mixin h1-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
+@define-mixin h1-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
   @mixin font $weight, var(--typography-h1-min), var(--typography-h1-max), $minLetterSpacing,
     var(--typography-h1-min-line-height), var(--typography-h1-max-line-height), $maxLetterSpacing,
     var(--typography-h1-font);
 }
 
-@define-mixin h2-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 26px, 32px, $minLetterSpacing, 46px, 58px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin h2-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h2-min), var(--typography-h2-max), $minLetterSpacing,
+    var(--typography-h2-min-line-height), var(--typography-h2-max-line-height), $maxLetterSpacing,
+    var(--typography-h2-font);
 }
 
-@define-mixin h3-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 18px, 24px, $minLetterSpacing, 32px, 40px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin h3-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h3-min), var(--typography-h3-max), $minLetterSpacing,
+    var(--typography-h3-min-line-height), var(--typography-h3-max-line-height), $maxLetterSpacing,
+    var(--typography-h3-font);
 }
 
-@define-mixin h4-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 16px, 18px, $minLetterSpacing, 24px, 30px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin h4-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h4-min), var(--typography-h4-max), $minLetterSpacing,
+    var(--typography-h4-min-line-height), var(--typography-h4-max-line-height), $maxLetterSpacing,
+    var(--typography-h4-font);
 }
 
-@define-mixin h5-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 14px, 16px, $minLetterSpacing, 18px, 26px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin h5-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h5-min), var(--typography-h5-max), $minLetterSpacing,
+    var(--typography-h5-min-line-height), var(--typography-h5-max-line-height), $maxLetterSpacing,
+    var(--typography-h5-font);
 }
 
-@define-mixin h6-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 12px, 18px, $minLetterSpacing, 16px, 24px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin h6-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h6-min), var(--typography-h6-max), $minLetterSpacing,
+    var(--typography-h6-min-line-height), var(--typography-h6-max-line-height), $maxLetterSpacing,
+    var(--typography-h6-font);
 }
 
-@define-mixin p-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 12px, 16px, $minLetterSpacing, 16px, 24px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin p-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-p-min), var(--typography-p-max), $minLetterSpacing,
+    var(--typography-p-min-line-height), var(--typography-p-max-line-height), $maxLetterSpacing,
+    var(--typography-p-font);
 }
 
-@define-mixin text-xxl-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 24px, 28px, $minLetterSpacing, 24px, 28px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin text-xxl-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xxl-min), var(--typography-text-xxl-max),
+    $minLetterSpacing, var(--typography-text-xxl-min-line-height),
+    var(--typography-text-xxl-max-line-height), $maxLetterSpacing, var(--typography-text-xxl-font);
 }
 
-@define-mixin text-xl-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 20px, 24px, $minLetterSpacing, 20px, 24px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin text-xl-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xl-min), var(--typography-text-xl-max),
+    $minLetterSpacing, var(--typography-text-xl-min-line-height),
+    var(--typography-text-xl-max-line-height), $maxLetterSpacing, var(--typography-text-xl-font);
 }
 
-@define-mixin text-l-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 18px, 24px, $minLetterSpacing, 18px, 24px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin text-l-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-l-min), var(--typography-text-l-max), $minLetterSpacing,
+    var(--typography-text-l-min-line-height), var(--typography-text-l-max-line-height),
+    $maxLetterSpacing, var(--typography-text-l-font);
 }
 
-@define-mixin text-m-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 16px, 18px, $minLetterSpacing, 16px, 20px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin text-m-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-m-min), var(--typography-text-m-max), $minLetterSpacing,
+    var(--typography-text-m-min-line-height), var(--typography-text-m-max-line-height),
+    $maxLetterSpacing, var(--typography-text-m-font);
 }
 
-@define-mixin text-s-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 14px, 18px, $minLetterSpacing, 14px, 18px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin text-s-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-s-min), var(--typography-text-s-max), $minLetterSpacing,
+    var(--typography-text-s-min-line-height), var(--typography-text-s-max-line-height),
+    $maxLetterSpacing, var(--typography-text-s-font);
 }
 
-@define-mixin text-xs-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 12px, 16px, $minLetterSpacing, 12px, 16px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin text-xs-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xs-min), var(--typography-text-xs-max),
+    $minLetterSpacing, var(--typography-text-xs-min-line-height),
+    var(--typography-text-xs-max-line-height), $maxLetterSpacing, var(--typography-text-xs-font);
 }
 
-@define-mixin text-xxs-new $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
-  @mixin font $weight, 10px, 14px, $minLetterSpacing, 10px, 14px, $maxLetterSpacing,
-    var(--font-primary);
+@define-mixin text-xxs-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xxs-min), var(--typography-text-xxs-max),
+    $minLetterSpacing, var(--typography-text-xxs-min-line-height),
+    var(--typography-text-xxs-max-line-height), $maxLetterSpacing, var(--typography-text-xxs-font);
+}
+
+@define-mixin email-h1 $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-h1), $letterSpacing,
+    var(--typography-email-h1-line-height), var(--typography-email-h1-font);
+}
+
+@define-mixin email-h2 $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-h2), $letterSpacing,
+    var(--typography-email-h2-line-height), var(--typography-email-h2-font);
+}
+
+@define-mixin email-h3 $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-h3), $letterSpacing,
+    var(--typography-email-h3-line-height), var(--typography-email-h3-font);
+}
+
+@define-mixin email-h4 $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-h4), $letterSpacing,
+    var(--typography-email-h4-line-height), var(--typography-email-h4-font);
+}
+
+@define-mixin email-h5 $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-h5), $letterSpacing,
+    var(--typography-email-h5-line-height), var(--typography-email-h5-font);
+}
+
+@define-mixin email-h6 $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-h6), $letterSpacing,
+    var(--typography-email-h6-line-height), var(--typography-email-h6-font);
+}
+
+@define-mixin email-p $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-p), $letterSpacing,
+    var(--typography-email-p-line-height), var(--typography-email-p-font);
+}
+
+@define-mixin email-text-xxl $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-text-xxl), $letterSpacing,
+    var(--typography-email-text-xxl-line-height), var(--typography-email-text-xxl-font);
+}
+
+@define-mixin email-text-xl $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-text-xl), $letterSpacing,
+    var(--typography-email-text-xl-line-height), var(--typography-email-text-xl-font);
+}
+
+@define-mixin email-text-l $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-text-l), $letterSpacing,
+    var(--typography-email-text-l-line-height), var(--typography-email-text-l-font);
+}
+
+@define-mixin email-text-m $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-text-m), $letterSpacing,
+    var(--typography-email-text-m-line-height), var(--typography-email-text-m-font);
+}
+
+@define-mixin email-text-s $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-text-s), $letterSpacing,
+    var(--typography-email-text-s-line-height), var(--typography-email-text-s-font);
+}
+
+@define-mixin email-text-xs $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typographyemail-text-xs), $letterSpacing,
+    var(--typographyemail-text-xs-line-height), var(--typographyemail-text-xs-font);
+}
+
+@define-mixin email-text-xxs $weight: normal {
+  @mixin font-fixed $weight, $weight, var(--typography-email-text-xxs), $letterSpacing,
+    var(--typography-email-text-xxs-line-height), var(--typography-email-text-xxs-font);
 }

package/dist/css/mixins/mixin_utils.css

@@ -1,4 +1,5 @@
-@define-mixin font $fontWeight, $minFontSize, $minLineHeight, $minLetterSpacing, $maxFontSize, $maxLineHeight, $maxLetterSpacing, $fontFamily {
+@define-mixin font $fontWeight, $minFontSize, $minLineHeight, $minLetterSpacing, $maxFontSize,
+  $maxLineHeight, $maxLetterSpacing, $fontFamily {
   font-size: responsive $minFontSize $maxFontSize;
   font-range: var(--min-max);
   font-weight: $fontWeight;
@@ -14,6 +15,13 @@
   }
 }
 
+@define-mixin font-fixed $weight, $size, $line, $family {
+  font-size: $size;
+  font-weight: $weight;
+  font-family: $family;
+  line-height: $line;
+}
+
 @define-mixin word-wrap {
   overflow-wrap: break-word;
   word-wrap: break-word;

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

@@ -1,8 +1,3 @@
 import type { iAccordionProps } from './Accordion.interface';
 declare function Accordion(props: iAccordionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Accordion {
-    var defaultProps: {
-        initial: never[];
-    };
-}
 export { Accordion };

package/dist/types/components/Accordion/AccordionItem.d.ts

@@ -1,8 +1,3 @@
 import type { iAccordionItemProps } from './Accordion.interface';
 declare function AccordionItem(props: iAccordionItemProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AccordionItem {
-    var defaultProps: {
-        iconFill: string;
-    };
-}
 export { AccordionItem };

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

@@ -1,8 +1,3 @@
 import { IFlexProps } from './Flex.interface';
 declare function Flex(props: IFlexProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Flex {
-    var defaultProps: {
-        tag: string;
-    };
-}
 export { Flex };

package/dist/types/components/Flex/FlexItem.d.ts

@@ -1,8 +1,3 @@
 import { IFlexItemProps } from './Flex.interface';
 declare function FlexItem(props: IFlexItemProps): import("react/jsx-runtime").JSX.Element;
-declare namespace FlexItem {
-    var defaultProps: {
-        tag: string;
-    };
-}
 export { FlexItem };

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

@@ -2,10 +2,5 @@ import React from 'react';
 import { ILinkConfig, ILinkProps, ILinkWrapperProps } from './Link.interface';
 declare const linkConfig: ILinkConfig;
 declare function Link(props: ILinkProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Link {
-    var defaultProps: {
-        underline: string;
-    };
-}
 declare function LinkWrapper(props: ILinkWrapperProps): import("react/jsx-runtime").JSX.Element | (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>)[];
 export { Link, linkConfig, LinkWrapper };

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

@@ -71,6 +71,7 @@ interface iSelectPropsCustom<Option> {
     loadingIndicator?: React.ReactNode;
     menuAfter?: React.ReactNode;
     menuBefore?: React.ReactNode;
+    menuIsOpen?: boolean;
     menuItemSize?: string;
     multipleItemFill?: tFillProps;
     multipleItemFillHover?: tFillHoverProps;

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

@@ -1,11 +1,4 @@
 import { iTabConfig, iTabProps } from './Tab.interface';
 declare const tabConfig: iTabConfig;
 declare function Tab(props: iTabProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Tab {
-    var defaultProps: {
-        direction: string;
-        LinkComponent: string;
-        size: string;
-    };
-}
 export { Tab, tabConfig };

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

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import type { tAlignDirectionProps, tAlignProps, tDirectionProps, tFillHoverProps, tFillProps, tJustifyContentProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorActiveProps, tTextColorHoverProps, tTextColorProps, tTextGradientProps, tTextSizeProps, tTextStyleProps, tTextWeightProps, tTextWrapProps, tWidthProps } from '../../types';
+import type { borderTypePropsType, tAlignDirectionProps, tAlignProps, tBorderColorProps, tBorderWidthProps, tDirectionProps, tFillHoverProps, tFillProps, tJustifyContentProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorActiveProps, tTextColorHoverProps, tTextColorProps, tTextGradientProps, tTextSizeProps, tTextStyleProps, tTextWeightProps, tTextWrapProps, tWidthProps, wrapPropsType } from '../../types';
 import type { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 interface iTabThemeColor {
     align?: tAlignProps;
@@ -69,12 +69,21 @@ interface iTabProps extends iTabThemeColor, iStyleAttributes {
 }
 interface iTabGroupProps extends iStyleAttributes {
     id?: string;
+    align?: tAlignProps;
+    alignDirection?: tAlignDirectionProps;
+    borderColor?: tBorderColorProps;
+    borderType?: borderTypePropsType;
+    borderWidth?: tBorderWidthProps;
     children?: ReactNode;
     className?: string;
+    contentAlign?: tAlignProps;
     dataTour?: string;
-    direction?: string;
+    direction?: tDirectionProps;
+    fill?: tFillProps;
     horizontalScroll?: boolean;
     style?: CSSProperties;
+    width?: tWidthProps;
+    wrap?: wrapPropsType;
     set?: string;
 }
 export type { iTabThemeColor, tTabAppearance, iTabConfig, iTabProps, iTabGroupProps };

package/dist/types/types/componentProps/appearanceKeys.d.ts

@@ -1 +1 @@
-export type tAppearanceKeysDefault = 'any' | 'dev' | 'surfacePrimary' | 'surfaceSecondary' | 'surfaceTertiary' | 'surfaceQuaternary' | 'surfaceDisabled' | 'gradientPrimary' | 'accent' | 'primary' | 'secondary' | 'disabled' | 'success' | 'warning' | 'error' | 'fail' | 'accentSecondary' | 'xs' | 's' | 'm' | 'l' | 'xl';
+export type tAppearanceKeysDefault = 'accent' | 'accentSecondary' | 'any' | 'dev' | 'disabled' | 'error' | 'fail' | 'gradientPrimary' | 'l' | 'm' | 'primary' | 's' | 'secondary' | 'success' | 'surface' | 'surfaceDisabled' | 'surfacePrimary' | 'surfaceQuaternary' | 'surfaceSecondary' | 'surfaceTertiary' | 'warning' | 'xl' | 'xs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -97,7 +97,7 @@
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
     "prop-types": "^15.8.1",
-    "rc-slider": "^11.1.6",
+    "rc-slider": "^11.1.7",
     "react": "^18.3.1",
     "react-dadata": "^2.23.3",
     "react-date-range": "^2.0.1",
@@ -116,10 +116,10 @@
     "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.7",
-    "@babel/eslint-parser": "^7.25.7",
+    "@babel/core": "^7.25.8",
+    "@babel/eslint-parser": "^7.25.8",
     "@babel/eslint-plugin": "^7.25.7",
-    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-env": "^7.25.8",
     "@babel/preset-react": "^7.25.7",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
@@ -145,7 +145,7 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.11.1",
+    "eslint": "9.12.0",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "npm": "^10.9.0",
@@ -167,7 +167,7 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^13.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^10.0.5",
+    "postcss-preset-env": "^10.0.7",
     "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
@@ -176,9 +176,9 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-preserve-directives": "^1.1.1",
+    "rollup-preserve-directives": "^1.1.2",
     "semantic-release": "^24.1.2",
     "stylelint": "^16.9.0",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   }
 }