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

package/css/components/_breadcrumbs.css

@@ -54,6 +54,8 @@
 
   .fabric-breadcrumbs[data-variant="classic"] {
     & > .fabric-breadcrumbLink {
+      display: flex;
+      align-items: center;
       list-style: none;
 
       &::after {

package/css/components/_button.css

@@ -23,7 +23,8 @@
 
 @layer components {
   .fabric-buttonWrapper {
-    --color: var(--color-primary-500);
+    --color: var(--color-tint-600);
+    --color-muted: var(--color-tint-300);
 
     font-size: 1rem;
     border-radius: var(--rounding);
@@ -99,6 +100,11 @@
       flex: 0 1 1em;
     }
   }
+
+  [data-color-scheme="dark"] .fabric-buttonWrapper {
+    --color: var(--color-tint-500);
+    --color-muted: var(--color-tint-200);
+  }
 }
 
 @layer utilities {
@@ -132,6 +138,10 @@
     --bg-click: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
     --bg-active: color-mix(in lab, var(--color) 24%, var(--fabric-bg));
 
+    &[data-color="primary"] {
+      --color: var(--color-primary-500);
+    }
+
     &[data-color="accent"] {
       --color: var(--color-accent-500);
     }
@@ -152,6 +162,10 @@
       --color: var(--color-warning-500);
     }
 
+    &[data-color="muted"] {
+      --color: var(--color-muted);
+    }
+
     &[data-variant="outline"] {
       --outline: var(--color);
     }
@@ -265,7 +279,7 @@
 
       .fabric-buttonIcon,
       .fabric-buttonLabel {
-        transform: translateY(1px);
+        translate: 0 1px;
       }
     }
 

package/css/components/_icon.css

@@ -69,6 +69,6 @@
   }
 
   [dir="rtl"] .fabric-icon[data-flip="true"] {
-    transform: scaleX(-1);
+    scale: -1 1;
   }
 }

package/css/components/_modal.css

@@ -26,8 +26,8 @@
     z-index: var(--z-overlay);
 
     width: 32rem;
-    max-width: 100%;
-    max-height: 100%;
+    max-width: calc(100vw - 8rem);
+    max-height: calc(100vh - 8rem);
     margin-top: -100%;
 
     opacity: 0;

package/css/core/_theme.css

@@ -24,7 +24,7 @@
 @layer components {
   .fabric-themeProvider {
     & > * {
-      background-color: var(--bg-color-base);
+      background-color: var(--bg-color-content);
     }
   }
 }

package/css/reset/_reset.css

@@ -78,6 +78,10 @@
     border-color: color-mix(in oklab, var(--fabric-bg) 65%, var(--color-tint));
   }
 
+  [class*="shadow"] {
+    --tw-shadow-color: var(--fabric-shadow);
+  }
+
   [class*="ring"] {
     --tw-ring-color: color-mix(
       in oklab,
@@ -223,7 +227,7 @@
     unicode-bidi: plaintext;
   }
 
-  [dir="rtl"] {
+  [dir="rtl"] :not:where(:dir(ltr), [dir="ltr"]) {
     p,
     pre,
     h1,

package/css/reset/_theme.css

@@ -63,7 +63,7 @@
   [data-color-scheme="light"] {
     --fabric-bg: var(--color-white);
     --fabric-text: var(--color-black);
-    --fabric-input: color-mix(in lab, var(--fabric-bg) 90%, #fff);
+    --fabric-input: #fdfdfd;
     --fabric-input-focus: #fff;
     --fabric-shadow: #8ba0b0;
 
@@ -73,8 +73,8 @@
   [data-color-scheme="dark"] {
     --fabric-bg: var(--color-black);
     --fabric-text: var(--color-white);
-    --fabric-input: color-mix(in lab, var(--fabric-bg) 80%, #0a1218);
-    --fabric-input-focus: color-mix(in lab, var(--fabric-bg) 60%, #0a1218);
+    --fabric-input: #141A1F;
+    --fabric-input-focus: #0a1218;
     --fabric-shadow: #010101;
 
     color-scheme: dark;

package/css/styles.css

@@ -29,4 +29,6 @@
 @import "./core/index.css";
 @import "./components/index.css";
 
+@plugin "@iconify/tailwind4";
+
 @source "../../";

package/css/theme/_colors.css

@@ -22,8 +22,8 @@
  */
 
 @theme static {
-  --color-black: #121213;
-  --color-white: #fffefd;
+  --color-black: #151b1f;
+  --color-white: #fefefe;
   --color-silver: #989da5;
   --color-steel: #7c99af;
   --color-olive: #769b8d;

package/dist/cjs/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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
-        className: classNames("fabric-bars"),
+        className: classNames("aspect-square", icon),
         style: {
-          width: size,
+          fontSize: size,
           color: getColor.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
-    className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
-    "data-ref": "spinner",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded"),
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames("fabric-spinner"),
-        style: {
-          width: size,
-          color: getColor.getColor(color)
-        }
-      })
-    })
-  });
+var LoadingSpinner = function LoadingSpinner(props) {
+  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
     className: classNames("fabric-loader", "area-[loader] relative overflow-x-clip"),
     "data-ref": "loading",
@@ -222,8 +226,9 @@ var Loading = function Loading() {
   });
 };
 
-exports.AnimationBars = AnimationBars;
 exports.AnimationIndicator = AnimationIndicator;
-exports.AnimationSpinner = AnimationSpinner;
-exports.Loading = Loading;
+exports.AnimationLoader = AnimationLoader;
+exports.LoadingBars = LoadingBars;
+exports.LoadingLine = LoadingLine;
+exports.LoadingSpinner = LoadingSpinner;
 exports.Skeleton = Skeleton;

package/dist/cjs/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,
@@ -142,7 +142,7 @@ var Button = function Button(_ref) {
     "data-size": size,
     "data-loading": busy || loading,
     "data-disabled": disabled,
-    children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+    children: [!disabled && hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: hotKey,
       handler: hotKeyHandler.current
     }), /*#__PURE__*/jsxRuntime.jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {

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

@@ -3,7 +3,6 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
-var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('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: icons.CoreIcons.close,
+      icon: "icon-[mdi--close]",
       onClick: onClose
     })]
   }));

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

@@ -6,7 +6,6 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var react = require('react');
-var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('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 ? icons.CoreIcons.chevronRight : _ref$iconClosed,
+    iconClosed = _ref$iconClosed === void 0 ? "icon-[mdi--chevron-right]" : _ref$iconClosed,
     _ref$iconOpen = _ref.iconOpen,
-    iconOpen = _ref$iconOpen === void 0 ? icons.CoreIcons.chevronDown : _ref$iconOpen,
+    iconOpen = _ref$iconOpen === void 0 ? "icon-[mdi--chevron-down]" : _ref$iconOpen,
     open = _ref.open;
     _ref.onClose;
     _ref.onOpen;

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

@@ -32,6 +32,7 @@ var DropdownElement = function DropdownElement(_ref) {
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   var tree = react.useFloatingTree();
+  var nodeId = react.useFloatingNodeId();
   var _useMemo = react$1.useMemo(function () {
       return react$1.Children.toArray(children);
     }, [children]),
@@ -39,6 +40,7 @@ var DropdownElement = function DropdownElement(_ref) {
     anchor = _useMemo2[0],
     panel = _useMemo2[1];
   var _useFloating = react.useFloating({
+      nodeId: "dropdown-".concat(nodeId),
       open: isOpen,
       onOpenChange: function onOpenChange(open, _, reason) {
         var _ref2;
@@ -80,6 +82,10 @@ var DropdownElement = function DropdownElement(_ref) {
     }
     return undefined;
   }, [refs, isOpen, fitToParent]);
+  var dismissDropdown = react$1.useCallback(function () {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 || onClose();
+  }, []);
   var tryClosing = react$1.useCallback(function (e) {
     var _refs$floating$curren, _refs$floating$curren2;
     if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target.closest("[data-dropdown-dismiss='false']"))) && (!!closeOnClick || (_refs$floating$curren2 = refs.floating.current) !== null && _refs$floating$curren2 !== void 0 && _refs$floating$curren2.contains(e.target.closest("[data-dropdown-dismiss='true']")))) {
@@ -139,7 +145,9 @@ var DropdownElement = function DropdownElement(_ref) {
             role: "none",
             className: classNames("fabric-dropdownBody", dropdownClassName, !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
             onMouseUpCapture: tryClosing,
-            children: panel
+            children: /*#__PURE__*/react$1.cloneElement(panel, {
+              dismiss: dismissDropdown
+            })
           }), showArrow && /*#__PURE__*/jsxRuntime.jsx(react.FloatingArrow, {
             ref: arrowRef,
             context: context,
@@ -184,6 +192,10 @@ var DropdownElement = function DropdownElement(_ref) {
  * @see {@link https://floating-ui.com/docs/react} for more details on Floating UI.
  */
 var Dropdown = function Dropdown(props) {
+  var tree = react.useFloatingTree();
+  if (tree) {
+    return /*#__PURE__*/jsxRuntime.jsx(DropdownElement, _objectSpread({}, props));
+  }
   return /*#__PURE__*/jsxRuntime.jsx(react.FloatingTree, {
     children: /*#__PURE__*/jsxRuntime.jsx(DropdownElement, _objectSpread({}, props))
   });

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

@@ -3,7 +3,6 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
-var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
 var Dropdown = require('./Dropdown.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -19,7 +18,7 @@ var DropdownTool = function DropdownTool(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      icon: icon !== null && icon !== void 0 ? icon : icons.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/cjs/components/icon/Icon.js

@@ -114,31 +114,31 @@ 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");
+    if (utilities.isString(icon)) {
+      return isSvg ? /*#__PURE__*/jsxRuntime.jsx("svg", {
+        viewBox: viewBox,
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          fill: "currentColor",
+          d: icon.toString()
+        })
+      }) : (icon === null || icon === void 0 ? void 0 : icon.toString().length) <= 4 ? /*#__PURE__*/jsxRuntime.jsx("svg", {
+        role: "img",
+        children: /*#__PURE__*/jsxRuntime.jsx("text", {
+          x: "50%",
+          y: "50%",
+          dy: ".1em",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          style: {
+            fontSize: SvgTextSize[icon.length]
+          },
+          children: icon
+        })
+      }) : /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: "".concat(icon)
+      });
     }
-    return isSvg ? /*#__PURE__*/jsxRuntime.jsx("svg", {
-      viewBox: viewBox,
-      children: /*#__PURE__*/jsxRuntime.jsx("path", {
-        fill: "currentColor",
-        d: icon.toString()
-      })
-    }) : (icon === null || icon === void 0 ? void 0 : icon.toString().length) <= 4 ? /*#__PURE__*/jsxRuntime.jsx("svg", {
-      role: "img",
-      children: /*#__PURE__*/jsxRuntime.jsx("text", {
-        x: "50%",
-        y: "50%",
-        dy: ".1em",
-        dominantBaseline: "middle",
-        textAnchor: "middle",
-        style: {
-          fontSize: SvgTextSize[icon.length]
-        },
-        children: icon
-      })
-    }) : /*#__PURE__*/jsxRuntime.jsx("i", {
-      className: "".concat(icon)
-    });
+    throw Error("Invalid icon expected string");
   }, [icon, isSvg, viewBox]);
   return /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
     "data-ref": "icon",

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

@@ -6,7 +6,6 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
-var icons = require('../../types/icons.js');
 var Button = require('../button/Button.js');
 var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -21,8 +20,10 @@ var cover = {
   contain: "object-contain"
 };
 var loadIndicator = /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("i", {
+    className: "icon-[svg-spinners--pulse-rings-2]"
+  })
 });
 
 /**
@@ -94,7 +95,7 @@ var Image = function Image(_ref) {
     }), errored && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       size: "2rem",
       className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-      icon: icons.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: icons.CoreIcons.ellipsis,
+          icon: "icon-[mdi--dots-vertical]",
           "aria-label": "controls"
         }), /*#__PURE__*/jsxRuntime.jsx(Button.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 ? icons.CoreIcons.volumeOn : icons.CoreIcons.volumeOff
+          icon: volume ? "icon-[mdi--volume]" : "icon-[mdi--volume-mute]"
         }), /*#__PURE__*/jsxRuntime.jsx(Button.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 ? icons.CoreIcons.pause : icons.CoreIcons.play
+          icon: state ? "icon-[mdi--pause]" : "icon-[mdi--play]"
         })]
       })]
     }), errored && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       size: "2rem",
       className: "absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-      icon: icons.CoreIcons.mediaVideoBroken
+      icon: "icon-[mdi--video-off-outline]"
     })]
   }));
 };

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

@@ -8,13 +8,12 @@ var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
 var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
-var icons = require('../../types/icons.js');
 var cloneElement = require('../../utils/cloneElement.js');
 var nodeCheck = require('../../utils/nodeCheck.js');
 var MenuItem = require('./MenuItem.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "minimal", "menuClassName", "onClick", "trigger", "ref"];
+var _excluded = ["children", "minimal", "menuClassName", "onClick", "trigger", "ref", "forDropdown"];
 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; }
 // FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
@@ -28,6 +27,7 @@ var MenuComponent = function MenuComponent(_ref) {
     _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
     ref = _ref.ref,
+    forDropdown = _ref.forDropdown,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = react$1.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -42,9 +42,9 @@ var MenuComponent = function MenuComponent(_ref) {
   var tree = react.useFloatingTree();
   var nodeId = react.useFloatingNodeId();
   var parentId = react.useFloatingParentNodeId();
-  var isNested = parentId !== null;
+  var isNested = parentId !== null && !forDropdown;
   var _useFloating = react.useFloating({
-      nodeId: nodeId,
+      nodeId: "menu-".concat(nodeId),
       open: !isNested || isOpen,
       onOpenChange: function onOpenChange(open, event, reason) {
         isNested && setIsOpen(open);
@@ -166,7 +166,7 @@ var MenuComponent = function MenuComponent(_ref) {
     }))), {}, {
       "data-open": isOpen,
       minimal: minimal,
-      altIcon: icons.CoreIcons.chevronRight,
+      altIcon: "icon-[mdi--menu-right]",
       ref: utilities.mergeRefs(refs.setReference, ref)
     })), /*#__PURE__*/jsxRuntime.jsx(react.FloatingList, {
       elementsRef: elementsRef,

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

@@ -15,7 +15,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var Tooltip = require('../../overlays/tooltip/Tooltip.js');
 var Badge = require('../badge/Badge.js');
 var Icon = require('../icon/Icon.js');
-require('../../types/icons.js');
 require('../../hotkeys/HotKeyWrapper.js');
 
 var _excluded = ["as", "label", "color", "className", "icon", "appendLabel", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
@@ -133,7 +132,7 @@ var MenuItem = function MenuItem(_ref) {
         (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
       }
     }, minimal ? {} : aria), {}, {
-      children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+      children: [!disabled && hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
         keyCombo: hotKey,
         handler: function handler() {
           var _elRef$current2, _elRef$current2$click;