@clubmed/trident-ui 1.6.0 → 1.6.1-beta.2

package/molecules/Forms/Filter.js

@@ -1,68 +1,5 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { c as g } from "../../chunks/clsx.js";
-import { useId as C } from "react";
-/* empty css                    */
-import { Icon as l } from "@clubmed/trident-icons";
-import { useValue as S } from "../../hooks/useValue.js";
-import { useInternalStatus as V } from "../../hooks/useInternalStatus.js";
-function q(d) {
-  const m = C(), {
-    id: r = m,
-    name: n = r,
-    className: u,
-    dataTestId: p,
-    disabled: t = !1,
-    checked: h = !1,
-    value: s,
-    tabIndex: f = 0,
-    validationStatus: x = "default",
-    errorMessage: i,
-    onChange: b,
-    hasDropdown: k,
-    children: v,
-    ...N
-  } = d, { value: o, setValue: w } = S({
-    name: n,
-    initialValue: h,
-    onChange(I, c) {
-      b?.(I, c ? s !== void 0 ? s : c : null);
-    }
-  }), D = V({
-    isDisabled: t,
-    validationStatus: x
-  }) === "error" && i;
-  return /* @__PURE__ */ a("div", { className: g(u, "relative"), children: [
-    /* @__PURE__ */ a("label", { "data-testid": `filter-container-${r}`, className: "relative", children: [
-      /* @__PURE__ */ e(
-        "input",
-        {
-          ...N,
-          name: n,
-          "data-testid": p,
-          type: "checkbox",
-          tabIndex: f,
-          onChange: () => {
-            t || w(!o);
-          },
-          checked: o,
-          "data-name": "Filter",
-          disabled: t,
-          value: s
-        }
-      ),
-      /* @__PURE__ */ a("span", { children: [
-        /* @__PURE__ */ e("span", { className: "font-semibold", children: v }),
-        /* @__PURE__ */ e(l, { className: "check", width: null, name: "CheckDefault", color: "black" }),
-        k && /* @__PURE__ */ e(l, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
-      ] })
-    ] }),
-    D && /* @__PURE__ */ a("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
-      /* @__PURE__ */ e(l, { name: "Error", width: "20px" }),
-      i
-    ] })
-  ] });
-}
+import { Filter as o } from "../../ui/forms/Filter.js";
 export {
-  q as Filter
+  o as Filter
 };
 //# sourceMappingURL=Filter.js.map

package/molecules/Forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\n\nexport interface FilterProps<Value = string> extends FormControlProps<Value> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    onChange,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            if (!disabled) setValue(!checked);\n          }}\n          checked={checked}\n          data-name=\"Filter\"\n          disabled={disabled}\n          value={value as any}\n        />\n        <span>\n          <span className=\"font-semibold\">{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\n      </label>\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","validationStatus","errorMessage","onChange","hasDropdown","children","rest","checked","setValue","useValue","shouldDisplayErrorMessage","useInternalStatus","clsx","jsxs","jsx","Icon"],"mappings":";;;;;;;AAiBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDhB,GAEE,EAAE,OAAOiB,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAf;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMa,GAAS;AACtB,MAAAJ,IAAWT,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD,GAOKG,IALiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAI;AAAA,EAAA,CACD,MAEoD,WAAWC;AAEhE,2BACG,OAAA,EAAI,WAAWU,EAAKjB,GAAW,UAAU,GACxC,UAAA;AAAA,IAAA,gBAAAkB,EAAC,WAAM,eAAa,oBAAoBpB,CAAE,IAAI,WAAU,YACtD,UAAA;AAAA,MAAA,gBAAAqB;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGR;AAAA,UACJ,MAAAZ;AAAA,UACA,eAAaE;AAAA,UACb,MAAK;AAAA,UACL,UAAAI;AAAA,UACA,UAAU,MAAM;AACd,YAAKH,KAAUW,EAAS,CAACD,CAAO;AAAA,UAClC;AAAA,UACA,SAAAA;AAAA,UACA,aAAU;AAAA,UACV,UAAAV;AAAA,UACA,OAAAE;AAAA,QAAA;AAAA,MAAA;AAAA,wBAED,QAAA,EACC,UAAA;AAAA,QAAA,gBAAAe,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAT,EAAA,CAAS;AAAA,QAE1C,gBAAAS,EAACC,KAAK,WAAU,SAAQ,OAAO,MAAM,MAAK,gBAAe,OAAM,QAAA,CAAQ;AAAA,QAEtEX,KACC,gBAAAU,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,MAAA,EAAA,CAE9E;AAAA,IAAA,GACF;AAAA,IAECL,KACC,gBAAAG,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,MAC/Bb;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"Filter.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/Forms/FormControl.d.ts

@@ -1,14 +1 @@
-import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
-import { ValidationStatus } from '../../hooks/useInternalStatus';
-import { FormLabelProps } from './FormLabel';
-export type FormControlProps<Value = unknown, Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>> = {
-    value?: Value;
-    label?: ReactNode;
-    labelClassName?: string;
-    validationStatus?: ValidationStatus;
-    onChange?: (name: string, value: Value) => void;
-    dataTestId?: string;
-    dataName?: string;
-    errorMessage?: string;
-} & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;
-export declare const FormControl: <Value = string>({ id, label, description, disabled, required, className, validationStatus, children, errorMessage, dataTestId, dataName, labelClassName, hideRequiredStar, layout, }: FormControlProps<Value>) => import("react/jsx-runtime").JSX.Element;
+export * from '../../ui/forms/FormControl';

package/molecules/Forms/FormControl.js

@@ -1,54 +1,5 @@
-import { jsxs as h, jsx as s } from "react/jsx-runtime";
-import { useInternalStatus as F } from "../../hooks/useInternalStatus.js";
-import { FormLabel as S } from "./FormLabel.js";
-import { c as j } from "../../chunks/clsx.js";
-import { FormControlError as C } from "./FormControlError.js";
-const y = ({
-  id: r,
-  label: t,
-  description: a,
-  disabled: e,
-  required: l,
-  className: m,
-  validationStatus: n = "default",
-  children: i,
-  errorMessage: o,
-  dataTestId: c,
-  dataName: d,
-  labelClassName: f,
-  hideRequiredStar: p,
-  layout: u
-}) => {
-  const x = F({
-    isDisabled: !!e,
-    validationStatus: n
-  }) === "error" && o;
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      className: j("flex flex-col gap-4", m),
-      "data-name": d,
-      "data-testid": c,
-      children: [
-        t && r && /* @__PURE__ */ s(
-          S,
-          {
-            description: a,
-            id: r,
-            layout: u,
-            required: l,
-            hideRequiredStar: p,
-            className: f,
-            children: t
-          }
-        ),
-        i,
-        x && /* @__PURE__ */ s(C, { children: o })
-      ]
-    }
-  );
-};
+import { FormControl as m } from "../../ui/forms/FormControl.js";
 export {
-  y as FormControl
+  m as FormControl
 };
 //# sourceMappingURL=FormControl.js.map

package/molecules/Forms/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sources":["../../../lib/molecules/Forms/FormControl.tsx"],"sourcesContent":["import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';\nimport { useInternalStatus, type ValidationStatus } from '@/hooks/useInternalStatus';\nimport { FormLabel, type FormLabelProps } from './FormLabel';\nimport clsx from 'clsx';\nimport { FormControlError } from '@/molecules/Forms/FormControlError';\n\nexport type FormControlProps<\n  Value = unknown,\n  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>,\n> = {\n  value?: Value;\n  label?: ReactNode;\n  labelClassName?: string;\n  validationStatus?: ValidationStatus;\n  onChange?: (name: string, value: Value) => void;\n  dataTestId?: string;\n  dataName?: string;\n  errorMessage?: string;\n} & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;\n\nexport const FormControl = <Value = string,>({\n  id,\n  label,\n  description,\n  disabled,\n  required,\n  className,\n  validationStatus = 'default',\n  children,\n  errorMessage,\n  dataTestId,\n  dataName,\n  labelClassName,\n  hideRequiredStar,\n  layout,\n}: FormControlProps<Value>) => {\n  const internalStatus = useInternalStatus({\n    isDisabled: !!disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={clsx('flex flex-col gap-4', className)}\n      data-name={dataName}\n      data-testid={dataTestId}\n    >\n      {label && id && (\n        <FormLabel\n          description={description}\n          id={id}\n          layout={layout}\n          required={required}\n          hideRequiredStar={hideRequiredStar}\n          className={labelClassName}\n        >\n          {label}\n        </FormLabel>\n      )}\n\n      {children}\n\n      {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n    </div>\n  );\n};\n"],"names":["FormControl","id","label","description","disabled","required","className","validationStatus","children","errorMessage","dataTestId","dataName","labelClassName","hideRequiredStar","layout","shouldDisplayErrorMessage","useInternalStatus","jsxs","clsx","jsx","FormLabel","FormControlError"],"mappings":";;;;;AAoBO,MAAMA,IAAc,CAAkB;AAAA,EAC3C,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,QAAAC;AACF,MAA+B;AAM7B,QAAMC,IALiBC,EAAkB;AAAA,IACvC,YAAY,CAAC,CAACZ;AAAA,IACd,kBAAAG;AAAA,EAAA,CACD,MAEoD,WAAWE;AAEhE,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAK,uBAAuBZ,CAAS;AAAA,MAChD,aAAWK;AAAA,MACX,eAAaD;AAAA,MAEZ,UAAA;AAAA,QAAAR,KAASD,KACR,gBAAAkB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAAjB;AAAA,YACA,IAAAF;AAAA,YACA,QAAAa;AAAA,YACA,UAAAT;AAAA,YACA,kBAAAQ;AAAA,YACA,WAAWD;AAAA,YAEV,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJM;AAAA,QAEAO,KAA6B,gBAAAI,EAACE,GAAA,EAAkB,UAAAZ,EAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpE;"}
+{"version":3,"file":"FormControl.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/Forms/FormControlError.d.ts

@@ -1,2 +1 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export declare function FormControlError({ children, className, ...args }: PropsWithChildren<HTMLAttributes<HTMLSpanElement>>): import("react/jsx-runtime").JSX.Element;
+export * from '../../ui/forms/FormControlError';

package/molecules/Forms/FormControlError.js

@@ -1,26 +1,5 @@
-import { jsxs as e, jsx as m } from "react/jsx-runtime";
-import { twMerge as s } from "../../helpers/twMerge.js";
-import { Icon as x } from "@clubmed/trident-icons";
-import { c as a } from "../../chunks/clsx.js";
-function f({
-  children: r,
-  className: t,
-  ...o
-}) {
-  return /* @__PURE__ */ e(
-    "span",
-    {
-      ...o,
-      "data-testid": "FormControlError",
-      className: a("text-red", s("text-b4 flex items-start gap-x-4 px-20", t)),
-      children: [
-        /* @__PURE__ */ m(x, { name: "Error", width: "20px" }),
-        r
-      ]
-    }
-  );
-}
+import { FormControlError as m } from "../../ui/forms/FormControlError.js";
 export {
-  f as FormControlError
+  m as FormControlError
 };
 //# sourceMappingURL=FormControlError.js.map

package/molecules/Forms/FormControlError.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControlError.js","sources":["../../../lib/molecules/Forms/FormControlError.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport { twMerge } from '@/helpers/twMerge';\nimport { Icon } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\n\nexport function FormControlError({\n  children,\n  className,\n  ...args\n}: PropsWithChildren<HTMLAttributes<HTMLSpanElement>>) {\n  return (\n    <span\n      {...args}\n      data-testid=\"FormControlError\"\n      className={clsx('text-red', twMerge('text-b4 flex items-start gap-x-4 px-20', className))}\n    >\n      <Icon name=\"Error\" width=\"20px\" />\n      {children}\n    </span>\n  );\n}\n"],"names":["FormControlError","children","className","args","jsxs","clsx","twMerge","jsx","Icon"],"mappings":";;;;AAKO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAuD;AACrD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,eAAY;AAAA,MACZ,WAAWE,EAAK,YAAYC,EAAQ,0CAA0CJ,CAAS,CAAC;AAAA,MAExF,UAAA;AAAA,QAAA,gBAAAK,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,QAC/BP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"FormControlError.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/Forms/FormLabel.d.ts

@@ -1,8 +1 @@
-import { LabelHTMLAttributes } from 'react';
-export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-    description?: string;
-    layout?: 'horizontal' | `horizontal-${string}` | 'vertical';
-    required?: boolean;
-    hideRequiredStar?: boolean;
-}
-export declare const FormLabel: ({ id, description, layout, required, className, children, hideRequiredStar, ...rest }: FormLabelProps) => import("react/jsx-runtime").JSX.Element;
+export * from '../../ui/forms/FormLabel';

package/molecules/Forms/FormLabel.js

@@ -1,37 +1,5 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { c as m } from "../../chunks/clsx.js";
-const p = ({
-  id: s,
-  description: l,
-  layout: e = "horizontal",
-  required: t,
-  className: a,
-  children: r,
-  hideRequiredStar: o = !t,
-  ...c
-}) => /* @__PURE__ */ i(
-  "label",
-  {
-    ...c,
-    htmlFor: s,
-    className: m(
-      "text-b3 font-semibold text-black flex",
-      {
-        "ps-20": e.includes("horizontal") && !e.includes("no-padding"),
-        "flex-wrap items-center": e.includes("horizontal"),
-        "flex-col items-start": e.includes("vertical")
-      },
-      a
-    ),
-    "data-name": "InputLabel",
-    children: [
-      r,
-      t && !o && /* @__PURE__ */ n("span", { children: "*" }),
-      l && /* @__PURE__ */ n("span", { className: "ms-12 text-b4 text-grey font-normal", children: l })
-    ]
-  }
-);
+import { FormLabel as e } from "../../ui/forms/FormLabel.js";
 export {
-  p as FormLabel
+  e as FormLabel
 };
 //# sourceMappingURL=FormLabel.js.map

package/molecules/Forms/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../lib/molecules/Forms/FormLabel.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { LabelHTMLAttributes } from 'react';\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  description?: string;\n  layout?: 'horizontal' | `horizontal-${string}` | 'vertical';\n  required?: boolean;\n  hideRequiredStar?: boolean;\n}\n\nexport const FormLabel = ({\n  id,\n  description,\n  layout = 'horizontal',\n  required,\n  className,\n  children,\n  hideRequiredStar = !required,\n  ...rest\n}: FormLabelProps) => {\n  return (\n    <label\n      {...rest}\n      htmlFor={id}\n      className={clsx(\n        'text-b3 font-semibold text-black flex',\n        {\n          'ps-20': layout.includes('horizontal') && !layout.includes('no-padding'),\n          'flex-wrap items-center': layout.includes('horizontal'),\n          'flex-col items-start': layout.includes('vertical'),\n        },\n        className,\n      )}\n      data-name=\"InputLabel\"\n    >\n      {children}\n      {required && !hideRequiredStar && <span>*</span>}\n      {description && <span className=\"ms-12 text-b4 text-grey font-normal\">{description}</span>}\n    </label>\n  );\n};\n"],"names":["FormLabel","id","description","layout","required","className","children","hideRequiredStar","rest","jsxs","clsx","jsx"],"mappings":";;AAUO,MAAMA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC,IAAmB,CAACH;AAAA,EACpB,GAAGI;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,SAASP;AAAA,IACT,WAAWS;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAASP,EAAO,SAAS,YAAY,KAAK,CAACA,EAAO,SAAS,YAAY;AAAA,QACvE,0BAA0BA,EAAO,SAAS,YAAY;AAAA,QACtD,wBAAwBA,EAAO,SAAS,UAAU;AAAA,MAAA;AAAA,MAEpDE;AAAA,IAAA;AAAA,IAEF,aAAU;AAAA,IAET,UAAA;AAAA,MAAAC;AAAA,MACAF,KAAY,CAACG,KAAoB,gBAAAI,EAAC,UAAK,UAAA,KAAC;AAAA,MACxCT,KAAe,gBAAAS,EAAC,QAAA,EAAK,WAAU,uCAAuC,UAAAT,EAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"FormLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/Forms/NumberField.d.ts

@@ -1,320 +1 @@
-import { ChangeEvent } from 'react';
-import { FormControlProps } from './FormControl.js';
-interface NumberFieldProps extends FormControlProps<number> {
-    min?: number;
-    max?: number;
-}
-export declare function useNumberField(props: NumberFieldProps): {
-    id: string;
-    min: number;
-    max: number;
-    name: string;
-    value: number;
-    dataTestId: string;
-    disabled: boolean;
-    handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
-    increase: () => void;
-    decrease: () => void;
-    label?: import('react').ReactNode;
-    labelClassName?: string;
-    validationStatus?: import('../../hooks/useInternalStatus').ValidationStatus;
-    dataName?: string;
-    errorMessage?: string;
-    form?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    style?: import('react').CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    pattern?: string | undefined | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined | undefined;
-    lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
-    role?: import('react').AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCapitalize?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
-    children?: import('react').ReactNode;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined | undefined;
-    onCopy?: (import('react').ClipboardEventHandler<HTMLInputElement> & import('react').ClipboardEventHandler<HTMLLabelElement>) | undefined;
-    onCopyCapture?: (import('react').ClipboardEventHandler<HTMLInputElement> & import('react').ClipboardEventHandler<HTMLLabelElement>) | undefined;
-    onCut?: (import('react').ClipboardEventHandler<HTMLInputElement> & import('react').ClipboardEventHandler<HTMLLabelElement>) | undefined;
-    onCutCapture?: (import('react').ClipboardEventHandler<HTMLInputElement> & import('react').ClipboardEventHandler<HTMLLabelElement>) | undefined;
-    onPaste?: (import('react').ClipboardEventHandler<HTMLInputElement> & import('react').ClipboardEventHandler<HTMLLabelElement>) | undefined;
-    onPasteCapture?: (import('react').ClipboardEventHandler<HTMLInputElement> & import('react').ClipboardEventHandler<HTMLLabelElement>) | undefined;
-    onCompositionEnd?: (import('react').CompositionEventHandler<HTMLInputElement> & import('react').CompositionEventHandler<HTMLLabelElement>) | undefined;
-    onCompositionEndCapture?: (import('react').CompositionEventHandler<HTMLInputElement> & import('react').CompositionEventHandler<HTMLLabelElement>) | undefined;
-    onCompositionStart?: (import('react').CompositionEventHandler<HTMLInputElement> & import('react').CompositionEventHandler<HTMLLabelElement>) | undefined;
-    onCompositionStartCapture?: (import('react').CompositionEventHandler<HTMLInputElement> & import('react').CompositionEventHandler<HTMLLabelElement>) | undefined;
-    onCompositionUpdate?: (import('react').CompositionEventHandler<HTMLInputElement> & import('react').CompositionEventHandler<HTMLLabelElement>) | undefined;
-    onCompositionUpdateCapture?: (import('react').CompositionEventHandler<HTMLInputElement> & import('react').CompositionEventHandler<HTMLLabelElement>) | undefined;
-    onFocus?: (import('react').FocusEventHandler<HTMLInputElement> & import('react').FocusEventHandler<HTMLLabelElement>) | undefined;
-    onFocusCapture?: (import('react').FocusEventHandler<HTMLInputElement> & import('react').FocusEventHandler<HTMLLabelElement>) | undefined;
-    onBlur?: (import('react').FocusEventHandler<HTMLInputElement> & import('react').FocusEventHandler<HTMLLabelElement>) | undefined;
-    onBlurCapture?: (import('react').FocusEventHandler<HTMLInputElement> & import('react').FocusEventHandler<HTMLLabelElement>) | undefined;
-    onChangeCapture?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onBeforeInput?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onBeforeInputCapture?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onInput?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onInputCapture?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onReset?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onResetCapture?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onSubmit?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onSubmitCapture?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onInvalid?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onInvalidCapture?: (import('react').FormEventHandler<HTMLInputElement> & import('react').FormEventHandler<HTMLLabelElement>) | undefined;
-    onLoad?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onLoadCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onError?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onErrorCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onKeyDown?: (import('react').KeyboardEventHandler<HTMLInputElement> & import('react').KeyboardEventHandler<HTMLLabelElement>) | undefined;
-    onKeyDownCapture?: (import('react').KeyboardEventHandler<HTMLInputElement> & import('react').KeyboardEventHandler<HTMLLabelElement>) | undefined;
-    onKeyPress?: (import('react').KeyboardEventHandler<HTMLInputElement> & import('react').KeyboardEventHandler<HTMLLabelElement>) | undefined;
-    onKeyPressCapture?: (import('react').KeyboardEventHandler<HTMLInputElement> & import('react').KeyboardEventHandler<HTMLLabelElement>) | undefined;
-    onKeyUp?: (import('react').KeyboardEventHandler<HTMLInputElement> & import('react').KeyboardEventHandler<HTMLLabelElement>) | undefined;
-    onKeyUpCapture?: (import('react').KeyboardEventHandler<HTMLInputElement> & import('react').KeyboardEventHandler<HTMLLabelElement>) | undefined;
-    onAbort?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onAbortCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onCanPlay?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onCanPlayCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onCanPlayThrough?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onCanPlayThroughCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onDurationChange?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onDurationChangeCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onEmptied?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onEmptiedCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onEncrypted?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onEncryptedCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onEnded?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onEndedCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onLoadedData?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onLoadedDataCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onLoadedMetadata?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onLoadedMetadataCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onLoadStart?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onLoadStartCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onPause?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onPauseCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onPlay?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onPlayCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onPlaying?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onPlayingCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onProgress?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onProgressCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onRateChange?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onRateChangeCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onResize?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onResizeCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onSeeked?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onSeekedCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onSeeking?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onSeekingCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onStalled?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onStalledCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onSuspend?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onSuspendCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onTimeUpdate?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onTimeUpdateCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onVolumeChange?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onVolumeChangeCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onWaiting?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onWaitingCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onAuxClick?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onAuxClickCapture?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onClick?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onClickCapture?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onContextMenu?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onContextMenuCapture?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onDoubleClick?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onDoubleClickCapture?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onDrag?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragCapture?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragEnd?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragEndCapture?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragEnter?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragEnterCapture?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragExit?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragExitCapture?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragLeave?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragLeaveCapture?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragOver?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragOverCapture?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragStart?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDragStartCapture?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDrop?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onDropCapture?: (import('react').DragEventHandler<HTMLInputElement> & import('react').DragEventHandler<HTMLLabelElement>) | undefined;
-    onMouseDown?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseDownCapture?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseEnter?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseLeave?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseMove?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseMoveCapture?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseOut?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseOutCapture?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseOver?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseOverCapture?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseUp?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onMouseUpCapture?: (import('react').MouseEventHandler<HTMLInputElement> & import('react').MouseEventHandler<HTMLLabelElement>) | undefined;
-    onSelect?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onSelectCapture?: (import('react').ReactEventHandler<HTMLInputElement> & import('react').ReactEventHandler<HTMLLabelElement>) | undefined;
-    onTouchCancel?: (import('react').TouchEventHandler<HTMLInputElement> & import('react').TouchEventHandler<HTMLLabelElement>) | undefined;
-    onTouchCancelCapture?: (import('react').TouchEventHandler<HTMLInputElement> & import('react').TouchEventHandler<HTMLLabelElement>) | undefined;
-    onTouchEnd?: (import('react').TouchEventHandler<HTMLInputElement> & import('react').TouchEventHandler<HTMLLabelElement>) | undefined;
-    onTouchEndCapture?: (import('react').TouchEventHandler<HTMLInputElement> & import('react').TouchEventHandler<HTMLLabelElement>) | undefined;
-    onTouchMove?: (import('react').TouchEventHandler<HTMLInputElement> & import('react').TouchEventHandler<HTMLLabelElement>) | undefined;
-    onTouchMoveCapture?: (import('react').TouchEventHandler<HTMLInputElement> & import('react').TouchEventHandler<HTMLLabelElement>) | undefined;
-    onTouchStart?: (import('react').TouchEventHandler<HTMLInputElement> & import('react').TouchEventHandler<HTMLLabelElement>) | undefined;
-    onTouchStartCapture?: (import('react').TouchEventHandler<HTMLInputElement> & import('react').TouchEventHandler<HTMLLabelElement>) | undefined;
-    onPointerDown?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerDownCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerMove?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerMoveCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerUp?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerUpCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerCancel?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerCancelCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerEnter?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerEnterCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerLeave?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerLeaveCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerOver?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerOverCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerOut?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onPointerOutCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onGotPointerCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onGotPointerCaptureCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onLostPointerCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onLostPointerCaptureCapture?: (import('react').PointerEventHandler<HTMLInputElement> & import('react').PointerEventHandler<HTMLLabelElement>) | undefined;
-    onScroll?: (import('react').UIEventHandler<HTMLInputElement> & import('react').UIEventHandler<HTMLLabelElement>) | undefined;
-    onScrollCapture?: (import('react').UIEventHandler<HTMLInputElement> & import('react').UIEventHandler<HTMLLabelElement>) | undefined;
-    onWheel?: (import('react').WheelEventHandler<HTMLInputElement> & import('react').WheelEventHandler<HTMLLabelElement>) | undefined;
-    onWheelCapture?: (import('react').WheelEventHandler<HTMLInputElement> & import('react').WheelEventHandler<HTMLLabelElement>) | undefined;
-    onAnimationStart?: (import('react').AnimationEventHandler<HTMLInputElement> & import('react').AnimationEventHandler<HTMLLabelElement>) | undefined;
-    onAnimationStartCapture?: (import('react').AnimationEventHandler<HTMLInputElement> & import('react').AnimationEventHandler<HTMLLabelElement>) | undefined;
-    onAnimationEnd?: (import('react').AnimationEventHandler<HTMLInputElement> & import('react').AnimationEventHandler<HTMLLabelElement>) | undefined;
-    onAnimationEndCapture?: (import('react').AnimationEventHandler<HTMLInputElement> & import('react').AnimationEventHandler<HTMLLabelElement>) | undefined;
-    onAnimationIteration?: (import('react').AnimationEventHandler<HTMLInputElement> & import('react').AnimationEventHandler<HTMLLabelElement>) | undefined;
-    onAnimationIterationCapture?: (import('react').AnimationEventHandler<HTMLInputElement> & import('react').AnimationEventHandler<HTMLLabelElement>) | undefined;
-    onTransitionEnd?: (import('react').TransitionEventHandler<HTMLInputElement> & import('react').TransitionEventHandler<HTMLLabelElement>) | undefined;
-    onTransitionEndCapture?: (import('react').TransitionEventHandler<HTMLInputElement> & import('react').TransitionEventHandler<HTMLLabelElement>) | undefined;
-    list?: string | undefined | undefined;
-    step?: number | string | undefined | undefined;
-    alt?: string | undefined | undefined;
-    height?: number | string | undefined | undefined;
-    src?: string | undefined | undefined;
-    width?: number | string | undefined | undefined;
-    size?: number | undefined | undefined;
-    type?: import('react').HTMLInputTypeAttribute | undefined;
-    formAction?: string | undefined;
-    formEncType?: string | undefined | undefined;
-    formMethod?: string | undefined | undefined;
-    formNoValidate?: boolean | undefined | undefined;
-    formTarget?: string | undefined | undefined;
-    layout?: "horizontal" | `horizontal-${string}` | "vertical" | undefined;
-    multiple?: boolean | undefined | undefined;
-    autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;
-    accept?: string | undefined | undefined;
-    capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: boolean | undefined | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    htmlFor?: string | undefined | undefined;
-    maxLength?: number | undefined | undefined;
-    minLength?: number | undefined | undefined;
-    description?: string | undefined;
-    required?: boolean | undefined | undefined;
-    hideRequiredStar?: boolean | undefined;
-    placeholder?: string | undefined | undefined;
-    readOnly?: boolean | undefined | undefined;
-};
-export declare const NumberField: (props: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export * from '../../ui/forms/NumberField';