@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/molecules/GradientSetting/index.js

@@ -1,16 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 // Components
 import { ColorSetting, Select, SettingWrapper, SliderWithInputNumber, } from '@antscorp/antsomi-ui/es/components/molecules';
 // Utils
@@ -30,7 +20,7 @@ const DEFAULT_GRADIENTS = [
     { gradientColor: '#FFBD64', gradientColorLocation: 50 },
 ];
 export const GradientSetting = props => {
-    const { defaultValue, customColors, className, onChange, getCSSProperty } = props, rest = __rest(props, ["defaultValue", "customColors", "className", "onChange", "getCSSProperty"]);
+    const { defaultValue, customColors, className, onChange, getCSSProperty, ...rest } = props;
     const { gradientType: defaultGradientType, gradients: defaultGradients, linearAngle: defaultLinearAngle, radialPosition: defaultRadialPosition, } = defaultValue || {};
     // const { t } = useTranslation();
     const { t } = i18nInstance;
@@ -48,52 +38,43 @@ export const GradientSetting = props => {
                 : radialPosition !== 'center center'
                     ? `circle at ${radialPosition}`
                     : 'circle';
-            const gradientColor = gradients === null || gradients === void 0 ? void 0 : gradients.map(item => `${item.gradientColor} ${item.gradientColorLocation}%`).join(', ');
+            const gradientColor = gradients
+                ?.map(item => `${item.gradientColor} ${item.gradientColorLocation}%`)
+                .join(', ');
             const gradientConfig = `${gradientType}(${prefixGradient}, ${gradientColor})`;
             getCSSProperty(gradientConfig);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [JSON.stringify(gradients), gradientType, radialPosition, linearAngle]);
-    return (React.createElement(GradientSettingWrapper, Object.assign({ className: className || '' }, rest),
-        React.createElement(SettingWrapper, { className: "setting-container", label: t(translations.gradientStyle) },
-            React.createElement(Select, { options: Object.values(GRADIENT_TYPE), value: gradientType, onChange: value => setGradientType(value) })),
-        gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "setting-container", label: t(translations.angle), min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "setting-container", label: t(translations.position) },
-            React.createElement(Select, { options: Object.values(POSITION), value: radialPosition, onChange: value => setRadialPosition(value) }))),
-        Array.isArray(gradients) && gradients.length
-            ? gradients.map((gradient, index) => {
-                const { gradientColor, gradientColorLocation } = gradient;
-                return (React.createElement("div", { className: "color-setting__controller", key: index },
-                    React.createElement(ColorSetting, { labelClassName: "color-picker__label", label: t(translations.gradientColor, {
-                            name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
-                        }), color: gradientColor, positionInput: "right", onChange: color => {
-                            setGradients(prev => {
-                                const clonePrev = cloneDeep(prev);
-                                clonePrev[index].gradientColor = color;
-                                return clonePrev;
-                            });
-                        }, customColors: customColors }),
-                    React.createElement(SliderWithInputNumber, { label: t(translations.gradientLocation, {
-                            name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
-                        }), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
-                            setGradients(prev => {
-                                const clonePrev = cloneDeep(prev);
-                                clonePrev[index].gradientColorLocation = color;
-                                return clonePrev;
-                            });
-                        } }),
-                    (gradients === null || gradients === void 0 ? void 0 : gradients.length) > GRADIENT_MIN && (React.createElement(Icon, { type: "icon-ants-outline-delete", onClick: () => {
-                            const clonePrev = cloneDeep(gradients);
-                            clonePrev.splice(index, 1);
-                            setGradients(clonePrev);
-                        } }))));
-            })
-            : null,
-        (gradients === null || gradients === void 0 ? void 0 : gradients.length) < GRADIENT_MAX && (React.createElement(Button, { type: "text", onClick: () => {
-                // eslint-disable-next-line arrow-body-style
-                setGradients(prev => {
-                    return [...prev, { gradientColor: '#000000', gradientColorLocation: 0 }];
-                });
-            } },
-            "+ ",
-            t(translations.addColor)))));
+    return (_jsxs(GradientSettingWrapper, { className: className || '', ...rest, children: [_jsx(SettingWrapper, { className: "setting-container", label: t(translations.gradientStyle), children: _jsx(Select, { options: Object.values(GRADIENT_TYPE), value: gradientType, onChange: value => setGradientType(value) }) }), gradientType === GRADIENT_TYPE.LINEAR.value ? (_jsx(SliderWithInputNumber, { className: "setting-container", label: t(translations.angle), min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (_jsx(SettingWrapper, { className: "setting-container", label: t(translations.position), children: _jsx(Select, { options: Object.values(POSITION), value: radialPosition, onChange: value => setRadialPosition(value) }) })), Array.isArray(gradients) && gradients.length
+                ? gradients.map((gradient, index) => {
+                    const { gradientColor, gradientColorLocation } = gradient;
+                    return (_jsxs("div", { className: "color-setting__controller", children: [_jsx(ColorSetting, { labelClassName: "color-picker__label", label: t(translations.gradientColor, {
+                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                                }), color: gradientColor, positionInput: "right", onChange: color => {
+                                    setGradients(prev => {
+                                        const clonePrev = cloneDeep(prev);
+                                        clonePrev[index].gradientColor = color;
+                                        return clonePrev;
+                                    });
+                                }, customColors: customColors }), _jsx(SliderWithInputNumber, { label: t(translations.gradientLocation, {
+                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                                }), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
+                                    setGradients(prev => {
+                                        const clonePrev = cloneDeep(prev);
+                                        clonePrev[index].gradientColorLocation = color;
+                                        return clonePrev;
+                                    });
+                                } }), gradients?.length > GRADIENT_MIN && (_jsx(Icon, { type: "icon-ants-outline-delete", onClick: () => {
+                                    const clonePrev = cloneDeep(gradients);
+                                    clonePrev.splice(index, 1);
+                                    setGradients(clonePrev);
+                                } }))] }, index));
+                })
+                : null, gradients?.length < GRADIENT_MAX && (_jsxs(Button, { type: "text", onClick: () => {
+                    // eslint-disable-next-line arrow-body-style
+                    setGradients(prev => {
+                        return [...prev, { gradientColor: '#000000', gradientColorLocation: 0 }];
+                    });
+                }, children: ["+ ", t(translations.addColor)] }))] }));
 };

package/es/components/molecules/HeaderV2/HeaderV2.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AccountSelectionProps } from '../AccountSelection';
-import { AccountSharingProps } from '../../organism';
+import type { AccountSharingProps } from '@antscorp/antsomi-ui/es/components/organism/AccountSharing';
 import { IHelpProps } from '../../organism/Help/types';
 import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 interface Breadcrumb {

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo, useLayoutEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 // Hooks
@@ -16,51 +6,52 @@ import { Link, useLocation } from 'react-router-dom';
 import { HeaderV2Styled, LogoWrapper } from './styled';
 // Components
 import { AccountSelection } from '../AccountSelection';
-import { AccountSharing, Help, Notification, } from '../../organism';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { AccountSharing } from '@antscorp/antsomi-ui/es/components/organism/AccountSharing';
+import { Help } from '@antscorp/antsomi-ui/es/components/organism/Help';
+import { Notification } from '@antscorp/antsomi-ui/es/components/organism/Notification';
 // Constants
 import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
 import { useContextSelector } from 'use-context-selector';
-import { AppConfigContext, Flex } from '../../..';
+import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers/AppConfigProvider';
 import { isNil } from 'lodash';
 import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 // const DOUBLE_RIGHT_POINTING = '&raquo;'
 export const HeaderV2 = memo(props => {
-    var _a;
     const { auth, env: envContext, languageCode = 'en', appCode: contextAppCode, urlLogout: urlLogoutProvider = '', menuCode: contextMenuCode, } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
     const { replace } = useCustomRouter();
     // * Prefer to use Header in AppConfigContext
     const { show = true, className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, onCLickLogo, } = props;
     /** General config for children component */
-    const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
-    const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
+    const { env = envContext, language = languageCode, userId = isNaN(Number(auth?.userId)) ? 0 : Number(auth?.userId), portalId = auth?.portalId, token = auth?.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
+    const { currentAccount, inputStyle = 'select', onSelectAccount, ...accountSelectionProps } = accountSelection;
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
     const oidParam = urlParams.get('oid') || currentAccount || 'all';
-    const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam : `${(_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : 'all'}`}`);
+    const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam : `${currentAccount ?? userId ?? 'all'}`}`);
     useLayoutEffect(() => {
         if (useURLParam)
             setSelectedAccount(oidParam);
     }, [oidParam, useURLParam]);
     // Memo
     const accountSelectionDomain = useMemo(() => {
-        var _a;
         if (portalId !== PORTALS_IDS.SANDBOX_76753)
             return CDP_API[env || 'development'];
         switch (appCode) {
             case DATAFLOWS:
             case APP_ANTALYSER:
-                return (_a = APP_PERMISSION_DOMAIN[appCode || '']) === null || _a === void 0 ? void 0 : _a[env || ''];
+                return APP_PERMISSION_DOMAIN[appCode || '']?.[env || ''];
             default:
                 return CDP_API[env || 'development'];
         }
     }, [portalId, env, appCode]);
     if (!env || !language || !userId || !portalId || !token)
         return null;
-    const { show: showHelp = true, configs } = helpConfig, helpProps = __rest(helpConfig, ["show", "configs"]);
+    const { show: showHelp = true, configs, ...helpProps } = helpConfig;
     const { show: showNotification = true } = notificationConfig;
-    const { show: showAccountSharing = true, isShowSharing = true, isShareAccountAccess = true } = accountSharingConfig, accountSharingProps = __rest(accountSharingConfig, ["show", "isShowSharing", "isShareAccountAccess"]);
+    const { show: showAccountSharing = true, isShowSharing = true, isShareAccountAccess = true, ...accountSharingProps } = accountSharingConfig;
     const accountSelectionApiConfig = {
         domain: accountSelectionDomain,
         permissionDomain,
@@ -71,7 +62,19 @@ export const HeaderV2 = memo(props => {
         appCode,
         menuCode,
     };
-    const helpConfigProps = Object.assign(Object.assign({}, configs), { portalId: portalId.toString(), userId: userId.toString(), token, domain: CDP_API[env], domainTicket: ISSUE_API[env], domainPlatform: PLATFORM_API, config: Object.assign(Object.assign({}, configs.config), { user_language: language }) });
+    const helpConfigProps = {
+        ...configs,
+        portalId: portalId.toString(),
+        userId: userId.toString(),
+        token,
+        domain: CDP_API[env],
+        domainTicket: ISSUE_API[env],
+        domainPlatform: PLATFORM_API,
+        config: {
+            ...configs.config,
+            user_language: language,
+        },
+    };
     const notificationConfigProps = {
         accountId: userId,
         networkId: portalId,
@@ -105,26 +108,8 @@ export const HeaderV2 = memo(props => {
             }
             replace({ search: urlParams.toString() });
         }
-        onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(userId);
+        onSelectAccount?.(userId);
     };
-    const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
-    return (React.createElement(HeaderV2Styled, { "$show": show, className: className || '', style: style },
-        React.createElement("div", { className: "left-side" },
-            showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper", onClick: onCLickLogo },
-                React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
-            React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true })),
-            React.createElement("div", { className: "title-container", "data-test": "page-title" },
-                breadcrumbs ? (React.createElement("div", { className: "header-breadcrumbs", "data-test": "breadcrumbs" }, breadcrumbs.map((item, index) => (React.createElement(React.Fragment, { key: `${item.title}_${item.link}` },
-                    isNil(item.useExternalLink) && !item.useExternalLink ? (React.createElement(Link, { to: item.link || '', className: "header-breadcrumbs__item" }, item.title)) : (React.createElement("a", { href: item.link, className: "header-breadcrumbs__item" }, item.title)),
-                    breadcrumbs.length === index + 1 ? null : React.createElement(React.Fragment, null,
-                        "\u2002",
-                        QUOTE_ENTITY,
-                        "\u2002")))))) : null,
-                typeof pageTitle === 'string' ? (React.createElement("div", { className: "page-title" }, pageTitle)) : (pageTitle))),
-        React.createElement("div", { "data-test": "header-menu", className: "right-side" },
-            React.createElement(Flex, { gap: 10 },
-                rightContent,
-                showHelp ? React.createElement(Help, Object.assign({ configs: helpConfigProps }, helpProps)) : null,
-                showNotification ? React.createElement(Notification, Object.assign({}, notificationConfigProps)) : null),
-            showAccountSharing ? (React.createElement(AccountSharing, Object.assign({ isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess }, accountSharingPropsFormatted, accountSharingProps))) : null)));
+    const QUOTE_ENTITY = _jsx(_Fragment, { children: "\u00BB" });
+    return (_jsxs(HeaderV2Styled, { "$show": show, className: className || '', style: style, children: [_jsxs("div", { className: "left-side", children: [showLogo && (_jsx(LogoWrapper, { className: "logo-wrapper", onClick: onCLickLogo, children: _jsx("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }) })), _jsx(AccountSelection, { ...accountSelectionProps, currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true }), _jsxs("div", { className: "title-container", "data-test": "page-title", children: [breadcrumbs ? (_jsx("div", { className: "header-breadcrumbs", "data-test": "breadcrumbs", children: breadcrumbs.map((item, index) => (_jsxs(React.Fragment, { children: [isNil(item.useExternalLink) && !item.useExternalLink ? (_jsx(Link, { to: item.link || '', className: "header-breadcrumbs__item", children: item.title })) : (_jsx("a", { href: item.link, className: "header-breadcrumbs__item", children: item.title })), breadcrumbs.length === index + 1 ? null : _jsxs(_Fragment, { children: ["\u2002", QUOTE_ENTITY, "\u2002"] })] }, `${item.title}_${item.link}`))) })) : null, typeof pageTitle === 'string' ? (_jsx("div", { className: "page-title", children: pageTitle })) : (pageTitle)] })] }), _jsxs("div", { "data-test": "header-menu", className: "right-side", children: [_jsxs(Flex, { gap: 10, children: [rightContent, showHelp ? _jsx(Help, { configs: helpConfigProps, ...helpProps }) : null, showNotification ? _jsx(Notification, { ...notificationConfigProps }) : null] }), showAccountSharing ? (_jsx(AccountSharing, { isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess, ...accountSharingPropsFormatted, ...accountSharingProps })) : null] })] }));
 });

package/es/components/molecules/HeaderV2/styled.js

@@ -1,4 +1,3 @@
-var _a, _b, _c;
 // Libraries
 import styled from 'styled-components';
 // Constants
@@ -14,7 +13,7 @@ export const LogoWrapper = styled.div `
   }
 `;
 export const HeaderV2Styled = styled.div `
-  height: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.headerHeight};
+  height: ${THEME.token?.headerHeight};
   background-color: #f6f8fc;
   display: flex;
   align-items: center;
@@ -56,14 +55,14 @@ export const HeaderV2Styled = styled.div `
     font-size: 12px;
     line-height: 14px;
     font-weight: bold;
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw7};
+    color: ${THEME.token?.bw7};
     user-select: none;
   }
 
   .header-breadcrumbs__item {
     cursor: pointer;
     &:hover {
-      color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorText};
+      color: ${THEME.token?.colorText};
     }
   }
 
@@ -72,6 +71,6 @@ export const HeaderV2Styled = styled.div `
     line-height: 23px;
     height: 23px;
     font-weight: bold;
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorTextBase};
+    color: ${globalToken?.colorTextBase};
   }
 `;

package/es/components/molecules/IconSelection/components/Icon/index.js

@@ -1,28 +1,23 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ICON_TYPE, CUS_ICON_MAPPING } from '../../constants';
 export const IconSelectionRenderer = forwardRef((props, ref) => {
     const { iconType } = props;
     if (iconType === ICON_TYPE.FONT_AWESOME) {
-        const { iconName, iconType } = props, rest = __rest(props, ["iconName", "iconType"]);
-        return React.createElement(FontAwesomeIcon, Object.assign({ ref: ref }, rest, { icon: iconName.split(' ') }));
+        const { iconName, iconType, ...rest } = props;
+        return _jsx(FontAwesomeIcon, { ref: ref, ...rest, icon: iconName.split(' ') });
     }
     if (iconType === ICON_TYPE.CUSTOM) {
-        const { iconName, iconType } = props, rest = __rest(props, ["iconName", "iconType"]);
+        const { iconName, iconType, ...rest } = props;
         const Icon = CUS_ICON_MAPPING[iconName];
-        const style = Object.assign({ fill: 'currentcolor', height: '1em', width: '1em' }, rest.style);
-        return Icon ? React.createElement(Icon, Object.assign({ ref: ref }, rest, { style: style })) : null;
+        const style = {
+            fill: 'currentcolor',
+            height: '1em',
+            width: '1em',
+            ...rest.style,
+        };
+        return Icon ? _jsx(Icon, { ref: ref, ...rest, style: style }) : null;
     }
     return null;
 });

package/es/components/molecules/IconSelection/constants.js

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d;
 import { AddShoppingCartIcon, DesktopWindowsIcon, FactCheckIcon, HighlightAltIcon, PaymentIcon, RemoveShoppingCartIcon, ShoppingBagIcon, ShoppingCartIcon, StoreIcon, WebAssetIcon, ListIcon, ConfirmationNumberIcon, SearchIcon, PhoneCallbackIcon, CallIcon, HowToRegIcon, ChatBubbleOutlineIcon, PersonAddDisabledIcon, AssignmentIndIcon, AccountCircleIcon, NotificationsActiveIcon, RemoveRedEyeIcon, MobileFriendlyIcon, CategoryIcon, RedeemIcon, PreviewIcon, InteractiveIcon, WebIcon, LocalMallIcon, } from '@antscorp/antsomi-ui/es/components/icons';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const CUS_ICON_MAPPING = {
@@ -58,14 +57,14 @@ export const DEFAULT_UI_ICON_STYLES = {
             style: {
                 fontSize: 40,
                 zIndex: 1,
-                color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
+                color: THEME.token?.colorIcon,
             },
         },
         [ICON_TYPE.CUSTOM]: {
             style: {
                 fontSize: 40,
                 zIndex: 1,
-                color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon,
+                color: THEME.token?.colorIcon,
             },
         },
     },
@@ -75,14 +74,14 @@ export const DEFAULT_UI_ICON_STYLES = {
             style: {
                 fontSize: 114,
                 zIndex: 1,
-                color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon,
+                color: THEME.token?.colorIcon,
             },
         },
         [ICON_TYPE.CUSTOM]: {
             style: {
                 fontSize: 114,
                 zIndex: 1,
-                color: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon,
+                color: THEME.token?.colorIcon,
             },
         },
     },

package/es/components/molecules/IconSelection/index.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react/destructuring-assignment */
 // Libraries
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 // Hooks
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 // Atoms
@@ -20,7 +21,6 @@ import { isIconType } from './types';
 import { serializeIcon } from './utils';
 import clsx from 'clsx';
 export const IconSelection = props => {
-    var _a, _b;
     const { labelHeadingModal = 'Icon Selection', searchPlaceholder = 'Search for icon...', wrapperClassName = '', className = '', style = {}, isOpen = false, limitShowIcon = LIMIT_ICONS_SHOW, iconTypes = ['font-awesome'], onChange, onRemoveIcon, onChangeSvg, } = props;
     const [listIconsOriginal, setListIconsOriginal] = useState([]);
     const [listIcons, setListIcons] = useState([]);
@@ -50,34 +50,27 @@ export const IconSelection = props => {
         setListIcons(listIconsOriginal.slice(0, limitShowIcon));
     };
     const handleSelectIcon = (icon) => {
-        var _a;
         if (onChange) {
             onChange(icon);
         }
         if (typeof onChangeSvg === 'function') {
-            onChangeSvg((_a = iconRef === null || iconRef === void 0 ? void 0 : iconRef.current) === null || _a === void 0 ? void 0 : _a.outerHTML);
+            onChangeSvg(iconRef?.current?.outerHTML);
         }
         setSelectedIcon(icon);
         handleCancel();
     };
     const renderListIcons = (listIconsRender) => listIconsRender.map(icon => {
-        var _a;
         const serializeResult = serializeIcon(icon);
         if (serializeResult === null) {
             return null;
         }
         const { iconType, iconName } = serializeResult;
-        return (React.createElement(WrapperListRender, { className: "ants-group", key: icon },
-            React.createElement(WrapperListItemRender, { className: "ants-hover" },
-                React.createElement(IconSelectionRenderer, Object.assign({ ref: activeIcon === iconName ? iconRef : undefined, iconType: iconType, iconName: iconName }, DEFAULT_UI_ICON_STYLES.LISTING[iconType])),
-                React.createElement(CustomButton, { onClick: () => handleSelectIcon(icon), onMouseEnter: onChangeSvg ? () => setActiveIcon(iconName) : undefined, className: "group-hover" }, "USE"),
-                React.createElement(Overlay, { className: "group-hover" })),
-            React.createElement("span", { style: {
-                    display: 'inline-block',
-                    marginTop: 5,
-                    width: '100%',
-                    fontSize: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px`,
-                } }, iconName)));
+        return (_jsxs(WrapperListRender, { className: "ants-group", children: [_jsxs(WrapperListItemRender, { className: "ants-hover", children: [_jsx(IconSelectionRenderer, { ref: activeIcon === iconName ? iconRef : undefined, iconType: iconType, iconName: iconName, ...DEFAULT_UI_ICON_STYLES.LISTING[iconType] }), _jsx(CustomButton, { onClick: () => handleSelectIcon(icon), onMouseEnter: onChangeSvg ? () => setActiveIcon(iconName) : undefined, className: "group-hover", children: "USE" }), _jsx(Overlay, { className: "group-hover" })] }), _jsx("span", { style: {
+                        display: 'inline-block',
+                        marginTop: 5,
+                        width: '100%',
+                        fontSize: `${THEME.token?.fontSize}px`,
+                    }, children: iconName })] }, icon));
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleSeachIcons = useCallback((value) => {
@@ -109,35 +102,23 @@ export const IconSelection = props => {
     const renderSelectedIcon = () => {
         if (serializeSelectedIcon) {
             const { iconType, iconName } = serializeSelectedIcon;
-            return (React.createElement(IconSelectionRenderer, Object.assign({ iconType: iconType, iconName: iconName }, DEFAULT_UI_ICON_STYLES.SELECTED[iconType])));
+            return (_jsx(IconSelectionRenderer, { iconType: iconType, iconName: iconName, ...DEFAULT_UI_ICON_STYLES.SELECTED[iconType] }));
         }
         return null;
     };
-    return (React.createElement(IconSelectionWrapper, { style: style, className: clsx(wrapperClassName, className) },
-        React.createElement("div", { className: "transparent-wrapper" },
-            React.createElement("div", { style: { position: 'absolute', zIndex: 0 } }, renderSelectedIcon()),
-            serializeSelectedIcon ? (React.createElement(React.Fragment, null,
-                React.createElement(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' } }, "Change"),
-                React.createElement(Button, { onClick: handleRemoveIcon, style: { backgroundColor: '#ffffff' } },
-                    React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary } })))) : (React.createElement("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '10px',
-                    alignItems: 'center',
-                    color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon,
-                } },
-                React.createElement(Icon, { type: "icon-ants-star", size: 30 }),
-                React.createElement(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' } }, "Select an icon")))),
-        React.createElement(Modal, { wrapClassName: "icons-selection-modal", title: React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
-                React.createElement(Icon, { type: "icon-ants-emoji", size: 20 }),
-                labelHeadingModal), headerStyle: {
-                padding: '20px 20px 0',
-                border: 'none',
-            }, bodyStyle: {
-                padding: '17px 20px 20px',
-                width: 'fit-content',
-            }, width: "fit-content", footer: null, destroyOnClose: true, open: isOpenModal, onCancel: handleCancel },
-            React.createElement(InputSearch, { style: { width: 232 }, onAfterChange: handleSeachIcons, placeholder: searchPlaceholder }),
-            React.createElement("div", { style: { paddingTop: 28, width: 650 } },
-                React.createElement(ScrollBox, { height: 460, style: { display: 'flex', flexWrap: 'wrap', gap: '35px' } }, renderListIcons(listIcons))))));
+    return (_jsxs(IconSelectionWrapper, { style: style, className: clsx(wrapperClassName, className), children: [_jsxs("div", { className: "transparent-wrapper", children: [_jsx("div", { style: { position: 'absolute', zIndex: 0 }, children: renderSelectedIcon() }), serializeSelectedIcon ? (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' }, children: "Change" }), _jsx(Button, { onClick: handleRemoveIcon, style: { backgroundColor: '#ffffff' }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })] })) : (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '10px',
+                            alignItems: 'center',
+                            color: THEME.token?.colorIcon,
+                        }, children: [_jsx(Icon, { type: "icon-ants-star", size: 30 }), _jsx(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' }, children: "Select an icon" })] }))] }), _jsxs(Modal, { wrapClassName: "icons-selection-modal", title: _jsxs("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' }, children: [_jsx(Icon, { type: "icon-ants-emoji", size: 20 }), labelHeadingModal] }), headerStyle: {
+                    padding: '20px 20px 0',
+                    border: 'none',
+                }, styles: {
+                    body: {
+                        padding: '17px 20px 20px',
+                        width: 'fit-content',
+                    },
+                }, width: "fit-content", footer: null, destroyOnClose: true, open: isOpenModal, onCancel: handleCancel, children: [_jsx(InputSearch, { style: { width: 232 }, onAfterChange: handleSeachIcons, placeholder: searchPlaceholder }), _jsx("div", { style: { paddingTop: 28, width: 650 }, children: _jsx(ScrollBox, { height: 460, style: { display: 'flex', flexWrap: 'wrap', gap: '35px' }, children: renderListIcons(listIcons) }) })] })] }));
 };

package/es/components/molecules/IconSelection/styled.d.ts

@@ -2,7 +2,5 @@
 export declare const IconSelectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperListRender: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperListItemRender: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CustomButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
+export declare const CustomButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/IconSelection/styled.js

@@ -1,7 +1,6 @@
-var _a;
 // Libraries
-import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
 import styled from 'styled-components';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const IconSelectionWrapper = styled.div `
@@ -71,7 +70,7 @@ export const Overlay = styled.div `
   bottom: 0px;
   left: 0px;
   z-index: 2;
-  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bgLightTransparent};
+  background-color: ${THEME.token?.bgLightTransparent};
   opacity: 0;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
     opacity, box-shadow, transform, filter, backdrop-filter;