@clubmed/trident-ui 1.0.1-rc.1 → 1.1.0-beta.1

package/molecules/Forms/NumberField.js

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

package/molecules/Forms/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":["../../../lib/molecules/Forms/NumberField.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { ChangeEvent, useId } from 'react';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { Button } from '../Buttons/Button';\nimport { FormControl, FormControlProps } from './FormControl.js';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    name: name!,\n    defaultValue: initialValue,\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue));\n    }\n  };\n\n  const increase = () => {\n    if (value < max) {\n      setValue(value + 1);\n    }\n  };\n\n  const decrease = () => {\n    if (value > min) {\n      setValue(value - 1);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    required,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={classnames('flex items-center justify-between', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      layout=\"vertical\"\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          theme=\"yellow\"\n          onClick={decrease}\n          variant=\"icon\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          // TODO have this from prop at some time\n          label=\"MINUS\"\n        />\n        <input\n          {...rest}\n          className={classnames('text-b2 text-center font-normal outline-none', {\n            'bg-pearl text-grey': disabled,\n          })}\n          style={INPUT_STYLE}\n          type=\"number\"\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          theme=\"yellow\"\n          onClick={increase}\n          variant=\"icon\"\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          // TODO have this from prop at some time\n          label=\"PLUS\"\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["INPUT_STYLE","useNumberField","props","internalId","useId","id","name","initialValue","onChange","min","max","disabled","dataTestId","rest","value","setValue","useValue","e","newValue","NumberField","label","description","handleChange","increase","decrease","errorMessage","validationStatus","required","jsx","FormControl","classnames","jsxs","Button"],"mappings":"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"}
+{"version":3,"file":"NumberField.js","sources":["../../../lib/molecules/Forms/NumberField.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { ChangeEvent, useId } from 'react';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { Button } from '../Buttons/Button';\nimport { FormControl, FormControlProps } from './FormControl.js';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    name: name!,\n    defaultValue: initialValue,\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue));\n    }\n  };\n\n  const increase = () => {\n    if (value < max) {\n      setValue(value + 1);\n    }\n  };\n\n  const decrease = () => {\n    if (value > min) {\n      setValue(value - 1);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    hideRequiredStar,\n    required,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={classnames('flex items-center justify-between', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      layout=\"vertical\"\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          theme=\"yellow\"\n          onClick={decrease}\n          variant=\"icon\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          // TODO have this from prop at some time\n          label=\"MINUS\"\n        />\n        <input\n          {...rest}\n          className={classnames('text-b2 text-center font-normal outline-none', {\n            'bg-pearl text-grey': disabled,\n          })}\n          style={INPUT_STYLE}\n          type=\"number\"\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          theme=\"yellow\"\n          onClick={increase}\n          variant=\"icon\"\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          // TODO have this from prop at some time\n          label=\"PLUS\"\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["INPUT_STYLE","useNumberField","props","internalId","useId","id","name","initialValue","onChange","min","max","disabled","dataTestId","rest","value","setValue","useValue","e","newValue","NumberField","label","description","handleChange","increase","decrease","errorMessage","validationStatus","hideRequiredStar","required","jsx","FormControl","classnames","jsxs","Button"],"mappings":"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"}

package/molecules/Forms/Password/Password.js

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import { c as m } from "../../../index-Cu0xwYjD.js";
-import { useId as M, useState as P, useEffect as S } from "react";
-import { useValue as T } from "../../../hooks/useValue.js";
+import { useId as M, useState as P, useEffect as T } from "react";
+import { useValue as q } from "../../../hooks/useValue.js";
 import { FormControl as D } from "../FormControl.js";
 import { Icon as n } from "../../../atoms/Icons/Icon.js";
 import "../../../atoms/Icons/contexts/IconsContext.js";
@@ -11,49 +11,51 @@ function K(f) {
     id: r = b,
     name: o = r,
     label: x,
-    value: g,
+    value: h,
     disabled: d = !1,
     required: c = !1,
+    hideRequiredStar: g,
     validationStatus: e = "default",
-    errorMessage: h,
+    errorMessage: v,
     validationMessages: p = [],
     withoutFieldValidation: s = !1,
-    className: v,
-    onChange: w,
-    dataTestId: y = "Password",
-    ...N
-  } = f, { value: C, setValue: V } = T({
+    className: w,
+    onChange: y,
+    dataTestId: N = "Password",
+    ...C
+  } = f, { value: V, setValue: k } = q({
     name: o,
-    initialValue: g,
-    onChange: w
+    initialValue: h,
+    onChange: y
   }), [t, u] = P("password");
-  S(() => u(t), [t]);
-  const k = () => u(t === "password" ? "text" : "password");
+  T(() => u(t), [t]);
+  const I = () => u(t === "password" ? "text" : "password");
   return /* @__PURE__ */ i(
     D,
     {
-      className: v,
+      className: w,
       id: r,
       label: x,
       dataName: "Password",
-      dataTestId: y,
+      dataTestId: N,
       disabled: d,
       required: c,
+      hideRequiredStar: g,
       validationStatus: s ? "default" : e,
-      errorMessage: h,
+      errorMessage: v,
       children: [
         /* @__PURE__ */ i("div", { className: "relative", children: [
           /* @__PURE__ */ a(
             "input",
             {
-              ...N,
+              ...C,
               id: r,
               name: o,
               type: t,
-              value: C,
+              value: V,
               disabled: d,
               required: c,
-              onChange: (l) => V(l.target.value),
+              onChange: (l) => k(l.target.value),
               className: m(
                 "text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black",
                 {
@@ -80,7 +82,7 @@ function K(f) {
                   {
                     type: "button",
                     className: "pointer-events-auto size-24 inline-flex",
-                    onClick: k,
+                    onClick: I,
                     children: /* @__PURE__ */ a(n, { name: t === "password" ? "Invisible" : "Visible", width: "24px", type: "svg" })
                   }
                 )
@@ -88,7 +90,7 @@ function K(f) {
             }
           )
         ] }),
-        p.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: p.map(({ label: l, status: I }, j) => /* @__PURE__ */ a(F, { label: l, status: I }, j)) })
+        p.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: p.map(({ label: l, status: S }, j) => /* @__PURE__ */ a(F, { label: l, status: S }, j)) })
       ]
     }
   );

package/molecules/Forms/Password/Password.js.map

@@ -1 +1 @@
-{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, FormControlProps } from '../FormControl';\nimport { Icon } from '@/atoms/Icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => setType(type), [type]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                withoutFieldValidation || validationStatus === 'default',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            <button\n              type=\"button\"\n              className=\"pointer-events-auto size-24 inline-flex\"\n              onClick={toggleType}\n            >\n              <Icon name={type === 'password' ? 'Invisible' : 'Visible'} width=\"24px\" type=\"svg\" />\n            </button>\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"names":["Password","props","internalId","useId","id","name","label","initialValue","disabled","required","validationStatus","errorMessage","validationMessages","withoutFieldValidation","className","onChange","dataTestId","rest","value","setValue","useValue","type","setType","useState","useEffect","toggleType","jsxs","FormControl","jsx","e","classnames","Icon","status","index","ValidationMessage"],"mappings":"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"}
+{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, FormControlProps } from '../FormControl';\nimport { Icon } from '@/atoms/Icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => setType(type), [type]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                withoutFieldValidation || validationStatus === 'default',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            <button\n              type=\"button\"\n              className=\"pointer-events-auto size-24 inline-flex\"\n              onClick={toggleType}\n            >\n              <Icon name={type === 'password' ? 'Invisible' : 'Visible'} width=\"24px\" type=\"svg\" />\n            </button>\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"names":["Password","props","internalId","useId","id","name","label","initialValue","disabled","required","hideRequiredStar","validationStatus","errorMessage","validationMessages","withoutFieldValidation","className","onChange","dataTestId","rest","value","setValue","useValue","type","setType","useState","useEffect","toggleType","jsxs","FormControl","jsx","e","classnames","Icon","status","index","ValidationMessage"],"mappings":"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"}

package/molecules/Forms/Select.js

@@ -1,13 +1,13 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import { c as l } from "../../index-Cu0xwYjD.js";
-import { useValue as D } from "../../hooks/useValue.js";
-import { useInternalStatus as I } from "../../hooks/useInternalStatus.js";
-import { FormControl as S } from "./FormControl.js";
+import { useValue as I } from "../../hooks/useValue.js";
+import { useInternalStatus as S } from "../../hooks/useInternalStatus.js";
+import { FormControl as j } from "./FormControl.js";
 import { Icon as n } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-import { useId as j } from "react";
+import { useId as T } from "react";
 const B = (p) => {
-  const u = j(), {
+  const u = T(), {
     id: t = u,
     name: a = t,
     label: m,
@@ -18,26 +18,28 @@ const B = (p) => {
     errorMessage: x,
     disabled: s = !1,
     required: d = !1,
+    hideRequiredStar: h,
     className: g,
-    dataTestId: h = t,
-    onChange: v,
-    children: y,
-    ...w
-  } = p, { value: N, setValue: k } = D({ name: a, initialValue: b, onChange: v }), e = I({
+    dataTestId: v = t,
+    onChange: y,
+    children: w,
+    ...N
+  } = p, { value: k, setValue: C } = I({ name: a, initialValue: b, onChange: y }), e = S({
     isDisabled: s,
     validationStatus: o
   });
   return /* @__PURE__ */ r(
-    S,
+    j,
     {
       id: t,
       className: g,
       label: m,
       description: f,
       dataName: "TextField",
-      dataTestId: h,
+      dataTestId: v,
       disabled: s,
       required: d,
+      hideRequiredStar: h,
       validationStatus: o,
       errorMessage: x,
       children: /* @__PURE__ */ c(
@@ -51,13 +53,13 @@ const B = (p) => {
             /* @__PURE__ */ r(
               "select",
               {
-                ...w,
+                ...N,
                 id: t,
                 name: a,
                 disabled: s,
                 required: d,
-                value: N,
-                onChange: (C) => k(C.target.value),
+                value: k,
+                onChange: (D) => C(D.target.value),
                 className: l(
                   "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent",
                   {
@@ -70,7 +72,7 @@ const B = (p) => {
                   }
                 ),
                 "aria-label": a,
-                children: y
+                children: w
               }
             ),
             /* @__PURE__ */ r(

package/molecules/Forms/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../lib/molecules/Forms/Select.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, FormControlProps } from './FormControl.js';\nimport { Icon, IconicTypes } from '@/atoms/Icons';\nimport { SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={classnames('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <button className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </button>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["Select","props","internalId","useId","id","name","label","initialValue","description","validationStatus","iconType","errorMessage","disabled","required","className","dataTestId","onChange","children","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","classnames","e","Icon"],"mappings":";;;;;;;;AAea,MAAAA,IAAS,CAAkBC,MAA8B;AACpE,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,YAAAC,IAAaX;AAAA,IACb,UAAAY;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAjB,GAEE,EAAE,OAAAkB,GAAO,UAAAC,MAAaC,EAAgB,EAAE,MAAAhB,GAAM,cAAAE,GAAc,UAAAS,EAAA,CAAU,GACtEM,IAAiBC,EAAkB;AAAA,IACvC,YAAYX;AAAA,IACZ,kBAAAH;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAArB;AAAA,MACA,WAAAU;AAAA,MACA,OAAAR;AAAA,MACA,aAAAE;AAAA,MACA,UAAS;AAAA,MACT,YAAAO;AAAA,MACA,UAAAH;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAJ;AAAA,MACA,cAAAE;AAAA,MAEA,UAAA,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAW,6BAA6B;AAAA,YACjD,YAAYL,MAAmB;AAAA,YAC/B,YAAYA,MAAmB;AAAA,UAAA,CAChC;AAAA,UAED,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGN;AAAA,gBACJ,IAAAd;AAAA,gBACA,MAAAC;AAAA,gBACA,UAAAO;AAAA,gBACA,UAAAC;AAAA,gBACA,OAAAM;AAAA,gBACA,UAAU,CAACS,MAAMR,EAASQ,EAAE,OAAO,KAAc;AAAA,gBACjD,WAAWD;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,qEACEL,MAAmB;AAAA,oBACrB,aAAaA,MAAmB,WAAWA,MAAmB;AAAA,oBAC9D,cAAcA,MAAmB;AAAA,oBACjC,aAAaA,MAAmB;AAAA,oBAChC,cAAcA,MAAmB;AAAA,oBACjC,gBAAgBA,MAAmB;AAAA,kBACrC;AAAA,gBACF;AAAA,gBACA,cAAYjB;AAAA,gBAEX,UAAAY;AAAA,cAAA;AAAA,YACH;AAAA,YAEA,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWG;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,aAAaL,MAAmB;AAAA,oBAChC,YAAYA,MAAmB;AAAA,oBAC/B,cAAcA,MAAmB;AAAA,kBACnC;AAAA,gBACF;AAAA,gBAEA,UAAA,gBAAAI,EAAC,QAAK,EAAA,WAAU,wBACb,UAAA;AAAA,kBAAmBJ,MAAA,6BACjBO,GAAK,EAAA,MAAK,gBAAe,OAAM,QAAO,MAAMnB,EAAU,CAAA;AAAA,kBAGxDY,MAAmB,aACjB,gBAAAE,EAAAK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMnB,EAAU,CAAA;AAAA,kBAGxD,gBAAAc,EAAA,UAAA,EAAO,WAAU,mCAChB,4BAACK,GAAK,EAAA,MAAK,oBAAmB,MAAK,OAAM,OAAM,QAAO,OAAM,QAAQ,CAAA,GACtE;AAAA,gBAAA,GACF;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Select.js","sources":["../../../lib/molecules/Forms/Select.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, FormControlProps } from './FormControl.js';\nimport { Icon, IconicTypes } from '@/atoms/Icons';\nimport { SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={classnames('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <button className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </button>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["Select","props","internalId","useId","id","name","label","initialValue","description","validationStatus","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","children","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","classnames","e","Icon"],"mappings":";;;;;;;;AAea,MAAAA,IAAS,CAAkBC,MAA8B;AACpE,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAaZ;AAAA,IACb,UAAAa;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAlB,GAEE,EAAE,OAAAmB,GAAO,UAAAC,MAAaC,EAAgB,EAAE,MAAAjB,GAAM,cAAAE,GAAc,UAAAU,EAAA,CAAU,GACtEM,IAAiBC,EAAkB;AAAA,IACvC,YAAYZ;AAAA,IACZ,kBAAAH;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAtB;AAAA,MACA,WAAAW;AAAA,MACA,OAAAT;AAAA,MACA,aAAAE;AAAA,MACA,UAAS;AAAA,MACT,YAAAQ;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAL;AAAA,MACA,cAAAE;AAAA,MAEA,UAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAW,6BAA6B;AAAA,YACjD,YAAYL,MAAmB;AAAA,YAC/B,YAAYA,MAAmB;AAAA,UAAA,CAChC;AAAA,UAED,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGN;AAAA,gBACJ,IAAAf;AAAA,gBACA,MAAAC;AAAA,gBACA,UAAAO;AAAA,gBACA,UAAAC;AAAA,gBACA,OAAAO;AAAA,gBACA,UAAU,CAACS,MAAMR,EAASQ,EAAE,OAAO,KAAc;AAAA,gBACjD,WAAWD;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,qEACEL,MAAmB;AAAA,oBACrB,aAAaA,MAAmB,WAAWA,MAAmB;AAAA,oBAC9D,cAAcA,MAAmB;AAAA,oBACjC,aAAaA,MAAmB;AAAA,oBAChC,cAAcA,MAAmB;AAAA,oBACjC,gBAAgBA,MAAmB;AAAA,kBACrC;AAAA,gBACF;AAAA,gBACA,cAAYlB;AAAA,gBAEX,UAAAa;AAAA,cAAA;AAAA,YACH;AAAA,YAEA,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWG;AAAA,kBACT;AAAA,kBACA;AAAA,oBACE,aAAaL,MAAmB;AAAA,oBAChC,YAAYA,MAAmB;AAAA,oBAC/B,cAAcA,MAAmB;AAAA,kBACnC;AAAA,gBACF;AAAA,gBAEA,UAAA,gBAAAI,EAAC,QAAK,EAAA,WAAU,wBACb,UAAA;AAAA,kBAAmBJ,MAAA,6BACjBO,GAAK,EAAA,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAU,CAAA;AAAA,kBAGxDa,MAAmB,aACjB,gBAAAE,EAAAK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAU,CAAA;AAAA,kBAGxD,gBAAAe,EAAA,UAAA,EAAO,WAAU,mCAChB,4BAACK,GAAK,EAAA,MAAK,oBAAmB,MAAK,OAAM,OAAM,QAAO,OAAM,QAAQ,CAAA,GACtE;AAAA,gBAAA,GACF;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Forms/TextField.js

@@ -1,57 +1,59 @@
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { c as m } from "../../index-Cu0xwYjD.js";
-import { useValue as T } from "../../hooks/useValue.js";
-import { useInternalStatus as k } from "../../hooks/useInternalStatus.js";
-import { FormControl as F } from "./FormControl.js";
-import { Icon as i } from "../../atoms/Icons/Icon.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { c as u } from "../../index-Cu0xwYjD.js";
+import { useValue as k } from "../../hooks/useValue.js";
+import { useInternalStatus as F } from "../../hooks/useInternalStatus.js";
+import { FormControl as S } from "./FormControl.js";
+import { Icon as o } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
 import { useId as j } from "react";
-const B = (p) => {
-  const u = j(), {
-    id: r = u,
-    name: a = r,
+const B = (m) => {
+  const p = j(), {
+    id: t = p,
+    name: a = t,
     label: x,
     value: b,
     description: f,
     validationStatus: n = "default",
     icon: s,
     iconType: d,
-    errorMessage: g,
+    errorMessage: h,
     disabled: l = !1,
     required: c = !1,
-    className: h,
-    dataTestId: v = "TextField",
-    onChange: y,
-    ...w
-  } = p, { value: N, setValue: C } = T({ name: a, initialValue: b, onChange: y }), e = k({
+    hideRequiredStar: g,
+    className: v,
+    dataTestId: y = "TextField",
+    onChange: w,
+    ...N
+  } = m, { value: C, setValue: I } = k({ name: a, initialValue: b, onChange: w }), e = F({
     isDisabled: l,
     validationStatus: n
   });
-  return /* @__PURE__ */ t(
-    F,
+  return /* @__PURE__ */ r(
+    S,
     {
-      id: r,
+      id: t,
       label: x,
-      className: h,
+      className: v,
       description: f,
       dataName: "TextField",
-      dataTestId: v,
+      dataTestId: y,
       disabled: l,
       required: c,
+      hideRequiredStar: g,
       validationStatus: n,
-      errorMessage: g,
-      children: /* @__PURE__ */ o("div", { className: "relative", children: [
-        /* @__PURE__ */ t(
+      errorMessage: h,
+      children: /* @__PURE__ */ i("div", { className: "relative", children: [
+        /* @__PURE__ */ r(
           "input",
           {
-            ...w,
-            id: r,
+            ...N,
+            id: t,
             name: a,
             disabled: l,
             required: c,
-            value: N,
-            onChange: (I) => C(I.target.value),
-            className: m(
+            value: C,
+            onChange: (T) => I(T.target.value),
+            className: u(
               "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none",
               {
                 "border-lightGrey focus:border-black active:border-black": e === "default",
@@ -66,10 +68,10 @@ const B = (p) => {
             "aria-label": a
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ i(
           "div",
           {
-            className: m(
+            className: u(
               "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
               {
                 "text-grey": e === "disabled",
@@ -78,10 +80,10 @@ const B = (p) => {
               }
             ),
             children: [
-              s && /* @__PURE__ */ t(i, { name: s, width: "24px" }),
-              /* @__PURE__ */ o("span", { className: "ms-auto flex gap-x-8", children: [
-                e === "error" && /* @__PURE__ */ t(i, { name: "CrossDefault", width: "24px", type: d }),
-                e === "success" && /* @__PURE__ */ t(i, { name: "CheckDefault", width: "24px", type: d })
+              s && /* @__PURE__ */ r(o, { name: s, width: "24px" }),
+              /* @__PURE__ */ i("span", { className: "ms-auto flex gap-x-8", children: [
+                e === "error" && /* @__PURE__ */ r(o, { name: "CrossDefault", width: "24px", type: d }),
+                e === "success" && /* @__PURE__ */ r(o, { name: "CheckDefault", width: "24px", type: d })
               ] })
             ]
           }

package/molecules/Forms/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../lib/molecules/Forms/TextField.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, FormControlProps } from './FormControl.js';\nimport { Icon, IconicNames, IconicTypes } from '@/atoms/Icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    className,\n    dataTestId = 'TextField',\n    onChange,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'ps-[52px]': icon,\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["TextField","props","internalId","useId","id","name","label","initialValue","description","validationStatus","icon","iconType","errorMessage","disabled","required","className","dataTestId","onChange","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","e","classnames","Icon"],"mappings":";;;;;;;;AAea,MAAAA,IAAY,CAAkBC,MAAiC;AAC1E,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAjB,GAEE,EAAE,OAAAkB,GAAO,UAAAC,MAAaC,EAAgB,EAAE,MAAAhB,GAAM,cAAAE,GAAc,UAAAU,EAAA,CAAU,GACtEK,IAAiBC,EAAkB;AAAA,IACvC,YAAYV;AAAA,IACZ,kBAAAJ;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAArB;AAAA,MACA,OAAAE;AAAA,MACA,WAAAS;AAAA,MACA,aAAAP;AAAA,MACA,UAAS;AAAA,MACT,YAAAQ;AAAA,MACA,UAAAH;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAL;AAAA,MACA,cAAAG;AAAA,MAEA,UAAA,gBAAAc,EAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGN;AAAA,YACJ,IAAAd;AAAA,YACA,MAAAC;AAAA,YACA,UAAAQ;AAAA,YACA,UAAAC;AAAA,YACA,OAAAK;AAAA,YACA,UAAU,CAACQ,MAAMP,EAASO,EAAE,OAAO,KAAc;AAAA,YACjD,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,2DACEN,MAAmB;AAAA,gBACrB,aAAaZ;AAAA,gBACb,aAAaY,MAAmB,WAAWA,MAAmB;AAAA,gBAC9D,uBAAuBA,MAAmB;AAAA,gBAC1C,sBAAsBA,MAAmB;AAAA,gBACzC,cAAcA,MAAmB;AAAA,gBACjC,gBAAgBA,MAAmB;AAAA,cACrC;AAAA,YACF;AAAA,YACA,cAAYjB;AAAA,UAAA;AAAA,QACd;AAAA,QAEA,gBAAAqB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA;AAAA,gBACE,aAAaN,MAAmB;AAAA,gBAChC,YAAYA,MAAmB;AAAA,gBAC/B,cAAcA,MAAmB;AAAA,cACnC;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,cAAAZ,KAAS,gBAAAc,EAAAK,GAAA,EAAK,MAAMnB,GAAM,OAAM,QAAO;AAAA,cAExC,gBAAAgB,EAAC,QAAK,EAAA,WAAU,wBACb,UAAA;AAAA,gBAAmBJ,MAAA,6BACjBO,GAAK,EAAA,MAAK,gBAAe,OAAM,QAAO,MAAMlB,EAAU,CAAA;AAAA,gBAGxDW,MAAmB,aACjB,gBAAAE,EAAAK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMlB,EAAU,CAAA;AAAA,cAAA,GAE3D;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TextField.js","sources":["../../../lib/molecules/Forms/TextField.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, FormControlProps } from './FormControl.js';\nimport { Icon, IconicNames, IconicTypes } from '@/atoms/Icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    onChange,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'ps-[52px]': icon,\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["TextField","props","internalId","useId","id","name","label","initialValue","description","validationStatus","icon","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","e","classnames","Icon"],"mappings":";;;;;;;;AAea,MAAAA,IAAY,CAAkBC,MAAiC;AAC1E,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAlB,GAEE,EAAE,OAAAmB,GAAO,UAAAC,MAAaC,EAAgB,EAAE,MAAAjB,GAAM,cAAAE,GAAc,UAAAW,EAAA,CAAU,GACtEK,IAAiBC,EAAkB;AAAA,IACvC,YAAYX;AAAA,IACZ,kBAAAJ;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAtB;AAAA,MACA,OAAAE;AAAA,MACA,WAAAU;AAAA,MACA,aAAAR;AAAA,MACA,UAAS;AAAA,MACT,YAAAS;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAN;AAAA,MACA,cAAAG;AAAA,MAEA,UAAA,gBAAAe,EAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGN;AAAA,YACJ,IAAAf;AAAA,YACA,MAAAC;AAAA,YACA,UAAAQ;AAAA,YACA,UAAAC;AAAA,YACA,OAAAM;AAAA,YACA,UAAU,CAACQ,MAAMP,EAASO,EAAE,OAAO,KAAc;AAAA,YACjD,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,2DACEN,MAAmB;AAAA,gBACrB,aAAab;AAAA,gBACb,aAAaa,MAAmB,WAAWA,MAAmB;AAAA,gBAC9D,uBAAuBA,MAAmB;AAAA,gBAC1C,sBAAsBA,MAAmB;AAAA,gBACzC,cAAcA,MAAmB;AAAA,gBACjC,gBAAgBA,MAAmB;AAAA,cACrC;AAAA,YACF;AAAA,YACA,cAAYlB;AAAA,UAAA;AAAA,QACd;AAAA,QAEA,gBAAAsB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA;AAAA,gBACE,aAAaN,MAAmB;AAAA,gBAChC,YAAYA,MAAmB;AAAA,gBAC/B,cAAcA,MAAmB;AAAA,cACnC;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,cAAAb,KAAS,gBAAAe,EAAAK,GAAA,EAAK,MAAMpB,GAAM,OAAM,QAAO;AAAA,cAExC,gBAAAiB,EAAC,QAAK,EAAA,WAAU,wBACb,UAAA;AAAA,gBAAmBJ,MAAA,6BACjBO,GAAK,EAAA,MAAK,gBAAe,OAAM,QAAO,MAAMnB,EAAU,CAAA;AAAA,gBAGxDY,MAAmB,aACjB,gBAAAE,EAAAK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMnB,EAAU,CAAA;AAAA,cAAA,GAE3D;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.0.1-rc.1",
+  "version": "1.1.0-beta.1",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -31,11 +31,6 @@
       "import": "./atoms/Icons/index.js",
       "default": "./atoms/Icons/index.js"
     },
-    "./atoms/Icons/fonts": {
-      "types": "./atoms/Icons/fonts/index.d.ts",
-      "import": "./atoms/Icons/fonts/index.js",
-      "default": "./atoms/Icons/fonts/index.js"
-    },
     "./atoms/Icons/svg": {
       "types": "./atoms/Icons/svg/index.d.ts",
       "import": "./atoms/Icons/svg/index.js",
@@ -46,6 +41,11 @@
       "import": "./atoms/Icons/svg-use/index.js",
       "default": "./atoms/Icons/svg-use/index.js"
     },
+    "./atoms/Icons/fonts": {
+      "types": "./atoms/Icons/fonts/index.d.ts",
+      "import": "./atoms/Icons/fonts/index.js",
+      "default": "./atoms/Icons/fonts/index.js"
+    },
     "./molecules/Tabs": {
       "types": "./molecules/Tabs/index.d.ts",
       "import": "./molecules/Tabs/index.js",