@clubmed/trident-ui 1.5.0 → 1.6.0-beta.1

package/molecules/Forms/FormLabel.js

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

package/molecules/Forms/FormLabel.js.map

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

package/molecules/Forms/NumberField.d.ts

@@ -299,7 +299,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     formMethod?: string | undefined | undefined;
     formNoValidate?: boolean | undefined | undefined;
     formTarget?: string | undefined | undefined;
-    layout?: "horizontal" | "vertical" | undefined;
+    layout?: "horizontal" | `horizontal-${string}` | "vertical" | undefined;
     multiple?: boolean | undefined | undefined;
     autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;
     accept?: string | undefined | undefined;

package/molecules/Forms/NumberField.js

@@ -1,5 +1,5 @@
 import { jsx as d, jsxs as C } from "react/jsx-runtime";
-import { c as g } from "../../chunks/index.js";
+import { c as g } from "../../chunks/clsx.js";
 import { useId as I } from "react";
 import { useValue as y } from "../../hooks/useValue.js";
 import { Button as v } from "../Buttons/Button.js";
@@ -10,17 +10,17 @@ function T(c) {
     id: i = e,
     name: n = i,
     value: o = 0,
-    onChange: m,
+    onChange: u,
     min: r = 0,
     max: a = 10,
     disabled: s = !1,
-    dataTestId: u = "NumberField",
+    dataTestId: m = "NumberField",
     ...f
   } = c, { value: t, setValue: l } = y({
     name: n,
     defaultValue: o,
     formatter: Number,
-    onChange: m
+    onChange: u
   });
   return {
     ...f,
@@ -29,7 +29,7 @@ function T(c) {
     max: a,
     name: n,
     value: t,
-    dataTestId: u,
+    dataTestId: m,
     disabled: s,
     handleChange: (h) => {
       const x = Number(h.target.value);
@@ -49,11 +49,11 @@ const M = (c) => {
     min: i,
     max: n,
     label: o,
-    description: m,
+    description: u,
     id: r,
     dataTestId: a,
     value: s,
-    handleChange: u,
+    handleChange: m,
     increase: f,
     decrease: t,
     errorMessage: l,
@@ -67,7 +67,7 @@ const M = (c) => {
     {
       id: r,
       label: o,
-      description: m,
+      description: u,
       className: g("flex items-center justify-between", c.className),
       dataName: "NumberField",
       dataTestId: a,
@@ -99,7 +99,7 @@ const M = (c) => {
             style: V,
             type: "number",
             id: r,
-            onChange: u,
+            onChange: m,
             disabled: e,
             required: b,
             value: s,

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 clsx from 'clsx';\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={clsx('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={clsx('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","clsx","jsxs","Button"],"mappings":"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"}

package/molecules/Forms/Password/Password.js

@@ -1,6 +1,6 @@
 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 { c as f } from "../../../chunks/clsx.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";

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 '@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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"}
+{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import { useInternalStatus } from '@/hooks/useInternalStatus';\nimport clsx from 'clsx';\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={clsx(\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={clsx(\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","clsx","Icon","status","index","ValidationMessage"],"mappings":"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"}

package/molecules/Forms/Password/ValidationMessage.js

@@ -1,7 +1,7 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { c as s } from "../../../chunks/index.js";
-import { Icon as a } from "@clubmed/trident-icons";
-const t = {
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { c as t } from "../../../chunks/clsx.js";
+import { Icon as s } from "@clubmed/trident-icons";
+const a = {
   default: {
     iconName: "Edit",
     iconColor: "middleGrey"
@@ -15,14 +15,14 @@ const t = {
     iconColor: "green"
   }
 };
-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 })
+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(s, { name: i, width: "30px", color: o }),
+    /* @__PURE__ */ e("span", { className: t("text-b3", `text-${o}`), children: r })
   ] });
 }
 export {
-  p as ValidationMessage
+  x 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 '@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;"}
+{"version":3,"file":"ValidationMessage.js","sources":["../../../../lib/molecules/Forms/Password/ValidationMessage.tsx"],"sourcesContent":["import clsx from 'clsx';\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={clsx('text-b3', `text-${iconColor}`)}>{label}</span>\n    </div>\n  );\n}\n"],"names":["ICON_PROPS","ValidationMessage","label","status","iconName","iconColor","jsxs","jsx","Icon","clsx"],"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,EAAK,WAAW,QAAQJ,CAAS,EAAE,GAAI,UAAAH,EAAA,CAAM;AAAA,EAAA,GAChE;AAEJ;"}

package/molecules/Forms/Radios/Radio.js

@@ -1,55 +1,55 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { c as C } from "../../../chunks/index.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { c as C } from "../../../chunks/clsx.js";
 import { useId as N } from "react";
 import { useValue as b } from "../../../hooks/useValue.js";
 /* empty css                       */
-function k(r) {
-  const d = N(), {
-    id: o = d,
-    name: t = o,
+function k(d) {
+  const n = N(), {
+    id: o = n,
+    name: l = o,
     className: c,
-    dataTestId: m,
+    dataTestId: h,
     disabled: a,
-    checked: h = !1,
+    checked: m = !1,
     value: i,
-    size: s = 24,
+    size: t = 24,
     tabIndex: f = 0,
     children: p,
     onChange: u,
     ...v
-  } = r, { value: l, setValue: x } = b({
-    name: t,
-    initialValue: h,
+  } = d, { value: s, setValue: x } = b({
+    name: l,
+    initialValue: m,
     onChange(g, y) {
       u?.(g, i !== void 0 ? i : y);
     }
   });
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ r(
     "label",
     {
       className: C(c, "relative flex items-center gap-8", {
         "text-grey": a
       }),
       children: [
-        /* @__PURE__ */ n("span", { className: "relative", children: [
+        /* @__PURE__ */ r("span", { className: "relative", children: [
           /* @__PURE__ */ e(
             "input",
             {
               ...v,
-              name: t,
-              "data-testid": m,
+              name: l,
+              "data-testid": h,
               type: "radio",
               tabIndex: f,
               onChange: () => {
-                a || x(!l);
+                a || x(!s);
               },
-              defaultChecked: l,
+              defaultChecked: s,
               "data-name": "Radio",
               disabled: a,
               value: i
             }
           ),
-          /* @__PURE__ */ e("span", { style: { height: s, width: s }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", width: s * 2 / 3, className: "overflow-visible", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "8px", style: { fill: "hsl(var(--color-saffron))" } }) }) })
+          /* @__PURE__ */ e("span", { style: { height: t, width: t }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", width: t * 2 / 3, className: "overflow-visible", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "8px", style: { fill: "hsl(var(--color-saffron))" } }) }) })
         ] }),
         p
       ]

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            if (!disabled) {\n              setValue(!checked);\n            }\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\nRadio.displayName = 'Radio';\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,IAAWT,GAAOK,MAAU,SAAYA,IAAQM,CAAiB;AAAA,IACnE;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,gBAAKJ,KACHS,EAAS,CAACD,CAAO;AAAA,cAErB;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;AAEAb,EAAM,cAAc;"}
+{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import clsx from 'clsx';\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={clsx(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            if (!disabled) {\n              setValue(!checked);\n            }\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\nRadio.displayName = 'Radio';\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","clsx","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,IAAWT,GAAOK,MAAU,SAAYA,IAAQM,CAAiB;AAAA,IACnE;AAAA,EAAA,CACD;AAED,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKd,GAAW,oCAAoC;AAAA,QAC7D,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,gBAAKJ,KACHS,EAAS,CAACD,CAAO;AAAA,cAErB;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;AAEAb,EAAM,cAAc;"}

package/molecules/Forms/Radios/RadioGroup.js

@@ -1,9 +1,9 @@
 import { jsx as N } from "react/jsx-runtime";
 import { useId as O, Children as V, isValidElement as W, cloneElement as y } from "react";
 import { useValue as _ } from "../../../hooks/useValue.js";
-import { c as h } from "../../../chunks/index.js";
-import { KEY as a } from "../../../hooks/keyboard.constants.js";
-function G(k) {
+import { c as h } from "../../../chunks/clsx.js";
+import { KEY as r } from "../../../hooks/keyboard.constants.js";
+function x(k) {
   const R = O(), {
     id: s = R,
     name: u = s,
@@ -15,7 +15,7 @@ function G(k) {
     readOnly: c,
     tabIndex: b = 0,
     ...m
-  } = k, { value: r, setValue: i } = _({
+  } = k, { value: a, setValue: i } = _({
     name: u,
     initialValue: v,
     defaultValue: I,
@@ -23,22 +23,22 @@ function G(k) {
   }), A = (e, o) => {
     let n = o;
     const t = e.target.parentNode.querySelectorAll('[role="radio"]');
-    if (e.key === a.ARROW_RIGHT || e.key === a.ARROW_DOWN)
+    if (e.key === r.ARROW_RIGHT || e.key === r.ARROW_DOWN)
       n = (o + 1) % t.length, t[n]?.focus();
-    else if (e.key === a.ARROW_LEFT || e.key === a.ARROW_UP)
+    else if (e.key === r.ARROW_LEFT || e.key === r.ARROW_UP)
       n = (o - 1 + t.length) % t.length, t[n]?.focus();
-    else if (e.key === a.SPACE || e.key === a.ENTER) {
+    else if (e.key === r.SPACE || e.key === r.ENTER) {
       i(t[o].dataset.value);
       return;
     }
   };
   function d(e, o) {
-    return r == null || r === "" ? b === o ? 0 : -1 : e ? 0 : -1;
+    return a == null || a === "" ? b === o ? 0 : -1 : e ? 0 : -1;
   }
   return /* @__PURE__ */ N("div", { ...m, className: h("flex gap-12", m.className), role: "radiogroup", children: V.map(g, (e, o) => {
     if (!W(e))
       return e;
-    const n = e.type.displayName, t = e.props.value, l = r === t;
+    const n = e.type.displayName, t = e.props.value, l = a === t;
     return n?.includes("Button") ? y(e, {
       color: l ? "black" : "white",
       ...e.props,
@@ -51,7 +51,7 @@ function G(k) {
       readOnly: c,
       tabIndex: d(l, o),
       "data-value": t,
-      "aria-checked": r === t,
+      "aria-checked": a === t,
       onKeyDown: (f) => A(f, o),
       onClick() {
         i(t), e.props?.onClick?.(t);
@@ -71,6 +71,6 @@ function G(k) {
   }) });
 }
 export {
-  G as RadioGroup
+  x as RadioGroup
 };
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  useId,\n  type ReactElement,\n} 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';\nimport type { ButtonProps } from '@/molecules/Buttons/v2/Button';\nimport { KEY } from '@/hooks/keyboard.constants';\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  const handleKeyDown = (e: KeyboardEvent, index: number) => {\n    let newIndex = index;\n    const options = (e.target as any)!.parentNode!.querySelectorAll('[role=\"radio\"]');\n\n    if (e.key === KEY.ARROW_RIGHT || e.key === KEY.ARROW_DOWN) {\n      newIndex = (index + 1) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.ARROW_LEFT || e.key === KEY.ARROW_UP) {\n      newIndex = (index - 1 + options.length) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.SPACE || e.key === KEY.ENTER) {\n      setValue(options[index].dataset.value as Value);\n      return;\n    }\n  };\n\n  function getTabIndex(checked: boolean, index: number) {\n    if (value === undefined || value === null || value === '') {\n      return tabIndex === index ? 0 : -1;\n    }\n\n    return checked ? 0 : -1;\n  }\n\n  return (\n    <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n      {Children.map(children, (child, index) => {\n        if (!isValidElement(child)) {\n          return child;\n        }\n\n        const type = (child.type as unknown as ReactElement & { displayName?: string }).displayName;\n        const itemValue = (child.props as ButtonProps | RadioProps).value;\n        const checked = value === itemValue;\n\n        if (type?.includes('Button')) {\n          return cloneElement(child, {\n            color: checked ? 'black' : 'white',\n            ...child.props,\n            value: undefined,\n            role: 'radio',\n            name,\n            component: 'span',\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: getTabIndex(checked, index),\n            'data-value': itemValue,\n            'aria-checked': value === itemValue,\n            onKeyDown: (e: KeyboardEvent) => handleKeyDown(e, index),\n            onClick() {\n              setValue(itemValue as Value);\n              child.props?.onClick?.(itemValue as Value);\n            },\n          } as ButtonProps);\n        }\n\n        return cloneElement(child, {\n          ...child.props,\n          name,\n          id: `${id}-${index}`,\n          disabled,\n          readOnly,\n          tabIndex: getTabIndex(checked, index),\n          checked: checked,\n          onChange(_: string, value: Value) {\n            setValue(value);\n          },\n        } as RadioProps<Value>);\n      })}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","handleKeyDown","index","newIndex","options","KEY","getTabIndex","checked","classnames","Children","child","isValidElement","type","itemValue","cloneElement","e","_"],"mappings":";;;;;AA+BO,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,GAEKQ,IAAgB,CAAC,GAAkBC,MAAkB;AACzD,QAAIC,IAAWD;AACf,UAAME,IAAW,EAAE,OAAgB,WAAY,iBAAiB,gBAAgB;AAEhF,QAAI,EAAE,QAAQC,EAAI,eAAe,EAAE,QAAQA,EAAI;AAC7C,MAAAF,KAAYD,IAAQ,KAAKE,EAAQ,QACjCA,EAAQD,CAAQ,GAAG,MAAA;AAAA,aACV,EAAE,QAAQE,EAAI,cAAc,EAAE,QAAQA,EAAI;AACnD,MAAAF,KAAYD,IAAQ,IAAIE,EAAQ,UAAUA,EAAQ,QAClDA,EAAQD,CAAQ,GAAG,MAAA;AAAA,aACV,EAAE,QAAQE,EAAI,SAAS,EAAE,QAAQA,EAAI,OAAO;AACrD,MAAAN,EAASK,EAAQF,CAAK,EAAE,QAAQ,KAAc;AAC9C;AAAA,IACF;AAAA,EACF;AAEA,WAASI,EAAYC,GAAkBL,GAAe;AACpD,WAA2BJ,KAAU,QAAQA,MAAU,KAC9CF,MAAaM,IAAQ,IAAI,KAG3BK,IAAU,IAAI;AAAA,EACvB;AAEA,2BACG,OAAA,EAAK,GAAGV,GAAM,WAAWW,EAAW,eAAeX,EAAK,SAAS,GAAG,MAAK,cACvE,UAAAY,EAAS,IAAInB,GAAU,CAACoB,GAAOR,MAAU;AACxC,QAAI,CAACS,EAAeD,CAAK;AACvB,aAAOA;AAGT,UAAME,IAAQF,EAAM,KAA4D,aAC1EG,IAAaH,EAAM,MAAmC,OACtDH,IAAUT,MAAUe;AAE1B,WAAID,GAAM,SAAS,QAAQ,IAClBE,EAAaJ,GAAO;AAAA,MACzB,OAAOH,IAAU,UAAU;AAAA,MAC3B,GAAGG,EAAM;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAArB;AAAA,MACA,WAAW;AAAA,MACX,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUW,EAAYC,GAASL,CAAK;AAAA,MACpC,cAAcW;AAAA,MACd,gBAAgBf,MAAUe;AAAA,MAC1B,WAAW,CAACE,MAAqBd,EAAcc,GAAGb,CAAK;AAAA,MACvD,UAAU;AACR,QAAAH,EAASc,CAAkB,GAC3BH,EAAM,OAAO,UAAUG,CAAkB;AAAA,MAC3C;AAAA,IAAA,CACc,IAGXC,EAAaJ,GAAO;AAAA,MACzB,GAAGA,EAAM;AAAA,MACT,MAAArB;AAAA,MACA,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUW,EAAYC,GAASL,CAAK;AAAA,MACpC,SAAAK;AAAA,MACA,SAASS,GAAWlB,GAAc;AAChC,QAAAC,EAASD,CAAK;AAAA,MAChB;AAAA,IAAA,CACoB;AAAA,EACxB,CAAC,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  useId,\n  type ReactElement,\n} 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 clsx from 'clsx';\nimport type { ButtonProps } from '@/molecules/Buttons/v2/Button';\nimport { KEY } from '@/hooks/keyboard.constants';\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  const handleKeyDown = (e: KeyboardEvent, index: number) => {\n    let newIndex = index;\n    const options = (e.target as any)!.parentNode!.querySelectorAll('[role=\"radio\"]');\n\n    if (e.key === KEY.ARROW_RIGHT || e.key === KEY.ARROW_DOWN) {\n      newIndex = (index + 1) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.ARROW_LEFT || e.key === KEY.ARROW_UP) {\n      newIndex = (index - 1 + options.length) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.SPACE || e.key === KEY.ENTER) {\n      setValue(options[index].dataset.value as Value);\n      return;\n    }\n  };\n\n  function getTabIndex(checked: boolean, index: number) {\n    if (value === undefined || value === null || value === '') {\n      return tabIndex === index ? 0 : -1;\n    }\n\n    return checked ? 0 : -1;\n  }\n\n  return (\n    <div {...rest} className={clsx('flex gap-12', rest.className)} role=\"radiogroup\">\n      {Children.map(children, (child, index) => {\n        if (!isValidElement(child)) {\n          return child;\n        }\n\n        const type = (child.type as unknown as ReactElement & { displayName?: string }).displayName;\n        const itemValue = (child.props as ButtonProps | RadioProps).value;\n        const checked = value === itemValue;\n\n        if (type?.includes('Button')) {\n          return cloneElement(child, {\n            color: checked ? 'black' : 'white',\n            ...child.props,\n            value: undefined,\n            role: 'radio',\n            name,\n            component: 'span',\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: getTabIndex(checked, index),\n            'data-value': itemValue,\n            'aria-checked': value === itemValue,\n            onKeyDown: (e: KeyboardEvent) => handleKeyDown(e, index),\n            onClick() {\n              setValue(itemValue as Value);\n              child.props?.onClick?.(itemValue as Value);\n            },\n          } as ButtonProps);\n        }\n\n        return cloneElement(child, {\n          ...child.props,\n          name,\n          id: `${id}-${index}`,\n          disabled,\n          readOnly,\n          tabIndex: getTabIndex(checked, index),\n          checked: checked,\n          onChange(_: string, value: Value) {\n            setValue(value);\n          },\n        } as RadioProps<Value>);\n      })}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","handleKeyDown","index","newIndex","options","KEY","getTabIndex","checked","clsx","Children","child","isValidElement","type","itemValue","cloneElement","e","_"],"mappings":";;;;;AA+BO,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,GAEKQ,IAAgB,CAAC,GAAkBC,MAAkB;AACzD,QAAIC,IAAWD;AACf,UAAME,IAAW,EAAE,OAAgB,WAAY,iBAAiB,gBAAgB;AAEhF,QAAI,EAAE,QAAQC,EAAI,eAAe,EAAE,QAAQA,EAAI;AAC7C,MAAAF,KAAYD,IAAQ,KAAKE,EAAQ,QACjCA,EAAQD,CAAQ,GAAG,MAAA;AAAA,aACV,EAAE,QAAQE,EAAI,cAAc,EAAE,QAAQA,EAAI;AACnD,MAAAF,KAAYD,IAAQ,IAAIE,EAAQ,UAAUA,EAAQ,QAClDA,EAAQD,CAAQ,GAAG,MAAA;AAAA,aACV,EAAE,QAAQE,EAAI,SAAS,EAAE,QAAQA,EAAI,OAAO;AACrD,MAAAN,EAASK,EAAQF,CAAK,EAAE,QAAQ,KAAc;AAC9C;AAAA,IACF;AAAA,EACF;AAEA,WAASI,EAAYC,GAAkBL,GAAe;AACpD,WAA2BJ,KAAU,QAAQA,MAAU,KAC9CF,MAAaM,IAAQ,IAAI,KAG3BK,IAAU,IAAI;AAAA,EACvB;AAEA,2BACG,OAAA,EAAK,GAAGV,GAAM,WAAWW,EAAK,eAAeX,EAAK,SAAS,GAAG,MAAK,cACjE,UAAAY,EAAS,IAAInB,GAAU,CAACoB,GAAOR,MAAU;AACxC,QAAI,CAACS,EAAeD,CAAK;AACvB,aAAOA;AAGT,UAAME,IAAQF,EAAM,KAA4D,aAC1EG,IAAaH,EAAM,MAAmC,OACtDH,IAAUT,MAAUe;AAE1B,WAAID,GAAM,SAAS,QAAQ,IAClBE,EAAaJ,GAAO;AAAA,MACzB,OAAOH,IAAU,UAAU;AAAA,MAC3B,GAAGG,EAAM;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAArB;AAAA,MACA,WAAW;AAAA,MACX,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUW,EAAYC,GAASL,CAAK;AAAA,MACpC,cAAcW;AAAA,MACd,gBAAgBf,MAAUe;AAAA,MAC1B,WAAW,CAACE,MAAqBd,EAAcc,GAAGb,CAAK;AAAA,MACvD,UAAU;AACR,QAAAH,EAASc,CAAkB,GAC3BH,EAAM,OAAO,UAAUG,CAAkB;AAAA,MAC3C;AAAA,IAAA,CACc,IAGXC,EAAaJ,GAAO;AAAA,MACzB,GAAGA,EAAM;AAAA,MACT,MAAArB;AAAA,MACA,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUW,EAAYC,GAASL,CAAK;AAAA,MACpC,SAAAK;AAAA,MACA,SAASS,GAAWlB,GAAc;AAChC,QAAAC,EAASD,CAAK;AAAA,MAChB;AAAA,IAAA,CACoB;AAAA,EACxB,CAAC,EAAA,CACH;AAEJ;"}

package/molecules/Forms/Range.js

@@ -1,6 +1,6 @@
 import { jsxs as D, jsx as E } from "react/jsx-runtime";
 import { R as M } from "../../chunks/ResizeObserver.js";
-import { c as q } from "../../chunks/index.js";
+import { c as q } from "../../chunks/clsx.js";
 import { useState as B, useRef as T, useEffect as w, useMemo as A, useId as F } from "react";
 import { g as H } from "../../chunks/_commonjsHelpers.js";
 var L, W;

package/molecules/Forms/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","sources":["../../../node_modules/debounce/index.js","../../../node_modules/react-use-measure/dist/web.js","../../../lib/molecules/Forms/Range.tsx"],"sourcesContent":["/**\n * Returns a function, that, as long as it continues to be invoked, will not\n * be triggered. The function will be called after it stops being called for\n * N milliseconds. If `immediate` is passed, trigger the function on the\n * leading edge, instead of the trailing. The function also has a property 'clear' \n * that is a function which will clear the timer to prevent previously scheduled executions. \n *\n * @source underscore.js\n * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/\n * @param {Function} function to wrap\n * @param {Number} timeout in ms (`100`)\n * @param {Boolean} whether to execute at the beginning (`false`)\n * @api public\n */\nfunction debounce(func, wait, immediate){\n  var timeout, args, context, timestamp, result;\n  if (null == wait) wait = 100;\n\n  function later() {\n    var last = Date.now() - timestamp;\n\n    if (last < wait && last >= 0) {\n      timeout = setTimeout(later, wait - last);\n    } else {\n      timeout = null;\n      if (!immediate) {\n        result = func.apply(context, args);\n        context = args = null;\n      }\n    }\n  };\n\n  var debounced = function(){\n    context = this;\n    args = arguments;\n    timestamp = Date.now();\n    var callNow = immediate && !timeout;\n    if (!timeout) timeout = setTimeout(later, wait);\n    if (callNow) {\n      result = func.apply(context, args);\n      context = args = null;\n    }\n\n    return result;\n  };\n\n  debounced.clear = function() {\n    if (timeout) {\n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n  \n  debounced.flush = function() {\n    if (timeout) {\n      result = func.apply(context, args);\n      context = args = null;\n      \n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n\n  return debounced;\n};\n\n// Adds compatibility for ES modules\ndebounce.debounce = debounce;\n\nmodule.exports = debounce;\n","import { useState, useRef, useEffect, useMemo } from 'react';\nimport createDebounce from 'debounce';\n\nfunction useMeasure(_temp) {\n  let {\n    debounce,\n    scroll,\n    polyfill,\n    offsetSize\n  } = _temp === void 0 ? {\n    debounce: 0,\n    scroll: false,\n    offsetSize: false\n  } : _temp;\n  const ResizeObserver = polyfill || (typeof window === 'undefined' ? class ResizeObserver {} : window.ResizeObserver);\n\n  if (!ResizeObserver) {\n    throw new Error('This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills');\n  }\n\n  const [bounds, set] = useState({\n    left: 0,\n    top: 0,\n    width: 0,\n    height: 0,\n    bottom: 0,\n    right: 0,\n    x: 0,\n    y: 0\n  }); // keep all state in a ref\n\n  const state = useRef({\n    element: null,\n    scrollContainers: null,\n    resizeObserver: null,\n    lastBounds: bounds\n  }); // set actual debounce values early, so effects know if they should react accordingly\n\n  const scrollDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.scroll : null;\n  const resizeDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.resize : null; // make sure to update state only as long as the component is truly mounted\n\n  const mounted = useRef(false);\n  useEffect(() => {\n    mounted.current = true;\n    return () => void (mounted.current = false);\n  }); // memoize handlers, so event-listeners know when they should update\n\n  const [forceRefresh, resizeChange, scrollChange] = useMemo(() => {\n    const callback = () => {\n      if (!state.current.element) return;\n      const {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      } = state.current.element.getBoundingClientRect();\n      const size = {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      };\n\n      if (state.current.element instanceof HTMLElement && offsetSize) {\n        size.height = state.current.element.offsetHeight;\n        size.width = state.current.element.offsetWidth;\n      }\n\n      Object.freeze(size);\n      if (mounted.current && !areBoundsEqual(state.current.lastBounds, size)) set(state.current.lastBounds = size);\n    };\n\n    return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];\n  }, [set, offsetSize, scrollDebounce, resizeDebounce]); // cleanup current scroll-listeners / observers\n\n  function removeListeners() {\n    if (state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(element => element.removeEventListener('scroll', scrollChange, true));\n      state.current.scrollContainers = null;\n    }\n\n    if (state.current.resizeObserver) {\n      state.current.resizeObserver.disconnect();\n      state.current.resizeObserver = null;\n    }\n  } // add scroll-listeners / observers\n\n\n  function addListeners() {\n    if (!state.current.element) return;\n    state.current.resizeObserver = new ResizeObserver(scrollChange);\n    state.current.resizeObserver.observe(state.current.element);\n\n    if (scroll && state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {\n        capture: true,\n        passive: true\n      }));\n    }\n  } // the ref we expose to the user\n\n\n  const ref = node => {\n    if (!node || node === state.current.element) return;\n    removeListeners();\n    state.current.element = node;\n    state.current.scrollContainers = findScrollContainers(node);\n    addListeners();\n  }; // add general event listeners\n\n\n  useOnWindowScroll(scrollChange, Boolean(scroll));\n  useOnWindowResize(resizeChange); // respond to changes that are relevant for the listeners\n\n  useEffect(() => {\n    removeListeners();\n    addListeners();\n  }, [scroll, scrollChange, resizeChange]); // remove all listeners when the components unmounts\n\n  useEffect(() => removeListeners, []);\n  return [ref, bounds, forceRefresh];\n} // Adds native resize listener to window\n\n\nfunction useOnWindowResize(onWindowResize) {\n  useEffect(() => {\n    const cb = onWindowResize;\n    window.addEventListener('resize', cb);\n    return () => void window.removeEventListener('resize', cb);\n  }, [onWindowResize]);\n}\n\nfunction useOnWindowScroll(onScroll, enabled) {\n  useEffect(() => {\n    if (enabled) {\n      const cb = onScroll;\n      window.addEventListener('scroll', cb, {\n        capture: true,\n        passive: true\n      });\n      return () => void window.removeEventListener('scroll', cb, true);\n    }\n  }, [onScroll, enabled]);\n} // Returns a list of scroll offsets\n\n\nfunction findScrollContainers(element) {\n  const result = [];\n  if (!element || element === document.body) return result;\n  const {\n    overflow,\n    overflowX,\n    overflowY\n  } = window.getComputedStyle(element);\n  if ([overflow, overflowX, overflowY].some(prop => prop === 'auto' || prop === 'scroll')) result.push(element);\n  return [...result, ...findScrollContainers(element.parentElement)];\n} // Checks if element boundaries are equal\n\n\nconst keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];\n\nconst areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);\n\nexport { useMeasure as default };\n","import { ResizeObserver } from '@juggle/resize-observer';\nimport classnames from 'classnames';\nimport {\n  type ChangeEvent,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  useId,\n  useState,\n} from 'react';\n\nimport useMeasure from 'react-use-measure';\nimport './range.css';\n\ninterface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * Aria label\n   * @default 'Range'\n   * */\n  ariaLabel?: string;\n  /**\n   * Additional class names\n   * */\n  className?: string;\n  /**\n   * Data test id\n   * */\n  dataTestId?: string;\n  /**\n   * Single cursor mode\n   * @default false\n   * */\n  singleCursorMode?: boolean;\n  /**\n   * Min value\n   * @default 0\n   * */\n  min?: number;\n  /**\n   * On change\n   * */\n  onChange?: (name: string, value: number[]) => void;\n  /**\n   * Options\n   * @default []\n   * */\n  options: { value: number; label: string }[];\n}\n\nexport const Range = (props: RangeProps) => {\n  const internalId = useId();\n\n  const {\n    ariaLabel,\n    className,\n    dataTestId = 'range',\n    id = internalId,\n    name = id,\n    singleCursorMode = false,\n    min = 0,\n    options = [],\n    step = 1,\n    readOnly,\n    disabled,\n    onChange,\n    ...rest\n  } = props;\n\n  const [valueA, setValueA] = useState(options.length - 1);\n  const [valueB, setValueB] = useState(min);\n  const [containerRef, { width }] = useMeasure({ polyfill: ResizeObserver });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!readOnly) {\n      e.persist();\n      const inputValue = Number(e.target.value);\n      const inputId = e.target.id[e.target.id.length - 1];\n\n      if (inputId === 'a') {\n        setValueA(inputValue);\n      } else {\n        setValueB(inputValue);\n      }\n\n      if (onChange) {\n        onChange(name, [valueA, valueB]);\n      }\n    }\n  };\n\n  return (\n    <div\n      style={\n        {\n          '--min': min,\n          '--max': options.length - 1,\n          '--inputWidth': `${width}px`,\n          '--inputHeight': '4px',\n          '--thumbWidth': '32px',\n          '--usefulWidth': 'calc(var(--inputWidth) - var(--thumbWidth))',\n          '--valueA': valueA,\n          '--valueB': valueB,\n        } as CSSProperties\n      }\n      className={classnames('relative w-full', className)}\n      data-testid={dataTestId}\n      data-name=\"Range\"\n      ref={containerRef}\n    >\n      <div className=\"input-range-container\">\n        <input\n          {...rest}\n          aria-label={ariaLabel}\n          className=\"input-range\"\n          id={`${id}-a`}\n          max={options.length - 1}\n          min={min}\n          name={name}\n          onChange={handleChange}\n          disabled={disabled}\n          step={step}\n          type=\"range\"\n          value={valueA}\n        />\n        {!singleCursorMode && (\n          <input\n            {...rest}\n            aria-label={ariaLabel}\n            className=\"input-range\"\n            disabled={disabled}\n            id={`${id}-b`}\n            max={options.length - 1}\n            min={min}\n            name={name}\n            onChange={handleChange}\n            step={step}\n            type=\"range\"\n            value={valueB}\n          />\n        )}\n      </div>\n      <output\n        htmlFor={`${id}-a`}\n        style={{ '--value': valueA } as CSSProperties}\n        className=\"input-range-output\"\n      >\n        {options[valueA].label}\n      </output>\n      {!singleCursorMode && (\n        <output\n          htmlFor={`${id}-b`}\n          style={{ '--value': valueB } as CSSProperties}\n          className=\"input-range-output\"\n        >\n          {options[valueB].label}\n        </output>\n      )}\n    </div>\n  );\n};\n"],"names":["debounce","func","wait","immediate","timeout","args","context","timestamp","result","later","last","debounced","callNow","debounce_1","useMeasure","_temp","scroll","polyfill","offsetSize","ResizeObserver","bounds","set","useState","state","useRef","scrollDebounce","resizeDebounce","mounted","useEffect","forceRefresh","resizeChange","scrollChange","useMemo","callback","left","top","width","height","bottom","right","x","y","size","areBoundsEqual","createDebounce","removeListeners","element","addListeners","scrollContainer","ref","node","findScrollContainers","useOnWindowScroll","useOnWindowResize","onWindowResize","cb","onScroll","enabled","overflow","overflowX","overflowY","prop","keys","a","b","key","Range","props","internalId","useId","ariaLabel","className","dataTestId","id","name","singleCursorMode","min","options","step","readOnly","disabled","onChange","rest","valueA","setValueA","valueB","setValueB","containerRef","handleChange","e","inputValue","jsxs","classnames","jsx"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Range.js","sources":["../../../node_modules/debounce/index.js","../../../node_modules/react-use-measure/dist/web.js","../../../lib/molecules/Forms/Range.tsx"],"sourcesContent":["/**\n * Returns a function, that, as long as it continues to be invoked, will not\n * be triggered. The function will be called after it stops being called for\n * N milliseconds. If `immediate` is passed, trigger the function on the\n * leading edge, instead of the trailing. The function also has a property 'clear' \n * that is a function which will clear the timer to prevent previously scheduled executions. \n *\n * @source underscore.js\n * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/\n * @param {Function} function to wrap\n * @param {Number} timeout in ms (`100`)\n * @param {Boolean} whether to execute at the beginning (`false`)\n * @api public\n */\nfunction debounce(func, wait, immediate){\n  var timeout, args, context, timestamp, result;\n  if (null == wait) wait = 100;\n\n  function later() {\n    var last = Date.now() - timestamp;\n\n    if (last < wait && last >= 0) {\n      timeout = setTimeout(later, wait - last);\n    } else {\n      timeout = null;\n      if (!immediate) {\n        result = func.apply(context, args);\n        context = args = null;\n      }\n    }\n  };\n\n  var debounced = function(){\n    context = this;\n    args = arguments;\n    timestamp = Date.now();\n    var callNow = immediate && !timeout;\n    if (!timeout) timeout = setTimeout(later, wait);\n    if (callNow) {\n      result = func.apply(context, args);\n      context = args = null;\n    }\n\n    return result;\n  };\n\n  debounced.clear = function() {\n    if (timeout) {\n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n  \n  debounced.flush = function() {\n    if (timeout) {\n      result = func.apply(context, args);\n      context = args = null;\n      \n      clearTimeout(timeout);\n      timeout = null;\n    }\n  };\n\n  return debounced;\n};\n\n// Adds compatibility for ES modules\ndebounce.debounce = debounce;\n\nmodule.exports = debounce;\n","import { useState, useRef, useEffect, useMemo } from 'react';\nimport createDebounce from 'debounce';\n\nfunction useMeasure(_temp) {\n  let {\n    debounce,\n    scroll,\n    polyfill,\n    offsetSize\n  } = _temp === void 0 ? {\n    debounce: 0,\n    scroll: false,\n    offsetSize: false\n  } : _temp;\n  const ResizeObserver = polyfill || (typeof window === 'undefined' ? class ResizeObserver {} : window.ResizeObserver);\n\n  if (!ResizeObserver) {\n    throw new Error('This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills');\n  }\n\n  const [bounds, set] = useState({\n    left: 0,\n    top: 0,\n    width: 0,\n    height: 0,\n    bottom: 0,\n    right: 0,\n    x: 0,\n    y: 0\n  }); // keep all state in a ref\n\n  const state = useRef({\n    element: null,\n    scrollContainers: null,\n    resizeObserver: null,\n    lastBounds: bounds\n  }); // set actual debounce values early, so effects know if they should react accordingly\n\n  const scrollDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.scroll : null;\n  const resizeDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.resize : null; // make sure to update state only as long as the component is truly mounted\n\n  const mounted = useRef(false);\n  useEffect(() => {\n    mounted.current = true;\n    return () => void (mounted.current = false);\n  }); // memoize handlers, so event-listeners know when they should update\n\n  const [forceRefresh, resizeChange, scrollChange] = useMemo(() => {\n    const callback = () => {\n      if (!state.current.element) return;\n      const {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      } = state.current.element.getBoundingClientRect();\n      const size = {\n        left,\n        top,\n        width,\n        height,\n        bottom,\n        right,\n        x,\n        y\n      };\n\n      if (state.current.element instanceof HTMLElement && offsetSize) {\n        size.height = state.current.element.offsetHeight;\n        size.width = state.current.element.offsetWidth;\n      }\n\n      Object.freeze(size);\n      if (mounted.current && !areBoundsEqual(state.current.lastBounds, size)) set(state.current.lastBounds = size);\n    };\n\n    return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];\n  }, [set, offsetSize, scrollDebounce, resizeDebounce]); // cleanup current scroll-listeners / observers\n\n  function removeListeners() {\n    if (state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(element => element.removeEventListener('scroll', scrollChange, true));\n      state.current.scrollContainers = null;\n    }\n\n    if (state.current.resizeObserver) {\n      state.current.resizeObserver.disconnect();\n      state.current.resizeObserver = null;\n    }\n  } // add scroll-listeners / observers\n\n\n  function addListeners() {\n    if (!state.current.element) return;\n    state.current.resizeObserver = new ResizeObserver(scrollChange);\n    state.current.resizeObserver.observe(state.current.element);\n\n    if (scroll && state.current.scrollContainers) {\n      state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {\n        capture: true,\n        passive: true\n      }));\n    }\n  } // the ref we expose to the user\n\n\n  const ref = node => {\n    if (!node || node === state.current.element) return;\n    removeListeners();\n    state.current.element = node;\n    state.current.scrollContainers = findScrollContainers(node);\n    addListeners();\n  }; // add general event listeners\n\n\n  useOnWindowScroll(scrollChange, Boolean(scroll));\n  useOnWindowResize(resizeChange); // respond to changes that are relevant for the listeners\n\n  useEffect(() => {\n    removeListeners();\n    addListeners();\n  }, [scroll, scrollChange, resizeChange]); // remove all listeners when the components unmounts\n\n  useEffect(() => removeListeners, []);\n  return [ref, bounds, forceRefresh];\n} // Adds native resize listener to window\n\n\nfunction useOnWindowResize(onWindowResize) {\n  useEffect(() => {\n    const cb = onWindowResize;\n    window.addEventListener('resize', cb);\n    return () => void window.removeEventListener('resize', cb);\n  }, [onWindowResize]);\n}\n\nfunction useOnWindowScroll(onScroll, enabled) {\n  useEffect(() => {\n    if (enabled) {\n      const cb = onScroll;\n      window.addEventListener('scroll', cb, {\n        capture: true,\n        passive: true\n      });\n      return () => void window.removeEventListener('scroll', cb, true);\n    }\n  }, [onScroll, enabled]);\n} // Returns a list of scroll offsets\n\n\nfunction findScrollContainers(element) {\n  const result = [];\n  if (!element || element === document.body) return result;\n  const {\n    overflow,\n    overflowX,\n    overflowY\n  } = window.getComputedStyle(element);\n  if ([overflow, overflowX, overflowY].some(prop => prop === 'auto' || prop === 'scroll')) result.push(element);\n  return [...result, ...findScrollContainers(element.parentElement)];\n} // Checks if element boundaries are equal\n\n\nconst keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];\n\nconst areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);\n\nexport { useMeasure as default };\n","import { ResizeObserver } from '@juggle/resize-observer';\nimport clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  useId,\n  useState,\n} from 'react';\n\nimport useMeasure from 'react-use-measure';\nimport './range.css';\n\ninterface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * Aria label\n   * @default 'Range'\n   * */\n  ariaLabel?: string;\n  /**\n   * Additional class names\n   * */\n  className?: string;\n  /**\n   * Data test id\n   * */\n  dataTestId?: string;\n  /**\n   * Single cursor mode\n   * @default false\n   * */\n  singleCursorMode?: boolean;\n  /**\n   * Min value\n   * @default 0\n   * */\n  min?: number;\n  /**\n   * On change\n   * */\n  onChange?: (name: string, value: number[]) => void;\n  /**\n   * Options\n   * @default []\n   * */\n  options: { value: number; label: string }[];\n}\n\nexport const Range = (props: RangeProps) => {\n  const internalId = useId();\n\n  const {\n    ariaLabel,\n    className,\n    dataTestId = 'range',\n    id = internalId,\n    name = id,\n    singleCursorMode = false,\n    min = 0,\n    options = [],\n    step = 1,\n    readOnly,\n    disabled,\n    onChange,\n    ...rest\n  } = props;\n\n  const [valueA, setValueA] = useState(options.length - 1);\n  const [valueB, setValueB] = useState(min);\n  const [containerRef, { width }] = useMeasure({ polyfill: ResizeObserver });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!readOnly) {\n      e.persist();\n      const inputValue = Number(e.target.value);\n      const inputId = e.target.id[e.target.id.length - 1];\n\n      if (inputId === 'a') {\n        setValueA(inputValue);\n      } else {\n        setValueB(inputValue);\n      }\n\n      if (onChange) {\n        onChange(name, [valueA, valueB]);\n      }\n    }\n  };\n\n  return (\n    <div\n      style={\n        {\n          '--min': min,\n          '--max': options.length - 1,\n          '--inputWidth': `${width}px`,\n          '--inputHeight': '4px',\n          '--thumbWidth': '32px',\n          '--usefulWidth': 'calc(var(--inputWidth) - var(--thumbWidth))',\n          '--valueA': valueA,\n          '--valueB': valueB,\n        } as CSSProperties\n      }\n      className={clsx('relative w-full', className)}\n      data-testid={dataTestId}\n      data-name=\"Range\"\n      ref={containerRef}\n    >\n      <div className=\"input-range-container\">\n        <input\n          {...rest}\n          aria-label={ariaLabel}\n          className=\"input-range\"\n          id={`${id}-a`}\n          max={options.length - 1}\n          min={min}\n          name={name}\n          onChange={handleChange}\n          disabled={disabled}\n          step={step}\n          type=\"range\"\n          value={valueA}\n        />\n        {!singleCursorMode && (\n          <input\n            {...rest}\n            aria-label={ariaLabel}\n            className=\"input-range\"\n            disabled={disabled}\n            id={`${id}-b`}\n            max={options.length - 1}\n            min={min}\n            name={name}\n            onChange={handleChange}\n            step={step}\n            type=\"range\"\n            value={valueB}\n          />\n        )}\n      </div>\n      <output\n        htmlFor={`${id}-a`}\n        style={{ '--value': valueA } as CSSProperties}\n        className=\"input-range-output\"\n      >\n        {options[valueA].label}\n      </output>\n      {!singleCursorMode && (\n        <output\n          htmlFor={`${id}-b`}\n          style={{ '--value': valueB } as CSSProperties}\n          className=\"input-range-output\"\n        >\n          {options[valueB].label}\n        </output>\n      )}\n    </div>\n  );\n};\n"],"names":["debounce","func","wait","immediate","timeout","args","context","timestamp","result","later","last","debounced","callNow","debounce_1","useMeasure","_temp","scroll","polyfill","offsetSize","ResizeObserver","bounds","set","useState","state","useRef","scrollDebounce","resizeDebounce","mounted","useEffect","forceRefresh","resizeChange","scrollChange","useMemo","callback","left","top","width","height","bottom","right","x","y","size","areBoundsEqual","createDebounce","removeListeners","element","addListeners","scrollContainer","ref","node","findScrollContainers","useOnWindowScroll","useOnWindowResize","onWindowResize","cb","onScroll","enabled","overflow","overflowX","overflowY","prop","keys","a","b","key","Range","props","internalId","useId","ariaLabel","className","dataTestId","id","name","singleCursorMode","min","options","step","readOnly","disabled","onChange","rest","valueA","setValueA","valueB","setValueB","containerRef","handleChange","e","inputValue","jsxs","clsx","jsx"],"mappings":"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","x_google_ignoreList":[0,1]}