@true-engineering/true-react-common-ui-kit 3.25.1 → 3.26.0

package/dist/true-react-common-ui-kit.js

@@ -1,6 +1,6 @@
 import React, { createContext, useRef, useEffect, useCallback, useState, useMemo, useContext, createElement, Fragment as Fragment$1, forwardRef, createRef, PureComponent, memo } from "react";
 import { createUseStyles } from "react-jss";
-import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, getArray, createFilter, isFunction as isFunction$1, isObject as isObject$1, getTransition, applyAction, indexMap, isNumberInteger, hasDuplicates } from "@true-engineering/true-react-platform-helpers";
+import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, getArray, createFilter, isFunction as isFunction$1, applyAction, isObject as isObject$1, getTransition, indexMap, isNumberInteger, hasDuplicates, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
@@ -11,7 +11,7 @@ import { debounce as debounce$1 } from "ts-debounce";
 import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
 import ReactDatePicker from "react-datepicker";
 import { filesize } from "filesize";
-import { useFloating, offset as offset$2, flip as flip$2, autoUpdate, useHover, useClick, useDismiss, useInteractions, useTransitionStatus, FloatingPortal } from "@floating-ui/react";
+import { useFloating, offset as offset$2, flip as flip$2, autoUpdate, useHover, safePolygon, useFocus, useClick, useDismiss, useInteractions, useTransitionStatus, FloatingPortal } from "@floating-ui/react";
 import { hasFlag } from "country-flag-icons";
 import { RemoveScroll } from "react-remove-scroll";
 var jsxRuntime = { exports: {} };
@@ -6668,63 +6668,63 @@ var useMergedRefs = function(refs) {
     return mergeRefs(refs);
   }, refs);
 };
-const avatarGreen = `  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
-    <mask
-      id="mask0_0_12744"
-      style="mask-type: 'alpha';"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="32"
-      height="32"
-    >
-      <circle cx="16" cy="16" r="16" fill="white" />
-    </mask>
-    <g mask="url(#mask0_0_12744)">
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
-      <mask
-        id="mask1_0_12744"
-        style="mask-type: 'alpha';"
-        maskUnits="userSpaceOnUse"
-        x="3"
-        y="16"
-        width="26"
-        height="26"
-      >
-        <circle cx="16" cy="29" r="13" fill="white" />
-      </mask>
-      <g mask="url(#mask1_0_12744)">
-        <ellipse
-          cx="16"
-          cy="17.5"
-          rx="6"
-          ry="7.5"
-          fill="#505F79"
-          fill-opacity="0.204983"
-        />
-      </g>
-    </g>
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
-    <defs>
-      <linearGradient
-        id="paint0_linear_0_12744"
-        x1="13.347"
-        y1="46.279"
-        x2="33.5318"
-        y2="30.8088"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#ABD229" />
-        <stop offset="1" stop-color="#9CD03F" />
-      </linearGradient>
-    </defs>
+const avatarGreen = `  <svg\r
+    width="100%"\r
+    height="100%"\r
+    viewBox="0 0 32 32"\r
+    fill="none"\r
+    xmlns="http://www.w3.org/2000/svg"\r
+  >\r
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />\r
+    <mask\r
+      id="mask0_0_12744"\r
+      style="mask-type: 'alpha';"\r
+      maskUnits="userSpaceOnUse"\r
+      x="0"\r
+      y="0"\r
+      width="32"\r
+      height="32"\r
+    >\r
+      <circle cx="16" cy="16" r="16" fill="white" />\r
+    </mask>\r
+    <g mask="url(#mask0_0_12744)">\r
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />\r
+      <mask\r
+        id="mask1_0_12744"\r
+        style="mask-type: 'alpha';"\r
+        maskUnits="userSpaceOnUse"\r
+        x="3"\r
+        y="16"\r
+        width="26"\r
+        height="26"\r
+      >\r
+        <circle cx="16" cy="29" r="13" fill="white" />\r
+      </mask>\r
+      <g mask="url(#mask1_0_12744)">\r
+        <ellipse\r
+          cx="16"\r
+          cy="17.5"\r
+          rx="6"\r
+          ry="7.5"\r
+          fill="#505F79"\r
+          fill-opacity="0.204983"\r
+        />\r
+      </g>\r
+    </g>\r
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />\r
+    <defs>\r
+      <linearGradient\r
+        id="paint0_linear_0_12744"\r
+        x1="13.347"\r
+        y1="46.279"\r
+        x2="33.5318"\r
+        y2="30.8088"\r
+        gradientUnits="userSpaceOnUse"\r
+      >\r
+        <stop stop-color="#ABD229" />\r
+        <stop offset="1" stop-color="#9CD03F" />\r
+      </linearGradient>\r
+    </defs>\r
   </svg>`;
 const fileExcel = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <rect width="20" height="20" rx="4" fill="#21A366"/>\r\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16081)" style="mix-blend-mode:overlay"/>\r\n  <path d="M8.00342 14.5244L10.0728 11.3062L12.1357 14.5244H14.4019L11.2217 9.73828L14.1162 5.21875H11.939L10.1108 8.2085L8.24463 5.21875H6.04834L8.93018 9.66846L5.75 14.5244H8.00342Z" fill="white"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_0_16081" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
 const fileImage = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <rect width="20" height="20" rx="4" fill="#FF991F"/>\r\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16103)" style="mix-blend-mode:overlay"/>\r\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90113 15C3.09595 15 2.62093 14.097 3.07709 13.4335L6.67606 8.19861C7.07341 7.62064 7.9268 7.62065 8.32414 8.19861L13.0001 15H3.90113Z" fill="white"/>\r\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53962 15L12.7076 10.2481C13.1034 9.65434 13.9758 9.65434 14.3717 10.2481L16.5031 13.4453C16.9462 14.1099 16.4698 15 15.6711 15H9.53962Z" fill="white"/>\r\n  <path d="M16.0001 5.5C16.0001 6.32843 15.3285 7 14.5001 7C13.6717 7 13.0001 6.32843 13.0001 5.5C13.0001 4.67157 13.6717 4 14.5001 4C15.3285 4 16.0001 4.67157 16.0001 5.5Z" fill="white"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_0_16103" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
@@ -8865,8 +8865,57 @@ function _object_spread_props$K(target, source) {
   }
   return target;
 }
-var Button = /* @__PURE__ */ forwardRef(function(param, ref) {
-  var _param_type = param.type, type = _param_type === void 0 ? "button" : _param_type, children = param.children, _param_size = param.size, size = _param_size === void 0 ? "l" : _param_size, _param_view = param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, onClick = param.onClick, onMouseDown = param.onMouseDown;
+function _object_without_properties$g(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _object_without_properties_loose$g(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key))
+        continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _object_without_properties_loose$g(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
+  var _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = _param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = _param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, icon = _param.icon, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, interactions = _object_without_properties$g(_param, [
+    "type",
+    "children",
+    "size",
+    "view",
+    "isFullWidth",
+    "isInline",
+    "isDisabled",
+    "isActive",
+    "isLoading",
+    "shouldSkipTabNavigation",
+    "data",
+    "testId",
+    "tweakStyles",
+    "icon",
+    "iconPosition",
+    "preloaderType"
+  ]);
   var classes = useStyles$N({
     theme: tweakStyles
   });
@@ -8885,10 +8934,8 @@ var Button = /* @__PURE__ */ forwardRef(function(param, ref) {
     type,
     className: clsx(classes.root, classes[size], classes[view], (_obj2 = {}, _define_property$U(_obj2, classes.disabled, isDisabled), _define_property$U(_obj2, classes.fullWidth, isFullWidth), _define_property$U(_obj2, classes.inline, isInline), _define_property$U(_obj2, classes.active, isActive), _define_property$U(_obj2, classes.loading, isLoading), _define_property$U(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
     tabIndex: shouldSkipTabNavigation ? -1 : void 0,
-    disabled: hasNoAction,
-    onClick: !hasNoAction ? onClick : void 0,
-    onMouseDown: !hasNoAction ? onMouseDown : void 0
-  }, addDataTestId(testId), addDataAttributes(data)), {
+    disabled: hasNoAction
+  }, interactions, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       /* @__PURE__ */ jsxs("span", {
         className: clsx(classes.content, (_obj1 = {}, _define_property$U(_obj1, classes.iconFromRight, hasChildren && hasIcon && iconPosition === "right"), _define_property$U(_obj1, classes.iconFromLeft, hasChildren && hasIcon && iconPosition === "left"), _obj1)),
@@ -18850,17 +18897,16 @@ function FilterValueView(param) {
 }
 var DEFAULT_OFFSET = 6;
 var useStyles$n = createThemedStyles("WithPopup", {
-  root: {},
-  disabled: {
-    "& > $trigger": {
-      cursor: "default"
-    }
-  },
   trigger: {
+    width: "fit-content",
     cursor: "pointer"
   },
+  disabled: {
+    cursor: "default"
+  },
   popup: {
-    zIndex: 5
+    zIndex: 5,
+    outline: "none"
   },
   animationEnd: {},
   animationStart: {},
@@ -19003,7 +19049,7 @@ function _unsupported_iterable_to_array$9(o, minLen) {
     return _array_like_to_array$9(o, minLen);
 }
 var WithPopup = function(param) {
-  var trigger = param.trigger, children = param.children, _param_middlewares = param.middlewares, middlewares = _param_middlewares === void 0 ? [] : _param_middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? false : _param_shouldRenderInBody, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, _param_canBeFlipped = param.canBeFlipped, canBeFlipped = _param_canBeFlipped === void 0 ? false : _param_canBeFlipped, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
+  var trigger = param.trigger, children = param.children, _param_middlewares = param.middlewares, middlewares = _param_middlewares === void 0 ? [] : _param_middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? true : _param_shouldRenderInBody, _param_canBeFlipped = param.canBeFlipped, canBeFlipped = _param_canBeFlipped === void 0 ? true : _param_canBeFlipped, _param_isTriggerWrapped = param.isTriggerWrapped, isTriggerWrapped = _param_isTriggerWrapped === void 0 ? eventType === "hover" : _param_isTriggerWrapped, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
   var classes = useStyles$n({
     theme: tweakStyles
   });
@@ -19011,12 +19057,12 @@ var WithPopup = function(param) {
   var handleToggle = function(isActive, event) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     if (!isDisabled) {
-      onToggle === null || onToggle === void 0 ? void 0 : onToggle(isActive);
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(isActive, event);
       setIsOpen(isActive);
     }
   };
-  var handleClose = function() {
-    handleToggle(false);
+  var handleClose = function(event) {
+    handleToggle(false, event);
   };
   var _useFloating = useFloating({
     open: isOpen,
@@ -19034,41 +19080,44 @@ var WithPopup = function(param) {
     delay: typeof hoverDelay === "number" ? {
       open: hoverDelay,
       close: 0
-    } : hoverDelay
+    } : hoverDelay,
+    handleClose: safePolygon()
+  });
+  var focus = useFocus(context, {
+    enabled: eventType === "hover"
   });
   var click = useClick(context, {
-    enabled: eventType === "click",
-    toggle: false
+    enabled: eventType === "click"
   });
   var dismiss = useDismiss(context, {
     enabled: eventType === "click",
     ancestorScroll: shouldHideOnScroll
   });
-  var getFloatingProps = useInteractions([
+  var _useInteractions = useInteractions([
     hover,
     click,
+    focus,
     dismiss
-  ]).getFloatingProps;
+  ]), getFloatingProps = _useInteractions.getFloatingProps, getReferenceProps = _useInteractions.getReferenceProps;
   var _useTransitionStatus = useTransitionStatus(context, {
     duration: {
       close: 500
     }
   }), isMounted = _useTransitionStatus.isMounted, status = _useTransitionStatus.status;
-  return /* @__PURE__ */ jsxs("div", _object_spread_props$n(_object_spread$o({
-    ref: refs.setReference,
-    className: clsx(classes.root, _define_property$p({}, classes.disabled, isDisabled))
-  }, addDataTestId(testId), addDataAttributes(data)), {
+  var referenceProps = getReferenceProps({
+    ref: refs.setReference
+  });
+  var triggerElement = applyAction(trigger, _object_spread$o({
+    isActive: isOpen,
+    isDisabled
+  }, !isTriggerWrapped ? referenceProps : void 0));
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      /* @__PURE__ */ jsx("div", _object_spread_props$n(_object_spread$o({
-        className: classes.trigger,
-        onClick: eventType === "click" ? function(e) {
-          return handleToggle(!isOpen, e);
-        } : void 0
-      }, addDataTestId(testId, "trigger")), {
-        children: isFunction$1(trigger) ? trigger({
-          isActive: isOpen
-        }) : trigger
-      })),
+      isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$n(_object_spread$o({
+        className: clsx(classes.trigger, _define_property$p({}, classes.disabled, isDisabled))
+      }, referenceProps, addDataTestId(testId), addDataAttributes(data)), {
+        children: triggerElement
+      })) : triggerElement,
       isMounted && /* @__PURE__ */ jsx(FloatingPortal, {
         root: !shouldRenderInBody ? refs.reference.current : void 0,
         children: /* @__PURE__ */ jsx("div", _object_spread_props$n(_object_spread$o({
@@ -19085,7 +19134,7 @@ var WithPopup = function(param) {
         }))
       })
     ]
-  }));
+  });
 };
 var isContentNotEmpty = function(value) {
   if (Array.isArray(value)) {
@@ -31005,7 +31054,7 @@ function _object_without_properties_loose(source, excluded) {
   return target;
 }
 var NewMoreMenu = function(_param) {
-  var items = _param.items, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_hasDefaultStateBackground = _param.hasDefaultStateBackground, hasDefaultStateBackground = _param_hasDefaultStateBackground === void 0 ? true : _param_hasDefaultStateBackground, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, props = _object_without_properties(_param, [
+  var items = _param.items, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_hasDefaultStateBackground = _param.hasDefaultStateBackground, hasDefaultStateBackground = _param_hasDefaultStateBackground === void 0 ? true : _param_hasDefaultStateBackground, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, rest = _object_without_properties(_param, [
     "items",
     "isDisabled",
     "hasDefaultStateBackground",
@@ -31026,18 +31075,20 @@ var NewMoreMenu = function(_param) {
     className: "tweakList",
     currentComponentName: "NewMoreMenu"
   });
-  var isButtonDisabled = isDisabled || !isArrayNotEmpty(items);
   return /* @__PURE__ */ jsx(WithPopup, _object_spread_props(_object_spread({
-    isDisabled: isButtonDisabled,
+    isDisabled: isDisabled || isArrayEmpty(items),
     tweakStyles: tweakWithPopupStyles
-  }, props), {
-    trigger: function(param) {
-      var isActive = param.isActive;
+  }, rest), {
+    trigger: function(_param2) {
+      var isActive = _param2.isActive, isTriggerDisabled = _param2.isDisabled, props = _object_without_properties(_param2, [
+        "isActive",
+        "isDisabled"
+      ]);
       var _obj2;
       return /* @__PURE__ */ jsx("button", _object_spread_props(_object_spread({
-        className: clsx(classes.button, (_obj2 = {}, _define_property(_obj2, classes.hasCircle, hasDefaultStateBackground), _define_property(_obj2, classes.disabled, isButtonDisabled), _define_property(_obj2, classes.active, isActive), _obj2)),
-        disabled: isButtonDisabled
-      }, addDataTestId(testId), addDataAttributes(data)), {
+        className: clsx(classes.button, (_obj2 = {}, _define_property(_obj2, classes.hasCircle, hasDefaultStateBackground), _define_property(_obj2, classes.disabled, isTriggerDisabled), _define_property(_obj2, classes.active, isActive), _obj2)),
+        disabled: isTriggerDisabled
+      }, addDataTestId(testId), addDataAttributes(data), props), {
         children: /* @__PURE__ */ jsx("div", {
           className: classes.icon,
           children: /* @__PURE__ */ jsx(Icon, {