@mittwald/flow-react-components 0.1.0-alpha.99 → 0.2.0-alpha.5

package/dist/js/LoadingSpinner-DH8362jb.js

@@ -0,0 +1,24 @@
+"use client"
+/* */
+import t from "react";
+import "@tabler/icons-react";
+import s from "clsx";
+import "html-react-parser";
+import "./propsContext-DzAKlmhS.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import "@mittwald/react-tunnel";
+import "./flowComponent-C9QB9J-7.js";
+import "react-children-utilities";
+import { I as p } from "./IconPending-DlKS1NEr.js";
+const e = "flow--loading-spinner", m = "flow--loading-spinner--spin", a = {
+  loadingSpinner: e,
+  spin: m
+}, y = (o) => {
+  const { className: n, ...i } = o, r = s(a.loadingSpinner, n);
+  return /* @__PURE__ */ t.createElement(p, { className: r, ...i });
+};
+export {
+  y as L
+};

package/dist/js/LoadingSpinner.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { L as o } from "./LoadingSpinner-DH8362jb.js";
+export {
+  o as LoadingSpinner,
+  o as default
+};

package/dist/js/Markdown.js

@@ -0,0 +1,57 @@
+"use client"
+/* */
+import l, { Children as f, isValidElement as s } from "react";
+import E from "react-markdown";
+import { L as u } from "./Link-BjtlPbYZ.js";
+import { T as m } from "./Text-BhUDxFAa.js";
+import { I as g } from "./InlineCode-6EfCoef4.js";
+import { H as o } from "./Heading-DaTyq1e0.js";
+import { S as k } from "./Separator-BCaor8Yd.js";
+import { C as N } from "./CodeBlock-DiZNiQX_.js";
+const w = "flow--markdown", r = {
+  markdown: w
+}, H = (d) => {
+  const { children: i, color: a = "default", ...h } = d, n = a === "default" ? "primary" : a, c = a === "default" ? void 0 : a, p = {
+    a: (e) => /* @__PURE__ */ l.createElement(u, { target: "_blank", color: n, href: e.href }, e.children),
+    p: (e) => /* @__PURE__ */ l.createElement(m, { elementType: "p", className: r.text, color: c }, e.children),
+    code: (e) => /* @__PURE__ */ l.createElement(g, { color: a }, e.children),
+    h1: (e) => /* @__PURE__ */ l.createElement(o, { className: r.heading, level: 1, color: n }, e.children),
+    h2: (e) => /* @__PURE__ */ l.createElement(o, { className: r.heading, level: 2, color: n }, e.children),
+    h3: (e) => /* @__PURE__ */ l.createElement(o, { className: r.heading, level: 3, color: n }, e.children),
+    h4: (e) => /* @__PURE__ */ l.createElement(o, { className: r.heading, level: 4, color: n }, e.children),
+    h5: (e) => /* @__PURE__ */ l.createElement(o, { className: r.heading, level: 5, color: n }, e.children),
+    h6: (e) => /* @__PURE__ */ l.createElement(o, { className: r.heading, level: 6, color: n }, e.children),
+    hr: () => /* @__PURE__ */ l.createElement(k, null),
+    pre: (e) => {
+      const t = f.toArray(
+        e.children
+      )[0];
+      if (typeof t != "string")
+        throw new Error("Element must be a string");
+      return /* @__PURE__ */ l.createElement(
+        N,
+        {
+          copyable: !1,
+          color: a,
+          language: s(t) && t.props.className ? t.props.className.replace("language-", "") : void 0,
+          code: s(t) ? t.props.children : t
+        }
+      );
+    },
+    ul: (e) => /* @__PURE__ */ l.createElement(m, { color: c }, /* @__PURE__ */ l.createElement("ul", null, e.children)),
+    ol: (e) => /* @__PURE__ */ l.createElement(m, { color: c }, /* @__PURE__ */ l.createElement("ol", null, e.children))
+  };
+  return /* @__PURE__ */ l.createElement(
+    E,
+    {
+      ...h,
+      components: p,
+      className: r.markdown
+    },
+    i
+  );
+};
+export {
+  H as Markdown,
+  H as default
+};

package/dist/js/MenuItem-D0jf0LCm.js

@@ -0,0 +1,60 @@
+"use client"
+/* */
+import e from "react";
+import * as x from "react-aria-components";
+import i from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as p } from "./PropsContextProvider.js";
+import "@tabler/icons-react";
+import "html-react-parser";
+import "@mittwald/react-tunnel";
+import { f as E } from "./flowComponent-C9QB9J-7.js";
+import "@react-aria/utils";
+import "remeda";
+import "react-children-utilities";
+import { I as d, a as v } from "./IconCheckboxEmpty-DNCq3YK6.js";
+import { I as C, a as N } from "./IconRadioOn-CJN6xiww.js";
+import { T as u } from "./Text-BhUDxFAa.js";
+import { d as f } from "./deepHas-KHS5X1F_.js";
+import { W as M } from "./Wrap-DGT1h1o3.js";
+import { A } from "./Avatar-DlCuVAxg.js";
+import { S as I } from "./Switch-BjUTojii.js";
+const R = "flow--menu-item", S = "flow--menu-item--icon", g = "flow--menu-item--text", y = "flow--menu-item--control-icon", O = "flow--menu-item--avatar", t = {
+  menuItem: R,
+  switch: "flow--menu-item--switch",
+  icon: S,
+  text: g,
+  controlIcon: y,
+  avatar: O
+}, T = (a) => {
+  const {
+    selectionMode: n,
+    isSelected: o,
+    selectionVariant: r = "control",
+    children: c
+  } = a, m = {
+    Icon: {
+      className: t.icon
+    },
+    Text: {
+      className: t.text
+    },
+    Avatar: {
+      className: t.avatar
+    }
+  }, s = {
+    Icon: {
+      className: i(t.controlIcon, t.icon)
+    },
+    Switch: {
+      className: i(t.controlIcon, t.switch)
+    }
+  }, l = n === "none" || r === "navigation" ? null : r === "switch" && o ? /* @__PURE__ */ e.createElement(I, { isReadOnly: !0, isSelected: !0 }) : r === "switch" && !o ? /* @__PURE__ */ e.createElement(I, { isReadOnly: !0 }) : n === "single" && o ? /* @__PURE__ */ e.createElement(C, null) : n === "single" && !o ? /* @__PURE__ */ e.createElement(N, null) : n === "multiple" && o ? /* @__PURE__ */ e.createElement(d, null) : /* @__PURE__ */ e.createElement(v, null), h = f(c, u), w = f(c, A);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(p, { props: s }, l), /* @__PURE__ */ e.createElement(p, { props: m }, /* @__PURE__ */ e.createElement(M, { if: !h && !w }, /* @__PURE__ */ e.createElement(u, null, c))));
+}, X = E("MenuItem", (a) => {
+  const { children: n, className: o, selectionVariant: r, ref: c, ...m } = a, s = i(t.menuItem, o);
+  return /* @__PURE__ */ e.createElement(x.MenuItem, { ...m, className: s, ref: c }, (l) => /* @__PURE__ */ e.createElement(T, { ...l, selectionVariant: r }, n));
+});
+export {
+  X as M
+};

package/dist/js/MenuItem.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { M as t } from "./MenuItem-D0jf0LCm.js";
+export {
+  t as MenuItem,
+  t as default
+};

package/dist/js/Message.js

@@ -0,0 +1,60 @@
+"use client"
+/* */
+import t from "react";
+import i from "clsx";
+import "@tabler/icons-react";
+import "html-react-parser";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as l } from "./PropsContextProvider.js";
+import "@mittwald/react-tunnel";
+import "./flowComponent-C9QB9J-7.js";
+import "@react-aria/utils";
+import "remeda";
+import "react-children-utilities";
+import { I as p } from "./IconContextMenu-CYVciJIG.js";
+const d = "flow--message", g = "flow--message--content", f = "flow--message--responder", u = "flow--message--header", h = "flow--message--user", N = "flow--message--date", w = "flow--message--action", x = "flow--message--right", e = {
+  message: d,
+  content: g,
+  responder: f,
+  header: u,
+  user: h,
+  date: N,
+  action: w,
+  right: x
+}, R = (s) => {
+  const { type: o = "sender", children: a, className: r, orientation: n = "left" } = s, c = i(
+    e.message,
+    e[o],
+    e[n],
+    r
+  ), m = {
+    Content: { className: e.content },
+    Header: {
+      className: e.header,
+      Button: {
+        className: e.action,
+        size: "s",
+        variant: "plain",
+        color: "secondary"
+      },
+      ContextMenuTrigger: {
+        Button: {
+          className: e.action,
+          size: "s",
+          variant: "plain",
+          color: "secondary",
+          children: /* @__PURE__ */ t.createElement(p, null)
+        }
+      },
+      Text: { className: e.date },
+      Align: {
+        className: e.user
+      }
+    }
+  };
+  return /* @__PURE__ */ t.createElement(l, { props: m }, /* @__PURE__ */ t.createElement("article", { className: c }, a));
+};
+export {
+  R as Message,
+  R as default
+};

package/dist/js/Modal.js

@@ -0,0 +1,104 @@
+"use client"
+/* */
+import o from "react";
+import p from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as g } from "./PropsContextProvider.js";
+import { TunnelProvider as u, TunnelExit as v } from "@mittwald/react-tunnel";
+import { f as w } from "./flowComponent-C9QB9J-7.js";
+import { O as h } from "./Overlay-DwzbTVgq.js";
+import { H as C } from "./Header-B7YWqkmp.js";
+import { A as E } from "./Action-DEIpraQq.js";
+import { B as z } from "./Button-BVX7ZUc-.js";
+import "@tabler/icons-react";
+import "html-react-parser";
+import "react-children-utilities";
+import { I as y } from "./IconClose-DN0Ute9B.js";
+import * as N from "react-aria-components";
+import { O } from "./OverlayTrigger-BZlDcOaA.js";
+const T = "flow--modal", x = "flow--modal--off-canvas", M = "flow--modal--header", P = "flow--modal--content", A = "flow--modal--action-group", G = "flow--modal--left", e = {
+  modal: T,
+  offCanvas: x,
+  header: M,
+  content: P,
+  actionGroup: A,
+  "size-s": "flow--modal--size-s",
+  "size-m": "flow--modal--size-m",
+  "modal-zoom": "flow--modal--modal-zoom",
+  "modal-slide-in-from-right": "flow--modal--modal-slide-in-from-right",
+  left: G,
+  "modal-slide-in-from-left": "flow--modal--modal-slide-in-from-left",
+  "modal-slide-up": "flow--modal--modal-slide-up"
+}, Q = w(
+  "Modal",
+  (t) => {
+    const {
+      size: l = "s",
+      offCanvas: r,
+      controller: a,
+      children: n,
+      ref: m,
+      className: s,
+      offCanvasOrientation: i = "right",
+      ...c
+    } = t, d = p(
+      r ? e.offCanvas : e.modal,
+      e[`size-${l}`],
+      e[i],
+      s
+    ), f = {
+      Content: {
+        className: e.content,
+        Section: {
+          Heading: {
+            level: 3
+          }
+        }
+      },
+      Heading: {
+        level: 2,
+        slot: "title",
+        tunnelId: "heading"
+      },
+      ActionGroup: {
+        className: e.actionGroup,
+        spacing: "m"
+      }
+    };
+    return /* @__PURE__ */ o.createElement(
+      h,
+      {
+        className: d,
+        controller: a,
+        ref: m,
+        ...c
+      },
+      /* @__PURE__ */ o.createElement(g, { props: f }, /* @__PURE__ */ o.createElement(u, null, /* @__PURE__ */ o.createElement(C, { className: e.header }, /* @__PURE__ */ o.createElement(v, { id: "heading" }), /* @__PURE__ */ o.createElement(E, { closeOverlay: "Modal" }, /* @__PURE__ */ o.createElement(
+        z,
+        {
+          variant: "plain",
+          color: "secondary",
+          className: e.closeButton,
+          onPress: a == null ? void 0 : a.close
+        },
+        /* @__PURE__ */ o.createElement(y, null)
+      ))), n))
+    );
+  }
+), U = (t) => {
+  const { children: l, ...r } = t;
+  return /* @__PURE__ */ o.createElement(
+    O,
+    {
+      overlayType: "Modal",
+      ...r,
+      component: N.DialogTrigger
+    },
+    l
+  );
+};
+export {
+  Q as Modal,
+  U as ModalTrigger,
+  Q as default
+};

package/dist/js/Navigation.js

@@ -0,0 +1,68 @@
+"use client"
+/* */
+import e, { useId as d } from "react";
+import v from "clsx";
+import { W as f } from "./Wrap-DGT1h1o3.js";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as i } from "./PropsContextProvider.js";
+import { d as E } from "./deepHas-KHS5X1F_.js";
+import { TunnelProvider as g, TunnelExit as p } from "@mittwald/react-tunnel";
+import { A as x } from "./Accordion-q8N9anCd.js";
+import { C as b } from "./Content-Bwd5EyIp.js";
+const w = "flow--navigation", N = "flow--navigation--item", C = "flow--navigation--icon", I = "flow--navigation--text", P = "flow--navigation--control-icon", h = "flow--navigation--avatar", r = {
+  navigation: w,
+  item: N,
+  switch: "flow--navigation--switch",
+  icon: C,
+  text: I,
+  controlIcon: P,
+  avatar: h
+}, B = (s) => {
+  const { className: t, children: n, ...a } = s, c = v(r.navigation, t), o = E(n, L), l = {
+    Link: {
+      wrapWith: /* @__PURE__ */ e.createElement("li", null),
+      className: r.item,
+      unstyled: !0,
+      Text: {
+        className: r.text
+      },
+      Icon: {
+        className: r.icon
+      }
+    }
+  };
+  return /* @__PURE__ */ e.createElement("nav", { className: c, role: "navigation", ...a }, /* @__PURE__ */ e.createElement(i, { props: l, mergeInParentContext: !0 }, /* @__PURE__ */ e.createElement(f, { if: !o }, /* @__PURE__ */ e.createElement("ul", null, n))));
+}, k = "flow--navigation--navigation-group", G = "flow--navigation--navigation-group--collapsable", y = "flow--navigation--navigation-group--label", u = {
+  navigationGroup: k,
+  collapsable: G,
+  label: y
+}, L = (s) => {
+  const { children: t, className: n, collapsable: a, ...c } = s, o = v(
+    u.navigationGroup,
+    a && u.collapsable,
+    n
+  ), l = d(), m = {
+    Label: {
+      id: l,
+      className: u.label,
+      "aria-hidden": !0
+    },
+    Link: {
+      tunnelId: "links"
+    }
+  };
+  return a ? /* @__PURE__ */ e.createElement(i, { mergeInParentContext: !0, props: m }, /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(x, { defaultExpanded: !0, className: o }, t, /* @__PURE__ */ e.createElement(b, { clearPropsContext: !1 }, /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement(p, { id: "links" })))))) : /* @__PURE__ */ e.createElement(i, { mergeInParentContext: !0, props: m }, /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(
+    "section",
+    {
+      "aria-labelledby": l,
+      className: o,
+      ...c
+    },
+    /* @__PURE__ */ e.createElement(i, { mergeInParentContext: !0, props: m }, t, /* @__PURE__ */ e.createElement(p, { id: "Label" }), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement(p, { id: "links" })))
+  )));
+};
+export {
+  B as Navigation,
+  L as NavigationGroup,
+  B as default
+};

package/dist/js/Notification.js

@@ -0,0 +1,71 @@
+"use client"
+/* */
+import o from "react";
+import g from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as w } from "./PropsContextProvider.js";
+import { d as h } from "./dynamic-ClpUSmEt.js";
+import { A as k } from "./AlertIcon-4NxFv6Na.js";
+import { L as x } from "./Link-BjtlPbYZ.js";
+import { B as C } from "./Button-BVX7ZUc-.js";
+import "@tabler/icons-react";
+import "html-react-parser";
+import "@mittwald/react-tunnel";
+import "./flowComponent-C9QB9J-7.js";
+import "@react-aria/utils";
+import "remeda";
+import "react-children-utilities";
+import { I as N } from "./IconClose-DN0Ute9B.js";
+const E = "flow--notification", L = "flow--notification--link", v = "flow--notification--heading", y = "flow--notification--text", P = "flow--notification--close", A = "flow--notification--info", B = "flow--notification--has-link", I = "flow--notification--warning", z = "flow--notification--danger", F = "flow--notification--success", t = {
+  notification: E,
+  link: L,
+  heading: v,
+  text: y,
+  close: P,
+  info: A,
+  hasLink: B,
+  warning: I,
+  danger: z,
+  success: F
+}, X = (a) => {
+  const {
+    children: c,
+    className: r,
+    status: i = "info",
+    role: l = "alert",
+    href: e,
+    onClick: s,
+    onClose: n,
+    autoClose: H,
+    ...m
+  } = a, f = g(
+    t.notification,
+    t[i],
+    (s || n || e) && t.hasLink,
+    r
+  ), p = {
+    Heading: {
+      className: t.heading,
+      level: 4,
+      children: h((u) => /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(k, { status: i }), u.children))
+    },
+    Text: {
+      className: t.text
+    }
+  }, d = n && /* @__PURE__ */ o.createElement(
+    C,
+    {
+      size: "s",
+      className: t.close,
+      variant: "plain",
+      color: "secondary",
+      onPress: n
+    },
+    /* @__PURE__ */ o.createElement(N, null)
+  );
+  return /* @__PURE__ */ o.createElement("div", { ...m, className: f, role: l }, /* @__PURE__ */ o.createElement(x, { unstyled: !0, href: e, className: t.link, onPress: s }, /* @__PURE__ */ o.createElement(w, { props: p }, c)), d);
+};
+export {
+  X as Notification,
+  X as default
+};

package/dist/js/NotificationProvider.js

@@ -0,0 +1,147 @@
+"use client"
+/* */
+var w = Object.defineProperty;
+var A = (o, t, e) => t in o ? w(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => A(o, typeof t != "symbol" ? t + "" : t, e);
+import s, { useRef as C, cloneElement as D, Suspense as v, createContext as E, useContext as N } from "react";
+import { u as g } from "./useSelector-DpU7_HMO.js";
+import { makeObservable as x, observable as y, action as u } from "mobx";
+import { Duration as m, DateTime as d } from "luxon";
+import b from "react-dom";
+import I from "clsx";
+import { LazyMotion as M, domAnimation as P, AnimatePresence as S, m as k } from "framer-motion";
+import { useIsSSR as L } from "react-aria";
+class R {
+  constructor() {
+    n(this, "duration", m.fromDurationLike(0));
+    n(this, "onDone");
+    n(this, "startedAt");
+    n(this, "pausedAt");
+    n(this, "runningTimeoutId");
+  }
+  start(t, e) {
+    if (this.startedAt)
+      throw new Error("Timer already started");
+    this.duration = m.fromDurationLike(t), this.onDone = e, this.startTimeout(this.duration);
+  }
+  restart() {
+    this.stop(), this.startTimeout(this.duration);
+  }
+  pause() {
+    this.clearTimeout();
+    const t = d.now();
+    this.pausedAt = t, this.startedAt || (this.startedAt = t);
+  }
+  resume() {
+    if (this.startedAt) {
+      if (this.pausedAt) {
+        const t = this.pausedAt.diff(this.startedAt), e = this.duration.minus(t);
+        this.startTimeout(e);
+      }
+    } else throw new Error("Timer not paused");
+  }
+  stop() {
+    this.clearTimeout(), this.startedAt = void 0, this.pausedAt = void 0;
+  }
+  get state() {
+    return this.pausedAt ? "paused" : this.startedAt ? "running" : "idle";
+  }
+  clearTimeout() {
+    this.runningTimeoutId && window.clearTimeout(this.runningTimeoutId), this.runningTimeoutId = void 0;
+  }
+  startTimeout(t) {
+    this.startedAt = d.now(), this.pausedAt = void 0, this.runningTimeoutId = window.setTimeout(() => {
+      this.stop(), this.onDone && this.onDone();
+    }, t.toMillis());
+  }
+}
+class r {
+  constructor() {
+    n(this, "notificationsData", /* @__PURE__ */ new Map());
+    n(this, "id", 0);
+    x(this, {
+      notificationsData: y.shallow,
+      add: u.bound,
+      remove: u.bound
+    });
+  }
+  static useNew() {
+    return C(new r()).current;
+  }
+  useNotifications() {
+    return g(() => Array.from(this.notificationsData.values()));
+  }
+  add(t) {
+    const e = this.id++, i = {
+      id: e,
+      createdAt: Date.now(),
+      autoCloseTimer: new R()
+    };
+    this.notificationsData.set(e, {
+      element: t,
+      meta: i
+    }), t.props.autoClose && i.autoCloseTimer.start({ seconds: 10 }, () => {
+      this.remove(e);
+    });
+  }
+  remove(t) {
+    this.notificationsData.delete(t);
+  }
+}
+const B = "flow--notification-provider--notification-container", O = "flow--notification-provider--notification", l = {
+  notificationContainer: B,
+  notification: O
+}, z = (o) => {
+  const { notification: t, controller: e } = o;
+  return D(t.element, {
+    onMouseEnter: () => {
+      t.meta.autoCloseTimer.pause();
+    },
+    onMouseLeave: () => {
+      t.meta.autoCloseTimer.resume();
+    },
+    onClose: () => {
+      var i, a;
+      e.remove(t.meta.id), (a = (i = t.element.props).onClose) == null || a.call(i);
+    },
+    onFocus: () => {
+      t.meta.autoCloseTimer.pause();
+    },
+    onBlur: () => {
+      t.meta.autoCloseTimer.resume();
+    }
+  });
+}, F = (o) => {
+  const { className: t, ...e } = o, i = j(), a = i.useNotifications(), h = L(), p = I(l.notificationContainer, t), T = /* @__PURE__ */ s.createElement(M, { features: P }, /* @__PURE__ */ s.createElement("div", { className: p, ...e }, /* @__PURE__ */ s.createElement(S, null, a.map((c) => /* @__PURE__ */ s.createElement(
+    k.div,
+    {
+      className: l.notification,
+      key: c.meta.id,
+      initial: { opacity: 0, x: 200 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 200, height: 0, paddingBottom: 0 },
+      transition: {
+        bounce: 0
+      }
+    },
+    /* @__PURE__ */ s.createElement(v, null, /* @__PURE__ */ s.createElement(
+      z,
+      {
+        notification: c,
+        controller: i
+      }
+    ))
+  )))));
+  return h ? null : b.createPortal(T, document.body);
+}, f = E(
+  new r()
+), j = () => N(f), X = (o) => {
+  const { children: t, ...e } = o, i = r.useNew();
+  return /* @__PURE__ */ s.createElement(f.Provider, { value: i }, /* @__PURE__ */ s.createElement(F, { ...e }), t);
+};
+export {
+  r as NotificationController,
+  X as NotificationProvider,
+  X as default,
+  j as useNotificationController
+};

package/dist/js/NumberField.js

@@ -0,0 +1,65 @@
+"use client"
+/* */
+import e from "react";
+import * as t from "react-aria-components";
+import { f as o } from "./FormField.module-CqWpTQKP.js";
+import u from "clsx";
+import { C as f } from "./ClearPropsContext-CUvsbMn8.js";
+import { PropsContextProvider as d } from "./PropsContextProvider.js";
+import "./propsContext-DzAKlmhS.js";
+import { F as E } from "./FieldError-DtGe3KyW.js";
+import { B as m } from "./Button-BVX7ZUc-.js";
+import "@tabler/icons-react";
+import "html-react-parser";
+import { f as N } from "./flowComponent-C9QB9J-7.js";
+import "react-children-utilities";
+import { I as b } from "./IconChevronDown-BVXwZfwo.js";
+import { I } from "./IconChevronUp-DBVo7TVu.js";
+import { I as F, a as C } from "./IconPlus-CFRrNZSE.js";
+const B = "flow--number-field--group", P = "flow--number-field--input", w = "flow--number-field--decrement-button", v = "flow--number-field--increment-button", x = "flow--number-field--coarse-pointer-icon", r = {
+  group: B,
+  input: P,
+  decrementButton: w,
+  incrementButton: v,
+  coarsePointerIcon: x
+}, H = N("NumberField", (n) => {
+  const { children: a, className: s, ref: l, ...c } = n, i = u(o.formField, s), p = {
+    Label: {
+      className: o.label,
+      optional: !n.isRequired
+    },
+    FieldDescription: {
+      className: o.fieldDescription
+    },
+    FieldError: {
+      className: o.customFieldError
+    }
+  };
+  return /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(t.NumberField, { ...c, className: i }, /* @__PURE__ */ e.createElement(t.Group, { className: r.group }, /* @__PURE__ */ e.createElement(
+    m,
+    {
+      ariaSlot: "decrement",
+      className: r.decrementButton,
+      size: "s",
+      variant: "plain",
+      color: "secondary"
+    },
+    /* @__PURE__ */ e.createElement(b, null),
+    /* @__PURE__ */ e.createElement(F, { className: r.coarsePointerIcon })
+  ), /* @__PURE__ */ e.createElement(t.Input, { className: r.input, ref: l }), /* @__PURE__ */ e.createElement(
+    m,
+    {
+      ariaSlot: "increment",
+      className: r.incrementButton,
+      size: "s",
+      variant: "plain",
+      color: "secondary"
+    },
+    /* @__PURE__ */ e.createElement(I, null),
+    /* @__PURE__ */ e.createElement(C, { className: r.coarsePointerIcon })
+  )), /* @__PURE__ */ e.createElement(d, { props: p }, a), /* @__PURE__ */ e.createElement(E, { className: o.fieldError })));
+});
+export {
+  H as NumberField,
+  H as default
+};