@react-fabric/core 1.0.0-beta.55 → 1.0.0-beta.58

package/css/components/_card.css

@@ -54,8 +54,10 @@
   }
 
   .fabric-card {
+    --tw-shadow-color: var(--border-color-muted);
+
     background-color: var(--fabric-bg);
-    box-shadow: 0 0 0 1px var(--border-color-muted);
+    box-shadow: 0 0 0 1px var(--tw-shadow-color);
 
     & > * {
       background-color: transparent;
@@ -82,8 +84,10 @@
     }
 
     &.clickable {
+      --tw-shadow-color: var(--border-color-dimmed);
+
       box-shadow:
-        0 0 0 1px var(--border-color-dimmed),
+        0 0 0 1px var(--tw-shadow-color),
         0 1px 2px 0 var(--fabric-shadow);
       transition: box-shadow 0ms;
 
@@ -91,7 +95,7 @@
           :has([data-inner-clickable="true"]:hover)
         ) {
         box-shadow:
-          0 0 0 1px var(--border-color-dimmed),
+          0 0 0 1px var(--tw-shadow-color),
           0 1px 4px 0 var(--fabric-shadow),
           0 8px 16px 0 color-mix(in lab, var(--fabric-shadow) 35%, #0000);
         transition-delay: 150ms;
@@ -101,7 +105,7 @@
           :has([data-inner-clickable="true"]:hover)
         ) {
         transform: translateY(1px);
-        box-shadow: 0 0 0 1px var(--border-color-dimmed);
+        box-shadow: 0 0 0 1px var(--tw-shadow-color);
         transition-delay: 0ms;
       }
 

package/css/components/_icon.css

@@ -40,12 +40,12 @@
       overflow: hidden;
       display: block;
 
-      width: 1em;
-      height: 1em;
+      width: 100%;
+      height: 100%;
 
       line-height: 1;
 
-      object-fit: cover;
+      object-fit: contain;
 
       fill: currentcolor;
     }

package/css/components/_tabPanel.css

@@ -30,6 +30,10 @@
 
       .fabric-tabHeader {
         box-shadow: 0 -1px 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          padding: 0.25rem 0.5rem;
+        }
       }
     }
 
@@ -39,6 +43,10 @@
       .fabric-tabHeader {
         margin-top: 1px;
         box-shadow: 0 1px 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          padding: 0.25rem 0.5rem;
+        }
       }
     }
 
@@ -47,6 +55,22 @@
 
       .fabric-tabHeader {
         box-shadow: -1px 0 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          min-width: 5rem;
+          padding: 0.5rem 0.25rem;
+        }
+
+        &.tab-rotate .fabric-tabButton {
+          flex-flow: column;
+          width: unset !important;
+          min-width: unset !important;
+          min-height: 5rem;
+
+          & > label {
+            writing-mode: sideways-lr;
+          }
+        }
       }
     }
 
@@ -55,6 +79,22 @@
 
       .fabric-tabHeader {
         box-shadow: 1px 0 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          min-width: 5rem;
+          padding: 0.5rem 0.25rem;
+        }
+
+        &.tab-rotate .fabric-tabButton {
+          flex-flow: column;
+          width: unset !important;
+          min-width: unset !important;
+          min-height: 5rem;
+
+          & > label {
+            writing-mode: sideways-rl;
+          }
+        }
       }
     }
   }

package/css/core/_aside.css

@@ -202,9 +202,8 @@
     }
 
     & .fabric-asideTitle {
-      right: calc(2rem + 2px);
-      transform-origin: 100% 100%;
-      transform: rotate(-90deg) translateY(2rem);
+      transform: translateY(2rem);
+      writing-mode: sideways-lr;
     }
 
     & .fabric-asideCollapse {
@@ -227,9 +226,8 @@
     }
 
     & .fabric-asideTitle {
-      left: calc(2rem + 2px);
-      transform-origin: 0 100%;
-      transform: rotate(90deg) translateY(2rem);
+      transform: translateY(2rem);
+      writing-mode: sideways-rl;
     }
 
     & .fabric-asideCollapse {

package/css/reset/_reset.css

@@ -222,4 +222,18 @@
   .mixed-lang {
     unicode-bidi: plaintext;
   }
+
+  [dir="rtl"] {
+    p,
+    pre,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .mixed-lang {
+      text-align: right;
+    }
+  }
 }

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

@@ -10,7 +10,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 
-var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "onClick"];
+var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "preventDefault", "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 SizeMap = {
@@ -64,7 +64,8 @@ var Avatar = function Avatar(_ref) {
     className = _ref.className,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
-    onClick = _ref.onClick,
+    preventDefault = _ref.preventDefault,
+    _onClick = _ref.onClick,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useState = react.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -118,6 +119,7 @@ var Avatar = function Avatar(_ref) {
     if (fallbackIcon) {
       return utilities.isSvgPath(fallbackIcon) ? /*#__PURE__*/jsxRuntime.jsx("svg", {
         viewBox: viewBox,
+        className: "p-[0.125em]",
         children: /*#__PURE__*/jsxRuntime.jsx("path", {
           fill: "currentColor",
           d: fallbackIcon.toString()
@@ -159,9 +161,12 @@ var Avatar = function Avatar(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
     role: "presentation",
     className: classNames("fabric-avatar", className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full"),
-    onClick: onClick,
+    onClick: function onClick(e) {
+      preventDefault && e.preventDefault();
+      _onClick === null || _onClick === void 0 || _onClick(e);
+    },
     style: styles,
-    "data-clickable": !!onClick,
+    "data-clickable": !!_onClick,
     ref: ref
   }, aria), {}, {
     children: [!fallback && avatarImage, fallback && fallbackAvatar]

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

@@ -8,7 +8,7 @@ var react = require('react');
 var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('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 = react.useMemo(function () {
     if ( /*#__PURE__*/react.isValidElement(value)) {
@@ -99,12 +96,7 @@ var Badge = function Badge(_ref) {
       children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "p-1",
         children: label
-      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip
-      })]
+      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({}, Icon.getIconProps(icon)))]
     })]
   });
 };

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

@@ -16,7 +16,7 @@ var Animations = require('../animations/Animations.js');
 var Badge = require('../badge/Badge.js');
 var Icon = require('../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", "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,
@@ -68,6 +65,7 @@ var Button = function Button(_ref) {
     spinOnHover = _ref.spinOnHover,
     onClick = _ref.onClick,
     actionMessage = _ref.actionMessage,
+    preventDefault = _ref.preventDefault,
     stopPropagation = _ref.stopPropagation,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "button" : _ref$type,
@@ -92,6 +90,7 @@ var Button = function Button(_ref) {
   // Handle click events
   var clickHandler = react.useCallback(function (e) {
     setBusy(true);
+    preventDefault && e.preventDefault();
     stopPropagation && e.stopPropagation();
     var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
     void Promise.resolve(ret).then(function (b) {
@@ -100,7 +99,7 @@ var Button = function Button(_ref) {
         setActionDone(true);
       }
     });
-  }, [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation]);
+  }, [onClick, disabled, preventDefault, actionMessage, showActionDoneEvent, stopPropagation]);
 
   /** ***************** reset done state on timeout *******************/
   react.useEffect(function () {
@@ -160,19 +159,15 @@ var Button = function Button(_ref) {
         "data-active": active,
         "data-variant": variant
       }, aria), {}, {
-        children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
           className: "fabric-buttonIcon",
-          icon: icon,
-          bg: iconBg,
-          color: iconColor,
-          rtlFlip: rtlFlip,
           "data-align": iconAlign
-        }), /*#__PURE__*/react.isValidElement(children) && /*#__PURE__*/jsxRuntime.jsx("div", {
+        }, Icon.getIconProps(icon))), /*#__PURE__*/react.isValidElement(children) && /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "fabric-buttonChild",
           children: children
         }), utilities.isString(children) && /*#__PURE__*/jsxRuntime.jsx("label", {
           className: classNames("fabric-buttonLabel", "truncate"),
-          "data-colored-icon": !!iconBg,
+          "data-colored-icon": utilities.isObject(icon) && "bg" in icon,
           children: children
         }), !utilities.isNil(badge) && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread({}, badgeProps)), hotKey && children && /*#__PURE__*/jsxRuntime.jsx(HotKeyLabel.HotKeyLabel, {
           keyCombo: hotKey

package/dist/cjs/components/card/Card.js

@@ -11,7 +11,7 @@ var jsxRuntime = require('react/jsx-runtime');
 require('@react-fabric/utilities');
 var nodeCheck = require('../../utils/nodeCheck.js');
 
-var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "onDragStart", "flex", "draggable", "dragKey", "dragData", "ref"];
+var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "onDragStart", "flex", "draggable", "dragKey", "dragData", "ref", "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; }
 /**
@@ -61,6 +61,7 @@ var Card = function Card(_ref) {
     dragKey = _ref.dragKey,
     dragData = _ref.dragData,
     ref = _ref.ref,
+    as = _ref.as,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useMemo = react.useMemo(function () {
       return react.Children.toArray(children).reduce(function (ret, node) {
@@ -77,22 +78,27 @@ var Card = function Card(_ref) {
     dragKey && ((_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setData(dragKey, JSON.stringify(dragData)));
     dragKey && (onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, dragKey, dragData));
   }, [onDragStart, dragKey, dragData]);
+  var E = as !== null && as !== void 0 ? as : "div";
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames("fabric-cardWrapper", "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && "selected", selected && "outline-2 outline-accent-500 outline-offset-2"),
+    className: classNames("fabric-cardWrapper", "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && "selected", selected && "outline-1 outline-accent-500 outline-offset-2"),
     children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-        className: classNames("fabric-card", className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && "clickable"),
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classNames("fabric-card", className, "rounded-capped relative flex flex-col flex-nowrap overflow-hidden", "href" in aria && "clickable", "to" in aria && "clickable", onClick && "clickable"),
         draggable: draggable,
         onDragStart: !draggable ? undefined : handleDragStart,
-        ref: ref
-      }, aria), {}, {
-        children: [header, /*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: ref,
+        children: [header, /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
           role: "none",
-          className: classNames("fabric-cardBody", bodyClassName, "flex-1"),
-          onClick: onClick,
-          children: body
-        }), footer]
-      }))
+          onClick: onClick
+        }, aria), {}, {
+          className: "contents",
+          children: body && /*#__PURE__*/jsxRuntime.jsx("object", {
+            type: "none",
+            className: classNames("fabric-cardBody", bodyClassName, "flex-1"),
+            children: body
+          })
+        })), footer]
+      })
     })
   });
 };

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

@@ -10,7 +10,7 @@ var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Icon = require('../icon/Icon.js');
 
-var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "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,14 +49,12 @@ 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,
     onRemove = _ref.onRemove,
     rounded = _ref.rounded,
+    preventDefault = _ref.preventDefault,
     stopPropagation = _ref.stopPropagation,
     as = _ref.as,
     aria = _objectWithoutProperties(_ref, _excluded);
@@ -75,9 +73,10 @@ var Chip = function Chip(_ref) {
     return s;
   }, [color, size], "Chip styles");
   var clickHandler = react.useCallback(function (e) {
-    if (stopPropagation) e.stopPropagation();
+    preventDefault && e.preventDefault();
+    stopPropagation && e.stopPropagation();
     onClick === null || onClick === void 0 || onClick(e);
-  }, [onClick, stopPropagation]);
+  }, [onClick, preventDefault, stopPropagation]);
   var removeHandler = react.useCallback(function (e) {
     if (stopPropagation) e.stopPropagation();
     onRemove === null || onRemove === void 0 || onRemove(e);
@@ -93,17 +92,13 @@ var Chip = function Chip(_ref) {
     "data-inner-clickable": !!onClick,
     onClick: disabled ? undefined : clickHandler
   }, aria), {}, {
-    children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+    children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.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__*/jsxRuntime.jsx("label", {
+      onClick: onIconClick
+    }, Icon.getIconProps(icon))), children && /*#__PURE__*/jsxRuntime.jsx("label", {
       "data-ref": "chipLabel",
-      className: classNames("fabric-chipLabel", "truncate"),
+      className: classNames("fabric-chipLabel", "truncate flex-1"),
       children: children
     }), onRemove && /*#__PURE__*/jsxRuntime.jsx("span", {
       role: "none",

package/dist/cjs/components/dropdown/Dropdown.js

@@ -112,6 +112,7 @@ var DropdownElement = function DropdownElement(_ref) {
         var _anchor$props$onClick, _anchor$props;
         (_anchor$props$onClick = (_anchor$props = anchor.props).onClick) === null || _anchor$props$onClick === void 0 || _anchor$props$onClick.call(_anchor$props, e);
         e.stopPropagation();
+        e.preventDefault();
       }
     })), {}, {
       "data-inner-clickable": "true",

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
@@ -8,9 +9,17 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../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,
@@ -63,8 +73,16 @@ var Icon = function Icon(_ref) {
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
     className = _ref.className,
-    onClick = _ref.onClick,
+    _onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageFailed = _useState2[0],
+    setImageFailed = _useState2[1];
+  react.useEffect(function () {
+    setImageFailed(false);
+  }, [iconSrc]);
+
   /** ***************** style map *******************/
   var styles = react.useMemo(function () {
     var s = {};
@@ -90,6 +108,7 @@ var Icon = function Icon(_ref) {
 
   /** ***************** render icon *******************/
   var iconEl = react.useMemo(function () {
+    if ( /*#__PURE__*/react.isValidElement(icon)) return icon;
     if (!utilities.isString(icon)) {
       throw Error("Invalid icon expected string");
     }
@@ -116,19 +135,29 @@ var Icon = function Icon(_ref) {
       className: "".concat(icon)
     });
   }, [icon, isSvg, viewBox]);
-  return /*#__PURE__*/jsxRuntime.jsx("dfn", _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
     "data-ref": "icon",
     ref: ref
   }, rest), {}, {
     role: "presentation",
-    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!onClick && disabled && "opacity-30 pointer-events-none", className),
-    onClick: onClick,
+    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!_onClick && disabled && "opacity-30 pointer-events-none", className),
+    onClick: function onClick(e) {
+      _onClick && e.stopPropagation();
+      _onClick && e.preventDefault();
+      _onClick === null || _onClick === void 0 || _onClick(e);
+    },
     "data-flip": rtlFlip,
     style: styles,
-    "data-clickable": !!onClick,
-    "data-inner-clickable": !!onClick,
-    children: iconEl
+    "data-clickable": !!_onClick,
+    "data-inner-clickable": !!_onClick,
+    children: [iconSrc && !imageFailed && /*#__PURE__*/jsxRuntime.jsx("img", {
+      src: iconSrc,
+      onError: function onError() {
+        return setImageFailed(true);
+      }
+    }), (!iconSrc || imageFailed) && iconEl]
   }));
 };
 
 exports.Icon = Icon;
+exports.getIconProps = getIconProps;

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

@@ -18,7 +18,7 @@ var Icon = require('../icon/Icon.js');
 require('../../types/icons.js');
 require('../../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 = utilities.iconToken(label);
     }
-    return /*#__PURE__*/jsxRuntime.jsx(Icon.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__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+      className: classNames("fabric-menuIcon", minimal && "minimal")
+    }, Icon.getIconProps((_path = path) !== null && _path !== void 0 ? _path : "")));
+  }, [icon, minimal, label]);
   var Wrapper = react.useCallback(function (_ref2) {
     var children = _ref2.children,
       rest = _objectWithoutProperties(_ref2, _excluded2);

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

@@ -6,13 +6,13 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 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 HotKey = require('../../hotkeys/HotKey.js');
 var jsxRuntime = require('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: icons.CoreIcons.chevronLeft,
         onClick: onBack
-      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
+      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
         className: "p-2 text-md select-none pointer-events-none"
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      }, Icon.getIconProps(icon))), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
         children: title
       }), /*#__PURE__*/jsxRuntime.jsx("div", {