@dmsi/wedgekit-react 1.0.1 → 2.0.1

package/dist/components/Button.js

@@ -0,0 +1,137 @@
+import { jsxs as $, jsx as g } from "react/jsx-runtime";
+import { clsx as t } from "../node_modules/clsx/dist/clsx.js";
+import { paddingUsingComponentGap as z, componentPaddingMinus2pxBorder as E, componentGap as M, baseTransition as T, componentPaddingXUsingComponentGap as X, typography as A } from "../classNames.js";
+import { Spinner as D } from "./Spinner.js";
+function L({
+  variant: a = "primary",
+  as: c = "button",
+  block: v,
+  leftIcon: n,
+  rightIcon: d,
+  className: m,
+  classNameLabel: x,
+  disabled: b = !1,
+  children: s,
+  iconOnly: i = !1,
+  colorClassName: r,
+  href: l,
+  id: e,
+  testid: o,
+  isLoading: u,
+  fontNormal: h = !1,
+  ...p
+}) {
+  const k = a === "primary" && t(
+    r?.trim() ? r : "text-text-on-action-primary-normal",
+    "bg-background-action-primary-normal border-background-action-primary-normal",
+    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
+    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
+    "active:bg-background-action-primary-active active:border-background-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
+  ), f = a === "secondary" && t(
+    r?.trim() ? r : "text-text-action-primary-normal",
+    "bg-background-action-secondary-normal border-border-action-normal",
+    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
+  ), S = a === "tertiary" && t(
+    "bg-transparent border-transparent",
+    i ? r?.trim() ? r : "text-icon-action-primary-normal" : r?.trim() ? r : "text-text-action-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  ), V = a === "quarternary-outlined" && t(
+    "bg-transparent border-transparent",
+    i ? r?.trim() ? r : "text-icon-action-primary-normal" : r?.trim() ? r : "text-text-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-transparent hover:border-border-primary-normal hover:text-text-primary-normal",
+    "focus:bg-transparent focus:border-border-primary-normal focus:text-text-primary-normal focus:outline-0",
+    "active:bg-transparent active:border-transparent active:text-text-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  ), w = a === "primary-critical" && t(
+    r?.trim() ? r : "text-text-on-action-primary-normal",
+    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
+    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
+    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
+    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
+    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
+  ), j = a === "secondary-critical" && t(
+    r?.trim() ? r : "text-text-action-critical-normal",
+    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
+    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
+  ), G = a === "tertiary-critical" && t(
+    r?.trim() ? r : "text-text-action-critical-normal",
+    "bg-transparent border-transparent text-text-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
+  ), q = a === "navigation" && t(
+    r?.trim() ? r : "text-text-action-primary-normal",
+    "bg-transparent",
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:text-text-action-primary-normal",
+    "flex-col",
+    z
+  ), B = a !== "navigation" && t("border-2 flex-row", E, M), P = t(
+    b ? "cursor-default" : "cursor-pointer",
+    v ? "w-full" : "w-fit",
+    T,
+    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
+    k,
+    f,
+    S,
+    V,
+    w,
+    j,
+    G,
+    q,
+    B,
+    m
+  ), U = t(
+    "min-h-6 flex items-center justify-center",
+    x,
+    h && "font-normal!",
+    X,
+    A.buttonLabel
+  ), y = l && !c ? "a" : c;
+  return /* @__PURE__ */ $(
+    y,
+    {
+      id: e,
+      "data-testid": o,
+      type: y === "button" ? "button" : void 0,
+      className: P,
+      ...p,
+      onClick: p.onClick,
+      disabled: b,
+      href: l,
+      "data-theme": a === "navigation" ? "brand" : void 0,
+      children: [
+        n && n,
+        u && /* @__PURE__ */ g(D, { size: "small" }),
+        !i && !u && s && /* @__PURE__ */ g(
+          "span",
+          {
+            id: e ? `${e}-label` : void 0,
+            "data-testid": o ? `${o}-label` : void 0,
+            className: U,
+            children: s
+          }
+        ),
+        d && d
+      ]
+    }
+  );
+}
+export {
+  L as Button
+};

package/dist/components/CalendarRange.js

@@ -0,0 +1,405 @@
+import { jsx as r, jsxs as U } from "react/jsx-runtime";
+import { clsx as u } from "../node_modules/clsx/dist/clsx.js";
+import { layoutGap as B, layoutPaddding as at, componentPadding as _, typography as Y } from "../classNames.js";
+import { Icon as H } from "./Icon.js";
+import ot, { useState as $, useEffect as J, useRef as K } from "react";
+import { Temporal as f } from "../node_modules/@js-temporal/polyfill/dist/index.esm.js";
+import { Menu as Q } from "./Menu.js";
+import { MenuOption as R } from "./MenuOption.js";
+import { Button as z } from "./Button.js";
+function ht(h) {
+  return h.dayOfWeek === 6 || h.dayOfWeek === 7;
+}
+function it({
+  date: h,
+  isInMonth: y,
+  isToday: x,
+  isSelected: o,
+  inRange: n,
+  isDisabled: i,
+  isRangeStart: d,
+  isRangeEnd: p,
+  onClick: b,
+  onMouseEnter: c,
+  onMouseLeave: j,
+  cellPadding: k = "",
+  isRangeDisabled: l = !1,
+  id: v,
+  testid: N,
+  ...g
+}) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      ...g,
+      id: v,
+      "data-testid": N,
+      className: u(
+        "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
+        Y.caption,
+        k,
+        !x && !o && !n && !i && !d && !p && "border-transparent active:bg-background-primary-normal",
+        !y && "border-transparent",
+        // Today: subtle border ring
+        x && !o && !n && "rounded-full border-border-primary-normal hover:rounded-base hover:border-transparent active:rounded-full active:bg-transparent active:border-border-primary-normal",
+        // Selected: Figma blue, white text, strong shadow
+        o && "bg-background-action-primary-normal text-text-on-action-primary-normal border-border-action-normal z-10",
+        !o && !n && "rounded-base",
+        // When range is disabled OR when only 'from' is selected (no range yet), apply rounded corners
+        (l || !n && o) && "rounded-base",
+        n && o && "hover:border-border-action-hover hover:bg-background-action-primary-hover active:text-text-on-action-primary-active active:bg-background-action-primary-active",
+        // In range: Figma light blue background
+        n && !o && "bg-background-action-secondary-hover text-text-primary-normal border-border-action-normal border-x-0 active:bg-background-action-secondary-hover active:border-border-action-active active:text-text-action-primary-active hover:border-border-action-hover",
+        // Disabled: Figma gray, no pointer, no hover
+        i && !n ? "text-text-primary-disabled bg-transparent pointer-events-none opacity-40 border-transparent" : [
+          !o && "text-text-primary-normal",
+          !o && "hover:bg-background-action-secondary-hover",
+          "cursor-pointer",
+          // Figma hover: blue bg, blue text (or red text if selected)
+          !o && "hover:bg-action-100 hover:text-text-action-primary-hover",
+          // Figma active: darker blue bg, white text
+          !o && !n && "active:bg-transparent active:text-text-action-primary-active",
+          // Figma focus: ring
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-400"
+        ],
+        d && "rounded-l",
+        p && "rounded-r"
+      ),
+      tabIndex: i ? -1 : 0,
+      "aria-disabled": i,
+      onClick: () => !i && y && b(),
+      onMouseEnter: () => y && c(),
+      onMouseLeave: () => y && j(),
+      children: y ? h.day : ""
+    }
+  );
+}
+function bt({
+  from: h,
+  to: y,
+  onChange: x,
+  onPendingFromChange: o,
+  isDateAvailable: n,
+  mode: i = "double",
+  cardStyle: d = !1,
+  disableRange: p = !1,
+  id: b,
+  testid: c
+}) {
+  const j = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], k = (t) => {
+    if (t)
+      try {
+        return typeof t == "number" ? f.PlainDate.from(new Date(t).toISOString().slice(0, 10)) : typeof t == "string" ? f.PlainDate.from(t) : void 0;
+      } catch (e) {
+        return console.error("Invalid date format:", t, e), f.Now.plainDateISO();
+      }
+  }, l = k(h), v = k(y), N = f.Now.plainDateISO(), [g, W] = $(
+    l ?? N.with({ day: 1 })
+  ), [E, S] = $("from"), [m, T] = $(void 0), [O, q] = $(void 0);
+  J(() => {
+    l ? W(l.with({ day: 1 })) : v && W(v.with({ day: 1 }));
+  }, [h, y]), J(() => {
+    l && v && (S("from"), T(void 0), q(void 0));
+  }, [h, y]);
+  function C(t) {
+    const e = g.add({ months: t }).with({ day: 1 }), w = e.daysInMonth, M = e.dayOfWeek % 7;
+    return {
+      name: e.toLocaleString("en-US", { month: "long" }),
+      year: e.year,
+      days: w,
+      firstDayOffset: M,
+      date: e
+    };
+  }
+  function G(t) {
+    const e = g.with({ month: t }).with({ day: 1 }), w = e.daysInMonth, M = e.dayOfWeek % 7;
+    return {
+      name: e.toLocaleString("en-US", { month: "long" }),
+      year: e.year,
+      days: w,
+      firstDayOffset: M,
+      date: e
+    };
+  }
+  function I(t) {
+    if (!(n && !n(t))) {
+      if (i === "single" && p) {
+        x && x(t.toString(), t.toString());
+        return;
+      }
+      if (E === "from")
+        T(t), S("to"), q(void 0), o?.(t.toString());
+      else if (m) {
+        if (x) {
+          const [e, w] = f.PlainDate.compare(t, m) < 0 ? [t, m] : [m, t];
+          x(e.toString(), w.toString());
+        }
+        T(void 0), S("from"), q(void 0);
+      }
+    }
+  }
+  function L(t) {
+    if (i === "single" && p)
+      return !1;
+    if (m && E === "to" && O) {
+      const [e, w] = f.PlainDate.compare(O, m) < 0 ? [O, m] : [m, O];
+      return f.PlainDate.compare(t, e) >= 0 && f.PlainDate.compare(t, w) <= 0;
+    }
+    return !m && l && v ? f.PlainDate.compare(t, l) >= 0 && f.PlainDate.compare(t, v) <= 0 : !1;
+  }
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      id: b,
+      "data-testid": c,
+      className: u(
+        "relative rounded-base w-fit",
+        d ? "bg-background-grouped-primary-normal" : "bg-background-transparent",
+        at,
+        B,
+        d && "shadow-4",
+        // baseTransition,
+        "overflow-hidden"
+      ),
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: u(
+            "flex flex-row items-start justify-start bg-background-transparent overflow-clip",
+            B
+          ),
+          children: (i === "double" ? [0, 1] : [0]).map((t, e) => /* @__PURE__ */ r(
+            ct,
+            {
+              getMonthData: C,
+              getMonthDataWith: G,
+              offset: t,
+              idx: e,
+              id: b,
+              testid: c,
+              baseMonth: g,
+              setBaseMonth: W,
+              mode: i,
+              pendingFrom: m,
+              weekDays: j,
+              fromDate: l,
+              toDate: v,
+              isDateAvailable: n,
+              disableRange: p,
+              hoveredDate: O,
+              isInRange: L,
+              today: N,
+              setHoveredDate: q,
+              handleDayClick: I
+            },
+            e
+          ))
+        }
+      )
+    }
+  );
+}
+function ct({
+  getMonthData: h,
+  getMonthDataWith: y,
+  offset: x,
+  idx: o,
+  id: n,
+  testid: i,
+  baseMonth: d,
+  setBaseMonth: p,
+  mode: b,
+  pendingFrom: c,
+  weekDays: j,
+  fromDate: k,
+  toDate: l,
+  isDateAvailable: v,
+  disableRange: N,
+  hoveredDate: g,
+  isInRange: W,
+  today: E,
+  setHoveredDate: S,
+  handleDayClick: m
+}) {
+  const T = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], O = Array.from({ length: 100 }).map(
+    (a, P) => d.year - 50 + P
+  ), [q, C] = $(!1), [G, I] = $(!1), L = K(null), t = K(null), e = h(x), w = 42, M = e.firstDayOffset;
+  return /* @__PURE__ */ U(ot.Fragment, { children: [
+    /* @__PURE__ */ U(
+      "div",
+      {
+        className: u("flex flex-col"),
+        children: [
+          /* @__PURE__ */ U(
+            "div",
+            {
+              className: u(
+                "flex flex-row items-center justify-between",
+                Y.label,
+                "text-text-action-primary-normal"
+              ),
+              children: [
+                o === 0 ? /* @__PURE__ */ r(
+                  z,
+                  {
+                    iconOnly: !0,
+                    leftIcon: /* @__PURE__ */ r(H, { name: "chevron_left" }),
+                    variant: "quarternary-outlined",
+                    id: n ? `${n}-prev-month-button` : void 0,
+                    "data-testid": i ? `${i}-prev-month-button` : void 0,
+                    type: "button",
+                    className: u(
+                      "flex items-center justify-center text-icon-action-primary-normal hover:bg-background-action-secondary-hover! hover:border-transparent! hover:text-icon-action-secondary-hover! active:bg-background-action-secondary-active! active:text-icon-action-secondary-active!",
+                      _
+                    ),
+                    "aria-label": "Previous month",
+                    onClick: () => p(d.subtract({ months: 1 }))
+                  }
+                ) : /* @__PURE__ */ r("span", { className: u(_, "mr-1") }),
+                /* @__PURE__ */ U("div", { children: [
+                  /* @__PURE__ */ r(
+                    z,
+                    {
+                      variant: "tertiary",
+                      ref: (a) => {
+                        L.current = a;
+                      },
+                      type: "button",
+                      onClick: () => {
+                        C(!0), I(!1);
+                      },
+                      className: "font-semibold text-text-action-primary-normal text-[14px] py-[2px] pr-0!",
+                      children: e.name
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    Q,
+                    {
+                      show: q,
+                      positionTo: L,
+                      setShow: () => C(!1),
+                      children: T.map((a) => [a, y(a + 1)]).map(([a, P]) => /* @__PURE__ */ r(
+                        R,
+                        {
+                          selected: d.month === a + 1,
+                          onClick: () => {
+                            p(d.with({ month: a + 1 })), C(!1);
+                          },
+                          children: P.name
+                        },
+                        P.name
+                      ))
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    z,
+                    {
+                      variant: "tertiary",
+                      ref: (a) => {
+                        t.current = a;
+                      },
+                      type: "button",
+                      onClick: () => {
+                        I(!0), C(!1);
+                      },
+                      className: "font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate pl-0!",
+                      children: e.year
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    Q,
+                    {
+                      show: G,
+                      positionTo: t,
+                      setShow: () => I(!1),
+                      children: O.map((a) => /* @__PURE__ */ r(
+                        R,
+                        {
+                          selected: d.year === a,
+                          onClick: () => {
+                            p(d.with({ year: a })), I(!1);
+                          },
+                          children: a
+                        },
+                        a
+                      ))
+                    }
+                  )
+                ] }),
+                b !== "double" || o === 1 ? /* @__PURE__ */ r(
+                  z,
+                  {
+                    iconOnly: !0,
+                    rightIcon: /* @__PURE__ */ r(H, { name: "chevron_right" }),
+                    variant: "quarternary-outlined",
+                    id: n ? `${n}-next-month-button` : void 0,
+                    "data-testid": i ? `${i}-next-month-button` : void 0,
+                    type: "button",
+                    className: u(
+                      "flex items-center justify-center text-icon-action-primary-normal hover:bg-background-action-secondary-hover! hover:border-transparent! hover:text-icon-action-secondary-hover! active:bg-background-action-secondary-active! active:text-icon-action-secondary-active!",
+                      _
+                    ),
+                    "aria-label": "Next month",
+                    onClick: () => p(d.add({ months: 1 }))
+                  }
+                ) : /* @__PURE__ */ r("span", { className: u(_, "ml-1") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: u("grid grid-cols-7"), children: j.map((a) => /* @__PURE__ */ r(
+            "span",
+            {
+              className: u(
+                Y.caption,
+                "text-text-secondary-normal text-center",
+                "w-10"
+              ),
+              children: a
+            },
+            a
+          )) }),
+          /* @__PURE__ */ r("div", { className: u("grid grid-cols-7"), children: Array.from({ length: w }).map((a, P) => {
+            const A = P - M + 1, s = e.date.with({ day: 1 }).add({
+              days: P - M
+            }), D = A > 0 && A <= e.days, V = D && s.equals(E), X = D && (!c && k && s.equals(k) || !c && l && s.equals(l) || c && s.equals(c)), Z = D && W(s), F = !D || (v ? !v(s) : !1), tt = g && c && f.PlainDate.compare(g, c) < 0, et = g && c && f.PlainDate.compare(g, c) >= 0, rt = b === "single" && N ? !1 : !c && D && k && s.equals(k) || et && s.equals(c), nt = b === "single" && N ? !1 : !c && D && l && s.equals(l) || tt && s.equals(c);
+            return /* @__PURE__ */ r(
+              it,
+              {
+                id: n ? `${n}-date-${s.toString()}` : void 0,
+                testid: i ? `${i}-date-${s.toString()}` : void 0,
+                date: s,
+                isInMonth: !!D,
+                isToday: !!V,
+                isSelected: !!X,
+                inRange: !!Z,
+                isDisabled: !!F,
+                onClick: () => m(s),
+                onMouseEnter: () => S(s),
+                onMouseLeave: () => S(void 0),
+                isRangeStart: !!rt,
+                isRangeEnd: !!nt,
+                isRangeDisabled: b === "single" && N,
+                cellPadding: _
+              },
+              P
+            );
+          }) })
+        ]
+      }
+    ),
+    b === "double" && o === 0 && /* @__PURE__ */ r(
+      "div",
+      {
+        className: u(
+          "self-stretch bg-border-primary-normal rounded-base",
+          // 1px width, full height, matches Figma divider
+          "w-px"
+        )
+      }
+    )
+  ] }, e.name + e.year);
+}
+export {
+  bt as CalendarRange,
+  ht as isWeekend
+};

package/dist/components/Caption.js

@@ -0,0 +1,99 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { clsx as f } from "../node_modules/clsx/dist/clsx.js";
+import { typography as d } from "../classNames.js";
+import { Icon as m } from "./Icon.js";
+function N({
+  className: r,
+  children: e,
+  as: c = "span",
+  style: n = "default",
+  color: t,
+  align: x,
+  id: a,
+  testid: i,
+  marginTopDesktop: s,
+  ...l
+}) {
+  return /* @__PURE__ */ p("div", { id: a, "data-testid": i, className: "flex gap-1", children: [
+    /* @__PURE__ */ o(
+      u,
+      {
+        id: a,
+        testid: i,
+        style: n,
+        size: 16,
+        className: "mt-[3px] desktop:mt-0"
+      }
+    ),
+    /* @__PURE__ */ o(
+      c,
+      {
+        id: a ? `${a}-text` : void 0,
+        "data-testid": i ? `${i}-text` : void 0,
+        className: f(
+          d.caption.replace("text-text-primary-normal", ""),
+          (n === "default" || n === "info") && "text-text-secondary-normal",
+          n === "success" && "text-text-success-normal",
+          n === "warning" && "text-text-warning-normal",
+          n === "error" && "text-text-critical-normal",
+          x === "left" && "text-left",
+          x === "center" && "text-center",
+          x === "right" && "text-right",
+          r,
+          s && "desktop:mt-px"
+        ),
+        ...l,
+        style: {
+          color: t ? `var(--color-${t})` : void 0
+        },
+        children: e
+      }
+    )
+  ] });
+}
+const u = ({
+  style: r,
+  size: e,
+  className: c,
+  id: n,
+  testid: t
+}) => r === "success" ? /* @__PURE__ */ o("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ o(
+  m,
+  {
+    id: n ? `${n}-icon` : void 0,
+    testid: t ? `${t}-icon` : void 0,
+    className: c,
+    name: "check_circle",
+    size: e
+  }
+) }) : r === "warning" ? /* @__PURE__ */ o("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ o(
+  m,
+  {
+    id: n ? `${n}-icon` : void 0,
+    testid: t ? `${t}-icon` : void 0,
+    className: c,
+    name: "warning",
+    size: e
+  }
+) }) : r === "error" ? /* @__PURE__ */ o("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ o(
+  m,
+  {
+    id: n ? `${n}-icon` : void 0,
+    testid: t ? `${t}-icon` : void 0,
+    className: c,
+    name: "info",
+    size: e
+  }
+) }) : r === "info" ? /* @__PURE__ */ o("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ o(
+  m,
+  {
+    id: n ? `${n}-icon` : void 0,
+    testid: t ? `${t}-icon` : void 0,
+    className: c,
+    name: "info",
+    size: e
+  }
+) }) : null;
+export {
+  N as Caption
+};

package/dist/components/Card.js

@@ -0,0 +1,50 @@
+import { jsx as k } from "react/jsx-runtime";
+import { clsx as l } from "../node_modules/clsx/dist/clsx.js";
+function h(o) {
+  const {
+    children: g,
+    selected: m,
+    testid: r,
+    padding: p,
+    paddingX: a,
+    paddingY: t,
+    paddingBottom: i,
+    paddingTop: e,
+    paddingLeft: n,
+    paddingRight: s,
+    elevation: d = 4,
+    ...c
+  } = o, y = o.as || "div", u = l(
+    // Backward compatibility: if no new padding props provided keep existing class.
+    !(p !== void 0 || a !== void 0 || t !== void 0 || i !== void 0 || e !== void 0 || n !== void 0 || s !== void 0) && "p-desktop-layout-padding",
+    // New responsive spacing tokens (mirrors Stack for layout sizing)
+    p && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+    a && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+    t && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+    i && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+    e && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+    n && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+    s && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding"
+  );
+  return /* @__PURE__ */ k(
+    y,
+    {
+      ...c,
+      "data-testid": r,
+      className: l(
+        "rounded-sm",
+        u,
+        m ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
+        d === 0 && "shadow-none",
+        d === 2 && "shadow-2",
+        d === 4 && "shadow-4",
+        d === 16 && "shadow-16",
+        c.className
+      ),
+      children: g
+    }
+  );
+}
+export {
+  h as Card
+};