@kolking/react-ui 1.8.20 → 1.9.1

package/dist/components/Icon/icons.d.ts

@@ -1,2 +1,2 @@
-declare const icons: readonly ["arrow-down-circle", "arrow-down-outline", "arrow-down", "arrow-left-circle", "arrow-left-outline", "arrow-left", "arrow-right-circle", "arrow-right-outline", "arrow-right", "arrow-up-circle", "arrow-up-outline", "arrow-up", "bell", "bubble-outline", "bubble", "bubbles-outline", "bubbles", "bug", "calendar-checkmark", "calendar-date", "calendar-plus", "calendar", "camera", "cart-outline", "cart", "cat", "checkmark-circle", "checkmark-outline", "checkmark", "chevron-left", "chevron-right", "clock-circle", "clock-outline", "close", "cloud-outline", "cloud", "collapse", "copy", "cross-circle", "cross-outline", "cross", "delete-outline", "delete", "denied", "disclosure", "dropdown", "envelope-outline", "envelope", "error-circle", "error-outline", "expand", "export", "eye-off", "eye", "eyeglasses", "frame", "gear", "heart-outline", "heart", "help-circle", "help-outline", "import", "info-circle", "info-outline", "key", "location-cross", "location", "lock-open", "lock", "map-outline", "map", "menu", "minus-circle", "minus-outline", "minus", "page-outline", "page", "paper-plane", "paperclip", "pencil-circle", "pencil-outline", "pencil", "person", "phone-circle", "phone-outline", "phone", "photos", "playback-next", "playback-pause", "playback-play", "playback-prev", "playback-stop", "plus-circle", "plus-outline", "plus", "printer", "profile-outline", "profile", "redo-circle", "redo-outline", "refresh", "reorder", "search", "shield-checkmark", "shield-lock", "star-circle", "star-outline", "star", "triangle-down", "triangle-left", "triangle-right", "triangle-up", "undo-circle", "undo-outline", "warning-outline", "warning"];
+declare const icons: readonly ["arrow-down-circle", "arrow-down-outline", "arrow-down", "arrow-left-circle", "arrow-left-outline", "arrow-left", "arrow-right-circle", "arrow-right-outline", "arrow-right", "arrow-up-circle", "arrow-up-outline", "arrow-up", "bell", "book-outline", "book", "bubble-outline", "bubble", "bubbles-outline", "bubbles", "bug", "calendar-checkmark", "calendar-date", "calendar-plus", "calendar", "camera", "cart-outline", "cart", "cat", "checkmark-circle", "checkmark-outline", "checkmark", "chevron-left", "chevron-right", "clock-circle", "clock-outline", "close", "cloud-outline", "cloud", "collapse", "copy", "credit-card", "cross-circle", "cross-outline", "cross", "delete-outline", "delete", "denied", "disclosure", "dropdown", "envelope-outline", "envelope", "error-circle", "error-outline", "expand", "export", "eye-off", "eye", "eyeglasses", "frame", "gear", "heart-outline", "heart", "help-circle", "help-outline", "import", "info-circle", "info-outline", "key", "location-cross", "location", "lock-open", "lock", "map-outline", "map", "menu", "minus-circle", "minus-outline", "minus", "page-outline", "page", "paper-plane", "paperclip", "pencil-circle", "pencil-outline", "pencil", "person", "phone-circle", "phone-outline", "phone", "photos", "playback-next", "playback-pause", "playback-play", "playback-prev", "playback-stop", "plus-circle", "plus-outline", "plus", "printer", "profile-outline", "profile", "redo-circle", "redo-outline", "refresh", "reorder", "scissors", "search", "shield-checkmark", "shield-lock", "star-circle", "star-outline", "star", "triangle-down", "triangle-left", "triangle-right", "triangle-up", "undo-circle", "undo-outline", "warning-outline", "warning"];
 export default icons;

package/dist/components/Icon/icons.js

@@ -12,6 +12,8 @@ const e = [
   "arrow-up-outline",
   "arrow-up",
   "bell",
+  "book-outline",
+  "book",
   "bubble-outline",
   "bubble",
   "bubbles-outline",
@@ -37,6 +39,7 @@ const e = [
   "cloud",
   "collapse",
   "copy",
+  "credit-card",
   "cross-circle",
   "cross-outline",
   "cross",
@@ -101,6 +104,7 @@ const e = [
   "redo-outline",
   "refresh",
   "reorder",
+  "scissors",
   "search",
   "shield-checkmark",
   "shield-lock",

package/dist/components/Lightbox/Lightbox.d.ts

@@ -0,0 +1,12 @@
+export type LightboxImage = React.ImgHTMLAttributes<HTMLImageElement>;
+export type LightboxProps<T extends LightboxImage> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+    images: T[];
+    selected: number;
+    loop?: boolean;
+    onSelect: (index?: number) => void;
+    renderImage?: (image: T) => React.ReactElement;
+};
+export declare const Lightbox: {
+    <T extends LightboxImage>({ images, selected, loop, className, children, onSelect, renderImage, ...props }: LightboxProps<T>): import("react/jsx-runtime").JSX.Element;
+    Thumbnails: <T extends LightboxImage>({ images, selected, className, style, imageSize: thumbnailSize, objectFit: thumbnailObjectFit, renderImage, onSelect, ...props }: import('./Thumbnails').ThumbnailsProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+};

package/dist/components/Lightbox/Lightbox.js

@@ -0,0 +1,166 @@
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import { useId as j, useRef as q, useCallback as m, useEffect as A } from "react";
+import { useFloating as D, useInteractions as B, useDismiss as H, useRole as K, useListNavigation as M, FloatingPortal as V, FloatingOverlay as z, FloatingFocusManager as G } from "@floating-ui/react";
+import J from "classnames";
+import { Icon as v } from "../Icon/Icon.js";
+import { Button as p } from "../Button/Button.js";
+import { afterTransition as Q, htmlImage as U } from "../../utils/helpers.js";
+import { s as e, T as W } from "../../Thumbnails-BlXFynlF.js";
+const X = ({
+  images: d,
+  selected: o,
+  loop: c = !0,
+  className: x,
+  children: y,
+  onSelect: n,
+  renderImage: N = U,
+  ...w
+}) => {
+  const F = j(), a = d.length, O = o !== void 0, s = q([]), $ = document.querySelector("[data-floating-root]") ?? document.body, k = a > 1 && (c || o > 0), C = a > 1 && (c || o < a - 1), { refs: P, context: u, elements: l } = D({
+    open: O,
+    onOpenChange: (t) => {
+      t || I();
+    }
+  }), { getFloatingProps: R, getItemProps: L } = B([
+    H(u),
+    K(u, { role: "dialog" }),
+    M(u, {
+      loop: c,
+      virtual: !0,
+      listRef: s,
+      activeIndex: o,
+      selectedIndex: o,
+      orientation: "both",
+      focusItemOnHover: !1,
+      openOnArrowKeyDown: !1,
+      scrollItemIntoView: { inline: "nearest" },
+      onNavigate: (t) => {
+        t !== null && t !== o && (s.current[t]?.focus(), n(t));
+      }
+    })
+  ]), f = m(
+    (t) => {
+      !c && (t === 0 || t === a - 1) && requestAnimationFrame(() => {
+        s.current[t]?.focus();
+      });
+    },
+    [c, a]
+  ), I = m(() => {
+    l.floating?.classList.add(e.willhide), Q(l.floating, () => {
+      n(void 0);
+    });
+  }, [l.floating, n]), T = m(() => {
+    const t = o === 0 ? a - 1 : o - 1;
+    n(t), f(t);
+  }, [a, o, f, n]), E = m(() => {
+    const t = o === a - 1 ? 0 : o + 1;
+    n(t), f(t);
+  }, [a, o, f, n]);
+  return A(() => {
+    const t = new IntersectionObserver(
+      (r) => {
+        r.forEach((g) => {
+          if (g.isIntersecting) {
+            const h = s.current.indexOf(g.target);
+            h !== -1 && h !== o && n(h);
+          }
+        });
+      },
+      {
+        root: l.floating,
+        threshold: 1
+      }
+    );
+    return l.floating && s.current.forEach((r) => {
+      r && t.observe(r);
+    }), () => {
+      t.disconnect();
+    };
+  }, [l.floating, o, n]), /* @__PURE__ */ b(V, { root: $, children: [
+    /* @__PURE__ */ i(z, { lockScroll: !0 }),
+    /* @__PURE__ */ i(G, { context: u, children: /* @__PURE__ */ b(
+      "div",
+      {
+        ...R(w),
+        ref: P.setFloating,
+        "data-lightbox": !0,
+        "data-floating-root": !0,
+        className: J(e.lightbox, x),
+        children: [
+          /* @__PURE__ */ b(
+            "div",
+            {
+              role: "region",
+              "aria-label": "images",
+              "aria-roledescription": "carousel",
+              "data-lightbox-content": !0,
+              className: e.content,
+              children: [
+                /* @__PURE__ */ i("div", { "data-lightbox-images": !0, className: e.images, children: d.map((t, r) => /* @__PURE__ */ i(
+                  "figure",
+                  {
+                    ref: (g) => {
+                      s.current[r] = g;
+                    },
+                    role: "group",
+                    "aria-roledescription": "slide",
+                    "aria-label": `${r + 1} of ${a}`,
+                    id: `${F}${r}`,
+                    "data-lightbox-image": r,
+                    "data-selected": r === o,
+                    "aria-current": r === o,
+                    tabIndex: r === o ? 0 : -1,
+                    ...L(),
+                    children: N({ ...t, alt: t.alt ?? `Image ${r + 1} of ${a}` })
+                  },
+                  r
+                )) }),
+                /* @__PURE__ */ i(
+                  p,
+                  {
+                    type: "button",
+                    variant: "tertiary",
+                    "data-lightbox-close": !0,
+                    "aria-label": "close lightbox",
+                    icon: /* @__PURE__ */ i(v, { name: "close" }),
+                    className: e.close,
+                    onClick: I
+                  }
+                ),
+                C && /* @__PURE__ */ i(
+                  p,
+                  {
+                    type: "button",
+                    variant: "tertiary",
+                    "data-lightbox-next": !0,
+                    "aria-label": "next image",
+                    icon: /* @__PURE__ */ i(v, { name: "arrow-right" }),
+                    className: e.next,
+                    onClick: E
+                  }
+                ),
+                k && /* @__PURE__ */ i(
+                  p,
+                  {
+                    type: "button",
+                    variant: "tertiary",
+                    "data-lightbox-prev": !0,
+                    "aria-label": "previous image",
+                    icon: /* @__PURE__ */ i(v, { name: "arrow-left" }),
+                    className: e.prev,
+                    onClick: T
+                  }
+                )
+              ]
+            }
+          ),
+          y
+        ]
+      }
+    ) })
+  ] });
+};
+X.Thumbnails = W;
+export {
+  X as Lightbox
+};

package/dist/components/Lightbox/Thumbnail.d.ts

@@ -0,0 +1,7 @@
+export type ThumbnailProps = {
+    index: number;
+    selected: boolean;
+    children: React.ReactNode;
+    onSelect: (index: number) => void;
+};
+export declare const Thumbnail: ({ index, selected, children, onSelect }: ThumbnailProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Lightbox/Thumbnail.js

@@ -0,0 +1,26 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as c, useEffect as e, useCallback as u } from "react";
+const m = ({ index: r, selected: o, children: i, onSelect: t }) => {
+  const l = c(null);
+  e(() => {
+    o && l.current?.scrollIntoView({ inline: "center" });
+  }, [o]);
+  const n = u(() => {
+    t(r);
+  }, [r, t]);
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      ref: l,
+      role: "option",
+      "aria-selected": o,
+      "data-selected": o,
+      "data-lightbox-thumbnail": r,
+      onClick: n,
+      children: i
+    }
+  );
+};
+export {
+  m as Thumbnail
+};

package/dist/components/Lightbox/Thumbnails.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { LightboxImage } from './Lightbox';
+export type ThumbnailsProps<T extends LightboxImage> = Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> & {
+    images: T[];
+    selected: number;
+    imageSize?: React.CSSProperties['width'];
+    objectFit?: React.CSSProperties['objectFit'];
+    renderImage?: (image: T) => React.ReactElement;
+    onSelect: (index: number) => void;
+};
+export declare const Thumbnails: <T extends LightboxImage>({ images, selected, className, style, imageSize: thumbnailSize, objectFit: thumbnailObjectFit, renderImage, onSelect, ...props }: ThumbnailsProps<T>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Lightbox/Thumbnails.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "classnames";
+import "./Thumbnail.js";
+import "../../utils/helpers.js";
+import { T as a } from "../../Thumbnails-BlXFynlF.js";
+export {
+  a as Thumbnails
+};

package/dist/components/Lightbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Lightbox';

package/dist/components/Lightbox/index.js

@@ -0,0 +1,4 @@
+import { Lightbox as t } from "./Lightbox.js";
+export {
+  t as Lightbox
+};

package/dist/components/Menu/Menu.js

@@ -1,5 +1,5 @@
 import { jsxs as O, Fragment as W, jsx as t } from "react/jsx-runtime";
-import _, { useState as l, useRef as g, useMemo as k, useEffect as A } from "react";
+import _, { useState as a, useRef as p, useMemo as k, useEffect as A } from "react";
 import { flushSync as D } from "react-dom";
 import { useFloating as H, offset as U, flip as q, size as G, autoUpdate as J, useInteractions as K, useDismiss as Q, useRole as T, useClick as V, useListNavigation as X, useMergeRefs as Y, FloatingPortal as Z, FloatingFocusManager as $, FloatingList as ee } from "@floating-ui/react";
 import te from "classnames";
@@ -7,75 +7,74 @@ import { MenuContext as oe } from "./MenuContext.js";
 import { getElementRef as ne, cssProps as se } from "../../utils/helpers.js";
 import { s as re } from "../../styles.module-DHm-YTnz.js";
 const pe = ({
-  size: h,
-  placement: c = "bottom-start",
-  trigger: s,
-  offset: R = 5,
-  unmount: v = !0,
-  minWidth: x,
-  maxWidth: F,
-  minHeight: y,
-  maxHeight: M,
-  className: P,
-  children: z,
-  onSelect: m,
-  ...w
+  size: g,
+  placement: l = "bottom-start",
+  trigger: n,
+  offset: h = 5,
+  unmount: R = !0,
+  minWidth: v,
+  maxWidth: x,
+  minHeight: F,
+  maxHeight: y,
+  className: M,
+  children: P,
+  onSelect: c,
+  ...z
 }) => {
-  const [r, u] = l(!1), [i, C] = l(null), [E, I] = l({}), f = g([]), d = g(null), { refs: o, context: e, floatingStyles: N } = H({
-    open: r,
-    placement: c,
-    onOpenChange: u,
+  const [s, m] = a(!1), [r, w] = a(null), [C, E] = a({}), u = p([]), f = p(null), { refs: o, context: e, floatingStyles: I } = H({
+    open: s,
+    placement: l,
+    onOpenChange: m,
     whileElementsMounted: J,
     middleware: [
-      U(R),
+      U(h),
       q({ padding: 10 }),
       G({
         padding: 10,
-        apply({ rects: a, availableWidth: n, availableHeight: L }) {
+        apply({ rects: i, availableWidth: B, availableHeight: L }) {
           D(() => {
-            I({
-              minHeight: y,
-              minWidth: x ?? a.reference.width,
-              maxWidth: F ?? n,
-              maxHeight: M ?? L
+            E({
+              minHeight: F,
+              minWidth: v ?? i.reference.width,
+              maxWidth: x ?? B,
+              maxHeight: y ?? L
             });
           });
         }
       })
     ]
-  }), { getReferenceProps: S, getFloatingProps: b, getItemProps: p } = K([
+  }), { getReferenceProps: N, getFloatingProps: S, getItemProps: d } = K([
     Q(e),
     T(e, { role: "menu" }),
     V(e, { event: "mousedown" }),
     X(e, {
-      listRef: f,
+      listRef: u,
       loop: !0,
-      activeIndex: i,
-      onNavigate: C
+      activeIndex: r,
+      onNavigate: w
     })
-  ]), j = k(
-    () => ({ active: i, setOpen: u, getItemProps: p, onSelect: m }),
-    [i, p, m]
-  ), B = Y([o.setReference, ne(s)]);
+  ]), b = k(
+    () => ({ active: r, setOpen: m, getItemProps: d, onSelect: c }),
+    [r, d, c]
+  ), j = Y([o.setReference, ne(n)]);
   return A(() => {
-    var n;
-    const a = (n = o.domReference.current) == null ? void 0 : n.closest("[data-floating-root]");
-    d.current = a ?? document.body;
+    const i = o.domReference.current?.closest("[data-floating-root]");
+    f.current = i ?? document.body;
   }, [o]), /* @__PURE__ */ O(W, { children: [
     _.cloneElement(
-      s,
-      S({ ...s.props, ref: B, "data-menu-trigger": !0 })
+      n,
+      N({ ...n.props, ref: j, "data-menu-trigger": !0 })
     ),
-    /* @__PURE__ */ t(oe.Provider, { value: j, children: (r || !v) && /* @__PURE__ */ t(Z, { root: d.current, children: /* @__PURE__ */ t($, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(oe.Provider, { value: b, children: (s || !R) && /* @__PURE__ */ t(Z, { root: f.current, children: /* @__PURE__ */ t($, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
       "div",
       {
-        ...b(w),
+        ...S(z),
         ref: o.setFloating,
-        "data-open": r,
-        "data-menu": c,
-        className: te(re.menu, P),
-        style: { ...N, ...E, ...se({ size: h }) },
-        children: /* @__PURE__ */ t(ee, { elementsRef: f, children: z })
+        "data-open": s,
+        "data-menu": l,
+        className: te(re.menu, M),
+        style: { ...I, ...C, ...se({ size: g }) },
+        children: /* @__PURE__ */ t(ee, { elementsRef: u, children: P })
       }
     ) }) }) })
   ] });

package/dist/components/Menu/MenuItem.js

@@ -1,47 +1,47 @@
-import { jsx as u, jsxs as y, Fragment as M } from "react/jsx-runtime";
-import { useContext as N, useCallback as w } from "react";
-import { useListItem as A } from "@floating-ui/react";
-import E from "classnames";
-import { MenuContext as F } from "./MenuContext.js";
-import { wrapNode as d } from "../../utils/helpers.js";
-import { s as f } from "../../styles.module-DHm-YTnz.js";
-const C = ({
-  as: o,
-  scheme: c = "default",
-  icon: r,
-  title: a,
-  selected: s,
-  children: n,
-  className: l,
-  onClick: t,
+import { jsx as p, jsxs as h, Fragment as j } from "react/jsx-runtime";
+import { useContext as y, useCallback as M } from "react";
+import { useListItem as N } from "@floating-ui/react";
+import w from "classnames";
+import { MenuContext as A } from "./MenuContext.js";
+import { wrapNode as u } from "../../utils/helpers.js";
+import { s as d } from "../../styles.module-DHm-YTnz.js";
+const z = ({
+  as: e,
+  scheme: l = "default",
+  icon: o,
+  title: n,
+  selected: m,
+  children: r,
+  className: f,
+  onClick: a,
   ...x
 }) => {
-  const { active: b, setOpen: i, getItemProps: v, onSelect: e } = N(F), { ref: I, index: m } = A(), p = m === b, g = o ?? "button", h = w(
-    (j) => {
-      i(!1), e == null || e(m), t == null || t(j);
+  const { active: b, setOpen: s, getItemProps: v, onSelect: i } = y(A), { ref: k, index: t } = N(), c = t === b, C = e ?? "button", I = M(
+    (g) => {
+      s(!1), i?.(t), a?.(g);
     },
-    [m, i, e, t]
+    [t, s, i, a]
   );
-  return /* @__PURE__ */ u(
-    g,
+  return /* @__PURE__ */ p(
+    C,
     {
       ...x,
-      ref: I,
+      ref: k,
       role: "menuitem",
       "data-menu-item": !0,
-      "data-active": p || s,
-      "data-selected": s,
-      tabIndex: p ? 0 : -1,
-      type: o ? void 0 : "button",
-      className: E(f.menuitem, f[c], l),
-      ...v({ onClick: h }),
-      children: n ? d(n, "span") : /* @__PURE__ */ y(M, { children: [
-        r === "blank" ? /* @__PURE__ */ u("div", { "data-icon-blank": !0 }) : r,
-        a !== void 0 && d(a, "span")
+      "data-active": c || m,
+      "data-selected": m,
+      tabIndex: c ? 0 : -1,
+      type: e ? void 0 : "button",
+      className: w(d.menuitem, d[l], f),
+      ...v({ onClick: I }),
+      children: r ? u(r, "span") : /* @__PURE__ */ h(j, { children: [
+        o === "blank" ? /* @__PURE__ */ p("div", { "data-icon-blank": !0 }) : o,
+        n !== void 0 && u(n, "span")
       ] })
     }
   );
 };
 export {
-  C as MenuItem
+  z as MenuItem
 };

package/dist/components/Notice/Notice.js

@@ -1,53 +1,68 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import v from "classnames";
 import { cssProps as p, getErrorMessage as y } from "../../utils/helpers.js";
-import { Icon as w } from "../Icon/Icon.js";
-const h = "Notice_container_d9QoU", z = "Notice_content_cvC5c", j = "Notice_message_hI1yz", x = "Notice_accessory_AjvqC", C = "Notice_info_tgW7c", F = "Notice_error_ClIfR", I = "Notice_success_-vXfu", k = "Notice_warning_zFUFN", M = "Notice_neutral_Vryzr", Q = "Notice_vertical_DsMZQ", U = "Notice_plain_l9FV5", c = {
-  container: h,
-  content: z,
-  message: j,
-  accessory: x,
-  info: C,
-  error: F,
-  success: I,
-  warning: k,
-  neutral: M,
-  vertical: Q,
-  plain: U
-}, a = {
-  info: "info-circle",
-  warning: "warning",
-  error: "error-circle",
-  success: "checkmark-circle",
-  neutral: "info-outline"
-}, E = ({
-  error: t,
-  scheme: e = t ? "error" : "neutral",
-  layout: n = "horizontal",
+import { Icon as b } from "../Icon/Icon.js";
+const w = "Notice_container_d9QoU", h = "Notice_content_cvC5c", k = "Notice_message_hI1yz", z = "Notice_accessory_AjvqC", I = "Notice_info_tgW7c", j = "Notice_error_ClIfR", x = "Notice_success_-vXfu", C = "Notice_warning_zFUFN", F = "Notice_neutral_Vryzr", M = "Notice_vertical_DsMZQ", Q = "Notice_plain_l9FV5", c = {
+  container: w,
+  content: h,
+  message: k,
+  accessory: z,
+  info: I,
+  error: j,
+  success: x,
+  warning: C,
+  neutral: F,
+  vertical: M,
+  plain: Q
+}, o = {
+  info: {
+    name: "info-circle",
+    label: "info icon"
+  },
+  warning: {
+    name: "warning",
+    label: "warning icon"
+  },
+  error: {
+    name: "error-circle",
+    label: "error icon"
+  },
+  success: {
+    name: "checkmark-circle",
+    label: "checkmark icon"
+  },
+  neutral: {
+    name: "info-outline",
+    label: "info icon"
+  }
+}, U = (e) => o[e] && /* @__PURE__ */ t(b, { name: o[e].name, "aria-label": o[e].label }), E = ({
+  error: e,
+  scheme: n = e ? "error" : "neutral",
+  layout: a = "horizontal",
   variant: l = "default",
-  size: _,
-  icon: s,
-  accessory: r,
-  margin: N,
-  padding: d,
-  className: m,
-  style: u,
-  children: f,
-  ...g
-}) => /* @__PURE__ */ i(
+  size: m,
+  icon: r,
+  accessory: i,
+  margin: _,
+  padding: N,
+  className: d,
+  style: f,
+  children: g,
+  ...u
+}) => /* @__PURE__ */ s(
   "div",
   {
-    ...g,
-    "data-notice": e,
-    "data-layout": n,
-    className: v(c.container, c[e], c[n], c[l], m),
-    style: { ...u, ...p({ size: _, margin: N, padding: d }) },
+    ...u,
+    "data-notice": n,
+    "data-layout": a,
+    className: v(c.container, c[n], c[a], c[l], d),
+    style: { ...f, ...p({ size: m, margin: _, padding: N }) },
     children: [
-      /* @__PURE__ */ i("div", { "data-notice-content": !0, className: c.content, children: [
-        s !== void 0 ? s : a[e] && /* @__PURE__ */ o(w, { name: a[e] }),
-        /* @__PURE__ */ o("div", { "data-notice-message": !0, className: c.message, children: t ? y(t) : f })
+      /* @__PURE__ */ s("div", { "data-notice-content": !0, className: c.content, children: [
+        r !== void 0 ? r : U(n),
+        /* @__PURE__ */ t("div", { "data-notice-message": !0, className: c.message, children: e ? y(e) : g })
       ] }),
-      r && /* @__PURE__ */ o("div", { "data-notice-accessory": !0, className: c.accessory, children: r })
+      i && /* @__PURE__ */ t("div", { "data-notice-accessory": !0, className: c.accessory, children: i })
     ]
   }
 );