@react-fabric/core 1.0.0-beta.35 → 1.0.0-beta.37

package/dist/esm/components/breadcrumbs/Breadcrumbs.js

@@ -7,7 +7,6 @@ import classNames from 'classnames';
 import { useMemo, Children } from 'react';
 import { Anchor } from '../../typography/Anchor.js';
 import { Dropdown } from '../dropdown/Dropdown.js';
-import classes from './Breadcrumbs.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["variant", "className", "separator", "children", "color"];
@@ -37,11 +36,11 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     "data-ref": "breadcrumbs",
     "data-color": color,
     "data-variant": variant,
-    className: classNames(classes.breadcrumbs, className, "flex flex-nowrap items-center")
+    className: classNames("fabric-breadcrumbs", className, "flex flex-nowrap items-center")
   }, aria), {}, {
     children: [start.map(function (link, idx) {
       return /*#__PURE__*/jsx("li", {
-        className: classes.breadcrumbLink,
+        className: "fabric-breadcrumbLink",
         "data-separator": separator,
         children: link
       }, idx);
@@ -49,7 +48,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       closeOnClick: true,
       showArrow: true,
       children: [/*#__PURE__*/jsx("li", {
-        className: classes.breadcrumbLink,
+        className: "fabric-breadcrumbLink",
         "data-separator": separator,
         "data-ref": "breadcrumbOverflow",
         children: /*#__PURE__*/jsx(Anchor, {
@@ -58,12 +57,12 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
         })
       }), /*#__PURE__*/jsx("div", {
         "data-color": color,
-        className: classNames(classes.breadcrumbOverflow, "flex flex-col"),
+        className: classNames("fabric-breadcrumbOverflow", "flex flex-col"),
         children: overflow
       })]
     }), end === null || end === void 0 ? void 0 : end.map(function (link, idx) {
       return /*#__PURE__*/jsx("li", {
-        className: classes.breadcrumbLink,
+        className: "fabric-breadcrumbLink",
         "data-separator": separator,
         children: link
       }, idx);

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

@@ -10,11 +10,11 @@ import { useEffectDebugger } from '../../hooks/useEffectDebugger.js';
 import { HotKey } from '../../hotkeys/HotKey.js';
 import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
 import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
+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 classes from './Button.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 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"];
 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; }
@@ -101,7 +101,7 @@ var Button = function Button(_ref) {
       return {
         content: actionMessage,
         placement: "top",
-        color: color,
+        color: "".concat(color, "-100"),
         open: true
       };
     }
@@ -115,7 +115,7 @@ var Button = function Button(_ref) {
   });
   var E = as !== null && as !== void 0 ? as : "button";
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.buttonWrapper, className, "relative align-text-top select-none focus-within:z-1", fullWidth ? "block w-full" : "inline-block"),
+    className: classNames("fabric-buttonWrapper", className, "relative align-text-top select-none focus-within:z-1", fullWidth ? "block w-full" : "inline-block"),
     "data-ref": dataRef !== null && dataRef !== void 0 ? dataRef : "button",
     "data-size": size,
     "data-loading": busy || loading,
@@ -127,7 +127,7 @@ var Button = function Button(_ref) {
       children: /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
         ref: mergeRefs(ref, refEl),
         role: "button",
-        className: classNames(classes.button, "pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none", "focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner", fullWidth && "max-w-full w-full", rounded && "rounded-full", spinOnHover && classes.spinOnHover),
+        className: classNames("fabric-button", "pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none", "focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner", fullWidth && "max-w-full w-full", rounded && "rounded-full", spinOnHover && "fabric-spinOnHover"),
         type: type,
         disabled: disabled,
         tabIndex: tabIndex,
@@ -138,29 +138,32 @@ var Button = function Button(_ref) {
         "data-variant": variant
       }, aria), {}, {
         children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: classes.buttonIcon,
+          className: "fabric-buttonIcon",
           icon: icon,
           bg: iconBg,
           color: iconColor,
           rtlFlip: rtlFlip,
           "data-align": iconAlign
         }), /*#__PURE__*/isValidElement(children) && /*#__PURE__*/jsx("div", {
-          className: classes.buttonChild,
+          className: "fabric-buttonChild",
           children: children
         }), isString(children) && /*#__PURE__*/jsx("label", {
-          className: classNames(classes.buttonLabel, "truncate"),
+          className: classNames("fabric-buttonLabel", "truncate"),
           "data-colored-icon": !!iconBg,
           children: children
         }), !isNil(badge) && /*#__PURE__*/jsx(Badge, _objectSpread({}, badgeProps)), hotKey && /*#__PURE__*/jsx(HotKeyLabel, {
           keyCombo: hotKey
         }), altIcon && /*#__PURE__*/jsx(Icon, {
-          className: classes.altIcon,
+          className: "fabric-altIcon",
           icon: altIcon,
           rtlFlip: true
         })]
       }))
     })), actionDone && /*#__PURE__*/jsx("div", {
-      className: classNames("absolute inset-0 overflow-hidden flex justify-center items-center", "bg-".concat(color, "-300"), rounded ? "rounded-full" : "rounded"),
+      className: classNames("absolute inset-0 overflow-hidden flex justify-center items-center", rounded ? "rounded-full" : "rounded"),
+      style: {
+        backgroundColor: getColor("".concat(color, "-300"))
+      },
       children: /*#__PURE__*/jsx(AnimationIndicator, {
         type: "check",
         color: color

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

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 import { cloneElement } from 'react';
 import { cloneChildren } from '../../utils/cloneElement.js';
 import '@react-fabric/utilities';
-import classes from './Button.module.css';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size"];
@@ -25,7 +24,7 @@ var ButtonGroup = function ButtonGroup(_ref) {
     aria = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     "data-ref": "buttonGroup",
-    className: classNames(classes.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && classes.vertical, vertical && "flex-col items-stretch")
+    className: classNames("fabric-buttonGroup", className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && "vertical", vertical && "flex-col items-stretch")
   }, aria), {}, {
     children: cloneChildren(children, function (child) {
       return /*#__PURE__*/cloneElement(child, _objectSpread({

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

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import { useMemo, useCallback, cloneElement } from 'react';
 import { useControlledValue } from '../../hooks/useControlledValue.js';
 import { cloneChildren } from '../../utils/cloneElement.js';
-import classes from './Button.module.css';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size", "value", "onChange"];
@@ -47,7 +46,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(_ref) {
     };
   }, [currentValue, onChange]);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames(classes.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && classes.vertical, vertical && "flex-col")
+    className: classNames("fabric-buttonGroup", className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && "vertical", vertical && "flex-col")
   }, aria), {}, {
     children: cloneChildren(children, function (child) {
       return /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({

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

@@ -4,15 +4,21 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { CoreIcons } from '../../types/icons.js';
-import 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { getBgClass, getColorClass, getBorderClass } from '../../utils/getColor.js';
-import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose", "className"];
 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 colors = {
+  tint: "bg-tint-50/50 text-tint-800 border-tint-300",
+  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",
+  danger: "bg-danger-50/50 text-danger-800 border-danger-300",
+  success: "bg-success-50/50 text-success-800 border-success-300",
+  warning: "bg-warning-50/50 text-warning-800 border-warning-300"
+};
 var Callout = function Callout(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
@@ -25,7 +31,7 @@ var Callout = function Callout(_ref) {
     className = _ref.className,
     aria = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("fieldset", _objectSpread(_objectSpread({
-    className: classNames(className, "block rounded-capped border max-w-full relative overflow-hidden mb-4", getBgClass(color + "-50"), getColorClass(color + "-700"), getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
+    className: classNames("block rounded-capped border max-w-full relative overflow-hidden mb-4", colors[color], className, border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
   }, aria), {}, {
     children: [legend && /*#__PURE__*/jsx("legend", {
       className: "px-2 mx-4 font-medium",

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

@@ -10,7 +10,6 @@ import { Header, Footer } from '../../core/headfoot/HeadFoot.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
-import classes from './Card.module.css';
 
 var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "flex", "draggable", "dragKey", "dragData", "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; }
@@ -39,10 +38,10 @@ var Card = function Card(_ref) {
     body = _useMemo2[1],
     footer = _useMemo2[2];
   return /*#__PURE__*/jsx("div", {
-    className: classNames(classes.cardWrapper, "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && classes.selected, selected && "outline outline-2 outline-accent-500 outline-offset-2"),
+    className: classNames("fabric-cardWrapper", "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && "selected", selected && "outline-2 outline-accent-500 outline-offset-2"),
     children: /*#__PURE__*/jsx(ErrorBoundary, {
       children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-        className: classNames(classes.card, className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && classes.clickable),
+        className: classNames("fabric-card", className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && "clickable"),
         draggable: draggable,
         onDragStart: !draggable ? undefined : function (e) {
           var _e$dataTransfer;
@@ -52,7 +51,7 @@ var Card = function Card(_ref) {
       }, aria), {}, {
         children: [header, /*#__PURE__*/jsx("div", {
           role: "none",
-          className: classNames(classes.cardBody, bodyClassName, "flex-1"),
+          className: classNames("fabric-cardBody", bodyClassName, "flex-1"),
           onClick: onClick,
           children: body
         }), footer]

package/dist/esm/components/card/CardCover.js

@@ -9,11 +9,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { Image, Video } from '../media/Media.js';
-import classes from './Card.module.css';
 
 var _excluded = ["className", "children", "height", "justify", "colorScheme"];
 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 scheme = {
+  inheritScheme: "inheritScheme",
+  light: "light",
+  dark: "dark"
+};
 var CardCover = function CardCover(_ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -21,7 +25,8 @@ var CardCover = function CardCover(_ref) {
     height = _ref$height === void 0 ? 120 : _ref$height,
     _ref$justify = _ref.justify,
     justify = _ref$justify === void 0 ? "end" : _ref$justify,
-    colorScheme = _ref.colorScheme,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? "inheritScheme" : _ref$colorScheme,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useMemo = useMemo(function () {
       return Children.toArray(children).reduce(function (ret, node) {
@@ -36,10 +41,10 @@ var CardCover = function CardCover(_ref) {
     style: {
       height: height
     },
-    className: classNames(classes.cardCover, classes[colorScheme !== null && colorScheme !== void 0 ? colorScheme : "inheritScheme"], "relative z-0")
+    className: classNames("fabric-cardCover", scheme[colorScheme], "relative z-0")
   }, aria), {}, {
     children: [media, /*#__PURE__*/jsx("div", {
-      className: classNames(classes.cardCoverContent, "relative pointer-events-none z-1 flex flex-col flex-nowrap p-4 h-full", className, "justify-".concat(justify), className),
+      className: classNames("fabric-cardCoverContent", "relative pointer-events-none z-1 flex flex-col flex-nowrap p-4 h-full", "justify-".concat(justify), className),
       children: body
     })]
   }));

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

@@ -6,10 +6,9 @@ import classNames from 'classnames';
 import { useCallback } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { getColor, getColorClass } from '../../utils/getColor.js';
+import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
-import classes from './Chip.module.css';
 
 var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "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; }
@@ -67,7 +66,7 @@ var Chip = function Chip(_ref) {
     ref: ref,
     role: "term",
     "data-ref": "chip",
-    className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
+    className: classNames("fabric-chip", className, "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded", rounded && "rounded-full", !!onClick && "clickable", disabled && "disabled"),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,
@@ -75,7 +74,7 @@ var Chip = function Chip(_ref) {
   }, aria), {}, {
     children: [icon && /*#__PURE__*/jsx(Icon, {
       "data-ref": "chipIcon",
-      className: classNames(classes.chipIcon, "m-1"),
+      className: classNames("fabric-chipIcon", "m-1"),
       icon: icon,
       bg: iconBg,
       onClick: onIconClick,
@@ -83,13 +82,13 @@ var Chip = function Chip(_ref) {
       rtlFlip: rtlFlip
     }), children && /*#__PURE__*/jsx("label", {
       "data-ref": "chipLabel",
-      className: classNames(classes.chipLabel, "truncate"),
+      className: classNames("fabric-chipLabel", "truncate"),
       children: children
     }), onRemove && /*#__PURE__*/jsx("span", {
       role: "none",
       "data-ref": "chipRemove",
       "data-inner-cliackable": true,
-      className: classNames(classes.chipRemove, "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
+      className: classNames("fabric-chipRemove", "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
       onClick: removeHandler,
       children: "\xD7"
     })]

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

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import { useState, useRef, useImperativeHandle, useEffect, useMemo, Children } from 'react';
 import { CoreIcons } from '../../types/icons.js';
 import { Icon } from '../icon/Icon.js';
-import classes from './Collapsable.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "stickyHeader", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
@@ -58,12 +57,12 @@ var Collapsable = function Collapsable(_ref) {
     head = _useMemo2[0],
     body = _useMemo2[1];
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(classes.collapsable, className)
+    className: classNames("fabric-collapsable", className)
   }, aria), {}, {
     children: [/*#__PURE__*/jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames(classes.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
         return !disabled && setOpenState(!openState);
       },
@@ -77,7 +76,7 @@ var Collapsable = function Collapsable(_ref) {
       })]
     }), openState && /*#__PURE__*/jsx("div", {
       ref: bodyRef,
-      className: classNames(classes.collapsableBody, bodyClassName),
+      className: classNames("fabric-collapsableBody", bodyClassName),
       children: body
     })]
   }));

package/dist/esm/components/divider/Divider.js

@@ -3,9 +3,8 @@
 import classNames from 'classnames';
 import { useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { getBorderClass, getBgClass, getColorClass } from '../../utils/getColor.js';
+import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
-import classes from './Divider.module.css';
 
 /*
  * React Fabric
@@ -32,10 +31,12 @@ import classes from './Divider.module.css';
 
 var Divider = function Divider(_ref) {
   var children = _ref.children,
-    color = _ref.color,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint-300" : _ref$color,
     vertical = _ref.vertical,
-    fill = _ref.fill,
-    _ref$align = _ref.align,
+    labelClassName = _ref.labelClassName;
+    _ref.fill;
+    var _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
     className = _ref.className;
   var Rule = useCallback(function (_ref2) {
@@ -43,9 +44,10 @@ var Divider = function Divider(_ref) {
       className = _ref2.className;
     return /*#__PURE__*/jsx("hr", {
       style: {
-        flex: flex
+        flex: flex,
+        borderColor: getColor(color)
       },
-      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? classes.vertical : classes.horizontal, color && getBorderClass(color + "-200"))
+      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
     });
   }, [color, vertical]);
   return children ? /*#__PURE__*/jsxs("div", {
@@ -53,7 +55,7 @@ var Divider = function Divider(_ref) {
     children: [/*#__PURE__*/jsx(Rule, {
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? classes.vertical : classes.horizontal, fill && getBgClass((color !== null && color !== void 0 ? color : "tint") + "-200"), !fill && getColorClass((color !== null && color !== void 0 ? color : "tint") + "-600"), "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
       children: children
     }), /*#__PURE__*/jsx(Rule, {
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"

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

@@ -6,7 +6,6 @@ import { FloatingTree, useFloatingTree, useFloating, autoUpdate, shift, flip, of
 import { mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useState, useMemo, Children, useCallback, useEffect, Fragment, cloneElement } from 'react';
-import classes from './Dropdown.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 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; }
@@ -141,14 +140,14 @@ var DropdownElement = function DropdownElement(_ref) {
         })), {}, {
           children: [/*#__PURE__*/jsx("div", {
             role: "none",
-            className: classNames(classes.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
+            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
           }), showArrow && /*#__PURE__*/jsx(FloatingArrow, {
             ref: arrowRef,
             context: context,
             strokeWidth: 0.5,
-            className: "fill-base stroke-muted"
+            className: "fill-base stroke-dimmed"
           })]
         }))
       })]

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

@@ -20,7 +20,7 @@ var DropdownTool = function DropdownTool(_ref) {
   return /*#__PURE__*/jsxs(Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(Icon, {
       icon: icon !== null && icon !== void 0 ? icon : CoreIcons.caretDown,
-      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
+      className: classNames(className, "outline bg-base/50 flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block")
     }), children]
   }));
 };

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

@@ -6,8 +6,7 @@ import { isSvgPath, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
-import classes from './Icon.module.css';
+import { getColor } from '../../utils/getColor.js';
 
 var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "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; }
@@ -95,7 +94,7 @@ var Icon = function Icon(_ref) {
     ref: ref
   }, rest), {}, {
     role: "presentation",
-    className: classNames(classes.icon, className, "select-none overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getBgClass(bg), color && getColorClass(color), !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate)),
+    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), className),
     onClick: onClick,
     "data-flip": rtlFlip,
     style: styles,

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

@@ -8,13 +8,17 @@ import classNames from 'classnames';
 import { useState, useMemo, useRef } from 'react';
 import { CoreIcons } from '../../types/icons.js';
 import { Button } from '../button/Button.js';
-import classes from './Media.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["src", "alt", "reel", "fit", "className"],
   _excluded2 = ["src", "poster", "reel", "autoPlay", "playOnHover", "fit", "className"];
 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 cover = {
+  fill: "object-fill",
+  cover: "object-cover",
+  contain: "object-contain"
+};
 var Image = function Image(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -29,13 +33,13 @@ var Image = function Image(_ref) {
     setColorSet = _useState2[1];
   var loadIndicator = useMemo(function () {
     return /*#__PURE__*/jsx("div", {
-      className: classNames(classes.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
+      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"
     });
   }, [src]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "image",
-    className: classNames(classes.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && classes.mediaReel, className),
+    className: classNames("fabric-mediaContainer", "relative overflow-hidden bg-gray inline-block", reel && "fabric-mediaReel", className),
     "data-colorset": colorSet
   }, aria), {}, {
     children: [loadIndicator, /*#__PURE__*/jsx("img", {
@@ -43,7 +47,7 @@ var Image = function Image(_ref) {
       src: src,
       loading: "lazy",
       crossOrigin: "anonymous",
-      className: classNames(classes.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+      className: classNames("fabric-media", "pointer-events-none w-full h-full", cover[fit]),
       onLoad: function onLoad(e) {
         var _e$currentTarget$prev;
         (_e$currentTarget$prev = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev === void 0 || _e$currentTarget$prev.remove();
@@ -73,7 +77,7 @@ var Video = function Video(_ref2) {
     setVolume = _useState6[1];
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "video",
-    className: classNames(classes.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && classes.mediaReel, className),
+    className: classNames("fabric-mediaContainer", "relative overflow-hidden bg-gray inline-block", reel && "fabric-mediaReel", className),
     onMouseEnter: function onMouseEnter() {
       var _videoRef$current;
       playOnHover && ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play());
@@ -84,7 +88,7 @@ var Video = function Video(_ref2) {
     }
   }, aria), {}, {
     children: [/*#__PURE__*/jsx("div", {
-      className: classNames(classes.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse"),
+      className: classNames("fabric-mediaPlaceholder", "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse"),
       children: "\u25CF\u25CF\u25CF"
     }), /*#__PURE__*/jsxs("video", {
       loop: true,
@@ -92,7 +96,7 @@ var Video = function Video(_ref2) {
       controls: false,
       poster: poster,
       autoPlay: autoPlay,
-      className: classNames(classes.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+      className: classNames("fabric-media", "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
       onPlay: function onPlay() {
         return setState(true);
       },
@@ -114,18 +118,18 @@ var Video = function Video(_ref2) {
       })]
     }), /*#__PURE__*/jsxs("div", {
       "data-inner-clickable": true,
-      className: classNames(classes.mediaControls, "absolute bottom-6 end-6 rounded-full flex flex-col"),
+      className: classNames("fabric-mediaControls", "absolute bottom-6 end-6 rounded-full flex flex-col"),
       children: [/*#__PURE__*/jsx(Button, {
         rounded: true,
         variant: "link",
-        className: classes.mediaControlPlaceholder,
+        className: "fabric-mediaControlPlaceholder",
         icon: CoreIcons.ellipsis,
         "aria-label": "controls"
       }), /*#__PURE__*/jsx(Button, {
         rounded: true,
         variant: "link",
         "aria-label": "controls",
-        className: classes.mediaControlAction,
+        className: "fabric-mediaControlAction",
         onClick: function onClick() {
           videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
         },
@@ -134,7 +138,7 @@ var Video = function Video(_ref2) {
         rounded: true,
         variant: "link",
         "aria-label": "controls",
-        className: classes.mediaControlAction,
+        className: "fabric-mediaControlAction",
         onClick: function onClick() {
           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();

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

@@ -175,7 +175,7 @@ var MenuComponent = function MenuComponent(_ref) {
             initialFocus: isNested ? -1 : 0,
             returnFocus: !isNested,
             children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-              className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]"),
+              className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-(--z-popover)"),
               autoFocus: true,
               ref: mergeRefs(isNested ? refs.setFloating : ref)
             }, getFloatingProps({

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

@@ -17,7 +17,6 @@ import { getBadgeProps, Badge } from '../badge/Badge.js';
 import { Icon } from '../icon/Icon.js';
 import '../../types/icons.js';
 import '../../hotkeys/HotKeyWrapper.js';
-import classes from './Menu.module.css';
 
 var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
   _excluded2 = ["children"];
@@ -63,7 +62,7 @@ var MenuItem = function MenuItem(_ref) {
       path = iconToken(label);
     }
     return /*#__PURE__*/jsx(Icon, {
-      className: classNames(classes.menuIcon, minimal && classes.minimal),
+      className: classNames("fabric-menuIcon", minimal && "minimal"),
       icon: (_path = path) !== null && _path !== void 0 ? _path : "",
       bg: iconBg,
       color: iconColor,
@@ -110,7 +109,7 @@ var MenuItem = function MenuItem(_ref) {
       ref: mergeRefs(ref, elRef),
       "data-dropdown-dismiss": true,
       "data-color": color,
-      className: classNames(classes.menuItem, className, active && classes.active, minimal && classes.minimal, disabled && classes.disabled, "rounded-capped relative max-w-[50vw] my-0.5"),
+      className: classNames("fabric-menuItem", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded-capped relative max-w-[50vw] my-0.5"),
       "data-active": active,
       "data-open": childOpen,
       disabled: disabled,

package/dist/esm/components/meter/Meter.js

@@ -5,7 +5,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import classes from './Meter.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["value", "hideLabel", "className"];
@@ -21,11 +20,11 @@ var Meter = function Meter(_ref) {
     return value / 16.67;
   }, [value], "Meter activeCount");
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(classes.meter, className, "flex flex-nowrap items-center gap-[2px]")
+    className: classNames("fabric-meter", className, "flex flex-nowrap items-center gap-[2px]")
   }, aria), {}, {
     children: [[0, 1, 2, 3, 4, 5].map(function (step) {
       return /*#__PURE__*/jsx("div", {
-        className: classNames(classes.meterBar, "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0"),
+        className: classNames("fabric-meterBar", "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0"),
         "data-active": activeCount >= step,
         style: {
           "--width": "".concat(Math.min((activeCount - step) * 100, 100), "%")