@dmsi/wedgekit-react 0.0.1242 → 1.0.0

package/dist/components/Stepper.cjs

@@ -1,1478 +0,0 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Stepper.tsx
-var Stepper_exports = {};
-__export(Stepper_exports, {
-  Stepper: () => Stepper
-});
-module.exports = __toCommonJS(Stepper_exports);
-var import_react8 = require("react");
-
-// src/components/Button.tsx
-var import_clsx2 = __toESM(require("clsx"), 1);
-
-// src/classNames.ts
-var import_clsx = __toESM(require("clsx"), 1);
-var typography = {
-  display1: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
-    "leading-display-1-mobile desktop:leading-display-1-desktop"
-  ),
-  display2: (0, import_clsx.default)(
-    "font-sans font-bold",
-    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
-    "leading-display-2-mobile desktop:leading-display-2-desktop"
-  ),
-  heading1: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
-    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
-  ),
-  heading2: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
-    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
-  ),
-  heading3: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
-    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
-  ),
-  subheader: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
-    "leading-subheader-mobile desktop:leading-subheader-desktop"
-  ),
-  link: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
-    "leading-link-mobile desktop:leading-link-desktop"
-  ),
-  buttonLabel: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop"
-  ),
-  label: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop"
-  ),
-  paragraph: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
-  ),
-  caption: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
-    "leading-caption-mobile desktop:leading-caption-desktop"
-  ),
-  breadcrumb: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb"
-  )
-};
-var baseTransition = (0, import_clsx.default)(
-  "transition-colors duration-100 ease-in-out"
-);
-var componentGap = (0, import_clsx.default)(
-  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
-);
-var paddingUsingComponentGap = (0, import_clsx.default)(
-  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
-);
-var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
-  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
-);
-var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
-);
-var componentPadding = (0, import_clsx.default)(
-  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
-);
-var componentPaddingBottom = (0, import_clsx.default)(
-  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
-);
-var componentPaddingX = (0, import_clsx.default)(
-  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
-);
-var componentPaddingY = (0, import_clsx.default)(
-  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
-);
-var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
-  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
-);
-var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
-  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
-);
-var componentPaddingYUsingComponentGap2xMobile = (0, import_clsx.default)(
-  "py-[calc(var(--spacing-mobile-component-gap)_+_8px)] desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
-);
-var componentPaddingMinusBorder = (0, import_clsx.default)(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
-);
-var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
-);
-var componentPaddingMinusBorderDesktop = (0, import_clsx.default)(
-  "p-[calc(var(--spacing-desktop-component-padding)_-_1px)]"
-);
-var layoutPaddding = (0, import_clsx.default)(
-  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
-);
-var layoutPaddingBottom = (0, import_clsx.default)(
-  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
-);
-var layoutPaddingY = (0, import_clsx.default)(
-  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
-);
-var layoutPaddingX = (0, import_clsx.default)(
-  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
-);
-var containerPaddingX = (0, import_clsx.default)(
-  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
-);
-var containerPaddingY = (0, import_clsx.default)(
-  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
-);
-var layoutGroupGapPaddingY = (0, import_clsx.default)(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
-);
-var layoutGroupGap = (0, import_clsx.default)(
-  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
-);
-var layoutGap = (0, import_clsx.default)(
-  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
-);
-var gapUsingContainerPadding = (0, import_clsx.default)(
-  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
-);
-
-// src/components/Spinner.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "svg",
-    {
-      "data-testid": testid,
-      width: dimension,
-      height: dimension,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "#1D1E1E",
-      className: "spinner",
-      "aria-label": "Loading",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// src/components/Button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button = (_a) => {
-  var _b = _a, {
-    variant = "primary",
-    as = "button",
-    block,
-    leftIcon,
-    rightIcon,
-    className,
-    classNameLabel,
-    disabled = false,
-    children,
-    iconOnly = false,
-    colorClassName,
-    href,
-    id,
-    testid,
-    isLoading,
-    fontNormal = false
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "as",
-    "block",
-    "leftIcon",
-    "rightIcon",
-    "className",
-    "classNameLabel",
-    "disabled",
-    "children",
-    "iconOnly",
-    "colorClassName",
-    "href",
-    "id",
-    "testid",
-    "isLoading",
-    "fontNormal"
-  ]);
-  const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "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"
-  );
-  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "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"
-  );
-  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx2.default)(
-    "bg-transparent border-transparent",
-    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "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"
-  );
-  const quarternaryOutlinedVariantStyles = variant === "quarternary-outlined" && (0, import_clsx2.default)(
-    "bg-transparent border-transparent",
-    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "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"
-  );
-  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "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"
-  );
-  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "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"
-  );
-  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "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"
-  );
-  const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "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",
-    paddingUsingComponentGap
-  );
-  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx2.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
-  const buttonClasses = (0, import_clsx2.default)(
-    disabled ? "cursor-default" : "cursor-pointer",
-    block ? "w-full" : "w-fit",
-    baseTransition,
-    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
-    primaryVariantStyles,
-    secondaryVariantStyles,
-    tertiaryVariantStyles,
-    quarternaryOutlinedVariantStyles,
-    primaryCriticalVariantStyles,
-    secondaryCriticalVariantStyles,
-    tertiaryCriticalVariantStyles,
-    navigationVarianStyles,
-    notNavigationVariantStyles,
-    className
-  );
-  const labelClasses = (0, import_clsx2.default)(
-    "min-h-6 flex items-center justify-center",
-    classNameLabel,
-    fontNormal && "font-normal!",
-    componentPaddingXUsingComponentGap,
-    typography.buttonLabel
-  );
-  const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      type: Element === "button" ? "button" : void 0,
-      className: buttonClasses
-    }, props), {
-      onClick: props.onClick,
-      disabled,
-      href,
-      "data-theme": variant === "navigation" ? "brand" : void 0,
-      children: [
-        leftIcon && leftIcon,
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "small" }),
-        !iconOnly && !isLoading && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "span",
-          {
-            id: id ? `${id}-label` : void 0,
-            "data-testid": testid ? `${testid}-label` : void 0,
-            className: labelClasses,
-            children
-          }
-        ),
-        rightIcon && rightIcon
-      ]
-    })
-  );
-};
-Button.displayName = "Button";
-
-// src/components/Input.tsx
-var import_react = require("react");
-var import_clsx6 = __toESM(require("clsx"), 1);
-
-// src/components/Label.tsx
-var import_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Label = (_a) => {
-  var _b = _a, {
-    as = "span",
-    padded,
-    className,
-    color,
-    align,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "as",
-    "padded",
-    "className",
-    "color",
-    "align",
-    "id",
-    "testid"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx3.default)(
-        typography.label,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        className,
-        padded && componentPaddingXUsingComponentGap
-      )
-    }, props), {
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      })
-    })
-  );
-};
-Label.displayName = "Label";
-
-// src/components/Icon.tsx
-var import_clsx4 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function Icon(_a) {
-  var _b = _a, {
-    name,
-    size = 24,
-    variant = "outline",
-    testid
-  } = _b, props = __objRest(_b, [
-    "name",
-    "size",
-    "variant",
-    "testid"
-  ]);
-  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
-  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "span",
-    __spreadProps(__spreadValues({}, props), {
-      "data-testid": testid,
-      className: (0, import_clsx4.default)(
-        "icon",
-        `icon-${size}`,
-        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
-        props.className
-      ),
-      style: __spreadValues({
-        fontVariationSettings: variantStyle + `, ${weightStyle}`
-      }, props.style),
-      children: name
-    })
-  );
-}
-
-// src/utils/formatting.tsx
-function getDecimalPlaceholder(decimals) {
-  if (!decimals || decimals <= 0) {
-    return {};
-  }
-  return {
-    placeholder: `0.${"0".repeat(decimals)}`
-  };
-}
-function formatDecimalValue(value, decimals) {
-  if (!value || value === "") {
-    return "";
-  }
-  const numValue = typeof value === "string" ? parseFloat(value) : value;
-  if (isNaN(numValue)) {
-    return "";
-  }
-  if (!decimals || decimals <= 0) {
-    return String(Math.round(numValue));
-  }
-  return numValue.toFixed(decimals);
-}
-function formatCurrencyDisplay(value) {
-  if (!value || value === "") {
-    return "";
-  }
-  const parts = value.split(".");
-  const integerPart = parts[0];
-  const decimalPart = parts[1];
-  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
-}
-
-// src/components/Paragraph.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Paragraph = (_a) => {
-  var _b = _a, {
-    className,
-    color,
-    padded,
-    align = "left",
-    tall,
-    addOverflow,
-    children,
-    as = "p",
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "color",
-    "padded",
-    "align",
-    "tall",
-    "addOverflow",
-    "children",
-    "as",
-    "id",
-    "testid"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, props), {
-      className: (0, import_clsx5.default)(
-        typography.paragraph,
-        className,
-        padded && componentPaddingXUsingComponentGap,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        tall && "!leading-6",
-        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
-      ),
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      }),
-      children
-    })
-  );
-};
-Paragraph.displayName = "Paragraph";
-
-// src/components/Input.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var InputBase = (_a) => {
-  var _b = _a, {
-    id,
-    testid,
-    before,
-    after,
-    rightAdornment,
-    type,
-    label,
-    error,
-    className,
-    align = "left",
-    caption,
-    required,
-    selectOnFocus,
-    removeRoundness,
-    inputContainerRef,
-    removeBorder,
-    wrapperClassName,
-    focus,
-    secondaryIconColor,
-    fullWidth = true,
-    width,
-    wrapperRef,
-    autocompletePadding = false
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "before",
-    "after",
-    "rightAdornment",
-    "type",
-    "label",
-    "error",
-    "className",
-    "align",
-    "caption",
-    "required",
-    "selectOnFocus",
-    "removeRoundness",
-    "inputContainerRef",
-    "removeBorder",
-    "wrapperClassName",
-    "focus",
-    "secondaryIconColor",
-    "fullWidth",
-    "width",
-    "wrapperRef",
-    "autocompletePadding"
-  ]);
-  const attributes = {
-    "data-error": error && !focus || null,
-    "data-focus": focus || null
-  };
-  const inputRef = (0, import_react.useRef)(null);
-  const inputId = id ? `${id}-input` : void 0;
-  (0, import_react.useEffect)(() => {
-    var _a2;
-    const input = inputRef.current;
-    const focusHandler = () => {
-      input == null ? void 0 : input.select();
-    };
-    if (selectOnFocus) {
-      (_a2 = inputRef.current) == null ? void 0 : _a2.addEventListener("focus", focusHandler);
-      return () => {
-        input == null ? void 0 : input.removeEventListener("focus", focusHandler);
-      };
-    }
-  }, [selectOnFocus]);
-  const inputBaseClass = (0, import_clsx6.default)(
-    fullWidth ? "w-full" : "w-fit",
-    "flex flex-row items-center",
-    "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
-    componentGap,
-    baseTransition,
-    "outline-transparent outline-2 -outline-offset-2",
-    !autocompletePadding && componentPaddingMinusBorder,
-    autocompletePadding && componentPaddingMinusBorderDesktop,
-    !removeRoundness && "rounded-base",
-    !removeBorder && "border border-border-primary-normal",
-    "relative"
-  );
-  const inputFocusClass = (0, import_clsx6.default)(
-    "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
-  );
-  const inputDisabledClass = (0, import_clsx6.default)(
-    "has-disabled:bg-background-action-secondary-disabled"
-  );
-  const inputReadOnlyClass = (0, import_clsx6.default)(
-    "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
-  );
-  const inputInvalidClass = (0, import_clsx6.default)(
-    "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "label",
-    {
-      id,
-      "data-testid": testid,
-      htmlFor: inputId,
-      ref: inputContainerRef,
-      className: (0, import_clsx6.default)(
-        "w-full flex flex-col",
-        "block",
-        "text-text-primary-normal has-disabled:text-text-primary-disabled",
-        componentGap
-      ),
-      style: __spreadValues({}, props.style),
-      children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx6.default)("flex items-center", componentGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Label,
-            {
-              id: id ? `${id}-label` : void 0,
-              color: error ? "text-primary-error" : void 0,
-              className: (0, import_clsx6.default)(
-                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
-              ),
-              children: label
-            }
-          ),
-          required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            "span",
-            {
-              className: (0, import_clsx6.default)(typography.label, "text-text-critical-normal"),
-              children: "*"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-          "div",
-          {
-            className: (0, import_clsx6.default)(
-              inputBaseClass,
-              !props.disabled && inputInvalidClass,
-              inputFocusClass,
-              inputDisabledClass,
-              inputReadOnlyClass,
-              wrapperClassName
-            ),
-            ref: (el) => {
-              if (wrapperRef) {
-                wrapperRef.current = el;
-              }
-            },
-            children: [
-              before,
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                "input",
-                __spreadProps(__spreadValues(__spreadValues({
-                  ref: (el) => {
-                    inputRef.current = el;
-                  },
-                  type,
-                  required
-                }, props), attributes), {
-                  id: inputId,
-                  "data-testid": testid ? `${testid}-input` : void 0,
-                  className: (0, import_clsx6.default)(
-                    "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
-                    "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-                    "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
-                    align === "right" && "text-right",
-                    align === "center" && "text-center",
-                    componentPaddingXUsingComponentGap,
-                    typography.paragraph,
-                    className,
-                    props.readOnly && !props.disabled && "!px-0"
-                  ),
-                  style: __spreadProps(__spreadValues({}, props.style), { width })
-                })
-              ),
-              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after,
-              rightAdornment
-            ]
-          }
-        ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "div",
-          {
-            id: id ? `${id}-caption` : void 0,
-            "data-testid": testid ? `${testid}-caption` : void 0,
-            children: caption
-          }
-        )
-      ]
-    }
-  );
-};
-var Input = (_a) => {
-  var _b = _a, {
-    variant = "default",
-    decimals,
-    uom,
-    currencyFormat = false,
-    formatOnBlur = false,
-    removeSearchIcon,
-    value: propValue,
-    onChange,
-    onBlur,
-    onClear,
-    id,
-    testid,
-    rightAdornment
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "decimals",
-    "uom",
-    "currencyFormat",
-    "formatOnBlur",
-    "removeSearchIcon",
-    "value",
-    "onChange",
-    "onBlur",
-    "onClear",
-    "id",
-    "testid",
-    "rightAdornment"
-  ]);
-  const [internalValue, setInternalValue] = (0, import_react.useState)("");
-  const [displayValue, setDisplayValue] = (0, import_react.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    var _a2;
-    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    const shouldUseThousandsFormatting = variant === "currency" || variant === "uom" && currencyFormat;
-    if (!stringValue) {
-      setInternalValue("");
-      setDisplayValue("");
-      return;
-    }
-    if (!shouldUseThousandsFormatting) {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
-      return;
-    }
-    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
-    if (formatOnBlur && isFocused) {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
-      return;
-    }
-    setInternalValue(formatted);
-    setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [propValue, variant, currencyFormat, decimals, formatOnBlur, isFocused]);
-  const getInputProps = () => {
-    var _a2;
-    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
-      id
-    }), getDecimalPlaceholder(decimals)), {
-      value: propValue
-    });
-    switch (variant) {
-      case "search":
-        return __spreadProps(__spreadValues({}, baseProps), {
-          placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
-          className: "!mr-6",
-          value: displayValue
-        });
-      case "finder":
-        return baseProps;
-      case "currency":
-        return __spreadProps(__spreadValues({}, baseProps), {
-          align: "right",
-          type: "text",
-          value: displayValue
-        });
-      case "percentage":
-      case "uom":
-        return __spreadProps(__spreadValues({}, baseProps), {
-          type: currencyFormat ? "text" : "number",
-          align: "right",
-          value: currencyFormat ? displayValue : propValue
-        });
-      default:
-        return baseProps;
-    }
-  };
-  const getBeforeElement = () => {
-    if (props.before) return props.before;
-    switch (variant) {
-      case "search":
-        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" }) }) : null;
-      case "currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "attach_money" }) });
-      case "uom":
-        return currencyFormat ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "attach_money" }) }) : null;
-      default:
-        return null;
-    }
-  };
-  const getAfterElement = () => {
-    if (props.after) return props.after;
-    switch (variant) {
-      case "search": {
-        const hasValue = displayValue.length > 0;
-        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          Icon,
-          {
-            id: id ? `${id}-clear-button` : void 0,
-            testid: testid ? `${testid}-clear-button` : void 0,
-            name: "close",
-            onClick: handleSearchReset,
-            className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
-          }
-        ) : null;
-      }
-      case "finder":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" });
-      case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
-      case "percentage":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "percent" }) });
-      default:
-        return null;
-    }
-  };
-  const handleSearchReset = () => {
-    setInternalValue("");
-    setDisplayValue("");
-    if (onChange) {
-      const syntheticEvent = {
-        target: { value: "" }
-      };
-      if (typeof onChange === "function") {
-        onChange(syntheticEvent);
-      }
-    }
-    onClear == null ? void 0 : onClear();
-  };
-  const handleChange = (e) => {
-    const rawValue = e.target.value;
-    const maxNumber = props.max != null ? Number(String(props.max).replace(/,/g, "")) : void 0;
-    if (variant === "currency") {
-      const raw = rawValue.replace(/,/g, "");
-      if (raw === "") {
-        setInternalValue("");
-        setDisplayValue("");
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: "" })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      const regex = /^\d*\.?\d*$/;
-      if (!regex.test(raw)) return;
-      const parts = raw.split(".");
-      const currentDecimals = decimals != null ? decimals : 2;
-      if (parts.length === 2 && parts[1].length > currentDecimals) return;
-      const asNumber = Number(raw);
-      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          currentDecimals
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(
-          formatOnBlur ? formattedClamped : formatCurrencyDisplay(formattedClamped)
-        );
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      setInternalValue(raw);
-      setDisplayValue(formatOnBlur ? raw : formatCurrencyDisplay(raw));
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-        });
-        onChange(syntheticEvent);
-      }
-      return;
-    }
-    if (variant === "uom" && currencyFormat) {
-      const raw = rawValue.replace(/,/g, "");
-      if (raw === "") {
-        setInternalValue("");
-        setDisplayValue("");
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: "" })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      const regex = /^\d*\.?\d*$/;
-      if (!regex.test(raw)) return;
-      const parts = raw.split(".");
-      const currentDecimals = decimals != null ? decimals : 2;
-      if (parts.length === 2 && parts[1].length > currentDecimals) return;
-      const asNumber = Number(raw);
-      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          currentDecimals
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(formatCurrencyDisplay(formattedClamped));
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      setInternalValue(raw);
-      setDisplayValue(formatCurrencyDisplay(raw));
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-        });
-        onChange(syntheticEvent);
-      }
-      return;
-    }
-    if (variant === "uom" && e.target.type === "number") {
-      const numeric = Number(rawValue);
-      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          decimals != null ? decimals : 0
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(formattedClamped);
-        if (typeof onChange === "function") {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
-    setInternalValue(rawValue);
-    setDisplayValue(rawValue);
-    if (typeof onChange === "function") {
-      onChange(e);
-    }
-  };
-  const handleBlur = (e) => {
-    setIsFocused(false);
-    if (!internalValue) {
-      onBlur == null ? void 0 : onBlur(e);
-      return;
-    }
-    if (variant === "currency") {
-      const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
-      setInternalValue(formatted);
-      setDisplayValue(formatCurrencyDisplay(formatted));
-      const asNumber = Number(formatted);
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-        });
-        onChange(syntheticEvent);
-      }
-    } else if (variant === "uom") {
-      if (currencyFormat) {
-        const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
-        setInternalValue(formatted);
-        setDisplayValue(formatCurrencyDisplay(formatted));
-        const asNumber = Number(formatted);
-        if (!isNaN(asNumber) && onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-      } else {
-        const formattedValue = formatDecimalValue(e.target.value, decimals);
-        e.target.value = formattedValue;
-      }
-    }
-    onBlur == null ? void 0 : onBlur(e);
-  };
-  const handleFocus = (e) => {
-    var _a2;
-    setIsFocused(true);
-    (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e);
-  };
-  const inputProps = getInputProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    InputBase,
-    __spreadProps(__spreadValues({}, inputProps), {
-      before: getBeforeElement(),
-      after: getAfterElement(),
-      onFocus: handleFocus,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      testid,
-      rightAdornment
-    })
-  );
-};
-Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
-var Currency = (props) => {
-  var _a;
-  const handleCurrencyChange = (e) => {
-    var _a2;
-    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    Input,
-    __spreadProps(__spreadValues({}, props), {
-      variant: "currency",
-      decimals: (_a = props.decimals) != null ? _a : 2,
-      onChange: handleCurrencyChange
-    })
-  );
-};
-var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
-Finder.displayName = "Finder";
-UOM.displayName = "UOM";
-Currency.displayName = "Currency";
-Percentage.displayName = "Percentage";
-
-// src/components/Stepper.tsx
-var import_clsx8 = __toESM(require("clsx"), 1);
-
-// src/components/Tooltip.tsx
-var import_clsx7 = __toESM(require("clsx"), 1);
-var import_react7 = require("react");
-var import_react_dom = require("react-dom");
-
-// src/hooks/useKeydown.ts
-var import_react2 = require("react");
-
-// src/hooks/useInfiniteScroll.tsx
-var import_react3 = require("react");
-
-// src/hooks/useMatchesMedia.ts
-var import_react4 = require("react");
-var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react4.useState)();
-  (0, import_react4.useLayoutEffect)(() => {
-    const mediaQueryList = window.matchMedia(query);
-    const listener = () => setMatches(mediaQueryList.matches);
-    listener();
-    mediaQueryList.addEventListener("change", listener);
-    return () => mediaQueryList.removeEventListener("change", listener);
-  }, [query]);
-  return matches;
-};
-var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
-
-// src/hooks/useTableLayout/useTableLayout.ts
-var import_react5 = require("react");
-
-// src/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
-
-// src/hooks/useTableLayout/storage.ts
-var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
-var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
-
-// src/hooks/useEditCell.tsx
-var import_react6 = require("react");
-
-// src/components/Tooltip.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Tooltip = ({
-  id,
-  testid,
-  message,
-  position = "top",
-  children,
-  showOnTruncation = false,
-  offset = 8,
-  keepHidden = false
-}) => {
-  const ref = (0, import_react7.useRef)(null);
-  const tooltipRef = (0, import_react7.useRef)(null);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react7.useState)({ top: 0, left: 0 });
-  const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
-  const [removeOpacity, setRemoveOpacity] = (0, import_react7.useState)(false);
-  const updatePosition = () => {
-    if (!ref.current || !tooltipRef.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
-    let top = 0;
-    let left = 0;
-    switch (position) {
-      case "top":
-        top = rect.top - tooltipRect.height - offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "bottom":
-        top = rect.bottom + offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "left":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.left - tooltipRect.width - offset;
-        break;
-      case "right":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.right + offset;
-        break;
-    }
-    setTooltipPosition({ top, left });
-    requestAnimationFrame(() => {
-      setRemoveOpacity(true);
-    });
-  };
-  const handleMouseEnter = () => {
-    if (!showOnTruncation || checkForTextTruncation()) {
-      setIsVisible(true);
-    }
-  };
-  const handleMouseLeave = () => {
-    setIsVisible(false);
-    setRemoveOpacity(false);
-  };
-  (0, import_react7.useEffect)(() => {
-    if (isVisible && tooltipRef.current) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [isVisible]);
-  (0, import_react7.useEffect)(() => {
-    if (isVisible) {
-      window.addEventListener("resize", updatePosition);
-      return () => window.removeEventListener("resize", updatePosition);
-    }
-  }, [isVisible]);
-  const isMobile = useMatchesMobile();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      ref,
-      className: "relative inline-grid grid-cols-[auto_1fr] items-center cursor-pointer",
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [
-        children,
-        !keepHidden && isVisible && !isMobile && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "div",
-            {
-              id: id ? `${id}-message` : void 0,
-              "data-testid": testid ? `${testid}-message` : void 0,
-              ref: tooltipRef,
-              style: {
-                position: "fixed",
-                top: `${tooltipPosition.top}px`,
-                left: `${tooltipPosition.left}px`,
-                zIndex: 9999
-              },
-              className: (0, import_clsx7.default)(
-                typography.caption,
-                "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
-                componentPadding,
-                !removeOpacity && "opacity-0"
-              ),
-              children: message
-            }
-          ),
-          document.body
-        )
-      ]
-    }
-  );
-  function checkForTextTruncation() {
-    if (showOnTruncation && ref.current) {
-      const element = ref.current.querySelector("p, a");
-      if (element) {
-        const isTruncated = element.scrollWidth > element.clientWidth;
-        return isTruncated;
-      }
-    }
-    return false;
-  }
-};
-Tooltip.displayName = "Tooltip";
-
-// src/components/Stepper.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Stepper = (_a) => {
-  var _b = _a, {
-    error,
-    disabled,
-    hideButtons = false,
-    value,
-    setValue,
-    onDecrease,
-    onIncrease,
-    onBlur,
-    id,
-    testid,
-    min,
-    max,
-    step = 1,
-    allowDecimals = false
-  } = _b, props = __objRest(_b, [
-    "error",
-    "disabled",
-    "hideButtons",
-    "value",
-    "setValue",
-    "onDecrease",
-    "onIncrease",
-    "onBlur",
-    "id",
-    "testid",
-    "min",
-    "max",
-    "step",
-    "allowDecimals"
-  ]);
-  const maxInputCharacters = 15;
-  const userInputRef = (0, import_react8.useRef)(false);
-  const [displayValue, setDisplayValue] = (0, import_react8.useState)(String(value));
-  const inputCharacterWidth = Math.min(
-    Math.max(displayValue.length, 1),
-    maxInputCharacters
-  );
-  const buttonMin = Math.max(step, min != null ? min : step);
-  (0, import_react8.useEffect)(() => {
-    if (userInputRef.current) {
-      userInputRef.current = false;
-      return;
-    }
-    setDisplayValue(String(value));
-  }, [value]);
-  function handleIncrease() {
-    if (max != null && value >= max) {
-      return;
-    }
-    setValue(() => {
-      const prec = String(step).includes(".") ? String(step).split(".")[1].length : 0;
-      const next = Number(
-        Math.min(
-          Number((value + step).toFixed(prec + 6)),
-          max != null ? max : Infinity
-        ).toFixed(prec)
-      );
-      onIncrease == null ? void 0 : onIncrease(next);
-      return next;
-    });
-  }
-  function handleDecrease() {
-    if (min != null && value <= min) {
-      return;
-    }
-    setValue(() => {
-      const prec = String(step).includes(".") ? String(step).split(".")[1].length : 0;
-      const next = Number(
-        Math.max(
-          Number((value - step).toFixed(prec + 6)),
-          min != null ? min : -Infinity
-        ).toFixed(prec)
-      );
-      onDecrease == null ? void 0 : onDecrease(next);
-      return next;
-    });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx8.default)("flex items-center", componentGap),
-      children: [
-        !hideButtons && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Tooltip,
-          {
-            message: "Decrease Quantity",
-            testid: testid ? `${testid}-decrease-tooltip` : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              Button,
-              {
-                id: id ? `${id}-decrease-button` : void 0,
-                testid: testid ? `${testid}-decrease-button` : void 0,
-                iconOnly: true,
-                variant: "tertiary",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  "span",
-                  {
-                    className: (0, import_clsx8.default)(
-                      !disabled || value > 0 && "text-icon-action-primary-normal",
-                      disabled || value === 0 && "text-icon-action-primary-disabled",
-                      "contents"
-                    ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "remove" })
-                  }
-                ),
-                onClick: handleDecrease,
-                disabled: disabled || value <= buttonMin
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          InputBase,
-          __spreadProps(__spreadValues({}, props), {
-            id: id ? `${id}-input` : void 0,
-            testid: testid ? `${testid}-input` : void 0,
-            type: "text",
-            inputMode: allowDecimals ? "decimal" : "numeric",
-            pattern: allowDecimals ? "[0-9]*\\.?[0-9]*" : "[0-9]*",
-            align: "center",
-            maxLength: maxInputCharacters,
-            size: inputCharacterWidth,
-            value: displayValue,
-            onChange: (e) => {
-              const rawValue = e.target.value;
-              if (rawValue === "") {
-                setDisplayValue("");
-                userInputRef.current = true;
-                setValue(0);
-                return;
-              }
-              if (allowDecimals) {
-                if (!/^\d*\.?\d*$/.test(rawValue)) {
-                  return;
-                }
-                const cleanedValue2 = rawValue === "." ? "0." : rawValue.replace(/^0+(\d)/, "$1");
-                const nextValue2 = parseFloat(cleanedValue2) || 0;
-                const isIntermediate = rawValue.includes(".") && (rawValue.endsWith(".") || /0$/.test(rawValue));
-                setDisplayValue(
-                  isIntermediate ? cleanedValue2 : String(nextValue2)
-                );
-                userInputRef.current = true;
-                setValue(nextValue2);
-                return;
-              }
-              if (!/^\d*$/.test(rawValue)) {
-                return;
-              }
-              const cleanedValue = rawValue.replace(/^0+/, "") || "0";
-              const nextValue = parseInt(cleanedValue, 10);
-              setDisplayValue(cleanedValue);
-              userInputRef.current = true;
-              setValue(nextValue);
-            },
-            onBlur: () => {
-              setDisplayValue(String(value));
-              userInputRef.current = false;
-              onBlur == null ? void 0 : onBlur();
-            },
-            error,
-            disabled,
-            className: "!w-auto !min-w-6 !max-w-[15ch] !h-4.5 !px-0 !overflow-x-auto disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
-          })
-        ) }),
-        !hideButtons && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Tooltip,
-          {
-            message: "Increase Quantity",
-            testid: testid ? `${testid}-increase-tooltip` : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              Button,
-              {
-                id: id ? `${id}-increase-button` : void 0,
-                testid: testid ? `${testid}-increase-button` : void 0,
-                iconOnly: true,
-                variant: "tertiary",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  "span",
-                  {
-                    className: (0, import_clsx8.default)(
-                      !disabled && "text-icon-action-primary-normal",
-                      disabled && "text-icon-action-primary-disabled",
-                      "contents"
-                    ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "add" })
-                  }
-                ),
-                onClick: handleIncrease,
-                disabled: disabled || max != null && value >= max
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-Stepper.displayName = "Stepper";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Stepper
-});