@react-fabric/core 1.0.0-beta.60 → 1.0.0-beta.62

package/dist/cjs/components/navigator/Navigator.js

@@ -2,12 +2,11 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var HotKey = require('../../hotkeys/HotKey.js');
-var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
-var utilities = require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["className", "onNavigate", "color", "children", "length", "current", "disableKeyHandlers"];
@@ -46,7 +45,7 @@ var Navigator = function Navigator(_ref) {
     aria = _objectWithoutProperties(_ref, _excluded);
   var navPrev = react.useCallback(function () {
     return (utilities.isEmpty(current) || current !== 0) && onNavigate(-1);
-  }, [onNavigate, current]);
+  }, [onNavigate, current, length]);
   var navNext = react.useCallback(function () {
     return (utilities.isEmpty(current) || current + 1 < (length !== null && length !== void 0 ? length : 0)) && onNavigate(+1);
   }, [onNavigate, current, length]);
@@ -66,7 +65,7 @@ var Navigator = function Navigator(_ref) {
       className: "text-[1em] p-1",
       "aria-label": "previous",
       "data-ref": "previous",
-      icon: icons.CoreIcons.chevronLeft,
+      icon: "icon-[mdi--chevron-left]",
       disabled: !utilities.isEmpty(current) && current === 0,
       onClick: function onClick(e) {
         return [e.stopPropagation(), navPrev()];
@@ -77,7 +76,7 @@ var Navigator = function Navigator(_ref) {
       color: color,
       "aria-label": "next",
       "data-ref": "next",
-      icon: icons.CoreIcons.chevronRight,
+      icon: "icon-[mdi--chevron-right]",
       disabled: !utilities.isEmpty(current) && current + 1 === length,
       onClick: function onClick(e) {
         return [e.stopPropagation(), navNext()];

package/dist/cjs/components/panel/Panel.js

@@ -7,7 +7,6 @@ var classNames = require('classnames');
 var react = require('react');
 var usePropToggle = require('../../hooks/usePropToggle.js');
 var HotKey = require('../../hotkeys/HotKey.js');
-var icons = require('../../types/icons.js');
 var Animations = require('../animations/Animations.js');
 var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -30,7 +29,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```jsx
  * <Panel
  *   title="Panel Title"
- *   icon={CoreIcons.info}
+ *   icon="icon-[mdi--info]"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable
@@ -112,9 +111,10 @@ var Panel = function Panel(_ref) {
       "data-ref": "panelHeader",
       onClick: collapsable ? toggleCollapse : undefined,
       children: [onBack && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        rtlFlip: true,
         "data-ref": "panelBack",
         className: classNames("fabric-panelAction", "cursor-pointer"),
-        icon: icons.CoreIcons.chevronLeft,
+        icon: "icon-[mdi--chevron-left]",
         onClick: onBack
       }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
         className: "p-2 text-md select-none pointer-events-none"
@@ -133,24 +133,24 @@ var Panel = function Panel(_ref) {
         children: [expandable && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
           "data-ref": "panelExpand",
           className: classNames("fabric-panelAction", "cursor-pointer"),
-          icon: expanded ? icons.CoreIcons.minimize : icons.CoreIcons.maximize,
+          icon: expanded ? "icon-[mdi--fullscreen-exit]" : "icon-[mdi--fullscreen]",
           onClick: toggleExpand
         }), !expanded && collapsable && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
           "data-ref": "panelCollapse",
           className: classNames("fabric-panelAction", "cursor-pointer"),
-          icon: collapsed ? icons.CoreIcons.expand : icons.CoreIcons.collapse,
+          icon: collapsed ? "icon-[mdi--plus-box]" : "icon-[mdi--minus-box]",
           onClick: toggleCollapse
         }), !expanded && onClose && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
           "data-ref": "panelClose",
           className: classNames("fabric-panelAction", "cursor-pointer"),
-          icon: icons.CoreIcons.close,
+          icon: "icon-[mdi--close]",
           onClick: onClose
         })]
       })]
     }), (!collapsed || expanded) && /*#__PURE__*/jsxRuntime.jsxs("div", {
       "data-ref": "panelBody",
       className: classNames("fabric-panelBody", "area-content grid overflow-hidden"),
-      children: [loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), children]
+      children: [loading && /*#__PURE__*/jsxRuntime.jsx(Animations.LoadingLine, {}), children]
     })]
   }));
 };

package/dist/cjs/components/tabpanel/Tab.js

@@ -14,7 +14,6 @@ require('../../hotkeys/HotKeyWrapper.js');
 var Tooltip = require('../../overlays/tooltip/Tooltip.js');
 var Badge = require('../badge/Badge.js');
 var Icon = require('../icon/Icon.js');
-require('../../types/icons.js');
 var DropdownTool = require('../dropdown/DropdownTool.js');
 
 var _excluded = ["ref", "as", "id", "className", "label", "icon", "badge", "disabled", "onClose", "active", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];

package/dist/cjs/components/tabpanel/TabPanel.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-require('@react-fabric/utilities');
 var nodeCheck = require('../../utils/nodeCheck.js');
 var Tab = require('./Tab.js');
 
@@ -73,7 +73,8 @@ var TabPanel = function TabPanel(_ref) {
     tabs = _useMemo2[0],
     rest = _useMemo2[1];
   react.useEffect(function () {
-    setActive(activeTab);
+    var _tabs$;
+    setActive(utilities.getValue(activeTab !== null && activeTab !== void 0 ? activeTab : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.props.id));
   }, [activeTab]);
   var activeTabPanel = react.useMemo(function () {
     var _tabs$find;

package/dist/cjs/core/aside/Aside.js

@@ -9,7 +9,6 @@ var Icon = require('../../components/icon/Icon.js');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
 var usePropToggle = require('../../hooks/usePropToggle.js');
 var useResize = require('../../hooks/useResize.js');
-var icons = require('../../types/icons.js');
 var ErrorBoundary = require('../boundary/ErrorBoundary.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -27,7 +26,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```jsx
  * <Aside
  *   title="Sidebar Title"
- *   icon={CoreIcons.menu}
+ *   icon=icon-[mdi--menu]
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"
@@ -151,7 +150,7 @@ var Aside = function Aside(_ref) {
       }), collapsable && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         "aria-label": isCollapsed ? "expand" : "collapse",
         className: classNames("fabric-asideCollapse", "p-2 select-none"),
-        icon: icons.CoreIcons.chevronLeft,
+        icon: "icon-[mdi--chevron-left]",
         rtlFlip: true,
         onClick: toggleCollapse,
         "data-ref": "asideToggle"
@@ -161,7 +160,7 @@ var Aside = function Aside(_ref) {
         className: "fabric-asideActions",
         children: actions
       })]
-    }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), isCollapsed && /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.LoadingLine, {}), isCollapsed && /*#__PURE__*/jsxRuntime.jsx("div", {
       role: "none",
       onClick: tryPeek,
       "data-ref": "asidePlaceholder",

package/dist/cjs/core/page/Page.js

@@ -60,7 +60,7 @@ var Page = function Page(_ref) {
       children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
         size: "1.25em"
       }, Icon.getIconProps(icon))), title]
-    }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), children]
+    }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.LoadingLine, {}), children]
   }));
 };
 

package/dist/cjs/core/theme/ThemeProvider.js

@@ -59,7 +59,8 @@ var ThemeProvider = function ThemeProvider(_ref) {
     accentColor = _ref.accentColor,
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
-    rounding = _ref.rounding;
+    rounding = _ref.rounding,
+    className = _ref.className;
   var _useApplicationContex = Global.useApplicationContext(),
     currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = react.useMemo(function () {
@@ -88,7 +89,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
     style: styles,
     "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
-    className: classNames("fabric-themeProvider", "contents theme-base", branding),
+    className: classNames("fabric-themeProvider", "contents theme-base", branding, className),
     children: children
   });
 };

package/dist/cjs/hooks/useNavigator.js

@@ -11,15 +11,16 @@ var useNavigator = function useNavigator() {
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
     setCurrentIndex = _useState2[1];
-  var refCurrent = react.useRef(defaultIndex);
   var onNavigate = react.useCallback(function (dir) {
-    if (dir === -1) {
-      refCurrent.current = refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
-    }
-    if (dir === 1) {
-      refCurrent.current = refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
-    }
-    setCurrentIndex(refCurrent.current);
+    setCurrentIndex(function (prevValue) {
+      if (dir === -1) {
+        return prevValue > 0 ? prevValue - 1 : totalCount - 1;
+      }
+      if (dir === 1) {
+        return prevValue + 1 < totalCount ? prevValue + 1 : 0;
+      }
+      return prevValue;
+    });
   }, [totalCount]);
   var headLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {

package/dist/cjs/hooks/useOverlayService.js

@@ -11,6 +11,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var _excluded = ["onClose"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// return the blank function since state functionality will execute if the value is function
+var EMPTY_FC = function EMPTY_FC() {
+  return function () {
+    return null;
+  };
+};
+
 /**
  * Hook to manage overlay components like modals or flyouts.
  * It provides a way to open an overlay with specified properties and handle its closure.
@@ -21,7 +28,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
  *
  * @param ModalOrFlyout - The component to be used as an overlay.
- * @returns An array containing the current overlay and a function to open it.
+ * @param toggleOpen - If true, calling `openOverlay` while an overlay is already open will close the existing one instead of opening a new one.
+ * @returns An array containing the current overlay, a function to open it, and a boolean indicating if the overlay is open.
  *
  * @example
  * ```jsx
@@ -36,34 +44,47 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```
  */
 var useOverlayService = function useOverlayService(ModalOrFlyout) {
-  var _useState = react.useState(null),
+  var _useState = react.useState(EMPTY_FC),
     _useState2 = _slicedToArray(_useState, 2),
     Overlay = _useState2[0],
     setOverlay = _useState2[1];
+  var existingOpenPromise = react.useRef(null);
   var openOverlay = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _ref2,
         onClose,
-        props,
+        outerProps,
         _args = arguments;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _ref2 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, onClose = _ref2.onClose, props = _objectWithoutProperties(_ref2, _excluded);
-            _context.next = 3;
+            _ref2 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, onClose = _ref2.onClose, outerProps = _objectWithoutProperties(_ref2, _excluded);
+            if (!existingOpenPromise.current) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            _context.next = 5;
             return new Promise(function (resolve) {
-              var handleClose = function handleClose(args) {
-                setOverlay(null);
+              existingOpenPromise.current = function (args) {
+                setOverlay(EMPTY_FC);
                 resolve(args);
                 onClose === null || onClose === void 0 || onClose(args);
+                existingOpenPromise.current = null;
               };
-              setOverlay( /*#__PURE__*/jsxRuntime.jsx(ModalOrFlyout, _objectSpread(_objectSpread({}, props), {}, {
-                onClose: handleClose
-              })));
+              // eslint-disable-next-line react/display-name
+              setOverlay(function () {
+                return function (overrideProps) {
+                  return /*#__PURE__*/jsxRuntime.jsx(ModalOrFlyout, _objectSpread(_objectSpread(_objectSpread({}, outerProps), overrideProps), {}, {
+                    onClose: existingOpenPromise.current
+                  }));
+                };
+              });
             });
-          case 3:
+          case 5:
             return _context.abrupt("return", _context.sent);
-          case 4:
+          case 6:
           case "end":
             return _context.stop();
         }
@@ -73,7 +94,7 @@ var useOverlayService = function useOverlayService(ModalOrFlyout) {
       return _ref.apply(this, arguments);
     };
   }();
-  return [Overlay, openOverlay];
+  return [Overlay, openOverlay, existingOpenPromise.current];
 };
 
 exports.useOverlayService = useOverlayService;

package/dist/cjs/hooks/useStepper.js

@@ -13,7 +13,6 @@ var Icon = require('../components/icon/Icon.js');
 require('@floating-ui/react');
 require('../hotkeys/HotKeyWrapper.js');
 require('react-i18next');
-require('../types/icons.js');
 require('@babel/runtime/helpers/toConsumableArray');
 require('@babel/runtime/helpers/classCallCheck');
 require('@babel/runtime/helpers/createClass');

package/dist/cjs/i18n/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var i18next = require('i18next');
-var ar = require('./ar.json.js');
-var en = require('./en.json.js');
+var core$1 = require('./ar/core.json.js');
+var core = require('./en/core.json.js');
 
 /*
  * React Fabric
@@ -48,8 +48,8 @@ var addTranslationBundle = function addTranslationBundle(key, languageBundles) {
   }
 };
 addTranslationBundle("core", {
-  en: en.default,
-  ar: ar.default
+  en: core.default,
+  ar: core$1.default
 });
 
 exports.addTranslationBundle = addTranslationBundle;

package/dist/cjs/index.js

@@ -50,7 +50,6 @@ require('@floating-ui/react');
 require('classnames');
 require('react');
 require('react-i18next');
-var icons = require('./types/icons.js');
 var Title = require('./typography/Title.js');
 var cloneElement = require('./utils/cloneElement.js');
 require('@react-fabric/utilities');
@@ -82,10 +81,11 @@ var Global = require('./context/Global.js');
 
 
 exports.ActionLabel = ActionLabel.ActionLabel;
-exports.AnimationBars = Animations.AnimationBars;
 exports.AnimationIndicator = Animations.AnimationIndicator;
-exports.AnimationSpinner = Animations.AnimationSpinner;
-exports.Loading = Animations.Loading;
+exports.AnimationLoader = Animations.AnimationLoader;
+exports.LoadingBars = Animations.LoadingBars;
+exports.LoadingLine = Animations.LoadingLine;
+exports.LoadingSpinner = Animations.LoadingSpinner;
 exports.Skeleton = Animations.Skeleton;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarGroup = AvatarGroup.AvatarGroup;
@@ -136,10 +136,6 @@ exports.Section = Section.Section;
 exports.ThemeProvider = ThemeProvider.ThemeProvider;
 exports.Viewport = Viewport.Viewport;
 exports.addTranslationBundle = index.addTranslationBundle;
-Object.defineProperty(exports, "CoreIcons", {
-  enumerable: true,
-  get: function () { return icons.CoreIcons; }
-});
 exports.Title = Title.Title;
 exports.cloneChildren = cloneElement.cloneChildren;
 exports.Flyout = Flyout.Flyout;

package/dist/cjs/overlays/alert/Alert.js

@@ -9,7 +9,6 @@ var reactI18next = require('react-i18next');
 var Animations = require('../../components/animations/Animations.js');
 var Button = require('../../components/button/Button.js');
 var Icon = require('../../components/icon/Icon.js');
-var icons = require('../../types/icons.js');
 var Title = require('../../typography/Title.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
@@ -180,7 +179,7 @@ var Alert = function Alert(_ref) {
               onClick: function onClick() {
                 return handleClose(false);
               },
-              icon: icons.CoreIcons.close,
+              icon: "icon-[mdi--close]",
               "aria-label": "close"
             })
           })]

package/dist/cjs/overlays/flyout/Flyout.js

@@ -10,7 +10,6 @@ var Animations = require('../../components/animations/Animations.js');
 var Icon = require('../../components/icon/Icon.js');
 var HeadFoot = require('../../core/headfoot/HeadFoot.js');
 var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
-var icons = require('../../types/icons.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["icon", "iconClassName", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "root", "hideMask", "align"];
@@ -116,12 +115,12 @@ var Flyout = function Flyout(_ref) {
             }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
               "data-ref": "panelClose",
               className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
-              icon: icons.CoreIcons.close,
+              icon: "icon-[mdi--close]",
               onClick: function onClick() {
                 return handleClose(false);
               }
             })]
-          }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+          }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.LoadingLine, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
             role: "dialog",
             className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
             tabIndex: 0,

package/dist/cjs/overlays/modal/Modal.js

@@ -10,7 +10,6 @@ var Animations = require('../../components/animations/Animations.js');
 var Icon = require('../../components/icon/Icon.js');
 var HeadFoot = require('../../core/headfoot/HeadFoot.js');
 var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
-var icons = require('../../types/icons.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["icon", "iconClassName", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth"];
@@ -108,12 +107,12 @@ var Modal = function Modal(_ref) {
               }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 "data-ref": "panelClose",
                 className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
-                icon: icons.CoreIcons.close,
+                icon: "icon-[mdi--close]",
                 onClick: function onClick() {
                   return handleClose(false);
                 }
               })]
-            }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+            }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.LoadingLine, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
               role: "dialog",
               className: classNames("fabric-modalBody", "flex-1 grid overflow-hidden"),
               tabIndex: 0,

package/dist/cjs/overlays/toast/Toast.js

@@ -6,7 +6,6 @@ var reactI18next = require('react-i18next');
 var Animations = require('../../components/animations/Animations.js');
 var Button = require('../../components/button/Button.js');
 var Icon = require('../../components/icon/Icon.js');
-var icons = require('../../types/icons.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
@@ -122,7 +121,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: icons.CoreIcons.closeAll,
+            icon: "icon-[mdi--close-box-multiple-outline]",
             "aria-label": "close-all",
             onClick: onCloseAll
           }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
@@ -130,7 +129,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: icons.CoreIcons.close,
+            icon: "icon-[mdi--close]",
             "aria-label": "close",
             onClick: function onClick() {
               return handleClose(false);

package/dist/cjs/overlays/tooltip/Tooltip.js

@@ -9,7 +9,6 @@ var classNames = require('classnames');
 var react = require('react');
 var Icon = require('../../components/icon/Icon.js');
 var useIsRtl = require('../../hooks/useIsRtl.js');
-var icons = require('../../types/icons.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 
@@ -102,7 +101,7 @@ var Tooltip = function Tooltip(_ref) {
         className: "ms-2 cursor-pointer text-dimmed flex-content opacity-75 hover:opacity-90 active:opacity-60",
         onClick: handler,
         children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-          icon: icons.CoreIcons.copy
+          icon: "icon-[mdi--content-copy]"
         })
       });
     }

package/dist/cjs/typography/Copy.js

@@ -5,7 +5,6 @@ var react = require('react');
 var reactI18next = require('react-i18next');
 var Button = require('../components/button/Button.js');
 var Tooltip = require('../overlays/tooltip/Tooltip.js');
-var icons = require('../types/icons.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 /*
@@ -45,7 +44,7 @@ var Copy = function Copy(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
     content: t("action.copy"),
     children: /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-      icon: icons.CoreIcons.copy,
+      icon: "icon-[mdi--content-copy]",
       "aria-label": "Copy text",
       actionMessage: t("action.copied"),
       variant: "link",