@clubmed/trident-ui 1.0.0-beta.5 → 1.0.0-beta.7

package/fonts/Utilities/tui-utilities.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717574137605'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717574137605#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717574137605") format("woff2"),
+  url("tui-utilities.woff?t=1717574137605") format("woff"),
+  url('tui-utilities.ttf?t=1717574137605') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717574137605#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717574137605'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717574137605#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717574137605") format("woff2"),
+  url("tui-utilities.woff?t=1717574137605") format("woff"),
+  url('tui-utilities.ttf?t=1717574137605') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717574137605#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.module.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717574137605'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717574137605#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717574137605") format("woff2"),
+  url("tui-utilities.woff?t=1717574137605") format("woff"),
+  url('tui-utilities.ttf?t=1717574137605') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717574137605#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.scss

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717574137605'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717574137605#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717574137605") format("woff2"),
+  url("tui-utilities.woff?t=1717574137605") format("woff"),
+  url('tui-utilities.ttf?t=1717574137605') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717574137605#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.styl

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717574137605'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717574137605#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717574137605") format("woff2"),
+  url("tui-utilities.woff?t=1717574137605") format("woff"),
+  url('tui-utilities.ttf?t=1717574137605') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717574137605#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/molecules/Forms/DateField.js

@@ -1,11 +1,11 @@
-import { jsx as m, jsxs as y } from "react/jsx-runtime";
+import { jsx as m, jsxs as x } from "react/jsx-runtime";
 import { c as E } from "../../index-Cu0xwYjD.js";
-import { useId as V, useRef as _ } from "react";
+import { useId as _, useRef as z } from "react";
 import { Icon as I } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-import { useValue as z } from "../../hooks/useValue.js";
-import { useInternalStatus as G } from "../../hooks/useInternalStatus.js";
-import { FormControl as Z } from "./FormControl.js";
+import { useValue as G } from "../../hooks/useValue.js";
+import { useInternalStatus as Z } from "../../hooks/useInternalStatus.js";
+import { FormControl as $ } from "./FormControl.js";
 function T(t) {
   "@babel/helpers - typeof";
   return T = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
@@ -18,7 +18,7 @@ function F(t, e) {
   if (e.length < t)
     throw new TypeError(t + " argument" + (t > 1 ? "s" : "") + " required, but only " + e.length + " present");
 }
-function $(t) {
+function q(t) {
   F(1, arguments);
   var e = Object.prototype.toString.call(t);
   return t instanceof Date || T(t) === "object" && e === "[object Date]" ? new Date(t.getTime()) : typeof t == "number" || e === "[object Number]" ? new Date(t) : ((typeof t == "string" || e === "[object String]") && typeof console < "u" && (console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"), console.warn(new Error().stack)), /* @__PURE__ */ new Date(NaN));
@@ -31,7 +31,7 @@ function l(t, e) {
 function A(t, e) {
   var i, a;
   F(1, arguments);
-  var o = $(t);
+  var o = q(t);
   if (isNaN(o.getTime()))
     throw new RangeError("Invalid time value");
   var d = String((i = e == null ? void 0 : e.format) !== null && i !== void 0 ? i : "extended"), c = String((a = e == null ? void 0 : e.representation) !== null && a !== void 0 ? a : "complete");
@@ -39,25 +39,25 @@ function A(t, e) {
     throw new RangeError("format must be 'extended' or 'basic'");
   if (c !== "date" && c !== "time" && c !== "complete")
     throw new RangeError("representation must be 'date', 'time', or 'complete'");
-  var s = "", f = "", g = d === "extended" ? "-" : "", x = d === "extended" ? ":" : "";
+  var s = "", f = "", g = d === "extended" ? "-" : "", w = d === "extended" ? ":" : "";
   if (c !== "time") {
-    var r = l(o.getDate(), 2), w = l(o.getMonth() + 1, 2), D = l(o.getFullYear(), 4);
-    s = "".concat(D).concat(g).concat(w).concat(g).concat(r);
+    var r = l(o.getDate(), 2), v = l(o.getMonth() + 1, 2), D = l(o.getFullYear(), 4);
+    s = "".concat(D).concat(g).concat(v).concat(g).concat(r);
   }
   if (c !== "date") {
     var p = o.getTimezoneOffset();
     if (p !== 0) {
-      var v = Math.abs(p), b = l(Math.floor(v / 60), 2), S = l(v % 60, 2), h = p < 0 ? "+" : "-";
-      f = "".concat(h).concat(b, ":").concat(S);
+      var h = Math.abs(p), S = l(Math.floor(h / 60), 2), b = l(h % 60, 2), N = p < 0 ? "+" : "-";
+      f = "".concat(N).concat(S, ":").concat(b);
     } else
       f = "Z";
-    var n = l(o.getHours(), 2), N = l(o.getMinutes(), 2), k = l(o.getSeconds(), 2), j = s === "" ? "" : "T", C = [n, N, k].join(x);
+    var y = l(o.getHours(), 2), n = l(o.getMinutes(), 2), k = l(o.getSeconds(), 2), j = s === "" ? "" : "T", C = [y, n, k].join(w);
     s = "".concat(s).concat(j).concat(C).concat(f);
   }
   return s;
 }
-const M = (t) => t ? A(t, { representation: "date" }) : "", U = (t) => {
-  const e = V(), {
+const M = (t) => t ? A(t, { representation: "date" }) : "", W = (t) => {
+  const e = _(), {
     id: i = e,
     name: a = i,
     label: o,
@@ -66,44 +66,46 @@ const M = (t) => t ? A(t, { representation: "date" }) : "", U = (t) => {
     validationStatus: s = "default",
     icon: f = "CalendarDefault",
     iconType: g,
-    errorMessage: x,
+    errorMessage: w,
     disabled: r = !1,
-    dataTestId: w = "DateField",
-    value: D,
-    min: p,
-    max: v,
+    required: v = !1,
+    dataTestId: D = "DateField",
+    value: p,
+    min: h,
+    max: S,
     onChange: b,
-    ...S
-  } = t, h = _(null), n = G({
+    ...N
+  } = t, y = z(null), n = Z({
     isDisabled: r,
     validationStatus: s
-  }), { setValue: N, value: k } = z({
+  }), { setValue: k, value: j } = G({
     name: a,
     formatter: M,
-    initialValue: D,
-    onChange: (u, P) => b == null ? void 0 : b(u, new Date(P))
-  }), j = M(p), C = M(v), O = (u) => {
-    N(u.target.value);
-  }, R = () => {
+    initialValue: p,
+    onChange: (u, V) => b == null ? void 0 : b(u, new Date(V))
+  }), C = M(h), O = M(S), R = (u) => {
+    k(u.target.value);
+  }, P = () => {
     var u;
-    (u = h.current) == null || u.showPicker();
+    (u = y.current) == null || u.showPicker();
   };
   return /* @__PURE__ */ m(
-    Z,
+    $,
     {
       id: i,
       label: o,
       description: d,
       dataName: "DateField",
-      dataTestId: w,
+      dataTestId: D,
       disabled: r,
+      required: v,
       validationStatus: s,
-      errorMessage: x,
-      children: /* @__PURE__ */ y("div", { className: "relative", children: [
+      errorMessage: w,
+      children: /* @__PURE__ */ x("div", { className: "relative", children: [
         /* @__PURE__ */ m(
           "input",
           {
-            ...S,
+            ...N,
             type: "date",
             className: E(
               "text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none",
@@ -118,14 +120,15 @@ const M = (t) => t ? A(t, { representation: "date" }) : "", U = (t) => {
             ),
             id: i,
             disabled: r,
-            ref: h,
-            value: k,
-            min: j,
-            max: C,
-            onChange: O
+            required: v,
+            ref: y,
+            value: j,
+            min: C,
+            max: O,
+            onChange: R
           }
         ),
-        /* @__PURE__ */ y(
+        /* @__PURE__ */ x(
           "div",
           {
             className: E(
@@ -137,11 +140,11 @@ const M = (t) => t ? A(t, { representation: "date" }) : "", U = (t) => {
               }
             ),
             children: [
-              /* @__PURE__ */ y("button", { className: "pointer-events-auto leading-none", onClick: R, children: [
+              /* @__PURE__ */ x("button", { className: "pointer-events-auto leading-none", onClick: P, children: [
                 /* @__PURE__ */ m(I, { name: f, iconType: g, width: "24px" }),
                 /* @__PURE__ */ m("span", { className: "sr-only", children: c })
               ] }),
-              /* @__PURE__ */ y("span", { className: "ms-auto flex gap-x-8", children: [
+              /* @__PURE__ */ x("span", { className: "ms-auto flex gap-x-8", children: [
                 n === "error" && /* @__PURE__ */ m(I, { name: "CrossDefault", width: "24px" }),
                 n === "success" && /* @__PURE__ */ m(I, { name: "CheckDefault", width: "24px" })
               ] })
@@ -153,5 +156,5 @@ const M = (t) => t ? A(t, { representation: "date" }) : "", U = (t) => {
   );
 };
 export {
-  U as DateField
+  W as DateField
 };

package/molecules/Forms/FormControl.d.ts

@@ -1,12 +1,13 @@
-import { HTMLAttributes, InputHTMLAttributes, PropsWithChildren } from 'react';
+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;
     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, className, validationStatus, children, errorMessage, dataTestId, dataName, layout, }: PropsWithChildren<FormControlProps<Value, InputHTMLAttributes<HTMLInputElement>>>) => import("react/jsx-runtime").JSX.Element;
+} & Omit<Attributes, 'onChange' | 'value'> & Partial<FormLabelProps>;
+export declare const FormControl: <Value = string>({ id, label, description, disabled, required, className, validationStatus, children, errorMessage, dataTestId, dataName, layout, }: FormControlProps<Value, InputHTMLAttributes<HTMLInputElement>>) => import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/FormControl.js

@@ -1,37 +1,38 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { useInternalStatus as f } from "../../hooks/useInternalStatus.js";
-import { FormLabel as u } from "./FormLabel.js";
-import { Icon as h } from "../../atoms/Icons/Icon.js";
+import { useInternalStatus as u } from "../../hooks/useInternalStatus.js";
+import { FormLabel as h } from "./FormLabel.js";
+import { Icon as b } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-import { c as b } from "../../index-Cu0xwYjD.js";
-const v = ({
+import { c as j } from "../../index-Cu0xwYjD.js";
+const w = ({
   id: t,
   label: r,
   description: s,
   disabled: m,
-  className: n,
-  validationStatus: i = "default",
-  children: l,
+  required: n,
+  className: i,
+  validationStatus: l = "default",
+  children: p,
   errorMessage: a,
-  dataTestId: p,
-  dataName: c,
-  layout: x
+  dataTestId: c,
+  dataName: x,
+  layout: d
 }) => {
-  const d = f({
+  const f = u({
     isDisabled: !!m,
-    validationStatus: i
+    validationStatus: l
   });
   return /* @__PURE__ */ e(
     "div",
     {
-      className: b("flex flex-col gap-4", n),
-      "data-name": c,
-      "data-testid": p,
+      className: j("flex flex-col gap-4", i),
+      "data-name": x,
+      "data-testid": c,
       children: [
-        r && t && /* @__PURE__ */ o(u, { description: s, id: t, layout: x, children: r }),
-        l,
-        d === "error" && a && /* @__PURE__ */ e("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
-          /* @__PURE__ */ o(h, { name: "Error", width: "20px" }),
+        r && t && /* @__PURE__ */ o(h, { description: s, id: t, layout: d, required: n, children: r }),
+        p,
+        f === "error" && a && /* @__PURE__ */ e("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
+          /* @__PURE__ */ o(b, { name: "Error", width: "20px" }),
           a
         ] })
       ]
@@ -39,5 +40,5 @@ const v = ({
   );
 };
 export {
-  v as FormControl
+  w as FormControl
 };

package/molecules/Forms/FormLabel.d.ts

@@ -1,20 +1,7 @@
-import { FunctionComponent, LabelHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-export interface FormLabelProps extends PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>> {
-    /**
-     * Label text or use Children
-     */
-    label?: string | ReactNode | undefined;
-    /**
-     * Description text
-     */
+import { LabelHTMLAttributes } from 'react';
+export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     description?: string;
-    /**
-     * Layout of the label
-     */
     layout?: 'horizontal' | 'vertical';
-    /**
-     * Additional class names
-     */
-    className?: string;
+    required?: boolean;
 }
-export declare const FormLabel: FunctionComponent<FormLabelProps>;
+export declare const FormLabel: ({ id, description, layout, required, className, children, ...rest }: FormLabelProps) => import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/FormLabel.js

@@ -1,29 +1,34 @@
-import { jsxs as n, jsx as m } from "react/jsx-runtime";
-import { c as x } from "../../index-Cu0xwYjD.js";
-const c = {
-  horizontal: "flex flex-wrap items-center gap-x-12 px-20",
-  vertical: "flex flex-col items-start"
-}, f = ({
-  children: t,
-  label: l,
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { c } from "../../index-Cu0xwYjD.js";
+const b = ({
+  id: l,
   description: e,
-  id: a,
-  layout: o = "horizontal",
-  className: r,
-  ...s
-}) => /* @__PURE__ */ n(
+  layout: t = "horizontal",
+  required: r,
+  className: s,
+  children: m,
+  ...n
+}) => /* @__PURE__ */ o(
   "label",
   {
-    ...s,
-    htmlFor: a,
-    className: x("text-b3 font-semibold text-black", c[o], r),
+    ...n,
+    htmlFor: l,
+    className: c(
+      "text-b3 font-semibold text-black flex",
+      {
+        "flex-wrap items-center ps-20": t === "horizontal",
+        "flex-col items-start": t === "vertical"
+      },
+      s
+    ),
     "data-name": "InputLabel",
     children: [
-      l || t,
-      e && /* @__PURE__ */ m("span", { className: "text-b4 text-middleGrey inline-block font-normal", children: e })
+      m,
+      r && /* @__PURE__ */ a("span", { children: "*" }),
+      e && /* @__PURE__ */ a("span", { className: "ms-12 text-b4 text-grey font-normal", children: e })
     ]
   }
 );
 export {
-  f as FormLabel
+  b as FormLabel
 };

package/molecules/Forms/NumberField.d.ts

@@ -15,6 +15,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
     increase: () => void;
     decrease: () => void;
+    label?: import("react").ReactNode;
     validationStatus?: import("../../hooks/useInternalStatus").ValidationStatus | undefined;
     dataName?: string | undefined;
     errorMessage?: string | undefined;
@@ -28,7 +29,6 @@ export declare function useNumberField(props: NumberFieldProps): {
     form?: string | undefined;
     list?: string | undefined;
     role?: import("react").AriaRole | undefined;
-    label?: import("react").ReactNode;
     slot?: string | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
@@ -310,9 +310,9 @@ export declare function useNumberField(props: NumberFieldProps): {
     required?: boolean | undefined;
     size?: number | undefined;
     step?: string | number | undefined;
-    htmlFor?: string | undefined;
-    layout?: "horizontal" | "vertical" | undefined;
     description?: string | undefined;
+    layout?: "horizontal" | "vertical" | undefined;
+    htmlFor?: string | undefined;
 };
 export declare const NumberField: (props: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/molecules/Forms/NumberField.js

@@ -1,23 +1,23 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { c as v } from "../../index-Cu0xwYjD.js";
-import { useId as C } from "react";
-import { useValue as y } from "../../hooks/useValue.js";
-import { Button as x } from "../Buttons/Button.js";
-import { FormControl as I } from "./FormControl.js";
-const w = { width: "28px", height: "28px" };
-function F(m) {
-  const e = C(), {
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import { c as C } from "../../index-Cu0xwYjD.js";
+import { useId as y } from "react";
+import { useValue as I } from "../../hooks/useValue.js";
+import { Button as N } from "../Buttons/Button.js";
+import { FormControl as w } from "./FormControl.js";
+const F = { width: "28px", height: "28px" };
+function V(m) {
+  const e = y(), {
     id: n = e,
-    name: l = n,
+    name: r = n,
     value: c = 0,
     onChange: d,
     min: t = 0,
-    max: r = 10,
+    max: l = 10,
     disabled: i = !1,
     dataTestId: u = "NumberField",
     ...f
-  } = m, { value: a, setValue: s } = y({
-    name: l,
+  } = m, { value: a, setValue: s } = I({
+    name: r,
     defaultValue: c,
     formatter: Number,
     onChange: d
@@ -26,17 +26,17 @@ function F(m) {
     ...f,
     id: n,
     min: t,
-    max: r,
-    name: l,
+    max: l,
+    name: r,
     value: a,
     dataTestId: u,
     disabled: i,
-    handleChange: (N) => {
-      const b = Number(N.target.value);
-      b >= t && b <= r && s(Number(b));
+    handleChange: (g) => {
+      const h = Number(g.target.value);
+      h >= t && h <= l && s(Number(h));
     },
     increase: () => {
-      a < r && s(a + 1);
+      a < l && s(a + 1);
     },
     decrease: () => {
       a > t && s(a - 1);
@@ -47,35 +47,37 @@ const k = (m) => {
   const {
     disabled: e,
     min: n,
-    max: l,
+    max: r,
     label: c,
     description: d,
     id: t,
-    dataTestId: r,
+    dataTestId: l,
     value: i,
     handleChange: u,
     increase: f,
     decrease: a,
     errorMessage: s,
-    validationStatus: h,
-    ...p
-  } = F(m);
+    validationStatus: p,
+    required: b,
+    ...x
+  } = V(m);
   return /* @__PURE__ */ o(
-    I,
+    w,
     {
       id: t,
       label: c,
       description: d,
       className: "flex items-center justify-between",
       dataName: "NumberField",
-      dataTestId: r,
+      dataTestId: l,
       errorMessage: s,
-      validationStatus: h,
+      validationStatus: p,
       disabled: e,
+      required: b,
       layout: "vertical",
-      children: /* @__PURE__ */ g("div", { className: "flex items-center gap-x-8", children: [
+      children: /* @__PURE__ */ v("div", { className: "flex items-center gap-x-8", children: [
         /* @__PURE__ */ o(
-          x,
+          N,
           {
             theme: "yellow",
             onClick: a,
@@ -88,27 +90,28 @@ const k = (m) => {
         /* @__PURE__ */ o(
           "input",
           {
-            ...p,
-            className: v("text-b2 text-center font-normal outline-none", {
+            ...x,
+            className: C("text-b2 text-center font-normal outline-none", {
               "bg-pearl text-grey": e
             }),
-            style: w,
+            style: F,
             type: "number",
             id: t,
             onChange: u,
             disabled: e,
+            required: b,
             value: i,
             min: n,
-            max: l
+            max: r
           }
         ),
         /* @__PURE__ */ o(
-          x,
+          N,
           {
             theme: "yellow",
             onClick: f,
             variant: "icon",
-            disabled: i >= l || e,
+            disabled: i >= r || e,
             icon: "PlusDefault",
             label: "PLUS"
           }
@@ -119,5 +122,5 @@ const k = (m) => {
 };
 export {
   k as NumberField,
-  F as useNumberField
+  V as useNumberField
 };