@sesamehr/react-design-system 3.10.0 → 3.10.1

package/dist/Forms/Inputs/DatePicker/DateRangePicker.js

@@ -0,0 +1,104 @@
+import { jsx as o, jsxs as A } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Popover as S } from "../../../Feedback/Popover/Popover.js";
+import { PopoverContent as C } from "../../../Feedback/Popover/PopoverContent.js";
+import { CalendarRange as H } from "../Calendar/CalendarRange.js";
+import { useCalendarLocale as L } from "../Calendar/useCalendarLocale.js";
+import { DatePickerHeader as M } from "./DatePickerHeader.js";
+import { DatePickerTrigger as U } from "./DatePickerTrigger.js";
+import c from "./DateRangePicker.module.css.js";
+import { formatDayRange as b } from "./format.js";
+const q = ({
+  className: P,
+  value: s,
+  defaultValue: g,
+  onValueChange: i,
+  visibleMonth: k,
+  onVisibleMonthChange: D,
+  onFocusDay: v,
+  months: m = 2,
+  constraints: l,
+  disabled: R = !1,
+  children: d,
+  icon: h,
+  aside: n,
+  day: x,
+  dataTestid: t
+}) => {
+  const { locale: y } = L(), [N, O] = p(g), e = s ?? N, [$, a] = p(!1), f = (r) => {
+    s === void 0 && O(r), i == null || i(r);
+  }, j = (r) => {
+    f(r), r.start && r.end && a(!1);
+  }, u = (r) => {
+    f(r), a(!1);
+  };
+  return /* @__PURE__ */ o(
+    S,
+    {
+      open: $,
+      onOpenChange: a,
+      trigger: /* @__PURE__ */ o(
+        U,
+        {
+          className: P,
+          empty: !(e != null && e.start) && !(e != null && e.end),
+          disabled: R,
+          icon: h,
+          dataTestid: t,
+          children: d ? d({ value: e }) : b(y, e == null ? void 0 : e.start, e == null ? void 0 : e.end)
+        }
+      ),
+      children: /* @__PURE__ */ o(
+        C,
+        {
+          align: "start",
+          sideOffset: 4,
+          dataTestid: `${t}-popover`,
+          children: /* @__PURE__ */ A("div", { className: c.oxDateRangePickerPanel, children: [
+            n && /* @__PURE__ */ o(
+              "aside",
+              {
+                className: c.oxDateRangePickerAside,
+                "data-testid": `${t}-aside`,
+                children: n({ select: u })
+              }
+            ),
+            /* @__PURE__ */ o(
+              "div",
+              {
+                className: c.oxDateRangePickerMonths,
+                style: { "--ox-date-picker-months": m },
+                children: /* @__PURE__ */ o(
+                  H,
+                  {
+                    value: e,
+                    onValueChange: j,
+                    visibleMonth: k,
+                    onVisibleMonthChange: D,
+                    onFocusDay: v,
+                    months: m,
+                    constraints: l,
+                    day: x,
+                    header: (r) => /* @__PURE__ */ o(
+                      M,
+                      {
+                        nav: r,
+                        constraints: l,
+                        dataTestid: `${t}-header`
+                      }
+                    ),
+                    dataTestid: `${t}-calendar`
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+};
+q.displayName = "OxDateRangePicker";
+export {
+  q as DateRangePicker
+};

package/dist/Forms/Inputs/DatePicker/DateRangePicker.module.css.js

@@ -0,0 +1,11 @@
+const e = "_oxDateRangePickerPanel_i62hi_2", a = "_oxDateRangePickerAside_i62hi_2", n = "_oxDateRangePickerMonths_i62hi_2", t = {
+  oxDateRangePickerPanel: e,
+  oxDateRangePickerAside: a,
+  oxDateRangePickerMonths: n
+};
+export {
+  t as default,
+  a as oxDateRangePickerAside,
+  n as oxDateRangePickerMonths,
+  e as oxDateRangePickerPanel
+};

package/dist/Forms/Inputs/DatePicker/format.js

@@ -0,0 +1,20 @@
+const a = (t, o, r) => {
+  const n = t;
+  return n.formatRange ? n.formatRange(o, r) : `${t.format(o)} – ${t.format(r)}`;
+}, m = (t) => new Intl.DateTimeFormat(t, { dateStyle: "medium" }), f = (t) => new Intl.DateTimeFormat(t, { month: "long", year: "numeric" }), e = (t, o) => m(t).format(o), c = (t, o, r) => o ? r ? a(m(t), o, r) : e(t, o) : r ? e(t, r) : "", i = (t, o) => f(t).format(o), h = (t, o, r) => a(f(t), o, r), s = (t, o) => new Intl.DateTimeFormat(t, { year: "numeric" }).format(o), F = (t, o) => new Intl.DateTimeFormat(t, { month: "short" }).format(o), R = (t, o) => new Intl.DateTimeFormat(t, { month: "short", year: "numeric" }).format(
+  o
+), u = (t, o, r) => a(
+  new Intl.DateTimeFormat(t, { year: "numeric" }),
+  o,
+  r
+);
+export {
+  e as formatDay,
+  c as formatDayRange,
+  F as formatMonthShort,
+  i as formatMonthYear,
+  h as formatMonthYearRange,
+  R as formatMonthYearShort,
+  s as formatYear,
+  u as formatYearRange
+};

package/dist/Forms/Inputs/DatePicker/month.js

@@ -0,0 +1,11 @@
+const n = (t) => t.getFullYear() * 12 + t.getMonth(), Y = (t, e = 0) => new Date(t.getFullYear(), t.getMonth() + e, 1), g = 100, R = 10, a = (t, e, l) => ({
+  first: e ? e.getFullYear() : t.getFullYear() - 100,
+  last: l ? l.getFullYear() : t.getFullYear() + 10
+});
+export {
+  g as YEARS_BACK,
+  R as YEARS_FORWARD,
+  n as monthIndex,
+  Y as monthOf,
+  a as yearRange
+};

package/dist/Forms/Inputs/DatePicker/useDatePickerHeader.js

@@ -0,0 +1,11 @@
+import { createContext as t, useContext as r } from "react";
+const n = t(null), o = "OxDatePickerMonthSelect and OxDatePickerYearSelect must be rendered inside OxDatePickerHeader.", a = () => {
+  const e = r(n);
+  if (!e) throw new Error(o);
+  return e;
+};
+export {
+  o as DATE_PICKER_HEADER_MISSING,
+  n as DatePickerHeaderContext,
+  a as useDatePickerHeader
+};

package/dist/Forms/Inputs/IconPicker/IconPicker.js

@@ -0,0 +1,80 @@
+import { jsx as v } from "react/jsx-runtime";
+import * as Q from "@radix-ui/react-popover";
+import { forwardRef as U, useState as r, useCallback as P, useEffect as W, useMemo as N } from "react";
+import { cn as X } from "../../../lib/utils.js";
+import Y from "./IconPicker.module.css.js";
+import { matchesTerm as Z, IconPickerContextObject as _ } from "./useIconPicker.js";
+const $ = U(
+  ({
+    className: R,
+    children: T,
+    disabled: m = !1,
+    value: e,
+    defaultValue: q,
+    onValueChange: o,
+    open: s,
+    defaultOpen: z = !1,
+    onOpenChange: c,
+    dataTestid: A
+  }, B) => {
+    const d = e !== void 0 && o !== void 0, l = s !== void 0 && c !== void 0, [D, a] = r(e ?? q), [F, G] = r(e), [H, M] = r(s ?? z), [J, K] = r(s), [p, O] = r(""), [x, I] = r(
+      () => /* @__PURE__ */ new Map()
+    );
+    !d && e !== F && (G(e), a(e)), !l && s !== J && (K(s), s !== void 0 && M(s));
+    const S = d ? e : D, k = l ? s : H, i = P(
+      (t) => {
+        l || M(t), c == null || c(t), t || O("");
+      },
+      [l, c]
+    ), j = P(
+      (t) => {
+        d || a(t), o == null || o(t), i(!1);
+      },
+      [d, o, i]
+    );
+    W(() => {
+      m && k && i(!1);
+    }, [m, k, i]);
+    const y = P((t, n) => (I((u) => {
+      const f = new Map(u);
+      return f.set(t, n), f;
+    }), () => I((u) => {
+      const f = new Map(u);
+      return f.delete(t), f;
+    })), []), w = P(
+      (t, n) => Z(p, [t, ...n ?? []]),
+      [p]
+    ), E = N(
+      () => [...x].some(
+        ([t, n]) => w(t, n)
+      ),
+      [x, w]
+    ), L = N(
+      () => ({
+        value: S,
+        disabled: m,
+        select: j,
+        term: p,
+        setTerm: O,
+        matches: w,
+        register: y,
+        hasMatches: E
+      }),
+      [S, m, j, p, w, y, E]
+    );
+    return /* @__PURE__ */ v(_.Provider, { value: L, children: /* @__PURE__ */ v(Q.Root, { open: k, onOpenChange: i, children: /* @__PURE__ */ v(
+      "div",
+      {
+        ref: B,
+        "data-slot": "icon-picker",
+        "data-testid": A,
+        className: X(Y.oxIconPicker, R),
+        children: T
+      }
+    ) }) });
+  }
+);
+$.displayName = "OxIconPicker";
+export {
+  $ as IconPicker
+};

package/dist/Forms/Inputs/IconPicker/IconPicker.module.css.js

@@ -0,0 +1,7 @@
+const o = "_oxIconPicker_42unp_2", c = {
+  oxIconPicker: o
+};
+export {
+  c as default,
+  o as oxIconPicker
+};

package/dist/Forms/Inputs/IconPicker/IconPickerContent.js

@@ -0,0 +1,84 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-popover";
+import * as C from "@radix-ui/react-radio-group";
+import { IconSearch as N } from "@sesame/orxata-icons/IconSearch";
+import { Icon as D } from "@sesame/orxata-icons/react";
+import { forwardRef as S, useRef as p } from "react";
+import t from "./IconPickerContent.module.css.js";
+import { useIconPicker as g } from "./useIconPicker.js";
+import { useTranslate as R } from "../../../Locale/useTranslate.js";
+import { Surface as b } from "../../../internal/Surface/Surface.js";
+const w = 16, O = S(
+  ({
+    children: d,
+    side: h = "bottom",
+    sideOffset: f = 4,
+    align: P = "start",
+    dataTestid: n,
+    ...k
+  }, I) => {
+    const c = R(), r = g(), i = p(null), s = p(null), x = (e) => r.select(e), v = (e) => {
+      var a;
+      e.preventDefault(), (a = i.current) == null || a.focus();
+    }, y = (e) => {
+      var a, l;
+      e.key === "ArrowDown" && (e.preventDefault(), (l = (a = s.current) == null ? void 0 : a.querySelector('[role="radio"]:not([disabled])')) == null || l.focus());
+    };
+    return /* @__PURE__ */ o(u.Portal, { children: /* @__PURE__ */ o(
+      u.Content,
+      {
+        ref: I,
+        asChild: !0,
+        "data-slot": "icon-picker-content",
+        "data-testid": n,
+        side: h,
+        sideOffset: f,
+        collisionPadding: w,
+        align: P,
+        onOpenAutoFocus: v,
+        ...k,
+        children: /* @__PURE__ */ m(b, { children: [
+          /* @__PURE__ */ m("div", { className: t.oxIconPickerSearch, "data-slot": "search", children: [
+            /* @__PURE__ */ o(
+              D,
+              {
+                icon: N,
+                className: t.oxIconPickerSearchIcon
+              }
+            ),
+            /* @__PURE__ */ o(
+              "input",
+              {
+                ref: i,
+                type: "search",
+                className: t.oxIconPickerSearchInput,
+                "data-testid": `${n}-search`,
+                placeholder: c("orxata.iconPicker.search"),
+                "aria-label": c("orxata.iconPicker.search"),
+                value: r.term,
+                onChange: (e) => r.setTerm(e.target.value),
+                onKeyDown: y
+              }
+            )
+          ] }),
+          /* @__PURE__ */ o(
+            C.Root,
+            {
+              ref: s,
+              value: r.value ?? "",
+              "aria-label": c("orxata.iconPicker.label"),
+              className: t.oxIconPickerGrid,
+              onValueChange: x,
+              children: d
+            }
+          ),
+          !r.hasMatches && /* @__PURE__ */ o("p", { className: t.oxIconPickerEmpty, children: c("orxata.iconPicker.empty") })
+        ] })
+      }
+    ) });
+  }
+);
+O.displayName = "OxIconPickerContent";
+export {
+  O as IconPickerContent
+};

package/dist/Forms/Inputs/IconPicker/IconPickerContent.module.css.js

@@ -0,0 +1,15 @@
+const c = "_oxIconPickerSearch_38wfq_2", o = "_oxIconPickerSearchIcon_38wfq_2", r = "_oxIconPickerSearchInput_38wfq_2", e = "_oxIconPickerGrid_38wfq_2", n = "_oxIconPickerEmpty_38wfq_2", I = {
+  oxIconPickerSearch: c,
+  oxIconPickerSearchIcon: o,
+  oxIconPickerSearchInput: r,
+  oxIconPickerGrid: e,
+  oxIconPickerEmpty: n
+};
+export {
+  I as default,
+  n as oxIconPickerEmpty,
+  e as oxIconPickerGrid,
+  c as oxIconPickerSearch,
+  o as oxIconPickerSearchIcon,
+  r as oxIconPickerSearchInput
+};

package/dist/Forms/Inputs/IconPicker/IconPickerItem.js

@@ -0,0 +1,31 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-radio-group";
+import { Icon as x } from "@sesame/orxata-icons/react";
+import { forwardRef as P, useEffect as N } from "react";
+import { cn as k } from "../../../lib/utils.js";
+import c from "./IconPickerItem.module.css.js";
+import { useIconPicker as j } from "./useIconPicker.js";
+const u = P(({ className: n, value: o, icon: s, keywords: r, children: p, ...I }, a) => {
+  const i = j(), { register: m } = i, t = r == null ? void 0 : r.join("\0");
+  return N(
+    () => m(o, t ? t.split("\0") : void 0),
+    [m, o, t]
+  ), i.matches(o, r) ? /* @__PURE__ */ f(
+    l.Item,
+    {
+      ref: a,
+      value: o,
+      "data-slot": "icon-picker-item",
+      className: k(c.oxIconPickerItem, n),
+      ...I,
+      children: [
+        /* @__PURE__ */ e(x, { icon: s, className: c.oxIconPickerItemIcon }),
+        /* @__PURE__ */ e("span", { className: c.oxIconPickerItemName, children: p })
+      ]
+    }
+  ) : null;
+});
+u.displayName = "OxIconPickerItem";
+export {
+  u as IconPickerItem
+};

package/dist/Forms/Inputs/IconPicker/IconPickerItem.module.css.js

@@ -0,0 +1,11 @@
+const o = "_oxIconPickerItem_1ysu8_2", c = "_oxIconPickerItemIcon_1ysu8_2", e = "_oxIconPickerItemName_1ysu8_2", I = {
+  oxIconPickerItem: o,
+  oxIconPickerItemIcon: c,
+  oxIconPickerItemName: e
+};
+export {
+  I as default,
+  o as oxIconPickerItem,
+  c as oxIconPickerItemIcon,
+  e as oxIconPickerItemName
+};

package/dist/Forms/Inputs/IconPicker/IconPickerTrigger.js

@@ -0,0 +1,53 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import * as f from "@radix-ui/react-popover";
+import { IconChevronDown as I } from "@sesame/orxata-icons/IconChevronDown";
+import { Icon as t } from "@sesame/orxata-icons/react";
+import { forwardRef as P } from "react";
+import { cn as h } from "../../../lib/utils.js";
+import { useFieldControl as k } from "../../Field/useFieldGroup.js";
+import o from "./IconPickerTrigger.module.css.js";
+import { useIconPicker as u } from "./useIconPicker.js";
+const x = P(({ className: n, icon: i, placeholder: a = "", children: s, id: l, ...m }, d) => {
+  const e = u(), p = k(l), c = e.value === void 0 || e.value === "";
+  return /* @__PURE__ */ r(f.Trigger, { asChild: !0, children: /* @__PURE__ */ g(
+    "button",
+    {
+      ref: d,
+      type: "button",
+      ...p,
+      "data-slot": "controller",
+      className: h(o.oxIconPickerTrigger, n),
+      ...m,
+      disabled: e.disabled,
+      children: [
+        i && /* @__PURE__ */ r(
+          t,
+          {
+            icon: i,
+            "data-slot": "icon",
+            className: o.oxIconPickerTriggerIcon
+          }
+        ),
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: o.oxIconPickerTriggerValue,
+            "data-placeholder": c ? "" : void 0,
+            children: c ? a : s
+          }
+        ),
+        /* @__PURE__ */ r("span", { "data-slot": "icon", className: o.oxIconPickerTriggerChevron, children: /* @__PURE__ */ r(
+          t,
+          {
+            icon: I,
+            className: o.oxIconPickerTriggerGlyph
+          }
+        ) })
+      ]
+    }
+  ) });
+});
+x.displayName = "OxIconPickerTrigger";
+export {
+  x as IconPickerTrigger
+};

package/dist/Forms/Inputs/IconPicker/IconPickerTrigger.module.css.js

@@ -0,0 +1,15 @@
+const r = "_oxIconPickerTrigger_151al_2", o = "_oxIconPickerTriggerIcon_151al_2", c = "_oxIconPickerTriggerValue_151al_2", e = "_oxIconPickerTriggerChevron_151al_2", g = "_oxIconPickerTriggerGlyph_151al_2", i = {
+  oxIconPickerTrigger: r,
+  oxIconPickerTriggerIcon: o,
+  oxIconPickerTriggerValue: c,
+  oxIconPickerTriggerChevron: e,
+  oxIconPickerTriggerGlyph: g
+};
+export {
+  i as default,
+  r as oxIconPickerTrigger,
+  e as oxIconPickerTriggerChevron,
+  g as oxIconPickerTriggerGlyph,
+  o as oxIconPickerTriggerIcon,
+  c as oxIconPickerTriggerValue
+};

package/dist/Forms/Inputs/IconPicker/useIconPicker.js

@@ -0,0 +1,24 @@
+import { createContext as i, useContext as s } from "react";
+const a = "[OxIconPicker] An icon picker part was used outside `<OxIconPicker>`. The trigger, the panel and every item read the chosen value and the search term from the root.", u = i(
+  null
+);
+function h() {
+  const e = s(u);
+  if (!e) throw new Error(a);
+  return e;
+}
+function r(e) {
+  return e.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+}
+function m(e, n) {
+  const t = r(e).split(/\s+/).filter(Boolean);
+  if (t.length === 0) return !0;
+  const o = n.map(r).join(" ");
+  return t.every((c) => o.includes(c));
+}
+export {
+  u as IconPickerContextObject,
+  m as matchesTerm,
+  r as normalize,
+  h as useIconPicker
+};

package/dist/Forms/Inputs/Input.module.css.js

@@ -0,0 +1,7 @@
+const t = "_oxInput_1b30t_2", n = {
+  oxInput: t
+};
+export {
+  n as default,
+  t as oxInput
+};

package/dist/Forms/Inputs/InputGroup/InputGroup.js

@@ -0,0 +1,20 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { cn as a } from "../../../lib/utils.js";
+import n from "./InputGroup.module.css.js";
+const e = s(
+  ({ className: o, children: r, ...p }, t) => /* @__PURE__ */ m(
+    "span",
+    {
+      ref: t,
+      "data-slot": "controller",
+      className: a(n.oxInputGroup, o),
+      ...p,
+      children: r
+    }
+  )
+);
+e.displayName = "OxInputGroup";
+export {
+  e as InputGroup
+};

package/dist/Forms/Inputs/InputGroup/InputGroup.module.css.js

@@ -0,0 +1,7 @@
+const o = "_oxInputGroup_h37nn_2", t = {
+  oxInputGroup: o
+};
+export {
+  t as default,
+  o as oxInputGroup
+};

package/dist/Forms/Inputs/InputNumber/InputNumber.js

@@ -0,0 +1,90 @@
+import { jsx as z } from "react/jsx-runtime";
+import { forwardRef as A, useState as B, useCallback as v, useMemo as E } from "react";
+import { cn as F } from "../../../lib/utils.js";
+import { inputSizeClass as G } from "../inputSize.js";
+import H from "./InputNumber.module.css.js";
+import { InputNumberContext as J } from "./InputNumberContext.js";
+function I(m, l, f) {
+  let o = m;
+  return l !== void 0 && (o = Math.max(o, l)), f !== void 0 && (o = Math.min(o, f)), o;
+}
+const K = A(
+  ({
+    className: m,
+    children: l,
+    size: f = "md",
+    value: o,
+    defaultValue: D = null,
+    onValueChange: i,
+    min: t,
+    max: r,
+    step: n = 1,
+    disabled: c = !1,
+    ...O
+  }, R) => {
+    const [U, q] = B(
+      D
+    ), N = o !== void 0, e = N ? o : U, u = v(
+      (s) => {
+        N || q(s), i == null || i(s);
+      },
+      [N, i]
+    ), p = e ?? t ?? 0, d = v(() => {
+      c || u(I(p + n, t, r));
+    }, [c, u, p, n, t, r]), y = v(() => {
+      c || u(I(p - n, t, r));
+    }, [c, u, p, n, t, r]), M = v(
+      (s) => {
+        if (s.trim() === "") {
+          u(null);
+          return;
+        }
+        const k = Number(s);
+        Number.isNaN(k) || u(I(k, t, r));
+      },
+      [u, t, r]
+    ), S = !c && (r === void 0 || (e ?? t ?? 0) < r), b = !c && (t === void 0 || (e ?? t ?? 0) > t), j = e == null ? "" : String(e), w = E(
+      () => ({
+        value: e ?? null,
+        setInputValue: M,
+        increment: d,
+        decrement: y,
+        canIncrement: S,
+        canDecrement: b,
+        disabled: c,
+        min: t,
+        max: r,
+        step: n,
+        displayValue: j
+      }),
+      [
+        e,
+        M,
+        d,
+        y,
+        S,
+        b,
+        c,
+        t,
+        r,
+        n,
+        j
+      ]
+    );
+    return /* @__PURE__ */ z(J.Provider, { value: w, children: /* @__PURE__ */ z(
+      "div",
+      {
+        ref: R,
+        role: "group",
+        "data-slot": "input-number",
+        className: F(H.oxInputNumber, G[f], m),
+        ...O,
+        children: l
+      }
+    ) });
+  }
+);
+K.displayName = "OxInputNumber";
+export {
+  K as InputNumber
+};

package/dist/Forms/Inputs/InputNumber/InputNumber.module.css.js

@@ -0,0 +1,7 @@
+const t = "_oxInputNumber_1j8f7_2", u = {
+  oxInputNumber: t
+};
+export {
+  u as default,
+  t as oxInputNumber
+};

package/dist/Forms/Inputs/InputNumber/InputNumberContent.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { cn as p } from "../../../lib/utils.js";
+import s from "./InputNumberContent.module.css.js";
+const a = n(({ className: t, children: o, ...r }, m) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: m,
+    "data-slot": "controller",
+    className: p(s.oxInputNumberContent, t),
+    ...r,
+    children: o
+  }
+));
+a.displayName = "OxInputNumberContent";
+export {
+  a as InputNumberContent
+};

package/dist/Forms/Inputs/InputNumber/InputNumberContent.module.css.js

@@ -0,0 +1,7 @@
+const t = "_oxInputNumberContent_1g6fq_2", n = {
+  oxInputNumberContent: t
+};
+export {
+  n as default,
+  t as oxInputNumberContent
+};

package/dist/Forms/Inputs/InputNumber/InputNumberContext.js

@@ -0,0 +1,16 @@
+import { createContext as e, useContext as n } from "react";
+const u = e(
+  null
+);
+function r() {
+  const t = n(u);
+  if (!t)
+    throw new Error(
+      "InputNumber components must be used within <InputNumber>."
+    );
+  return t;
+}
+export {
+  u as InputNumberContext,
+  r as useInputNumberContext
+};