@itcase/ui 1.8.122 → 1.8.124

package/dist/css/components/InputPassword/InputPassword.css

@@ -1,56 +1,38 @@
 .input-password {
+  width: 100%;
   position: relative;
   &__icon {
     position: absolute;
-    right: 8px;
     top: 50%;
+    right: 8px;
     transform: translate(0, -50%);
   }
   &__input {
-    border: none;
-    appearance: none;
+    width: 100%;
+    min-width: unset;
     padding: 0;
     margin: 0;
-    min-width: unset;
+    border: none;
+    border: solid 1px none;
+    position: relative;
     box-shadow: none;
+    appearance: none;
     outline: 0;
-    position: relative;
     caret-color: var(--input-password-caret-color);
+    transition: var(--input-password-transition);
     &:focus {
       outline: none;
     }
-    &:hover {
-      border: solid 1px var(--input-password-state-hover-border);
-      background: var(--input-password-state-hover-background);
-    }
-    &&_state {
-      &_success {
-        border: solid 1px var(--input-password-state-success-border);
-        background: var(--input-password-state-success-background);
-      }
-      &_error {
-        border: solid 1px var(--input-password-state-error-border);
-        background: var(--input-password-state-error-background);
-      }
-      &_focus {
-        border: solid 1px var(--input-password-state-focus-border);
-        background: var(--input-password-state-focus-background);
-      }
-    }
   }
 }
 .input-password {
   &__input {
     &_shape {
-      &_rounded {
-        border-radius: var(--input-password-shape-rounded);
-        position: relative;
-      }
       &_underline {
-        position: relative;
         border-left: none !important;
-        border-right: none !important;
         border-top: none !important;
+        border-right: none !important;
+        position: relative;
       }
     }
   }
@@ -58,26 +40,36 @@
 .input-password {
   &__input {
     &&_size {
-      @each $size in xxl, xl, l, m, s, xs, xxs, normal, tiny, compact, large {
+      @each $size in xl, l, m, s {
         &_$(size) {
-          padding: var(--input-password-size-$(size)-padding);
+          min-height: var(--input-password-$(size)-min-height);
+          padding: var(--input-password-$(size)-padding);
+        }
+      }
+    }
+  }
+}
+.input-password {
+  &&_state {
+    @each $state in error, success, require, disabled, focus {
+      &_$(state) {
+        & .input {
+          background: var(--input-state-$(state)-background);
+          border: solid 1px var(--input-state-$(state)-border);
         }
       }
     }
   }
 }
 :root {
-  --input-password-size-xs-padding: 4px 8px;
-  --input-password-size-s-padding: 5px 10px;
-  --input-password-size-m-padding: 7px 12px;
-  --input-password-size-l-padding: 9px 15px;
-  --input-password-size-xl-padding: 15px 20px;
-  --input-password-size-xxl-padding: 18px 25px;
-
-  --input-password-size-tiny-padding: 4px 8px;
-  --input-password-size-compact-padding: 5px 10px;
-  --input-password-size-normal-padding: 7px 12px;
-  --input-password-size-large-padding: 9px 15px;
+  --input-password-xl-min-height: 56px;
+  --input-password-xl-padding: 12px 16px;
+  --input-password-l-min-height: 48px;
+  --input-password-l-padding: 12px 12px;
+  --input-password-m-min-height: 40px;
+  --input-password-m-padding: 8px 12px;
+  --input-password-s-min-height: 28px;
+  --input-password-s-padding: 2px 6px;
 
   --input-password-state-focus-border: var(--color-active-border-primary);
   --input-password-state-focus-background: none;
@@ -88,5 +80,4 @@
   --input-password-state-hover-border: var(--color-surface-border-quaternary);
   --input-password-state-hover-background: none;
   --input-password-caret-color: var(--color-accent-fill-primary);
-  --input-password-shape-rounded: 0;
 }

package/dist/css/components/Tile/Tile.css

@@ -68,15 +68,15 @@
   }
 }
 :root {
-  --tile-size-xxl-min-width: 320px;
+  --tile-size-xxl-min-width: 240px;
   --tile-size-xxl-padding: 24px;
   --tile-size-xxl-gap: 24px;
 
-  --tile-size-xl-min-width: 320px;
+  --tile-size-xl-min-width: 240px;
   --tile-size-xl-padding: 24px;
   --tile-size-xl-gap: 24px;
 
-  --tile-size-l-min-width: 320px;
+  --tile-size-l-min-width: 240px;
   --tile-size-l-padding: 24px;
   --tile-size-l-gap: 24px;
 

package/dist/hoc/urlWithAssetPrefix.js

@@ -1,10 +1,9 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import React, { useContext } from 'react';
 import { formatURL } from '@itcase/common';
 import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix.js';
 
-var urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
+const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
 /**
  * HOC, который добавляет assetPrefix к URL-пропсам.
  *
@@ -22,31 +21,30 @@ var urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
  * const B = (props: { id: string }) => <div />;
  * urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
  */
-var urlWithAssetPrefix = function (WrappedComponent) {
-    var HOC = React.forwardRef(function HOC(props, ref) {
-        var _a = useContext(UrlAssetPrefixContext), assetPrefix = _a.assetPrefix, ignorePathsList = _a.ignorePathsList;
-        var overrideProps = urlPropsList.reduce(function (resultProps, propKey) {
-            var url = props[propKey];
+const urlWithAssetPrefix = (WrappedComponent, ..._error) => {
+    const HOC = React.forwardRef(function HOC(props, ref) {
+        const { assetPrefix, ignorePathsList } = useContext(UrlAssetPrefixContext);
+        const overrideProps = urlPropsList.reduce((resultProps, propKey) => {
+            let url = props[propKey];
             if (url && typeof url === 'string') {
                 if (assetPrefix) {
-                    var isNeedAssetPrefix = checkIsNeedAssetPrefix(url, assetPrefix, ignorePathsList);
+                    const isNeedAssetPrefix = checkIsNeedAssetPrefix(url, assetPrefix, ignorePathsList);
                     if (isNeedAssetPrefix) {
-                        var prefixPath = formatURL(assetPrefix).slice(0, -1);
-                        url = "".concat(prefixPath).concat(url);
+                        const prefixPath = formatURL(assetPrefix).slice(0, -1);
+                        url = `${prefixPath}${url}`;
                     }
                 }
                 resultProps[propKey] = url;
             }
             return resultProps;
         }, {});
-        return jsx(WrappedComponent, __assign({}, props, overrideProps, { ref: ref }));
+        return jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
     });
     return HOC;
 };
-var checkIsNeedAssetPrefix = function (url, assetPrefix, ignorePathsList) {
-    if (ignorePathsList === void 0) { ignorePathsList = []; }
+const checkIsNeedAssetPrefix = (url, assetPrefix, ignorePathsList = []) => {
     // Ignore prefix if:
-    var isPrefixIgnore = 
+    const isPrefixIgnore = 
     // Url is absolute
     url.startsWith('http:') ||
         url.startsWith('https:') ||
@@ -58,8 +56,7 @@ var checkIsNeedAssetPrefix = function (url, assetPrefix, ignorePathsList) {
         return false;
     }
     // And check special paths for ignore prefix
-    for (var _i = 0, ignorePathsList_1 = ignorePathsList; _i < ignorePathsList_1.length; _i++) {
-        var urlPath = ignorePathsList_1[_i];
+    for (const urlPath of ignorePathsList) {
         if (urlPath instanceof RegExp) {
             if (urlPath.test(url)) {
                 return false;

package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js

@@ -1,82 +1,55 @@
-var CLASS_RULES = {
+const CLASS_RULES = {
     fill: [
         {
             key: 'fillClass',
-            stateFn: function (_a) {
-                var isDisabled = _a.isDisabled, isActive = _a.isActive;
-                return !isActive && !isDisabled;
-            },
+            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
         },
         {
             key: 'fillHoverClass',
-            stateFn: function (_a) {
-                var isDisabled = _a.isDisabled, isActive = _a.isActive;
-                return !isActive && !isDisabled;
-            },
+            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
         },
         {
             key: 'fillActiveClass',
-            stateFn: function (_a) {
-                var isDisabled = _a.isDisabled, isActive = _a.isActive;
-                return Boolean(isActive) && !isDisabled;
-            },
+            stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
         },
         {
             key: 'fillActiveHoverClass',
-            stateFn: function (_a) {
-                var isDisabled = _a.isDisabled, isActive = _a.isActive;
-                return Boolean(isActive) && !isDisabled;
-            },
+            stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
         },
         {
             key: 'fillDisabledClass',
-            stateFn: function (_a) {
-                var isDisabled = _a.isDisabled, isActive = _a.isActive;
-                return !isActive && Boolean(isDisabled);
-            },
+            stateFn: ({ isDisabled, isActive }) => !isActive && Boolean(isDisabled),
         },
     ],
     borderColor: [
         {
             key: 'borderColorClass',
-            stateFn: function (_a) {
-                var isDisabled = _a.isDisabled, isActive = _a.isActive;
-                return !isActive && !isDisabled;
-            },
+            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
         },
         {
             key: 'borderColorHoverClass',
-            stateFn: function (_a) {
-                var isDisabled = _a.isDisabled, isActive = _a.isActive;
-                return !isActive && !isDisabled;
-            },
+            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
         },
         {
             key: 'borderColorActiveClass',
-            stateFn: function (_a) {
-                var isDisabled = _a.isDisabled, isActive = _a.isActive;
-                return Boolean(isActive) && !isDisabled;
-            },
+            stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
         },
     ],
     textColor: [
         {
             key: 'textColorClass',
-            stateFn: function (_a) {
-                var isDisabled = _a.isDisabled, isActive = _a.isActive;
-                return !isActive && !isDisabled;
-            },
+            stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
         },
     ],
 };
-var formatState = function (key) {
+const formatState = (key) => {
     // Try to find one of the state tokens in the input key:
     // - matches "ActiveHover", "Active", "Hover" or "Disabled"
     // - case-insensitive because of the /i flag
     // Examples of matches:
     //  "fillActiveHoverColor"  -> match[0] === "ActiveHover"
     //  "borderDisabled"        -> match[0] === "Disabled"
-    var stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
+    const stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
     if (!stateMatch) {
         return '';
     }
@@ -109,7 +82,7 @@ var formatState = function (key) {
 // Examples:
 //  "myTestString"           -> "my-test-string"
 //  "borderColorActiveHover" -> "border-color-active-hover"
-var toKebabCase = function (str) {
+const toKebabCase = (str) => {
     return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 };
 

package/dist/hooks/useActiveClasses/useActiveClasses.interface.js

@@ -1,4 +1,4 @@
-var suffix = [
+const suffix = [
     'Button',
     'Checkbox',
     'Radio',

package/dist/hooks/useActiveClasses/useActiveClasses.js

@@ -1,61 +1,57 @@
 import clsx from 'clsx';
 import { CLASS_RULES, toKebabCase, formatState } from './useActiveClasses.helpers.js';
 
-var useActiveClasses = function (params) {
-    var isDisabled = params.isDisabled, propsGenerator = params.propsGenerator, _a = params.suffixes, suffixes = _a === void 0 ? [] : _a, isActive = params.isActive;
-    var rootClassesArray = [];
-    Object.entries(CLASS_RULES).forEach(function (_a) {
-        var rulesName = _a[0], rules = _a[1];
-        var kebabRuleName = toKebabCase(rulesName);
-        rules.forEach(function (_a) {
-            var key = _a.key, stateFn = _a.stateFn;
-            var value = propsGenerator[key];
+const useActiveClasses = (params) => {
+    const { isDisabled, propsGenerator, suffixes = [], isActive } = params;
+    const rootClassesArray = [];
+    Object.entries(CLASS_RULES).forEach(([rulesName, rules]) => {
+        const kebabRuleName = toKebabCase(rulesName);
+        rules.forEach(({ key, stateFn }) => {
+            const value = propsGenerator[key];
             if (!value) {
                 return;
             }
             if (stateFn) {
-                var active = stateFn({ isDisabled: isDisabled, isActive: isActive });
+                const active = stateFn({ isDisabled, isActive });
                 if (!active) {
                     return;
                 }
             }
-            var stateName = formatState(key);
-            rootClassesArray.push("".concat(kebabRuleName).concat(stateName, "_").concat(value));
+            const stateName = formatState(key);
+            rootClassesArray.push(`${kebabRuleName}${stateName}_${value}`);
         });
     });
-    var rootClasses = clsx(rootClassesArray);
-    var suffixClasses = suffixes.reduce(function (acc, suffix) {
-        var classes = [];
-        Object.entries(CLASS_RULES).forEach(function (_a) {
-            var rulesName = _a[0], rules = _a[1];
-            rules.forEach(function (_a) {
-                var key = _a.key, stateFn = _a.stateFn;
-                var withoutPrefixRulesName = key.replace(rulesName, '');
-                var propKey = rulesName + suffix + withoutPrefixRulesName;
-                var value = propsGenerator[propKey];
+    const rootClasses = clsx(rootClassesArray);
+    const suffixClasses = suffixes.reduce((acc, suffix) => {
+        const classes = [];
+        Object.entries(CLASS_RULES).forEach(([rulesName, rules]) => {
+            rules.forEach(({ key, stateFn }) => {
+                const withoutPrefixRulesName = key.replace(rulesName, '');
+                const propKey = rulesName + suffix + withoutPrefixRulesName;
+                const value = propsGenerator[propKey];
                 if (!value) {
                     return;
                 }
                 if (stateFn) {
-                    var active = stateFn({ isDisabled: isDisabled, isActive: isActive });
+                    const active = stateFn({ isDisabled, isActive });
                     if (!active) {
                         return;
                     }
                 }
-                var state = formatState(propKey);
-                var kebabName = toKebabCase(rulesName);
-                classes.push("".concat(kebabName).concat(state, "_").concat(value));
+                const state = formatState(propKey);
+                const kebabName = toKebabCase(rulesName);
+                classes.push(`${kebabName}${state}_${value}`);
             });
         });
-        var suffixKey = suffix === 'HTMLContent'
+        const suffixKey = suffix === 'HTMLContent'
             ? 'htmlContent'
             : (suffix[0].toLowerCase() + suffix.slice(1));
         acc[suffixKey] = clsx(classes);
         return acc;
     }, {});
     return {
-        rootClasses: rootClasses,
-        suffixClasses: suffixClasses,
+        rootClasses,
+        suffixClasses,
     };
 };
 

package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -1,28 +1,26 @@
-import { _ as __assign } from '../../tslib.es6_es_Bwu1Cn-t.js';
 import { useMemo } from 'react';
 
-var useAppearanceConfig = function (appearance, componentConfig, isDisabled) {
-    var appearanceConfig = useMemo(function () {
-        var _a, _b, _c, _d, _e, _f;
+const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
+    const appearanceConfig = useMemo(() => {
         if (appearance) {
-            var appearanceProps = appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-                var _a;
-                return (__assign(__assign({}, resultConfig), (_a = componentConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-            }, {});
+            const appearanceProps = appearance.split(' ').reduce((resultConfig, appearanceKey) => ({
+                ...resultConfig,
+                ...componentConfig.appearance?.[appearanceKey],
+            }), {});
             if (isDisabled &&
-                (((_a = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _a === void 0 ? void 0 : _a.disabled) ||
-                    ((_b = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _b === void 0 ? void 0 : _b.disabledPrimary))) {
-                Object.assign(appearanceProps, ((_c = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _c === void 0 ? void 0 : _c.disabled) ||
-                    ((_d = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _d === void 0 ? void 0 : _d.disabledPrimary));
+                (componentConfig?.appearance?.disabled ||
+                    componentConfig?.appearance?.disabledPrimary)) {
+                Object.assign(appearanceProps, componentConfig?.appearance?.disabled ||
+                    componentConfig?.appearance?.disabledPrimary);
             }
             return appearanceProps;
         }
         if (isDisabled) {
-            return (((_e = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _e === void 0 ? void 0 : _e.disabled) ||
-                ((_f = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _f === void 0 ? void 0 : _f.disabledPrimary));
+            return (componentConfig?.appearance?.disabled ||
+                componentConfig?.appearance?.disabledPrimary);
         }
         return {};
-    }, [appearance, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance, isDisabled]);
+    }, [appearance, componentConfig?.appearance, isDisabled]);
     return appearanceConfig;
 };
 

package/dist/hooks/useAppearanceConfig.js

@@ -1,3 +1,2 @@
 export { useAppearanceConfig } from './useAppearanceConfig/useAppearanceConfig.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -1,4 +1,3 @@
-import { a as __spreadArray } from '../../tslib.es6_es_Bwu1Cn-t.js';
 import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
 import castArray from 'lodash/castArray';
@@ -48,17 +47,17 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
      *     - titleTextSizeDesktop
      *   ---------
      **/
-    var deviceCurrentMainType = useUserDeviceContext().deviceCurrentMainType;
-    var devicePropsGenerator = useMemo(function () {
-        var propsGenerator = {
-            getProp: function (propKey) {
-                var propsForDeviceKey = "".concat(propKey).concat(upperFirst(deviceCurrentMainType));
-                var valueForDevice = componentProps[propsForDeviceKey];
-                var valueDefault = componentProps[propKey];
-                var appearanceForDevice = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig[propsForDeviceKey];
-                var appearanceDefault = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig[propKey];
+    const { deviceCurrentMainType } = useUserDeviceContext();
+    const devicePropsGenerator = useMemo(() => {
+        const propsGenerator = {
+            getProp(propKey) {
+                const propsForDeviceKey = `${propKey}${upperFirst(deviceCurrentMainType)}`;
+                const valueForDevice = componentProps[propsForDeviceKey];
+                const valueDefault = componentProps[propKey];
+                const appearanceForDevice = appearanceConfig?.[propsForDeviceKey];
+                const appearanceDefault = appearanceConfig?.[propKey];
                 // prettier-ignore
-                var targetPropsValue = (
+                const targetPropsValue = (
                 // Value for device from props is first priority
                 valueForDevice ||
                     // Value without device from props is second priority
@@ -70,12 +69,10 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
                 return targetPropsValue;
             },
             // eslint-disable-next-line perfectionist/sort-objects
-            getClassName: function (propKey, params) {
-                var _a = params || {}, _b = _a.prefix, prefix = _b === void 0 ? '' : _b, _c = _a.replace, replace = _c === void 0 ? [/([A-Z])/g, '-$1'] : _c;
-                var targetClassValue = this.getProp(String(propKey));
-                var styleAttributeKeys = styleAttributes.map(function (attr) {
-                    return getStyleAttributeKey(attr);
-                });
+            getClassName(propKey, params) {
+                const { prefix = '', replace = [/([A-Z])/g, '-$1'] } = params || {};
+                const targetClassValue = this.getProp(String(propKey));
+                const styleAttributeKeys = styleAttributes.map((attr) => getStyleAttributeKey(attr));
                 if (styleAttributeKeys.includes(String(propKey)) &&
                     (typeof targetClassValue === 'number' ||
                         (typeof targetClassValue === 'string' &&
@@ -83,36 +80,32 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
                     return '';
                 }
                 if (targetClassValue) {
-                    var cleanClassValue = String(targetClassValue);
+                    let cleanClassValue = String(targetClassValue);
                     if (!cleanClassValue.includes('.')) {
                         cleanClassValue = camelCase(cleanClassValue);
                     }
                     if (replace) {
-                        var replaceList = castArray(replace);
+                        const replaceList = castArray(replace);
                         cleanClassValue = cleanClassValue.replace(replaceList[0], 
                         // @ts-expect-error
                         replaceList[1] || '');
                     }
                     // prettier-ignore
-                    return "".concat(prefix).concat(cleanClassValue).toLowerCase();
+                    return `${prefix}${cleanClassValue}`.toLowerCase();
                 }
                 // If target key not exists in props and appearance config - return empty class
                 return '';
             },
         };
-        var generatorProxyHandler = {
-            get: function (target, propKey, receiver) {
-                var args = [];
-                for (var _i = 3; _i < arguments.length; _i++) {
-                    args[_i - 3] = arguments[_i];
-                }
+        const generatorProxyHandler = {
+            get(target, propKey, receiver, ...args) {
                 if (typeof propKey === 'string') {
                     // If object does not have the property being retrieved
                     if (!Reflect.has(target, propKey)) {
                         // And property ended on "Class" keyword
                         if (propKey.endsWith('Class')) {
                             // prettier-ignore
-                            var shortProp = propKey.substring(0, propKey.lastIndexOf('Class'));
+                            const shortProp = propKey.substring(0, propKey.lastIndexOf('Class'));
                             // Return prop from props for device as formatted class name
                             return target.getClassName(shortProp);
                         }
@@ -121,7 +114,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
                     }
                     // Return object property. Original "get".
                     // @ts-expect-error
-                    return Reflect.get.apply(Reflect, __spreadArray([target, propKey, receiver], args, false));
+                    return Reflect.get(target, propKey, receiver, ...args);
                 }
                 // In some cases, like in Chrome browser, sometime "prop" is not string.
                 // We return this object as is.

package/dist/hooks/useDevicePropsGenerator.js

@@ -1,5 +1,4 @@
 export { useDevicePropsGenerator } from './useDevicePropsGenerator/useDevicePropsGenerator.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/hooks/useDeviceTargetClass.js

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
 import castArray from 'lodash/castArray';
 import { useUserDeviceContext } from '../context/UIContext.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import './useMediaQueries/useMediaQueries.js';
 import 'react-responsive';

package/dist/hooks/useStyles/styleAttributes.js

@@ -33,7 +33,7 @@ var styleAttributes = [
 /**
  * Grid
  */
-'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows', 'gridColumn', 'gridColumnGap', 'gridRow', 'gridRowGap',
+'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows', 'gridColumn', 'gridColumnStart', 'gridColumnEnd', 'gridColumnGap', 'gridRow', 'gridRowStart', 'gridRowEnd', 'gridRowGap',
 /**
  * Filter
  */

package/dist/hooks/useStyles/useStyles.js

@@ -6,7 +6,6 @@ import '../../context/Notifications.js';
 import { useUserDeviceContext } from '../../context/UIContext.js';
 import { getStyleAttributeKey } from '../../hooks.js';
 import styleAttributes from './styleAttributes.js';
-import '../../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'uuid';
 import '@itcase/common';

package/dist/hooks/useStyles.js

@@ -4,7 +4,6 @@ import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'uuid';
 import '@itcase/common';

package/dist/hooks/useViewportFix.js

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 
 function useViewportFix() {
-    useEffect(function () {
+    useEffect(() => {
         // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-        var setViewportProperty = function () {
+        const setViewportProperty = () => {
             // "vh" unit is equal to 1% of the height of the initial containing block
             // https://www.w3.org/R/css-values-3/#viewport-relative-lengths
-            var vh = window.innerHeight * 0.01;
+            const vh = window.innerHeight * 0.01;
             /** NOTE:
              * In JavaScript, you can always get the value of the current viewport
              * by using the global variable window.innerHeight. This value takes
@@ -26,13 +26,13 @@ function useViewportFix() {
              * to assign as our viewport height unit value.
              * Then we politely asked JS to create the CSS variable "--vh" at the ":root":
              */
-            document.documentElement.style.setProperty('--vh', "".concat(vh, "px"));
+            document.documentElement.style.setProperty('--vh', `${vh}px`);
         };
         // Update the value of "--vh" after render
         setViewportProperty();
         // Update the value of "--vh" by listening to the window resize event
         window.addEventListener('resize', setViewportProperty);
-        return function () {
+        return () => {
             window.removeEventListener('resize', setViewportProperty);
         };
     }, []);

package/dist/hooks.js

@@ -1,4 +1,4 @@
-var getStyleAttributeKey = function (targetStyleAttribute) {
+const getStyleAttributeKey = (targetStyleAttribute) => {
     return Array.isArray(targetStyleAttribute)
         ? targetStyleAttribute[0]
         : targetStyleAttribute;