welcome-ui 9.0.10 → 10.0.0-alpha.10

package/dist/Drawer.js

@@ -1,159 +1,200 @@
 "use client";
-import { jsx as e, jsxs as f, Fragment as y } from "react/jsx-runtime";
-import { D as A } from "./NI3IVY7K-DxnarnKs.js";
-import { u as ge } from "./NI3IVY7K-DxnarnKs.js";
-import { useCallback as g, forwardRef as p } from "react";
-import { c as n } from "./index-PAaZGbyz.js";
-import { f as b } from "./forwardRefWithAs-8eP3ZN15.js";
-import { Button as C } from "./Button.js";
-import "./Icon-BisRi8B3.js";
-import { A as O } from "./index-C8GsqBDe.js";
-import { Text as x } from "./Text.js";
-import { D as T } from "./DSAASPLT-COUlh0RL.js";
-import { CloseButton as j } from "./CloseButton.js";
-import { D as F } from "./ZTXFEM5L-BEA_1pIo.js";
-const I = "_content_2lawg_13", B = "_title_2lawg_67", h = {
-  "asset-drawer": "_asset-drawer_2lawg_3",
-  "content-wrapper": "_content-wrapper_2lawg_13",
-  "content-max-width": "_content-max-width_2lawg_24",
-  content: I,
-  "asset-drawer-header": "_asset-drawer-header_2lawg_39",
-  "back-button": "_back-button_2lawg_57",
-  title: B,
-  "icon-block": "_icon-block_2lawg_72",
-  "size-md": "_size-md_2lawg_84",
-  "size-sm": "_size-sm_2lawg_87"
-}, d = n(h), E = b(
+import './Drawer.css';
+import { jsx as e, jsxs as h, Fragment as P } from "react/jsx-runtime";
+import { D as S } from "./NI3IVY7K-Dy240mkD.js";
+import { u as Ne } from "./NI3IVY7K-Dy240mkD.js";
+import { useCallback as f, forwardRef as u } from "react";
+import { c as o } from "./index-PAaZGbyz.js";
+import { f as z } from "./forwardRefWithAs-8eP3ZN15.js";
+import { Button as q } from "./Button.js";
+import { Icon as A } from "./Icon.js";
+import { Text as C } from "./Text.js";
+import { D as H } from "./DSAASPLT-Fx1kuAsk.js";
+import { CloseButton as M } from "./CloseButton.js";
+import { D as R } from "./ZTXFEM5L-WGHY_jqg.js";
+const J = "_content_1mhgf_13", K = "_title_1mhgf_67", b = {
+  "asset-drawer": "_asset-drawer_1mhgf_3",
+  "content-wrapper": "_content-wrapper_1mhgf_13",
+  "content-max-width": "_content-max-width_1mhgf_24",
+  content: J,
+  "asset-drawer-header": "_asset-drawer-header_1mhgf_39",
+  "back-button": "_back-button_1mhgf_57",
+  title: K,
+  "icon-block": "_icon-block_1mhgf_72",
+  "size-md": "_size-md_1mhgf_84",
+  "size-sm": "_size-sm_1mhgf_87"
+}, _ = o(b), T = z(
   ({
     children: t,
-    className: r,
-    getPersistentElements: s,
-    maxWidth: o,
+    className: s,
+    getPersistentElements: r,
+    hideOnInteractOutside: a = !0,
+    maxWidth: n,
     store: c,
-    ...i
-  }, m) => {
-    const l = g(
+    ...k
+  }, d) => {
+    const l = f(
       () => Array.from(
-        s ? s() : document.querySelectorAll("[data-wui-persistent]")
+        r ? r() : document.querySelectorAll("[data-wui-persistent]")
       ),
-      [s]
-    ), w = g(
-      (k) => {
-        const D = k.target;
+      [r]
+    ), g = f(
+      (m) => {
+        if (!a) return !1;
+        const N = m.target;
         return !l().some(
-          (z) => z.contains(D)
+          (D) => D.contains(N)
         );
       },
-      [l]
-    ), u = typeof o == "number" ? `${o}px` : o;
+      [l, a]
+    ), w = typeof n == "number" ? `${n}px` : n;
     return /* @__PURE__ */ e(
-      te,
+      ae,
       {
         autoFocusOnShow: !1,
-        className: d("asset-drawer", r),
+        className: _("asset-drawer", s),
         getPersistentElements: l,
-        hideOnInteractOutside: w,
+        hideOnInteractOutside: g,
         placement: "bottom",
-        ref: m,
+        ref: d,
         store: c,
         withBackdrop: !0,
-        ...i,
-        children: /* @__PURE__ */ e("div", { className: d("content-wrapper"), children: /* @__PURE__ */ e(
+        ...k,
+        children: /* @__PURE__ */ e("div", { className: _("content-wrapper"), children: /* @__PURE__ */ e(
           "div",
           {
-            className: d("content-max-width"),
-            style: { "--asset-drawer-content-max-width": u },
-            children: /* @__PURE__ */ e("div", { className: d("content"), children: t })
+            className: _("content-max-width"),
+            style: { "--assetDrawerContentMaxWidth": w },
+            children: /* @__PURE__ */ e("div", { className: _("content"), children: t })
           }
         ) })
       }
     );
   }
-), P = n(h), R = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e("div", { className: P("icon-block", `size-${r}`), children: /* @__PURE__ */ e(t, { className: "text-neutral-90", size: r }) }), _ = n(h), S = ({
+);
+T.displayName = "AssetDrawer";
+const L = o(b), F = ({ iconName: t, size: s = "md" }) => /* @__PURE__ */ e("div", { className: L("icon-block", `size-${s}`), children: /* @__PURE__ */ e(A, { className: "text-neutral-90", name: t, size: s }) });
+F.displayName = "AssetDrawer.IconBlock";
+const p = o(b), O = ({
   action: t,
-  className: r,
-  icon: s,
-  onBackButtonClick: o,
-  subtitle: c,
-  title: i
-}) => /* @__PURE__ */ f("div", { className: _("asset-drawer-header", r), children: [
-  /* @__PURE__ */ f("div", { className: _("back-button"), children: [
-    !!o && /* @__PURE__ */ e(C, { onClick: o, shape: "circle", size: "lg", variant: "ghost", children: /* @__PURE__ */ e(O, {}) }),
-    !!s && /* @__PURE__ */ e(R, { icon: s }),
-    /* @__PURE__ */ f("div", { className: _("title"), children: [
-      /* @__PURE__ */ e(x, { className: "pr-xl", variant: "h3", children: i }),
-      c
+  className: s,
+  iconName: r,
+  onBackButtonClick: a,
+  subtitle: n,
+  title: c
+}) => /* @__PURE__ */ h("div", { className: p("asset-drawer-header", s), children: [
+  /* @__PURE__ */ h("div", { className: p("back-button"), children: [
+    !!a && /* @__PURE__ */ e(q, { onClick: a, variant: "tertiary", children: /* @__PURE__ */ e(A, { name: "arrow-left" }) }),
+    !!r && /* @__PURE__ */ e(F, { iconName: r }),
+    /* @__PURE__ */ h("div", { className: p("title"), children: [
+      /* @__PURE__ */ e(C, { as: "h3", className: "pr-xl", variant: "heading-lg", children: c }),
+      n
     ] })
   ] }),
-  t ? /* @__PURE__ */ e("div", { className: _("actions"), children: t }) : null
-] }), W = "_root_11f0r_3", q = "_backdrop_11f0r_68", H = "_content_11f0r_85", L = "_footer_11f0r_94", M = "_title_11f0r_108", a = {
-  root: W,
-  "placement-bottom": "_placement-bottom_11f0r_30",
-  "placement-left": "_placement-left_11f0r_34",
-  "placement-right": "_placement-right_11f0r_38",
-  "placement-top": "_placement-top_11f0r_42",
-  "size-sm": "_size-sm_11f0r_46",
-  "size-md": "_size-md_11f0r_49",
-  "size-lg": "_size-lg_11f0r_52",
-  backdrop: q,
-  "drawer-hide-on-interact-outside": "_drawer-hide-on-interact-outside_11f0r_79",
-  content: H,
-  footer: L,
-  title: M,
-  "drawer-close": "_drawer-close_11f0r_120"
-}, J = n(a), N = p(
-  ({ hideOnInteractOutside: t = !0, ...r }, s) => /* @__PURE__ */ e(
+  t ? /* @__PURE__ */ e("div", { className: p("actions"), children: t }) : null
+] });
+O.displayName = "AssetDrawer.Header";
+const Q = "_root_iksk1_3", U = "_backdrop_iksk1_68", V = "_content_iksk1_85", X = "_footer_iksk1_94", Y = "_title_iksk1_108", i = {
+  root: Q,
+  "placement-bottom": "_placement-bottom_iksk1_30",
+  "placement-left": "_placement-left_iksk1_34",
+  "placement-right": "_placement-right_iksk1_38",
+  "placement-top": "_placement-top_iksk1_42",
+  "size-sm": "_size-sm_iksk1_46",
+  "size-md": "_size-md_iksk1_49",
+  "size-lg": "_size-lg_iksk1_52",
+  backdrop: U,
+  "drawer-hide-on-interact-outside": "_drawer-hide-on-interact-outside_iksk1_79",
+  content: V,
+  footer: X,
+  title: Y,
+  "drawer-close": "_drawer-close_iksk1_120"
+}, Z = o(i), x = u(
+  ({ hideOnInteractOutside: t = !0, ...s }, r) => /* @__PURE__ */ e(
     "div",
     {
-      className: J("backdrop", t && "drawer-hide-on-interact-outside"),
-      ref: s,
-      ...r
+      className: Z("backdrop", t && "drawer-hide-on-interact-outside"),
+      ref: r,
+      ...s
     }
   )
-), K = n(a), v = ({ className: t }) => /* @__PURE__ */ e(
-  T,
+);
+x.displayName = "Drawer.Backdrop";
+const G = o(i), y = ({ className: t }) => /* @__PURE__ */ e(
+  H,
   {
-    render: (r) => /* @__PURE__ */ e(j, { className: K("drawer-close", t), ...r })
+    render: (s) => /* @__PURE__ */ e(M, { className: G("drawer-close", t), ...s })
   }
-), Q = n(a), U = p(({ className: t, ...r }, s) => /* @__PURE__ */ e("div", { className: Q("content", t), ref: s, ...r })), V = n(a), X = p(({ className: t, ...r }, s) => /* @__PURE__ */ e("div", { className: V("footer", t), ref: s, ...r })), Y = n(a), Z = ({ children: t, className: r, ...s }) => /* @__PURE__ */ e("div", { className: Y("title", r), ...s, children: /* @__PURE__ */ e(x, { className: "w-full", variant: "h3", children: t }) }), $ = b(
-  ({ as: t, store: r, ...s }, o) => /* @__PURE__ */ e(F, { ref: o, render: t ? /* @__PURE__ */ e(t, {}) : void 0, store: r, ...s })
-), G = n(a), ee = p(
+);
+y.displayName = "Drawer.Close";
+const ee = o(i), W = u(({ className: t, ...s }, r) => /* @__PURE__ */ e("div", { className: ee("content", t), ref: r, ...s }));
+W.displayName = "Drawer.Content";
+const te = o(i), j = u(({ className: t, ...s }, r) => /* @__PURE__ */ e("div", { className: te("footer", t), ref: r, ...s }));
+j.displayName = "Drawer.Footer";
+const se = o(i), B = ({ children: t, className: s, ...r }) => /* @__PURE__ */ e("div", { className: se("title", s), ...r, children: /* @__PURE__ */ e(C, { as: "h3", className: "w-full", variant: "heading-lg", children: t }) });
+B.displayName = "Drawer.Title";
+const v = z(
+  ({ as: t, store: s, ...r }, a) => /* @__PURE__ */ e(R, { ref: a, render: t ? /* @__PURE__ */ e(t, {}) : void 0, store: s, ...r })
+);
+v.displayName = "Drawer.Trigger";
+const re = o(i), E = u(
   ({
     children: t,
-    className: r,
-    hideOnInteractOutside: s = !0,
-    placement: o = "right",
+    className: s,
+    getPersistentElements: r,
+    hideOnInteractOutside: a = !0,
+    placement: n = "right",
     size: c = "lg",
-    store: i,
-    withBackdrop: m = !1,
+    store: k,
+    withBackdrop: d = !1,
     withCloseButton: l = !0,
-    ...w
-  }, u) => /* @__PURE__ */ e(
-    A,
-    {
-      backdrop: m ? /* @__PURE__ */ e(N, { hideOnInteractOutside: s }) : !1,
-      hideOnInteractOutside: s,
-      modal: m,
-      ref: u,
-      render: /* @__PURE__ */ e("div", { className: G("root", `placement-${o}`, `size-${c}`, r) }),
-      store: i,
-      ...w,
-      children: /* @__PURE__ */ f(y, { children: [
-        l ? /* @__PURE__ */ e(v, {}) : null,
-        t
-      ] })
-    }
-  )
-), te = Object.assign(ee, {
-  Backdrop: N,
-  Close: v,
-  Content: U,
-  Footer: X,
-  Title: Z,
-  Trigger: $
-}), we = Object.assign(E, { Header: S, Trigger: $ });
+    ...g
+  }, w) => {
+    const m = f(
+      () => Array.from(
+        r ? r() : document.querySelectorAll("[data-wui-persistent]")
+      ),
+      [r]
+    ), N = f(
+      ($) => {
+        if (!a) return !1;
+        const D = $.target;
+        return !m().some(
+          (I) => I.contains(D)
+        );
+      },
+      [m, a]
+    );
+    return /* @__PURE__ */ e(
+      S,
+      {
+        backdrop: d ? /* @__PURE__ */ e(x, { hideOnInteractOutside: a }) : !1,
+        getPersistentElements: m,
+        hideOnInteractOutside: N,
+        modal: d,
+        ref: w,
+        render: /* @__PURE__ */ e("div", { className: re("root", `placement-${n}`, `size-${c}`, s) }),
+        store: k,
+        ...g,
+        children: /* @__PURE__ */ h(P, { children: [
+          l ? /* @__PURE__ */ e(y, {}) : null,
+          t
+        ] })
+      }
+    );
+  }
+);
+E.displayName = "Drawer";
+const ae = Object.assign(E, {
+  Backdrop: x,
+  Close: y,
+  Content: W,
+  Footer: j,
+  Title: B,
+  Trigger: v
+}), ke = Object.assign(T, { Header: O, Trigger: v });
 export {
-  we as AssetDrawer,
-  te as Drawer,
-  ge as useDrawer
+  ke as AssetDrawer,
+  ae as Drawer,
+  Ne as useDrawer
 };

package/dist/DropdownMenu.css

@@ -1 +1 @@
-@layer components{._inner_1nesm_2{background-color:var(--color-neutral-10);border-color:var(--color-neutral-30);border-style:solid;border-width:var(--border-width-sm);border-radius:var(--radius-md);font-size:var(--font-size-sm);min-width:8.125rem;z-index:1;opacity:0;transition:opacity var(--duration-fast) ease-in-out}._inner_1nesm_2[data-enter]{opacity:1}._arrow_1nesm_17{display:flex;z-index:2;color:var(--color-neutral-70);stroke-width:0!important}._arrow_1nesm_17 #_stroke_1nesm_1{color:var(--color-neutral-70)}._arrow-item_1nesm_26{height:var(--height-30);width:var(--height-30);transform:var(--dropdown-menu-transform)}._arrow-placement-bottom_1nesm_31{--dropdown-menu-transform: rotateZ(360deg)}._arrow-placement-left_1nesm_34{--dropdown-menu-transform: rotateZ(90deg)}._arrow-placement-right_1nesm_37{--dropdown-menu-transform: rotateZ(-90deg)}._arrow-placement-top_1nesm_40{--dropdown-menu-transform: rotateZ(180deg)}._item_1nesm_43{display:flex;align-items:center;width:100%;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-decoration:none;transition:var(--duration-medium);padding:var(--spacing-md);background-color:var(--backgroundColor, transparent);color:var(--color, --color-beige-70)}._item_1nesm_43:focus{outline:none!important;--backgroundColor: var(--color-beige-30);--color: var(--color-neutral-90)}._item_1nesm_43:hover{--backgroundColor: var(--color-beige-30);--color: var(--color-neutral-90)}._item_1nesm_43[disabled]{--backgroundColor: transparent;--color: var(--color-beige-40);cursor:not-allowed}._separator_1nesm_70{background-color:var(--color-beige-30);border:0;height:var(--border-width-sm);margin:0}}
+@layer components{._root_17w9k_2{background-color:var(--components-colors-dropdown-menu-color-background-default);border-style:solid;border-width:var(--components-dimensions-dropdown-menu-border-width);border-radius:var(--components-dimensions-dropdown-menu-border-radius);font-family:var(--font-family-body);font-size:var(--font-size-sm);line-height:var(--font-line-height-md);font-weight:var(--font-weight-regular);min-width:15.75rem;z-index:1;opacity:0;transition:all var(--duration-medium) ease-in-out,opacity var(--duration-fast) ease-in-out;box-sizing:border-box;outline:none!important;padding:var(--paddingBlockMenu) var(--paddingInlineMenu);border-color:var(--borderColorMenu);box-shadow:var(--boxShadowMenu, var(--elevation-10));--borderColorMenu: var(--components-colors-dropdown-menu-color-border-default)}._root_17w9k_2[data-enter]{opacity:1}._root_17w9k_2:hover{--borderColorMenu: var(--components-colors-dropdown-menu-color-border-hover);--boxShadowMenu: var(--elevation-20)}._arrow_17w9k_29{display:flex;z-index:2;color:var(--components-colors-dropdown-menu-color-border-hover);stroke-width:0!important}._arrow_17w9k_29 #_stroke_17w9k_1{color:var(--components-colors-dropdown-menu-color-border-hover)}._arrow-item_17w9k_38{height:var(--height-32);width:var(--height-32);transform:var(--dropdownMenuTransform)}._arrow-placement-bottom_17w9k_43{--dropdownMenuTransform: rotateZ(360deg)}._arrow-placement-left_17w9k_46{--dropdownMenuTransform: rotateZ(90deg)}._arrow-placement-right_17w9k_49{--dropdownMenuTransform: rotateZ(-90deg)}._arrow-placement-top_17w9k_52{--dropdownMenuTransform: rotateZ(180deg)}._item_17w9k_55{display:flex;flex-direction:row;align-items:center;gap:var(--components-dimensions-dropdown-menu-item-gap-content);width:100%;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-decoration:none;transition:all var(--duration-medium) ease-in-out;border-radius:var(--components-dimensions-dropdown-menu-item-border-radius);padding:var(--paddingBlockItem) var(--paddingInlineItem);background:var(--backgroundItem, var(--components-colors-dropdown-menu-item-color-background-default));color:var(--colorItem, var(--components-colors-dropdown-menu-item-color-text-content-default))}._item_17w9k_55:focus{outline:none!important;--backgroundItem: var(--components-colors-dropdown-menu-item-color-background-hover);--colorItem: var(--components-colors-dropdown-menu-item-color-text-content-hover);--colorItemDescription: var( --components-colors-dropdown-menu-item-color-text-description-hover )}._item_17w9k_55:hover{--backgroundItem: var(--components-colors-dropdown-menu-item-color-background-hover);--colorItem: var(--components-colors-dropdown-menu-item-color-text-content-hover);--colorItemDescription: var( --components-colors-dropdown-menu-item-color-text-description-hover )}._item_17w9k_55[aria-disabled],._item_17w9k_55:disabled{--backgroundItem: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-dropdown-menu-item-color-background-disabled) 2.5px, var(--components-colors-dropdown-menu-item-color-background-disabled) 5.25px) padding-box;--colorItem: var(--components-colors-dropdown-menu-item-color-text-content-disabled);--colorItemDescription: var( --components-colors-dropdown-menu-item-color-text-description-disabled );cursor:not-allowed}._item_17w9k_55._action_17w9k_94{line-height:var(--font-line-height-xs);font-weight:var(--font-weight-semi-bold)}._item_17w9k_55._group-label_17w9k_98{line-height:var(--font-line-height-xs);font-weight:var(--font-weight-semi-bold);pointer-events:none}._item_17w9k_55._search_17w9k_103{margin-bottom:var(--components-dimensions-dropdown-menu-gap-content)}._item_17w9k_55 ._item-content_17w9k_106{display:flex;flex-direction:column;align-items:flex-start}._item_17w9k_55 ._item-description_17w9k_111{color:var(--colorItemDescription, var(--components-colors-dropdown-menu-item-color-text-description-default));transition:all var(--duration-medium) ease-in-out;font-size:var(--font-size-xs);line-height:var(--font-line-height-sm);font-weight:var(--font-weight-regular)}._item_17w9k_55 [aria-checked=true]{transition:all var(--duration-medium) ease-in-out;font-weight:var(--font-weight-medium)}._item_17w9k_55 ._item-default-check_17w9k_122{margin-left:auto;width:auto!important;height:auto!important}._item_17w9k_55 ._item-toggle-check_17w9k_127{pointer-events:none}._item_17w9k_55 ._item-checkbox_17w9k_130,._item_17w9k_55 ._item-radio_17w9k_131{display:flex;flex-direction:row;align-items:center;gap:var(--components-dimensions-dropdown-menu-item-gap-content);width:100%;padding:var(--paddingBlockItem) var(--paddingInlineItem)}._item_17w9k_55 ._item-checkbox_17w9k_130 label,._item_17w9k_55 ._item-radio_17w9k_131 label{margin:0}._item_17w9k_55:has(._item-checkbox_17w9k_130,._item-radio_17w9k_131){padding:0}._separator_17w9k_146{background-color:var(--components-colors-dropdown-menu-color-border-default);border:0;height:var(--components-dimensions-dropdown-menu-border-width);margin:var(--paddingBlockSeparator) 0}._size-md_17w9k_155{--paddingInlineMenu: var(--components-dimensions-dropdown-menu-padding-inline-md);--paddingBlockMenu: var(--components-dimensions-dropdown-menu-padding-block-md);--paddingInlineItem: var(--components-dimensions-dropdown-menu-item-padding-inline-md);--paddingBlockItem: var(--components-dimensions-dropdown-menu-item-padding-block-md);--paddingBlockSeparator: var(--components-dimensions-dropdown-menu-divider-padding-block-md)}._size-lg_17w9k_162{--paddingInlineMenu: var(--components-dimensions-dropdown-menu-padding-inline-lg);--paddingBlockMenu: var(--components-dimensions-dropdown-menu-padding-block-lg);--paddingInlineItem: var(--components-dimensions-dropdown-menu-item-padding-inline-lg);--paddingBlockItem: var(--components-dimensions-dropdown-menu-item-padding-block-lg);--paddingBlockSeparator: var(--components-dimensions-dropdown-menu-divider-padding-block-lg)}}