@react-fabric/core 1.0.0-beta.22 → 1.0.0-beta.24

package/dist/cjs/components/animations/Animations.js

@@ -5,10 +5,10 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Animations_module = require('./Animations.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["className", "color", "strokeColor", "type"],
   _excluded2 = ["className"];

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

@@ -7,9 +7,9 @@ var utilities = require('@react-fabric/utilities');
 var BoringAvatar = require('boring-avatars');
 var classNames = require('classnames');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 var Avatar_module = require('./Avatar.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "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; }

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

@@ -2,9 +2,10 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var utilities = require('@react-fabric/utilities');
 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');
 
@@ -26,7 +27,7 @@ var ButtonGroup = function ButtonGroup(_ref) {
     "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")
   }, aria), {}, {
-    children: utilities.cloneChildren(children, function (child) {
+    children: cloneElement.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread({
         color: color,
         size: size,

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

@@ -7,6 +7,7 @@ var utilities = require('@react-fabric/utilities');
 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');
 
@@ -48,7 +49,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(_ref) {
   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")
   }, aria), {}, {
-    children: utilities.cloneChildren(children, function (child) {
+    children: cloneElement.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread(_objectSpread({
         color: color,
         size: size,

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

@@ -4,10 +4,11 @@ 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; }

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

@@ -7,10 +7,10 @@ var classNames = require('classnames');
 var react = require('react');
 var ErrorBoundary = require('../../core/boundary/ErrorBoundary.js');
 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 jsxRuntime = require('react/jsx-runtime');
 
 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; }

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

@@ -5,11 +5,11 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var react = require('react');
+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 jsxRuntime = require('react/jsx-runtime');
 
 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; }

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

@@ -5,11 +5,11 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+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 jsxRuntime = require('react/jsx-runtime');
 
 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; }

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

@@ -2,10 +2,10 @@
 
 var classNames = require('classnames');
 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');
-var jsxRuntime = require('react/jsx-runtime');
 
 /*
  * React Fabric

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

@@ -5,9 +5,9 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var utilities = require('@react-fabric/utilities');
 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 jsxRuntime = require('react/jsx-runtime');
 
 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; }

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

@@ -7,7 +7,9 @@ var react = require('@floating-ui/react');
 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');
@@ -165,33 +167,35 @@ var MenuComponent = function MenuComponent(_ref) {
       elementsRef: elementsRef,
       labelsRef: labelsRef,
       children: (!isNested || isOpen) && /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-        children: [isNested && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {}), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-          context: context,
-          modal: !isNested,
-          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)]"),
-            autoFocus: true,
-            ref: utilities.mergeRefs(isNested ? refs.setFloating : ref)
-          }, getFloatingProps({
-            onClick: isNested ? undefined : handleClick
-          })), {}, {
-            style: !isNested ? rest.style : floatingStyles,
-            children: utilities.cloneChildren(children, function (child, index) {
-              labelsRef.current[index] = child.props.label;
-              return /*#__PURE__*/react$1.cloneElement(child, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
-                minimal: !isNested && minimal,
-                "data-focus": activeIndex === index,
-                ref: function ref(el) {
-                  return elementsRef.current[index] = el;
-                }
-              }, getItemProps({
-                onClick: child.props.onClick,
-                tabIndex: activeIndex === index ? 0 : -1
-              })) : {});
-            })
-          }))
+        children: [isNested && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {}), /*#__PURE__*/jsxRuntime.jsx(HotKeyWrapper.HotKeyWrapper, {
+          children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+            context: context,
+            modal: !isNested,
+            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)]"),
+              autoFocus: true,
+              ref: utilities.mergeRefs(isNested ? refs.setFloating : ref)
+            }, getFloatingProps({
+              onClick: isNested ? undefined : handleClick
+            })), {}, {
+              style: !isNested ? rest.style : floatingStyles,
+              children: cloneElement.cloneChildren(children, function (child, index) {
+                labelsRef.current[index] = child.props.label;
+                return /*#__PURE__*/react$1.cloneElement(child, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
+                  minimal: !isNested && minimal,
+                  "data-focus": activeIndex === index,
+                  ref: function ref(el) {
+                    return elementsRef.current[index] = el;
+                  }
+                }, getItemProps({
+                  onClick: child.props.onClick,
+                  tabIndex: activeIndex === index ? 0 : -1
+                })) : {});
+              })
+            }))
+          })
         })]
       }))
     })]

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

@@ -2,20 +2,21 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('@floating-ui/react');
+var react$1 = require('@floating-ui/react');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
-var react$1 = require('react');
+var react = require('react');
+var HotKey = require('../../hotkeys/HotKey.js');
 var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
 require('@babel/runtime/helpers/slicedToArray');
 require('react-i18next');
 require('../../hooks/useEffectDebugger.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('../../hotkeys/HotKeyWrapper.js');
 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 Menu_module = require('./Menu.module.css');
 
 var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
@@ -44,11 +45,12 @@ var MenuItem = function MenuItem(_ref) {
     childOpen = _ref["data-open"],
     ref = _ref.ref,
     aria = _objectWithoutProperties(_ref, _excluded);
-  var tree = react.useFloatingTree();
-  var badgeProps = react$1.useMemo(function () {
+  var elRef = react.useRef(null);
+  var tree = react$1.useFloatingTree();
+  var badgeProps = react.useMemo(function () {
     return Badge.getBadgeProps(badge);
   }, [badge]);
-  var iconEl = react$1.useMemo(function () {
+  var iconEl = react.useMemo(function () {
     var _path;
     var path = icon;
     if (minimal && !path) {
@@ -62,7 +64,7 @@ var MenuItem = function MenuItem(_ref) {
       rtlFlip: rtlFlip
     });
   }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
-  var Wrapper = react$1.useCallback(function (_ref2) {
+  var Wrapper = react.useCallback(function (_ref2) {
     var children = _ref2.children,
       rest = _objectWithoutProperties(_ref2, _excluded2);
     return minimal ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, _objectSpread(_objectSpread({
@@ -71,11 +73,11 @@ var MenuItem = function MenuItem(_ref) {
       disabled: childOpen
     }, rest), {}, {
       children: children
-    })) : /*#__PURE__*/jsxRuntime.jsx(react$1.Fragment, {
+    })) : /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
       children: children
     });
   }, [minimal, label, childOpen]);
-  var menuLabel = react$1.useMemo(function () {
+  var menuLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-nowrap text-start items-center",
       children: [iconEl, !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
@@ -98,8 +100,8 @@ var MenuItem = function MenuItem(_ref) {
   }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
   var E = as !== null && as !== void 0 ? as : "button";
   return /*#__PURE__*/jsxRuntime.jsx(Wrapper, _objectSpread(_objectSpread({}, aria), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-      ref: ref,
+    children: /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
+      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"),
@@ -111,7 +113,13 @@ 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: menuLabel
+      children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+        keyCombo: hotKey,
+        handler: function handler() {
+          var _elRef$current, _elRef$current$click;
+          return (_elRef$current = elRef.current) === null || _elRef$current === void 0 || (_elRef$current$click = _elRef$current.click) === null || _elRef$current$click === void 0 ? void 0 : _elRef$current$click.call(_elRef$current);
+        }
+      }), menuLabel]
     }))
   }));
 };

package/dist/cjs/components/progress/ProgressBar.js

@@ -4,9 +4,10 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 var Progress_module = require('./Progress.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; }
 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; }

package/dist/cjs/components/progress/ProgressCircle.js

@@ -3,8 +3,9 @@
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
-var getColor = require('../../utils/getColor.js');
+require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
 
 /*
  * React Fabric

package/dist/cjs/components/tabpanel/TabPanel.js

@@ -3,11 +3,11 @@
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classNames = require('classnames');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 require('@react-fabric/utilities');
 var nodeCheck = require('../../utils/nodeCheck.js');
 var Tab = require('./Tab.js');
 var TabPanel_module = require('./TabPanel.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 // TODO: implement append/prepend tab-bar items
 

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

@@ -4,10 +4,11 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var HeadFoot_module = require('./HeadFoot.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["as", "children", "className", "bg", "color", "flex", "area", "dir", "align", "justify"];
 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; }

package/dist/cjs/index.js

@@ -51,6 +51,7 @@ require('react');
 require('react-i18next');
 var icons = require('./types/icons.js');
 var Title = require('./typography/Title.js');
+var cloneElement = require('./utils/cloneElement.js');
 require('@react-fabric/utilities');
 require('react/jsx-runtime');
 var Flyout = require('./overlays/flyout/Flyout.js');
@@ -73,6 +74,7 @@ var useResizeObserver = require('./hooks/useResizeObserver.js');
 var useStorage = require('./hooks/useStorage.js');
 var HotKey = require('./hotkeys/HotKey.js');
 var HotKeyLabel = require('./hotkeys/HotKeyLabel.js');
+var HotKeyWrapper = require('./hotkeys/HotKeyWrapper.js');
 var Global = require('./context/Global.js');
 
 
@@ -135,6 +137,7 @@ Object.defineProperty(exports, "CoreIcons", {
   get: function () { return icons.CoreIcons; }
 });
 exports.Title = Title.Title;
+exports.cloneChildren = cloneElement.cloneChildren;
 exports.Flyout = Flyout.Flyout;
 exports.Modal = Modal.Modal;
 exports.Tooltip = Tooltip.Tooltip;
@@ -158,6 +161,7 @@ exports.useLocalStorage = useStorage.useLocalStorage;
 exports.useSessionStorage = useStorage.useSessionStorage;
 exports.HotKey = HotKey.HotKey;
 exports.HotKeyLabel = HotKeyLabel.HotKeyLabel;
+exports.HotKeyWrapper = HotKeyWrapper.HotKeyWrapper;
 exports.ApplicationProvider = Global.ApplicationProvider;
 exports.useApplicationContext = Global.useApplicationContext;
 exports.useGlobals = Global.useGlobals;

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

@@ -11,10 +11,10 @@ var Button = require('../../components/button/Button.js');
 var Icon = require('../../components/icon/Icon.js');
 var icons = require('../../types/icons.js');
 var Title = require('../../typography/Title.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Alert_module = require('./Alert.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; }
 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; }

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

@@ -3,10 +3,10 @@
 var classNames = require('classnames');
 var react = require('react');
 var Icon = require('../../components/icon/Icon.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Message_module = require('./Message.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 /*
  * React Fabric

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

@@ -7,10 +7,10 @@ var Animations = require('../../components/animations/Animations.js');
 var Button = require('../../components/button/Button.js');
 var Icon = require('../../components/icon/Icon.js');
 var icons = require('../../types/icons.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Toast_module = require('./Toast.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 /*
  * React Fabric

package/dist/cjs/overlays/tooltip/Tooltip.js

@@ -118,7 +118,7 @@ var Tooltip = function Tooltip(_ref) {
         style: floatingStyles
       }, getFloatingProps()), {}, {
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classNames("font-medium text-dimmed flex-1", utilities.isString(content) && "whitespace-pre-wrap mixed-lang"),
+          className: classNames("font-medium text-dimmed flex-1 break-all", utilities.isString(content) && "whitespace-pre-wrap mixed-lang"),
           children: content
         }), copyEl, /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingArrow, {
           ref: arrowRef,

package/dist/cjs/typography/Abbr.js

@@ -7,9 +7,9 @@ var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
 var Tooltip = require('../overlays/tooltip/Tooltip.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 var Typography_module = require('./Typography.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; }
 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; }

package/dist/cjs/typography/Anchor.js

@@ -4,10 +4,11 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 require('@react-fabric/utilities');
 var types = require('./types.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "as", "children", "className", "bg", "color", "family", "size"];
 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; }

package/dist/cjs/typography/Mark.js

@@ -6,9 +6,9 @@ var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 var Typography_module = require('./Typography.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; }
 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; }

package/dist/cjs/typography/Text.js

@@ -10,10 +10,10 @@ var reactI18next = require('react-i18next');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
 var usePropToggle = require('../hooks/usePropToggle.js');
 var calculateDimensions = require('../utils/calculateDimensions.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 var Typography_module = require('./Typography.module.css');
 var types = require('./types.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "align"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

package/dist/cjs/typography/Title.js

@@ -4,11 +4,12 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 require('@react-fabric/utilities');
 var types = require('./types.js');
 var Typography_module = require('./Typography.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
 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; }

package/dist/cjs/utils/cloneElement.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var cloneChildren = function cloneChildren(children, callback) {
+  var _Children$map;
+  return (_Children$map = react.Children.map(children, function (c) {
+    if ( /*#__PURE__*/react.isValidElement(c)) {
+      if (c.type === jsxRuntime.Fragment) {
+        var _c$props;
+        // just compare to `Fragment`
+        return cloneChildren((_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean).map(callback);
+};
+
+exports.cloneChildren = cloneChildren;

package/dist/esm/components/animations/Animations.js

@@ -5,10 +5,10 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Animations.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["className", "color", "strokeColor", "type"],
   _excluded2 = ["className"];

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

@@ -7,9 +7,9 @@ import { isSvgPath } from '@react-fabric/utilities';
 import BoringAvatar from 'boring-avatars';
 import classNames from 'classnames';
 import { useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
 import classes from './Avatar.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "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; }

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

@@ -2,9 +2,10 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { cloneChildren } from '@react-fabric/utilities';
 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';
 

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

@@ -3,10 +3,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isArray, EMPTY_ARRAY, cloneChildren } from '@react-fabric/utilities';
+import { isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
 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';