@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.61

package/dist/cjs/hooks/useIsRtl.js

@@ -5,6 +5,18 @@ var react = require('react');
 var reactI18next = require('react-i18next');
 var useEffectDebugger = require('./useEffectDebugger.js');
 
+/**
+ * Custom hook to determine if the current locale is RTL (Right-to-Left).
+ * It uses the i18n instance from react-i18next to check the direction.
+ *
+ * @returns {boolean} - Returns true if the current locale is RTL, false otherwise.
+ *
+ * @example
+ * ```jsx
+ * const isRtl = useIsRtl();
+ * // This will return true if the current locale is RTL, false otherwise.
+ * ```
+ */
 var useIsRtl = function useIsRtl() {
   var _useTranslation = reactI18next.useTranslation("core"),
     i18n = _useTranslation.i18n;

package/dist/cjs/hooks/useNavigator.js

@@ -11,17 +11,19 @@ var useNavigator = function useNavigator() {
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
     setCurrentIndex = _useState2[1];
+  var refCurrent = react.useRef(defaultIndex);
   var onNavigate = react.useCallback(function (dir) {
     if (dir === -1) {
-      setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : totalCount - 1);
+      refCurrent.current = refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
     }
     if (dir === 1) {
-      setCurrentIndex(currentIndex + 1 < totalCount ? currentIndex + 1 : 0);
+      refCurrent.current = refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
     }
-  }, [currentIndex, totalCount]);
+    setCurrentIndex(refCurrent.current);
+  }, [totalCount]);
   var headLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: "text-muted leading-none",
+      className: "text-muted leading-none select-none",
       children: [currentIndex + 1, "/", totalCount]
     });
   }, [currentIndex, totalCount]);

package/dist/cjs/hooks/useOverlayService.js

@@ -11,6 +11,30 @@ var jsxRuntime = require('react/jsx-runtime');
 var _excluded = ["onClose"];
 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; }
+/**
+ * Hook to manage overlay components like modals or flyouts.
+ * It provides a way to open an overlay with specified properties and handle its closure.
+ * This hook returns the current overlay component and a function to open it with props.
+ * It is useful for scenarios where you need to display overlays dynamically,
+ * such as modals, flyouts, or any other overlay components in a React application.
+ * The `openOverlay` function returns a promise that resolves with the result
+ * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
+ *
+ * @param ModalOrFlyout - The component to be used as an overlay.
+ * @returns An array containing the current overlay and a function to open it.
+ *
+ * @example
+ * ```jsx
+ * const [Overlay, openOverlay] = useOverlayService(MyModalComponent);
+ * // To open the overlay:
+ * const handleOpen = async () => {
+ *   const result = await openOverlay({ title: "My Modal", content: "Hello World" });
+ *   console.log(result); // Handle the result from the overlay
+ * };
+ * <button onClick={handleOpen}>Open Modal</button>
+ * <Overlay />
+ * ```
+ */
 var useOverlayService = function useOverlayService(ModalOrFlyout) {
   var _useState = react.useState(null),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/cjs/hooks/usePropToggle.js

@@ -5,11 +5,22 @@ var react = require('react');
 var useEffectDebugger = require('./useEffectDebugger.js');
 
 /**
- * hook to control boolean props
- * @param isOn (is prop true)
- * @param callback (optional callback)
- * @param key (optional key to pass to callback)
- * @returns
+ * This hook is used to manage a toggle state based on a prop value.
+ * It allows you to toggle the state and also provides a reference to the current state.
+ * It is useful for scenarios where you want to control a toggle state from a parent component while also allowing local toggling.
+ *
+ * @param isOn - Initial state of the toggle (default: false)
+ * @param onToggle - Callback function that is called when the toggle state changes.
+ * @param key - Optional key to identify the toggle state, useful for multiple toggles.
+ * @returns A tuple containing the current toggle state, a function to toggle the state, and a reference to the current state.
+ *
+ * @example
+ * ```jsx
+ * const [isToggled, toggle, toggleRef] = usePropToggle(false, (newState) => {
+ *   console.log("Toggle state changed to:", newState);
+ * });
+ * toggle(); // This will toggle the state and call the onToggle callback
+ * ```
  */
 var usePropToggle = function usePropToggle() {
   var isOn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

package/dist/cjs/hooks/useResize.js

@@ -26,6 +26,24 @@ var useIsRtl = require('./useIsRtl.js');
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+/**
+ * Custom hook to handle resizing of an element.
+ * It provides a ref to the element and a mouse down event handler to initiate resizing.
+ * The resizing is done by tracking mouse movements and calculating the difference in x and y coordinates.
+ * It supports both horizontal and vertical resizing, and can be configured to reverse the direction based on RTL (Right-to-Left) layout.
+ *
+ * @param onResize - callback to handle resize event with the difference in x and y
+ * @param options - options for resizing behavior
+ * @returns ref to the element and a mouse down event handler to initiate resizing
+ *
+ * @example
+ * ```jsx
+ * const { ref, onMouseDown } = useResize((diff) => {
+ *   console.log("Resize difference:", diff);
+ * }, { isReverse: true, isVertical: false });
+ * <div ref={ref} onMouseDown={onMouseDown}>Resize Me</div>
+ * ```
+ */
 var useResize = function useResize(onResize, _ref) {
   var _ref$isReverse = _ref.isReverse,
     isReverse = _ref$isReverse === void 0 ? false : _ref$isReverse,

package/dist/cjs/hooks/useResizeObserver.js

@@ -5,6 +5,25 @@ var react = require('react');
 var ResizeObserver = require('resize-observer-polyfill');
 var useDebounce = require('./useDebounce.js');
 
+/**
+ * Custom hook to observe size changes of an element using ResizeObserver.
+ * It returns a ref that can be attached to the element you want to observe.
+ * The hook will call the provided `onResize` callback with the new size of the element
+ * whenever it changes.
+ * * This is useful for responsive designs where you need to adjust the layout or styles
+ * based on the size of an element.
+ *
+ * @param onResize Callback function that receives the new size of the element.
+ * @returns A ref object to be attached to the element you want to observe.
+ *
+ * @example
+ * ```jsx
+ * const ref = useResizeObserver((size) => {
+ *   console.log("Element resized:", size);
+ * });
+ * <div ref={ref}>Resize me!</div>
+ * ```
+ */
 var useResizeObserver = function useResizeObserver(onResize) {
   var ref = react.useRef(null);
   var _useTransition = react.useTransition(),
@@ -22,7 +41,7 @@ var useResizeObserver = function useResizeObserver(onResize) {
         });
       }
     });
-  }, [onResize]);
+  }, [onResize], 0);
   react.useEffect(function () {
     if (ref.current != null) {
       var ob = new ResizeObserver(callbackResize);

package/dist/cjs/hooks/useStepper.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+require('@babel/runtime/helpers/defineProperty');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('classnames');
+var jsxRuntime = require('react/jsx-runtime');
+require('@react-fabric/utilities');
+require('./useEffectDebugger.js');
+require('boring-avatars');
+var Icon = require('../components/icon/Icon.js');
+require('@floating-ui/react');
+require('../hotkeys/HotKeyWrapper.js');
+require('react-i18next');
+require('@babel/runtime/helpers/toConsumableArray');
+require('@babel/runtime/helpers/classCallCheck');
+require('@babel/runtime/helpers/createClass');
+require('@babel/runtime/helpers/possibleConstructorReturn');
+require('@babel/runtime/helpers/getPrototypeOf');
+require('@babel/runtime/helpers/inherits');
+require('i18next');
+require('@babel/runtime/helpers/asyncToGenerator');
+require('@babel/runtime/regenerator');
+require('react-dom');
+require('../components/media/Media.js');
+require('@babel/runtime/helpers/toArray');
+
+var useStepper = function useStepper(_ref) {
+  var steps = _ref.steps,
+    _ref$activeStep = _ref.activeStep,
+    _initialActiveStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep;
+  var _useState = react.useState(_initialActiveStep),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeStep = _useState2[0],
+    setActiveStep = _useState2[1];
+  var maxSteps = react.useMemo(function () {
+    return steps.length - 1;
+  }, [steps]);
+  var stepper = react.useMemo(function () {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "fabric-stepper bg-base flex-1 flex justify-center py-1 px-2 overflow-x-auto",
+      children: steps.map(function (child, index) {
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "fabric-stepper--pill",
+          "data-state": index === activeStep ? "active" : index < activeStep ? "completed" : undefined,
+          children: [child.icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+            icon: child.icon
+          }), child.label && /*#__PURE__*/jsxRuntime.jsx("label", {
+            children: child.label
+          })]
+        }, index);
+      })
+    });
+  }, [steps]);
+  return {
+    stepper: stepper,
+    activeStep: activeStep,
+    firstStep: activeStep === 0,
+    lastStep: activeStep === maxSteps,
+    next: function next() {
+      return setActiveStep(function (s) {
+        return Math.min(s + 1, maxSteps);
+      });
+    },
+    prev: function prev() {
+      return setActiveStep(function (s) {
+        return Math.max(s - 1, 0);
+      });
+    }
+  };
+};
+
+exports.useStepper = useStepper;

package/dist/cjs/hooks/useStorage.js

@@ -5,6 +5,24 @@ var react = require('react');
 var useClientService = require('./useClientService.js');
 var useEffectDebugger = require('./useEffectDebugger.js');
 
+/**
+ * Custom hook to manage local storage state.
+ * This hook allows you to store and retrieve values from the browser's local storage,
+ * and provides a way to update the stored value while keeping the state in sync with local storage.
+ * It initializes the state with the value from local storage if it exists, or uses a default value if it does not.
+ * The hook returns a tuple containing the current value and a function to update the value.
+ * This is useful for persisting user preferences or application state across page reloads.
+ *
+ * @param key - The key under which the value is stored in local storage.
+ * @param defaultValue - The default value to use if the key does not exist in local storage.
+ * @returns A tuple containing the current value and a function to update the value.
+ *
+ * @example
+ * ```jsx
+ * const [settings, setSettings] = useLocalStorage("userSettings", { theme: "light" });
+ * // This will initialize the settings state from local storage or use the default value.
+ * ```
+ */
 var useLocalStorage = function useLocalStorage(key, defaultValue) {
   var _JSON$parse, _service$getItem;
   var service = useClientService.useClientService(localStorage);
@@ -22,6 +40,27 @@ var useLocalStorage = function useLocalStorage(key, defaultValue) {
   };
   return [value, changeValue];
 };
+
+/**
+ * Custom hook to manage session storage state.
+ * This hook allows you to store and retrieve values from the browser's session storage,
+ * and provides a way to update the stored value while keeping the state in sync with session storage.
+ * It initializes the state with the value from session storage if it exists, or uses a default value if it does not.
+ * The hook returns a tuple containing the current value and a function to update the value.
+ * This is useful for persisting user preferences or application state during a single session,
+ * such as form data or temporary settings that should not persist across page reloads.
+ * This hook is similar to `useLocalStorage`, but it uses session storage instead of local storage.
+ *
+ * @param key - The key under which the value is stored in session storage.
+ * @param defaultValue - The default value to use if the key does not exist in session storage.
+ * @returns A tuple containing the current value and a function to update the value.
+ *
+ * @example
+ * ```jsx
+ * const [user, setUser] = useSessionStorage("user", { name: "", age: 0 });
+ * // This will initialize the user state from session storage or use the default value.
+ * ```
+ */
 var useSessionStorage = function useSessionStorage(key, defaultValue) {
   var _JSON$parse3, _service$getItem3;
   var service = useClientService.useClientService(sessionStorage);

package/dist/cjs/hotkeys/HotKeyLabel.js

@@ -44,7 +44,7 @@ var HotKeyLabel = function HotKeyLabel(_ref) {
     }, "label")];
   }, [keyCombo], "HotKey label");
   return /*#__PURE__*/jsxRuntime.jsx("kbd", {
-    className: "hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/10 text-base/50 whitespace-nowrap rounded px-2 mx-1",
+    className: "hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/20 text-tint-900/65 whitespace-nowrap rounded px-2 mx-1",
     children: label
   });
 };

package/dist/cjs/hotkeys/HotKeyWrapper.js

@@ -46,7 +46,9 @@ var HotKeyWrapper = /*#__PURE__*/react.memo(function (_ref) {
         ctrl = _ref4.ctrl,
         meta = _ref4.meta,
         shift = _ref4.shift;
-      return (key.toLowerCase() === keyCode.toLowerCase() || key.toLowerCase() === code.toLowerCase()) && alt === altKey && ctrl === ctrlKey && meta === metaKey && shift === shiftKey;
+      return (key.toLowerCase() === keyCode.toLowerCase() || key.toLowerCase() === code.toLowerCase() ||
+      // work around for macos alt+key issue
+      "key".concat(key.toLowerCase()) === code.toLowerCase()) && alt === altKey && ctrl === ctrlKey && meta === metaKey && shift === shiftKey;
     });
     if (find !== null && find !== void 0 && find.handler) {
       find.handler();

package/dist/cjs/index.js

@@ -13,6 +13,7 @@ var ToggleButtonGroup = require('./components/button/ToggleButtonGroup.js');
 var Callout = require('./components/callout/Callout.js');
 var Card = require('./components/card/Card.js');
 var CardCover = require('./components/card/CardCover.js');
+var FlipContent = require('./components/card/FlipContent.js');
 var Chip = require('./components/chip/Chip.js');
 var Collapsable = require('./components/collapsable/Collapsable.js');
 var Divider = require('./components/divider/Divider.js');
@@ -49,16 +50,16 @@ require('@floating-ui/react');
 require('classnames');
 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');
 var Modal = require('./overlays/modal/Modal.js');
 var Tooltip = require('./overlays/tooltip/Tooltip.js');
 var Abbr = require('./typography/Abbr.js');
+var Anchor = require('./typography/Anchor.js');
 var Copy = require('./typography/Copy.js');
-var Link = require('./typography/Link.js');
 var Mark = require('./typography/Mark.js');
 var Text = require('./typography/Text.js');
 var useClientService = require('./hooks/useClientService.js');
@@ -70,18 +71,20 @@ var useNavigator = require('./hooks/useNavigator.js');
 var useOverlayService = require('./hooks/useOverlayService.js');
 var useResize = require('./hooks/useResize.js');
 var useResizeObserver = require('./hooks/useResizeObserver.js');
+var useStepper = require('./hooks/useStepper.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');
 
 
 
 exports.ActionLabel = ActionLabel.ActionLabel;
-exports.AnimationBars = Animations.AnimationBars;
 exports.AnimationIndicator = Animations.AnimationIndicator;
-exports.AnimationSpinner = Animations.AnimationSpinner;
-exports.Loading = Animations.Loading;
+exports.LoadingBars = Animations.LoadingBars;
+exports.LoadingLine = Animations.LoadingLine;
+exports.LoadingSpinner = Animations.LoadingSpinner;
 exports.Skeleton = Animations.Skeleton;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarGroup = AvatarGroup.AvatarGroup;
@@ -95,6 +98,7 @@ exports.ToggleButtonGroup = ToggleButtonGroup.ToggleButtonGroup;
 exports.Callout = Callout.Callout;
 exports.Card = Card.Card;
 exports.CardCover = CardCover.CardCover;
+exports.FlipContent = FlipContent.FlipContent;
 exports.Chip = Chip.Chip;
 exports.Collapsable = Collapsable.Collapsable;
 exports.Divider = Divider.Divider;
@@ -103,6 +107,7 @@ exports.DropdownDismiss = Dropdown.DropdownDismiss;
 exports.DropdownTool = DropdownTool.DropdownTool;
 exports.EmptyContent = EmptyContent.EmptyContent;
 exports.Icon = Icon.Icon;
+exports.getIconProps = Icon.getIconProps;
 exports.Image = Media.Image;
 exports.Video = Media.Video;
 exports.ContextMenu = ContextMenu.ContextMenu;
@@ -130,17 +135,14 @@ exports.Section = Section.Section;
 exports.ThemeProvider = ThemeProvider.ThemeProvider;
 exports.Viewport = Viewport.Viewport;
 exports.addTranslationBundle = index.addTranslationBundle;
-Object.defineProperty(exports, "CoreIcons", {
-  enumerable: true,
-  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;
 exports.Abbr = Abbr.Abbr;
+exports.Anchor = Anchor.Anchor;
 exports.Copy = Copy.Copy;
-exports.Link = Link.Link;
 exports.Mark = Mark.Mark;
 exports.Text = Text.Text;
 exports.useClientService = useClientService.useClientService;
@@ -154,10 +156,12 @@ exports.useNavigator = useNavigator.useNavigator;
 exports.useOverlayService = useOverlayService.useOverlayService;
 exports.useResize = useResize.useResize;
 exports.useResizeObserver = useResizeObserver.useResizeObserver;
+exports.useStepper = useStepper.useStepper;
 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

@@ -9,12 +9,10 @@ var reactI18next = require('react-i18next');
 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 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; }
@@ -24,6 +22,7 @@ var Alert = function Alert(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "primary" : _ref$color,
     icon = _ref.icon,
+    iconSrc = _ref.iconSrc,
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose,
@@ -58,33 +57,34 @@ var Alert = function Alert(_ref) {
   var iconType = react.useMemo(function () {
     if (icon) return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon,
+      iconSrc: iconSrc,
       size: "md",
       rtlFlip: rtlFlip,
-      color: color + "-600"
+      color: "".concat(color, "-600")
     });
     switch (color) {
       case "danger":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "cross",
-          className: getColor.getColorClass(color + "-600")
+          color: "danger-600"
         });
       case "success":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "check",
-          className: getColor.getColorClass(color + "-600")
+          color: "success-600"
         });
       case "warning":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "exclaim",
-          className: getColor.getColorClass(color + "-600")
+          color: "warning-600"
         });
       default:
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: type === "confirm" ? "question" : "info",
-          className: getColor.getColorClass(color + "-600")
+          color: "".concat(color, "-600")
         });
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
   var handleClose = react.useCallback(function (ret) {
     refs.floating.current && (refs.floating.current.dataset.show = "false");
     setTimeout(function () {
@@ -102,29 +102,36 @@ var Alert = function Alert(_ref) {
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/50 backdrop-blur-sm grid place-items-center",
       children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsxs("dialog", _objectSpread(_objectSpread({
           role: "alertdialog",
-          className: classNames(Alert_module.alert, getColor.getBorderClass(color + "-300"), "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none", "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg"),
+          className: classNames("fabric-alert", "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none", "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg"),
+          style: {
+            borderColor: getColor.getColor("".concat(color, "-300"))
+          },
           ref: refs.setFloating
         }, getFloatingProps()), {}, {
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             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 border rounded w-full px-2 py-1"),
+            style: {
+              borderColor: getColor.getColor("".concat(color, "-200")),
+              "--tw-ring-color": getColor.getColor("".concat(color, "-500"))
+            },
             ref: function ref(e) {
-              return e != null && setTimeout(function () {
+              e != null && setTimeout(function () {
                 return e.focus();
               }, 100);
             },
@@ -158,7 +165,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")
             })]
@@ -172,7 +179,7 @@ var Alert = function Alert(_ref) {
               onClick: function onClick() {
                 return handleClose(false);
               },
-              icon: icons.CoreIcons.close,
+              icon: "icon-[mdi--close]",
               "aria-label": "close"
             })
           })]