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

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",

package/dist/esm/components/animations/Animations.js

@@ -83,35 +83,31 @@ var AnimationIndicator = function AnimationIndicator(_ref) {
 };
 
 /**
- * A component that displays an animated bars loader.
- * It can be customized with color and size properties.
- * This component is typically used to indicate loading states in the UI.
- *
- * @param {Object} props - The properties for the AnimationBars component.
- * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
- * @param {number | string} [props.size="2rem"] - The size of the bars.
- * @returns {JSX.Element} The rendered AnimationBars component.
- *
- * @example
- * ```jsx
- * <AnimationBars color="primary-500" size="3rem" />
- * ```
+ * A component that displays a loading animation with a customizable icon, color, size, and mask blur.
+ * It is typically used to indicate loading states in the UI.
  *
- * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ * @param {Object} props - The properties for the AnimationLoader component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the loader icon.
+ * @param {number | string} [props.size="2rem"] - The size of the loader icon.
+ * @param {string} props.icon - The icon to be displayed as the loader.
+ * @param {"sm" | "md" | "lg"} [props.maskBlur] - The blur effect for the background mask.
+ * @returns {JSX.Element} The rendered AnimationLoader component.
  */
-var AnimationBars = function AnimationBars(_ref2) {
+var AnimationLoader = function AnimationLoader(_ref2) {
   var _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? "tint-500" : _ref2$color,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? "2rem" : _ref2$size;
+    size = _ref2$size === void 0 ? "2rem" : _ref2$size,
+    icon = _ref2.icon,
+    maskBlur = _ref2.maskBlur;
   return /*#__PURE__*/jsx("div", {
-    className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
+    className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait", maskBlur === "sm" && "backdrop-blur-sm", maskBlur === "md" && "backdrop-blur-md", maskBlur === "lg" && "backdrop-blur-lg"),
     children: /*#__PURE__*/jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded"),
+      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm leading-0 rounded"),
       children: /*#__PURE__*/jsx("div", {
-        className: classNames("fabric-bars"),
+        className: classNames("aspect-square", icon),
         style: {
-          width: size,
+          fontSize: size,
           color: getColor(color)
         }
       })
@@ -119,42 +115,50 @@ var AnimationBars = function AnimationBars(_ref2) {
   });
 };
 
+/**
+ * A component that displays an animated bars loader.
+ * It can be customized with color and size properties.
+ * This component is typically used to indicate loading states in the UI.
+ *
+ * @param {Object} props - The properties for the LoadingBars component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
+ * @param {number | string} [props.size="2rem"] - The size of the bars.
+ * @returns {JSX.Element} The rendered LoadingBars component.
+ *
+ * @example
+ * ```jsx
+ * <LoadingBars color="primary-500" size="3rem" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
+var LoadingBars = function LoadingBars(props) {
+  return /*#__PURE__*/jsx(AnimationLoader, _objectSpread({
+    icon: "icon-[svg-spinners--bars-scale-fade]"
+  }, props));
+};
+
 /**
  * A component that displays a spinner animation.
  * It can be customized with color and size properties.
  * This component is typically used to indicate loading states in the UI.
  *
- * @param {Object} props - The properties for the AnimationSpinner component.
+ * @param {Object} props - The properties for the LoadingSpinner component.
  * @param {ColorType | PaletteType | string} [props.color="tint-700"] - The color of the spinner.
  * @param {number | string} [props.size="2rem"] - The size of the spinner.
- * @returns {JSX.Element} The rendered AnimationSpinner component.
+ * @returns {JSX.Element} The rendered LoadingSpinner component.
  *
  * @example
  * ```jsx
- * <AnimationSpinner color="primary-500" size="3rem" />
+ * <LoadingSpinner color="primary-500" size="3rem" />
  * ```
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
-var AnimationSpinner = function AnimationSpinner(_ref3) {
-  var _ref3$color = _ref3.color,
-    color = _ref3$color === void 0 ? "tint-700" : _ref3$color,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? "2rem" : _ref3$size;
-  return /*#__PURE__*/jsx("div", {
-    className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
-    "data-ref": "spinner",
-    children: /*#__PURE__*/jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded"),
-      children: /*#__PURE__*/jsx("div", {
-        className: classNames("fabric-spinner"),
-        style: {
-          width: size,
-          color: getColor(color)
-        }
-      })
-    })
-  });
+var LoadingSpinner = function LoadingSpinner(props) {
+  return /*#__PURE__*/jsx(AnimationLoader, _objectSpread({
+    icon: "icon-[svg-spinners--eclipse]"
+  }, props));
 };
 
 /**
@@ -174,9 +178,9 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
-var Skeleton = function Skeleton(_ref4) {
-  var className = _ref4.className,
-    rest = _objectWithoutProperties(_ref4, _excluded2);
+var Skeleton = function Skeleton(_ref3) {
+  var className = _ref3.className,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     className: classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg"),
     "data-ref": "skeleton"
@@ -212,7 +216,7 @@ var Skeleton = function Skeleton(_ref4) {
  *
  * @returns {JSX.Element} The rendered Loading component.
  */
-var Loading = function Loading() {
+var LoadingLine = function LoadingLine() {
   return /*#__PURE__*/jsx("div", {
     className: classNames("fabric-loader", "area-[loader] relative overflow-x-clip"),
     "data-ref": "loading",
@@ -222,4 +226,4 @@ var Loading = function Loading() {
   });
 };
 
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton };
+export { AnimationIndicator, AnimationLoader, LoadingBars, LoadingLine, LoadingSpinner, Skeleton };

package/dist/esm/components/button/Button.js

@@ -50,7 +50,7 @@ var Button = function Button(_ref) {
     className = _ref.className,
     active = _ref.active,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color,
+    color = _ref$color === void 0 ? "default" : _ref$color,
     icon = _ref.icon,
     _ref$iconAlign = _ref.iconAlign,
     iconAlign = _ref$iconAlign === void 0 ? "start" : _ref$iconAlign,

package/dist/esm/components/callout/Callout.js

@@ -3,7 +3,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import { CoreIcons } from '../../types/icons.js';
 import { Icon } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -13,7 +12,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // colors for different callout types
 var colors = {
   none: "bg-base text-tint-900 border-tint-100",
-  tint: "bg-tint-50/50 text-tint-800 border-tint-300",
+  "default": "bg-tint-50/50 text-tint-800 border-tint-300",
+  muted: "bg-tint-50/50 text-muted border-muted",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",
   info: "bg-info-50/50 text-info-800 border-info-300",
@@ -51,7 +51,7 @@ var colors = {
 var Callout = function Callout(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "tint" : _ref$color,
+    color = _ref$color === void 0 ? "default" : _ref$color,
     legend = _ref.legend,
     title = _ref.title,
     icon = _ref.icon,
@@ -86,7 +86,7 @@ var Callout = function Callout(_ref) {
       size: "md",
       "data-ref": "calloutClose",
       className: classNames("absolute end-2", legend ? "top-0" : "top-2"),
-      icon: CoreIcons.close,
+      icon: "icon-[mdi--close]",
       onClick: onClose
     })]
   }));

package/dist/esm/components/collapsable/Collapsable.js

@@ -6,7 +6,6 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useState, useRef, useImperativeHandle, useEffect, useMemo, Children } from 'react';
-import { CoreIcons } from '../../types/icons.js';
 import { Icon } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -26,8 +25,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```jsx
  * <Collapsable
  *   iconAlign="start"
- *   iconOpen={CoreIcons.chevronDown}
- *   iconClosed={CoreIcons.chevronRight}
+ *   iconOpen="icon-[mdi--chevron-down]"
+ *   iconClosed="icon-[mdi--chevron-right]"
  *   open={true}
  *   onOpen={() => console.log("Opened")}
  *   onClose={() => console.log("Closed")}
@@ -49,9 +48,9 @@ var Collapsable = function Collapsable(_ref) {
     iconAlign = _ref.iconAlign,
     stickyHeader = _ref.stickyHeader,
     _ref$iconClosed = _ref.iconClosed,
-    iconClosed = _ref$iconClosed === void 0 ? CoreIcons.chevronRight : _ref$iconClosed,
+    iconClosed = _ref$iconClosed === void 0 ? "icon-[mdi--chevron-right]" : _ref$iconClosed,
     _ref$iconOpen = _ref.iconOpen,
-    iconOpen = _ref$iconOpen === void 0 ? CoreIcons.chevronDown : _ref$iconOpen,
+    iconOpen = _ref$iconOpen === void 0 ? "icon-[mdi--chevron-down]" : _ref$iconOpen,
     open = _ref.open;
     _ref.onClose;
     _ref.onOpen;

package/dist/esm/components/dropdown/DropdownTool.js

@@ -3,7 +3,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import { CoreIcons } from '../../types/icons.js';
 import { Icon } from '../icon/Icon.js';
 import { Dropdown } from './Dropdown.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -19,7 +18,7 @@ var DropdownTool = function DropdownTool(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs(Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(Icon, {
-      icon: icon !== null && icon !== void 0 ? icon : CoreIcons.caretDown,
+      icon: icon !== null && icon !== void 0 ? icon : "icon-[mdi--menu-down]",
       className: classNames("outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer", className, groupHover && "hidden group-hover/tool:inline-block data-dropdown-open:inline-block")
     }), children]
   }));

package/dist/esm/components/media/Media.js

@@ -6,7 +6,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { getImageColorset } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useState, useEffect, useRef, Fragment } from 'react';
-import { CoreIcons } from '../../types/icons.js';
 import { Button } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -21,8 +20,10 @@ var cover = {
   contain: "object-contain"
 };
 var loadIndicator = /*#__PURE__*/jsx("div", {
-  className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
-  children: "\u25CF\u25CF\u25CF"
+  className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm text-gray"),
+  children: /*#__PURE__*/jsx("i", {
+    className: "icon-[svg-spinners--pulse-rings-2]"
+  })
 });
 
 /**
@@ -94,7 +95,7 @@ var Image = function Image(_ref) {
     }), errored && /*#__PURE__*/jsx(Icon, {
       size: "2rem",
       className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-      icon: CoreIcons.mediaImageBroken
+      icon: "icon-[mdi--image-off-outline]"
     })]
   }));
 };
@@ -211,7 +212,7 @@ var Video = function Video(_ref2) {
           rounded: true,
           variant: "link",
           className: "fabric-mediaControlPlaceholder",
-          icon: CoreIcons.ellipsis,
+          icon: "icon-[mdi--dots-vertical]",
           "aria-label": "controls"
         }), /*#__PURE__*/jsx(Button, {
           rounded: true,
@@ -221,7 +222,7 @@ var Video = function Video(_ref2) {
           onClick: function onClick() {
             videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
           },
-          icon: volume ? CoreIcons.volumeOn : CoreIcons.volumeOff
+          icon: volume ? "icon-[mdi--volume]" : "icon-[mdi--volume-mute]"
         }), /*#__PURE__*/jsx(Button, {
           rounded: true,
           variant: "link",
@@ -231,13 +232,13 @@ var Video = function Video(_ref2) {
             var _videoRef$current3, _videoRef$current4, _videoRef$current5;
             (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
           },
-          icon: state ? CoreIcons.pause : CoreIcons.play
+          icon: state ? "icon-[mdi--pause]" : "icon-[mdi--play]"
         })]
       })]
     }), errored && /*#__PURE__*/jsx(Icon, {
       size: "2rem",
       className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-      icon: CoreIcons.mediaVideoBroken
+      icon: "icon-[mdi--video-off-outline]"
     })]
   }));
 };

package/dist/esm/components/menu/Menu.js

@@ -8,7 +8,6 @@ import { mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useState, useRef, useEffect, useCallback, cloneElement, Fragment } from 'react';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
-import { CoreIcons } from '../../types/icons.js';
 import { cloneChildren } from '../../utils/cloneElement.js';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
@@ -166,7 +165,7 @@ var MenuComponent = function MenuComponent(_ref) {
     }))), {}, {
       "data-open": isOpen,
       minimal: minimal,
-      altIcon: CoreIcons.chevronRight,
+      altIcon: "icon-[mdi--menu-right]",
       ref: mergeRefs(refs.setReference, ref)
     })), /*#__PURE__*/jsx(FloatingList, {
       elementsRef: elementsRef,

package/dist/esm/components/menu/MenuItem.js

@@ -15,7 +15,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
 import { getBadgeProps, Badge } from '../badge/Badge.js';
 import { Icon, getIconProps } from '../icon/Icon.js';
-import '../../types/icons.js';
 import '../../hotkeys/HotKeyWrapper.js';
 
 var _excluded = ["as", "label", "color", "className", "icon", "appendLabel", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],

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

@@ -5,7 +5,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useCallback } from 'react';
 import { HotKey } from '../../hotkeys/HotKey.js';
-import { CoreIcons } from '../../types/icons.js';
 import { Icon } from '../icon/Icon.js';
 import { isEmpty } from '@react-fabric/utilities';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -66,7 +65,7 @@ var Navigator = function Navigator(_ref) {
       className: "text-[1em] p-1",
       "aria-label": "previous",
       "data-ref": "previous",
-      icon: CoreIcons.chevronLeft,
+      icon: "icon-[mdi--chevron-left]",
       disabled: !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: CoreIcons.chevronRight,
+      icon: "icon-[mdi--chevron-right]",
       disabled: !isEmpty(current) && current + 1 === length,
       onClick: function onClick(e) {
         return [e.stopPropagation(), navNext()];

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

@@ -7,8 +7,7 @@ import classNames from 'classnames';
 import { useMemo } from 'react';
 import { usePropToggle } from '../../hooks/usePropToggle.js';
 import { HotKey } from '../../hotkeys/HotKey.js';
-import { CoreIcons } from '../../types/icons.js';
-import { Loading } from '../animations/Animations.js';
+import { LoadingLine } from '../animations/Animations.js';
 import { Icon, getIconProps } from '../icon/Icon.js';
 import { jsxs, jsx } from '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__*/jsx(Icon, {
+        rtlFlip: true,
         "data-ref": "panelBack",
         className: classNames("fabric-panelAction", "cursor-pointer"),
-        icon: CoreIcons.chevronLeft,
+        icon: "icon-[mdi--chevron-left]",
         onClick: onBack
       }), icon && /*#__PURE__*/jsx(Icon, _objectSpread({
         className: "p-2 text-md select-none pointer-events-none"
@@ -133,24 +133,24 @@ var Panel = function Panel(_ref) {
         children: [expandable && /*#__PURE__*/jsx(Icon, {
           "data-ref": "panelExpand",
           className: classNames("fabric-panelAction", "cursor-pointer"),
-          icon: expanded ? CoreIcons.minimize : CoreIcons.maximize,
+          icon: expanded ? "icon-[mdi--fullscreen-exit]" : "icon-[mdi--fullscreen]",
           onClick: toggleExpand
         }), !expanded && collapsable && /*#__PURE__*/jsx(Icon, {
           "data-ref": "panelCollapse",
           className: classNames("fabric-panelAction", "cursor-pointer"),
-          icon: collapsed ? CoreIcons.expand : CoreIcons.collapse,
+          icon: collapsed ? "icon-[mdi--plus-box]" : "icon-[mdi--minus-box]",
           onClick: toggleCollapse
         }), !expanded && onClose && /*#__PURE__*/jsx(Icon, {
           "data-ref": "panelClose",
           className: classNames("fabric-panelAction", "cursor-pointer"),
-          icon: CoreIcons.close,
+          icon: "icon-[mdi--close]",
           onClick: onClose
         })]
       })]
     }), (!collapsed || expanded) && /*#__PURE__*/jsxs("div", {
       "data-ref": "panelBody",
       className: classNames("fabric-panelBody", "area-content grid overflow-hidden"),
-      children: [loading && /*#__PURE__*/jsx(Loading, {}), children]
+      children: [loading && /*#__PURE__*/jsx(LoadingLine, {}), children]
     })]
   }));
 };

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

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

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

@@ -4,12 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { Loading } from '../../components/animations/Animations.js';
+import { LoadingLine } from '../../components/animations/Animations.js';
 import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { useLayoutEffectDebugger } from '../../hooks/useEffectDebugger.js';
 import { usePropToggle } from '../../hooks/usePropToggle.js';
 import { useResize } from '../../hooks/useResize.js';
-import { CoreIcons } from '../../types/icons.js';
 import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
 import { jsxs, jsx } from '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__*/jsx(Icon, {
         "aria-label": isCollapsed ? "expand" : "collapse",
         className: classNames("fabric-asideCollapse", "p-2 select-none"),
-        icon: 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__*/jsx(Loading, {}), isCollapsed && /*#__PURE__*/jsx("div", {
+    }), loading && /*#__PURE__*/jsx(LoadingLine, {}), isCollapsed && /*#__PURE__*/jsx("div", {
       role: "none",
       onClick: tryPeek,
       "data-ref": "asidePlaceholder",

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

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import { Loading } from '../../components/animations/Animations.js';
+import { LoadingLine } from '../../components/animations/Animations.js';
 import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -60,7 +60,7 @@ var Page = function Page(_ref) {
       children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
         size: "1.25em"
       }, getIconProps(icon))), title]
-    }), loading && /*#__PURE__*/jsx(Loading, {}), children]
+    }), loading && /*#__PURE__*/jsx(LoadingLine, {}), children]
   }));
 };
 

package/dist/esm/hooks/useStepper.js

@@ -13,7 +13,6 @@ import { Icon } from '../components/icon/Icon.js';
 import '@floating-ui/react';
 import '../hotkeys/HotKeyWrapper.js';
 import 'react-i18next';
-import '../types/icons.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 export { ActionLabel } from './components/actionLabel/ActionLabel.js';
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton } from './components/animations/Animations.js';
+export { AnimationIndicator, LoadingBars, LoadingLine, LoadingSpinner, Skeleton } from './components/animations/Animations.js';
 export { Avatar } from './components/avatar/Avatar.js';
 export { AvatarGroup } from './components/avatar/AvatarGroup.js';
 export { Badge, getBadgeProps } from './components/badge/Badge.js';
@@ -50,7 +50,6 @@ import '@floating-ui/react';
 import 'classnames';
 import 'react';
 import 'react-i18next';
-export { CoreIcons } from './types/icons.js';
 export { Title } from './typography/Title.js';
 export { cloneChildren } from './utils/cloneElement.js';
 import '@react-fabric/utilities';