@dmsi/wedgekit-react 1.0.1 → 2.0.1

package/dist/components/MobileNavMenu.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsxs as a, Fragment as N, jsx as n } from "react/jsx-runtime";
+import { useState as g, useRef as $, useLayoutEffect as I, useEffect as w } from "react";
+import { createPortal as j } from "react-dom";
+import { NestedMenu as A } from "./NestedMenu.js";
+import { MenuOption as D } from "./MenuOption.js";
+import { Icon as m } from "./Icon.js";
+import { Stack as k } from "./Stack.js";
+import { Button as H } from "./Button.js";
+import { Heading1 as L } from "./Heading.js";
+import { Theme as R } from "./Theme.js";
+import { useMounted as X } from "../hooks/useMounted.js";
+import { useKeydown as Y } from "../hooks/useKeydown.js";
+import { findDocumentRoot as K } from "../utils.js";
+import { clsx as v } from "../node_modules/clsx/dist/clsx.js";
+function te({
+  id: c,
+  testid: o,
+  currentMenu: i,
+  open: r,
+  onClose: l,
+  onNavigate: h,
+  direction: b = "left",
+  footer: E,
+  hideFooterOnSubMenu: x = !1,
+  theme: C = "brand",
+  pinnedSubMenuEntry: M
+}) {
+  const [s, d] = g(
+    null
+  ), [y, u] = g(0), z = X(), p = $(null), S = {
+    transform: r ? "translateX(0)" : b === "right" ? "translateX(100%)" : "translateX(-100%)"
+  };
+  I(() => {
+    r && (d(null), u(0));
+  }, [r]), Y(
+    {
+      ArrowUp: () => {
+        const e = i.subEntries?.length || 0;
+        e !== 0 && u((t) => t <= 0 ? e - 1 : t - 1);
+      },
+      ArrowDown: () => {
+        const e = i.subEntries?.length || 0;
+        e !== 0 && u((t) => t >= e - 1 ? 0 : t + 1);
+      },
+      "Enter/Space": () => {
+        const e = (i.subEntries || [])[y];
+        e && f(
+          e,
+          e.subEntries?.length ? "subEntry" : e.onClick ? "onClick" : void 0
+        );
+      }
+    },
+    r && !s
+  ), w(() => {
+    if (!r) return;
+    const e = window.scrollY, t = document.body;
+    return t.style.position = "fixed", t.style.top = `-${e}px`, t.style.left = "0", t.style.right = "0", t.style.overflow = "hidden", t.style.width = "100%", () => {
+      t.style.position = "", t.style.top = "", t.style.left = "", t.style.right = "", t.style.overflow = "", t.style.width = "", window.scrollTo(0, e);
+    };
+  }, [r]), w(() => {
+    const e = (t) => {
+      t.key === "Escape" && l();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [l]);
+  function f(e, t) {
+    if (!e) {
+      d(null);
+      return;
+    }
+    if (e.subEntries?.length && t !== "onClick") {
+      d(e);
+      return;
+    }
+    if (e.onClick && t === "onClick") {
+      h?.(e), e.onClick();
+      return;
+    }
+    e.url && (h?.(e), l());
+  }
+  return z ? j(
+    /* @__PURE__ */ a(N, { children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: v(
+            "fixed inset-0 z-40 bg-black/50",
+            "transition-opacity duration-300",
+            r ? "opacity-100" : "opacity-0 pointer-events-none"
+          ),
+          onClick: l,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          id: c,
+          "data-testid": o,
+          ref: p,
+          role: "dialog",
+          "aria-modal": "true",
+          className: v(
+            "fixed top-0 z-50 h-dvh w-full max-w-sm flex flex-col",
+            "bg-background-grouped-primary-normal overflow-hidden",
+            "transition-transform duration-300 ease-in-out",
+            b === "right" ? "right-0" : "left-0"
+          ),
+          style: S,
+          children: [
+            /* @__PURE__ */ n(R, { theme: C, children: /* @__PURE__ */ a(
+              k,
+              {
+                horizontal: !0,
+                horizontalMobile: !0,
+                padding: !0,
+                sizing: "layout",
+                items: "center",
+                justify: "between",
+                backgroundColor: "background-primary-normal",
+                children: [
+                  /* @__PURE__ */ n(L, { color: "text-primary-normal", children: s?.label ?? i.label }),
+                  /* @__PURE__ */ n(
+                    H,
+                    {
+                      id: c ? `${c}-close-button` : void 0,
+                      testid: o ? `${o}-close-button` : void 0,
+                      iconOnly: !0,
+                      leftIcon: /* @__PURE__ */ n(m, { className: "icon", name: "close", size: 24 }),
+                      variant: "tertiary",
+                      onClick: l
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ a(k, { justify: "between", overflowY: "auto", grow: !0, children: [
+              /* @__PURE__ */ n("div", { className: "my-4", children: s ? /* @__PURE__ */ n(
+                A,
+                {
+                  testid: o ? `${o}-nested-menu` : void 0,
+                  currentMenu: s,
+                  onMenuClick: f,
+                  pinnedEntry: M
+                }
+              ) : (i.subEntries ?? []).map((e, t) => /* @__PURE__ */ n(
+                D,
+                {
+                  testid: o ? `${o}-${e.id}` : void 0,
+                  selected: y === t,
+                  onClick: () => f(
+                    e,
+                    e.subEntries?.length ? "subEntry" : e.onClick ? "onClick" : void 0
+                  ),
+                  before: e.icon ? /* @__PURE__ */ n(m, { name: e.icon }) : void 0,
+                  after: e.subEntries?.length ? /* @__PURE__ */ n(m, { name: "chevron_right", className: "icon", size: 24 }) : void 0,
+                  children: e.label
+                },
+                e.id
+              )) }),
+              (!x || !s) && E
+            ] })
+          ]
+        }
+      )
+    ] }),
+    K(p.current)
+  ) : null;
+}
+export {
+  te as MobileNavMenu
+};

package/dist/components/Modal.d.ts

@@ -14,7 +14,6 @@ type ModalProps = PropsWithChildren<{
     headerIcon?: React.ReactNode;
     headerIconAlign?: "left" | "center" | "right";
     headerIconClassname?: string;
-    fixedHeightScrolling?: boolean;
     customActions?: React.ReactNode;
     headerClassname?: string;
     backgroundColor?: string;
@@ -25,6 +24,6 @@ type ModalProps = PropsWithChildren<{
     }>;
     mobileButtonStack?: boolean;
 }>;
-export declare function Modal({ id, testid, title, open, size, className, children, onClose, onContinue, closeOnBackdropClick, showButtons, hideCloseIcon, headerIcon, headerIconAlign, headerIconClassname, fixedHeightScrolling, customActions, headerClassname, customFooter, noWrapper, titleAs: TitleComponent, mobileButtonStack, }: ModalProps): import('react').ReactPortal | null;
+export declare function Modal({ id, testid, title, open, size, className, children, onClose, onContinue, closeOnBackdropClick, showButtons, hideCloseIcon, headerIcon, headerIconAlign, headerIconClassname, customActions, headerClassname, customFooter, noWrapper, titleAs: TitleComponent, mobileButtonStack, }: ModalProps): import('react').ReactPortal | null;
 export {};
 //# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAW1E,KAAK,UAAU,GAAG,iBAAiB,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC7D,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC,CAAC;AA+EH,wBAAgB,KAAK,CAAC,EACpB,EAAE,EACF,MAAM,EACN,KAAK,EACL,IAAY,EACZ,IAAc,EACd,SAAS,EACT,QAAQ,EACR,OAAO,EACP,UAAU,EACV,oBAA2B,EAC3B,WAAmB,EACnB,aAAqB,EACrB,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,oBAA4B,EAC5B,aAAa,EACb,eAAe,EACf,YAAY,EACZ,SAAS,EACT,OAAO,EAAE,cAAc,EACvB,iBAAyB,GAC1B,EAAE,UAAU,sCAgLZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAU1E,KAAK,UAAU,GAAG,iBAAiB,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC7D,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC,CAAC;AA+EH,wBAAgB,KAAK,CAAC,EACpB,EAAE,EACF,MAAM,EACN,KAAK,EACL,IAAY,EACZ,IAAc,EACd,SAAS,EACT,QAAQ,EACR,OAAO,EACP,UAAU,EACV,oBAA2B,EAC3B,WAAmB,EACnB,aAAqB,EACrB,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,eAAe,EACf,YAAY,EACZ,SAAS,EACT,OAAO,EAAE,cAAc,EACvB,iBAAyB,GAC1B,EAAE,UAAU,sCA0KZ"}

package/dist/components/Modal.js

@@ -0,0 +1,201 @@
+"use client";
+import { jsx as m, jsxs as I } from "react/jsx-runtime";
+import { clsx as L } from "../node_modules/clsx/dist/clsx.js";
+import { useRef as x, useEffect as w, useCallback as y } from "react";
+import { ModalHeader as O } from "./ModalHeader.js";
+import { ModalContent as Y } from "./ModalContent.js";
+import { ModalButtons as K } from "./ModalButtons.js";
+import { ModalScrim as q } from "./ModalScrim.js";
+import { createPortal as B } from "react-dom";
+import { findDocumentRoot as G } from "../utils.js";
+import { useMounted as J } from "../hooks/useMounted.js";
+import N from "../node_modules/react-use/esm/usePrevious.js";
+const Q = (e, t = 300) => e.animate(
+  [
+    { opacity: 0, transform: "scale(0.95)" },
+    { opacity: 1, transform: "scale(1)" }
+  ],
+  {
+    duration: t,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    fill: "both"
+  }
+), U = (e, t = 200) => e.animate(
+  [
+    { opacity: 1, transform: "scale(1)" },
+    { opacity: 0, transform: "scale(0.95)" }
+  ],
+  {
+    duration: t,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+), V = (e, t = 300) => e.animate([{ opacity: 0 }, { opacity: 1 }], {
+  duration: t,
+  easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  fill: "both"
+}), W = (e, t = 200) => e.animate([{ opacity: 1 }, { opacity: 0 }], {
+  duration: t,
+  easing: "ease-in-out",
+  fill: "both"
+}), X = (e, t) => {
+  let a = 0;
+  e.forEach((r) => {
+    r.onfinish = () => {
+      a += 1, a === e.length && t();
+    };
+  });
+}, $ = {
+  small: {
+    sizeClass: "h-fit max-h-dvh desktop:max-w-120 rounded-sm"
+  },
+  medium: {
+    sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-dvh desktop:w-full max-w-240 desktop:rounded-sm"
+  },
+  large: {
+    sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-dvh desktop:w-full max-w-240 desktop:rounded-sm"
+  },
+  "x-large": {
+    sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-dvh desktop:w-full max-w-240 desktop:rounded-sm"
+  },
+  screen: {
+    sizeClass: "w-screen h-dvh max-w-screen !rounded-none"
+  }
+};
+function ce({
+  id: e,
+  testid: t,
+  title: a,
+  open: r = !1,
+  size: l = "small",
+  className: g,
+  children: u,
+  onClose: n,
+  onContinue: M,
+  closeOnBackdropClick: v = !0,
+  showButtons: z = !1,
+  hideCloseIcon: C = !1,
+  headerIcon: A,
+  headerIconAlign: E,
+  headerIconClassname: P,
+  customActions: k,
+  headerClassname: R,
+  customFooter: D,
+  noWrapper: F,
+  titleAs: S,
+  mobileButtonStack: T = !1
+}) {
+  const p = J(), c = x(null), i = x(null), d = N(r);
+  w(() => {
+    if (p) {
+      if (!c.current || !i.current) {
+        console.error("Modal or background reference is not set.");
+        return;
+      }
+      if (d !== void 0)
+        if (d && !r) {
+          const s = U(c.current), o = W(i.current);
+          X([s, o], () => {
+            n && n();
+          });
+        } else !d && r && (Q(c.current), V(i.current));
+    }
+  }, [p, n, r, d]);
+  const h = y(
+    (s) => {
+      s.key === "Escape" && n && (s.preventDefault(), n());
+    },
+    [n]
+  ), f = y(() => {
+    n && n();
+  }, [n]);
+  w(() => (r && document.addEventListener("keyup", h), () => {
+    document.removeEventListener("keyup", h);
+  }), [r, h]), w(() => {
+    if (!r) return;
+    const s = window.scrollY, o = document.body;
+    return o.style.position = "fixed", o.style.top = `-${s}px`, o.style.left = "0", o.style.right = "0", o.style.overflow = "hidden", o.style.width = "100%", () => {
+      o.style.position = "", o.style.top = "", o.style.left = "", o.style.right = "", o.style.overflow = "", o.style.width = "", window.scrollTo(0, s);
+    };
+  }, [r]);
+  const { sizeClass: j } = $[l] ?? $.small, H = y(
+    (s) => {
+      const o = s.target, b = s.currentTarget;
+      if (b.contains(o) && b !== o) {
+        s.stopPropagation();
+        return;
+      }
+      r && v && f();
+    },
+    [r, v, f]
+  );
+  return p ? B(
+    /* @__PURE__ */ m(
+      q,
+      {
+        id: e ? `${e}-scrim` : void 0,
+        testid: t ? `${t}-scrim` : void 0,
+        size: l,
+        ref: i,
+        show: r,
+        onClick: H,
+        children: /* @__PURE__ */ I(
+          "div",
+          {
+            id: e,
+            "data-testid": t,
+            ref: c,
+            className: L(
+              "shadow-md flex flex-col overflow-hidden w-full opacity-0",
+              l !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
+              g,
+              !g?.includes("bg-") && "bg-background-grouped-primary-normal",
+              j
+            ),
+            onClick: (s) => s.stopPropagation(),
+            children: [
+              /* @__PURE__ */ m(
+                O,
+                {
+                  id: e ? `${e}-header` : void 0,
+                  testid: t ? `${t}-header` : void 0,
+                  title: a,
+                  onClose: f,
+                  hideCloseIcon: C,
+                  headerIcon: A,
+                  headerIconAlign: E,
+                  headerClassname: R,
+                  headerIconClassname: P,
+                  titleAs: S
+                }
+              ),
+              u && (l !== "screen" || F) ? /* @__PURE__ */ m(
+                Y,
+                {
+                  id: e ? `${e}-content` : void 0,
+                  testid: t ? `${t}-content` : void 0,
+                  children: u
+                }
+              ) : u,
+              z ? D ? k : /* @__PURE__ */ m(
+                K,
+                {
+                  id: e ? `${e}-buttons` : void 0,
+                  testid: t ? `${t}-buttons` : void 0,
+                  onClose: f,
+                  onContinue: M,
+                  customActions: k,
+                  mobileButtonStack: T
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    ),
+    G(i.current)
+  ) : null;
+}
+export {
+  ce as Modal
+};

package/dist/components/ModalButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalButtons.d.ts","sourceRoot":"","sources":["../../src/components/ModalButtons.tsx"],"names":[],"mappings":"AAKA,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,aAAa,EACb,EAAE,EACF,MAAM,EACN,iBAAyB,GAC1B,EAAE,iBAAiB,2CAuCnB"}
+{"version":3,"file":"ModalButtons.d.ts","sourceRoot":"","sources":["../../src/components/ModalButtons.tsx"],"names":[],"mappings":"AAKA,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,aAAa,EACb,EAAE,EACF,MAAM,EACN,iBAAyB,GAC1B,EAAE,iBAAiB,2CAwCnB"}

package/dist/components/ModalButtons.js

@@ -0,0 +1,57 @@
+import { jsx as e, jsxs as m, Fragment as s } from "react/jsx-runtime";
+import { clsx as u } from "../node_modules/clsx/dist/clsx.js";
+import { Button as r } from "./Button.js";
+import { Icon as l } from "./Icon.js";
+import { layoutPaddding as d, layoutGroupGap as f } from "../classNames.js";
+function y({
+  onClose: a,
+  onContinue: i,
+  customActions: t,
+  id: o,
+  testid: n,
+  mobileButtonStack: c = !1
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      id: o,
+      "data-testid": n,
+      className: u(
+        "border-t border-neutral-300 flex",
+        !t && "justify-end",
+        c && "flex-col",
+        d,
+        f
+      ),
+      children: t ?? /* @__PURE__ */ m(s, { children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            id: o ? `${o}-close-button` : void 0,
+            testid: n ? `${n}-close-button` : void 0,
+            variant: "secondary",
+            leftIcon: /* @__PURE__ */ e(l, { name: "close", size: 24 }),
+            onClick: a,
+            className: "max-sm:w-full",
+            children: "Close"
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            id: o ? `${o}-continue-button` : void 0,
+            testid: n ? `${n}-continue-button` : void 0,
+            variant: "primary",
+            leftIcon: /* @__PURE__ */ e(l, { name: "check", size: 24 }),
+            className: "max-sm:w-full",
+            onClick: i,
+            children: "Continue"
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  y as ModalButtons
+};

package/dist/components/ModalContent.d.ts

@@ -1,7 +1,6 @@
 export interface ModalContentProps {
-    fixedHeightScrolling?: boolean;
     id?: string;
     testid?: string;
 }
-export declare function ModalContent({ fixedHeightScrolling, children, id, testid }: React.PropsWithChildren<ModalContentProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ModalContent({ children, id, testid }: React.PropsWithChildren<ModalContentProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ModalContent.d.ts.map

package/dist/components/ModalContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../src/components/ModalContent.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,EAC3B,oBAAoB,EACpB,QAAQ,EACR,EAAE,EACF,MAAM,EACP,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,2CAc5C"}
+{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../src/components/ModalContent.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,MAAM,EACP,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,2CAa5C"}

package/dist/components/ModalContent.js

@@ -0,0 +1,24 @@
+import { jsx as a } from "react/jsx-runtime";
+import { clsx as i } from "../node_modules/clsx/dist/clsx.js";
+import { layoutPaddding as m } from "../classNames.js";
+function f({
+  children: o,
+  id: t,
+  testid: r
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      id: t,
+      "data-testid": r,
+      className: i(
+        "flex-grow min-h-0 overflow-y-auto",
+        m
+      ),
+      children: o
+    }
+  );
+}
+export {
+  f as ModalContent
+};

package/dist/components/ModalHeader.js

@@ -0,0 +1,74 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { Heading2 as y } from "./Heading.js";
+import { Button as v } from "./Button.js";
+import { Icon as x } from "./Icon.js";
+import { layoutGroupGap as l, layoutPaddding as j } from "../classNames.js";
+import { clsx as r } from "../node_modules/clsx/dist/clsx.js";
+function k({
+  title: n,
+  hideCloseIcon: a,
+  headerIcon: c,
+  headerIconAlign: o,
+  onClose: m,
+  id: t,
+  testid: e,
+  headerClassname: f,
+  titleAs: d,
+  headerIconClassname: u
+}) {
+  const p = d || y;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      id: t,
+      "data-testid": e,
+      className: r(
+        "flex items-center",
+        o === void 0 && "justify-between",
+        o === "center" && "justify-center",
+        o === "right" && "justify-end",
+        o === "left" && "justify-start",
+        j,
+        l,
+        f
+      ),
+      children: [
+        /* @__PURE__ */ s("div", { className: r("flex items-center flex-1", l), children: [
+          c,
+          n && /* @__PURE__ */ i(
+            p,
+            {
+              id: t ? `${t}-title` : void 0,
+              testid: e ? `${e}-title` : void 0,
+              as: "p",
+              children: n
+            }
+          )
+        ] }),
+        !a && /* @__PURE__ */ i(
+          v,
+          {
+            id: t ? `${t}-close-button` : void 0,
+            testid: e ? `${e}-close-button` : void 0,
+            iconOnly: !0,
+            variant: "tertiary",
+            onClick: m,
+            leftIcon: /* @__PURE__ */ i(
+              "span",
+              {
+                className: r(
+                  "contents",
+                  u ?? "text-icon-primary-normal"
+                ),
+                children: /* @__PURE__ */ i(x, { name: "close", size: 24 })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  k as ModalHeader
+};

package/dist/components/ModalScrim.js

@@ -0,0 +1,32 @@
+import { jsx as s } from "react/jsx-runtime";
+import { clsx as p } from "../node_modules/clsx/dist/clsx.js";
+function d({
+  show: t = !1,
+  size: o = "small",
+  children: e,
+  onClick: n,
+  ref: i,
+  id: r,
+  testid: a
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      id: r,
+      "data-testid": a,
+      className: p(
+        "overflow-y-auto h-dvh transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
+        !t && " pointer-events-none",
+        o === "small" && "p-4",
+        o === "screen" ? "desktop:p-0" : "desktop:p-4",
+        "inset-0 z-50"
+      ),
+      onMouseDown: n,
+      ref: i,
+      children: e
+    }
+  );
+}
+export {
+  d as ModalScrim
+};

package/dist/components/NavigationTab.js

@@ -0,0 +1,72 @@
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as a } from "../node_modules/clsx/dist/clsx.js";
+import { Button as y } from "./Button.js";
+import { Icon as u } from "./Icon.js";
+function C({
+  id: r,
+  testid: e,
+  label: i,
+  onClick: c,
+  selected: o = !1,
+  className: d,
+  disabled: s = !1,
+  href: t,
+  ...m
+}) {
+  const l = a(
+    // "!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "!text-brand-text-on-action-primary-hover",
+    // "hover:!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "hover:!text-brand-text-on-action-primary-hover",
+    // "active:!text-text-on-action-primary-active", // use this once semantic tokens are available
+    "active:!text-brand-text-on-action-primary-active",
+    "disabled:!text-brand-text-on-action-primary-disabled"
+  ), p = a(
+    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none"
+  ), b = a(
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+  ), v = a(
+    "!bg-brand-200",
+    "hover:!bg-background-on-action-primary-normal",
+    // "hover:!bg-background-action-primary-normal", // use this once semantic tokens are available
+    "active:!bg-background-on-action-primary-active",
+    // "active:!bg-background-action-primary-active", // use this once semantic tokens are available
+    "shadow-nav-tab"
+  ), g = a(
+    "!bg-neutral-000",
+    "hover:!bg-background-on-action-primary-normal",
+    "active:!bg-background-on-action-primary-active"
+  ), x = {
+    "--color-text-on-action-primary-hover": "var(--color-brand-500)",
+    "--color-text-on-action-primary-active": "var(--color-brand-300)"
+  };
+  return /* @__PURE__ */ n(
+    y,
+    {
+      id: r,
+      testid: e,
+      variant: "tertiary-critical",
+      colorClassName: l,
+      className: a(
+        "!border-0 !rounded-b-none h-10 min-w-20 relative",
+        b,
+        p,
+        !o && v,
+        o && g,
+        d
+      ),
+      style: x,
+      classNameLabel: "px-1",
+      rightIcon: /* @__PURE__ */ n(u, { name: "close", size: 16 }),
+      onClick: c,
+      disabled: s,
+      ...m,
+      as: t ? "a" : void 0,
+      href: t,
+      children: i
+    }
+  );
+}
+export {
+  C as NavigationTab
+};