@gusto/embedded-react-sdk 0.7.0 → 0.8.1

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

@@ -0,0 +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/ProgressBar/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBarTypes';

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

@@ -0,0 +1,2 @@
+import { RadioProps } from './RadioTypes';
+export declare const Radio: ({ name, label, description, errorMessage, isRequired, inputRef, value, isInvalid, isDisabled, id, onChange, onBlur, shouldVisuallyHideLabel, className, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,67 @@
+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";
+const R = ({
+  name: o,
+  label: t,
+  description: d,
+  errorMessage: a,
+  isRequired: c,
+  inputRef: n,
+  value: r,
+  isInvalid: C = !1,
+  isDisabled: l = !1,
+  id: m,
+  onChange: p,
+  onBlur: h,
+  shouldVisuallyHideLabel: f,
+  className: I,
+  ...u
+}) => {
+  const { inputId: s, errorMessageId: y, descriptionId: N, ariaDescribedBy: b } = j({
+    inputId: m,
+    errorMessage: a,
+    description: d
+  }), g = (k) => {
+    p?.(k.target.checked);
+  };
+  return /* @__PURE__ */ i(
+    v,
+    {
+      label: t,
+      description: d,
+      errorMessage: a,
+      isRequired: c,
+      htmlFor: s,
+      errorMessageId: y,
+      descriptionId: N,
+      shouldVisuallyHideLabel: f,
+      className: I,
+      ...u,
+      children: /* @__PURE__ */ x("div", { className: e.radioWrapper, children: [
+        /* @__PURE__ */ i(
+          "input",
+          {
+            type: "radio",
+            name: o,
+            disabled: l,
+            "aria-describedby": b,
+            checked: r,
+            id: s,
+            ref: n,
+            onBlur: h,
+            onChange: g,
+            className: e.radioInput
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: F(e.radio, { [e.checked]: r }), children: r && /* @__PURE__ */ i("div", { className: e.radioDot }) })
+      ] })
+    }
+  );
+};
+export {
+  R as Radio
+};
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +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 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/Radio.module.scss.js

@@ -0,0 +1,16 @@
+const o = "_radioWrapper_1lj4n_1", r = "_radio_1lj4n_1", a = "_checked_1lj4n_21", d = "_radioDot_1lj4n_25", t = "_radioInput_1lj4n_32", _ = {
+  radioWrapper: o,
+  radio: r,
+  checked: a,
+  radioDot: d,
+  radioInput: t
+};
+export {
+  a as checked,
+  _ as default,
+  r as radio,
+  d as radioDot,
+  t as radioInput,
+  o as radioWrapper
+};
+//# sourceMappingURL=Radio.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,24 @@
+import { InputHTMLAttributes, Ref } from 'react';
+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/Radio/index.d.ts

@@ -0,0 +1 @@
+export { Radio } from './Radio';

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

@@ -0,0 +1,2 @@
+import { RadioGroupProps } from './RadioGroupTypes';
+export declare function RadioGroup({ label, description, errorMessage, isRequired, isInvalid, isDisabled, options, shouldVisuallyHideLabel, value, onChange, className, inputRef, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,103 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useContext as C, useRef as v } from "react";
+import x from "classnames";
+import { RadioGroup as G, RadioGroupStateContext as y } from "react-aria-components";
+import { useRadio as D } from "react-aria";
+import { Radio as S } from "../Radio/Radio.js";
+import A from "./RadioGroup.module.scss.js";
+import { Fieldset as F } from "../../Fieldset/Fieldset.js";
+import { useForkRef as N } from "../../../../hooks/useForkRef/useForkRef.js";
+function V({
+  label: o,
+  description: e,
+  value: t,
+  groupState: a,
+  inputRef: n,
+  ...l
+}) {
+  const r = v(null), s = N(n, r), { inputProps: d, isSelected: p, isDisabled: f } = D(
+    {
+      ...l,
+      value: t,
+      // Hack to suppress aria-label warning from React Aria. We don't actually
+      // use children for the mapping of our radio to React Aria and we already
+      // configure a label for our radios.
+      children: " "
+    },
+    a,
+    r
+  );
+  return /* @__PURE__ */ i(
+    S,
+    {
+      label: o,
+      inputRef: s,
+      isDisabled: f,
+      description: e,
+      onChange: (u) => {
+        u && a.setSelectedValue(t);
+      },
+      value: p,
+      name: d.name
+    }
+  );
+}
+function j(o) {
+  const e = C(y);
+  return e ? /* @__PURE__ */ i(V, { groupState: e, ...o }) : null;
+}
+function z({
+  label: o,
+  description: e,
+  errorMessage: t,
+  isRequired: a = !1,
+  isInvalid: n = !1,
+  isDisabled: l = !1,
+  options: r,
+  shouldVisuallyHideLabel: s = !1,
+  value: d,
+  onChange: p,
+  className: f,
+  inputRef: m,
+  ...u
+}) {
+  return /* @__PURE__ */ i(
+    F,
+    {
+      legend: o,
+      description: e,
+      errorMessage: t,
+      isRequired: a,
+      shouldVisuallyHideLegend: s,
+      className: x(A.root, f),
+      ...u,
+      children: /* @__PURE__ */ i(
+        G,
+        {
+          isInvalid: n,
+          isRequired: a,
+          validationBehavior: "aria",
+          value: d,
+          onChange: p,
+          isDisabled: l,
+          "aria-labelledby": " ",
+          children: r.map(({ value: c, label: R, isDisabled: h = !1, description: b }, g) => /* @__PURE__ */ i(
+            j,
+            {
+              isDisabled: h,
+              value: c,
+              description: b,
+              label: R,
+              inputRef: g === 0 ? m : void 0
+            },
+            c
+          ))
+        }
+      )
+    }
+  );
+}
+export {
+  z as RadioGroup
+};
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +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 { 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/RadioGroup.module.scss.js

@@ -0,0 +1,8 @@
+const o = "_root_1jnwy_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};
+//# sourceMappingURL=RadioGroup.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

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

@@ -0,0 +1,46 @@
+import { FieldsetHTMLAttributes, Ref } from 'react';
+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/RadioGroup/index.d.ts

@@ -0,0 +1 @@
+export { RadioGroup } from './RadioGroup';

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

@@ -0,0 +1,2 @@
+import { SelectProps } from './SelectTypes';
+export declare const Select: ({ description, errorMessage, id, isDisabled, isInvalid, isRequired, label, onChange, onBlur, options, placeholder, value, shouldVisuallyHideLabel, name, className, inputRef, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,91 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { Select as T, Button as j, SelectValue as D, Popover as E, ListBox as P, ListBoxItem as z } from "react-aria-components";
+import { useTranslation as H } from "react-i18next";
+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 { 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                          */
+const re = ({
+  description: i,
+  errorMessage: a,
+  id: u,
+  isDisabled: f,
+  isInvalid: m,
+  isRequired: h,
+  label: n,
+  onChange: S,
+  onBlur: v,
+  options: s,
+  placeholder: c,
+  value: l,
+  shouldVisuallyHideLabel: x,
+  name: I,
+  className: g,
+  inputRef: y,
+  ...B
+}) => {
+  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,
+      errorMessage: a,
+      errorMessageId: b,
+      descriptionId: L,
+      isRequired: h,
+      description: i,
+      shouldVisuallyHideLabel: x,
+      className: p(o.root, "react-aria-CustomSelect", g),
+      withErrorIcon: !1,
+      ...B,
+      children: /* @__PURE__ */ t(
+        T,
+        {
+          "aria-label": n,
+          isDisabled: f,
+          isInvalid: m,
+          onSelectionChange: (e) => {
+            S?.(e.toString());
+          },
+          onBlur: v,
+          id: d,
+          selectedKey: l || void 0,
+          "aria-describedby": w,
+          name: I,
+          children: [
+            /* @__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(_, { fontSize: 16 }),
+                /* @__PURE__ */ r(V, { title: C("icons.selectArrow") })
+              ] })
+            ] }),
+            /* @__PURE__ */ r(
+              E,
+              {
+                className: p(o.popover, "react-aria-Popover"),
+                UNSTABLE_portalContainer: N.current,
+                maxHeight: 320,
+                children: /* @__PURE__ */ r(P, { items: A, children: (e) => /* @__PURE__ */ r(z, { children: e.name }, e.id) })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  re as Select
+};
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +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 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/Select.module.scss.js

@@ -0,0 +1,12 @@
+const o = "_root_4uq01_1", s = "_icons_4uq01_19", t = "_popover_4uq01_94", _ = {
+  root: o,
+  icons: s,
+  popover: t
+};
+export {
+  _ as default,
+  s as icons,
+  t as popover,
+  o as root
+};
+//# sourceMappingURL=Select.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -0,0 +1,50 @@
+import { FocusEvent, Ref, SelectHTMLAttributes } from 'react';
+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/Select/index.d.ts

@@ -0,0 +1 @@
+export { Select } from './Select';

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

@@ -0,0 +1,2 @@
+import { SwitchProps } from './SwitchTypes';
+export declare function Switch({ name, label, description, errorMessage, inputRef, isRequired, onChange, isInvalid, isDisabled, id, shouldVisuallyHideLabel, className, value, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,65 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Switch as v } from "react-aria-components";
+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";
+function k({
+  name: d,
+  label: o,
+  description: s,
+  errorMessage: a,
+  inputRef: r,
+  isRequired: l,
+  onChange: m,
+  isInvalid: n = !1,
+  isDisabled: f = !1,
+  id: u,
+  shouldVisuallyHideLabel: p,
+  className: h,
+  value: y,
+  ...I
+}) {
+  const { inputId: c, errorMessageId: b, descriptionId: N, ariaDescribedBy: S } = j({
+    inputId: u,
+    errorMessage: a,
+    description: s
+  }), e = F(null);
+  return x(() => {
+    r && (typeof r == "function" ? r(e.current) : r.current = e.current);
+  }, [r]), /* @__PURE__ */ i(
+    z,
+    {
+      label: o,
+      description: s,
+      errorMessage: a,
+      isRequired: l,
+      htmlFor: c,
+      errorMessageId: b,
+      descriptionId: N,
+      shouldVisuallyHideLabel: p,
+      className: w(t.root, h),
+      children: /* @__PURE__ */ i(
+        v,
+        {
+          isDisabled: f,
+          isSelected: y,
+          onChange: m,
+          name: d,
+          id: c,
+          "aria-describedby": S,
+          "aria-invalid": n,
+          "aria-label": o,
+          inputRef: e,
+          ...I,
+          children: /* @__PURE__ */ i("div", { className: t.body, children: /* @__PURE__ */ i("div", { className: t.indicator }) })
+        }
+      )
+    }
+  );
+}
+export {
+  k as Switch
+};
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +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 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/Switch.module.scss.js

@@ -0,0 +1,12 @@
+const o = "_root_x5ly8_1", t = "_body_x5ly8_10", _ = "_indicator_x5ly8_21", c = {
+  root: o,
+  body: t,
+  indicator: _
+};
+export {
+  t as body,
+  c as default,
+  _ as indicator,
+  o as root
+};
+//# sourceMappingURL=Switch.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -0,0 +1,36 @@
+import { FocusEvent, InputHTMLAttributes, Ref } from 'react';
+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/Switch/index.d.ts

@@ -0,0 +1 @@
+export * from './Switch';