@payfit/unity-components 0.0.0-alpha.9 → 1.0.0

package/dist/esm/components/multi-select/MultiSelect.js

@@ -0,0 +1,233 @@
+import { jsx as u, jsxs as q } from "react/jsx-runtime";
+import { forwardRef as Se, useMemo as S, useCallback as d } from "react";
+import { ComboboxProvider as pe, SelectProvider as z } from "@ariakit/react";
+import { useComboboxFilter as he } from "./hooks/use-combobox-filter.js";
+import { useMultiSelectionState as ve } from "./hooks/use-multiselection-state.js";
+import { MultiSelectContext as J } from "./Multiselect.context.js";
+import { MultiSelectButton as U } from "./parts/MultiSelectButton.js";
+import { MultiSelectPopover as W } from "./parts/MultiSelectPopover.js";
+function X(t) {
+  return t instanceof Map;
+}
+function Ve(t) {
+  return !Object.prototype.hasOwnProperty.call(t, "items");
+}
+function a(t) {
+  return String(t);
+}
+function p(t) {
+  return isNaN(Number(t)) ? t : Number(t);
+}
+function Z(t) {
+  return Array.from(t, a);
+}
+function Y(t) {
+  return new Set(Z(t));
+}
+const $ = (t, g) => {
+  const o = Ve(t), w = (e) => {
+    if (Object.hasOwnProperty.call(e, "value"))
+      return e.value;
+    if (Object.prototype.hasOwnProperty.call(e, "id"))
+      return e.id;
+    if (typeof e == "string")
+      return e;
+    const n = Object.keys(e)[0];
+    return e[n];
+  }, ee = o ? (e) => Array.from(e).map(String).join(", ") : (e) => Array.from(e).map((n) => w(n)).join(", "), m = t, C = t, c = S(
+    () => o ? void 0 : m.items,
+    [o, m.items]
+  ), r = o ? void 0 : m.getItemValue ?? w, { children: v } = o ? C : m, te = o ? void 0 : m.searchOptions, { children: O } = C, {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    children: Pe,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getItemValue: Ae,
+    value: V,
+    defaultValue: f,
+    onChange: b,
+    onBlur: M,
+    isDisabled: x,
+    isInvalid: j,
+    isLoading: D,
+    isReadOnly: I,
+    isSearchable: h,
+    placeholder: R,
+    onClearButtonPress: F,
+    renderValue: re,
+    maxVisibleItems: N = 7,
+    ...B
+  } = t, ne = re ?? ee, y = d(() => o || !c ? [] : X(c) ? Array.from(c.values()).flat() : Array.from(c), [c, o]), oe = d(() => {
+    if ("value" in t)
+      return V ? Y(V) : /* @__PURE__ */ new Set();
+  }, [t, V]), se = d(() => f ? Y(f) : /* @__PURE__ */ new Set(), [f]), le = d(
+    (e) => {
+      if (!b) return;
+      const n = new Set(
+        Array.from(e).map((l) => p(l))
+      );
+      b(n);
+    },
+    [b]
+  ), {
+    selectedKeys: i,
+    selectKey: L,
+    unselectKey: T
+  } = ve({
+    selectedKeys: oe(),
+    defaultSelectedKeys: se(),
+    onSelectionChange: le
+  }), ae = d(
+    (e) => {
+      L(a(e));
+    },
+    [L]
+  ), ce = d(
+    (e) => {
+      T(a(e));
+    },
+    [T]
+  ), { setSearchQuery: ie, matchingItems: K } = he({
+    items: y(),
+    extractSearchableText: (e) => o ? [""] : [
+      a(
+        (r == null ? void 0 : r(e)) || ""
+      )
+    ],
+    enabled: h,
+    searchOptions: te
+  }), ue = () => {
+    if (o) return Array.from(i);
+    const e = y();
+    return Array.from(i).map((n) => {
+      const l = e.find(
+        (s) => a(
+          (r == null ? void 0 : r(s)) || ""
+        ) === n
+      );
+      return l && r ? r(l) : p(n);
+    });
+  }, de = () => {
+    if (o)
+      return new Set(
+        Array.from(i).map((l) => p(l))
+      );
+    const e = y(), n = /* @__PURE__ */ new Set();
+    return Array.from(i).forEach((l) => {
+      const s = e.find(
+        (A) => a(
+          (r == null ? void 0 : r(A)) || ""
+        ) === l
+      );
+      s && n.add(s);
+    }), n;
+  }, fe = () => {
+    if (f)
+      return Z(f);
+  }, P = S(ue, [
+    i,
+    o,
+    r,
+    y
+  ]), _ = S(de, [
+    i,
+    o,
+    r,
+    y
+  ]), G = S(fe, [f]), k = (e) => {
+    const n = new Set(e), l = new Set(
+      P.map((s) => a(s))
+    );
+    for (const s of n)
+      l.has(s) || ae(p(s));
+    for (const s of l)
+      n.has(s) || ce(p(s));
+  }, E = d(() => o ? O : c ? X(c) ? Array.from(c.entries()).map(([e, n]) => {
+    const l = n.filter(
+      (s) => K.some((A) => {
+        const me = (r == null ? void 0 : r(s)) || "", ye = (r == null ? void 0 : r(A)) || "";
+        return a(ye) === a(me);
+      })
+    );
+    return v(e, l);
+  }) : K.map(
+    (e) => v(
+      e
+    )
+  ) : null, [v, c, K, O, r, o]), H = S(() => E(), [E]), Q = ne;
+  return h ? /* @__PURE__ */ u(pe, { resetValueOnHide: !0, setValue: ie, children: /* @__PURE__ */ u(
+    z,
+    {
+      value: P.map(
+        (e) => a(e)
+      ),
+      defaultValue: G,
+      setValue: k,
+      focusLoop: !0,
+      children: /* @__PURE__ */ q(
+        J.Provider,
+        {
+          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: i },
+          children: [
+            /* @__PURE__ */ u(
+              U,
+              {
+                ref: g,
+                placeholder: R,
+                isDisabled: x,
+                isReadOnly: I,
+                isLoading: D,
+                isInvalid: j,
+                renderValue: Q,
+                selectedItems: _,
+                onClearButtonPress: F,
+                ...B
+              }
+            ),
+            /* @__PURE__ */ u(W, { onBlur: M, children: H })
+          ]
+        }
+      )
+    }
+  ) }) : /* @__PURE__ */ u(
+    z,
+    {
+      value: P.map(
+        (e) => a(e)
+      ),
+      defaultValue: G,
+      setValue: k,
+      focusLoop: !0,
+      children: /* @__PURE__ */ q(
+        J.Provider,
+        {
+          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: i },
+          children: [
+            /* @__PURE__ */ u(
+              U,
+              {
+                ref: g,
+                placeholder: R,
+                isDisabled: x,
+                isReadOnly: I,
+                isLoading: D,
+                isInvalid: j,
+                renderValue: Q,
+                selectedItems: _,
+                onClearButtonPress: F,
+                ...B
+              }
+            ),
+            /* @__PURE__ */ u(W, { onBlur: M, children: H })
+          ]
+        }
+      )
+    }
+  );
+};
+$.displayName = "MultiSelect";
+const Ie = Se(
+  $
+);
+export {
+  Ie as MultiSelect
+};

package/dist/esm/components/multi-select/parts/MultiSelectButton.js

@@ -0,0 +1,161 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { memo as j, forwardRef as E, useContext as k, useMemo as A } from "react";
+import { useSelectContext as D, useStoreState as K, Select as $ } from "@ariakit/react";
+import { useId as L } from "react-aria";
+import { useIntl as R } from "react-intl";
+import { tv as U } from "tailwind-variants";
+import { Badge as W } from "../../badge/Badge.js";
+import { CircularIconButton as q } from "../../icon-button/CircularIconButton.js";
+import { Icon as p } from "../../icon/Icon.js";
+import { Spinner as F } from "../../spinner/Spinner.js";
+import { MultiSelectContext as G } from "../Multiselect.context.js";
+const H = U({
+  slots: {
+    base: "uy:h-500 uy:flex uy:items-center uy:justify-between uy:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
+    inputValue: "uy:flex-1 uy:typography-body uy:text-content-form-enabled uy:text-left uy:line-clamp-1",
+    state: "uy:grow-0 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:inline-flex uy:gap-50 uy:items-center uy:px-100",
+    suffix: "uy:text-content-neutral-low"
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled uy:text-content-form-disabled",
+        inputValue: "uy:text-content-form-disabled!",
+        state: "uy:text-content-form-disabled",
+        suffix: "uy:text-content-form-disabled"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled",
+        inputValue: "uy:text-content-form-disabled",
+        state: "uy:text-content-form-disabled",
+        suffix: "uy:text-content-form-disabled"
+      }
+    },
+    isInvalid: {
+      true: {
+        base: "uy:bg-surface-form-error uy:border-border-form-error",
+        inputValue: "uy:text-content-form-error",
+        state: "uy:text-content-form-error",
+        suffix: "uy:text-content-form-error"
+      }
+    },
+    isEmpty: {
+      true: {
+        inputValue: "uy:text-content-neutral-lowest"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+        inputValue: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
+        state: "uy:text-content-neutral-disabled",
+        suffix: "uy:border-border-form-enabled uy:text-content-form-enabled"
+      }
+    }
+  ]
+});
+function J({
+  isDisabled: r,
+  isReadOnly: t,
+  isLoading: d,
+  isInvalid: n,
+  placeholder: u,
+  selectedItems: g,
+  renderValue: m,
+  onClearButtonPress: i,
+  ...w
+}, h) {
+  const f = L(), s = R(), S = D(), M = K(S, "open"), y = k(G), a = y.maxVisibleItems ?? 0, l = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(g), { base: v, inputValue: I, state: C, suffix: V } = H({
+    isDisabled: !!r,
+    isReadOnly: !!t,
+    isInvalid: !!n,
+    isEmpty: l.size === 0
+  }), b = Math.max(
+    o.length - a,
+    0
+  ), N = l.size > 0 && !r && !t && !d, B = A(() => {
+    if (o.length === 0) return u;
+    const O = o.slice(0, a), z = new Set(O);
+    return m(z);
+  }, [o, a, m, u]);
+  return /* @__PURE__ */ c(
+    $,
+    {
+      ...w,
+      ref: h,
+      className: v(),
+      disabled: r || t,
+      "aria-invalid": n,
+      "aria-readonly": t,
+      "aria-labelledby": `${f}-select-button-label`,
+      "data-dd-privacy": "mask",
+      children: [
+        /* @__PURE__ */ e("span", { id: `${f}-select-button-label`, className: I(), children: l.size > 0 ? B : u }),
+        /* @__PURE__ */ c("div", { className: C(), children: [
+          d && /* @__PURE__ */ e(
+            F,
+            {
+              color: "inherit",
+              size: "small",
+              label: s.formatMessage({
+                id: "unity:component:form-field:form-input:spinner:label",
+                defaultMessage: "Loading"
+              })
+            }
+          ),
+          n && /* @__PURE__ */ e(
+            p,
+            {
+              src: "WarningCircleOutlined",
+              color: "content.form.invalid",
+              alt: s.formatMessage({
+                id: "unity:component:form-field:form-input:error:alt",
+                defaultMessage: "Error"
+              })
+            }
+          ),
+          b > 0 && /* @__PURE__ */ c(W, { variant: "numeric", children: [
+            "+",
+            b
+          ] }),
+          N && /* @__PURE__ */ e(
+            q,
+            {
+              title: s.formatMessage({
+                id: "unity:component:common:clear:title",
+                defaultMessage: "Clear"
+              }),
+              className: "uy:text-content-neutral-enabled",
+              icon: "CloseOutlined",
+              onPress: () => {
+                i == null || i();
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          p,
+          {
+            color: "content.neutral.low",
+            className: V(),
+            src: M ? "CaretUpOutlined" : "CaretDownOutlined",
+            role: "presentation"
+          }
+        )
+      ]
+    }
+  );
+}
+const x = j(E(J));
+x.displayName = "MultiselectButton";
+const ne = x;
+export {
+  ne as MultiSelectButton
+};

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.js

@@ -0,0 +1,34 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useContext as h } from "react";
+import { ComboboxGroup as x, ComboboxGroupLabel as C, SelectGroup as G, SelectGroupLabel as S } from "@ariakit/react";
+import { tv as N } from "tailwind-variants";
+import { MultiSelectContext as g } from "../Multiselect.context.js";
+const M = N({
+  slots: {
+    base: "uy:flex uy:flex-col uy:bg-surface-neutral",
+    label: "uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral",
+    separator: "uy:my-100 uy:border-t uy:border-border-neutral uy:border-solid"
+  }
+});
+function O(e) {
+  return "items" in e && Array.isArray(e.items) && typeof e.children == "function";
+}
+function j(e) {
+  const i = h(g), { base: c, label: r, separator: o } = M(), { label: n, withSeparator: a, className: m, ...y } = e, d = (b, p) => b.map((f) => p(f)), l = O(e) ? d(e.items, e.children) : e.children, s = {
+    className: c({ className: m }),
+    ...y
+  };
+  return i.isSearchable ? /* @__PURE__ */ u(x, { ...s, children: [
+    /* @__PURE__ */ t(C, { className: r(), children: n }),
+    l,
+    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
+  ] }) : /* @__PURE__ */ u(G, { ...s, children: [
+    /* @__PURE__ */ t(S, { className: r(), children: n }),
+    l,
+    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
+  ] });
+}
+j.displayName = "MultiSelectOptGroup";
+export {
+  j as MultiSelectOptGroup
+};

package/dist/esm/components/multi-select/parts/MultiSelectOption.js

@@ -0,0 +1,87 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as p, useContext as b, createElement as v } from "react";
+import { SelectItem as x, ComboboxItem as h, SelectItemCheck as S } from "@ariakit/react";
+import { tv as g } from "tailwind-variants";
+import C from "../../../hooks/use-id.js";
+import { CheckboxIndicator as k } from "../../checkbox/parts/CheckboxIndicator.js";
+import { MultiSelectContext as I } from "../Multiselect.context.js";
+const O = g({
+  slots: {
+    base: [
+      "uy:flex uy:flex-col uy:transition",
+      "uy:w-full uy:px-150 uy:py-100",
+      "uy:rounded-50 uy:cursor-pointer",
+      "uy:hover:bg-surface-neutral-hover",
+      "uy:active:bg-surface-neutral-pressed",
+      "uy:focus-visible:outline uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2",
+      "uy:data-[active-item=true]:outline uy:data-[active-item=true]:outline-2 uy:data-[active-item=true]:outline-utility-focus-ring uy:data-[active-item=true]:outline-offset-2"
+    ],
+    label: "uy:inline-flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
+    helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-300"
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "uy:cursor-not-allowed!",
+        label: "uy:text-content-neutral-disabled"
+      },
+      false: {
+        base: ""
+      }
+    }
+  }
+});
+function w({
+  isDisabled: i
+}) {
+  return /* @__PURE__ */ e(
+    S,
+    {
+      render: (t) => /* @__PURE__ */ e(
+        k,
+        {
+          isSelected: "children" in t && !!t.children,
+          isDisabled: i,
+          "data-dd-privacy": "hidden"
+        }
+      )
+    }
+  );
+}
+function r({
+  value: i,
+  children: t,
+  isDisabled: u,
+  helperText: l,
+  autoFocus: n = !1,
+  ...a
+}, s) {
+  const o = C(), c = b(I), { base: y, label: d, helperText: f } = O({ isDisabled: u });
+  return /* @__PURE__ */ v(
+    x,
+    {
+      "data-dd-privacy": "mask",
+      ...a,
+      ref: s,
+      id: o,
+      key: o,
+      value: String(i),
+      disabled: u,
+      className: y(),
+      autoFocus: n,
+      focusOnHover: !1,
+      "aria-describedby": l ? `${o}-helper-text` : void 0,
+      render: c.isSearchable ? /* @__PURE__ */ e(h, {}) : void 0
+    },
+    /* @__PURE__ */ m("div", { className: d(), children: [
+      /* @__PURE__ */ e(w, { isDisabled: u }),
+      t
+    ] }),
+    l && /* @__PURE__ */ e("span", { id: `${o}-helper-text`, className: f(), children: l })
+  );
+}
+r.displayName = "MultiSelectOption";
+const R = p(r);
+export {
+  R as MultiSelectOption
+};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.js

@@ -0,0 +1,65 @@
+import { jsx as e, jsxs as r, Fragment as m } from "react/jsx-runtime";
+import { memo as b, useContext as f } from "react";
+import { SelectPopover as h, Combobox as v, ComboboxList as x } from "@ariakit/react";
+import { tv as i } from "tailwind-variants";
+import { Icon as g } from "../../icon/Icon.js";
+import { MultiSelectContext as w } from "../Multiselect.context.js";
+const S = i({
+  slots: {
+    base: "uy:shadow-floating uy:absolute uy:top-full uy:left-0 uy:z-50 uy:w-full uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-auto uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:outline-none",
+    list: "uy:p-100"
+  }
+}), N = i({
+  slots: {
+    wrapper: "uy:sticky uy:top-0 uy:bg-surface-neutral uy:pt-100 uy:px-100",
+    base: "uy:flex uy:w-full uy:gap-100 uy:h-500 uy:border uy:border-solid uy:rounded-75 uy:py-100 uy:border-border-form-enabled uy:bg-surface-form-enabled uy:px-150 uy:typography-body uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
+    input: "uy:focus-visible:outline-none",
+    divider: "uy:my-100 uy:border-t uy:border-border-neutral"
+  }
+});
+function C({
+  children: t,
+  ...s
+}) {
+  const l = f(w), { base: n, list: u } = S(), { base: a, input: y, wrapper: c, divider: d } = N(), { onBlur: o, ...p } = s;
+  return /* @__PURE__ */ e(
+    h,
+    {
+      portal: !0,
+      sameWidth: !0,
+      unmountOnHide: !0,
+      className: n(),
+      onClose: () => o == null ? void 0 : o(),
+      ...p,
+      children: l.isSearchable ? /* @__PURE__ */ r(m, { children: [
+        /* @__PURE__ */ r("div", { className: c(), children: [
+          /* @__PURE__ */ r("div", { className: a(), children: [
+            /* @__PURE__ */ e(
+              g,
+              {
+                src: "MagnifyingGlassOutlined",
+                color: "content.neutral.lowest",
+                "aria-hidden": !0
+              }
+            ),
+            /* @__PURE__ */ e(
+              v,
+              {
+                autoSelect: !0,
+                placeholder: "Search...",
+                className: y()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("hr", { className: d() })
+        ] }),
+        /* @__PURE__ */ e(x, { className: u(), children: t })
+      ] }) : /* @__PURE__ */ e("div", { className: u(), children: t })
+    }
+  );
+}
+const M = b(C);
+M.displayName = "MultiSelectPopover";
+export {
+  M as MultiSelectPopover
+};

package/dist/esm/components/multi-select-field/MultiSelectField.js

@@ -0,0 +1,82 @@
+import { jsxs as M, jsx as t } from "react/jsx-runtime";
+import { forwardRef as P } from "react";
+import { useFormContext as T } from "react-hook-form";
+import { tv as g } from "tailwind-variants";
+import { FormField as L } from "../form-field/FormField.js";
+import { FormControl as R } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as k } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as q } from "../form-field/parts/FormLabel.js";
+import { MultiSelect as u } from "../multi-select/MultiSelect.js";
+const v = g({
+  base: "uy:flex uy:flex-col uy:gap-100"
+});
+function w(e, i) {
+  const { control: l, setValue: f } = T(), {
+    name: o,
+    label: x,
+    helperText: n,
+    feedbackText: F,
+    contextualLink: h,
+    isRequired: p,
+    isInvalid: b,
+    isLoading: m,
+    isDisabled: c,
+    isReadOnly: s,
+    requiredVariant: S,
+    children: a,
+    onClearButtonPress: r,
+    ...y
+  } = e, I = {
+    isRequired: p,
+    isInvalid: b,
+    isLoading: m,
+    isDisabled: c,
+    isReadOnly: s
+  }, V = "items" in e && "getItemValue" in e, d = {
+    onClearButtonPress: () => {
+      f(o, /* @__PURE__ */ new Set()), r == null || r();
+    },
+    placeholder: e.placeholder,
+    isSearchable: e.isSearchable,
+    maxVisibleItems: e.maxVisibleItems,
+    isDisabled: c,
+    isReadOnly: s,
+    isLoading: m,
+    renderValue: e.renderValue
+  };
+  return /* @__PURE__ */ M(
+    L,
+    {
+      control: l,
+      name: o,
+      className: v(),
+      ...I,
+      children: [
+        /* @__PURE__ */ t(q, { requiredVariant: S, children: x }),
+        n && /* @__PURE__ */ t(k, { children: n }),
+        /* @__PURE__ */ t(R, { children: V ? (
+          // @ts-expect-error - Type system cannot fully express this but it works correctly at runtime
+          /* @__PURE__ */ t(
+            u,
+            {
+              ...y,
+              ...d,
+              ref: i,
+              children: a
+            }
+          )
+        ) : /* @__PURE__ */ t(u, { ...d, ref: i, children: a }) }),
+        /* @__PURE__ */ t(j, { children: F }),
+        h
+      ]
+    }
+  );
+}
+const C = P(function(i, l) {
+  return w(i, l);
+});
+C.displayName = "MultiSelectField";
+export {
+  C as MultiSelectField
+};

package/dist/esm/components/nav/Nav.js

@@ -0,0 +1,28 @@
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import n from "../../hooks/use-id.js";
+function o({ children: e, title: y, ...s }) {
+  const l = `nav-title-${n()}`;
+  return /* @__PURE__ */ u(
+    "nav",
+    {
+      ...s,
+      className: "uy:flex uy:flex-col uy:gap-50 uy:min-w-[264px]",
+      "aria-labelledby": l,
+      children: [
+        /* @__PURE__ */ a(
+          "h3",
+          {
+            id: l,
+            className: "uy:typography-body-strong uy:py-100 uy:px-150",
+            children: y
+          }
+        ),
+        /* @__PURE__ */ a("ul", { className: "uy:flex uy:flex-col uy:gap-50 uy:list-none", children: e })
+      ]
+    }
+  );
+}
+o.displayName = "Nav";
+export {
+  o as Nav
+};