@react-fabric/core 1.0.0-beta.15 → 1.0.0-beta.18

package/css/index.js

@@ -63,7 +63,7 @@ module.exports = plugin(
       ".scroll-hide": {},
       ...Object.fromEntries(
         Object.entries(theme("spacing")).map(([key, size]) => [
-          `.gap-${key}`,
+          `.gap-${key.replace(".", "\\.")}`,
           { gap: size, "--gutter": size },
         ]),
       ),

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

@@ -9,7 +9,7 @@ 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", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
+var _excluded = ["ref", "className", "value", "max", "ping", "block", "inline", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
 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 getBadgeProps = function getBadgeProps(badge) {
@@ -33,6 +33,7 @@ var Badge = function Badge(_ref) {
     max = _ref.max,
     ping = _ref.ping,
     block = _ref.block,
+    inline = _ref.inline,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "top-end" : _ref$placement,
     children = _ref.children,
@@ -59,14 +60,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 ? "contents" : "relative", block ? "block" : "inline-block"),
+    className: classNames(forButton || inline ? "contents" : "relative", block ? "block" : "inline-block"),
     children: [children && /*#__PURE__*/react.cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
       ref: innerRef
     })), (!!ping || label) && /*#__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-5 pointer-events-none", forButton && !placement ? "relative" : "absolute"),
+      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-5 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
       children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "p-1",
         children: label

package/dist/cjs/components/button/Button.module.css

@@ -1 +1 @@
-@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}
+@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=soft]{--bg:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-hover:color-mix(in lab,var(--color) 35%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 50%,theme(colors.tint.50));--bg-active:color-mix(in lab,var(--color) 50%,theme(colors.tint.50))}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}

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

@@ -2,6 +2,7 @@
 
 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 Button_module = require('./Button.module.css');
@@ -25,7 +26,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: react.Children.map(children, function (child) {
+    children: utilities.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread({
         color: color,
         size: size,

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

@@ -48,7 +48,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: react.Children.map(children, function (child) {
+    children: utilities.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread(_objectSpread({
         color: color,
         size: size,

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

@@ -66,7 +66,7 @@ var Chip = function Chip(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
+    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,
@@ -84,6 +84,7 @@ var Chip = function Chip(_ref) {
       children: children
     }), onRemove && /*#__PURE__*/jsxRuntime.jsx("span", {
       role: "none",
+      "data-inner-cliackable": true,
       className: classNames(Chip_module.chipRemove, "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
       onClick: removeHandler,
       children: "\xD7"

package/dist/cjs/components/chip/Chip.module.css

@@ -1 +1 @@
-@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
+@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.25;padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}

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

@@ -137,6 +137,16 @@ var MenuComponent = function MenuComponent(_ref) {
       });
     }, 100);
   }, [isOpen]);
+  react$1.useEffect(function () {
+    if ((!isNested || isOpen) && activeIndex) {
+      setTimeout(function () {
+        var _elementsRef$current$;
+        (_elementsRef$current$ = elementsRef.current[activeIndex]) === null || _elementsRef$current$ === void 0 || _elementsRef$current$.scrollIntoView({
+          block: "nearest"
+        });
+      }, 100);
+    }
+  }, [isOpen, activeIndex]);
   return /*#__PURE__*/jsxRuntime.jsxs(react.FloatingNode, {
     id: nodeId,
     children: [isNested && /*#__PURE__*/jsxRuntime.jsx(MenuItem.MenuItem, _objectSpread(_objectSpread({}, getReferenceProps(_objectSpread(_objectSpread({}, rest), {}, {
@@ -168,20 +178,18 @@ var MenuComponent = function MenuComponent(_ref) {
             onClick: isNested ? undefined : handleClick
           })), {}, {
             style: !isNested ? rest.style : floatingStyles,
-            children: react$1.Children.map(children, function (child, index) {
-              if (child) {
-                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: 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
+              })) : {});
             })
           }))
         })]
@@ -191,6 +199,7 @@ var MenuComponent = function MenuComponent(_ref) {
 };
 var Menu = function Menu(props) {
   var parentId = react.useFloatingParentNodeId();
+  var tree = react.useFloatingTree();
   if (parentId === null) {
     return /*#__PURE__*/jsxRuntime.jsx(react.FloatingTree, {
       children: /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
@@ -198,6 +207,11 @@ var Menu = function Menu(props) {
       }))
     });
   }
+  if (tree) {
+    return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+      menuClassName: props.className
+    }));
+  }
   return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread({}, props));
 };
 

package/dist/cjs/hooks/useNavigator.js

@@ -23,7 +23,7 @@ var useNavigator = function useNavigator() {
   }, [totalCount]);
   var headLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: "text-muted leading-5",
+      className: "text-muted leading-none select-none",
       children: [currentIndex + 1, "/", totalCount]
     });
   }, [currentIndex, totalCount]);

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

@@ -114,15 +114,15 @@ var Alert = function Alert(_ref) {
             className: classNames("area-[icon] text-lg py-2"),
             children: iconType
           }), /*#__PURE__*/jsxRuntime.jsx(Title.Title, {
-            className: "font-medium area-[title]",
+            className: "font-medium area-[title] self-center",
             children: title
-          }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
             className: "area-[message] py-4",
             children: message
           }), type === "prompt" && /*#__PURE__*/jsxRuntime.jsx("input", {
             value: value,
             placeholder: placeholder,
-            className: classNames("border rounded focus:border-primary-500"),
+            className: classNames("area-[input] appearance-none outline-0 ring-".concat(color, "-500 border rounded border-").concat(color, "-200 w-full px-2 py-1")),
             ref: function ref(e) {
               return e != null && setTimeout(function () {
                 return e.focus();
@@ -158,7 +158,7 @@ var Alert = function Alert(_ref) {
               variant: "solid",
               color: color,
               onClick: function onClick() {
-                return handleClose(true);
+                return handleClose(type === "prompt" ? value : true);
               },
               children: okLabel !== null && okLabel !== void 0 ? okLabel : t("action.ok", "OK")
             })]

package/dist/cjs/overlays/alert/Alert.module.css

@@ -1 +1 @@
-@layer comp{.alert{gap:.5rem 1rem;grid-template:"icon title" auto "icon message" auto "input input" auto "actions actions" auto/auto 1fr;margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}}}
+@layer comp{.alert{gap:.5rem 1rem;grid-template:"icon title" auto "message message" auto "input input" auto "actions actions" auto/auto 1fr;margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}}}

package/dist/cjs/typography/Text.js

@@ -98,7 +98,7 @@ var Text = function Text(_ref) {
         "--text-clamp": showMore ? "unset" : clamp !== null && clamp !== void 0 ? clamp : "unset"
       },
       children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-        className: classNames(Typography_module.text, "text-reset mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), clamp && "line-clamp-1"),
+        className: classNames(Typography_module.text, "mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), clamp && "line-clamp-1"),
         style: styles
       }, aria), {}, {
         children: children

package/dist/cjs/typography/Title.js

@@ -48,7 +48,7 @@ var Title = function Title(_ref) {
   }, [bg, color, size, align], "Title styles");
   var E = as !== null && as !== void 0 ? as : "p";
   return /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-    className: classNames(Typography_module.title, "px-[2px] py-1 truncate whitespace-pre-wrap", className, family && "font-".concat(family), !as && "text-lg", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color)),
+    className: classNames(Typography_module.title, className, family && "font-".concat(family), !as && "text-lg", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color)),
     style: styles
   }, aria), {}, {
     children: children

package/dist/cjs/typography/Typography.module.css

@@ -1 +1 @@
-@layer comp{.title{line-height:1.125}.moreLink{margin:-.25rem 0 .25rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--primary);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}
+@layer comp{.title{line-height:1.125;padding:4px 2px;white-space:prewrap}.moreLink{margin:-.25rem 0 .25rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--primary);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}

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

@@ -9,7 +9,7 @@ import { Icon } from '../icon/Icon.js';
 import classes from './Badge.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "className", "value", "max", "ping", "block", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
+var _excluded = ["ref", "className", "value", "max", "ping", "block", "inline", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
 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 getBadgeProps = function getBadgeProps(badge) {
@@ -33,6 +33,7 @@ var Badge = function Badge(_ref) {
     max = _ref.max,
     ping = _ref.ping,
     block = _ref.block,
+    inline = _ref.inline,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "top-end" : _ref$placement,
     children = _ref.children,
@@ -59,14 +60,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__*/jsxs("div", {
-    className: classNames(forButton ? "contents" : "relative", block ? "block" : "inline-block"),
+    className: classNames(forButton || inline ? "contents" : "relative", block ? "block" : "inline-block"),
     children: [children && /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
       ref: innerRef
     })), (!!ping || label) && /*#__PURE__*/jsxs("div", {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,
-      className: classNames(classes.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none", forButton && !placement ? "relative" : "absolute"),
+      className: classNames(classes.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
       children: [label && /*#__PURE__*/jsx("span", {
         className: "p-1",
         children: label

package/dist/esm/components/button/Button.module.css

@@ -1 +1 @@
-@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}
+@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=soft]{--bg:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-hover:color-mix(in lab,var(--color) 35%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 50%,theme(colors.tint.50));--bg-active:color-mix(in lab,var(--color) 50%,theme(colors.tint.50))}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}

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

@@ -2,8 +2,9 @@
 
 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 { Children, cloneElement } from 'react';
+import { cloneElement } from 'react';
 import classes from './Button.module.css';
 import { jsx } from 'react/jsx-runtime';
 
@@ -25,7 +26,7 @@ var ButtonGroup = function ButtonGroup(_ref) {
     "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")
   }, aria), {}, {
-    children: Children.map(children, function (child) {
+    children: cloneChildren(children, function (child) {
       return /*#__PURE__*/cloneElement(child, _objectSpread({
         color: color,
         size: size,

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

@@ -3,9 +3,9 @@
 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 } from '@react-fabric/utilities';
+import { isArray, EMPTY_ARRAY, cloneChildren } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo, useCallback, Children, cloneElement } from 'react';
+import { useMemo, useCallback, cloneElement } from 'react';
 import { useControlledValue } from '../../hooks/useControlledValue.js';
 import classes from './Button.module.css';
 import { jsx } from 'react/jsx-runtime';
@@ -48,7 +48,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(_ref) {
   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")
   }, aria), {}, {
-    children: Children.map(children, function (child) {
+    children: cloneChildren(children, function (child) {
       return /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({
         color: color,
         size: size,

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

@@ -66,7 +66,7 @@ var Chip = function Chip(_ref) {
   return /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
+    className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,
@@ -84,6 +84,7 @@ var Chip = function Chip(_ref) {
       children: children
     }), onRemove && /*#__PURE__*/jsx("span", {
       role: "none",
+      "data-inner-cliackable": true,
       className: classNames(classes.chipRemove, "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
       onClick: removeHandler,
       children: "\xD7"

package/dist/esm/components/chip/Chip.module.css

@@ -1 +1 @@
-@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
+@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);font-size:.875rem;outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{line-height:1.25;padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}

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

@@ -3,10 +3,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useFloatingParentNodeId, FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, offset, flip, shift, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingOverlay, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
-import { mergeRefs } from '@react-fabric/utilities';
+import { useFloatingParentNodeId, useFloatingTree, FloatingTree, useFloatingNodeId, useFloating, offset, flip, shift, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingOverlay, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
+import { mergeRefs, cloneChildren } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useState, useRef, useEffect, useCallback, Children, cloneElement, Fragment } from 'react';
+import { useState, useRef, useEffect, useCallback, cloneElement, Fragment } from 'react';
 import { CoreIcons } from '../../types/icons.js';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
@@ -137,6 +137,16 @@ var MenuComponent = function MenuComponent(_ref) {
       });
     }, 100);
   }, [isOpen]);
+  useEffect(function () {
+    if ((!isNested || isOpen) && activeIndex) {
+      setTimeout(function () {
+        var _elementsRef$current$;
+        (_elementsRef$current$ = elementsRef.current[activeIndex]) === null || _elementsRef$current$ === void 0 || _elementsRef$current$.scrollIntoView({
+          block: "nearest"
+        });
+      }, 100);
+    }
+  }, [isOpen, activeIndex]);
   return /*#__PURE__*/jsxs(FloatingNode, {
     id: nodeId,
     children: [isNested && /*#__PURE__*/jsx(MenuItem, _objectSpread(_objectSpread({}, getReferenceProps(_objectSpread(_objectSpread({}, rest), {}, {
@@ -168,20 +178,18 @@ var MenuComponent = function MenuComponent(_ref) {
             onClick: isNested ? undefined : handleClick
           })), {}, {
             style: !isNested ? rest.style : floatingStyles,
-            children: Children.map(children, function (child, index) {
-              if (child) {
-                labelsRef.current[index] = child.props.label;
-                return /*#__PURE__*/cloneElement(child, nodeCheck(child, 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: cloneChildren(children, function (child, index) {
+              labelsRef.current[index] = child.props.label;
+              return /*#__PURE__*/cloneElement(child, nodeCheck(child, 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
+              })) : {});
             })
           }))
         })]
@@ -191,6 +199,7 @@ var MenuComponent = function MenuComponent(_ref) {
 };
 var Menu = function Menu(props) {
   var parentId = useFloatingParentNodeId();
+  var tree = useFloatingTree();
   if (parentId === null) {
     return /*#__PURE__*/jsx(FloatingTree, {
       children: /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
@@ -198,6 +207,11 @@ var Menu = function Menu(props) {
       }))
     });
   }
+  if (tree) {
+    return /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+      menuClassName: props.className
+    }));
+  }
   return /*#__PURE__*/jsx(MenuComponent, _objectSpread({}, props));
 };
 

package/dist/esm/hooks/useNavigator.js

@@ -23,7 +23,7 @@ var useNavigator = function useNavigator() {
   }, [totalCount]);
   var headLabel = useMemo(function () {
     return /*#__PURE__*/jsxs("span", {
-      className: "text-muted leading-5",
+      className: "text-muted leading-none select-none",
       children: [currentIndex + 1, "/", totalCount]
     });
   }, [currentIndex, totalCount]);

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

@@ -114,15 +114,15 @@ var Alert = function Alert(_ref) {
             className: classNames("area-[icon] text-lg py-2"),
             children: iconType
           }), /*#__PURE__*/jsx(Title, {
-            className: "font-medium area-[title]",
+            className: "font-medium area-[title] self-center",
             children: title
-          }), /*#__PURE__*/jsx("p", {
+          }), /*#__PURE__*/jsx("div", {
             className: "area-[message] py-4",
             children: message
           }), type === "prompt" && /*#__PURE__*/jsx("input", {
             value: value,
             placeholder: placeholder,
-            className: classNames("border rounded focus:border-primary-500"),
+            className: classNames("area-[input] appearance-none outline-0 ring-".concat(color, "-500 border rounded border-").concat(color, "-200 w-full px-2 py-1")),
             ref: function ref(e) {
               return e != null && setTimeout(function () {
                 return e.focus();
@@ -158,7 +158,7 @@ var Alert = function Alert(_ref) {
               variant: "solid",
               color: color,
               onClick: function onClick() {
-                return handleClose(true);
+                return handleClose(type === "prompt" ? value : true);
               },
               children: okLabel !== null && okLabel !== void 0 ? okLabel : t("action.ok", "OK")
             })]

package/dist/esm/overlays/alert/Alert.module.css

@@ -1 +1 @@
-@layer comp{.alert{gap:.5rem 1rem;grid-template:"icon title" auto "icon message" auto "input input" auto "actions actions" auto/auto 1fr;margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}}}
+@layer comp{.alert{gap:.5rem 1rem;grid-template:"icon title" auto "message message" auto "input input" auto "actions actions" auto/auto 1fr;margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}}}

package/dist/esm/typography/Text.js

@@ -98,7 +98,7 @@ var Text = function Text(_ref) {
         "--text-clamp": showMore ? "unset" : clamp !== null && clamp !== void 0 ? clamp : "unset"
       },
       children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-        className: classNames(classes.text, "text-reset mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getBgClass(bg), color && getColorClass(color), clamp && "line-clamp-1"),
+        className: classNames(classes.text, "mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getBgClass(bg), color && getColorClass(color), clamp && "line-clamp-1"),
         style: styles
       }, aria), {}, {
         children: children

package/dist/esm/typography/Title.js

@@ -48,7 +48,7 @@ var Title = function Title(_ref) {
   }, [bg, color, size, align], "Title styles");
   var E = as !== null && as !== void 0 ? as : "p";
   return /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
-    className: classNames(classes.title, "px-[2px] py-1 truncate whitespace-pre-wrap", className, family && "font-".concat(family), !as && "text-lg", bg && getBgClass(bg), color && getColorClass(color)),
+    className: classNames(classes.title, className, family && "font-".concat(family), !as && "text-lg", bg && getBgClass(bg), color && getColorClass(color)),
     style: styles
   }, aria), {}, {
     children: children

package/dist/esm/typography/Typography.module.css

@@ -1 +1 @@
-@layer comp{.title{line-height:1.125}.moreLink{margin:-.25rem 0 .25rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--primary);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}
+@layer comp{.title{line-height:1.125;padding:4px 2px;white-space:prewrap}.moreLink{margin:-.25rem 0 .25rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--primary);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}

package/dist/types/components/badge/Badge.d.ts

@@ -4,6 +4,10 @@ export interface BadgeProps extends CssProp, RefProp, IconProps, Partial<ChildPr
      * make wrapper a block element
      */
     block?: boolean;
+    /**
+     * inline badge
+     */
+    inline?: boolean;
     /**
      * badge value
      */
@@ -22,4 +26,4 @@ export interface BadgeProps extends CssProp, RefProp, IconProps, Partial<ChildPr
     placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top" | "bottom" | "start" | "end";
 }
 export declare const getBadgeProps: (badge?: string | number | BadgeType) => AnyObject;
-export declare const Badge: ({ ref, className, value, max, ping, block, placement, children, forButton, icon, iconBg, iconColor, rtlFlip, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ ref, className, value, max, ping, block, inline, placement, children, forButton, icon, iconBg, iconColor, rtlFlip, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/button/Button.d.ts

@@ -24,7 +24,7 @@ export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestP
     /**
      * button styling
      */
-    variant?: "outline" | "solid" | "link";
+    variant?: "outline" | "soft" | "solid" | "link";
     /**
      * active state with click disabled
      */

package/dist/types/core/responsive/Responsive.d.ts

@@ -39,7 +39,7 @@ export interface ColProps extends AriaProps, CssProp, TestProps, Partial<Childre
     /**
      * column flex
      */
-    flex?: "auto" | "fill" | "full";
+    flex?: "auto" | "fill" | "full" | "content";
     /**
      * stretch inner content
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.18",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.15",
+    "@react-fabric/utilities": "^1.0.0-beta.18",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "d6c7e122b74bf8b0511ef4fb8a99931458a37b3a"
+  "gitHead": "4795fee60aa3e7411934a688f7c53e42ca3297ed"
 }

package/src/components/badge/Badge.tsx

@@ -43,6 +43,10 @@ export interface BadgeProps
    * make wrapper a block element
    */
   block?: boolean;
+  /**
+   * inline badge
+   */
+  inline?: boolean;
   /**
    * badge value
    */
@@ -90,6 +94,7 @@ export const Badge = ({
   max,
   ping,
   block,
+  inline,
   placement = "top-end",
   children,
   // @ts-expect-error ignore
@@ -120,7 +125,7 @@ export const Badge = ({
   return (
     <div
       className={classNames(
-        forButton ? "contents" : "relative",
+        forButton || inline ? "contents" : "relative",
         block ? "block" : "inline-block",
       )}
     >
@@ -138,7 +143,7 @@ export const Badge = ({
             classes.badge,
             className,
             "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none",
-            forButton && !placement ? "relative" : "absolute",
+            (forButton && !placement) || inline ? "relative" : "absolute",
           )}
         >
           {label && <span className="p-1">{label}</span>}

package/src/components/button/Button.module.css

@@ -166,6 +166,13 @@
       --outline: var(--color);
     }
 
+    &[data-variant="soft"] {
+      --bg: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
+      --bg-hover: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
+      --bg-click: color-mix(in lab, var(--color) 50%, theme(colors.tint.50));
+      --bg-active: color-mix(in lab, var(--color) 50%, theme(colors.tint.50));
+    }
+
     &[data-variant="solid"] {
       --outline: var(--color);
       --bg: color-mix(in lab, var(--color) 96%, var(--fabric-text));

package/src/components/button/Button.tsx

@@ -85,7 +85,7 @@ export interface BaseProps
   /**
    * button styling
    */
-  variant?: "outline" | "solid" | "link";
+  variant?: "outline" | "soft" | "solid" | "link";
   /**
    * active state with click disabled
    */

package/src/components/button/ButtonGroup.tsx

@@ -21,8 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { cloneChildren } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Children, cloneElement } from "react";
+import { cloneElement } from "react";
 import {
   type AriaProps,
   type ChildrenProp,
@@ -96,7 +97,7 @@ export const ButtonGroup = ({
       )}
       {...aria}
     >
-      {Children.map(children, (child: AnyObject) =>
+      {cloneChildren(children, (child: AnyObject) =>
         cloneElement(child, {
           color,
           size,

package/src/components/button/ToggleButtonGroup.tsx

@@ -21,9 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
+import { cloneChildren, EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Children, cloneElement, useCallback, useMemo } from "react";
+import { cloneElement, useCallback, useMemo } from "react";
 import { useControlledValue } from "../../hooks/useControlledValue";
 import {
   type AriaProps,
@@ -140,7 +140,7 @@ export const ToggleButtonGroup = ({
       )}
       {...aria}
     >
-      {Children.map(children, (child: AnyObject) =>
+      {cloneChildren(children, (child: AnyObject) =>
         cloneElement(child, {
           color,
           size,

package/src/components/chip/Chip.module.css

@@ -25,13 +25,16 @@
   .chip {
     --blank-gradient: linear-gradient(to bottom, #00000005 0%, #0000 10%);
 
+    font-size: 0.875rem;
     color: theme(colors.tint.500);
+
     background-image: var(--blank-gradient);
     outline: 1px solid color-mix(in lab, currentcolor 20%, var(--fabric-bg));
     outline-offset: -1px;
 
     & > .chipLabel {
       padding: 0 0.5em;
+      line-height: 1.25;
     }
 
     & > .chipIcon {

package/src/components/chip/Chip.tsx

@@ -156,7 +156,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
         classes.chip,
         className,
         color && getColorClass(color),
-        "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded",
+        "select-none inline-flex flex-nowrap items-center max-w-72 rounded",
         rounded && "rounded-full",
         !!onClick && classes.clickable,
         disabled && classes.disabled,
@@ -185,6 +185,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
       {onRemove && (
         <span
           role="none"
+          data-inner-cliackable
           className={classNames(
             classes.chipRemove,
             "cursor-pointer pe-1 opacity-65 hover:opacity-90",

package/src/components/menu/Menu.tsx

@@ -45,10 +45,9 @@ import {
   useRole,
   useTypeahead,
 } from "@floating-ui/react";
-import { mergeRefs } from "@react-fabric/utilities";
+import { cloneChildren, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
-  Children,
   cloneElement,
   Fragment,
   useCallback,
@@ -187,6 +186,16 @@ const MenuComponent = ({
     );
   }, [isOpen]);
 
+  useEffect(() => {
+    if ((!isNested || isOpen) && activeIndex) {
+      setTimeout(() => {
+        elementsRef.current[activeIndex]?.scrollIntoView({
+          block: "nearest",
+        });
+      }, 100);
+    }
+  }, [isOpen, activeIndex]);
+
   return (
     <FloatingNode id={nodeId}>
       {isNested && (
@@ -231,25 +240,23 @@ const MenuComponent = ({
                 // @ts-expect-error ignore
                 {...{ style: !isNested ? rest.style : floatingStyles }}
               >
-                {Children.map(children, (child: AnyObject, index) => {
-                  if (child) {
-                    labelsRef.current[index] = child.props.label;
-                    return cloneElement(
-                      child,
-                      nodeCheck(child, MenuItem, Menu, MenuComponent)
-                        ? {
-                            minimal: !isNested && minimal,
-                            "data-focus": activeIndex === index,
-                            ref: (el: HTMLElement) =>
-                              (elementsRef.current[index] = el),
-                            ...getItemProps({
-                              onClick: child.props.onClick,
-                              tabIndex: activeIndex === index ? 0 : -1,
-                            }),
-                          }
-                        : {},
-                    );
-                  }
+                {cloneChildren(children, (child: AnyObject, index) => {
+                  labelsRef.current[index] = child.props.label;
+                  return cloneElement(
+                    child,
+                    nodeCheck(child, MenuItem, Menu, MenuComponent)
+                      ? {
+                          minimal: !isNested && minimal,
+                          "data-focus": activeIndex === index,
+                          ref: (el: HTMLElement) =>
+                            (elementsRef.current[index] = el),
+                          ...getItemProps({
+                            onClick: child.props.onClick,
+                            tabIndex: activeIndex === index ? 0 : -1,
+                          }),
+                        }
+                      : {},
+                  );
                 })}
               </div>
             </FloatingFocusManager>
@@ -262,6 +269,7 @@ const MenuComponent = ({
 
 export const Menu = (props: MenuProps) => {
   const parentId = useFloatingParentNodeId();
+  const tree = useFloatingTree();
 
   if (parentId === null) {
     return (
@@ -274,5 +282,14 @@ export const Menu = (props: MenuProps) => {
     );
   }
 
+  if (tree) {
+    return (
+      <MenuComponent
+        {...(props as AnyObject)}
+        menuClassName={props.className}
+      />
+    );
+  }
+
   return <MenuComponent {...props} />;
 };

package/src/core/responsive/Responsive.tsx

@@ -81,7 +81,7 @@ export interface ColProps
   /**
    * column flex
    */
-  flex?: "auto" | "fill" | "full";
+  flex?: "auto" | "fill" | "full" | "content";
   /**
    * stretch inner content
    */

package/src/hooks/useNavigator.tsx

@@ -43,7 +43,7 @@ export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
   );
   const headLabel = useMemo(
     () => (
-      <span className="text-muted leading-5">
+      <span className="text-muted leading-none select-none">
         {currentIndex + 1}/{totalCount}
       </span>
     ),

package/src/overlays/alert/Alert.module.css

@@ -25,7 +25,7 @@
   .alert {
     z-index: var(--z-overlay);
 
-    grid-template: "icon title" auto "icon message" auto "input input" auto "actions actions" auto / auto 1fr;
+    grid-template: "icon title" auto "message message" auto "input input" auto "actions actions" auto / auto 1fr;
     gap: 0.5rem 1rem;
 
     margin-top: -100%;

package/src/overlays/alert/Alert.tsx

@@ -190,14 +190,16 @@ export const Alert = ({
               {iconType}
             </div>
 
-            <Title className="font-medium area-[title]">{title}</Title>
-            <p className="area-[message] py-4">{message}</p>
+            <Title className="font-medium area-[title] self-center">
+              {title}
+            </Title>
+            <div className="area-[message] py-4">{message}</div>
             {type === "prompt" && (
               <input
                 value={value}
                 placeholder={placeholder}
                 className={classNames(
-                  "border rounded focus:border-primary-500",
+                  `area-[input] appearance-none outline-0 ring-${color}-500 border rounded border-${color}-200 w-full px-2 py-1`,
                 )}
                 ref={(e) => e != null && setTimeout(() => e.focus(), 100)}
                 onBlur={(e) => e.target.focus()}
@@ -228,7 +230,7 @@ export const Alert = ({
                 size="sm"
                 variant="solid"
                 color={color}
-                onClick={() => handleClose(true)}
+                onClick={() => handleClose(type === "prompt" ? value : true)}
               >
                 {okLabel ?? t("action.ok", "OK")}
               </Button>

package/src/typography/Text.tsx

@@ -165,7 +165,7 @@ export const Text = ({
         <div
           className={classNames(
             classes.text,
-            "text-reset mixed-lang px-[2px] whitespace-pre-wrap",
+            "mixed-lang px-[2px] whitespace-pre-wrap",
             family && `font-${family}`,
             bg && getBgClass(bg),
             color && getColorClass(color),

package/src/typography/Title.tsx

@@ -110,7 +110,6 @@ export const Title = ({
     <E
       className={classNames(
         classes.title,
-        "px-[2px] py-1 truncate whitespace-pre-wrap",
         className,
         family && `font-${family}`,
         !as && "text-lg",

package/src/typography/Typography.module.css

@@ -23,7 +23,9 @@
 
 @layer comp {
   .title {
+    padding: 4px 2px;
     line-height: 1.125;
+    white-space: prewrap;
   }
 
   .moreLink {