@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/amount-input.js

@@ -1,15 +1,21 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef } from "react";
 import { ChevronDown } from "lucide-react";
-import { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from "./currency-select.js";
-import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from "./ui.js";
+import { CurrencyOptionList, getCurrency } from "./currency-option-list.js";
+import { useComboboxCore } from "./combobox-core.js";
+import {
+  FIELD_BASE,
+  FIELD_DISPLAY,
+  FIELD_INVALID,
+  FLOATING_INPUT_CLASS,
+  FloatingField
+} from "./field-base.js";
 import { cn } from "../lib/cn.js";
 import { currencyMinorDigits } from "../lib/format.js";
-import { usePhoneLayout } from "../hooks/use-breakpoint.js";
+import { roundHalfAway } from "../lib/round.js";
 import { CalculatorButton } from "./calculator.js";
 import { NumberPadSheet } from "./numpad-sheet.js";
-import { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from "./dropdown.js";
 import {
   DEFAULT_COMMON_LABELS,
   DEFAULT_CURRENCY_LABELS,
@@ -25,23 +31,23 @@ import {
   sanitizeLive,
   splitLeadingSign
 } from "../lib/calc.js";
-import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks.js";
-import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import {
+  FieldCaption,
+  LockedReason,
+  mergeRefs
+} from "./field-parts.js";
+import { useEndWidth, useNumericField } from "./numeric-field.js";
 function settleAmount(text, digits, min, max) {
   const t = text.trim();
   if (!/^-?\d*\.?\d*$/.test(t) || !/\d/.test(t)) return text;
   let n = Number(t);
   if (!Number.isFinite(n)) return text;
-  if (digits !== void 0) {
-    const magnitude = Number(`${Math.round(Number(`${Math.abs(n)}e${digits}`))}e-${digits}`);
-    n = n < 0 ? -magnitude : magnitude;
-  }
+  if (digits !== void 0) n = roundHalfAway(n, digits);
   if (min !== void 0 && n < min) n = min;
   if (max !== void 0 && n > max) n = max;
   const out = formatResult(n);
   return Number(out) === Number(t) ? text : out;
 }
-const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 const TONE_CLASS = {
   neutral: "",
   outflow: "text-money-neg",
@@ -55,281 +61,251 @@ function isResultOf(previous, text, settle) {
   const n = evaluateExpression(previous);
   return n !== null && settle(formatResult(n)) === text.trim();
 }
-const AmountInput = forwardRef(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, error, calculator = true, className, inputClassName, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
-    const generatedId = useId();
-    const fieldId = id ?? generatedId;
-    const hintId = useId();
-    const errorId = useId();
-    const textHint = typeof hint === "string" && hint !== "" || typeof hint === "number";
-    const hasError = hasMessage(error);
-    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);
-    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === "true";
-    const editable = !!onCurrencyChange;
-    const isMobile = usePhoneLayout();
-    const showCalc = calculator && !disabled && !isMobile;
-    const [focused, setFocused] = useState(false);
-    const showNumpad = isMobile && !disabled && focused;
-    const asDisplay = variant === "display" && isMobile;
-    const trailingRoom = asDisplay ? currency ? editable ? "pe-16" : "pe-12" : void 0 : showCalc ? currency ? editable ? "pe-24" : "pe-16" : "pe-10" : currency ? editable ? "pe-20" : "pe-14" : void 0;
-    const innerRef = useRef(null);
-    const setRefs = useCallback(
-      (el) => {
-        innerRef.current = el;
-        if (typeof ref === "function") ref(el);
-        else if (ref) ref.current = el;
-      },
-      [ref]
-    );
-    const signOwned = onNegativeChange !== void 0;
-    const shown = negative && isBareAmount(value) ? `-${value}` : value;
-    const locale = useKitLocale();
-    const mark = decimalMark(locale);
-    const [draft, setDraft] = useState(null);
-    const displayDigits = digitsProp ?? currencyMinorDigits(currency);
-    const resting = focused ? shown : settleAmount(shown, displayDigits);
-    const derived = localizeMark(resting, mark);
-    const display = draft === null ? derived : showsTyped(draft, mark, shown) ? draft : (
-      // The caller owns the sign: the typed "12" is shown as the "-12" it is.
-      signOwned && negative && shown.startsWith("-") && showsTyped(draft, mark, shown.slice(1)) ? `-${draft}` : derived
-    );
-    const digits = digitsProp ?? currencyMinorDigits(currency);
-    const settle = (text) => settleAmount(text, digits, min, max);
-    const handleText = (raw, previous = shown) => {
-      const text = sanitizeLive(raw);
-      if (!signOwned) {
-        onChange(text);
-        return;
-      }
-      const { sign, rest } = splitLeadingSign(text);
-      if (sign) {
-        onNegativeChange(sign === "-");
-      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text, settle)) {
-        onNegativeChange(false);
-      }
-      onChange(sign ? rest : text);
-    };
-    const commit = () => {
-      setDraft(null);
-      const settled = settle(commitExpression(shown));
-      handleText(settled);
-      onCommit?.(settled);
-    };
-    const typed = (raw) => {
-      setDraft(raw);
-      handleText(readTyped(raw, mark));
-    };
-    const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();
-    const chipRef = useRef(null);
-    const currencyOverrides = useMemo(() => {
-      const out = {};
-      if (labels?.currency !== void 0) out.currency = labels.currency;
-      if (labels?.currencySearch !== void 0) out.search = labels.currencySearch;
-      return out;
-    }, [labels?.currency, labels?.currencySearch]);
-    const currencyText = useKitLabels("currency", DEFAULT_CURRENCY_LABELS, currencyOverrides);
-    const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-    const selected = getCurrency(currency);
-    const filtered = useMemo(() => {
-      const q = query.trim().toLocaleLowerCase(locale);
-      if (!q) return CURRENCIES;
-      return CURRENCIES.filter(
-        (c) => c.code.toLowerCase().includes(q) || // The name the row SHOWS, so a translated list is searchable in the
-        // language it is written in.
-        currencyName(c, currencyNames, locale).toLocaleLowerCase(locale).includes(q) || c.symbol.toLowerCase().includes(q)
-      );
-    }, [query, currencyNames, locale]);
-    return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("w-full", className), children: [
-      /* @__PURE__ */ jsxs(
-        FloatingField,
-        {
-          className: "w-full",
-          htmlFor: fieldId,
-          label,
-          srOnlyLabel: asDisplay,
-          hint: textHint ? void 0 : hint,
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: setRefs,
-                id: fieldId,
-                "aria-label": ariaLabel,
-                type: "text",
-                autoFocus,
-                inputMode: isMobile ? "none" : "decimal",
-                autoComplete: "off",
-                disabled,
-                placeholder: asDisplay ? placeholder ?? "0" : label !== void 0 ? " " : placeholder,
-                value: display,
-                onChange: (e) => typed(e.target.value),
-                onFocus: () => setFocused(true),
-                onBlur: () => {
-                  commit();
-                  setFocused(false);
-                },
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") commit();
-                },
-                className: cn(
-                  // With a label, use the floating-input padding (pt-4 pb-1) like every
-                  // other labelled field so the value sits BELOW the floated label rather
-                  // than vertically centred where it overlaps the resting label
-                  // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +
-                  // transparent-placeholder bits.
-                  asDisplay ? DISPLAY_INPUT_CLASS : label !== void 0 ? FLOATING_INPUT_CLASS : FIELD_BASE,
-                  // The plain end padding, with nothing trailing: cosmetic, so the caller's
-                  // to change (keksdose 0.24 — a symmetric `px-2` in a budget cell).
-                  !trailingRoom && (asDisplay ? "pe-0" : "pe-3"),
-                  // Centred display shape: centre in what is LEFT of the currency chip.
-                  // `text-center` alone would centre the figure in the whole box, i.e.
-                  // partly underneath the chip; the padding below is what takes the chip
-                  // out of the centring, and nothing is added at the start because a
-                  // mirrored reservation would spend the width twice (see `align`).
-                  asDisplay && align === "center" && "text-center",
-                  // Over the base class's own text colour.
-                  TONE_CLASS[tone],
-                  // The caller's, over all of the above — base, plain padding, alignment and
-                  // tone — and under only what the field needs to work (see `inputClassName`).
-                  inputClassName,
-                  // Room for the trailing controls, after the caller's so a `px-2` cannot run
-                  // the digits under the chip (NumberInput's order, which reserves its unit
-                  // and calculator the same way).
-                  trailingRoom,
-                  invalid && FIELD_INVALID
-                ),
-                "aria-invalid": invalid || void 0,
-                "aria-describedby": describedBy,
-                "aria-required": ariaRequired
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "absolute flex items-center gap-0.5",
-                  // Logical `end-*`: the chip and the calculator are the figure's trailing
-                  // controls, so a right-to-left form carries them on the left.
-                  asDisplay ? "bottom-1 end-0" : "inset-y-1 end-1"
+function AmountInput(props) {
+  const { ref, value, onChange, currency, onCurrencyChange, placeholder, label, className, inputClassName, id, "aria-label": ariaLabel, "aria-required": ariaRequired, autoFocus, tone = "neutral", negative = false, onNegativeChange, align = "start", labels, currencyNames, currencyOptions, digits: digitsProp, min, max, onCommit, disabledReasonDisplay } = props;
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const signOwned = onNegativeChange !== void 0;
+  const shown = negative && isBareAmount(value) ? `-${value}` : value;
+  const locale = useKitLocale(props.locale);
+  const digits = digitsProp ?? currencyMinorDigits(currency);
+  const settle = (text) => settleAmount(text, digits, min, max);
+  const numeric = useNumericField(props, {
+    settle,
+    display: (focused) => focused ? shown : settleAmount(shown, digits)
+  });
+  const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, draft, setDraft, derived } = numeric;
+  const invalid = numeric.isInvalid;
+  const editable = !!onCurrencyChange && !locked;
+  const hasEnd = showCalc || Boolean(currency);
+  const [endRef, endWidth] = useEndWidth(hasEnd);
+  const trailingRoom = asDisplay ? currency ? editable ? "pe-16" : "pe-12" : void 0 : showCalc ? currency ? editable ? "pe-24" : "pe-16" : "pe-10" : currency ? editable ? "pe-20" : "pe-14" : void 0;
+  const innerRef = useRef(null);
+  const setRefs = useMemo(() => mergeRefs(innerRef, ref), [ref]);
+  const display = draft === null ? derived : numeric.typedFor(shown) ?? // The caller owns the sign: the typed "12" is shown as the "-12" it is.
+  (signOwned && negative && shown.startsWith("-") && numeric.typedFor(shown.slice(1)) !== null ? `-${draft}` : derived);
+  const handleText = (raw, previous = shown) => {
+    const text = sanitizeLive(raw);
+    if (!signOwned) {
+      onChange(text);
+      return;
+    }
+    const { sign, rest } = splitLeadingSign(text);
+    if (sign) {
+      onNegativeChange(sign === "-");
+    } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text, settle)) {
+      onNegativeChange(false);
+    }
+    onChange(sign ? rest : text);
+  };
+  const commit = () => {
+    setDraft(null);
+    const settled = settle(commitExpression(shown));
+    handleText(settled);
+    onCommit?.(settled);
+  };
+  const typed = (raw) => handleText(numeric.read(raw));
+  const core = useComboboxCore({ filter: false, backCloses: true });
+  const { open, setOpen, closeToTrigger, triggerRef: chipRef } = core;
+  const listboxId = `${generatedId}-currencies`;
+  if (!editable && open) setOpen(false);
+  const currencyLabel = labels?.currency;
+  const currencySearchLabel = labels?.currencySearch;
+  const currencyOverrides = useMemo(() => {
+    const out = {};
+    if (currencyLabel !== void 0) out.currency = currencyLabel;
+    if (currencySearchLabel !== void 0) out.search = currencySearchLabel;
+    return out;
+  }, [currencyLabel, currencySearchLabel]);
+  const currencyText = useKitLabels("currency", DEFAULT_CURRENCY_LABELS, currencyOverrides);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const selected = getCurrency(currency);
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx(LockedOrNot, { lock, display: disabledReasonDisplay, children: /* @__PURE__ */ jsxs(
+      FloatingField,
+      {
+        className: "w-full",
+        htmlFor: fieldId,
+        label,
+        srOnlyLabel: asDisplay,
+        hint: numeric.hint.labelHint,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: setRefs,
+              id: fieldId,
+              "aria-label": ariaLabel,
+              type: "text",
+              autoFocus,
+              inputMode: isMobile ? "none" : "decimal",
+              autoComplete: "off",
+              disabled: off,
+              readOnly: locked || void 0,
+              "aria-disabled": locked || void 0,
+              placeholder: asDisplay ? placeholder ?? "0" : label !== void 0 ? " " : placeholder,
+              value: display,
+              onChange: (e) => {
+                if (!locked) typed(e.target.value);
+              },
+              onFocus: () => setFocused(true),
+              onBlur: () => {
+                if (!locked) commit();
+                setFocused(false);
+              },
+              onKeyDown: (e) => {
+                if (e.key !== "Enter") return;
+                if (locked) e.preventDefault();
+                else commit();
+              },
+              className: cn(
+                // With a label, use the floating-input padding (pt-4 pb-1) like every
+                // other labelled field so the value sits BELOW the floated label rather
+                // than vertically centred where it overlaps the resting label
+                // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +
+                // transparent-placeholder bits.
+                asDisplay ? DISPLAY_INPUT_CLASS : label !== void 0 ? FLOATING_INPUT_CLASS : FIELD_BASE,
+                // The plain end padding, with nothing trailing: cosmetic, so the caller's
+                // to change (keksdose 0.24 — a symmetric `px-2` in a budget cell).
+                !trailingRoom && (asDisplay ? "pe-0" : "pe-3"),
+                // Centred display shape: centre in what is LEFT of the currency chip.
+                // `text-center` alone would centre the figure in the whole box, i.e.
+                // partly underneath the chip; the padding below is what takes the chip
+                // out of the centring, and nothing is added at the start because a
+                // mirrored reservation would spend the width twice (see `align`).
+                asDisplay && align === "center" && "text-center",
+                // Over the base class's own text colour.
+                TONE_CLASS[tone],
+                // The caller's, over all of the above — base, plain padding, alignment and
+                // tone — and under only what the field needs to work (see `inputClassName`).
+                inputClassName,
+                // Room for the trailing controls, after the caller's so a `px-2` cannot run
+                // the digits under the chip (NumberInput's order, which reserves its unit
+                // and calculator the same way).
+                trailingRoom,
+                invalid && FIELD_INVALID,
+                locked && "cursor-not-allowed"
+              ),
+              style: hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + (asDisplay ? 4 : 8) } : void 0,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": numeric.describedBy,
+              "aria-required": ariaRequired
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: endRef,
+              className: cn(
+                "absolute flex items-center gap-0.5",
+                // Logical `end-*`: the chip and the calculator are the figure's trailing
+                // controls, so a right-to-left form carries them on the left.
+                asDisplay ? "bottom-1 end-0" : "inset-y-1 end-1"
+              ),
+              children: [
+                showCalc && /* @__PURE__ */ jsx(
+                  CalculatorButton,
+                  {
+                    value: derived,
+                    onChange: (result, expression) => {
+                      setDraft(null);
+                      const settled = settle(result);
+                      handleText(settled, expression);
+                      onCommit?.(settled);
+                    },
+                    className: "px-1.5",
+                    "aria-label": labels?.calculatorTrigger,
+                    labels: labels?.calculator
+                  }
                 ),
-                children: [
-                  showCalc && /* @__PURE__ */ jsx(
-                    CalculatorButton,
-                    {
-                      value: derived,
-                      onChange: (result, expression) => {
-                        setDraft(null);
-                        const settled = settle(result);
-                        handleText(settled, expression);
-                        onCommit?.(settled);
-                      },
-                      className: "px-1.5",
-                      ariaLabel: labels?.calculatorTrigger,
-                      labels: labels?.calculator
-                    }
-                  ),
-                  currency && !editable && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      "aria-hidden": true,
-                      className: cn(
-                        "pointer-events-none px-1 font-medium text-[var(--text-muted)]",
-                        // A text-xs chip next to a 36px figure reads as a stray footnote.
-                        asDisplay ? "text-sm" : "text-xs"
-                      ),
-                      children: currency
-                    }
-                  ),
-                  currency && editable && /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      ref: chipRef,
-                      type: "button",
-                      onClick: () => setOpen((v) => !v),
-                      "aria-label": (
-                        // "Currency: EUR" through `common.fieldValue`, not a template literal:
-                        // the colon-and-space is punctuation a translation has to own.
-                        selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency
-                      ),
-                      className: cn(
-                        "flex items-center gap-1 rounded px-2 py-1 font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
-                        asDisplay ? "text-sm" : "text-xs"
-                      ),
-                      children: [
-                        currency,
-                        /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            editable && open && /* @__PURE__ */ jsx(
-              DropdownPanel,
-              {
-                anchorRef: chipRef,
-                panelRef,
-                empty: filtered.length === 0,
-                header: /* @__PURE__ */ jsx(
-                  DropdownSearchHeader,
+                currency && !editable && /* @__PURE__ */ jsx(
+                  "span",
                   {
-                    query,
-                    onQueryChange: setQuery,
-                    inputRef,
-                    placeholder: currencyText.search
+                    "aria-hidden": true,
+                    className: cn(
+                      "pointer-events-none px-1 font-medium text-muted",
+                      // A text-xs chip next to a 36px figure reads as a stray footnote.
+                      asDisplay ? "text-sm" : "text-xs"
+                    ),
+                    children: currency
                   }
                 ),
-                children: filtered.map((c) => {
-                  const active = c.code === selected?.code;
-                  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        onCurrencyChange?.(c.code);
-                        setOpen(false);
-                      },
-                      className: cn(
-                        "flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]",
-                        active && "bg-[var(--bg-active)]"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx(CurrencyFlag, { country: c.country }),
-                        /* @__PURE__ */ jsx("span", { className: "font-mono text-[var(--text-muted)] w-8 shrink-0 text-xs", children: c.symbol }),
-                        /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: c.code }),
-                        /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)] truncate text-xs", children: currencyName(c, currencyNames, locale) })
-                      ]
-                    }
-                  ) }, c.code);
-                })
+                currency && editable && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    ref: chipRef,
+                    type: "button",
+                    onClick: () => setOpen((v) => !v),
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": open,
+                    "aria-controls": listboxId,
+                    "aria-label": (
+                      // "Currency: EUR" through `common.fieldValue`, not a template literal:
+                      // the colon-and-space is punctuation a translation has to own.
+                      selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency
+                    ),
+                    className: cn(
+                      "flex items-center gap-1 rounded px-2 py-1 font-medium text-secondary hover:bg-hover",
+                      asDisplay ? "text-sm" : "text-xs"
+                    ),
+                    children: [
+                      currency,
+                      /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          editable && /* @__PURE__ */ jsx(
+            CurrencyOptionList,
+            {
+              core,
+              listboxId,
+              value: currency,
+              codes: currencyOptions,
+              currencyNames,
+              locale,
+              searchPlaceholder: currencyText.search,
+              sheetTitle: currencyText.currency,
+              onChoose: (code) => {
+                onCurrencyChange?.(code);
+                closeToTrigger();
               }
-            )
-          ]
-        }
-      ),
-      textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-caption leading-tight text-[var(--text-muted)]", children: hint }),
-      hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error }),
-      showNumpad && /* @__PURE__ */ jsx(
-        NumberPadSheet,
-        {
-          value: display,
-          onChange: typed,
-          onResult: (result) => {
-            setDraft(null);
-            const settled = settle(result);
-            handleText(settled);
-            onCommit?.(settled);
-          },
-          onDone: () => innerRef.current?.blur(),
-          label,
-          labels: labels?.pad,
-          decimalMark: mark
-        }
-      )
-    ] });
-  }
-);
-AmountInput.displayName = "AmountInput";
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FieldCaption, { parts: numeric.hint }),
+    numeric.errorEl,
+    showNumpad && /* @__PURE__ */ jsx(
+      NumberPadSheet,
+      {
+        value: display,
+        onChange: typed,
+        onResult: (result) => {
+          setDraft(null);
+          const settled = settle(result);
+          handleText(settled);
+          onCommit?.(settled);
+        },
+        onDone: () => innerRef.current?.blur(),
+        label,
+        labels: labels?.pad,
+        decimalMark: mark
+      }
+    )
+  ] });
+}
+function LockedOrNot({
+  lock,
+  display,
+  children
+}) {
+  if (!lock.locked) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(LockedReason, { lock, display, className: "block w-full", children });
+}
 export {
   AmountInput
 };