@react-fabric/core 1.0.0-beta.57 → 1.0.0-beta.59

package/dist/cjs/index.js

@@ -72,6 +72,7 @@ var useNavigator = require('./hooks/useNavigator.js');
 var useOverlayService = require('./hooks/useOverlayService.js');
 var useResize = require('./hooks/useResize.js');
 var useResizeObserver = require('./hooks/useResizeObserver.js');
+var useStepper = require('./hooks/useStepper.js');
 var useStorage = require('./hooks/useStorage.js');
 var HotKey = require('./hotkeys/HotKey.js');
 var HotKeyLabel = require('./hotkeys/HotKeyLabel.js');
@@ -107,6 +108,7 @@ exports.DropdownDismiss = Dropdown.DropdownDismiss;
 exports.DropdownTool = DropdownTool.DropdownTool;
 exports.EmptyContent = EmptyContent.EmptyContent;
 exports.Icon = Icon.Icon;
+exports.getIconProps = Icon.getIconProps;
 exports.Image = Media.Image;
 exports.Video = Media.Video;
 exports.ContextMenu = ContextMenu.ContextMenu;
@@ -159,6 +161,7 @@ exports.useNavigator = useNavigator.useNavigator;
 exports.useOverlayService = useOverlayService.useOverlayService;
 exports.useResize = useResize.useResize;
 exports.useResizeObserver = useResizeObserver.useResizeObserver;
+exports.useStepper = useStepper.useStepper;
 exports.useLocalStorage = useStorage.useLocalStorage;
 exports.useSessionStorage = useStorage.useSessionStorage;
 exports.HotKey = HotKey.HotKey;

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

@@ -23,6 +23,7 @@ var Alert = function Alert(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "primary" : _ref$color,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose,
@@ -57,6 +58,7 @@ var Alert = function Alert(_ref) {
   var iconType = react.useMemo(function () {
     if (icon) return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon,
+      iconSrc: iconSrc,
       size: "md",
       rtlFlip: rtlFlip,
       color: "".concat(color, "-600")
@@ -83,7 +85,7 @@ var Alert = function Alert(_ref) {
           color: "".concat(color, "-600")
         });
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
   var handleClose = react.useCallback(function (ret) {
     refs.floating.current && (refs.floating.current.dataset.show = "false");
     setTimeout(function () {

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

@@ -13,15 +13,12 @@ var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var icons = require('../../types/icons.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "root", "hideMask", "align"];
+var _excluded = ["icon", "iconClassName", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "root", "hideMask", "align"];
 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; }
 var Flyout = function Flyout(_ref) {
   var icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     iconClassName = _ref.iconClassName,
-    rtlFlip = _ref.rtlFlip,
     title = _ref.title,
     actions = _ref.actions,
     closeOnClick = _ref.closeOnClick,
@@ -111,13 +108,9 @@ var Flyout = function Flyout(_ref) {
             flex: true,
             align: "center",
             className: classNames("fabric-flyoutHeader", headerClassName),
-            children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-              icon: icon,
-              bg: iconBg,
-              color: iconColor,
-              className: classNames(iconClassName, "p-1"),
-              rtlFlip: rtlFlip
-            }), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
+            children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+              className: classNames(iconClassName, "p-1")
+            }, Icon.getIconProps(icon))), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
               className: "flex-1 truncate py-2 px-1",
               children: title
             }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {

package/dist/cjs/overlays/message/Message.js

@@ -35,6 +35,7 @@ var Message = function Message(_ref) {
     message = _ref.message,
     color = _ref.color,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose;
@@ -59,6 +60,7 @@ var Message = function Message(_ref) {
     ref: elRef,
     children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon,
+      iconSrc: iconSrc,
       size: "md",
       rtlFlip: rtlFlip
     }), title && /*#__PURE__*/jsxRuntime.jsx("div", {

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

@@ -13,15 +13,12 @@ var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var icons = require('../../types/icons.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth"];
+var _excluded = ["icon", "iconClassName", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth"];
 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; }
 var Modal = function Modal(_ref) {
   var icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     iconClassName = _ref.iconClassName,
-    rtlFlip = _ref.rtlFlip,
     title = _ref.title,
     actions = _ref.actions,
     headerClassName = _ref.headerClassName,
@@ -103,13 +100,9 @@ var Modal = function Modal(_ref) {
               flex: true,
               align: "center",
               className: classNames("fabric-modalHeader", headerClassName),
-              children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                icon: icon,
-                bg: iconBg,
-                color: iconColor,
-                className: classNames(iconClassName, "p-1"),
-                rtlFlip: rtlFlip
-              }), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
+              children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+                className: classNames(iconClassName, "p-1")
+              }, Icon.getIconProps(icon))), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
                 className: "flex-1 truncate py-2 px-1",
                 children: title
               }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {

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

@@ -40,6 +40,7 @@ var Toast = function Toast(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "primary" : _ref$color,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose,
@@ -52,6 +53,7 @@ var Toast = function Toast(_ref) {
   var iconType = react.useMemo(function () {
     if (icon) return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon,
+      iconSrc: iconSrc,
       size: "md",
       rtlFlip: rtlFlip,
       color: color + "-600"
@@ -78,7 +80,7 @@ var Toast = function Toast(_ref) {
           color: "".concat(color, "-600")
         });
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
   var elRef = react.useRef(null);
   var handleClose = react.useCallback(function (ret) {
     elRef.current && (elRef.current.dataset.show = "false");

package/dist/cjs/types/icons.js

@@ -183,7 +183,7 @@ exports.CoreIcons = void 0;
   _CoreIcons.mediaAspect = "M19,12H17V15H14V17H19V12M7,9H10V7H5V12H7V9M21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V5A2,2 0 0,0 21,3M21,19H3V5H21V19Z";
   _CoreIcons.mediaZoomer = "M15 0.004c-4.97 0-9 4.030-9 9 0 1.52 0.38 2.95 1.046 4.206l-6.258 6.256 0.005 0.005c-0.489 0.481-0.794 1.147-0.794 1.887 0 1.462 1.185 2.647 2.647 2.647 0.739 0 1.406-0.304 1.886-0.794l-0.002-0.001 6.256-6.255c1.257 0.668 2.689 1.050 4.213 1.050 4.97 0 9-4.030 9-9s-4.030-9-9-9zM3.596 22.273c-0.241 0.25-0.576 0.407-0.95 0.407-0.731 0-1.324-0.592-1.324-1.323 0-0.373 0.157-0.707 0.407-0.95l-0.007-0.006 6.050-6.050c0.529 0.713 1.159 1.343 1.87 1.874l-6.047 6.047zM15 16.505c-4.142 0-7.5-3.359-7.5-7.5s3.358-7.5 7.5-7.5c4.141 0 7.5 3.358 7.5 7.5s-3.359 7.5-7.5 7.5zM15 3.754c0.206 0 0.375 0.168 0.375 0.375s-0.169 0.375-0.375 0.375c-2.486 0-4.5 2.015-4.5 4.5 0 0.207-0.168 0.375-0.375 0.375s-0.375-0.168-0.375-0.375c0-2.9 2.35-5.25 5.25-5.25z";
   _CoreIcons.mediaOrient = "M7.34,6.41L0.86,12.9L7.35,19.38L13.84,12.9L7.34,6.41M3.69,12.9L7.35,9.24L11,12.9L7.34,16.56L3.69,12.9M19.36,6.64C17.61,4.88 15.3,4 13,4V0.76L8.76,5L13,9.24V6C14.79,6 16.58,6.68 17.95,8.05C20.68,10.78 20.68,15.22 17.95,17.95C16.58,19.32 14.79,20 13,20C12.03,20 11.06,19.79 10.16,19.39L8.67,20.88C10,21.62 11.5,22 13,22C15.3,22 17.61,21.12 19.36,19.36C22.88,15.85 22.88,10.15 19.36,6.64Z";
-  _CoreIcons.mediaCrop = "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z";
+  _CoreIcons.mediaCrop = "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z";
   _CoreIcons.mediaImage = "M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z";
   _CoreIcons.mediaVideo = "M15,8V16H5V8H15M16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5V7A1,1 0 0,0 16,6Z";
   _CoreIcons.mediaAudio = "M17.3,11C17.3,14 14.76,16.1 12,16.1C9.24,16.1 6.7,14 6.7,11H5C5,14.41 7.72,17.23 11,17.72V21H13V17.72C16.28,17.23 19,14.41 19,11M10.8,4.9C10.8,4.24 11.34,3.7 12,3.7C12.66,3.7 13.2,4.24 13.2,4.9L13.19,11.1C13.19,11.76 12.66,12.3 12,12.3C11.34,12.3 10.8,11.76 10.8,11.1M12,14A3,3 0 0,0 15,11V5A3,3 0 0,0 12,2A3,3 0 0,0 9,5V11A3,3 0 0,0 12,14Z";
@@ -205,6 +205,7 @@ exports.CoreIcons = void 0;
   _CoreIcons.mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
   _CoreIcons.mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
   _CoreIcons.mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+  _CoreIcons.mediaCapture = "M12,10L11.06,12.06L9,13L11.06,13.94L12,16L12.94,13.94L15,13L12.94,12.06L12,10M20,5H16.83L15,3H9L7.17,5H4A2,2 0 0,0 2,7V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V7A2,2 0 0,0 20,5M20,19H4V7H8.05L8.64,6.35L9.88,5H14.12L15.36,6.35L15.95,7H20V19M12,8A5,5 0 0,0 7,13A5,5 0 0,0 12,18A5,5 0 0,0 17,13A5,5 0 0,0 12,8M12,16A3,3 0 0,1 9,13A3,3 0 0,1 12,10A3,3 0 0,1 15,13A3,3 0 0,1 12,16Z";
   _CoreIcons.mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
   _CoreIcons.mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
   _CoreIcons.mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";

package/dist/esm/components/avatar/Avatar.js

@@ -119,6 +119,7 @@ var Avatar = function Avatar(_ref) {
     if (fallbackIcon) {
       return isSvgPath(fallbackIcon) ? /*#__PURE__*/jsx("svg", {
         viewBox: viewBox,
+        className: "p-[0.125em]",
         children: /*#__PURE__*/jsx("path", {
           fill: "currentColor",
           d: fallbackIcon.toString()

package/dist/esm/components/badge/Badge.js

@@ -5,10 +5,10 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { isObject, isNil, isNumber, mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { isValidElement, useMemo, cloneElement } from 'react';
-import { Icon } from '../icon/Icon.js';
+import { Icon, getIconProps } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "className", "value", "max", "ping", "block", "inline", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
+var _excluded = ["ref", "className", "value", "max", "ping", "block", "inline", "placement", "children", "forButton", "icon"];
 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; }
 /**
@@ -65,9 +65,6 @@ var Badge = function Badge(_ref) {
     _ref$forButton = _ref.forButton,
     forButton = _ref$forButton === void 0 ? false : _ref$forButton,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     rest = _objectWithoutProperties(_ref, _excluded);
   var label = useMemo(function () {
     if ( /*#__PURE__*/isValidElement(value)) {
@@ -99,12 +96,7 @@ var Badge = function Badge(_ref) {
       children: [label && /*#__PURE__*/jsx("span", {
         className: "p-1",
         children: label
-      }), icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip
-      })]
+      }), icon && /*#__PURE__*/jsx(Icon, _objectSpread({}, getIconProps(icon)))]
     })]
   });
 };

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

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { mergeRefs, isString, isNil } from '@react-fabric/utilities';
+import { mergeRefs, isString, isObject, isNil } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useState, useCallback, useEffect, useMemo, Fragment, isValidElement } from 'react';
 import { useEffectDebugger } from '../../hooks/useEffectDebugger.js';
@@ -14,9 +14,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 import { AnimationIndicator } from '../animations/Animations.js';
 import { getBadgeProps, Badge } from '../badge/Badge.js';
-import { Icon } from '../icon/Icon.js';
+import { Icon, getIconProps } from '../icon/Icon.js';
 
-var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "preventDefault", "stopPropagation", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
+var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconAlign", "altIcon", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "preventDefault", "stopPropagation", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
 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; }
 /**
@@ -52,12 +52,9 @@ var Button = function Button(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "primary" : _ref$color,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     _ref$iconAlign = _ref.iconAlign,
     iconAlign = _ref$iconAlign === void 0 ? "start" : _ref$iconAlign,
     altIcon = _ref.altIcon,
-    rtlFlip = _ref.rtlFlip,
     rounded = _ref.rounded,
     size = _ref.size,
     disabled = _ref.disabled,
@@ -162,19 +159,15 @@ var Button = function Button(_ref) {
         "data-active": active,
         "data-variant": variant
       }, aria), {}, {
-        children: [icon && /*#__PURE__*/jsx(Icon, {
+        children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
           className: "fabric-buttonIcon",
-          icon: icon,
-          bg: iconBg,
-          color: iconColor,
-          rtlFlip: rtlFlip,
           "data-align": iconAlign
-        }), /*#__PURE__*/isValidElement(children) && /*#__PURE__*/jsx("div", {
+        }, getIconProps(icon))), /*#__PURE__*/isValidElement(children) && /*#__PURE__*/jsx("div", {
           className: "fabric-buttonChild",
           children: children
         }), isString(children) && /*#__PURE__*/jsx("label", {
           className: classNames("fabric-buttonLabel", "truncate"),
-          "data-colored-icon": !!iconBg,
+          "data-colored-icon": isObject(icon) && "bg" in icon,
           children: children
         }), !isNil(badge) && /*#__PURE__*/jsx(Badge, _objectSpread({}, badgeProps)), hotKey && children && /*#__PURE__*/jsx(HotKeyLabel, {
           keyCombo: hotKey

package/dist/esm/components/chip/Chip.js

@@ -8,9 +8,9 @@ import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
-import { Icon } from '../icon/Icon.js';
+import { Icon, getIconProps } from '../icon/Icon.js';
 
-var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "preventDefault", "stopPropagation", "as"];
+var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "preventDefault", "stopPropagation", "as"];
 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; }
 var SizeMap = {
@@ -49,9 +49,6 @@ var Chip = function Chip(_ref) {
     color = _ref.color,
     variant = _ref.variant,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     disabled = _ref.disabled,
     onClick = _ref.onClick,
     onIconClick = _ref.onIconClick,
@@ -95,17 +92,13 @@ var Chip = function Chip(_ref) {
     "data-inner-clickable": !!onClick,
     onClick: disabled ? undefined : clickHandler
   }, aria), {}, {
-    children: [icon && /*#__PURE__*/jsx(Icon, {
+    children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
       "data-ref": "chipIcon",
       className: classNames("fabric-chipIcon", "m-1 flex-content"),
-      icon: icon,
-      bg: iconBg,
-      onClick: onIconClick,
-      color: iconColor,
-      rtlFlip: rtlFlip
-    }), children && /*#__PURE__*/jsx("label", {
+      onClick: onIconClick
+    }, getIconProps(icon))), children && /*#__PURE__*/jsx("label", {
       "data-ref": "chipLabel",
-      className: classNames("fabric-chipLabel", "truncate"),
+      className: classNames("fabric-chipLabel", "truncate flex-1"),
       children: children
     }), onRemove && /*#__PURE__*/jsx("span", {
       role: "none",

package/dist/esm/components/icon/Icon.js

@@ -1,16 +1,25 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { isSvgPath, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo, isValidElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 
-var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
+var _excluded = ["ref", "icon", "iconSrc", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
 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; }
+var getIconProps = function getIconProps(props) {
+  if (typeof props === "string") {
+    return {
+      icon: props
+    };
+  }
+  return props;
+};
 var SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
 var SizeMap = {
   xs: "0.625rem",
@@ -52,6 +61,7 @@ var SizeMap = {
 var Icon = function Icon(_ref) {
   var ref = _ref.ref,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     bg = _ref.bg,
     color = _ref.color,
     _ref$size = _ref.size,
@@ -65,6 +75,14 @@ var Icon = function Icon(_ref) {
     className = _ref.className,
     _onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageFailed = _useState2[0],
+    setImageFailed = _useState2[1];
+  useEffect(function () {
+    setImageFailed(false);
+  }, [iconSrc]);
+
   /** ***************** style map *******************/
   var styles = useMemo(function () {
     var s = {};
@@ -90,6 +108,7 @@ var Icon = function Icon(_ref) {
 
   /** ***************** render icon *******************/
   var iconEl = useMemo(function () {
+    if ( /*#__PURE__*/isValidElement(icon)) return icon;
     if (!isString(icon)) {
       throw Error("Invalid icon expected string");
     }
@@ -116,7 +135,7 @@ var Icon = function Icon(_ref) {
       className: "".concat(icon)
     });
   }, [icon, isSvg, viewBox]);
-  return /*#__PURE__*/jsx("dfn", _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
     "data-ref": "icon",
     ref: ref
   }, rest), {}, {
@@ -131,8 +150,13 @@ var Icon = function Icon(_ref) {
     style: styles,
     "data-clickable": !!_onClick,
     "data-inner-clickable": !!_onClick,
-    children: iconEl
+    children: [iconSrc && !imageFailed && /*#__PURE__*/jsx("img", {
+      src: iconSrc,
+      onError: function onError() {
+        return setImageFailed(true);
+      }
+    }), (!iconSrc || imageFailed) && iconEl]
   }));
 };
 
-export { Icon };
+export { Icon, getIconProps };

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

@@ -14,11 +14,11 @@ import '../../hooks/useEffectDebugger.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
 import { getBadgeProps, Badge } from '../badge/Badge.js';
-import { Icon } from '../icon/Icon.js';
+import { Icon, getIconProps } from '../icon/Icon.js';
 import '../../types/icons.js';
 import '../../hotkeys/HotKeyWrapper.js';
 
-var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
+var _excluded = ["as", "label", "color", "className", "icon", "appendLabel", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
   _excluded2 = ["children"];
 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; }
@@ -50,10 +50,7 @@ var MenuItem = function MenuItem(_ref) {
     color = _ref$color === void 0 ? "primary" : _ref$color,
     className = _ref.className,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     appendLabel = _ref.appendLabel,
-    rtlFlip = _ref.rtlFlip,
     altIcon = _ref.altIcon,
     id = _ref.id,
     active = _ref.active,
@@ -82,14 +79,10 @@ var MenuItem = function MenuItem(_ref) {
     if (minimal && !path) {
       path = iconToken(label);
     }
-    return /*#__PURE__*/jsx(Icon, {
-      className: classNames("fabric-menuIcon", minimal && "minimal"),
-      icon: (_path = path) !== null && _path !== void 0 ? _path : "",
-      bg: iconBg,
-      color: iconColor,
-      rtlFlip: rtlFlip
-    });
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+    return /*#__PURE__*/jsx(Icon, _objectSpread({
+      className: classNames("fabric-menuIcon", minimal && "minimal")
+    }, getIconProps((_path = path) !== null && _path !== void 0 ? _path : "")));
+  }, [icon, minimal, label]);
   var Wrapper = useCallback(function (_ref2) {
     var children = _ref2.children,
       rest = _objectWithoutProperties(_ref2, _excluded2);

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

@@ -6,13 +6,13 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 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 { Icon } from '../icon/Icon.js';
-import { HotKey } from '../../hotkeys/HotKey.js';
+import { Icon, getIconProps } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "iconBg", "iconColor", "rtlFlip", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
+var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
 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; }
 /**
@@ -31,8 +31,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * <Panel
  *   title="Panel Title"
  *   icon={CoreIcons.info}
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable
@@ -60,9 +58,6 @@ var Panel = function Panel(_ref) {
     title = _ref.title,
     actions = _ref.actions,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     panelId = _ref.panelId,
     height = _ref.height,
     width = _ref.width,
@@ -121,13 +116,9 @@ var Panel = function Panel(_ref) {
         className: classNames("fabric-panelAction", "cursor-pointer"),
         icon: CoreIcons.chevronLeft,
         onClick: onBack
-      }), icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
+      }), icon && /*#__PURE__*/jsx(Icon, _objectSpread({
         className: "p-2 text-md select-none pointer-events-none"
-      }), /*#__PURE__*/jsx("div", {
+      }, getIconProps(icon))), /*#__PURE__*/jsx("div", {
         className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
         children: title
       }), /*#__PURE__*/jsx("div", {

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

@@ -13,11 +13,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import '../../hotkeys/HotKeyWrapper.js';
 import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
 import { getBadgeProps, Badge } from '../badge/Badge.js';
-import { Icon } from '../icon/Icon.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", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
+var _excluded = ["ref", "as", "id", "className", "label", "icon", "badge", "disabled", "onClose", "active", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
 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; }
 /**
@@ -34,8 +34,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  *   id="tab1"
  *   label="Tab 1"
  *   icon="home"
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   badge="New"
  *   onClick={(id) => console.log(`Tab clicked: ${id}`)}
  *   onClose={() => console.log("Tab closed")}
@@ -58,9 +56,6 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     label = _ref.label,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     badge = _ref.badge,
     disabled = _ref.disabled,
     onClose = _ref.onClose,
@@ -98,13 +93,9 @@ var Tab = function Tab(_ref) {
       },
       ref: ref
     }, aria), {}, {
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
+      children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
         className: "flex-content p-2"
-      }), !minimal && /*#__PURE__*/jsx("label", {
+      }, getIconProps(icon))), !minimal && /*#__PURE__*/jsx("label", {
         className: "flex-initial truncate text-center px-1 py-1",
         children: label
       }), badge && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {

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

@@ -5,7 +5,7 @@ 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 { Icon } from '../../components/icon/Icon.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';
@@ -28,8 +28,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * <Aside
  *   title="Sidebar Title"
  *   icon={CoreIcons.menu}
- *   iconBg="bg-gray-200"
- *   iconColor="text-gray-800"
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"
@@ -59,9 +57,6 @@ var Aside = function Aside(_ref) {
   var children = _ref.children,
     title = _ref.title,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     className = _ref.className,
     bodyClassName = _ref.bodyClassName,
     headerClassName = _ref.headerClassName,
@@ -160,13 +155,9 @@ var Aside = function Aside(_ref) {
         rtlFlip: true,
         onClick: toggleCollapse,
         "data-ref": "asideToggle"
-      }), icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
+      }), icon && /*#__PURE__*/jsx(Icon, _objectSpread({
         className: classNames("fabric-asideIcon", "p-1 text-lg select-none pointer-events-none")
-      }), actions && /*#__PURE__*/jsx("div", {
+      }, getIconProps(icon))), actions && /*#__PURE__*/jsx("div", {
         className: "fabric-asideActions",
         children: actions
       })]

package/dist/esm/core/headfoot/HeadFoot.js

@@ -50,7 +50,8 @@ var HeadFoot = function HeadFoot(_ref) {
 var Header = function Header(props) {
   return /*#__PURE__*/jsx(HeadFoot, _objectSpread({
     as: "header",
-    area: "head"
+    area: "head",
+    "data-ref": "header"
   }, props));
 };
 
@@ -78,7 +79,8 @@ var Header = function Header(props) {
 var Footer = function Footer(props) {
   return /*#__PURE__*/jsx(HeadFoot, _objectSpread({
     as: "footer",
-    area: "foot"
+    area: "foot",
+    "data-ref": "footer"
   }, props));
 };