@dmsi/wedgekit-react 2.0.0 → 2.0.2

package/dist/components/SideMenu.js

@@ -0,0 +1,24 @@
+import { jsx as p } from "react/jsx-runtime";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+function l({
+  children: o,
+  cardStyle: a = !1,
+  id: d,
+  testid: t
+}) {
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      id: d,
+      "data-testid": t,
+      className: e(
+        "flex flex-col",
+        a && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding rounded shadow-4 bg-background-primary-normal"
+      ),
+      children: o
+    }
+  );
+}
+export {
+  l as SideMenu
+};

package/dist/components/SideMenuGroup.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs as l, Fragment as x, jsx as t } from "react/jsx-runtime";
+import { clsx as o } from "../node_modules/clsx/dist/clsx.js";
+import { useState as b, useEffect as g } from "react";
+import { Label as h } from "./Label.js";
+import { baseTransition as k } from "../classNames.js";
+import { Stack as y } from "./Stack.js";
+import { Icon as N } from "./Icon.js";
+function A({
+  id: e,
+  testid: a,
+  label: d,
+  groupIndentLevel: r = 1,
+  collapsed: n = !1,
+  disabled: i = !1,
+  children: m
+}) {
+  const [s, c] = b(n);
+  g(() => {
+    c(n);
+  }, [n]);
+  const p = () => {
+    i || c((f) => !f);
+  }, u = i ? o("text-text-action-disabled pointer-events-none") : o("text-text-primary-normal"), v = {
+    "data-disabled": i || null
+  };
+  return /* @__PURE__ */ l(x, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        id: e,
+        "data-testid": a,
+        className: o(
+          "group/sm-group flex rounded cursor-pointer",
+          "bg-transparent",
+          "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+          "active:bg-background-action-secondary-active active:text-text-action-active",
+          k,
+          u
+        ),
+        onClick: p,
+        ...v,
+        children: /* @__PURE__ */ l(
+          y,
+          {
+            id: e ? `${e}-stack` : void 0,
+            horizontal: !0,
+            items: "center",
+            sizing: "component",
+            padding: !0,
+            children: [
+              r === 2 && /* @__PURE__ */ t("div", { className: "pl-6" }),
+              r === 3 && /* @__PURE__ */ t("div", { className: "pl-13" }),
+              r === 4 && /* @__PURE__ */ t("div", { className: "pl-20" }),
+              /* @__PURE__ */ t(
+                N,
+                {
+                  name: "keyboard_arrow_down",
+                  className: o(
+                    "transition duration-100 ease-in-out",
+                    "pointer-events-none",
+                    {
+                      "rotate-180": !s
+                    }
+                  ),
+                  size: 24
+                }
+              ),
+              /* @__PURE__ */ t(h, { id: e ? `${e}-label` : void 0, testid: a ? `${a}-label` : void 0, padded: !0, children: d })
+            ]
+          }
+        )
+      }
+    ),
+    !s && m
+  ] });
+}
+export {
+  A as SideMenuGroup
+};

package/dist/components/SideMenuItem.js

@@ -0,0 +1,79 @@
+import { jsx as e, jsxs as S } from "react/jsx-runtime";
+import { clsx as t } from "../node_modules/clsx/dist/clsx.js";
+import { baseTransition as y, componentPaddingMinus2pxBorder as g } from "../classNames.js";
+import { Stack as f } from "./Stack.js";
+import { Paragraph as N } from "./Paragraph.js";
+function E({
+  id: a,
+  as: d = "a",
+  testid: s,
+  label: l,
+  leftIcon: c,
+  rightIcon: i,
+  href: m,
+  groupIndentLevel: r,
+  selected: n = !1,
+  disabled: o = !1,
+  onClick: b
+}) {
+  const p = !n && !o && t("border-transparent"), v = !n && o && t("bg-transparent border-transparent"), x = n && !o && t(
+    "bg-background-action-secondary-hover border-border-action-normal",
+    "hover:border-border-action-hover",
+    "active:border-border-action-active"
+  ), u = n && o && t(
+    "bg-background-action-secondary-disabled border-border-action-disabled"
+  ), h = o ? t("text-text-action-disabled pointer-events-none") : t("text-text-primary-normal");
+  return /* @__PURE__ */ e(
+    d,
+    {
+      id: a,
+      "data-testid": s,
+      href: m,
+      className: t(
+        "group flex w-full rounded border-2 cursor-pointer",
+        "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+        "active:bg-background-action-secondary-active active:text-text-action-active",
+        y,
+        g,
+        p,
+        v,
+        x,
+        u,
+        h
+      ),
+      onClick: b,
+      children: /* @__PURE__ */ S(
+        f,
+        {
+          id: a ? `${a}-stack` : void 0,
+          horizontal: !0,
+          items: "center",
+          sizing: "component",
+          children: [
+            r === 2 && /* @__PURE__ */ e("div", { className: "pl-6" }),
+            r === 3 && /* @__PURE__ */ e("div", { className: "pl-13" }),
+            r === 4 && /* @__PURE__ */ e("div", { className: "pl-20" }),
+            r === 5 && /* @__PURE__ */ e("div", { className: "pl-27" }),
+            c && c,
+            !c && r && /* @__PURE__ */ e("div", { className: "w-6 h-6" }),
+            /* @__PURE__ */ e(
+              N,
+              {
+                id: a ? `${a}-label` : void 0,
+                testid: s ? `${s}-label` : void 0,
+                as: "span",
+                padded: !0,
+                className: "mr-auto !leading-6",
+                children: l
+              }
+            ),
+            i && i
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  E as SideMenuItem
+};

package/dist/components/SimpleTable.js

@@ -0,0 +1,60 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { Subheader as c } from "./Subheader.js";
+import { clsx as n } from "../node_modules/clsx/dist/clsx.js";
+import { Stack as b } from "./Stack.js";
+function v({
+  columns: l,
+  data: i,
+  additionalRows: t,
+  testid: m
+}) {
+  const p = t && t.length > 0 ? [...i, ...t] : i;
+  return /* @__PURE__ */ e(
+    b,
+    {
+      elevation: 4,
+      rounded: !0,
+      overflowX: "hidden",
+      overflowY: "hidden",
+      testid: m,
+      children: /* @__PURE__ */ h("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
+        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: l.map((d, o) => /* @__PURE__ */ e(
+          "th",
+          {
+            scope: "col",
+            className: n(
+              "p-mobile-layout-padding desktop:p-desktop-layout-padding font-semibold text-text-primary-normal",
+              d.meta?.headerWidth ? d.meta.headerWidth : "w-2/3"
+            ),
+            children: /* @__PURE__ */ e(c, { children: d.header?.toString() })
+          },
+          o
+        )) }) }),
+        /* @__PURE__ */ e("tbody", { children: p.map((d, o) => /* @__PURE__ */ e(
+          "tr",
+          {
+            className: "border-t border-border-primary-normal divide-x divide-border-primary-normal",
+            children: l.map((a, s) => {
+              const r = (a.id ? d[a.id] : null) ?? null;
+              return /* @__PURE__ */ e(
+                "td",
+                {
+                  className: n(
+                    "p-mobile-layout-padding desktop:p-desktop-layout-padding align-middle text-text-primary-normal",
+                    a.meta?.headerWidth
+                  ),
+                  children: r != null ? typeof r == "string" || typeof r == "number" ? r.toString() : r : ""
+                },
+                s
+              );
+            })
+          },
+          o
+        )) })
+      ] })
+    }
+  );
+}
+export {
+  v as SimpleTable
+};

package/dist/components/SkeletonParagraph.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+function i({
+  className: a = "",
+  heightClassName: e = "h-6",
+  size: s = "large",
+  testid: l
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "aria-label": "Loading content",
+      role: "status",
+      className: `skeleton-paragraph ${e} ${{
+        small: "min-w-10 w-1/4",
+        medium: "min-w-20 w-1/2",
+        large: "min-w-32 w-full"
+      }[s]} rounded-xs ${a}`,
+      "data-testid": l
+    }
+  );
+}
+export {
+  i as SkeletonParagraph
+};

package/dist/components/Spinner.js

@@ -0,0 +1,30 @@
+import { jsxs as o, jsx as c } from "react/jsx-runtime";
+function e({ size: r = "small", testid: a }) {
+  const i = r === "large" ? 48 : 24;
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      "data-testid": a,
+      width: i,
+      height: i,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-icon-action-primary-normal)",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ c("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ c("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ c("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ c("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ c("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ c("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ c("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ c("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+}
+export {
+  e as Spinner
+};

package/dist/components/Stack.js

@@ -0,0 +1,174 @@
+import { jsx as z } from "react/jsx-runtime";
+import { clsx as f } from "../node_modules/clsx/dist/clsx.js";
+import { paddingYUsingLayoutGroupGap as oo } from "../classNames.js";
+const po = ({ items: p, justify: a, grow: y }) => f(
+  "flex",
+  p === "start" && "items-start",
+  y && "grow",
+  p === "start" && "items-start",
+  p === "center" && "items-center",
+  p === "end" && "items-end",
+  p === "start-center" && "items-start desktop:items-center",
+  a === "start" && "justify-start",
+  a === "center" && "justify-center",
+  a === "end" && "justify-end",
+  a === "end" && "justify-end",
+  a === "between" && "justify-between",
+  a === "around" && "justify-around"
+), to = (p) => f(
+  p === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+  p === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+  p === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+  p === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+);
+function no({
+  children: p,
+  items: a,
+  justify: y,
+  grow: K,
+  padding: e,
+  paddingX: c,
+  paddingY: n,
+  paddingBottom: m,
+  paddingTop: l,
+  paddingLeft: i,
+  paddingRight: r,
+  margin: M,
+  marginX: O,
+  marginY: P,
+  horizontal: Q,
+  horizontalMobile: V,
+  elevation: s = 0,
+  rounded: Z,
+  centered: _,
+  width: d,
+  minHeight: u,
+  maxWidth: k,
+  minWidth: $,
+  height: b,
+  maxHeight: g,
+  borderColor: w,
+  borderTopColor: N,
+  borderRightColor: I,
+  borderBottomColor: G,
+  borderLeftColor: j,
+  backgroundColor: F,
+  sizing: o = "none",
+  overflowY: x = "inherit",
+  overflowX: v = "inherit",
+  flexShrink: S,
+  flexGrow: U,
+  position: q,
+  top: A,
+  left: D,
+  id: h,
+  noGap: B,
+  marginTop: C,
+  marginBottom: W,
+  testid: H,
+  bottom: E,
+  zIndex: J,
+  flexWrap: L,
+  className: R,
+  unclipEdges: T,
+  ...t
+}) {
+  const Y = po({ items: a, justify: y, grow: K }), X = to(o);
+  return /* @__PURE__ */ z(
+    "div",
+    {
+      id: h,
+      "data-testid": H,
+      ...t,
+      style: {
+        height: b === "full" ? "100%" : b !== void 0 ? `${b}px` : void 0,
+        maxHeight: g !== void 0 ? isNaN(+g) ? g : `${g}px` : t.style?.maxHeight,
+        maxWidth: k !== void 0 ? isNaN(+k) ? k : `${k}px` : t.style?.maxWidth,
+        minHeight: u !== void 0 ? isNaN(+u) ? u : `${u}px` : t.style?.minHeight,
+        width: d !== void 0 && typeof d == "number" ? `${d}px` : void 0,
+        minWidth: $ !== void 0 ? `${$}px` : void 0,
+        border: w ? `1px solid var(--color-${w})` : void 0,
+        borderTop: N ? `1px solid var(--color-${N})` : void 0,
+        borderRight: I ? `1px solid var(--color-${I})` : void 0,
+        borderBottom: G ? `1px solid var(--color-${G})` : void 0,
+        borderLeft: j ? `1px solid var(--color-${j})` : void 0,
+        backgroundColor: F ? `var(--color-${F})` : void 0,
+        flexGrow: U !== void 0 ? U : void 0,
+        flexShrink: S !== void 0 ? S : void 0,
+        position: q !== void 0 ? q : void 0,
+        top: A !== void 0 ? `${A}px` : void 0,
+        bottom: E !== void 0 ? `${E}px` : void 0,
+        left: D !== void 0 ? `${D}px` : void 0,
+        borderBlock: t.style?.borderBlock,
+        marginInline: t.style?.marginInline,
+        zIndex: J !== void 0 ? J : void 0,
+        flexWrap: L,
+        paddingInline: t.style?.paddingInline,
+        gap: t.style?.gap,
+        ...t.style
+      },
+      className: f(
+        "scrollbar-thin",
+        "max-w-screen",
+        d !== "fit" && "w-full",
+        d === "full" && "w-full",
+        d === "max" && "w-max",
+        _ && "mx-auto",
+        x == "auto" && "overflow-y-auto",
+        x == "hidden" && "overflow-y-hidden",
+        x == "scroll" && "overflow-y-scroll",
+        v == "auto" && "overflow-x-auto",
+        v == "hidden" && "overflow-x-hidden",
+        v == "scroll" && "overflow-x-scroll",
+        e && o === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        e && o === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        e && o === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        e && o === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        c && o === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        c && o === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        c && o === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        c && o === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        n && o === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        n && o === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        n && o === "layout-group" && oo,
+        n && o === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        m && o === "container" && "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
+        m && o === "layout" && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+        m && o === "layout-group" && "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
+        m && o === "component" && "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
+        l && o === "container" && "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
+        l && o === "layout" && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+        l && o === "layout-group" && "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
+        l && o === "component" && "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
+        i && o === "container" && "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
+        i && o === "layout" && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+        i && o === "layout-group" && "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
+        i && o === "component" && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
+        r && o === "container" && "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
+        r && o === "layout" && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
+        r && o === "layout-group" && "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
+        r && o === "component" && "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-desktop-compact-component-padding",
+        M && o === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
+        O && o === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
+        C && o === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
+        W && o === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
+        P && o === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
+        Q ? "desktop:flex-row" : "desktop:flex-col",
+        V ? "flex-row" : "flex-col",
+        Y,
+        !B && X,
+        s === 0 && "shadow-none",
+        s === 2 && "shadow-2",
+        s === 4 && "shadow-4",
+        s === 16 && "shadow-16",
+        Z && "rounded",
+        T && "-m-0.75 p-1",
+        R
+      ),
+      children: p
+    }
+  );
+}
+export {
+  no as Stack
+};

package/dist/components/StatusPill.js

@@ -0,0 +1,44 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Label as m } from "./Label.js";
+import { clsx as a } from "../node_modules/clsx/dist/clsx.js";
+import { paddingXUsingLayoutGroupGap as p, componentPaddingYUsingComponentGap as u } from "../classNames.js";
+function f({
+  children: e,
+  state: r = "in-progress",
+  intent: o = "neutral",
+  id: c,
+  testid: l,
+  ...i
+}) {
+  const g = a(
+    r === "completed" && ["neutral", "critical"].includes(o) ? "text-text-on-action-primary-normal" : "text-neutral-500"
+  ), s = a({
+    "bg-neutral-200": o === "neutral" && r === "in-progress",
+    "bg-text-primary-normal": o === "neutral" && r === "completed",
+    "bg-warning-200": o === "warning" && r === "in-progress",
+    "bg-background-warning-normal": o === "warning" && r === "completed",
+    "bg-success-200": o === "success" && r === "in-progress",
+    "bg-background-success-normal": o === "success" && r === "completed",
+    "bg-critical-200": o === "critical" && r === "in-progress",
+    "bg-background-critical-normal": o === "critical" && r === "completed"
+  });
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      id: c,
+      "data-testid": l,
+      ...i,
+      className: a(
+        "rounded flex items-center",
+        g,
+        s,
+        p,
+        u
+      ),
+      children: /* @__PURE__ */ n(m, { id: c ? `${c}-label` : void 0, testid: l ? `${l}-label` : void 0, children: e })
+    }
+  );
+}
+export {
+  f as StatusPill
+};

package/dist/components/Stepper.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs as T, jsx as e } from "react/jsx-runtime";
+import { useState as x, useEffect as j } from "react";
+import { Button as b } from "./Button.js";
+import { InputBase as w } from "./Input.js";
+import { Icon as I } from "./Icon.js";
+import { clsx as p } from "../node_modules/clsx/dist/clsx.js";
+import { componentGap as B } from "../classNames.js";
+import { Tooltip as $ } from "./Tooltip.js";
+function J({
+  error: v,
+  disabled: r,
+  hideButtons: d = !1,
+  value: n,
+  setValue: s,
+  onDecrease: M,
+  onIncrease: N,
+  onBlur: S,
+  id: i,
+  testid: t,
+  min: a,
+  max: o,
+  step: u = 1,
+  ...k
+}) {
+  const [f, y] = x(!1), [C, l] = x(String(n));
+  j(() => {
+    f || l(String(n));
+  }, [n, f]);
+  function D() {
+    o != null && n >= o || (s((c) => Math.min(c + u, o ?? 1 / 0)), N?.());
+  }
+  function E() {
+    a != null && n <= a || (s((c) => Math.max(c - u, a ?? -1 / 0)), M?.());
+  }
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      id: i,
+      "data-testid": t,
+      className: p("flex items-center", B),
+      children: [
+        !d && /* @__PURE__ */ e(
+          $,
+          {
+            message: "Decrease Quantity",
+            testid: t ? `${t}-decrease-tooltip` : void 0,
+            children: /* @__PURE__ */ e(
+              b,
+              {
+                id: i ? `${i}-decrease-button` : void 0,
+                testid: t ? `${t}-decrease-button` : void 0,
+                iconOnly: !0,
+                variant: "tertiary",
+                leftIcon: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: p(
+                      !r || n > 0 && "text-icon-action-primary-normal",
+                      r || n === 0 && "text-icon-action-primary-disabled",
+                      "contents"
+                    ),
+                    children: /* @__PURE__ */ e(I, { name: "remove" })
+                  }
+                ),
+                onClick: E,
+                disabled: r || n <= 0 || a != null && n <= a
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(
+          w,
+          {
+            ...k,
+            id: i ? `${i}-input` : void 0,
+            testid: t ? `${t}-input` : void 0,
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            align: "center",
+            value: C,
+            onFocus: () => y(!0),
+            onChange: (c) => {
+              const m = c.target.value;
+              if (m === "") {
+                l(""), s(0);
+                return;
+              }
+              if (!/^\d*$/.test(m))
+                return;
+              const g = m.replace(/^0+/, "") || "0", h = parseInt(g, 10);
+              o != null && h > o || (l(g), s(h));
+            },
+            onBlur: () => {
+              y(!1), l(String(n)), S?.();
+            },
+            error: v,
+            disabled: r,
+            className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
+          }
+        ) }),
+        !d && /* @__PURE__ */ e(
+          $,
+          {
+            message: "Increase Quantity",
+            testid: t ? `${t}-increase-tooltip` : void 0,
+            children: /* @__PURE__ */ e(
+              b,
+              {
+                id: i ? `${i}-increase-button` : void 0,
+                testid: t ? `${t}-increase-button` : void 0,
+                iconOnly: !0,
+                variant: "tertiary",
+                leftIcon: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: p(
+                      !r && "text-icon-action-primary-normal",
+                      r && "text-icon-action-primary-disabled",
+                      "contents"
+                    ),
+                    children: /* @__PURE__ */ e(I, { name: "add" })
+                  }
+                ),
+                onClick: D,
+                disabled: r || o != null && n >= o
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  J as Stepper
+};