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

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

@@ -6,7 +6,6 @@ var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var Icon = require('../icon/Icon.js');
-var Badge_module = require('./Badge.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "className", "value", "max", "ping", "block", "inline", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
@@ -60,14 +59,14 @@ var Badge = function Badge(_ref) {
    * wrap children in a relative div to float badge, wrapper allows for floating a badge on elements with overflow hidden
    */
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames(forButton || inline ? "contents" : "relative", block ? "block" : "inline-block"),
+    className: classNames(forButton || inline ? "contents" : block ? "block" : "inline-block", forButton || inline ? "" : "relative"),
     children: [children && /*#__PURE__*/react.cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
       ref: innerRef
     })), (!!ping || (label !== null && label !== void 0 ? label : icon)) && /*#__PURE__*/jsxRuntime.jsxs("div", {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,
-      className: classNames(Badge_module.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
+      className: classNames("fabric-badge", className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
       children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "p-1",
         children: label

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

@@ -7,7 +7,6 @@ var classNames = require('classnames');
 var react = require('react');
 var Anchor = require('../../typography/Anchor.js');
 var Dropdown = require('../dropdown/Dropdown.js');
-var Breadcrumbs_module = require('./Breadcrumbs.module.css');
 var jsxRuntime = require('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(Breadcrumbs_module.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__*/jsxRuntime.jsx("li", {
-        className: Breadcrumbs_module.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__*/jsxRuntime.jsx("li", {
-        className: Breadcrumbs_module.breadcrumbLink,
+        className: "fabric-breadcrumbLink",
         "data-separator": separator,
         "data-ref": "breadcrumbOverflow",
         children: /*#__PURE__*/jsxRuntime.jsx(Anchor.Anchor, {
@@ -58,12 +57,12 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
         })
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         "data-color": color,
-        className: classNames(Breadcrumbs_module.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__*/jsxRuntime.jsx("li", {
-        className: Breadcrumbs_module.breadcrumbLink,
+        className: "fabric-breadcrumbLink",
         "data-separator": separator,
         children: link
       }, idx);

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

@@ -10,11 +10,11 @@ var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
 var HotKey = require('../../hotkeys/HotKey.js');
 var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
 var Tooltip = require('../../overlays/tooltip/Tooltip.js');
+var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
 var Animations = require('../animations/Animations.js');
 var Badge = require('../badge/Badge.js');
 var Icon = require('../icon/Icon.js');
-var Button_module = require('./Button.module.css');
-var jsxRuntime = require('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__*/jsxRuntime.jsxs("div", {
-    className: classNames(Button_module.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__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
         ref: utilities.mergeRefs(ref, refEl),
         role: "button",
-        className: classNames(Button_module.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 && Button_module.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__*/jsxRuntime.jsx(Icon.Icon, {
-          className: Button_module.buttonIcon,
+          className: "fabric-buttonIcon",
           icon: icon,
           bg: iconBg,
           color: iconColor,
           rtlFlip: rtlFlip,
           "data-align": iconAlign
         }), /*#__PURE__*/react.isValidElement(children) && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: Button_module.buttonChild,
+          className: "fabric-buttonChild",
           children: children
         }), utilities.isString(children) && /*#__PURE__*/jsxRuntime.jsx("label", {
-          className: classNames(Button_module.buttonLabel, "truncate"),
+          className: classNames("fabric-buttonLabel", "truncate"),
           "data-colored-icon": !!iconBg,
           children: children
         }), !utilities.isNil(badge) && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread({}, badgeProps)), hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKeyLabel.HotKeyLabel, {
           keyCombo: hotKey
         }), altIcon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-          className: Button_module.altIcon,
+          className: "fabric-altIcon",
           icon: altIcon,
           rtlFlip: true
         })]
       }))
     })), actionDone && /*#__PURE__*/jsxRuntime.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.getColor("".concat(color, "-300"))
+      },
       children: /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
         type: "check",
         color: color

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

@@ -6,7 +6,6 @@ var classNames = require('classnames');
 var react = require('react');
 var cloneElement = require('../../utils/cloneElement.js');
 require('@react-fabric/utilities');
-var Button_module = require('./Button.module.css');
 var jsxRuntime = require('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__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     "data-ref": "buttonGroup",
-    className: classNames(Button_module.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && Button_module.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: cloneElement.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread({

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

@@ -8,7 +8,6 @@ var classNames = require('classnames');
 var react = require('react');
 var useControlledValue = require('../../hooks/useControlledValue.js');
 var cloneElement = require('../../utils/cloneElement.js');
-var Button_module = require('./Button.module.css');
 var jsxRuntime = require('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__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-    className: classNames(Button_module.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && Button_module.vertical, vertical && "flex-col")
+    className: classNames("fabric-buttonGroup", className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && "vertical", vertical && "flex-col")
   }, aria), {}, {
     children: cloneElement.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread(_objectSpread({

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

@@ -4,15 +4,21 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var icons = require('../../types/icons.js');
-require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var getColor = require('../../utils/getColor.js');
-require('@react-fabric/utilities');
 var Icon = require('../icon/Icon.js');
+var jsxRuntime = require('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__*/jsxRuntime.jsxs("fieldset", _objectSpread(_objectSpread({
-    className: classNames(className, "block rounded-capped border max-w-full relative overflow-hidden mb-4", getColor.getBgClass(color + "-50"), getColor.getColorClass(color + "-700"), getColor.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__*/jsxRuntime.jsx("legend", {
       className: "px-2 mx-4 font-medium",

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

@@ -10,7 +10,6 @@ var HeadFoot = require('../../core/headfoot/HeadFoot.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('@react-fabric/utilities');
 var nodeCheck = require('../../utils/nodeCheck.js');
-var Card_module = require('./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__*/jsxRuntime.jsx("div", {
-    className: classNames(Card_module.cardWrapper, "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && Card_module.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__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-        className: classNames(Card_module.card, className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && Card_module.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__*/jsxRuntime.jsx("div", {
           role: "none",
-          className: classNames(Card_module.cardBody, bodyClassName, "flex-1"),
+          className: classNames("fabric-cardBody", bodyClassName, "flex-1"),
           onClick: onClick,
           children: body
         }), footer]

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

@@ -9,11 +9,15 @@ var jsxRuntime = require('react/jsx-runtime');
 require('@react-fabric/utilities');
 var nodeCheck = require('../../utils/nodeCheck.js');
 var Media = require('../media/Media.js');
-var Card_module = require('./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 = react.useMemo(function () {
       return react.Children.toArray(children).reduce(function (ret, node) {
@@ -36,10 +41,10 @@ var CardCover = function CardCover(_ref) {
     style: {
       height: height
     },
-    className: classNames(Card_module.cardCover, Card_module[colorScheme !== null && colorScheme !== void 0 ? colorScheme : "inheritScheme"], "relative z-0")
+    className: classNames("fabric-cardCover", scheme[colorScheme], "relative z-0")
   }, aria), {}, {
     children: [media, /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Card_module.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/cjs/components/chip/Chip.js

@@ -9,7 +9,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Icon = require('../icon/Icon.js');
-var Chip_module = require('./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(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.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__*/jsxRuntime.jsx(Icon.Icon, {
       "data-ref": "chipIcon",
-      className: classNames(Chip_module.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__*/jsxRuntime.jsx("label", {
       "data-ref": "chipLabel",
-      className: classNames(Chip_module.chipLabel, "truncate"),
+      className: classNames("fabric-chipLabel", "truncate"),
       children: children
     }), onRemove && /*#__PURE__*/jsxRuntime.jsx("span", {
       role: "none",
       "data-ref": "chipRemove",
       "data-inner-cliackable": true,
-      className: classNames(Chip_module.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/cjs/components/collapsable/Collapsable.js

@@ -8,7 +8,6 @@ var classNames = require('classnames');
 var react = require('react');
 var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
-var Collapsable_module = require('./Collapsable.module.css');
 var jsxRuntime = require('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__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(Collapsable_module.collapsable, className)
+    className: classNames("fabric-collapsable", className)
   }, aria), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames(Collapsable_module.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__*/jsxRuntime.jsx("div", {
       ref: bodyRef,
-      className: classNames(Collapsable_module.collapsableBody, bodyClassName),
+      className: classNames("fabric-collapsableBody", bodyClassName),
       children: body
     })]
   }));

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

@@ -5,7 +5,6 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
-var Divider_module = require('./Divider.module.css');
 
 /*
  * React Fabric
@@ -32,10 +31,12 @@ var Divider_module = require('./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 = react.useCallback(function (_ref2) {
@@ -43,9 +44,10 @@ var Divider = function Divider(_ref) {
       className = _ref2.className;
     return /*#__PURE__*/jsxRuntime.jsx("hr", {
       style: {
-        flex: flex
+        flex: flex,
+        borderColor: getColor.getColor(color)
       },
-      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? Divider_module.vertical : Divider_module.horizontal, color && getColor.getBorderClass(color + "-200"))
+      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
     });
   }, [color, vertical]);
   return children ? /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -53,7 +55,7 @@ var Divider = function Divider(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsx(Rule, {
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? Divider_module.vertical : Divider_module.horizontal, fill && getColor.getBgClass((color !== null && color !== void 0 ? color : "tint") + "-200"), !fill && getColor.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__*/jsxRuntime.jsx(Rule, {
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"

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

@@ -6,7 +6,6 @@ var react = require('@floating-ui/react');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
-var Dropdown_module = require('./Dropdown.module.css');
 var jsxRuntime = require('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__*/jsxRuntime.jsx("div", {
             role: "none",
-            className: classNames(Dropdown_module.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__*/jsxRuntime.jsx(react.FloatingArrow, {
             ref: arrowRef,
             context: context,
             strokeWidth: 0.5,
-            className: "fill-base stroke-muted"
+            className: "fill-base stroke-dimmed"
           })]
         }))
       })]

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

@@ -20,7 +20,7 @@ var DropdownTool = function DropdownTool(_ref) {
   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,
-      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/cjs/components/icon/Icon.js

@@ -7,7 +7,6 @@ var classNames = require('classnames');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
-var Icon_module = require('./Icon.module.css');
 
 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(Icon_module.icon, className, "select-none overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getColor.getBgClass(bg), color && getColor.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/cjs/components/media/Media.js

@@ -8,13 +8,17 @@ var classNames = require('classnames');
 var react = require('react');
 var icons = require('../../types/icons.js');
 var Button = require('../button/Button.js');
-var Media_module = require('./Media.module.css');
 var jsxRuntime = require('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 = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Media_module.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__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "image",
-    className: classNames(Media_module.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && Media_module.mediaReel, className),
+    className: classNames("fabric-mediaContainer", "relative overflow-hidden bg-gray inline-block", reel && "fabric-mediaReel", className),
     "data-colorset": colorSet
   }, aria), {}, {
     children: [loadIndicator, /*#__PURE__*/jsxRuntime.jsx("img", {
@@ -43,7 +47,7 @@ var Image = function Image(_ref) {
       src: src,
       loading: "lazy",
       crossOrigin: "anonymous",
-      className: classNames(Media_module.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__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "video",
-    className: classNames(Media_module.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && Media_module.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__*/jsxRuntime.jsx("div", {
-      className: classNames(Media_module.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__*/jsxRuntime.jsxs("video", {
       loop: true,
@@ -92,7 +96,7 @@ var Video = function Video(_ref2) {
       controls: false,
       poster: poster,
       autoPlay: autoPlay,
-      className: classNames(Media_module.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__*/jsxRuntime.jsxs("div", {
       "data-inner-clickable": true,
-      className: classNames(Media_module.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__*/jsxRuntime.jsx(Button.Button, {
         rounded: true,
         variant: "link",
-        className: Media_module.mediaControlPlaceholder,
+        className: "fabric-mediaControlPlaceholder",
         icon: icons.CoreIcons.ellipsis,
         "aria-label": "controls"
       }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
         rounded: true,
         variant: "link",
         "aria-label": "controls",
-        className: Media_module.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: Media_module.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/cjs/components/menu/Menu.js

@@ -175,7 +175,7 @@ var MenuComponent = function MenuComponent(_ref) {
             initialFocus: isNested ? -1 : 0,
             returnFocus: !isNested,
             children: /*#__PURE__*/jsxRuntime.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: utilities.mergeRefs(isNested ? refs.setFloating : ref)
             }, getFloatingProps({

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

@@ -17,7 +17,6 @@ var Badge = require('../badge/Badge.js');
 var Icon = require('../icon/Icon.js');
 require('../../types/icons.js');
 require('../../hotkeys/HotKeyWrapper.js');
-var Menu_module = require('./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 = utilities.iconToken(label);
     }
     return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      className: classNames(Menu_module.menuIcon, minimal && Menu_module.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: utilities.mergeRefs(ref, elRef),
       "data-dropdown-dismiss": true,
       "data-color": color,
-      className: classNames(Menu_module.menuItem, className, active && Menu_module.active, minimal && Menu_module.minimal, disabled && Menu_module.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,