@dmsi/wedgekit-react 0.0.1241 → 1.0.0

package/dist/components/Time.cjs

@@ -1,1511 +0,0 @@
-"use strict";
-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/Time.tsx
-var Time_exports = {};
-__export(Time_exports, {
-  Time: () => Time
-});
-module.exports = __toCommonJS(Time_exports);
-var import_react2 = require("react");
-
-// src/components/Input.tsx
-var import_react = require("react");
-var import_clsx5 = __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/Label.tsx
-var import_clsx2 = __toESM(require("clsx"), 1);
-var import_jsx_runtime = 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_runtime.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx2.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_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = 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_runtime2.jsx)(
-    "span",
-    __spreadProps(__spreadValues({}, props), {
-      "data-testid": testid,
-      className: (0, import_clsx3.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_clsx4 = __toESM(require("clsx"), 1);
-var import_jsx_runtime3 = 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_runtime3.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, props), {
-      className: (0, import_clsx4.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_runtime4 = 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_clsx5.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_clsx5.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_clsx5.default)(
-    "has-disabled:bg-background-action-secondary-disabled"
-  );
-  const inputReadOnlyClass = (0, import_clsx5.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_clsx5.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_runtime4.jsxs)(
-    "label",
-    {
-      id,
-      "data-testid": testid,
-      htmlFor: inputId,
-      ref: inputContainerRef,
-      className: (0, import_clsx5.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_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", componentGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Label,
-            {
-              id: id ? `${id}-label` : void 0,
-              color: error ? "text-primary-error" : void 0,
-              className: (0, import_clsx5.default)(
-                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
-              ),
-              children: label
-            }
-          ),
-          required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "span",
-            {
-              className: (0, import_clsx5.default)(typography.label, "text-text-critical-normal"),
-              children: "*"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "div",
-          {
-            className: (0, import_clsx5.default)(
-              inputBaseClass,
-              !props.disabled && inputInvalidClass,
-              inputFocusClass,
-              inputDisabledClass,
-              inputReadOnlyClass,
-              wrapperClassName
-            ),
-            ref: (el) => {
-              if (wrapperRef) {
-                wrapperRef.current = el;
-              }
-            },
-            children: [
-              before,
-              /* @__PURE__ */ (0, import_jsx_runtime4.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_clsx5.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_runtime4.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after,
-              rightAdornment
-            ]
-          }
-        ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "search" }) }) : null;
-      case "currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "attach_money" }) });
-      case "uom":
-        return currencyFormat ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)(Icon, { name: "search" });
-      case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
-      case "percentage":
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(
-    Input,
-    __spreadProps(__spreadValues({}, props), {
-      variant: "currency",
-      decimals: (_a = props.decimals) != null ? _a : 2,
-      onChange: handleCurrencyChange
-    })
-  );
-};
-var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
-Finder.displayName = "Finder";
-UOM.displayName = "UOM";
-Currency.displayName = "Currency";
-Percentage.displayName = "Percentage";
-
-// src/components/Time.tsx
-var import_react_dom = require("react-dom");
-var import_clsx7 = __toESM(require("clsx"), 1);
-
-// src/utils.ts
-function findDocumentRoot(element) {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    throw new Error(
-      "findDocumentRoot can only be used in a browser environment."
-    );
-  }
-  if (!element || !(element instanceof Node)) {
-    return window.document.body;
-  }
-  let currentElement = element;
-  while (currentElement && currentElement.parentNode) {
-    if (currentElement.parentNode === document) {
-      return document.body;
-    } else if (currentElement.parentNode instanceof DocumentFragment) {
-      return currentElement.parentNode;
-    } else {
-      currentElement = currentElement.parentNode;
-    }
-  }
-  return window.document.body;
-}
-
-// src/components/Stack.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx6.default)(
-  "flex",
-  items === "start" && "items-start",
-  grow && "grow",
-  items === "start" && "items-start",
-  items === "center" && "items-center",
-  items === "end" && "items-end",
-  items === "start-center" && "items-start desktop:items-center",
-  justify === "start" && "justify-start",
-  justify === "center" && "justify-center",
-  justify === "end" && "justify-end",
-  justify === "end" && "justify-end",
-  justify === "between" && "justify-between",
-  justify === "around" && "justify-around"
-);
-var useGapClassNames = (sizing) => {
-  return (0, import_clsx6.default)(
-    sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
-    sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
-    sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
-    sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
-  );
-};
-var Stack = (_a) => {
-  var _b = _a, {
-    children,
-    items,
-    justify,
-    grow,
-    padding,
-    paddingX,
-    paddingY,
-    paddingBottom,
-    paddingTop,
-    paddingLeft,
-    paddingRight,
-    margin,
-    marginX,
-    marginY,
-    horizontal,
-    horizontalMobile,
-    elevation = 0,
-    rounded,
-    centered,
-    width,
-    minHeight,
-    maxWidth,
-    minWidth,
-    height,
-    maxHeight,
-    borderColor,
-    borderTopColor,
-    borderRightColor,
-    borderBottomColor,
-    borderLeftColor,
-    backgroundColor,
-    sizing = "none",
-    overflowY = "inherit",
-    overflowX = "inherit",
-    flexShrink,
-    flexGrow,
-    position,
-    top,
-    left,
-    id,
-    noGap,
-    marginTop,
-    marginBottom,
-    testid,
-    bottom,
-    zIndex,
-    flexWrap,
-    className,
-    unclipEdges
-  } = _b, props = __objRest(_b, [
-    "children",
-    "items",
-    "justify",
-    "grow",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "paddingBottom",
-    "paddingTop",
-    "paddingLeft",
-    "paddingRight",
-    "margin",
-    "marginX",
-    "marginY",
-    "horizontal",
-    "horizontalMobile",
-    "elevation",
-    "rounded",
-    "centered",
-    "width",
-    "minHeight",
-    "maxWidth",
-    "minWidth",
-    "height",
-    "maxHeight",
-    "borderColor",
-    "borderTopColor",
-    "borderRightColor",
-    "borderBottomColor",
-    "borderLeftColor",
-    "backgroundColor",
-    "sizing",
-    "overflowY",
-    "overflowX",
-    "flexShrink",
-    "flexGrow",
-    "position",
-    "top",
-    "left",
-    "id",
-    "noGap",
-    "marginTop",
-    "marginBottom",
-    "testid",
-    "bottom",
-    "zIndex",
-    "flexWrap",
-    "className",
-    "unclipEdges"
-  ]);
-  var _a2, _b2, _c, _d, _e, _f, _g;
-  const flexClassNames = getFlexClassNames({ items, justify, grow });
-  const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, props), {
-      style: __spreadValues({
-        height: height === "screen" ? "100vh" : height === "full" ? "100%" : height === void 0 ? void 0 : height === "fit" ? "fit-content" : typeof height === "string" && isNaN(+height) ? height : `${height}px`,
-        maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
-        maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
-        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
-        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
-        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
-        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
-        borderTop: borderTopColor ? `1px solid var(--color-${borderTopColor})` : void 0,
-        borderRight: borderRightColor ? `1px solid var(--color-${borderRightColor})` : void 0,
-        borderBottom: borderBottomColor ? `1px solid var(--color-${borderBottomColor})` : void 0,
-        borderLeft: borderLeftColor ? `1px solid var(--color-${borderLeftColor})` : void 0,
-        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
-        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
-        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
-        position: position !== void 0 ? position : void 0,
-        top: top !== void 0 ? `${top}px` : void 0,
-        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0,
-        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
-        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
-        zIndex: zIndex !== void 0 ? zIndex : void 0,
-        flexWrap,
-        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
-        gap: (_g = props.style) == null ? void 0 : _g.gap
-      }, props.style),
-      className: (0, import_clsx6.default)(
-        "scrollbar-thin",
-        "max-w-screen",
-        width !== "fit" && "w-full",
-        width === "full" && "w-full",
-        width === "max" && "w-max",
-        centered && "mx-auto",
-        overflowY == "auto" && "overflow-y-auto",
-        overflowY == "hidden" && "overflow-y-hidden",
-        overflowY == "scroll" && "overflow-y-scroll",
-        overflowX == "auto" && "overflow-x-auto",
-        overflowX == "hidden" && "overflow-x-hidden",
-        overflowX == "scroll" && "overflow-x-scroll",
-        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
-        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
-        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
-        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
-        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
-        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
-        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
-        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
-        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
-        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
-        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
-        paddingBottom && sizing === "container" && "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
-        paddingBottom && sizing === "layout" && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
-        paddingBottom && sizing === "layout-group" && "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
-        paddingBottom && sizing === "component" && "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
-        paddingTop && sizing === "container" && "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
-        paddingTop && sizing === "layout" && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
-        paddingTop && sizing === "layout-group" && "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
-        paddingTop && sizing === "component" && "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
-        paddingLeft && sizing === "container" && "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
-        paddingLeft && sizing === "layout" && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
-        paddingLeft && sizing === "layout-group" && "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
-        paddingLeft && sizing === "component" && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
-        paddingRight && sizing === "container" && "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
-        paddingRight && sizing === "layout" && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
-        paddingRight && sizing === "layout-group" && "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
-        paddingRight && sizing === "component" && "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-desktop-compact-component-padding",
-        margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
-        marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
-        marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
-        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
-        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
-        horizontal ? "desktop:flex-row" : "desktop:flex-col",
-        horizontalMobile ? "flex-row" : "flex-col",
-        flexClassNames,
-        !noGap && gapClassNames,
-        elevation === 0 && "shadow-none",
-        elevation === 2 && "shadow-2",
-        elevation === 4 && "shadow-4",
-        elevation === 16 && "shadow-16",
-        rounded && "rounded",
-        unclipEdges && "-m-0.75 p-1",
-        className
-      ),
-      children
-    })
-  );
-};
-
-// src/components/Time.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
-var Time = (_a) => {
-  var _b = _a, { onChange, format = "12h", id, testid } = _b, props = __objRest(_b, ["onChange", "format", "id", "testid"]);
-  const [showTimePicker, setShowTimePicker] = (0, import_react2.useState)(false);
-  const [hasInteracted, setHasInteracted] = (0, import_react2.useState)(false);
-  const inputRef = (0, import_react2.useRef)(null);
-  const inputContainerRef = (0, import_react2.useRef)(null);
-  const timeRef = (0, import_react2.useRef)(null);
-  const [timePosition, setTimePosition] = (0, import_react2.useState)({
-    top: 0,
-    left: 0,
-    width: 0
-  });
-  const [hour, setHour] = (0, import_react2.useState)(null);
-  const [minute, setMinute] = (0, import_react2.useState)(null);
-  const [meridiem, setMeridiem] = (0, import_react2.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react2.useState)("");
-  const is12HourFormat = format === "12h";
-  const formattedTime = hour && minute ? is12HourFormat ? meridiem ? `${hour}:${minute} ${meridiem}` : `${hour}:${minute}` : `${hour}:${minute}` : "";
-  const updatePosition = () => {
-    if (inputContainerRef.current) {
-      const rect = inputContainerRef.current.getBoundingClientRect();
-      setTimePosition({
-        top: rect.bottom + window.scrollY + 6,
-        left: rect.left + window.scrollX,
-        width: rect.width
-      });
-    }
-  };
-  (0, import_react2.useEffect)(() => {
-    if (showTimePicker) {
-      updatePosition();
-    }
-  }, [showTimePicker, is12HourFormat]);
-  (0, import_react2.useEffect)(() => {
-    const handleClickOutside = (event) => {
-      if (inputRef.current && timeRef.current && !inputRef.current.contains(event.target) && !timeRef.current.contains(event.target)) {
-        setShowTimePicker(false);
-      }
-    };
-    if (showTimePicker) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [showTimePicker, is12HourFormat]);
-  (0, import_react2.useEffect)(() => {
-    if (formattedTime && hasInteracted) {
-      setInputValue(formattedTime);
-      onChange == null ? void 0 : onChange({
-        target: { value: formattedTime }
-      });
-    }
-  }, [formattedTime, hasInteracted, onChange]);
-  const handleFocus = () => {
-    if (!props.disabled && !props.readOnly) {
-      setHasInteracted(true);
-      setShowTimePicker(true);
-      if (is12HourFormat && meridiem === null) {
-        setMeridiem("AM");
-      }
-    }
-  };
-  const handleSelect = (type, value) => {
-    if (type === "hour") setHour(value);
-    if (type === "minute") setMinute(value);
-    if (type === "meridiem") setMeridiem(value);
-    setTimeout(() => {
-      const allSet = (type === "hour" ? value : hour) && (type === "minute" ? value : minute) && (is12HourFormat ? type === "meridiem" ? value : meridiem : true);
-      if (allSet) {
-        setShowTimePicker(false);
-      }
-    }, 100);
-  };
-  (0, import_react2.useEffect)(() => {
-    if (!showTimePicker && formattedTime) {
-      setInputValue(formattedTime);
-    }
-  }, [showTimePicker, formattedTime]);
-  const handleInputChange = (e) => {
-    const value = e.target.value.toUpperCase().replace(/[^0-9:APM ]/gi, "").trim();
-    setInputValue(value);
-    if (value === "") {
-      setHour(null);
-      setMinute(null);
-      setMeridiem(null);
-      setShowTimePicker(true);
-    }
-    const match = value.match(
-      is12HourFormat ? /^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/ : /^(\d{1,2}):(\d{2})$/
-    );
-    if (match) {
-      const [, hRaw, mRaw, mer] = match;
-      const h = parseInt(hRaw, 10);
-      const m = parseInt(mRaw, 10);
-      if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
-        let hStr;
-        const mStr = m.toString().padStart(2, "0");
-        let meridiemValue = mer;
-        if (is12HourFormat) {
-          hStr = (h % 12 || 12).toString().padStart(2, "0");
-          if (h > 12) {
-            meridiemValue = "PM";
-          }
-          setHour(hStr);
-          setMinute(mStr);
-          if (meridiemValue) {
-            setMeridiem(meridiemValue);
-          }
-        } else {
-          hStr = h.toString().padStart(2, "0");
-          setHour(hStr);
-          setMinute(mStr);
-        }
-      }
-    }
-    onChange == null ? void 0 : onChange(e);
-  };
-  const selectedRefs = {
-    hour: (0, import_react2.useRef)(null),
-    minute: (0, import_react2.useRef)(null),
-    meridiem: (0, import_react2.useRef)(null)
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      setShowTimePicker(false);
-      return;
-    }
-    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-    e.preventDefault();
-    let h;
-    let m;
-    let mer;
-    if (hour === null || minute === null || is12HourFormat && meridiem === null) {
-      const now = /* @__PURE__ */ new Date();
-      h = now.getHours();
-      m = Math.round(now.getMinutes() / 5) * 5;
-      if (m === 60) {
-        m = 0;
-        h += 1;
-      }
-      if (is12HourFormat) {
-        mer = h >= 12 ? "PM" : "AM";
-        h = h % 12 || 12;
-      } else {
-        mer = "AM";
-      }
-    } else {
-      h = parseInt(hour, 10);
-      m = parseInt(minute, 10);
-      mer = meridiem || "AM";
-    }
-    const step = 5;
-    const remainder = m % step;
-    m += e.key === "ArrowDown" ? remainder === 0 ? step : step - remainder : -(remainder === 0 ? step : remainder);
-    if (m >= 60) {
-      m -= 60;
-      h += 1;
-    } else if (m < 0) {
-      m += 60;
-      h -= 1;
-    }
-    if (is12HourFormat) {
-      if (h > 12) {
-        h = 1;
-        mer = mer === "AM" ? "PM" : "AM";
-      } else if (h <= 0) {
-        h = 12;
-        mer = mer === "AM" ? "PM" : "AM";
-      }
-    } else {
-      h = (h + 24) % 24;
-    }
-    setHour(h.toString().padStart(2, "0"));
-    setMinute(m.toString().padStart(2, "0"));
-    if (is12HourFormat) setMeridiem(mer);
-  };
-  (0, import_react2.useEffect)(() => {
-    if (showTimePicker) {
-      setTimeout(() => {
-        var _a2, _b2, _c;
-        (_a2 = selectedRefs.hour.current) == null ? void 0 : _a2.scrollIntoView({
-          block: "nearest",
-          behavior: "instant"
-        });
-        (_b2 = selectedRefs.minute.current) == null ? void 0 : _b2.scrollIntoView({
-          block: "nearest",
-          behavior: "instant"
-        });
-        if (is12HourFormat) {
-          (_c = selectedRefs.meridiem.current) == null ? void 0 : _c.scrollIntoView({
-            block: "nearest",
-            behavior: "instant"
-          });
-        }
-      }, 0);
-    }
-  }, [
-    showTimePicker,
-    is12HourFormat,
-    selectedRefs.hour,
-    selectedRefs.minute,
-    selectedRefs.meridiem
-  ]);
-  const renderOptions = (items, type) => items.map((val) => {
-    const isSelected = type === "hour" && val === hour || type === "minute" && val === minute || type === "meridiem" && val === meridiem;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      TimeCell,
-      {
-        id: id ? `${id}-${type}-${val}` : void 0,
-        testid: testid ? `${testid}-${type}-${val}` : void 0,
-        selected: isSelected,
-        ref: isSelected ? (el) => {
-          selectedRefs[type].current = el;
-        } : null,
-        onClick: () => handleSelect(type, val),
-        className: (0, import_clsx7.default)("!size-10 cursor-pointer", typography.caption),
-        children: val
-      },
-      val
-    );
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative max-w-38", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      InputBase,
-      __spreadProps(__spreadValues({}, props), {
-        id,
-        testid,
-        ref: inputRef,
-        inputContainerRef,
-        value: inputValue,
-        placeholder: is12HourFormat ? "hh:mm am" : "hh:mm",
-        after: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "schedule" }) }),
-        onFocus: handleFocus,
-        caption: props.caption,
-        onChange: handleInputChange,
-        onKeyDown: handleKeyDown,
-        type: "text"
-      })
-    ),
-    showTimePicker && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        Stack,
-        {
-          id: id ? `${id}-timepicker` : void 0,
-          elevation: 4,
-          height: 240,
-          position: "absolute",
-          backgroundColor: "background-grouped-primary-normal",
-          overflowX: "hidden",
-          overflowY: "hidden",
-          zIndex: 50,
-          top: timePosition.top,
-          left: timePosition.left,
-          minWidth: timePosition.width,
-          maxWidth: 0,
-          rounded: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: timeRef, className: "px-4 flex h-60", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_clsx7.default)(timePickerScrollableStyle), children: renderOptions(
-              Array.from(
-                { length: is12HourFormat ? 12 : 24 },
-                (_, i) => (i + (is12HourFormat ? 1 : 0)).toString().padStart(2, "0")
-              ),
-              "hour"
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_clsx7.default)(timePickerScrollableStyle), children: renderOptions(
-              Array.from(
-                { length: 12 },
-                (_, i) => (i * 5).toString().padStart(2, "0")
-              ),
-              "minute"
-            ) }),
-            is12HourFormat && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "py-4", children: renderOptions(["AM", "PM"], "meridiem") })
-          ] })
-        }
-      ),
-      findDocumentRoot(timeRef.current)
-    )
-  ] });
-};
-function TimeCell(_a) {
-  var _b = _a, {
-    id,
-    testid,
-    selected = false,
-    start = false,
-    intermediate = false,
-    end = false,
-    today = false,
-    disabled = false,
-    onClick,
-    onHover,
-    onKeyDown,
-    children,
-    className,
-    ref
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "selected",
-    "start",
-    "intermediate",
-    "end",
-    "today",
-    "disabled",
-    "onClick",
-    "onHover",
-    "onKeyDown",
-    "children",
-    "className",
-    "ref"
-  ]);
-  const isDefault = !selected && !start && !intermediate && !end && !today;
-  const isToday = today && !selected && !start && !intermediate && !end;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "button",
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      onPointerOver: onHover,
-      onClick,
-      onKeyDown,
-      disabled,
-      ref,
-      className: (0, import_clsx7.default)(
-        "w-full h-full aspect-square flex items-center justify-center ",
-        isDefault && "text-neutral-500 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 disabled:pointer-events-none rounded",
-        isToday && "rounded-full border border-neutral-300 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 ",
-        selected && "text-white bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded",
-        start && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-l",
-        end && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-r",
-        intermediate && "bg-action-100 border-y border-action-400",
-        className
-      )
-    }, props), {
-      children
-    })
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Time
-});