@gusto/embedded-react-sdk 0.8.0 → 0.8.1

package/dist/components/Common/UI/NumberInput/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../../../src/components/Common/UI/NumberInput/NumberInput.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Group, NumberField as AriaNumberField } from 'react-aria-components'\nimport classNames from 'classnames'\nimport { FieldLayout } from '../FieldLayout'\nimport { Input } from '../Input'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './NumberInput.module.scss'\nimport type { NumberInputProps } from './NumberInputTypes'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\nexport function NumberInput({\n  name,\n  format,\n  inputRef,\n  id,\n  value,\n  description,\n  errorMessage,\n  isRequired,\n  placeholder,\n  isInvalid,\n  isDisabled,\n  onChange,\n  onBlur,\n  label,\n  min,\n  max,\n  shouldVisuallyHideLabel,\n  adornmentStart,\n  adornmentEnd,\n  className,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  ...props\n}: NumberInputProps) {\n  const { locale, currency } = useLocale()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const minValue = typeof min === 'string' ? Number(min) : min\n  const maxValue = typeof max === 'string' ? Number(max) : max\n\n  const currencySymbol = useMemo(() => {\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n    })\n      .formatToParts(0)\n      .find(part => part.type === 'currency')?.value\n  }, [currency, locale])\n\n  return (\n    <FieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n      {...props}\n    >\n      <AriaNumberField\n        value={value}\n        name={name}\n        formatOptions={{\n          style: 'decimal',\n          minimumFractionDigits: format === 'currency' ? 2 : minimumFractionDigits,\n          maximumFractionDigits: format === 'currency' ? 2 : maximumFractionDigits,\n          currency,\n          currencyDisplay: 'symbol',\n        }}\n        isInvalid={isInvalid}\n        isDisabled={isDisabled}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        onChange={onChange}\n        // This is a hack to silence an unnecessary react-aria warning. The FieldLayout component\n        // already associates the label and input with htmlFor + ID. If we include a label id here,\n        // the label will get read twice by assistive tech. This evaluates to an empty string which\n        // does not get associated with any elements and does not get read.\n        aria-labelledby=\" \"\n        minValue={minValue}\n        maxValue={maxValue}\n        {...props}\n      >\n        <Group>\n          <Input\n            adornmentStart={adornmentStart || (format === 'currency' ? currencySymbol : null)}\n            adornmentEnd={adornmentEnd || (format === 'percent' ? '%' : null)}\n            id={inputId}\n            inputRef={inputRef}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            aria-describedby={ariaDescribedBy}\n            isDisabled={isDisabled}\n          />\n        </Group>\n      </AriaNumberField>\n    </FieldLayout>\n  )\n}\n"],"names":["NumberInput","name","format","inputRef","id","value","description","errorMessage","isRequired","placeholder","isInvalid","isDisabled","onChange","onBlur","label","min","max","shouldVisuallyHideLabel","adornmentStart","adornmentEnd","className","maximumFractionDigits","minimumFractionDigits","props","locale","currency","useLocale","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","minValue","maxValue","currencySymbol","useMemo","part","jsx","FieldLayout","classNames","styles","AriaNumberField","Group","Input"],"mappings":";;;;;;;;;AAUO,SAASA,EAAY;AAAA,EAC1B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,EAAS,IAAIC,EAAU,GACjC,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAAS3B;AAAA,IACT,cAAAG;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEK0B,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GACnDkB,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GAEnDkB,IAAiBC,EAAQ,MACtB,IAAI,KAAK,aAAaX,GAAQ;AAAA,IACnC,OAAO;AAAA,IACP,UAAAC;AAAA,EAAA,CACD,EACE,cAAc,CAAC,EACf,KAAK,CAAQW,MAAAA,EAAK,SAAS,UAAU,GAAG,OAC1C,CAACX,GAAUD,CAAM,CAAC;AAGnB,SAAA,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,aAAAR;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASmB;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAZ;AAAA,MACA,WAAWsB,EAAWC,EAAO,MAAMpB,CAAS;AAAA,MAC5C,eAAe;AAAA,MACd,GAAGG;AAAA,MAEJ,UAAA,gBAAAc;AAAA,QAACI;AAAAA,QAAA;AAAA,UACC,OAAApC;AAAA,UACA,MAAAJ;AAAA,UACA,eAAe;AAAA,YACb,OAAO;AAAA,YACP,uBAAuBC,MAAW,aAAa,IAAIoB;AAAA,YACnD,uBAAuBpB,MAAW,aAAa,IAAImB;AAAA,YACnD,UAAAI;AAAA,YACA,iBAAiB;AAAA,UACnB;AAAA,UACA,WAAAf;AAAA,UACA,YAAAC;AAAA,UACA,YAAAH;AAAA,UACA,oBAAmB;AAAA,UACnB,UAAAI;AAAA,UAKA,mBAAgB;AAAA,UAChB,UAAAoB;AAAA,UACA,UAAAC;AAAA,UACC,GAAGV;AAAA,UAEJ,4BAACmB,GACC,EAAA,UAAA,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,gBAAgBzB,MAAmBhB,MAAW,aAAagC,IAAiB;AAAA,cAC5E,cAAcf,MAAiBjB,MAAW,YAAY,MAAM;AAAA,cAC5D,IAAIyB;AAAA,cACJ,UAAAxB;AAAA,cACA,QAAAU;AAAA,cACA,aAAAJ;AAAA,cACA,oBAAkBqB;AAAA,cAClB,YAAAnB;AAAA,YAAA;AAAA,UAAA,EAEJ,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"NumberInput.js","sources":["../../../../../src/components/Common/UI/NumberInput/NumberInput.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Group, NumberField as AriaNumberField } from 'react-aria-components'\nimport classNames from 'classnames'\nimport { Input } from '../Input'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './NumberInput.module.scss'\nimport type { NumberInputProps } from './NumberInputTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\nexport function NumberInput({\n  name,\n  format,\n  inputRef,\n  id,\n  value,\n  description,\n  errorMessage,\n  isRequired,\n  placeholder,\n  isInvalid,\n  isDisabled,\n  onChange,\n  onBlur,\n  label,\n  min,\n  max,\n  shouldVisuallyHideLabel,\n  adornmentStart,\n  adornmentEnd,\n  className,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  ...props\n}: NumberInputProps) {\n  const { locale, currency } = useLocale()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const minValue = typeof min === 'string' ? Number(min) : min\n  const maxValue = typeof max === 'string' ? Number(max) : max\n\n  const currencySymbol = useMemo(() => {\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n    })\n      .formatToParts(0)\n      .find(part => part.type === 'currency')?.value\n  }, [currency, locale])\n\n  return (\n    <FieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n      {...props}\n    >\n      <AriaNumberField\n        value={value}\n        name={name}\n        formatOptions={{\n          style: 'decimal',\n          minimumFractionDigits: format === 'currency' ? 2 : minimumFractionDigits,\n          maximumFractionDigits: format === 'currency' ? 2 : maximumFractionDigits,\n          currency,\n          currencyDisplay: 'symbol',\n        }}\n        isInvalid={isInvalid}\n        isDisabled={isDisabled}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        onChange={onChange}\n        // This is a hack to silence an unnecessary react-aria warning. The FieldLayout component\n        // already associates the label and input with htmlFor + ID. If we include a label id here,\n        // the label will get read twice by assistive tech. This evaluates to an empty string which\n        // does not get associated with any elements and does not get read.\n        aria-labelledby=\" \"\n        minValue={minValue}\n        maxValue={maxValue}\n        {...props}\n      >\n        <Group>\n          <Input\n            adornmentStart={adornmentStart || (format === 'currency' ? currencySymbol : null)}\n            adornmentEnd={adornmentEnd || (format === 'percent' ? '%' : null)}\n            id={inputId}\n            inputRef={inputRef}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            aria-describedby={ariaDescribedBy}\n            isDisabled={isDisabled}\n          />\n        </Group>\n      </AriaNumberField>\n    </FieldLayout>\n  )\n}\n"],"names":["NumberInput","name","format","inputRef","id","value","description","errorMessage","isRequired","placeholder","isInvalid","isDisabled","onChange","onBlur","label","min","max","shouldVisuallyHideLabel","adornmentStart","adornmentEnd","className","maximumFractionDigits","minimumFractionDigits","props","locale","currency","useLocale","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","minValue","maxValue","currencySymbol","useMemo","part","jsx","FieldLayout","classNames","styles","AriaNumberField","Group","Input"],"mappings":";;;;;;;;;AAUO,SAASA,EAAY;AAAA,EAC1B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,EAAS,IAAIC,EAAU,GACjC,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAAS3B;AAAA,IACT,cAAAG;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEK0B,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GACnDkB,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GAEnDkB,IAAiBC,EAAQ,MACtB,IAAI,KAAK,aAAaX,GAAQ;AAAA,IACnC,OAAO;AAAA,IACP,UAAAC;AAAA,EAAA,CACD,EACE,cAAc,CAAC,EACf,KAAK,CAAQW,MAAAA,EAAK,SAAS,UAAU,GAAG,OAC1C,CAACX,GAAUD,CAAM,CAAC;AAGnB,SAAA,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,aAAAR;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASmB;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAZ;AAAA,MACA,WAAWsB,EAAWC,EAAO,MAAMpB,CAAS;AAAA,MAC5C,eAAe;AAAA,MACd,GAAGG;AAAA,MAEJ,UAAA,gBAAAc;AAAA,QAACI;AAAAA,QAAA;AAAA,UACC,OAAApC;AAAA,UACA,MAAAJ;AAAA,UACA,eAAe;AAAA,YACb,OAAO;AAAA,YACP,uBAAuBC,MAAW,aAAa,IAAIoB;AAAA,YACnD,uBAAuBpB,MAAW,aAAa,IAAImB;AAAA,YACnD,UAAAI;AAAA,YACA,iBAAiB;AAAA,UACnB;AAAA,UACA,WAAAf;AAAA,UACA,YAAAC;AAAA,UACA,YAAAH;AAAA,UACA,oBAAmB;AAAA,UACnB,UAAAI;AAAA,UAKA,mBAAgB;AAAA,UAChB,UAAAoB;AAAA,UACA,UAAAC;AAAA,UACC,GAAGV;AAAA,UAEJ,4BAACmB,GACC,EAAA,UAAA,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,gBAAgBzB,MAAmBhB,MAAW,aAAagC,IAAiB;AAAA,cAC5E,cAAcf,MAAiBjB,MAAW,YAAY,MAAM;AAAA,cAC5D,IAAIyB;AAAA,cACJ,UAAAxB;AAAA,cACA,QAAAU;AAAA,cACA,aAAAJ;AAAA,cACA,oBAAkBqB;AAAA,cAClB,YAAAnB;AAAA,YAAA;AAAA,UAAA,EAEJ,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/NumberInput/NumberInputTypes.d.ts

@@ -1,16 +1,49 @@
 import { FocusEventHandler, InputHTMLAttributes, Ref } from 'react';
-import { SharedFieldLayoutProps } from '../FieldLayout/FieldLayoutTypes';
 import { InputProps } from '../Input/InputTypes';
+import { SharedFieldLayoutProps } from '../../FieldLayout/FieldLayoutTypes';
 export interface NumberInputProps extends SharedFieldLayoutProps, Pick<InputHTMLAttributes<HTMLInputElement>, 'min' | 'max' | 'name' | 'id' | 'placeholder' | 'className'> {
+    /**
+     * Format type for the number input
+     */
     format?: 'currency' | 'decimal' | 'percent';
+    /**
+     * React ref for the number input element
+     */
     inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Current value of the number input
+     */
     value?: number;
+    /**
+     * Indicates that the field has an error
+     */
     isInvalid?: boolean;
+    /**
+     * Disables the number input and prevents interaction
+     */
     isDisabled?: boolean;
+    /**
+     * Callback when number input value changes
+     */
     onChange?: (value: number) => void;
+    /**
+     * Handler for blur events
+     */
     onBlur?: FocusEventHandler<HTMLElement>;
+    /**
+     * Element to display at the start of the input
+     */
     adornmentStart?: InputProps['adornmentStart'];
+    /**
+     * Element to display at the end of the input
+     */
     adornmentEnd?: InputProps['adornmentEnd'];
+    /**
+     * Minimum number of decimal places to display
+     */
     minimumFractionDigits?: number;
+    /**
+     * Maximum number of decimal places to display
+     */
     maximumFractionDigits?: number;
 }

package/dist/components/Common/UI/ProgressBar/ProgressBarTypes.d.ts

@@ -1,6 +1,18 @@
 export interface ProgressBarProps {
+    /**
+     * Total number of steps in the progress sequence
+     */
     totalSteps: number;
+    /**
+     * Current step in the progress sequence
+     */
     currentStep: number;
+    /**
+     * Additional CSS class name for the progress bar container
+     */
     className?: string;
+    /**
+     * Accessible label describing the progress bar's purpose
+     */
     label: string;
 }

package/dist/components/Common/UI/Radio/Radio.js

@@ -2,7 +2,7 @@ import { jsx as i, jsxs as x } from "react/jsx-runtime";
 import F from "classnames";
 import { useFieldIds as j } from "../hooks/useFieldIds.js";
 import e from "./Radio.module.scss.js";
-import { HorizontalFieldLayout as v } from "../HorizontalFieldLayout/HorizontalFieldLayout.js";
+import { HorizontalFieldLayout as v } from "../../HorizontalFieldLayout/HorizontalFieldLayout.js";
 const R = ({
   name: o,
   label: t,

package/dist/components/Common/UI/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../../src/components/Common/UI/Radio/Radio.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport { HorizontalFieldLayout } from '../HorizontalFieldLayout'\nimport styles from './Radio.module.scss'\nimport type { RadioProps } from './RadioTypes'\n\nexport const Radio = ({\n  name,\n  label,\n  description,\n  errorMessage,\n  isRequired,\n  inputRef,\n  value,\n  isInvalid = false,\n  isDisabled = false,\n  id,\n  onChange,\n  onBlur,\n  shouldVisuallyHideLabel,\n  className,\n  ...props\n}: RadioProps) => {\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.checked)\n  }\n\n  return (\n    <HorizontalFieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={className}\n      {...props}\n    >\n      <div className={styles.radioWrapper}>\n        <input\n          type=\"radio\"\n          name={name}\n          disabled={isDisabled}\n          aria-describedby={ariaDescribedBy}\n          checked={value}\n          id={inputId}\n          ref={inputRef}\n          onBlur={onBlur}\n          onChange={handleChange}\n          className={styles.radioInput}\n        />\n        <div className={classNames(styles.radio, { [styles.checked as string]: value })}>\n          {value && <div className={styles.radioDot} />}\n        </div>\n      </div>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Radio","name","label","description","errorMessage","isRequired","inputRef","value","isInvalid","isDisabled","id","onChange","onBlur","shouldVisuallyHideLabel","className","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","handleChange","event","jsx","HorizontalFieldLayout","jsxs","styles","classNames"],"mappings":";;;;;AAOO,MAAMA,IAAQ,CAAC;AAAA,EACpB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAkB;AAChB,QAAM,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASV;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEKkB,IAAe,CAACC,MAAyC;AAClD,IAAAX,IAAAW,EAAM,OAAO,OAAO;AAAA,EACjC;AAGE,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASW;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAL;AAAA,MACA,WAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,cACrB,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAAtB;AAAA,YACA,UAAUQ;AAAA,YACV,oBAAkBU;AAAA,YAClB,SAASZ;AAAA,YACT,IAAIS;AAAA,YACJ,KAAKV;AAAA,YACL,QAAAM;AAAA,YACA,UAAUS;AAAA,YACV,WAAWK,EAAO;AAAA,UAAA;AAAA,QACpB;AAAA,QACA,gBAAAH,EAAC,SAAI,WAAWI,EAAWD,EAAO,OAAO,EAAE,CAACA,EAAO,OAAiB,GAAGnB,EAAM,CAAC,GAC3E,UAASA,KAAA,gBAAAgB,EAAC,SAAI,WAAWG,EAAO,UAAU,EAC7C,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Radio.js","sources":["../../../../../src/components/Common/UI/Radio/Radio.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './Radio.module.scss'\nimport type { RadioProps } from './RadioTypes'\nimport { HorizontalFieldLayout } from '@/components/Common/HorizontalFieldLayout'\n\nexport const Radio = ({\n  name,\n  label,\n  description,\n  errorMessage,\n  isRequired,\n  inputRef,\n  value,\n  isInvalid = false,\n  isDisabled = false,\n  id,\n  onChange,\n  onBlur,\n  shouldVisuallyHideLabel,\n  className,\n  ...props\n}: RadioProps) => {\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.checked)\n  }\n\n  return (\n    <HorizontalFieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={className}\n      {...props}\n    >\n      <div className={styles.radioWrapper}>\n        <input\n          type=\"radio\"\n          name={name}\n          disabled={isDisabled}\n          aria-describedby={ariaDescribedBy}\n          checked={value}\n          id={inputId}\n          ref={inputRef}\n          onBlur={onBlur}\n          onChange={handleChange}\n          className={styles.radioInput}\n        />\n        <div className={classNames(styles.radio, { [styles.checked as string]: value })}>\n          {value && <div className={styles.radioDot} />}\n        </div>\n      </div>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Radio","name","label","description","errorMessage","isRequired","inputRef","value","isInvalid","isDisabled","id","onChange","onBlur","shouldVisuallyHideLabel","className","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","handleChange","event","jsx","HorizontalFieldLayout","jsxs","styles","classNames"],"mappings":";;;;;AAOO,MAAMA,IAAQ,CAAC;AAAA,EACpB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAkB;AAChB,QAAM,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASV;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEKkB,IAAe,CAACC,MAAyC;AAClD,IAAAX,IAAAW,EAAM,OAAO,OAAO;AAAA,EACjC;AAGE,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASW;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAL;AAAA,MACA,WAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,cACrB,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAAtB;AAAA,YACA,UAAUQ;AAAA,YACV,oBAAkBU;AAAA,YAClB,SAASZ;AAAA,YACT,IAAIS;AAAA,YACJ,KAAKV;AAAA,YACL,QAAAM;AAAA,YACA,UAAUS;AAAA,YACV,WAAWK,EAAO;AAAA,UAAA;AAAA,QACpB;AAAA,QACA,gBAAAH,EAAC,SAAI,WAAWI,EAAWD,EAAO,OAAO,EAAE,CAACA,EAAO,OAAiB,GAAGnB,EAAM,CAAC,GAC3E,UAASA,KAAA,gBAAAgB,EAAC,SAAI,WAAWG,EAAO,UAAU,EAC7C,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/Radio/RadioTypes.d.ts

@@ -1,9 +1,24 @@
 import { InputHTMLAttributes, Ref } from 'react';
-import { SharedHorizontalFieldLayoutProps } from '../HorizontalFieldLayout/HorizontalFieldLayoutTypes';
+import { SharedHorizontalFieldLayoutProps } from '../../HorizontalFieldLayout/HorizontalFieldLayoutTypes';
 export interface RadioProps extends SharedHorizontalFieldLayoutProps, Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id' | 'className' | 'onBlur'> {
+    /**
+     * Current checked state of the radio button
+     */
     value?: boolean;
+    /**
+     * Callback when radio button state changes
+     */
     onChange?: (checked: boolean) => void;
+    /**
+     * React ref for the radio input element
+     */
     inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Indicates that the field has an error
+     */
     isInvalid?: boolean;
+    /**
+     * Disables the radio button and prevents interaction
+     */
     isDisabled?: boolean;
 }

package/dist/components/Common/UI/RadioGroup/RadioGroup.js

@@ -5,8 +5,8 @@ import { RadioGroup as G, RadioGroupStateContext as y } from "react-aria-compone
 import { useRadio as D } from "react-aria";
 import { Radio as S } from "../Radio/Radio.js";
 import A from "./RadioGroup.module.scss.js";
-import { useForkRef as F } from "../../../../hooks/useForkRef/useForkRef.js";
-import { Fieldset as N } from "../Fieldset/Fieldset.js";
+import { Fieldset as F } from "../../Fieldset/Fieldset.js";
+import { useForkRef as N } from "../../../../hooks/useForkRef/useForkRef.js";
 function V({
   label: o,
   description: e,
@@ -15,7 +15,7 @@ function V({
   inputRef: n,
   ...l
 }) {
-  const r = v(null), s = F(n, r), { inputProps: d, isSelected: p, isDisabled: f } = D(
+  const r = v(null), s = N(n, r), { inputProps: d, isSelected: p, isDisabled: f } = D(
     {
       ...l,
       value: t,
@@ -62,7 +62,7 @@ function z({
   ...u
 }) {
   return /* @__PURE__ */ i(
-    N,
+    F,
     {
       legend: o,
       description: e,

package/dist/components/Common/UI/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/Common/UI/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useContext, useRef } from 'react'\nimport type { Ref } from 'react'\nimport classNames from 'classnames'\nimport {\n  RadioGroup as AriaRadioGroup,\n  RadioGroupStateContext,\n  type RadioGroupRenderProps,\n} from 'react-aria-components'\nimport { useRadio } from 'react-aria'\nimport type { AriaRadioProps } from 'react-aria'\nimport type React from 'react'\nimport { Fieldset } from '../Fieldset'\nimport { Radio } from '../Radio'\nimport styles from './RadioGroup.module.scss'\nimport type { RadioGroupProps } from './RadioGroupTypes'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\n\n// Radio implementation specific to React Aria to get our radio to connect\n// to their RadioGroup component\ninterface ReactAriaRadioProps extends Omit<AriaRadioProps, 'value'> {\n  label: React.ReactNode\n  description?: React.ReactNode\n  value: string\n  groupState: RadioGroupRenderProps['state']\n  inputRef?: Ref<HTMLInputElement>\n}\n\nfunction ReactAriaRadio({\n  label,\n  description,\n  value,\n  groupState,\n  inputRef: inputRefFromProps,\n  ...props\n}: ReactAriaRadioProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const handleInputRef = useForkRef(inputRefFromProps, inputRef)\n\n  const { inputProps, isSelected, isDisabled } = useRadio(\n    {\n      ...props,\n      value,\n      // Hack to suppress aria-label warning from React Aria. We don't actually\n      // use children for the mapping of our radio to React Aria and we already\n      // configure a label for our radios.\n      children: ' ',\n    },\n    groupState,\n    inputRef,\n  )\n\n  const handleChange = (checked: boolean) => {\n    if (checked) {\n      groupState.setSelectedValue(value)\n    }\n  }\n\n  return (\n    <Radio\n      label={label}\n      inputRef={handleInputRef}\n      isDisabled={isDisabled}\n      description={description}\n      onChange={handleChange}\n      value={isSelected}\n      name={inputProps.name}\n    />\n  )\n}\n\nfunction ReactAriaRadioWrapper(props: Omit<ReactAriaRadioProps, 'groupState'>) {\n  const groupState = useContext(RadioGroupStateContext)\n  // We can't render hooks conditionally so we have to use useRadio above but\n  // groupState is only defined if the component is rendered within a RadioGroup\n  // This wrapper component gets around that by checking if groupState is defined which\n  // should always be the case for us since this component is only used within a RadioGroup\n  return groupState ? <ReactAriaRadio groupState={groupState} {...props} /> : null\n}\n\nexport function RadioGroup({\n  label,\n  description,\n  errorMessage,\n  isRequired = false,\n  isInvalid = false,\n  isDisabled = false,\n  options,\n  shouldVisuallyHideLabel = false,\n  value,\n  onChange,\n  className,\n  inputRef,\n  ...props\n}: RadioGroupProps) {\n  return (\n    <Fieldset\n      legend={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      shouldVisuallyHideLegend={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      {...props}\n    >\n      <AriaRadioGroup\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        value={value}\n        onChange={onChange}\n        isDisabled={isDisabled}\n        aria-labelledby=\" \"\n      >\n        {options.map(({ value, label, isDisabled = false, description }, index) => (\n          <ReactAriaRadioWrapper\n            isDisabled={isDisabled}\n            key={value}\n            value={value}\n            description={description}\n            label={label}\n            inputRef={index === 0 ? inputRef : undefined}\n          />\n        ))}\n      </AriaRadioGroup>\n    </Fieldset>\n  )\n}\n"],"names":["ReactAriaRadio","label","description","value","groupState","inputRefFromProps","props","inputRef","useRef","handleInputRef","useForkRef","inputProps","isSelected","isDisabled","useRadio","jsx","Radio","checked","ReactAriaRadioWrapper","useContext","RadioGroupStateContext","RadioGroup","errorMessage","isRequired","isInvalid","options","shouldVisuallyHideLabel","onChange","className","Fieldset","classNames","styles","AriaRadioGroup","index"],"mappings":";;;;;;;;;AA2BA,SAASA,EAAe;AAAA,EACtB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,GAAGC;AACL,GAAwB;AAChB,QAAAC,IAAWC,EAAyB,IAAI,GACxCC,IAAiBC,EAAWL,GAAmBE,CAAQ,GAEvD,EAAE,YAAAI,GAAY,YAAAC,GAAY,YAAAC,EAAe,IAAAC;AAAA,IAC7C;AAAA,MACE,GAAGR;AAAA,MACH,OAAAH;AAAA;AAAA;AAAA;AAAA,MAIA,UAAU;AAAA,IACZ;AAAA,IACAC;AAAA,IACAG;AAAA,EACF;AASE,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAf;AAAA,MACA,UAAUQ;AAAA,MACV,YAAAI;AAAA,MACA,aAAAX;AAAA,MACA,UAZiB,CAACe,MAAqB;AACzC,QAAIA,KACFb,EAAW,iBAAiBD,CAAK;AAAA,MAErC;AAAA,MASI,OAAOS;AAAA,MACP,MAAMD,EAAW;AAAA,IAAA;AAAA,EACnB;AAEJ;AAEA,SAASO,EAAsBZ,GAAgD;AACvE,QAAAF,IAAae,EAAWC,CAAsB;AAKpD,SAAOhB,IAAc,gBAAAW,EAAAf,GAAA,EAAe,YAAAI,GAAyB,GAAGE,EAAO,CAAA,IAAK;AAC9E;AAEO,SAASe,EAAW;AAAA,EACzB,OAAApB;AAAA,EACA,aAAAC;AAAA,EACA,cAAAoB;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,YAAAX,IAAa;AAAA,EACb,SAAAY;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,OAAAvB;AAAA,EACA,UAAAwB;AAAA,EACA,WAAAC;AAAA,EACA,UAAArB;AAAA,EACA,GAAGD;AACL,GAAoB;AAEhB,SAAA,gBAAAS;AAAA,IAACc;AAAA,IAAA;AAAA,MACC,QAAQ5B;AAAA,MACR,aAAAC;AAAA,MACA,cAAAoB;AAAA,MACA,YAAAC;AAAA,MACA,0BAA0BG;AAAA,MAC1B,WAAWI,EAAWC,EAAO,MAAMH,CAAS;AAAA,MAC3C,GAAGtB;AAAA,MAEJ,UAAA,gBAAAS;AAAA,QAACiB;AAAAA,QAAA;AAAA,UACC,WAAAR;AAAA,UACA,YAAAD;AAAA,UACA,oBAAmB;AAAA,UACnB,OAAApB;AAAA,UACA,UAAAwB;AAAA,UACA,YAAAd;AAAA,UACA,mBAAgB;AAAA,UAEf,UAAQY,EAAA,IAAI,CAAC,EAAE,OAAAtB,GAAO,OAAAF,GAAO,YAAAY,IAAa,IAAO,aAAAX,EAAAA,GAAe+B,MAC/D,gBAAAlB;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,YAAYL;AAAAA,cAEZ,OAAOV;AAAAA,cACP,aAAaD;AAAAA,cACb,OAAOD;AAAAA,cACP,UAAUgC,MAAU,IAAI1B,IAAW;AAAA,YAAA;AAAA,YAJ9BJ;AAAAA,UAMR,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/Common/UI/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useContext, useRef } from 'react'\nimport type { Ref } from 'react'\nimport classNames from 'classnames'\nimport {\n  RadioGroup as AriaRadioGroup,\n  RadioGroupStateContext,\n  type RadioGroupRenderProps,\n} from 'react-aria-components'\nimport { useRadio } from 'react-aria'\nimport type { AriaRadioProps } from 'react-aria'\nimport type React from 'react'\nimport { Radio } from '../Radio'\nimport styles from './RadioGroup.module.scss'\nimport type { RadioGroupProps } from './RadioGroupTypes'\nimport { Fieldset } from '@/components/Common/Fieldset'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\n\n// Radio implementation specific to React Aria to get our radio to connect\n// to their RadioGroup component\ninterface ReactAriaRadioProps extends Omit<AriaRadioProps, 'value'> {\n  label: React.ReactNode\n  description?: React.ReactNode\n  value: string\n  groupState: RadioGroupRenderProps['state']\n  inputRef?: Ref<HTMLInputElement>\n}\n\nfunction ReactAriaRadio({\n  label,\n  description,\n  value,\n  groupState,\n  inputRef: inputRefFromProps,\n  ...props\n}: ReactAriaRadioProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const handleInputRef = useForkRef(inputRefFromProps, inputRef)\n\n  const { inputProps, isSelected, isDisabled } = useRadio(\n    {\n      ...props,\n      value,\n      // Hack to suppress aria-label warning from React Aria. We don't actually\n      // use children for the mapping of our radio to React Aria and we already\n      // configure a label for our radios.\n      children: ' ',\n    },\n    groupState,\n    inputRef,\n  )\n\n  const handleChange = (checked: boolean) => {\n    if (checked) {\n      groupState.setSelectedValue(value)\n    }\n  }\n\n  return (\n    <Radio\n      label={label}\n      inputRef={handleInputRef}\n      isDisabled={isDisabled}\n      description={description}\n      onChange={handleChange}\n      value={isSelected}\n      name={inputProps.name}\n    />\n  )\n}\n\nfunction ReactAriaRadioWrapper(props: Omit<ReactAriaRadioProps, 'groupState'>) {\n  const groupState = useContext(RadioGroupStateContext)\n  // We can't render hooks conditionally so we have to use useRadio above but\n  // groupState is only defined if the component is rendered within a RadioGroup\n  // This wrapper component gets around that by checking if groupState is defined which\n  // should always be the case for us since this component is only used within a RadioGroup\n  return groupState ? <ReactAriaRadio groupState={groupState} {...props} /> : null\n}\n\nexport function RadioGroup({\n  label,\n  description,\n  errorMessage,\n  isRequired = false,\n  isInvalid = false,\n  isDisabled = false,\n  options,\n  shouldVisuallyHideLabel = false,\n  value,\n  onChange,\n  className,\n  inputRef,\n  ...props\n}: RadioGroupProps) {\n  return (\n    <Fieldset\n      legend={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      shouldVisuallyHideLegend={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      {...props}\n    >\n      <AriaRadioGroup\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        value={value}\n        onChange={onChange}\n        isDisabled={isDisabled}\n        aria-labelledby=\" \"\n      >\n        {options.map(({ value, label, isDisabled = false, description }, index) => (\n          <ReactAriaRadioWrapper\n            isDisabled={isDisabled}\n            key={value}\n            value={value}\n            description={description}\n            label={label}\n            inputRef={index === 0 ? inputRef : undefined}\n          />\n        ))}\n      </AriaRadioGroup>\n    </Fieldset>\n  )\n}\n"],"names":["ReactAriaRadio","label","description","value","groupState","inputRefFromProps","props","inputRef","useRef","handleInputRef","useForkRef","inputProps","isSelected","isDisabled","useRadio","jsx","Radio","checked","ReactAriaRadioWrapper","useContext","RadioGroupStateContext","RadioGroup","errorMessage","isRequired","isInvalid","options","shouldVisuallyHideLabel","onChange","className","Fieldset","classNames","styles","AriaRadioGroup","index"],"mappings":";;;;;;;;;AA2BA,SAASA,EAAe;AAAA,EACtB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,GAAGC;AACL,GAAwB;AAChB,QAAAC,IAAWC,EAAyB,IAAI,GACxCC,IAAiBC,EAAWL,GAAmBE,CAAQ,GAEvD,EAAE,YAAAI,GAAY,YAAAC,GAAY,YAAAC,EAAe,IAAAC;AAAA,IAC7C;AAAA,MACE,GAAGR;AAAA,MACH,OAAAH;AAAA;AAAA;AAAA;AAAA,MAIA,UAAU;AAAA,IACZ;AAAA,IACAC;AAAA,IACAG;AAAA,EACF;AASE,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAf;AAAA,MACA,UAAUQ;AAAA,MACV,YAAAI;AAAA,MACA,aAAAX;AAAA,MACA,UAZiB,CAACe,MAAqB;AACzC,QAAIA,KACFb,EAAW,iBAAiBD,CAAK;AAAA,MAErC;AAAA,MASI,OAAOS;AAAA,MACP,MAAMD,EAAW;AAAA,IAAA;AAAA,EACnB;AAEJ;AAEA,SAASO,EAAsBZ,GAAgD;AACvE,QAAAF,IAAae,EAAWC,CAAsB;AAKpD,SAAOhB,IAAc,gBAAAW,EAAAf,GAAA,EAAe,YAAAI,GAAyB,GAAGE,EAAO,CAAA,IAAK;AAC9E;AAEO,SAASe,EAAW;AAAA,EACzB,OAAApB;AAAA,EACA,aAAAC;AAAA,EACA,cAAAoB;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,YAAAX,IAAa;AAAA,EACb,SAAAY;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,OAAAvB;AAAA,EACA,UAAAwB;AAAA,EACA,WAAAC;AAAA,EACA,UAAArB;AAAA,EACA,GAAGD;AACL,GAAoB;AAEhB,SAAA,gBAAAS;AAAA,IAACc;AAAA,IAAA;AAAA,MACC,QAAQ5B;AAAA,MACR,aAAAC;AAAA,MACA,cAAAoB;AAAA,MACA,YAAAC;AAAA,MACA,0BAA0BG;AAAA,MAC1B,WAAWI,EAAWC,EAAO,MAAMH,CAAS;AAAA,MAC3C,GAAGtB;AAAA,MAEJ,UAAA,gBAAAS;AAAA,QAACiB;AAAAA,QAAA;AAAA,UACC,WAAAR;AAAA,UACA,YAAAD;AAAA,UACA,oBAAmB;AAAA,UACnB,OAAApB;AAAA,UACA,UAAAwB;AAAA,UACA,YAAAd;AAAA,UACA,mBAAgB;AAAA,UAEf,UAAQY,EAAA,IAAI,CAAC,EAAE,OAAAtB,GAAO,OAAAF,GAAO,YAAAY,IAAa,IAAO,aAAAX,EAAAA,GAAe+B,MAC/D,gBAAAlB;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,YAAYL;AAAAA,cAEZ,OAAOV;AAAAA,cACP,aAAaD;AAAAA,cACb,OAAOD;AAAAA,cACP,UAAUgC,MAAU,IAAI1B,IAAW;AAAA,YAAA;AAAA,YAJ9BJ;AAAAA,UAMR,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/RadioGroup/RadioGroupTypes.d.ts

@@ -1,16 +1,46 @@
 import { FieldsetHTMLAttributes, Ref } from 'react';
-import { SharedFieldLayoutProps } from '../FieldLayout/FieldLayoutTypes';
-export type RadioGroupOption = {
+import { SharedFieldLayoutProps } from '../../FieldLayout/FieldLayoutTypes';
+export interface RadioGroupOption {
+    /**
+     * Label text or content for the radio option
+     */
     label: React.ReactNode;
+    /**
+     * Value of the option that will be passed to onChange
+     */
     value: string;
+    /**
+     * Disables this specific radio option
+     */
     isDisabled?: boolean;
+    /**
+     * Optional description text for the radio option
+     */
     description?: React.ReactNode;
-};
+}
 export interface RadioGroupProps extends SharedFieldLayoutProps, Pick<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className'> {
+    /**
+     * Indicates that the field has an error
+     */
     isInvalid?: boolean;
+    /**
+     * Disables all radio options in the group
+     */
     isDisabled?: boolean;
+    /**
+     * Array of radio options to display
+     */
     options: Array<RadioGroupOption>;
+    /**
+     * Currently selected value
+     */
     value?: string;
+    /**
+     * Callback when selection changes
+     */
     onChange?: (value: string) => void;
+    /**
+     * React ref for the first radio input element
+     */
     inputRef?: Ref<HTMLInputElement>;
 }

package/dist/components/Common/UI/Select/Select.js

@@ -5,11 +5,11 @@ import { useMemo as K } from "react";
 import p from "classnames";
 import { useFieldIds as M } from "../hooks/useFieldIds.js";
 import o from "./Select.module.scss.js";
-import U from "../../../../assets/icons/caret-down.svg.js";
-import V from "../../../../assets/icons/alert-circle.svg.js";
-import { useTheme as _ } from "../../../../contexts/ThemeProvider/useTheme.js";
+import { FieldLayout as U } from "../../FieldLayout/FieldLayout.js";
+import V from "../../../../assets/icons/caret-down.svg.js";
+import _ from "../../../../assets/icons/alert-circle.svg.js";
+import { useTheme as $ } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
-import { FieldLayout as $ } from "../FieldLayout/FieldLayout.js";
 const re = ({
   description: i,
   errorMessage: a,
@@ -29,13 +29,13 @@ const re = ({
   inputRef: y,
   ...B
 }) => {
-  const { t: C } = H(), { container: N } = _(), { inputId: d, errorMessageId: b, descriptionId: L, ariaDescribedBy: w } = M({
+  const { t: C } = H(), { container: N } = $(), { inputId: d, errorMessageId: b, descriptionId: L, ariaDescribedBy: w } = M({
     inputId: u,
     errorMessage: a,
     description: i
   }), A = K(() => s.map((e) => ({ name: e.label, id: e.value })), [s]);
   return /* @__PURE__ */ r(
-    $,
+    U,
     {
       label: n,
       htmlFor: d,
@@ -66,8 +66,8 @@ const re = ({
             /* @__PURE__ */ t(j, { ref: y, children: [
               /* @__PURE__ */ r(D, { children: ({ defaultChildren: e, isPlaceholder: F }) => F && c ? c : e }),
               /* @__PURE__ */ t("div", { className: o.icons, "aria-hidden": "true", children: [
-                m && /* @__PURE__ */ r(V, { fontSize: 16 }),
-                /* @__PURE__ */ r(U, { title: C("icons.selectArrow") })
+                m && /* @__PURE__ */ r(_, { fontSize: 16 }),
+                /* @__PURE__ */ r(V, { title: C("icons.selectArrow") })
               ] })
             ] }),
             /* @__PURE__ */ r(

package/dist/components/Common/UI/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../src/components/Common/UI/Select/Select.tsx"],"sourcesContent":["import type { Key } from 'react-aria-components'\nimport {\n  Select as AriaSelect,\n  Button,\n  ListBox,\n  ListBoxItem,\n  Popover,\n  SelectValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport { FieldLayout } from '../FieldLayout'\nimport styles from './Select.module.scss'\nimport type { SelectProps } from './SelectTypes'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { useTheme } from '@/contexts/ThemeProvider'\n\nexport const Select = ({\n  description,\n  errorMessage,\n  id,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  options,\n  placeholder,\n  value,\n  shouldVisuallyHideLabel,\n  name,\n  className,\n  inputRef,\n  ...props\n}: SelectProps) => {\n  const { t } = useTranslation()\n  const { container } = useTheme()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const items = useMemo(() => {\n    return options.map(o => ({ name: o.label, id: o.value }))\n  }, [options])\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, 'react-aria-CustomSelect', className)}\n      withErrorIcon={false}\n      {...props}\n    >\n      <AriaSelect\n        aria-label={label}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        onSelectionChange={key => {\n          onChange?.(key.toString())\n        }}\n        onBlur={onBlur}\n        id={inputId}\n        selectedKey={value ? (value as Key) : undefined}\n        aria-describedby={ariaDescribedBy}\n        name={name}\n      >\n        <Button ref={inputRef}>\n          <SelectValue>\n            {({ defaultChildren, isPlaceholder }) => {\n              return isPlaceholder && placeholder ? placeholder : defaultChildren\n            }}\n          </SelectValue>\n          <div className={styles.icons} aria-hidden=\"true\">\n            {isInvalid && <AlertCircle fontSize={16} />}\n            <CaretDown title={t('icons.selectArrow')} />\n          </div>\n        </Button>\n        <Popover\n          className={classNames(styles.popover, 'react-aria-Popover')}\n          UNSTABLE_portalContainer={container.current}\n          maxHeight={320}\n        >\n          <ListBox items={items}>\n            {item => <ListBoxItem key={item.id}>{item.name}</ListBoxItem>}\n          </ListBox>\n        </Popover>\n      </AriaSelect>\n    </FieldLayout>\n  )\n}\n"],"names":["Select","description","errorMessage","id","isDisabled","isInvalid","isRequired","label","onChange","onBlur","options","placeholder","value","shouldVisuallyHideLabel","name","className","inputRef","props","t","useTranslation","container","useTheme","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","items","useMemo","o","jsx","FieldLayout","classNames","styles","jsxs","AriaSelect","key","Button","SelectValue","defaultChildren","isPlaceholder","AlertCircle","CaretDown","Popover","ListBox","item","ListBoxItem"],"mappings":";;;;;;;;;;;;AAoBO,MAAMA,KAAS,CAAC;AAAA,EACrB,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAmB;AACX,QAAA,EAAE,GAAAC,EAAE,IAAIC,EAAe,GACvB,EAAE,WAAAC,EAAU,IAAIC,EAAS,GACzB,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASvB;AAAA,IACT,cAAAD;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEK0B,IAAQC,EAAQ,MACblB,EAAQ,IAAI,CAAAmB,OAAM,EAAE,MAAMA,EAAE,OAAO,IAAIA,EAAE,MAAQ,EAAA,GACvD,CAACnB,CAAO,CAAC;AAGV,SAAA,gBAAAoB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,SAASe;AAAA,MACT,cAAApB;AAAA,MACA,gBAAAqB;AAAA,MACA,eAAAC;AAAA,MACA,YAAAlB;AAAA,MACA,aAAAL;AAAA,MACA,yBAAAY;AAAA,MACA,WAAWmB,EAAWC,EAAO,MAAM,2BAA2BlB,CAAS;AAAA,MACvE,eAAe;AAAA,MACd,GAAGE;AAAA,MAEJ,UAAA,gBAAAiB;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,cAAY5B;AAAA,UACZ,YAAAH;AAAA,UACA,WAAAC;AAAA,UACA,mBAAmB,CAAO+B,MAAA;AACb,YAAA5B,IAAA4B,EAAI,UAAU;AAAA,UAC3B;AAAA,UACA,QAAA3B;AAAA,UACA,IAAIa;AAAA,UACJ,aAAaV,KAAyB;AAAA,UACtC,oBAAkBa;AAAA,UAClB,MAAAX;AAAA,UAEA,UAAA;AAAA,YAAC,gBAAAoB,EAAAG,GAAA,EAAO,KAAKrB,GACX,UAAA;AAAA,cAAA,gBAAAc,EAACQ,GACE,EAAA,UAAA,CAAC,EAAE,iBAAAC,GAAiB,eAAAC,QACZA,KAAiB7B,IAAcA,IAAc4B,GAExD;AAAA,gCACC,OAAI,EAAA,WAAWN,EAAO,OAAO,eAAY,QACvC,UAAA;AAAA,gBAAa5B,KAAA,gBAAAyB,EAACW,GAAY,EAAA,UAAU,GAAI,CAAA;AAAA,gBACxC,gBAAAX,EAAAY,GAAA,EAAU,OAAOxB,EAAE,mBAAmB,EAAG,CAAA;AAAA,cAAA,EAC5C,CAAA;AAAA,YAAA,GACF;AAAA,YACA,gBAAAY;AAAA,cAACa;AAAA,cAAA;AAAA,gBACC,WAAWX,EAAWC,EAAO,SAAS,oBAAoB;AAAA,gBAC1D,0BAA0Bb,EAAU;AAAA,gBACpC,WAAW;AAAA,gBAEX,UAAA,gBAAAU,EAACc,GAAQ,EAAA,OAAAjB,GACN,UAAQ,CAAAkB,MAAA,gBAAAf,EAACgB,KAA2B,UAAKD,EAAA,KAAA,GAAfA,EAAK,EAAe,EACjD,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Select.js","sources":["../../../../../src/components/Common/UI/Select/Select.tsx"],"sourcesContent":["import type { Key } from 'react-aria-components'\nimport {\n  Select as AriaSelect,\n  Button,\n  ListBox,\n  ListBoxItem,\n  Popover,\n  SelectValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './Select.module.scss'\nimport type { SelectProps } from './SelectTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { useTheme } from '@/contexts/ThemeProvider'\n\nexport const Select = ({\n  description,\n  errorMessage,\n  id,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  options,\n  placeholder,\n  value,\n  shouldVisuallyHideLabel,\n  name,\n  className,\n  inputRef,\n  ...props\n}: SelectProps) => {\n  const { t } = useTranslation()\n  const { container } = useTheme()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const items = useMemo(() => {\n    return options.map(o => ({ name: o.label, id: o.value }))\n  }, [options])\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, 'react-aria-CustomSelect', className)}\n      withErrorIcon={false}\n      {...props}\n    >\n      <AriaSelect\n        aria-label={label}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        onSelectionChange={key => {\n          onChange?.(key.toString())\n        }}\n        onBlur={onBlur}\n        id={inputId}\n        selectedKey={value ? (value as Key) : undefined}\n        aria-describedby={ariaDescribedBy}\n        name={name}\n      >\n        <Button ref={inputRef}>\n          <SelectValue>\n            {({ defaultChildren, isPlaceholder }) => {\n              return isPlaceholder && placeholder ? placeholder : defaultChildren\n            }}\n          </SelectValue>\n          <div className={styles.icons} aria-hidden=\"true\">\n            {isInvalid && <AlertCircle fontSize={16} />}\n            <CaretDown title={t('icons.selectArrow')} />\n          </div>\n        </Button>\n        <Popover\n          className={classNames(styles.popover, 'react-aria-Popover')}\n          UNSTABLE_portalContainer={container.current}\n          maxHeight={320}\n        >\n          <ListBox items={items}>\n            {item => <ListBoxItem key={item.id}>{item.name}</ListBoxItem>}\n          </ListBox>\n        </Popover>\n      </AriaSelect>\n    </FieldLayout>\n  )\n}\n"],"names":["Select","description","errorMessage","id","isDisabled","isInvalid","isRequired","label","onChange","onBlur","options","placeholder","value","shouldVisuallyHideLabel","name","className","inputRef","props","t","useTranslation","container","useTheme","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","items","useMemo","o","jsx","FieldLayout","classNames","styles","jsxs","AriaSelect","key","Button","SelectValue","defaultChildren","isPlaceholder","AlertCircle","CaretDown","Popover","ListBox","item","ListBoxItem"],"mappings":";;;;;;;;;;;;AAoBO,MAAMA,KAAS,CAAC;AAAA,EACrB,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAmB;AACX,QAAA,EAAE,GAAAC,EAAE,IAAIC,EAAe,GACvB,EAAE,WAAAC,EAAU,IAAIC,EAAS,GACzB,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASvB;AAAA,IACT,cAAAD;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEK0B,IAAQC,EAAQ,MACblB,EAAQ,IAAI,CAAAmB,OAAM,EAAE,MAAMA,EAAE,OAAO,IAAIA,EAAE,MAAQ,EAAA,GACvD,CAACnB,CAAO,CAAC;AAGV,SAAA,gBAAAoB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,SAASe;AAAA,MACT,cAAApB;AAAA,MACA,gBAAAqB;AAAA,MACA,eAAAC;AAAA,MACA,YAAAlB;AAAA,MACA,aAAAL;AAAA,MACA,yBAAAY;AAAA,MACA,WAAWmB,EAAWC,EAAO,MAAM,2BAA2BlB,CAAS;AAAA,MACvE,eAAe;AAAA,MACd,GAAGE;AAAA,MAEJ,UAAA,gBAAAiB;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,cAAY5B;AAAA,UACZ,YAAAH;AAAA,UACA,WAAAC;AAAA,UACA,mBAAmB,CAAO+B,MAAA;AACb,YAAA5B,IAAA4B,EAAI,UAAU;AAAA,UAC3B;AAAA,UACA,QAAA3B;AAAA,UACA,IAAIa;AAAA,UACJ,aAAaV,KAAyB;AAAA,UACtC,oBAAkBa;AAAA,UAClB,MAAAX;AAAA,UAEA,UAAA;AAAA,YAAC,gBAAAoB,EAAAG,GAAA,EAAO,KAAKrB,GACX,UAAA;AAAA,cAAA,gBAAAc,EAACQ,GACE,EAAA,UAAA,CAAC,EAAE,iBAAAC,GAAiB,eAAAC,QACZA,KAAiB7B,IAAcA,IAAc4B,GAExD;AAAA,gCACC,OAAI,EAAA,WAAWN,EAAO,OAAO,eAAY,QACvC,UAAA;AAAA,gBAAa5B,KAAA,gBAAAyB,EAACW,GAAY,EAAA,UAAU,GAAI,CAAA;AAAA,gBACxC,gBAAAX,EAAAY,GAAA,EAAU,OAAOxB,EAAE,mBAAmB,EAAG,CAAA;AAAA,cAAA,EAC5C,CAAA;AAAA,YAAA,GACF;AAAA,YACA,gBAAAY;AAAA,cAACa;AAAA,cAAA;AAAA,gBACC,WAAWX,EAAWC,EAAO,SAAS,oBAAoB;AAAA,gBAC1D,0BAA0Bb,EAAU;AAAA,gBACpC,WAAW;AAAA,gBAEX,UAAA,gBAAAU,EAACc,GAAQ,EAAA,OAAAjB,GACN,UAAQ,CAAAkB,MAAA,gBAAAf,EAACgB,KAA2B,UAAKD,EAAA,KAAA,GAAfA,EAAK,EAAe,EACjD,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/Select/SelectTypes.d.ts

@@ -1,17 +1,50 @@
 import { FocusEvent, Ref, SelectHTMLAttributes } from 'react';
-import { SharedFieldLayoutProps } from '../FieldLayout/FieldLayoutTypes';
+import { SharedFieldLayoutProps } from '../../FieldLayout/FieldLayoutTypes';
 export interface SelectOption {
+    /**
+     * Value of the option that will be passed to onChange
+     */
     value: string;
+    /**
+     * Display text for the option
+     */
     label: string;
 }
 export interface SelectProps extends SharedFieldLayoutProps, Pick<SelectHTMLAttributes<HTMLSelectElement>, 'id' | 'name' | 'className'> {
+    /**
+     * Disables the select and prevents interaction
+     */
     isDisabled?: boolean;
+    /**
+     * Indicates that the field has an error
+     */
     isInvalid?: boolean;
+    /**
+     * Label text for the select field
+     */
     label: string;
+    /**
+     * Callback when selection changes
+     */
     onChange?: (value: string) => void;
+    /**
+     * Handler for blur events
+     */
     onBlur?: (e: FocusEvent) => void;
+    /**
+     * Array of options to display in the select dropdown
+     */
     options: SelectOption[];
+    /**
+     * Placeholder text when no option is selected
+     */
     placeholder?: string;
+    /**
+     * Currently selected value
+     */
     value?: string;
+    /**
+     * React ref for the select button element
+     */
     inputRef?: Ref<HTMLButtonElement>;
 }

package/dist/components/Common/UI/Switch/Switch.js

@@ -4,7 +4,7 @@ import w from "classnames";
 import { useRef as F, useEffect as x } from "react";
 import { useFieldIds as j } from "../hooks/useFieldIds.js";
 import t from "./Switch.module.scss.js";
-import { HorizontalFieldLayout as z } from "../HorizontalFieldLayout/HorizontalFieldLayout.js";
+import { HorizontalFieldLayout as z } from "../../HorizontalFieldLayout/HorizontalFieldLayout.js";
 function k({
   name: d,
   label: o,

package/dist/components/Common/UI/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../../src/components/Common/UI/Switch/Switch.tsx"],"sourcesContent":["import { Switch as _Switch } from 'react-aria-components'\nimport classNames from 'classnames'\nimport { useRef, useEffect } from 'react'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport { HorizontalFieldLayout } from '../HorizontalFieldLayout'\nimport styles from './Switch.module.scss'\nimport type { SwitchProps } from './SwitchTypes'\n\nexport function Switch({\n  name,\n  label,\n  description,\n  errorMessage,\n  inputRef,\n  isRequired,\n  onChange,\n  isInvalid = false,\n  isDisabled = false,\n  id,\n  shouldVisuallyHideLabel,\n  className,\n  value,\n  ...props\n}: SwitchProps) {\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const internalInputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    if (inputRef) {\n      if (typeof inputRef === 'function') {\n        inputRef(internalInputRef.current)\n      } else {\n        inputRef.current = internalInputRef.current\n      }\n    }\n  }, [inputRef])\n\n  return (\n    <HorizontalFieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n    >\n      <_Switch\n        isDisabled={isDisabled}\n        isSelected={value}\n        onChange={onChange}\n        name={name}\n        id={inputId}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={isInvalid}\n        aria-label={label}\n        inputRef={internalInputRef}\n        {...props}\n      >\n        <div className={styles.body}>\n          <div className={styles.indicator} />\n        </div>\n      </_Switch>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Switch","name","label","description","errorMessage","inputRef","isRequired","onChange","isInvalid","isDisabled","id","shouldVisuallyHideLabel","className","value","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","internalInputRef","useRef","useEffect","jsx","HorizontalFieldLayout","classNames","styles","_Switch"],"mappings":";;;;;;;AAQO,SAASA,EAAO;AAAA,EACrB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AACd,QAAM,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAAST;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEKiB,IAAmBC,EAAyB,IAAI;AAEtD,SAAAC,EAAU,MAAM;AACd,IAAIjB,MACE,OAAOA,KAAa,aACtBA,EAASe,EAAiB,OAAO,IAEjCf,EAAS,UAAUe,EAAiB;AAAA,EAExC,GACC,CAACf,CAAQ,CAAC,GAGX,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAE;AAAA,MACA,SAASS;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAN;AAAA,MACA,WAAWc,EAAWC,EAAO,MAAMd,CAAS;AAAA,MAE5C,UAAA,gBAAAW;AAAA,QAACI;AAAAA,QAAA;AAAA,UACC,YAAAlB;AAAA,UACA,YAAYI;AAAA,UACZ,UAAAN;AAAA,UACA,MAAAN;AAAA,UACA,IAAIc;AAAA,UACJ,oBAAkBG;AAAA,UAClB,gBAAcV;AAAA,UACd,cAAYN;AAAA,UACZ,UAAUkB;AAAA,UACT,GAAGN;AAAA,UAEJ,UAAA,gBAAAS,EAAC,OAAI,EAAA,WAAWG,EAAO,MACrB,4BAAC,OAAI,EAAA,WAAWA,EAAO,UAAW,CAAA,EACpC,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Switch.js","sources":["../../../../../src/components/Common/UI/Switch/Switch.tsx"],"sourcesContent":["import { Switch as _Switch } from 'react-aria-components'\nimport classNames from 'classnames'\nimport { useRef, useEffect } from 'react'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './Switch.module.scss'\nimport type { SwitchProps } from './SwitchTypes'\nimport { HorizontalFieldLayout } from '@/components/Common/HorizontalFieldLayout'\n\nexport function Switch({\n  name,\n  label,\n  description,\n  errorMessage,\n  inputRef,\n  isRequired,\n  onChange,\n  isInvalid = false,\n  isDisabled = false,\n  id,\n  shouldVisuallyHideLabel,\n  className,\n  value,\n  ...props\n}: SwitchProps) {\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const internalInputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    if (inputRef) {\n      if (typeof inputRef === 'function') {\n        inputRef(internalInputRef.current)\n      } else {\n        inputRef.current = internalInputRef.current\n      }\n    }\n  }, [inputRef])\n\n  return (\n    <HorizontalFieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n    >\n      <_Switch\n        isDisabled={isDisabled}\n        isSelected={value}\n        onChange={onChange}\n        name={name}\n        id={inputId}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={isInvalid}\n        aria-label={label}\n        inputRef={internalInputRef}\n        {...props}\n      >\n        <div className={styles.body}>\n          <div className={styles.indicator} />\n        </div>\n      </_Switch>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Switch","name","label","description","errorMessage","inputRef","isRequired","onChange","isInvalid","isDisabled","id","shouldVisuallyHideLabel","className","value","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","internalInputRef","useRef","useEffect","jsx","HorizontalFieldLayout","classNames","styles","_Switch"],"mappings":";;;;;;;AAQO,SAASA,EAAO;AAAA,EACrB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AACd,QAAM,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAAST;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEKiB,IAAmBC,EAAyB,IAAI;AAEtD,SAAAC,EAAU,MAAM;AACd,IAAIjB,MACE,OAAOA,KAAa,aACtBA,EAASe,EAAiB,OAAO,IAEjCf,EAAS,UAAUe,EAAiB;AAAA,EAExC,GACC,CAACf,CAAQ,CAAC,GAGX,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAE;AAAA,MACA,SAASS;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAN;AAAA,MACA,WAAWc,EAAWC,EAAO,MAAMd,CAAS;AAAA,MAE5C,UAAA,gBAAAW;AAAA,QAACI;AAAAA,QAAA;AAAA,UACC,YAAAlB;AAAA,UACA,YAAYI;AAAA,UACZ,UAAAN;AAAA,UACA,MAAAN;AAAA,UACA,IAAIc;AAAA,UACJ,oBAAkBG;AAAA,UAClB,gBAAcV;AAAA,UACd,cAAYN;AAAA,UACZ,UAAUkB;AAAA,UACT,GAAGN;AAAA,UAEJ,UAAA,gBAAAS,EAAC,OAAI,EAAA,WAAWG,EAAO,MACrB,4BAAC,OAAI,EAAA,WAAWA,EAAO,UAAW,CAAA,EACpC,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/Switch/SwitchTypes.d.ts

@@ -1,12 +1,36 @@
 import { FocusEvent, InputHTMLAttributes, Ref } from 'react';
-import { SharedHorizontalFieldLayoutProps } from '../HorizontalFieldLayout/HorizontalFieldLayoutTypes';
+import { SharedHorizontalFieldLayoutProps } from '../../HorizontalFieldLayout/HorizontalFieldLayoutTypes';
 export interface SwitchProps extends SharedHorizontalFieldLayoutProps, Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id'> {
+    /**
+     * Handler for blur events
+     */
     onBlur?: (e: FocusEvent) => void;
+    /**
+     * Callback when switch state changes
+     */
     onChange?: (checked: boolean) => void;
+    /**
+     * Current checked state of the switch
+     */
     value?: boolean;
+    /**
+     * React ref for the switch input element
+     */
     inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Indicates that the field has an error
+     */
     isInvalid?: boolean;
+    /**
+     * Disables the switch and prevents interaction
+     */
     isDisabled?: boolean;
+    /**
+     * Additional CSS class name for the switch container
+     */
     className?: string;
+    /**
+     * Label text for the switch
+     */
     label: string;
 }

package/dist/components/Common/UI/Table/TableTypes.d.ts

@@ -1,14 +1,35 @@
 import { ReactNode, TableHTMLAttributes } from 'react';
 export interface TableData {
+    /**
+     * Unique identifier for the table cell
+     */
     key: string;
+    /**
+     * Content to be displayed in the table cell
+     */
     content: ReactNode;
 }
 export interface TableRow {
+    /**
+     * Unique identifier for the table row
+     */
     key: string;
+    /**
+     * Array of cells to be displayed in the row
+     */
     data: TableData[];
 }
 export interface TableProps extends Pick<TableHTMLAttributes<HTMLTableElement>, 'className' | 'aria-label' | 'id' | 'role' | 'aria-labelledby' | 'aria-describedby'> {
+    /**
+     * Array of header cells for the table
+     */
     headers: TableData[];
+    /**
+     * Array of rows to be displayed in the table
+     */
     rows: TableRow[];
+    /**
+     * Content to display when the table has no rows
+     */
     emptyState?: ReactNode;
 }

package/dist/components/Common/UI/Text/TextTypes.d.ts

@@ -1,9 +1,27 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface TextProps extends Pick<HTMLAttributes<HTMLParagraphElement>, 'className' | 'id'> {
+    /**
+     * HTML element to render the text as
+     */
     as?: 'p' | 'span' | 'div';
+    /**
+     * Size variant of the text
+     */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Text alignment within the container
+     */
     textAlign?: 'start' | 'center' | 'end';
+    /**
+     * Font weight of the text
+     */
     weight?: 'regular' | 'medium' | 'semibold' | 'bold';
+    /**
+     * Content to be displayed
+     */
     children?: ReactNode;
+    /**
+     * Visual style variant of the text
+     */
     variant?: 'supporting';
 }

package/dist/components/Common/UI/TextInput/TextInput.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useFieldIds as w } from "../hooks/useFieldIds.js";
-import { FieldLayout as B } from "../FieldLayout/FieldLayout.js";
+import { FieldLayout as B } from "../../FieldLayout/FieldLayout.js";
 import { Input as D } from "../Input/Input.js";
 function z({
   name: a,

package/dist/components/Common/UI/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../../../src/components/Common/UI/TextInput/TextInput.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport { FieldLayout } from '../FieldLayout'\nimport { Input } from '../Input'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport type { TextInputProps } from './TextInputTypes'\n\nexport function TextInput({\n  name,\n  label,\n  description,\n  errorMessage,\n  isRequired,\n  type = 'text',\n  inputRef,\n  isInvalid = false,\n  isDisabled = false,\n  id,\n  value,\n  placeholder,\n  onChange,\n  onBlur,\n  className,\n  shouldVisuallyHideLabel,\n  adornmentEnd,\n  adornmentStart,\n  ...props\n}: TextInputProps) {\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value)\n  }\n\n  return (\n    <FieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      className={className}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      withErrorIcon={false}\n      {...props}\n    >\n      <Input\n        id={inputId}\n        inputRef={inputRef}\n        name={name}\n        type={type}\n        value={value}\n        placeholder={placeholder}\n        onChange={handleChange}\n        onBlur={onBlur}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={isInvalid}\n        isDisabled={isDisabled}\n        adornmentStart={adornmentStart}\n        adornmentEnd={adornmentEnd}\n      />\n    </FieldLayout>\n  )\n}\n"],"names":["TextInput","name","label","description","errorMessage","isRequired","type","inputRef","isInvalid","isDisabled","id","value","placeholder","onChange","onBlur","className","shouldVisuallyHideLabel","adornmentEnd","adornmentStart","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","jsx","FieldLayout","Input","event"],"mappings":";;;;AAMO,SAASA,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACL,GAAmB;AACjB,QAAM,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASd;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD;AAOC,SAAA,gBAAAsB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASe;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,WAAAP;AAAA,MACA,yBAAAC;AAAA,MACA,eAAe;AAAA,MACd,GAAGG;AAAA,MAEJ,UAAA,gBAAAM;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,IAAIP;AAAA,UACJ,UAAAb;AAAA,UACA,MAAAN;AAAA,UACA,MAAAK;AAAA,UACA,OAAAK;AAAA,UACA,aAAAC;AAAA,UACA,UAzBe,CAACgB,MAAyC;AAClD,YAAAf,IAAAe,EAAM,OAAO,KAAK;AAAA,UAC/B;AAAA,UAwBM,QAAAd;AAAA,UACA,oBAAkBS;AAAA,UAClB,gBAAcf;AAAA,UACd,YAAAC;AAAA,UACA,gBAAAS;AAAA,UACA,cAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"TextInput.js","sources":["../../../../../src/components/Common/UI/TextInput/TextInput.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport { Input } from '../Input'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport type { TextInputProps } from './TextInputTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\n\nexport function TextInput({\n  name,\n  label,\n  description,\n  errorMessage,\n  isRequired,\n  type = 'text',\n  inputRef,\n  isInvalid = false,\n  isDisabled = false,\n  id,\n  value,\n  placeholder,\n  onChange,\n  onBlur,\n  className,\n  shouldVisuallyHideLabel,\n  adornmentEnd,\n  adornmentStart,\n  ...props\n}: TextInputProps) {\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value)\n  }\n\n  return (\n    <FieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      className={className}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      withErrorIcon={false}\n      {...props}\n    >\n      <Input\n        id={inputId}\n        inputRef={inputRef}\n        name={name}\n        type={type}\n        value={value}\n        placeholder={placeholder}\n        onChange={handleChange}\n        onBlur={onBlur}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={isInvalid}\n        isDisabled={isDisabled}\n        adornmentStart={adornmentStart}\n        adornmentEnd={adornmentEnd}\n      />\n    </FieldLayout>\n  )\n}\n"],"names":["TextInput","name","label","description","errorMessage","isRequired","type","inputRef","isInvalid","isDisabled","id","value","placeholder","onChange","onBlur","className","shouldVisuallyHideLabel","adornmentEnd","adornmentStart","props","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","jsx","FieldLayout","Input","event"],"mappings":";;;;AAMO,SAASA,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACL,GAAmB;AACjB,QAAM,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASd;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD;AAOC,SAAA,gBAAAsB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASe;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,WAAAP;AAAA,MACA,yBAAAC;AAAA,MACA,eAAe;AAAA,MACd,GAAGG;AAAA,MAEJ,UAAA,gBAAAM;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,IAAIP;AAAA,UACJ,UAAAb;AAAA,UACA,MAAAN;AAAA,UACA,MAAAK;AAAA,UACA,OAAAK;AAAA,UACA,aAAAC;AAAA,UACA,UAzBe,CAACgB,MAAyC;AAClD,YAAAf,IAAAe,EAAM,OAAO,KAAK;AAAA,UAC/B;AAAA,UAwBM,QAAAd;AAAA,UACA,oBAAkBS;AAAA,UAClB,gBAAcf;AAAA,UACd,YAAAC;AAAA,UACA,gBAAAS;AAAA,UACA,cAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/components/Common/UI/TextInput/TextInputTypes.d.ts

@@ -1,12 +1,33 @@
 import { Ref, InputHTMLAttributes } from 'react';
-import { SharedFieldLayoutProps } from '../FieldLayout/FieldLayoutTypes';
 import { InputProps } from '../Input/InputTypes';
+import { SharedFieldLayoutProps } from '../../FieldLayout/FieldLayoutTypes';
 export interface TextInputProps extends SharedFieldLayoutProps, Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id' | 'placeholder' | 'className' | 'type' | 'onBlur'> {
+    /**
+     * React ref for the input element
+     */
     inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Current value of the input
+     */
     value?: string;
+    /**
+     * Callback when input value changes
+     */
     onChange?: (value: string) => void;
+    /**
+     * Indicates that the field has an error
+     */
     isInvalid?: boolean;
+    /**
+     * Disables the input and prevents interaction
+     */
     isDisabled?: boolean;
+    /**
+     * Element to display at the start of the input
+     */
     adornmentStart?: InputProps['adornmentStart'];
+    /**
+     * Element to display at the end of the input
+     */
     adornmentEnd?: InputProps['adornmentEnd'];
 }