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

package/molecules/Forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@/atoms/Icons';\nimport { useValue } from '@/hooks/useValue.js';\n\nexport interface FilterProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\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,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\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  return (\n    <label className={classnames(className, 'relative')}>\n      <input\n        {...rest}\n        name={name}\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        tabIndex={tabIndex}\n        onChange={() => {\n          !disabled && setValue(!checked);\n        }}\n        checked={checked}\n        data-name=\"Filter\"\n        disabled={disabled}\n        value={value}\n      />\n      <span>\n        <span className={classnames('text-b3 font-semibold')}>{children}</span>\n        <Icon width={null} name=\"CheckDefault\" color=\"black\" />\n        {hasDropdown && (\n          <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n        )}\n      </span>\n    </label>\n  );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","onChange","hasDropdown","children","rest","checked","setValue","useValue","classnames","jsx","Icon"],"mappings":";;;;;;;AAqBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAJ,KAAA,QAAAA,EAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB;AAAA,IAClF;AAAA,EAAA,CACD;AAED,2BACG,SAAM,EAAA,WAAWG,EAAWb,GAAW,UAAU,GAChD,UAAA;AAAA,IAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,eAAaE;AAAA,QACb,MAAK;AAAA,QACL,UAAAI;AAAA,QACA,UAAU,MAAM;AACb,WAAAH,KAAYS,EAAS,CAACD,CAAO;AAAA,QAChC;AAAA,QACA,SAAAA;AAAA,QACA,aAAU;AAAA,QACV,UAAAR;AAAA,QACA,OAAAE;AAAA,MAAA;AAAA,IACF;AAAA,sBACC,QACC,EAAA,UAAA;AAAA,MAAA,gBAAAU,EAAC,QAAK,EAAA,WAAWD,EAAW,uBAAuB,GAAI,UAAAL,GAAS;AAAA,wBAC/DO,GAAK,EAAA,OAAO,MAAM,MAAK,gBAAe,OAAM,SAAQ;AAAA,MACpDR,KACE,gBAAAO,EAAAC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAQ,CAAA;AAAA,IAAA,GAE9E;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\n\nexport interface FilterProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\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,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\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  return (\n    <label className={classnames(className, 'relative')}>\n      <input\n        {...rest}\n        name={name}\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        tabIndex={tabIndex}\n        onChange={() => {\n          !disabled && setValue(!checked);\n        }}\n        checked={checked}\n        data-name=\"Filter\"\n        disabled={disabled}\n        value={value}\n      />\n      <span>\n        <span className={classnames('text-b3 font-semibold')}>{children}</span>\n        <Icon width={null} name=\"CheckDefault\" color=\"black\" />\n        {hasDropdown && (\n          <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n        )}\n      </span>\n    </label>\n  );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","onChange","hasDropdown","children","rest","checked","setValue","useValue","classnames","jsx","Icon"],"mappings":";;;;;;AAqBO,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;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAJ,KAAA,QAAAA,EAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB;AAAA,IAClF;AAAA,EAAA,CACD;AAED,2BACG,SAAA,EAAM,WAAWG,EAAWb,GAAW,UAAU,GAChD,UAAA;AAAA,IAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,eAAaE;AAAA,QACb,MAAK;AAAA,QACL,UAAAI;AAAA,QACA,UAAU,MAAM;AACd,WAACH,KAAYS,EAAS,CAACD,CAAO;AAAA,QAChC;AAAA,QACA,SAAAA;AAAA,QACA,aAAU;AAAA,QACV,UAAAR;AAAA,QACA,OAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,sBAED,QAAA,EACC,UAAA;AAAA,MAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWD,EAAW,uBAAuB,GAAI,UAAAL,GAAS;AAAA,wBAC/DO,GAAA,EAAK,OAAO,MAAM,MAAK,gBAAe,OAAM,SAAQ;AAAA,MACpDR,KACC,gBAAAO,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,IAAA,EAAA,CAE9E;AAAA,EAAA,GACF;AAEJ;"}

package/molecules/Forms/FormControl.js

@@ -1,34 +1,33 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { useInternalStatus as h } from "../../hooks/useInternalStatus.js";
 import { FormLabel as S } from "./FormLabel.js";
-import { Icon as b } from "../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
+import { Icon as b } from "@clubmed/trident-icons";
 import { c as g } from "../../chunks/index.js";
-const w = ({
+const v = ({
   id: t,
   label: r,
   description: o,
-  disabled: m,
-  required: n,
-  className: i,
-  validationStatus: l = "default",
-  children: p,
+  disabled: n,
+  required: m,
+  className: l,
+  validationStatus: i = "default",
+  children: c,
   errorMessage: a,
-  dataTestId: c,
+  dataTestId: p,
   dataName: d,
   hideRequiredStar: x,
   layout: f
 }) => {
   const u = h({
-    isDisabled: !!m,
-    validationStatus: l
+    isDisabled: !!n,
+    validationStatus: i
   }) === "error" && a;
   return /* @__PURE__ */ s(
     "div",
     {
-      className: g("flex flex-col gap-4", i),
+      className: g("flex flex-col gap-4", l),
       "data-name": d,
-      "data-testid": c,
+      "data-testid": p,
       children: [
         r && t && /* @__PURE__ */ e(
           S,
@@ -36,12 +35,12 @@ const w = ({
             description: o,
             id: t,
             layout: f,
-            required: n,
+            required: m,
             hideRequiredStar: x,
             children: r
           }
         ),
-        p,
+        c,
         u && /* @__PURE__ */ s("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
           /* @__PURE__ */ e(b, { name: "Error", width: "20px" }),
           a
@@ -51,6 +50,6 @@ const w = ({
   );
 };
 export {
-  w as FormControl
+  v 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 { Icon } from '@/atoms/Icons';\nimport classnames from 'classnames';\n\nexport type FormControlProps<\n  Value = unknown,\n  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>,\n> = {\n  value?: Value;\n  label?: ReactNode;\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  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={classnames('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        >\n          {label}\n        </FormLabel>\n      )}\n\n      {children}\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start gap-x-4 px-20\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["FormControl","id","label","description","disabled","required","className","validationStatus","children","errorMessage","dataTestId","dataName","hideRequiredStar","layout","shouldDisplayErrorMessage","useInternalStatus","jsxs","classnames","jsx","FormLabel","Icon"],"mappings":";;;;;;AAmBO,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,kBAAAC;AAAA,EACA,QAAAC;AACF,MAA+B;AAMvB,QAAAC,IALiBC,EAAkB;AAAA,IACvC,YAAY,CAAC,CAACX;AAAA,IACd,kBAAAG;AAAA,EAAA,CACD,MAEoD,WAAWE;AAG9D,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,uBAAuBX,CAAS;AAAA,MACtD,aAAWK;AAAA,MACX,eAAaD;AAAA,MAEZ,UAAA;AAAA,QAAAR,KAASD,KACR,gBAAAiB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAAhB;AAAA,YACA,IAAAF;AAAA,YACA,QAAAY;AAAA,YACA,UAAAR;AAAA,YACA,kBAAAO;AAAA,YAEC,UAAAV;AAAA,UAAA;AAAA,QACH;AAAA,QAGDM;AAAA,QAEAM,KACC,gBAAAE,EAAC,QAAK,EAAA,WAAU,mDACd,UAAA;AAAA,UAAA,gBAAAE,EAACE,GAAK,EAAA,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/BX;AAAA,QAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"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 { Icon } from '@clubmed/trident-icons';\nimport classnames from 'classnames';\n\nexport type FormControlProps<\n  Value = unknown,\n  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>,\n> = {\n  value?: Value;\n  label?: ReactNode;\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  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={classnames('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        >\n          {label}\n        </FormLabel>\n      )}\n\n      {children}\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start gap-x-4 px-20\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["FormControl","id","label","description","disabled","required","className","validationStatus","children","errorMessage","dataTestId","dataName","hideRequiredStar","layout","shouldDisplayErrorMessage","useInternalStatus","jsxs","classnames","jsx","FormLabel","Icon"],"mappings":";;;;;AAmBO,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,kBAAAC;AAAA,EACA,QAAAC;AACF,MAA+B;AAM7B,QAAMC,IALiBC,EAAkB;AAAA,IACvC,YAAY,CAAC,CAACX;AAAA,IACd,kBAAAG;AAAA,EAAA,CACD,MAEoD,WAAWE;AAEhE,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,uBAAuBX,CAAS;AAAA,MACtD,aAAWK;AAAA,MACX,eAAaD;AAAA,MAEZ,UAAA;AAAA,QAAAR,KAASD,KACR,gBAAAiB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAAhB;AAAA,YACA,IAAAF;AAAA,YACA,QAAAY;AAAA,YACA,UAAAR;AAAA,YACA,kBAAAO;AAAA,YAEC,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJM;AAAA,QAEAM,KACC,gBAAAE,EAAC,QAAA,EAAK,WAAU,mDACd,UAAA;AAAA,UAAA,gBAAAE,EAACE,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/BX;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/molecules/Forms/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../lib/molecules/Forms/FormLabel.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { LabelHTMLAttributes } from 'react';\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  description?: string;\n  layout?: 'horizontal' | '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={classnames(\n        'text-b3 font-semibold text-black flex',\n        {\n          'flex-wrap items-center ps-20': layout === 'horizontal',\n          'flex-col items-start': layout === '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","classnames","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,gCAAgCP,MAAW;AAAA,QAC3C,wBAAwBA,MAAW;AAAA,MACrC;AAAA,MACAE;AAAA,IACF;AAAA,IACA,aAAU;AAAA,IAET,UAAA;AAAA,MAAAC;AAAA,MACAF,KAAY,CAACG,KAAoB,gBAAAI,EAAC,UAAK,UAAC,KAAA;AAAA,MACxCT,KAAe,gBAAAS,EAAC,QAAK,EAAA,WAAU,uCAAuC,UAAYT,GAAA;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"FormLabel.js","sources":["../../../lib/molecules/Forms/FormLabel.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { LabelHTMLAttributes } from 'react';\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  description?: string;\n  layout?: 'horizontal' | '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={classnames(\n        'text-b3 font-semibold text-black flex',\n        {\n          'flex-wrap items-center ps-20': layout === 'horizontal',\n          'flex-col items-start': layout === '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","classnames","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,gCAAgCP,MAAW;AAAA,QAC3C,wBAAwBA,MAAW;AAAA,MAAA;AAAA,MAErCE;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;"}

package/molecules/Forms/NumberField.d.ts

@@ -116,7 +116,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;

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 { type ChangeEvent, useId } from 'react';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { Button } from '../Buttons/Button';\nimport { FormControl, type 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          onClick={decrease}\n          variant=\"circle\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          aria-label=\"Decrease\"\n          data-testid={`${dataTestId}-decrease`}\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          onClick={increase}\n          variant=\"circle\"\n          aria-label=\"Increase\"\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          data-testid={`${dataTestId}-increase`}\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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"}
+{"version":3,"file":"NumberField.js","sources":["../../../lib/molecules/Forms/NumberField.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { type ChangeEvent, useId } from 'react';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { Button } from '../Buttons/Button';\nimport { FormControl, type 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          onClick={decrease}\n          variant=\"circle\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          aria-label=\"Decrease\"\n          data-testid={`${dataTestId}-decrease`}\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          onClick={increase}\n          variant=\"circle\"\n          aria-label=\"Increase\"\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          data-testid={`${dataTestId}-increase`}\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,13 +1,12 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import { useInternalStatus as M } from "../../../hooks/useInternalStatus.js";
 import { c as f } from "../../../chunks/index.js";
 import { useId as P, useState as T, useEffect as q } from "react";
 import { useValue as F } from "../../../hooks/useValue.js";
 import { FormControl as z } from "../FormControl.js";
-import { Icon as c } from "../../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
+import { Icon as p } from "@clubmed/trident-icons";
 import { ValidationMessage as E } from "./ValidationMessage.js";
-function Q(b) {
+function O(b) {
   const x = P(), {
     id: l = x,
     name: o = l,
@@ -36,7 +35,7 @@ function Q(b) {
     n(t ? "password" : r);
   }, [r, t]);
   const k = () => n(r === "password" ? "text" : "password");
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ c(
     z,
     {
       className: y,
@@ -50,7 +49,7 @@ function Q(b) {
       validationStatus: s ? "default" : e,
       errorMessage: w,
       children: [
-        /* @__PURE__ */ p("div", { className: "relative", children: [
+        /* @__PURE__ */ c("div", { className: "relative", children: [
           /* @__PURE__ */ a(
             "input",
             {
@@ -82,9 +81,9 @@ function Q(b) {
               className: f(
                 "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12"
               ),
-              children: /* @__PURE__ */ p("span", { className: "ms-auto flex gap-x-8", children: [
-                !s && e === "error" && /* @__PURE__ */ a(c, { name: "CrossDefault", color: "red", width: "24px" }),
-                !s && e === "success" && /* @__PURE__ */ a(c, { name: "CheckDefault", color: "green", width: "24px" }),
+              children: /* @__PURE__ */ c("span", { className: "ms-auto flex gap-x-8", children: [
+                !s && e === "error" && /* @__PURE__ */ a(p, { name: "CrossDefault", color: "red", width: "24px" }),
+                !s && e === "success" && /* @__PURE__ */ a(p, { name: "CheckDefault", color: "green", width: "24px" }),
                 !t && /* @__PURE__ */ a(
                   "button",
                   {
@@ -92,7 +91,7 @@ function Q(b) {
                     className: "pointer-events-auto size-24 inline-flex",
                     onClick: k,
                     children: /* @__PURE__ */ a(
-                      c,
+                      p,
                       {
                         name: r === "password" ? "Invisible" : "Visible",
                         width: "24px",
@@ -111,6 +110,6 @@ function Q(b) {
   );
 }
 export {
-  Q as Password
+  O as Password
 };
 //# sourceMappingURL=Password.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import { useInternalStatus } from '@/hooks/useInternalStatus';\nimport classnames from 'classnames';\n\nimport { type HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, type 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 internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => {\n    if (disabled) {\n      setType('password');\n    } else {\n      setType(type);\n    }\n  }, [type, disabled]);\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',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                (withoutFieldValidation || validationStatus === 'default') &&\n                internalStatus !== 'disabled',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\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            {!disabled && (\n              <button\n                type=\"button\"\n                className=\"pointer-events-auto size-24 inline-flex\"\n                onClick={toggleType}\n              >\n                <Icon\n                  name={type === 'password' ? 'Invisible' : 'Visible'}\n                  width=\"24px\"\n                  type=\"svg\"\n                />\n              </button>\n            )}\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","internalStatus","useInternalStatus","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 { useInternalStatus } from '@/hooks/useInternalStatus';\nimport classnames from 'classnames';\n\nimport { type HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, type FormControlProps } from '../FormControl';\nimport { Icon } from '@clubmed/trident-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 internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => {\n    if (disabled) {\n      setType('password');\n    } else {\n      setType(type);\n    }\n  }, [type, disabled]);\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',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                (withoutFieldValidation || validationStatus === 'default') &&\n                internalStatus !== 'disabled',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\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            {!disabled && (\n              <button\n                type=\"button\"\n                className=\"pointer-events-auto size-24 inline-flex\"\n                onClick={toggleType}\n              >\n                <Icon\n                  name={type === 'password' ? 'Invisible' : 'Visible'}\n                  width=\"24px\"\n                  type=\"svg\"\n                />\n              </button>\n            )}\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","internalStatus","useInternalStatus","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/Password/ValidationMessage.js

@@ -1,8 +1,7 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { c as s } from "../../../chunks/index.js";
-import { Icon as t } from "../../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
-const a = {
+import { Icon as a } from "@clubmed/trident-icons";
+const t = {
   default: {
     iconName: "Edit",
     iconColor: "middleGrey"
@@ -16,14 +15,14 @@ const a = {
     iconColor: "green"
   }
 };
-function x({ label: r, status: c }) {
-  const { iconName: i, iconColor: o } = a[c];
-  return /* @__PURE__ */ n("div", { className: "flex gap-[6px] px-20 items-center", children: [
-    /* @__PURE__ */ e(t, { name: i, width: "30px", color: o }),
+function p({ label: r, status: c }) {
+  const { iconName: n, iconColor: o } = t[c];
+  return /* @__PURE__ */ i("div", { className: "flex gap-[6px] px-20 items-center", children: [
+    /* @__PURE__ */ e(a, { name: n, width: "30px", color: o }),
     /* @__PURE__ */ e("span", { className: s("text-b3", `text-${o}`), children: r })
   ] });
 }
 export {
-  x as ValidationMessage
+  p as ValidationMessage
 };
 //# sourceMappingURL=ValidationMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ValidationMessage.js","sources":["../../../../lib/molecules/Forms/Password/ValidationMessage.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { Icon } from '@/atoms/Icons';\nimport type { ValidationStatus } from '@/hooks/useInternalStatus';\n\nexport interface ValidationMessage {\n  label: string;\n  status: ValidationStatus;\n}\n\nconst ICON_PROPS = {\n  default: {\n    iconName: 'Edit',\n    iconColor: 'middleGrey',\n  },\n  error: {\n    iconName: 'Error',\n    iconColor: 'red',\n  },\n  success: {\n    iconName: 'CheckDefault',\n    iconColor: 'green',\n  },\n};\n\nexport function ValidationMessage({ label, status }: ValidationMessage) {\n  const { iconName, iconColor } = ICON_PROPS[status];\n\n  return (\n    <div className=\"flex gap-[6px] px-20 items-center\">\n      <Icon name={iconName} width=\"30px\" color={iconColor} />\n      <span className={classnames('text-b3', `text-${iconColor}`)}>{label}</span>\n    </div>\n  );\n}\n"],"names":["ICON_PROPS","ValidationMessage","label","status","iconName","iconColor","jsxs","jsx","Icon","classnames"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA,EACjB,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AACF;AAEO,SAASC,EAAkB,EAAE,OAAAC,GAAO,QAAAC,KAA6B;AACtE,QAAM,EAAE,UAAAC,GAAU,WAAAC,EAAU,IAAIL,EAAWG,CAAM;AAG/C,SAAA,gBAAAG,EAAC,OAAI,EAAA,WAAU,qCACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAK,MAAMJ,GAAU,OAAM,QAAO,OAAOC,GAAW;AAAA,IACrD,gBAAAE,EAAC,UAAK,WAAWE,EAAW,WAAW,QAAQJ,CAAS,EAAE,GAAI,UAAMH,EAAA,CAAA;AAAA,EACtE,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"ValidationMessage.js","sources":["../../../../lib/molecules/Forms/Password/ValidationMessage.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ValidationStatus } from '@/hooks/useInternalStatus';\n\nexport interface ValidationMessage {\n  label: string;\n  status: ValidationStatus;\n}\n\nconst ICON_PROPS = {\n  default: {\n    iconName: 'Edit',\n    iconColor: 'middleGrey',\n  },\n  error: {\n    iconName: 'Error',\n    iconColor: 'red',\n  },\n  success: {\n    iconName: 'CheckDefault',\n    iconColor: 'green',\n  },\n};\n\nexport function ValidationMessage({ label, status }: ValidationMessage) {\n  const { iconName, iconColor } = ICON_PROPS[status];\n\n  return (\n    <div className=\"flex gap-[6px] px-20 items-center\">\n      <Icon name={iconName} width=\"30px\" color={iconColor} />\n      <span className={classnames('text-b3', `text-${iconColor}`)}>{label}</span>\n    </div>\n  );\n}\n"],"names":["ICON_PROPS","ValidationMessage","label","status","iconName","iconColor","jsxs","jsx","Icon","classnames"],"mappings":";;;AASA,MAAMA,IAAa;AAAA,EACjB,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,OAAO;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAEf;AAEO,SAASC,EAAkB,EAAE,OAAAC,GAAO,QAAAC,KAA6B;AACtE,QAAM,EAAE,UAAAC,GAAU,WAAAC,MAAcL,EAAWG,CAAM;AAEjD,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAK,MAAMJ,GAAU,OAAM,QAAO,OAAOC,GAAW;AAAA,IACrD,gBAAAE,EAAC,UAAK,WAAWE,EAAW,WAAW,QAAQJ,CAAS,EAAE,GAAI,UAAAH,EAAA,CAAM;AAAA,EAAA,GACtE;AAEJ;"}

package/molecules/Forms/Radios/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * The diameter of the radio button.\n   * */\n  size?: number;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\n    children,\n    onChange,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, (value !== undefined ? value : checked) as Value);\n    },\n  });\n\n  return (\n    <label\n      className={classnames(className, 'relative flex items-center gap-8', {\n        'text-grey': disabled,\n      })}\n    >\n      <span className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"radio\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            !disabled && setValue(!checked);\n          }}\n          defaultChecked={checked}\n          data-name=\"Radio\"\n          disabled={disabled}\n          value={value}\n        />\n\n        <span style={{ height: size, width: size }}>\n          <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n            <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n          </svg>\n        </span>\n      </span>\n\n      {children}\n    </label>\n  );\n}\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,KAAA,QAAAA,EAAWT,GAAOK,MAAU,SAAYA,IAAQM;AAAAA,IAClD;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAC,gBAAAW,EAAA,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACb,iBAAAJ,KAAYS,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UACF;AAAA,UAEC,gBAAAW,EAAA,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAK,GACvC,UAAC,gBAAAU,EAAA,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAO,EAAA,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,8BAA+B,CAAA,EAC9E,CAAA,GACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * The diameter of the radio button.\n   * */\n  size?: number;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\n    children,\n    onChange,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, (value !== undefined ? value : checked) as Value);\n    },\n  });\n\n  return (\n    <label\n      className={classnames(className, 'relative flex items-center gap-8', {\n        'text-grey': disabled,\n      })}\n    >\n      <span className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"radio\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            !disabled && setValue(!checked);\n          }}\n          defaultChecked={checked}\n          data-name=\"Radio\"\n          disabled={disabled}\n          value={value}\n        />\n\n        <span style={{ height: size, width: size }}>\n          <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n            <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n          </svg>\n        </span>\n      </span>\n\n      {children}\n    </label>\n  );\n}\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,KAAA,QAAAA,EAAWT,GAAOK,MAAU,SAAYA,IAAQM;AAAAA,IAClD;AAAA,EAAA,CACD;AAED,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACd,iBAACJ,KAAYS,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,gBAAAW,EAAC,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAA,GAClC,UAAA,gBAAAU,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,4BAAA,EAA4B,CAAG,GAC9E,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/molecules/Forms/Radios/RadioGroup.js

@@ -1,5 +1,5 @@
 import { jsx as v } from "react/jsx-runtime";
-import { useId as x, Children as I, isValidElement as b, cloneElement as C } from "react";
+import { useId as x, Children as I, cloneElement as b, isValidElement as C } from "react";
 import { useValue as h } from "../../../hooks/useValue.js";
 import { c as E } from "../../../chunks/index.js";
 function G(l) {
@@ -20,7 +20,7 @@ function G(l) {
     defaultValue: m,
     onChange: u
   });
-  return /* @__PURE__ */ v("div", { ...n, className: E("flex gap-12", n.className), role: "radiogroup", children: I.map(t, (e, o) => b(e) ? C(e, {
+  return /* @__PURE__ */ v("div", { ...n, className: E("flex gap-12", n.className), role: "radiogroup", children: I.map(t, (e, o) => C(e) ? b(e, {
     ...e.props,
     name: r,
     id: `${a}-${o}`,

package/molecules/Forms/Radios/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport type { RadioProps } from '@/molecules/Forms/Radios/Radio.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport classnames from 'classnames';\n\nexport interface RadioGroupProps<Value = string>\n  extends Pick<\n      FormControlProps<Value>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    defaultValue: defaultValue as Value,\n    onChange,\n  });\n\n  return (\n    <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n      {Children.map(children, (child, index) => {\n        return isValidElement(child)\n          ? cloneElement(child, {\n              ...child.props,\n              name,\n              id: `${id}-${index}`,\n              disabled,\n              readOnly,\n              tabIndex: tabIndex + index + 1,\n              checked: value === (child.props as RadioProps).value,\n              onChange(_: string, value: Value) {\n                setValue(value);\n              },\n            } as RadioProps<Value>)\n          : child;\n      })}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","classnames","Children","child","index","isValidElement","cloneElement","_"],"mappings":";;;;AAsBO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EACD,IAAAZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAS,IAAIC,EAAgB;AAAA,IAC1C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD;AAED,2BACG,OAAK,EAAA,GAAGI,GAAM,WAAWI,EAAW,eAAeJ,EAAK,SAAS,GAAG,MAAK,cACvE,UAAAK,EAAS,IAAIZ,GAAU,CAACa,GAAOC,MACvBC,EAAeF,CAAK,IACvBG,EAAaH,GAAO;AAAA,IAClB,GAAGA,EAAM;AAAA,IACT,MAAAd;AAAA,IACA,IAAI,GAAGD,CAAE,IAAIgB,CAAK;AAAA,IAClB,UAAAV;AAAA,IACA,UAAAC;AAAA,IACA,UAAUC,IAAWQ,IAAQ;AAAA,IAC7B,SAASN,MAAWK,EAAM,MAAqB;AAAA,IAC/C,SAASI,GAAWT,GAAc;AAChC,MAAAC,EAASD,CAAK;AAAA,IAChB;AAAA,EACoB,CAAA,IACtBK,CACL,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport type { RadioProps } from '@/molecules/Forms/Radios/Radio.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport classnames from 'classnames';\n\nexport interface RadioGroupProps<Value = string>\n  extends Pick<\n      FormControlProps<Value>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    defaultValue: defaultValue as Value,\n    onChange,\n  });\n\n  return (\n    <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n      {Children.map(children, (child, index) => {\n        return isValidElement(child)\n          ? cloneElement(child, {\n              ...child.props,\n              name,\n              id: `${id}-${index}`,\n              disabled,\n              readOnly,\n              tabIndex: tabIndex + index + 1,\n              checked: value === (child.props as RadioProps).value,\n              onChange(_: string, value: Value) {\n                setValue(value);\n              },\n            } as RadioProps<Value>)\n          : child;\n      })}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","classnames","Children","child","index","isValidElement","cloneElement","_"],"mappings":";;;;AAsBO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAA,IAAaC,EAAgB;AAAA,IAC1C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD;AAED,2BACG,OAAA,EAAK,GAAGI,GAAM,WAAWI,EAAW,eAAeJ,EAAK,SAAS,GAAG,MAAK,cACvE,UAAAK,EAAS,IAAIZ,GAAU,CAACa,GAAOC,MACvBC,EAAeF,CAAK,IACvBG,EAAaH,GAAO;AAAA,IAClB,GAAGA,EAAM;AAAA,IACT,MAAAd;AAAA,IACA,IAAI,GAAGD,CAAE,IAAIgB,CAAK;AAAA,IAClB,UAAAV;AAAA,IACA,UAAAC;AAAA,IACA,UAAUC,IAAWQ,IAAQ;AAAA,IAC7B,SAASN,MAAWK,EAAM,MAAqB;AAAA,IAC/C,SAASI,GAAWT,GAAc;AAChC,MAAAC,EAASD,CAAK;AAAA,IAChB;AAAA,EAAA,CACoB,IACtBK,CACL,EAAA,CACH;AAEJ;"}