@itcase/ui 1.8.122 → 1.8.124

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

@@ -1,84 +1,57 @@
 'use strict';
 
-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 '';
     }
@@ -111,7 +84,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/cjs/hooks/useActiveClasses/useActiveClasses.interface.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var suffix = [
+const suffix = [
     'Button',
     'Checkbox',
     'Radio',

package/dist/cjs/hooks/useActiveClasses/useActiveClasses.js

@@ -3,61 +3,57 @@
 var clsx = require('clsx');
 var useActiveClasses_helpers = require('./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(useActiveClasses_helpers.CLASS_RULES).forEach(function (_a) {
-        var rulesName = _a[0], rules = _a[1];
-        var kebabRuleName = useActiveClasses_helpers.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(useActiveClasses_helpers.CLASS_RULES).forEach(([rulesName, rules]) => {
+        const kebabRuleName = useActiveClasses_helpers.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 = useActiveClasses_helpers.formatState(key);
-            rootClassesArray.push("".concat(kebabRuleName).concat(stateName, "_").concat(value));
+            const stateName = useActiveClasses_helpers.formatState(key);
+            rootClassesArray.push(`${kebabRuleName}${stateName}_${value}`);
         });
     });
-    var rootClasses = clsx(rootClassesArray);
-    var suffixClasses = suffixes.reduce(function (acc, suffix) {
-        var classes = [];
-        Object.entries(useActiveClasses_helpers.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(useActiveClasses_helpers.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 = useActiveClasses_helpers.formatState(propKey);
-                var kebabName = useActiveClasses_helpers.toKebabCase(rulesName);
-                classes.push("".concat(kebabName).concat(state, "_").concat(value));
+                const state = useActiveClasses_helpers.formatState(propKey);
+                const kebabName = useActiveClasses_helpers.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/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -1,30 +1,28 @@
 'use strict';
 
-var tslib_es6 = require('../../../tslib.es6_cjs_CCZ3TN_7.js');
 var React = require('react');
 
-var useAppearanceConfig = function (appearance, componentConfig, isDisabled) {
-    var appearanceConfig = React.useMemo(function () {
-        var _a, _b, _c, _d, _e, _f;
+const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
+    const appearanceConfig = React.useMemo(() => {
         if (appearance) {
-            var appearanceProps = appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-                var _a;
-                return (tslib_es6.__assign(tslib_es6.__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/cjs/hooks/useAppearanceConfig.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var useAppearanceConfig = require('./useAppearanceConfig/useAppearanceConfig.js');
-require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react');
 
 

package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var tslib_es6 = require('../../../tslib.es6_cjs_CCZ3TN_7.js');
 var React = require('react');
 var camelCase = require('lodash/camelCase');
 var castArray = require('lodash/castArray');
@@ -50,17 +49,17 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
      *     - titleTextSizeDesktop
      *   ---------
      **/
-    var deviceCurrentMainType = UIContext.useUserDeviceContext().deviceCurrentMainType;
-    var devicePropsGenerator = React.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 } = UIContext.useUserDeviceContext();
+    const devicePropsGenerator = React.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
@@ -72,12 +71,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.default.map(function (attr) {
-                    return index_helpers.getStyleAttributeKey(attr);
-                });
+            getClassName(propKey, params) {
+                const { prefix = '', replace = [/([A-Z])/g, '-$1'] } = params || {};
+                const targetClassValue = this.getProp(String(propKey));
+                const styleAttributeKeys = styleAttributes.default.map((attr) => index_helpers.getStyleAttributeKey(attr));
                 if (styleAttributeKeys.includes(String(propKey)) &&
                     (typeof targetClassValue === 'number' ||
                         (typeof targetClassValue === 'string' &&
@@ -85,36 +82,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);
                         }
@@ -123,7 +116,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
                     }
                     // Return object property. Original "get".
                     // @ts-expect-error
-                    return Reflect.get.apply(Reflect, tslib_es6.__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/cjs/hooks/useDevicePropsGenerator.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var useDevicePropsGenerator = require('./useDevicePropsGenerator/useDevicePropsGenerator.js');
-require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');

package/dist/cjs/hooks/useDeviceTargetClass.js

@@ -4,7 +4,6 @@ var React = require('react');
 var camelCase = require('lodash/camelCase');
 var castArray = require('lodash/castArray');
 var UIContext = require('../context/UIContext.js');
-require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('./useMediaQueries/useMediaQueries.js');
 require('react-responsive');

package/dist/cjs/hooks/useStyles/styleAttributes.js

@@ -37,7 +37,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/cjs/hooks/useStyles/useStyles.js

@@ -8,7 +8,6 @@ require('../../context/Notifications.js');
 var UIContext = require('../../context/UIContext.js');
 var index_helpers = require('../../hooks.js');
 var styleAttributes = require('./styleAttributes.js');
-require('../../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('uuid');
 require('@itcase/common');

package/dist/cjs/hooks/useStyles.js

@@ -6,7 +6,6 @@ require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
-require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('uuid');
 require('@itcase/common');

package/dist/cjs/hooks/useViewportFix.js

@@ -3,12 +3,12 @@
 var React = require('react');
 
 function useViewportFix() {
-    React.useEffect(function () {
+    React.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
@@ -28,13 +28,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/cjs/hooks.js

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

package/dist/cjs/utils/setViewportProperty.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var setViewportProperty = function () {
-    var vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty('--vh', "".concat(vh, "px"));
+const setViewportProperty = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
 };
 
 exports.setViewportProperty = setViewportProperty;

package/dist/components/Accordion.js

@@ -1,4 +1,3 @@
-import { _ as __assign, a as __spreadArray } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useCallback, useState, useMemo } from 'react';
 import clsx from 'clsx';
@@ -6,9 +5,9 @@ import castArray from 'lodash/castArray';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { B as Badge, I as Icon } from '../Icon_es_BrwLifge.js';
-import { D as Divider } from '../Divider_es_CCLBFIx6.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
+import { B as Badge, I as Icon } from '../Icon_es_D5eiycFI.js';
+import { D as Divider } from '../Divider_es_BiYozVBS.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import { icons16 } from '@itcase/icons/default';
 import 'lodash/camelCase';
 import 'lodash/upperFirst';
@@ -25,9 +24,9 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
+import '../Link_es_P2b6ya7P.js';
 
-var accordionAppearanceSize = {
+const accordionAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         titleTextSize: 'h3',
@@ -78,7 +77,7 @@ var accordionAppearanceSize = {
     },
 };
 
-var accordionAppearanceStyle = {
+const accordionAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -92,7 +91,7 @@ var accordionAppearanceStyle = {
     },
 };
 
-var accordionAppearanceSurface = {
+const accordionAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
@@ -128,19 +127,23 @@ var accordionAppearanceSurface = {
     },
 };
 
-var accordionAppearance = __assign(__assign(__assign({}, accordionAppearanceSize), accordionAppearanceStyle), accordionAppearanceSurface);
+const accordionAppearance = {
+    ...accordionAppearanceSize,
+    ...accordionAppearanceStyle,
+    ...accordionAppearanceSurface,
+};
 
-var accordionItemConfig = {
+const accordionItemConfig = {
     appearance: accordionAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         accordionItemConfig.appearance = appearanceConfig;
     },
 };
 function AccordionItem(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, title = props.title, afterContent = props.afterContent, beforeContent = props.beforeContent, content = props.content, isExpanded = props.isExpanded, onClick = props.onClick, children = props.children;
-    var onClickTitle = useCallback(function () {
+    const { id, className, appearance, title, afterContent, beforeContent, content, isExpanded, onClick, children, } = props;
+    const onClickTitle = useCallback(() => {
         // "!isExpanded" - is next state of expanded
-        var thisItemData = {
+        const thisItemData = {
             id: id,
             title: title,
             content: content,
@@ -148,27 +151,27 @@ function AccordionItem(props) {
         };
         onClick && onClick(thisItemData);
     }, [id, title, content, isExpanded, onClick]);
-    var appearanceConfig = useAppearanceConfig(appearance, accordionItemConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleWidthClass = propsGenerator.titleWidthClass, borderColorClass = propsGenerator.borderColorClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, contentTextColor = propsGenerator.contentTextColor, contentTextSize = propsGenerator.contentTextSize, contentTextWeight = propsGenerator.contentTextWeight, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, showDivider = propsGenerator.showDivider, sizeClass = propsGenerator.sizeClass, zeroGap = propsGenerator.zeroGap, zeroPadding = propsGenerator.zeroPadding;
-    var styles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && "border-color_".concat(borderColorClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), sizeClass && "accordion-item_size_".concat(sizeClass), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxs("div", { className: clsx('accordion-item__header', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), titleWidthClass && "width_".concat(titleWidthClass), onClickTitle && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsx(Badge, { className: "accordion-item__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsx("div", { className: clsx('accordion-item__content-inner', fillClass && "fill_".concat(fillClass)), children: jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
+    const appearanceConfig = useAppearanceConfig(appearance, accordionItemConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, titleBorderColorClass, titleFillClass, titleFillHoverClass, titleTextColor, titleTextSize, titleTextWeight, titleWidthClass, borderColorClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, contentTextColor, contentTextSize, contentTextWeight, dividerDirection, dividerFill, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, shapeStrengthClass, showDivider, sizeClass, zeroGap, zeroPadding, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `accordion-item_size_${sizeClass}`, isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxs("div", { className: clsx('accordion-item__header', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass && `border-color_${titleBorderColorClass}`, titleFillClass && `fill_${titleFillClass}`, titleFillHoverClass && `fill_hover_${titleFillHoverClass}`, titleWidthClass && `width_${titleWidthClass}`, onClickTitle && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsx(Badge, { className: "accordion-item__badge", appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsx("div", { className: clsx('accordion-item__content-inner', fillClass && `fill_${fillClass}`), children: jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
 }
 
 function Accordion(props) {
-    var className = props.className, appearance = props.appearance, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, isMultiple = props.isMultiple, onClickItem = props.onClickItem, children = props.children;
-    var _b = useState(function () { return castArray(initial); }), expandedItems = _b[0], setExpandedItems = _b[1];
-    var onClickAccordionItem = useCallback(function (targetItem) {
-        setExpandedItems(function (prevState) {
-            var isExpanded = prevState.find(function (id) { return id === targetItem.id; });
+    const { className, appearance, initial = [], items, isMultiple, onClickItem, children, } = props;
+    const [expandedItems, setExpandedItems] = useState(() => castArray(initial));
+    const onClickAccordionItem = useCallback((targetItem) => {
+        setExpandedItems((prevState) => {
+            const isExpanded = prevState.find((id) => id === targetItem.id);
             if (isMultiple) {
                 if (isExpanded) {
                     // ... without target id
-                    return prevState.filter(function (id) { return id !== targetItem.id; });
+                    return prevState.filter((id) => id !== targetItem.id);
                 }
                 else {
                     // ... with target id
-                    return __spreadArray(__spreadArray([], prevState, true), [targetItem.id], false);
+                    return [...prevState, targetItem.id];
                 }
             }
             else {
@@ -182,15 +185,15 @@ function Accordion(props) {
         });
         onClickItem && onClickItem(targetItem);
     }, [isMultiple, onClickItem]);
-    var accordionItemsList = useMemo(function () {
+    const accordionItemsList = useMemo(() => {
         if (items) {
-            return items.map(function (item, i) { return (jsx(AccordionItem, { id: item.id, appearance: appearance, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
+            return items.map((item, i) => (jsx(AccordionItem, { id: item.id, appearance: appearance, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, `accordionItem_${item.id || i + 1}`)));
         }
         if (children) {
             // @ts-ignore
-            return React.Children.toArray(children).map(function (child) {
+            return React.Children.toArray(children).map((child) => {
                 if (React.isValidElement(child)) {
-                    var childID = child.props.id || child.key;
+                    const childID = child.props.id || child.key;
                     return React.cloneElement(child, {
                         id: childID,
                         isExpanded: expandedItems.includes(childID),
@@ -202,10 +205,10 @@ function Accordion(props) {
         }
         return [];
     }, [children, items, expandedItems, onClickAccordionItem]);
-    var propsGenerator = useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, widthClass = propsGenerator.widthClass;
-    var accordionStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'accordion', borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), widthClass && "width_".concat(widthClass)), style: accordionStyles, children: accordionItemsList }));
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, borderColorClass, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
+    const { styles: accordionStyles } = useStyles(props);
+    return (jsx("div", { className: clsx(className, 'accordion', borderColorClass && `border-color_${borderColorClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`), style: accordionStyles, children: accordionItemsList }));
 }
 
 export { Accordion, AccordionItem, accordionAppearance, accordionItemConfig };