@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/components/modal/modal.js

@@ -1,399 +1,3 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { k as $a11501f3d1d39e6c$export$ea8f71083e90600f, l as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, m as $337b884510726a0d$export$14c98a7594375490, n as $5e3802645cc19319$export$1c3ebcada18427bf, o as $de32f1b87079253c$export$d2f961adcb0afbe, p as $86ea4cb521eb2e37$export$2317d149ed6f78c4, q as $337b884510726a0d$export$c6fdb837b070b4ff, h as $de32f1b87079253c$export$2e1e1122cf0cba88, g as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-DTIxSDhz.js";
-import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-CY-_gt-U.js";
-import { m as $b5e257d569688ac6$export$535bd6ca7f90a273, b as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, k as $df56164dff5785e2$export$4338b53315abf666, l as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-Cr3pLd9c.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { d as $21f1aa98acb08317$export$c57958e35f31ed73, e as $cc38e7bd3fc7b213$export$2bb74740c4e19def } from "../../SelectionManager-B02LcxLr.js";
-import { d as $c87311424ea30a05$export$fedb369cb70207f1, b as $d4ee10de306f2510$export$e58f029f0fbfdb29, j as $d4ee10de306f2510$export$cd4e5573fbe2b576 } from "../../useHover-DkmPQdGE.js";
-import $dbSRa$react__default, { useState, useEffect, forwardRef, useContext, useRef, createContext, useMemo } from "react";
-import { $ as $d3f049242431219c$export$45fda7c47f93fd48, a as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../animation-Dfl8uEb3.js";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../OverlayArrow-Fuxj-1QM.js";
-import { Button } from "../button/button.js";
-import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-DAh4myol.js";
-import { HStack } from "../layout/hstack.js";
-let $5df64b3807dc15ee$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
-function $5df64b3807dc15ee$export$d699905dd57c73ca() {
-  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
-  let [size, setSize] = useState(() => isSSR ? {
-    width: 0,
-    height: 0
-  } : $5df64b3807dc15ee$var$getViewportSize());
-  useEffect(() => {
-    let updateSize = (newSize) => {
-      setSize((size2) => {
-        if (newSize.width === size2.width && newSize.height === size2.height) return size2;
-        return newSize;
-      });
-    };
-    let onResize = () => {
-      if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
-      updateSize($5df64b3807dc15ee$var$getViewportSize());
-    };
-    let frame;
-    let onBlur = (e) => {
-      if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
-      if ($21f1aa98acb08317$export$c57958e35f31ed73($d4ee10de306f2510$export$e58f029f0fbfdb29(e)))
-        frame = requestAnimationFrame(() => {
-          let activeElement = $d4ee10de306f2510$export$cd4e5573fbe2b576();
-          if (!activeElement || !$21f1aa98acb08317$export$c57958e35f31ed73(activeElement)) updateSize({
-            width: document.documentElement.clientWidth,
-            height: document.documentElement.clientHeight
-          });
-        });
-    };
-    updateSize($5df64b3807dc15ee$var$getViewportSize());
-    if ($c87311424ea30a05$export$fedb369cb70207f1()) window.addEventListener("blur", onBlur, true);
-    if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener("resize", onResize);
-    else $5df64b3807dc15ee$var$visualViewport.addEventListener("resize", onResize);
-    return () => {
-      cancelAnimationFrame(frame);
-      if ($c87311424ea30a05$export$fedb369cb70207f1()) window.removeEventListener("blur", onBlur, true);
-      if (!$5df64b3807dc15ee$var$visualViewport) window.removeEventListener("resize", onResize);
-      else $5df64b3807dc15ee$var$visualViewport.removeEventListener("resize", onResize);
-    };
-  }, []);
-  return size;
-}
-function $5df64b3807dc15ee$var$getViewportSize() {
-  return {
-    // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
-    width: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.width * $5df64b3807dc15ee$var$visualViewport.scale : document.documentElement.clientWidth,
-    height: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.height * $5df64b3807dc15ee$var$visualViewport.scale : document.documentElement.clientHeight
-  };
-}
-function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
-  let { overlayProps, underlayProps } = $a11501f3d1d39e6c$export$ea8f71083e90600f({
-    ...props,
-    isOpen: state.isOpen,
-    onClose: state.close
-  }, ref);
-  $49c51c25361d4cd2$export$ee0f7cc6afcd1c18({
-    isDisabled: !state.isOpen
-  });
-  $337b884510726a0d$export$14c98a7594375490();
-  useEffect(() => {
-    if (state.isOpen && ref.current) return $5e3802645cc19319$export$1c3ebcada18427bf([
-      ref.current
-    ], {
-      shouldUseInert: true
-    });
-  }, [
-    state.isOpen,
-    ref
-  ]);
-  return {
-    modalProps: $3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps),
-    underlayProps
-  };
-}
-const $f3f84453ead64de5$export$ab57792b9b6974a6 = /* @__PURE__ */ createContext(null);
-const $f3f84453ead64de5$var$InternalModalContext = /* @__PURE__ */ createContext(null);
-const $f3f84453ead64de5$export$2b77a92f1a5ad772 = /* @__PURE__ */ forwardRef(function Modal(props, ref) {
-  let ctx = useContext($f3f84453ead64de5$var$InternalModalContext);
-  if (ctx) {
-    if (process.env.NODE_ENV !== "production" && (props.onOpenChange || props.defaultOpen !== void 0 || props.isOpen !== void 0)) {
-      const invalidSet = /* @__PURE__ */ new Set([
-        "isDismissable",
-        "isKeyboardDismissDisabled",
-        "isOpen",
-        "defaultOpen",
-        "onOpenChange",
-        "isEntering",
-        "isExiting",
-        "UNSTABLE_portalContainer",
-        "shouldCloseOnInteractOutside"
-      ]);
-      const invalidProps = Object.keys(props).filter((key) => invalidSet.has(key));
-      console.warn(`This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(", ")}] should be placed on the ModalOverlay instead.`);
-    }
-    return /* @__PURE__ */ $dbSRa$react__default.createElement($f3f84453ead64de5$var$ModalContent, {
-      ...props,
-      modalRef: ref
-    }, props.children);
-  }
-  let { isDismissable, isKeyboardDismissDisabled, isOpen, defaultOpen, onOpenChange, children, isEntering, isExiting, UNSTABLE_portalContainer, shouldCloseOnInteractOutside, ...otherProps } = props;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($f3f84453ead64de5$export$8948f78d83984c69, {
-    isDismissable,
-    isKeyboardDismissDisabled,
-    isOpen,
-    defaultOpen,
-    onOpenChange,
-    isEntering,
-    isExiting,
-    UNSTABLE_portalContainer,
-    shouldCloseOnInteractOutside
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($f3f84453ead64de5$var$ModalContent, {
-    ...otherProps,
-    modalRef: ref
-  }, children));
-});
-function $f3f84453ead64de5$var$ModalOverlayWithForwardRef(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $f3f84453ead64de5$export$ab57792b9b6974a6);
-  let contextState = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
-  let localState = $fc909762b330b746$export$61c6a8c84e605fb6(props);
-  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-  if (state === contextState) {
-    if (process.env.NODE_ENV !== "production" && (props.onOpenChange || props.defaultOpen !== void 0 || props.isOpen !== void 0)) console.warn("This modals state is controlled by a trigger, place onOpenChange on the trigger instead.");
-  }
-  let objectRef = $df56164dff5785e2$export$4338b53315abf666(ref);
-  let modalRef = useRef(null);
-  let isOverlayExiting = $d3f049242431219c$export$45fda7c47f93fd48(objectRef, state.isOpen);
-  let isModalExiting = $d3f049242431219c$export$45fda7c47f93fd48(modalRef, state.isOpen);
-  let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;
-  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
-  if (!state.isOpen && !isExiting || isSSR) return null;
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($f3f84453ead64de5$var$ModalOverlayInner, {
-    ...props,
-    state,
-    isExiting,
-    overlayRef: objectRef,
-    modalRef
-  });
-}
-const $f3f84453ead64de5$export$8948f78d83984c69 = /* @__PURE__ */ forwardRef($f3f84453ead64de5$var$ModalOverlayWithForwardRef);
-function $f3f84453ead64de5$var$ModalOverlayInner({ UNSTABLE_portalContainer, ...props }) {
-  let modalRef = props.modalRef;
-  let { state } = props;
-  let { modalProps, underlayProps } = $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, modalRef);
-  let entering = $d3f049242431219c$export$6d3443f2c48bfc20(props.overlayRef) || props.isEntering || false;
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultClassName: "react-aria-ModalOverlay",
-    values: {
-      isEntering: entering,
-      isExiting: props.isExiting,
-      state
-    }
-  });
-  let viewport = $5df64b3807dc15ee$export$d699905dd57c73ca();
-  let pageHeight = void 0;
-  if (typeof document !== "undefined") {
-    let scrollingElement = $cc38e7bd3fc7b213$export$2bb74740c4e19def(document.body) ? document.body : document.scrollingElement || document.documentElement;
-    let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
-    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
-  }
-  let style = {
-    ...renderProps.style,
-    "--visual-viewport-height": viewport.height + "px",
-    "--page-height": pageHeight !== void 0 ? pageHeight + "px" : void 0
-  };
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, {
-    isExiting: props.isExiting,
-    portalContainer: UNSTABLE_portalContainer
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-      global: true
-    }), underlayProps),
-    ...renderProps,
-    style,
-    ref: props.overlayRef,
-    "data-entering": entering || void 0,
-    "data-exiting": props.isExiting || void 0
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $f3f84453ead64de5$var$InternalModalContext,
-        {
-          modalProps,
-          modalRef,
-          isExiting: props.isExiting,
-          isDismissable: props.isDismissable
-        }
-      ],
-      [
-        $de32f1b87079253c$export$d2f961adcb0afbe,
-        state
-      ]
-    ]
-  }, renderProps.children)));
-}
-function $f3f84453ead64de5$var$ModalContent(props) {
-  let { modalProps, modalRef, isExiting, isDismissable } = useContext($f3f84453ead64de5$var$InternalModalContext);
-  let state = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
-  let mergedRefs = useMemo(() => $5dc95899b306f630$export$c9058316764c140e(props.modalRef, modalRef), [
-    props.modalRef,
-    modalRef
-  ]);
-  let ref = $df56164dff5785e2$export$4338b53315abf666(mergedRefs);
-  let entering = $d3f049242431219c$export$6d3443f2c48bfc20(ref);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultClassName: "react-aria-Modal",
-    values: {
-      isEntering: entering,
-      isExiting,
-      state
-    }
-  });
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-      global: true
-    }), modalProps),
-    ...renderProps,
-    ref,
-    "data-entering": entering || void 0,
-    "data-exiting": isExiting || void 0
-  }, isDismissable && /* @__PURE__ */ $dbSRa$react__default.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
-    onDismiss: state.close
-  }), renderProps.children);
-}
-/**
- * @typedef {import('../button/button').ButtonProps} ButtonProps
- *
- * @preserve
- * */
-/**
- * Modal dialog.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {boolean} [props.open] - **Controlled mode ** - whether the modal is open.
- * @param {boolean} [props.defaultOpen] - **Uncontrolled mode ** - whether the modal is initially open.
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the modal footer, typically buttons.
- * @param {JSX.Element|JSX.Element[]} [props.headerActions] - Actions to display in the modal header, next to the close button (if enabled).
- * @param {string|JSX.Element} [props.triggerLabel] - Label for the trigger button.
- * @param {JSX.Element} [props.triggerIcon] - Trigger button icon.
- * @param {ButtonProps} [props.triggerProps] - Props to pass to the trigger button.
- * @param {ReactNode} [props.customTrigger] - If provided, replaces the default trigger button. The passed component should be something button-related that can open the modal.
- * @param {string|JSX.Element} [props.title] - Title of the modal.
- * @param {boolean} [props.noCloseButton] - If `true`, the close button will not be displayed.
- * @param {boolean} [props.noClickToDismiss] - If `true`, the modal will not close when clicking outside of it.
- * @param {boolean} [props.noKeyboardDismiss] - If `true`, the modal will not close when pressing the `Esc` key.
- * @param {boolean} [props.noBackdrop] - If `true`, the modal will not have a visible backdrop. Functionally, it'll still be there. For an experience without a backdrop, consider using the `Popover` component instead.
- * @param {string} [props.className] - Classes to pass to the modal container.
- * @param {string} [props.overlayClassName] - Classes to pass to the modal backdrop.
- * @param {string} [props.actionsClassName] - Classes to pass to the modal footer (actions) container.
- * @param {string} [props.headerClassName] - Classes to pass to the modal header container.
- * @param {string} [props.contentContainerClassName] - Classes to pass to the modal content container.
- * @param {Function} [props.shouldCloseOnInteractOutside=() => true] - Allows ignoring close events for certain elements. `(element: HTMLElement) => boolean`.
- * @param {Function} [props.onOpenChange] - Function called when the modal's open state changes. `(isOpen: boolean) => void`
- * @param {ModalWidth} [props.width='default'] - Determines the modal width.
- *
- * @typedef {'default' | 'wide'} ModalWidth
- *
- * @returns {JSX.Element} The Modal component.
- *
- * @example
- * <Modal>
- *  <p>Modal content</p>
- * </Modal>
- *
- * @preserve
- */
-const Modal2 = (props) => {
-  const { triggerLabel, triggerIcon, triggerProps, customTrigger, open } = props;
-  if (typeof open !== "undefined") {
-    return /* @__PURE__ */ jsx(ModalInternal, { ...props });
-  }
-  return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
-    !customTrigger && /* @__PURE__ */ jsx(
-      Button,
-      {
-        icon: triggerIcon,
-        ...triggerProps,
-        children: triggerLabel ?? (!triggerIcon && __("Open", "eightshift-frontend-libs"))
-      }
-    ),
-    customTrigger,
-    /* @__PURE__ */ jsx(ModalInternal, { ...props })
-  ] });
-};
-const ModalInternal = (props) => {
-  const {
-    children,
-    shouldCloseOnInteractOutside,
-    open,
-    defaultOpen,
-    onOpenChange,
-    title,
-    actions,
-    headerActions,
-    noCloseButton,
-    noClickToDismiss,
-    noKeyboardDismiss,
-    noBackdrop,
-    "aria-label": ariaLabel,
-    className,
-    headerClassName,
-    actionsClassName,
-    overlayClassName,
-    contentContainerClassName,
-    width = "default",
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx(
-    $f3f84453ead64de5$export$8948f78d83984c69,
-    {
-      isDismissable: !noClickToDismiss,
-      defaultOpen,
-      isOpen: open,
-      shouldCloseOnInteractOutside,
-      onOpenChange,
-      isKeyboardDismissDisabled: noKeyboardDismiss,
-      className: ({ isEntering, isExiting }) => clsx(
-        "es:font-sans",
-        "es:fixed es:inset-0 es:z-9999 es:flex es:min-h-full es:items-center es:justify-center es:overflow-hidden es:p-4",
-        !noBackdrop && "es:bg-accent-950/20 es:backdrop-blur-xs",
-        isEntering && "es:motion-opacity-in es:motion-duration-150",
-        isExiting && "es:motion-opacity-out es:motion-duration-150",
-        overlayClassName
-      ),
-      ...rest,
-      children: /* @__PURE__ */ jsx(
-        $f3f84453ead64de5$export$2b77a92f1a5ad772,
-        {
-          className: ({ isEntering, isExiting }) => clsx(
-            "es:w-full es:overflow-y-hidden es:rounded-3xl es:inset-ring es:inset-ring-surface-400/30 es:bg-white es:bg-linear-to-b es:from-accent-300/3 es:to-accent-300/1 es:text-left es:align-middle es:shadow-xl es:text-surface-900",
-            width === "default" && "es:max-w-lg",
-            width === "wide" && "es:max-w-[80vw]",
-            isEntering && "es:motion-scale-in-95 es:motion-fade-in es:motion-translate-y-in-[2rem] es:motion-duration-300 es:motion-ease-spring-smooth/scale",
-            isExiting && "es:motion-scale-out-95 es:motion-fade-out es:motion-translate-y-out-[2rem] es:motion-duration-250 es:motion-ease-spring-smooth/scale",
-            className
-          ),
-          children: /* @__PURE__ */ jsx(
-            $de32f1b87079253c$export$3ddf2d174ce01153,
-            {
-              className: clsx("es:relative es:text-sm es:outline-hidden", (!title || headerActions) && "es:pt-8"),
-              "aria-label": ariaLabel,
-              children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs(HStack, { className: clsx(title && "es:p-6 es:pb-3 es:justify-between", headerClassName), children: [
-                  title && /* @__PURE__ */ jsx(
-                    $5cb03073d3f54797$export$a8a3e93435678ff9,
-                    {
-                      className: 'es:text-balance es:text-3xl! es:my-0! es:text-accent-800 es:font-variation-["wdth"_40,"wght"_425,"slnt"_-3,"ROND"_100]',
-                      slot: "title",
-                      children: title
-                    }
-                  ),
-                  (!noCloseButton || headerActions) && /* @__PURE__ */ jsxs(HStack, { className: !title && "es:absolute es:top-3 es:right-3 es:z-20", children: [
-                    headerActions,
-                    !noCloseButton && /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        className: !title && "es:bg-surface-50/60 es:backdrop-blur-lg",
-                        onPress: close,
-                        type: "ghost",
-                        size: "small",
-                        icon: icons.clear,
-                        "aria-label": __("Close", "eightshift-frontend-libs"),
-                        tooltip: true
-                      }
-                    )
-                  ] })
-                ] }),
-                children && /* @__PURE__ */ jsx("div", { className: clsx("es:px-6 es:space-y-2.5 es:overflow-y-auto es:max-h-[70vh]", !actions && "es:mb-6", contentContainerClassName), children }),
-                actions && /* @__PURE__ */ jsx(HStack, { className: clsx("es:justify-end es:px-6 es:py-4", actionsClassName), children: actions })
-              ] })
-            }
-          )
-        }
-      )
-    }
-  );
-};
-export {
-  Modal2 as Modal
-};
+import { t as Modal } from "../../modal-DbVLYMkH.js";
+import "../../build-module-sxK3nxOK.js";
+export { Modal };

package/dist/components/notice/notice.js

@@ -1,141 +1,101 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { icons } from "../../icons/icons.js";
+import { t as clsx } from "../../clsx-BUU5J41u.js";
+import { checkSquare } from "../../icons/ui-icons/check-square.js";
+import { componentGeneric } from "../../icons/ui-icons/component-generic.js";
+import { errorCircle } from "../../icons/ui-icons/error-circle.js";
+import { info } from "../../icons/ui-icons/info.js";
+import { warning } from "../../icons/ui-icons/warning.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/notice/notice.jsx
 /**
- * A simple notice component.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display within the notice.
- * @param {string} [props.label] - The label of the notice.
- * @param {string} [props.subtitle] - The subtitle of the notice.
- * @param {string} [props.className] - Classes to pass to the notice.
- * @param {NoticeType} [props.type='default'] - The type of the notice.
- * @param {boolean} [props.alignIconToTitle=false] - If `true`, the icon will be aligned to the first row of title, instead of vertically centered.
- * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Notice component.
- *
- * @typedef {'info' | 'success' | 'warning' | 'error' | 'placeholder' | 'default'} NoticeType
- *
- * @example
- * <Notice label='This is a notice' />
- *
- * @preserve
- */
-const Notice = (props) => {
-  const { icon, label, subtitle, className, type = "default", alignIconToTitle = false, flat, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  const styles = {
-    info: {
-      icon: icons.info,
-      className: "es:inset-ring-blue-600/15 es:shadow-blue-800/5 es:from-blue-400/2 es:to-blue-600/5 es:inset-shadow-blue-500/10",
-      iconColorClassName: "es:text-blue-600",
-      textColorClassName: "es:text-blue-600",
-      subtitleColorClassName: "es:text-blue-950/55",
-      selectionClassName: "es:selection:bg-blue-100 es:selection:text-blue-700"
-    },
-    success: {
-      icon: icons.checkSquare,
-      className: "es:inset-ring-green-800/15 es:shadow-green-800/5 es:from-green-400/2 es:to-green-600/5 es:inset-shadow-green-500/10",
-      iconColorClassName: "es:text-green-600",
-      textColorClassName: "es:text-green-600",
-      subtitleColorClassName: "es:text-green-950/55",
-      selectionClassName: "es:selection:bg-green-100 es:selection:text-green-700"
-    },
-    warning: {
-      icon: icons.warning,
-      className: "es:inset-ring-orange-800/15 es:shadow-orange-800/5 es:from-orange-400/2 es:to-orange-600/5 es:inset-shadow-orange-500/10",
-      iconColorClassName: "es:text-orange-600",
-      textColorClassName: "es:text-orange-600",
-      subtitleColorClassName: "es:text-orange-950/55",
-      selectionClassName: "es:selection:bg-orange-100 es:selection:text-orange-700"
-    },
-    error: {
-      icon: icons.errorCircle,
-      className: "es:inset-ring-red-800/15 es:shadow-red-800/5 es:from-red-400/2 es:to-red-600/5 es:inset-shadow-red-500/10",
-      iconColorClassName: "es:text-red-600",
-      textColorClassName: "es:text-red-700",
-      subtitleColorClassName: "es:text-red-950/55",
-      selectionClassName: "es:selection:bg-red-100 es:selection:text-red-700"
-    },
-    placeholder: {
-      icon: icons.componentGeneric,
-      className: "es:inset-ring-indigo-700/15 es:shadow-indigo-800/5 es:from-indigo-400/2 es:to-indigo-600/5 es:inset-shadow-indigo-500/10",
-      iconColorClassName: "es:text-indigo-600",
-      textColorClassName: "es:text-indigo-600",
-      subtitleColorClassName: "es:text-indigo-900/55",
-      selectionClassName: "es:selection:bg-indigo-100 es:selection:text-indigo-700"
-    },
-    default: {
-      className: "es:inset-ring-surface-700/10 es:shadow-surface-800/5 es:from-surface-400/2 es:to-surface-600/5 es:inset-shadow-surface-500/10",
-      iconColorClassName: "es:text-surface-500",
-      textColorClassName: "es:text-surface-500",
-      subtitleColorClassName: "es:text-surface-800/50",
-      selectionClassName: "es:selection:bg-accent-100 es:selection:text-accent-700"
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto]",
-        "es:rounded-xl",
-        "es:bg-white",
-        "es:inset-ring",
-        "es:bg-linear-to-b es:from-35%",
-        "es:inset-shadow-sm",
-        flat ? "es:shadow-2xs" : "es:shadow-sm",
-        styles[type].className,
-        "es:icon:shrink-0",
-        "es:selection:p-2",
-        styles[type].selectionClassName,
-        icon || styles[type].icon ? "es:gap-x-2 es:py-3 es:pl-2.5 es:pr-3" : "es:py-3 es:px-3.5",
-        className
-      ),
-      children: [
-        (icon || styles[type].icon) && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-6",
-              alignIconToTitle ? "es:self-baseline" : "es:self-center-safe",
-              styles[type].iconColorClassName
-            ),
-            children: icon ?? styles[type].icon
-          }
-        ),
-        label && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              "es:col-span-2 es:col-start-2 es:text-balance es:text-14",
-              subtitle ? "es:self-end" : "es:row-span-2 es:self-center-safe",
-              'es:font-variation-["wdth"_78,"wght"_325,"ROND"_100]',
-              styles[type].textColorClassName
-            ),
-            children: label
-          }
-        ),
-        subtitle && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tighter es:pt-0.75",
-              'es:font-variation-["wdth"_90,"wght"_350,"slnt"_-1]',
-              styles[type].subtitleColorClassName,
-              label ? "es:self-start" : "es:row-span-2 es:self-center-safe"
-            ),
-            children: subtitle
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  Notice
+* A simple notice component.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {JSX.Element} [props.icon] - Icon to display within the notice.
+* @param {string} [props.label] - The label of the notice.
+* @param {string} [props.subtitle] - The subtitle of the notice.
+* @param {string} [props.className] - Classes to pass to the notice.
+* @param {NoticeType} [props.type='default'] - The type of the notice.
+* @param {boolean} [props.alignIconToTitle=false] - If `true`, the icon will be aligned to the first row of title, instead of vertically centered.
+* @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+*
+* @returns {JSX.Element} The Notice component.
+*
+* @typedef {'info' | 'success' | 'warning' | 'error' | 'placeholder' | 'default'} NoticeType
+*
+* @example
+* <Notice label='This is a notice' />
+*/
+var Notice = (props) => {
+	const { icon, label, subtitle, className, type = "default", alignIconToTitle = false, flat, hidden } = props;
+	if (hidden) return null;
+	const styles = {
+		info: {
+			icon: info,
+			className: "es:inset-ring-blue-600/15 es:shadow-blue-800/5 es:from-blue-400/2 es:to-blue-600/5 es:inset-shadow-blue-500/10",
+			iconColorClassName: "es:text-blue-600",
+			textColorClassName: "es:text-blue-600",
+			subtitleColorClassName: "es:text-blue-950/55",
+			selectionClassName: "es:selection:bg-blue-100 es:selection:text-blue-700"
+		},
+		success: {
+			icon: checkSquare,
+			className: "es:inset-ring-green-800/15 es:shadow-green-800/5 es:from-green-400/2 es:to-green-600/5 es:inset-shadow-green-500/10",
+			iconColorClassName: "es:text-green-600",
+			textColorClassName: "es:text-green-600",
+			subtitleColorClassName: "es:text-green-950/55",
+			selectionClassName: "es:selection:bg-green-100 es:selection:text-green-700"
+		},
+		warning: {
+			icon: warning,
+			className: "es:inset-ring-orange-800/15 es:shadow-orange-800/5 es:from-orange-400/2 es:to-orange-600/5 es:inset-shadow-orange-500/10",
+			iconColorClassName: "es:text-orange-600",
+			textColorClassName: "es:text-orange-600",
+			subtitleColorClassName: "es:text-orange-950/55",
+			selectionClassName: "es:selection:bg-orange-100 es:selection:text-orange-700"
+		},
+		error: {
+			icon: errorCircle,
+			className: "es:inset-ring-red-800/15 es:shadow-red-800/5 es:from-red-400/2 es:to-red-600/5 es:inset-shadow-red-500/10",
+			iconColorClassName: "es:text-red-600",
+			textColorClassName: "es:text-red-700",
+			subtitleColorClassName: "es:text-red-950/55",
+			selectionClassName: "es:selection:bg-red-100 es:selection:text-red-700"
+		},
+		placeholder: {
+			icon: componentGeneric,
+			className: "es:inset-ring-indigo-700/15 es:shadow-indigo-800/5 es:from-indigo-400/2 es:to-indigo-600/5 es:inset-shadow-indigo-500/10",
+			iconColorClassName: "es:text-indigo-600",
+			textColorClassName: "es:text-indigo-600",
+			subtitleColorClassName: "es:text-indigo-900/55",
+			selectionClassName: "es:selection:bg-indigo-100 es:selection:text-indigo-700"
+		},
+		default: {
+			className: "es:inset-ring-surface-700/10 es:shadow-surface-800/5 es:from-surface-400/2 es:to-surface-600/5 es:inset-shadow-surface-500/10",
+			iconColorClassName: "es:text-surface-500",
+			textColorClassName: "es:text-surface-500",
+			subtitleColorClassName: "es:text-surface-800/50",
+			selectionClassName: "es:selection:bg-accent-100 es:selection:text-accent-700"
+		}
+	};
+	return jsxs("div", {
+		className: clsx("es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto]", "es:rounded-xl", "es:bg-white", "es:inset-ring", "es:bg-linear-to-b es:from-35%", "es:inset-shadow-sm", flat ? "es:shadow-2xs" : "es:shadow-sm", styles[type].className, "es:icon:shrink-0", "es:selection:p-2", styles[type].selectionClassName, icon || styles[type].icon ? "es:gap-x-2 es:py-3 es:pl-2.5 es:pr-3" : "es:py-3 es:px-3.5", className),
+		children: [
+			(icon || styles[type].icon) && jsx("div", {
+				className: clsx("es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-6", alignIconToTitle ? "es:self-baseline" : "es:self-center-safe", styles[type].iconColorClassName),
+				children: icon ?? styles[type].icon
+			}),
+			label && jsx("span", {
+				className: clsx("es:col-span-2 es:col-start-2 es:text-balance es:text-14", subtitle ? "es:self-end" : "es:row-span-2 es:self-center-safe", "es:font-variation-[\"wdth\"_78,\"wght\"_325,\"ROND\"_100]", styles[type].textColorClassName),
+				children: label
+			}),
+			subtitle && jsx("span", {
+				className: clsx("es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tighter es:pt-0.75", "es:font-variation-[\"wdth\"_90,\"wght\"_350,\"slnt\"_-1]", styles[type].subtitleColorClassName, label ? "es:self-start" : "es:row-span-2 es:self-center-safe"),
+				children: subtitle
+			})
+		]
+	});
 };
+//#endregion
+export { Notice };