@gusto/embedded-react-sdk 0.19.0 → 0.21.0

package/dist/components/Common/SignatureForm/SignatureFormActions.js

@@ -1,19 +1,23 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { ActionsLayout as m } from "../ActionsLayout/ActionsLayout.js";
-import { useComponentContext as u } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-function f({
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import "../../../shared/constants.js";
+import "classnames";
+import { ActionsLayout as p } from "../ActionsLayout/ActionsLayout.js";
+import "react-i18next";
+import { useComponentContext as s } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "react";
+function y({
   onBack: t,
   backLabel: r,
-  submitLabel: e,
-  isLoading: i = !1
+  submitLabel: i,
+  isLoading: e = !1
 }) {
-  const o = u();
-  return /* @__PURE__ */ s(m, { children: [
+  const o = s();
+  return /* @__PURE__ */ m(p, { children: [
     t && /* @__PURE__ */ n(o.Button, { variant: "secondary", type: "button", onClick: t, children: r }),
-    /* @__PURE__ */ n(o.Button, { type: "submit", isLoading: i, children: e })
+    /* @__PURE__ */ n(o.Button, { type: "submit", isLoading: e, children: i })
   ] });
 }
 export {
-  f as SignatureFormActions
+  y as SignatureFormActions
 };
 //# sourceMappingURL=SignatureFormActions.js.map

package/dist/components/Common/SignatureForm/SignatureFormActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignatureFormActions.js","sources":["../../../../src/components/Common/SignatureForm/SignatureFormActions.tsx"],"sourcesContent":["import { ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface SignatureFormActionsProps {\n  onBack?: () => void\n  backLabel: string\n  submitLabel: string\n  isLoading?: boolean\n}\n\nexport function SignatureFormActions({\n  onBack,\n  backLabel,\n  submitLabel,\n  isLoading = false,\n}: SignatureFormActionsProps) {\n  const Components = useComponentContext()\n\n  return (\n    <ActionsLayout>\n      {onBack && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={onBack}>\n          {backLabel}\n        </Components.Button>\n      )}\n      <Components.Button type=\"submit\" isLoading={isLoading}>\n        {submitLabel}\n      </Components.Button>\n    </ActionsLayout>\n  )\n}\n"],"names":["SignatureFormActions","onBack","backLabel","submitLabel","isLoading","Components","useComponentContext","ActionsLayout","jsx"],"mappings":";;;AAUO,SAASA,EAAqB;AAAA,EACnC,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA8B;AAC5B,QAAMC,IAAaC,EAAA;AAEnB,2BACGC,GAAA,EACE,UAAA;AAAA,IAAAN,KACC,gBAAAO,EAACH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASJ,GAC3D,UAAAC,EAAA,CACH;AAAA,sBAEDG,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAAD,GAC9B,UAAAD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"SignatureFormActions.js","sources":["../../../../src/components/Common/SignatureForm/SignatureFormActions.tsx"],"sourcesContent":["import { ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface SignatureFormActionsProps {\n  onBack?: () => void\n  backLabel: string\n  submitLabel: string\n  isLoading?: boolean\n}\n\nexport function SignatureFormActions({\n  onBack,\n  backLabel,\n  submitLabel,\n  isLoading = false,\n}: SignatureFormActionsProps) {\n  const Components = useComponentContext()\n\n  return (\n    <ActionsLayout>\n      {onBack && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={onBack}>\n          {backLabel}\n        </Components.Button>\n      )}\n      <Components.Button type=\"submit\" isLoading={isLoading}>\n        {submitLabel}\n      </Components.Button>\n    </ActionsLayout>\n  )\n}\n"],"names":["SignatureFormActions","onBack","backLabel","submitLabel","isLoading","Components","useComponentContext","ActionsLayout","jsx"],"mappings":";;;;;;;AAUO,SAASA,EAAqB;AAAA,EACnC,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA8B;AAC5B,QAAMC,IAAaC,EAAA;AAEnB,2BACGC,GAAA,EACE,UAAA;AAAA,IAAAN,KACC,gBAAAO,EAACH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASJ,GAC3D,UAAAC,EAAA,CACH;AAAA,sBAEDG,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAAD,GAC9B,UAAAD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Common/SignatureForm/SignatureFormFields.js

@@ -1,36 +1,41 @@
-import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { TextInputField as a } from "../Fields/TextInputField/TextInputField.js";
-import { CheckboxField as u } from "../Fields/CheckboxField/CheckboxField.js";
-function p({
-  signatureLabel: r,
+import { jsxs as n, Fragment as s, jsx as r } from "react/jsx-runtime";
+import "../../../shared/constants.js";
+import "classnames";
+import { TextInputField as p } from "../Fields/TextInputField/TextInputField.js";
+import "react-i18next";
+import "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "react";
+import { CheckboxField as a } from "../Fields/CheckboxField/CheckboxField.js";
+function b({
+  signatureLabel: e,
   signatureDescription: i = "",
   signatureError: t = "",
   confirmationLabel: o,
-  confirmationError: n = ""
+  confirmationError: m = ""
 }) {
-  return /* @__PURE__ */ s(m, { children: [
-    /* @__PURE__ */ e(
-      a,
+  return /* @__PURE__ */ n(s, { children: [
+    /* @__PURE__ */ r(
+      p,
       {
         name: "signature",
-        label: r,
+        label: e,
         description: i,
         errorMessage: t,
         isRequired: !0
       }
     ),
-    /* @__PURE__ */ e(
-      u,
+    /* @__PURE__ */ r(
+      a,
       {
         name: "confirmSignature",
         isRequired: !0,
         label: o,
-        errorMessage: n
+        errorMessage: m
       }
     )
   ] });
 }
 export {
-  p as SignatureFormFields
+  b as SignatureFormFields
 };
 //# sourceMappingURL=SignatureFormFields.js.map

package/dist/components/Common/SignatureForm/SignatureFormFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignatureFormFields.js","sources":["../../../../src/components/Common/SignatureForm/SignatureFormFields.tsx"],"sourcesContent":["import { TextInputField, CheckboxField } from '@/components/Common'\n\ninterface SignatureFormFieldsProps {\n  signatureLabel: string\n  signatureDescription?: string\n  signatureError?: string\n  confirmationLabel: string\n  confirmationError?: string\n}\n\nexport function SignatureFormFields({\n  signatureLabel,\n  signatureDescription = '',\n  signatureError = '',\n  confirmationLabel,\n  confirmationError = '',\n}: SignatureFormFieldsProps) {\n  return (\n    <>\n      <TextInputField\n        name=\"signature\"\n        label={signatureLabel}\n        description={signatureDescription}\n        errorMessage={signatureError}\n        isRequired\n      />\n      <CheckboxField\n        name=\"confirmSignature\"\n        isRequired\n        label={confirmationLabel}\n        errorMessage={confirmationError}\n      />\n    </>\n  )\n}\n"],"names":["SignatureFormFields","signatureLabel","signatureDescription","signatureError","confirmationLabel","confirmationError","jsxs","Fragment","jsx","TextInputField","CheckboxField"],"mappings":";;;AAUO,SAASA,EAAoB;AAAA,EAClC,gBAAAC;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AAAA,EACjB,mBAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,GAA6B;AAC3B,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOR;AAAA,QACP,aAAaC;AAAA,QACb,cAAcC;AAAA,QACd,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAK;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAON;AAAA,QACP,cAAcC;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GACF;AAEJ;"}
+{"version":3,"file":"SignatureFormFields.js","sources":["../../../../src/components/Common/SignatureForm/SignatureFormFields.tsx"],"sourcesContent":["import { TextInputField, CheckboxField } from '@/components/Common'\n\ninterface SignatureFormFieldsProps {\n  signatureLabel: string\n  signatureDescription?: string\n  signatureError?: string\n  confirmationLabel: string\n  confirmationError?: string\n}\n\nexport function SignatureFormFields({\n  signatureLabel,\n  signatureDescription = '',\n  signatureError = '',\n  confirmationLabel,\n  confirmationError = '',\n}: SignatureFormFieldsProps) {\n  return (\n    <>\n      <TextInputField\n        name=\"signature\"\n        label={signatureLabel}\n        description={signatureDescription}\n        errorMessage={signatureError}\n        isRequired\n      />\n      <CheckboxField\n        name=\"confirmSignature\"\n        isRequired\n        label={confirmationLabel}\n        errorMessage={confirmationError}\n      />\n    </>\n  )\n}\n"],"names":["SignatureFormFields","signatureLabel","signatureDescription","signatureError","confirmationLabel","confirmationError","jsxs","Fragment","jsx","TextInputField","CheckboxField"],"mappings":";;;;;;;;AAUO,SAASA,EAAoB;AAAA,EAClC,gBAAAC;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AAAA,EACjB,mBAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,GAA6B;AAC3B,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOR;AAAA,QACP,aAAaC;AAAA,QACb,cAAcC;AAAA,QACd,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAK;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAON;AAAA,QACP,cAAcC;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GACF;AAEJ;"}

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

@@ -1,39 +1,40 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { useId as u, useRef as p, useEffect as v } from "react";
-import g from "classnames";
-import { ButtonIcon as N } from "../Button/ButtonIcon.js";
-import { AlertDefaults as b } from "./AlertTypes.js";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { useId as p, useRef as v, useEffect as g } from "react";
+import N from "classnames";
+import { ButtonIcon as b } from "../Button/ButtonIcon.js";
+import { AlertDefaults as I } from "./AlertTypes.js";
 import e from "./Alert.module.scss.js";
 import { applyMissingDefaults as S } from "../../../../helpers/applyMissingDefaults.js";
-import I from "../../../../assets/icons/info.svg.js";
-import y from "../../../../assets/icons/success_check.svg.js";
-import C from "../../../../assets/icons/warning.svg.js";
-import D from "../../../../assets/icons/error.svg.js";
-import w from "../../../../assets/icons/close.svg.js";
-function q(n) {
-  const l = S(n, b), { label: c, children: m, status: i, icon: d, className: f, onDismiss: a } = l, o = u(), s = p(null), h = i === "info" ? /* @__PURE__ */ r(I, { "aria-hidden": !0 }) : i === "success" ? /* @__PURE__ */ r(y, { "aria-hidden": !0 }) : i === "warning" ? /* @__PURE__ */ r(C, { "aria-hidden": !0 }) : /* @__PURE__ */ r(D, { "aria-hidden": !0 });
-  return v(() => {
-    s.current && s.current.scrollIntoView({ behavior: "smooth" });
-  }, []), /* @__PURE__ */ r("div", { className: g(e.root, f), children: /* @__PURE__ */ t(
+import w from "../../../../assets/icons/info.svg.js";
+import x from "../../../../assets/icons/success_check.svg.js";
+import y from "../../../../assets/icons/warning.svg.js";
+import C from "../../../../assets/icons/error.svg.js";
+import D from "../../../../assets/icons/close.svg.js";
+function z(l) {
+  const c = S(l, I), { label: m, children: d, status: i, icon: f, className: h, onDismiss: o, disableScrollIntoView: a } = c, t = p(), s = v(null), u = i === "info" ? /* @__PURE__ */ r(w, { "aria-hidden": !0 }) : i === "success" ? /* @__PURE__ */ r(x, { "aria-hidden": !0 }) : i === "warning" ? /* @__PURE__ */ r(y, { "aria-hidden": !0 }) : /* @__PURE__ */ r(C, { "aria-hidden": !0 });
+  return g(() => {
+    !a && s.current && (s.current.scrollIntoView({ behavior: "smooth" }), s.current.focus());
+  }, [a]), /* @__PURE__ */ r("div", { className: N(e.root, h), children: /* @__PURE__ */ n(
     "div",
     {
       className: e.alert,
       role: "alert",
-      "aria-labelledby": o,
+      "aria-labelledby": t,
       "data-variant": i,
       ref: s,
+      tabIndex: -1,
       children: [
-        /* @__PURE__ */ r("div", { className: e.header, children: /* @__PURE__ */ t("div", { className: e.iconLabelContainer, children: [
-          /* @__PURE__ */ r("div", { className: e.icon, children: d || h }),
-          /* @__PURE__ */ r("h6", { id: o, children: c }),
-          a && /* @__PURE__ */ r("div", { className: e.dismiss, children: /* @__PURE__ */ r(N, { variant: "tertiary", onClick: a, "aria-label": "Dismiss alert", children: /* @__PURE__ */ r(w, { width: 36, height: 36 }) }) })
+        /* @__PURE__ */ r("div", { className: e.header, children: /* @__PURE__ */ n("div", { className: e.iconLabelContainer, children: [
+          /* @__PURE__ */ r("div", { className: e.icon, children: f || u }),
+          /* @__PURE__ */ r("h6", { id: t, children: m }),
+          o && /* @__PURE__ */ r("div", { className: e.dismiss, children: /* @__PURE__ */ r(b, { variant: "tertiary", onClick: o, "aria-label": "Dismiss alert", children: /* @__PURE__ */ r(D, { width: 36, height: 36 }) }) })
         ] }) }),
-        /* @__PURE__ */ r("div", { className: e.content, children: m })
+        /* @__PURE__ */ r("div", { className: e.content, children: d })
       ]
     }
   ) });
 }
 export {
-  q as Alert
+  z as Alert
 };
 //# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Common/UI/Alert/Alert.tsx"],"sourcesContent":["import { useEffect, useId, useRef } from 'react'\nimport classNames from 'classnames'\nimport { ButtonIcon } from '../Button/ButtonIcon'\nimport { type AlertProps, AlertDefaults } from './AlertTypes'\nimport styles from './Alert.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport InfoIcon from '@/assets/icons/info.svg?react'\nimport SuccessIcon from '@/assets/icons/success_check.svg?react'\nimport WarningIcon from '@/assets/icons/warning.svg?react'\nimport ErrorIcon from '@/assets/icons/error.svg?react'\nimport CloseIcon from '@/assets/icons/close.svg?react'\n\nexport function Alert(rawProps: AlertProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, AlertDefaults)\n  const { label, children, status, icon, className, onDismiss } = resolvedProps\n  const id = useId()\n  const alertRef = useRef<HTMLDivElement>(null)\n  const defaultIcon =\n    status === 'info' ? (\n      <InfoIcon aria-hidden />\n    ) : status === 'success' ? (\n      <SuccessIcon aria-hidden />\n    ) : status === 'warning' ? (\n      <WarningIcon aria-hidden />\n    ) : (\n      <ErrorIcon aria-hidden />\n    )\n\n  useEffect(() => {\n    if (alertRef.current) alertRef.current.scrollIntoView({ behavior: 'smooth' })\n  }, [])\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <div\n        className={styles.alert}\n        role=\"alert\"\n        aria-labelledby={id}\n        data-variant={status}\n        ref={alertRef}\n      >\n        <div className={styles.header}>\n          <div className={styles.iconLabelContainer}>\n            <div className={styles.icon}>{icon || defaultIcon}</div>\n            <h6 id={id}>{label}</h6>\n            {onDismiss && (\n              <div className={styles.dismiss}>\n                <ButtonIcon variant=\"tertiary\" onClick={onDismiss} aria-label=\"Dismiss alert\">\n                  <CloseIcon width={36} height={36} />\n                </ButtonIcon>\n              </div>\n            )}\n          </div>\n        </div>\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["Alert","rawProps","resolvedProps","applyMissingDefaults","AlertDefaults","label","children","status","icon","className","onDismiss","id","useId","alertRef","useRef","defaultIcon","jsx","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","useEffect","classNames","styles","jsxs","ButtonIcon","CloseIcon"],"mappings":";;;;;;;;;;;;AAYO,SAASA,EAAMC,GAAsB;AAC1C,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAa,GAC5D,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,WAAAC,MAAcR,GAC1DS,IAAKC,EAAA,GACLC,IAAWC,EAAuB,IAAI,GACtCC,IACJR,MAAW,SACT,gBAAAS,EAACC,GAAA,EAAS,eAAW,GAAA,CAAC,IACpBV,MAAW,YACb,gBAAAS,EAACE,GAAA,EAAY,eAAW,GAAA,CAAC,IACvBX,MAAW,YACb,gBAAAS,EAACG,GAAA,EAAY,eAAW,GAAA,CAAC,IAEzB,gBAAAH,EAACI,GAAA,EAAU,eAAW,GAAA,CAAC;AAG3B,SAAAC,EAAU,MAAM;AACd,IAAIR,EAAS,WAASA,EAAS,QAAQ,eAAe,EAAE,UAAU,UAAU;AAAA,EAC9E,GAAG,CAAA,CAAE,qBAGF,OAAA,EAAI,WAAWS,EAAWC,EAAO,MAAMd,CAAS,GAC/C,UAAA,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,EAAO;AAAA,MAClB,MAAK;AAAA,MACL,mBAAiBZ;AAAA,MACjB,gBAAcJ;AAAA,MACd,KAAKM;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWO,EAAO,QACrB,4BAAC,OAAA,EAAI,WAAWA,EAAO,oBACrB,UAAA;AAAA,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAWO,EAAO,MAAO,eAAQR,GAAY;AAAA,UAClD,gBAAAC,EAAC,MAAA,EAAG,IAAAL,GAAS,UAAAN,EAAA,CAAM;AAAA,UAClBK,uBACE,OAAA,EAAI,WAAWa,EAAO,SACrB,UAAA,gBAAAP,EAACS,KAAW,SAAQ,YAAW,SAASf,GAAW,cAAW,iBAC5D,UAAA,gBAAAM,EAACU,GAAA,EAAU,OAAO,IAAI,QAAQ,GAAA,CAAI,EAAA,CACpC,EAAA,CACF;AAAA,QAAA,EAAA,CAEJ,EAAA,CACF;AAAA,QACA,gBAAAV,EAAC,OAAA,EAAI,WAAWO,EAAO,SAAU,UAAAjB,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE9C;AAEJ;"}
+{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Common/UI/Alert/Alert.tsx"],"sourcesContent":["import { useEffect, useId, useRef } from 'react'\nimport classNames from 'classnames'\nimport { ButtonIcon } from '../Button/ButtonIcon'\nimport { type AlertProps, AlertDefaults } from './AlertTypes'\nimport styles from './Alert.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport InfoIcon from '@/assets/icons/info.svg?react'\nimport SuccessIcon from '@/assets/icons/success_check.svg?react'\nimport WarningIcon from '@/assets/icons/warning.svg?react'\nimport ErrorIcon from '@/assets/icons/error.svg?react'\nimport CloseIcon from '@/assets/icons/close.svg?react'\n\nexport function Alert(rawProps: AlertProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, AlertDefaults)\n  const { label, children, status, icon, className, onDismiss, disableScrollIntoView } =\n    resolvedProps\n  const id = useId()\n  const alertRef = useRef<HTMLDivElement>(null)\n  const defaultIcon =\n    status === 'info' ? (\n      <InfoIcon aria-hidden />\n    ) : status === 'success' ? (\n      <SuccessIcon aria-hidden />\n    ) : status === 'warning' ? (\n      <WarningIcon aria-hidden />\n    ) : (\n      <ErrorIcon aria-hidden />\n    )\n\n  useEffect(() => {\n    if (!disableScrollIntoView && alertRef.current) {\n      alertRef.current.scrollIntoView({ behavior: 'smooth' })\n      alertRef.current.focus()\n    }\n  }, [disableScrollIntoView])\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <div\n        className={styles.alert}\n        role=\"alert\"\n        aria-labelledby={id}\n        data-variant={status}\n        ref={alertRef}\n        tabIndex={-1}\n      >\n        <div className={styles.header}>\n          <div className={styles.iconLabelContainer}>\n            <div className={styles.icon}>{icon || defaultIcon}</div>\n            <h6 id={id}>{label}</h6>\n            {onDismiss && (\n              <div className={styles.dismiss}>\n                <ButtonIcon variant=\"tertiary\" onClick={onDismiss} aria-label=\"Dismiss alert\">\n                  <CloseIcon width={36} height={36} />\n                </ButtonIcon>\n              </div>\n            )}\n          </div>\n        </div>\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["Alert","rawProps","resolvedProps","applyMissingDefaults","AlertDefaults","label","children","status","icon","className","onDismiss","disableScrollIntoView","id","useId","alertRef","useRef","defaultIcon","jsx","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","useEffect","classNames","styles","jsxs","ButtonIcon","CloseIcon"],"mappings":";;;;;;;;;;;;AAYO,SAASA,EAAMC,GAAsB;AAC1C,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAa,GAC5D,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,WAAAC,GAAW,uBAAAC,MAC3DT,GACIU,IAAKC,EAAA,GACLC,IAAWC,EAAuB,IAAI,GACtCC,IACJT,MAAW,SACT,gBAAAU,EAACC,GAAA,EAAS,eAAW,GAAA,CAAC,IACpBX,MAAW,YACb,gBAAAU,EAACE,GAAA,EAAY,eAAW,GAAA,CAAC,IACvBZ,MAAW,YACb,gBAAAU,EAACG,GAAA,EAAY,eAAW,GAAA,CAAC,IAEzB,gBAAAH,EAACI,GAAA,EAAU,eAAW,GAAA,CAAC;AAG3B,SAAAC,EAAU,MAAM;AACd,IAAI,CAACX,KAAyBG,EAAS,YACrCA,EAAS,QAAQ,eAAe,EAAE,UAAU,UAAU,GACtDA,EAAS,QAAQ,MAAA;AAAA,EAErB,GAAG,CAACH,CAAqB,CAAC,qBAGvB,OAAA,EAAI,WAAWY,EAAWC,EAAO,MAAMf,CAAS,GAC/C,UAAA,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,EAAO;AAAA,MAClB,MAAK;AAAA,MACL,mBAAiBZ;AAAA,MACjB,gBAAcL;AAAA,MACd,KAAKO;AAAA,MACL,UAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWO,EAAO,QACrB,4BAAC,OAAA,EAAI,WAAWA,EAAO,oBACrB,UAAA;AAAA,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAWO,EAAO,MAAO,eAAQR,GAAY;AAAA,UAClD,gBAAAC,EAAC,MAAA,EAAG,IAAAL,GAAS,UAAAP,EAAA,CAAM;AAAA,UAClBK,uBACE,OAAA,EAAI,WAAWc,EAAO,SACrB,UAAA,gBAAAP,EAACS,KAAW,SAAQ,YAAW,SAAShB,GAAW,cAAW,iBAC5D,UAAA,gBAAAO,EAACU,GAAA,EAAU,OAAO,IAAI,QAAQ,GAAA,CAAI,EAAA,CACpC,EAAA,CACF;AAAA,QAAA,EAAA,CAEJ,EAAA,CACF;AAAA,QACA,gBAAAV,EAAC,OAAA,EAAI,WAAWO,EAAO,SAAU,UAAAlB,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE9C;AAEJ;"}

package/dist/components/Common/UI/Alert/AlertTypes.d.ts

@@ -24,6 +24,10 @@ export interface AlertProps {
      * Optional callback function called when the dismiss button is clicked
      */
     onDismiss?: () => void;
+    /**
+     * Whether to disable scrolling the alert into view and focusing it on mount. Set to true when using inside modals.
+     */
+    disableScrollIntoView?: boolean;
 }
 /**
  * Default prop values for Alert component.

package/dist/components/Common/UI/Alert/AlertTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertTypes.js","sources":["../../../../../src/components/Common/UI/Alert/AlertTypes.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface AlertProps {\n  /**\n   * The visual status that the alert should convey\n   */\n  status?: 'info' | 'success' | 'warning' | 'error'\n  /**\n   * The label text for the alert\n   */\n  label: string\n  /**\n   * Optional children to be rendered inside the alert\n   */\n  children?: ReactNode\n  /**\n   * Optional custom icon component to override the default icon\n   */\n  icon?: ReactNode\n  /**\n   * CSS className to be applied\n   */\n  className?: string\n  /**\n   * Optional callback function called when the dismiss button is clicked\n   */\n  onDismiss?: () => void\n}\n\n/**\n * Default prop values for Alert component.\n */\nexport const AlertDefaults = {\n  status: 'info',\n} as const satisfies Partial<AlertProps>\n"],"names":["AlertDefaults"],"mappings":"AAgCO,MAAMA,IAAgB;AAAA,EAC3B,QAAQ;AACV;"}
+{"version":3,"file":"AlertTypes.js","sources":["../../../../../src/components/Common/UI/Alert/AlertTypes.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface AlertProps {\n  /**\n   * The visual status that the alert should convey\n   */\n  status?: 'info' | 'success' | 'warning' | 'error'\n  /**\n   * The label text for the alert\n   */\n  label: string\n  /**\n   * Optional children to be rendered inside the alert\n   */\n  children?: ReactNode\n  /**\n   * Optional custom icon component to override the default icon\n   */\n  icon?: ReactNode\n  /**\n   * CSS className to be applied\n   */\n  className?: string\n  /**\n   * Optional callback function called when the dismiss button is clicked\n   */\n  onDismiss?: () => void\n  /**\n   * Whether to disable scrolling the alert into view and focusing it on mount. Set to true when using inside modals.\n   */\n  disableScrollIntoView?: boolean\n}\n\n/**\n * Default prop values for Alert component.\n */\nexport const AlertDefaults = {\n  status: 'info',\n} as const satisfies Partial<AlertProps>\n"],"names":["AlertDefaults"],"mappings":"AAoCO,MAAMA,IAAgB;AAAA,EAC3B,QAAQ;AACV;"}

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

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

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

@@ -1,20 +1,20 @@
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { DatePicker as b, Group as k, DateInput as A, DateSegment as B, Button as c, Popover as F, Dialog as L, Calendar as j, Heading as E, CalendarGrid as G, CalendarCell as M } from "react-aria-components";
-import { useTranslation as z } from "react-i18next";
+import { DatePicker as k, Group as A, DateInput as B, DateSegment as F, Button as c, Popover as L, Dialog as j, Calendar as E, Heading as G, CalendarGrid as M, CalendarCell as z } from "react-aria-components";
+import { useTranslation as H } from "react-i18next";
 import u from "classnames";
-import { parseDate as H } from "@internationalized/date";
-import { useFieldIds as R } from "../hooks/useFieldIds.js";
+import { parseDate as R } from "@internationalized/date";
+import { useFieldIds as U } from "../hooks/useFieldIds.js";
 import i from "./DatePicker.module.scss.js";
-import { FieldLayout as U } from "../../FieldLayout/FieldLayout.js";
+import { FieldLayout as _ } from "../../FieldLayout/FieldLayout.js";
 import "react";
-import { useTheme as _ } from "../../../../contexts/ThemeProvider/useTheme.js";
+import { useTheme as $ } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
-import $ from "../../../../assets/icons/caret-down.svg.js";
-import q from "../../../../assets/icons/caret-right.svg.js";
-import J from "../../../../assets/icons/caret-left.svg.js";
-import K from "../../../../assets/icons/alert-circle.svg.js";
-import { formatDateToStringDate as O } from "../../../../helpers/dateFormatting.js";
-function Q(e) {
+import q from "../../../../assets/icons/caret-down.svg.js";
+import J from "../../../../assets/icons/caret-right.svg.js";
+import K from "../../../../assets/icons/caret-left.svg.js";
+import O from "../../../../assets/icons/alert-circle.svg.js";
+import { formatDateToStringDate as Q } from "../../../../helpers/dateFormatting.js";
+function W(e) {
   return e ? new Date(
     e.year,
     e.month - 1,
@@ -22,7 +22,7 @@ function Q(e) {
     e.day
   ) : null;
 }
-const dr = ({
+const pr = ({
   className: e,
   description: n,
   errorMessage: l,
@@ -35,58 +35,59 @@ const dr = ({
   onChange: d,
   onBlur: S,
   value: p,
-  ...y
+  portalContainer: y,
+  ...I
 }) => {
-  const { t: a } = z(), { inputId: h, errorMessageId: I, descriptionId: N, ariaDescribedBy: x } = R({
+  const { t: a } = H(), { inputId: h, errorMessageId: N, descriptionId: x, ariaDescribedBy: P } = U({
     inputId: D,
     errorMessage: l,
     description: n
-  }), { container: P } = _(), f = p ? O(p) : "", T = f ? H(f) : null, w = (t) => {
-    d && d(Q(t));
+  }), { container: T } = $(), f = p ? Q(p) : "", w = f ? R(f) : null, b = (t) => {
+    d && d(W(t));
   };
   return /* @__PURE__ */ r(
-    U,
+    _,
     {
       label: s,
       htmlFor: h,
       errorMessage: l,
-      errorMessageId: I,
-      descriptionId: N,
+      errorMessageId: N,
+      descriptionId: x,
       isRequired: C,
       description: n,
       className: u(i.root, e),
       withErrorIcon: !1,
       children: /* @__PURE__ */ r("div", { className: i.container, children: /* @__PURE__ */ o(
-        b,
+        k,
         {
           "aria-label": s,
-          "aria-describedby": x,
+          "aria-describedby": P,
           id: h,
           isDisabled: v,
           isInvalid: m,
-          value: T,
-          onChange: w,
-          ...y,
+          value: w,
+          onChange: b,
+          ...I,
           children: [
-            /* @__PURE__ */ o(k, { children: [
-              /* @__PURE__ */ r(A, { ref: g, children: (t) => /* @__PURE__ */ r(B, { segment: t }) }),
+            /* @__PURE__ */ o(A, { children: [
+              /* @__PURE__ */ r(B, { ref: g, children: (t) => /* @__PURE__ */ r(F, { segment: t }) }),
               /* @__PURE__ */ o("div", { className: i.icons, children: [
-                m && /* @__PURE__ */ r(K, { "aria-hidden": "true", fontSize: 16 }),
-                /* @__PURE__ */ r(c, { onBlur: S, children: /* @__PURE__ */ r($, { title: a("icons.calendarArrow") }) })
+                m && /* @__PURE__ */ r(O, { "aria-hidden": "true", fontSize: 16 }),
+                /* @__PURE__ */ r(c, { onBlur: S, children: /* @__PURE__ */ r(q, { title: a("icons.calendarArrow") }) })
               ] })
             ] }),
             /* @__PURE__ */ r(
-              F,
+              L,
               {
                 className: u(i.popover, "react-aria-Popover"),
-                UNSTABLE_portalContainer: P.current,
-                children: /* @__PURE__ */ r(L, { children: /* @__PURE__ */ o(j, { children: [
+                UNSTABLE_portalContainer: y || T.current,
+                children: /* @__PURE__ */ r(j, { children: /* @__PURE__ */ o(E, { children: [
                   /* @__PURE__ */ o("header", { children: [
-                    /* @__PURE__ */ r(c, { slot: "previous", children: /* @__PURE__ */ r(J, { title: a("icons.previousMonth") }) }),
-                    /* @__PURE__ */ r(E, {}),
-                    /* @__PURE__ */ r(c, { slot: "next", children: /* @__PURE__ */ r(q, { title: a("icons.nextMonth") }) })
+                    /* @__PURE__ */ r(c, { slot: "previous", children: /* @__PURE__ */ r(K, { title: a("icons.previousMonth") }) }),
+                    /* @__PURE__ */ r(G, {}),
+                    /* @__PURE__ */ r(c, { slot: "next", children: /* @__PURE__ */ r(J, { title: a("icons.nextMonth") }) })
                   ] }),
-                  /* @__PURE__ */ r(G, { children: (t) => /* @__PURE__ */ r(M, { date: t }) })
+                  /* @__PURE__ */ r(M, { children: (t) => /* @__PURE__ */ r(z, { date: t }) })
                 ] }) })
               }
             )
@@ -97,6 +98,6 @@ const dr = ({
   );
 };
 export {
-  dr as DatePicker
+  pr as DatePicker
 };
 //# sourceMappingURL=DatePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/Common/UI/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  DatePicker as AriaDatePicker,\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Dialog,\n  Group,\n  Heading,\n  Popover,\n  type DateValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { parseDate } from '@internationalized/date'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './DatePicker.module.scss'\nimport type { DatePickerProps } from './DatePickerTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\nfunction calendarDateValueToDate(dateValue: DateValue | null): Date | null {\n  if (!dateValue) return null\n\n  const date = new Date(\n    dateValue.year,\n    dateValue.month - 1, // DateValue months are 1-indexed\n    dateValue.day,\n  )\n\n  return date\n}\n\nexport const DatePicker = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  value,\n  ...props\n}: DatePickerProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  // Convert JavaScript Date to DateValue for internal use\n  // Format the date as YYYY-MM-DD for parseDate\n  const formattedDate = value ? formatDateToStringDate(value) : ''\n  const internalValue = formattedDate ? parseDate(formattedDate) : null\n\n  // Handle internal onChange to convert DateValue back to Date\n  const handleChange = (dateValue: DateValue | null) => {\n    if (onChange) {\n      onChange(calendarDateValueToDate(dateValue))\n    }\n  }\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      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <div className={styles.container}>\n        <AriaDatePicker\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          id={inputId}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          value={internalValue}\n          onChange={handleChange}\n          {...props}\n        >\n          <Group>\n            <DateInput ref={inputRef}>{segment => <DateSegment segment={segment} />}</DateInput>\n\n            <div className={styles.icons}>\n              {isInvalid && <AlertCircle aria-hidden=\"true\" fontSize={16} />}\n              <Button onBlur={onBlur}>\n                <CaretDown title={t('icons.calendarArrow')} />\n              </Button>\n            </div>\n          </Group>\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={container.current}\n          >\n            <Dialog>\n              <Calendar>\n                <header>\n                  <Button slot=\"previous\">\n                    <CaretLeft title={t('icons.previousMonth')} />\n                  </Button>\n                  <Heading />\n                  <Button slot=\"next\">\n                    <CaretRight title={t('icons.nextMonth')} />\n                  </Button>\n                </header>\n                <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>\n              </Calendar>\n            </Dialog>\n          </Popover>\n        </AriaDatePicker>\n      </div>\n    </FieldLayout>\n  )\n}\n"],"names":["calendarDateValueToDate","dateValue","DatePicker","className","description","errorMessage","id","inputRef","isDisabled","isInvalid","isRequired","label","onChange","onBlur","value","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","formattedDate","formatDateToStringDate","internalValue","parseDate","handleChange","jsx","FieldLayout","classNames","styles","jsxs","AriaDatePicker","Group","DateInput","DateSegment","segment","AlertCircle","Button","CaretDown","Popover","Dialog","Calendar","CaretLeft","Heading","CaretRight","CalendarGrid","date","CalendarCell"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/Common/UI/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  DatePicker as AriaDatePicker,\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Dialog,\n  Group,\n  Heading,\n  Popover,\n  type DateValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { parseDate } from '@internationalized/date'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './DatePicker.module.scss'\nimport type { DatePickerProps } from './DatePickerTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\nfunction calendarDateValueToDate(dateValue: DateValue | null): Date | null {\n  if (!dateValue) return null\n\n  const date = new Date(\n    dateValue.year,\n    dateValue.month - 1, // DateValue months are 1-indexed\n    dateValue.day,\n  )\n\n  return date\n}\n\nexport const DatePicker = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  value,\n  portalContainer,\n  ...props\n}: DatePickerProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  // Convert JavaScript Date to DateValue for internal use\n  // Format the date as YYYY-MM-DD for parseDate\n  const formattedDate = value ? formatDateToStringDate(value) : ''\n  const internalValue = formattedDate ? parseDate(formattedDate) : null\n\n  // Handle internal onChange to convert DateValue back to Date\n  const handleChange = (dateValue: DateValue | null) => {\n    if (onChange) {\n      onChange(calendarDateValueToDate(dateValue))\n    }\n  }\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      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <div className={styles.container}>\n        <AriaDatePicker\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          id={inputId}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          value={internalValue}\n          onChange={handleChange}\n          {...props}\n        >\n          <Group>\n            <DateInput ref={inputRef}>{segment => <DateSegment segment={segment} />}</DateInput>\n\n            <div className={styles.icons}>\n              {isInvalid && <AlertCircle aria-hidden=\"true\" fontSize={16} />}\n              <Button onBlur={onBlur}>\n                <CaretDown title={t('icons.calendarArrow')} />\n              </Button>\n            </div>\n          </Group>\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={portalContainer || container.current}\n          >\n            <Dialog>\n              <Calendar>\n                <header>\n                  <Button slot=\"previous\">\n                    <CaretLeft title={t('icons.previousMonth')} />\n                  </Button>\n                  <Heading />\n                  <Button slot=\"next\">\n                    <CaretRight title={t('icons.nextMonth')} />\n                  </Button>\n                </header>\n                <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>\n              </Calendar>\n            </Dialog>\n          </Popover>\n        </AriaDatePicker>\n      </div>\n    </FieldLayout>\n  )\n}\n"],"names":["calendarDateValueToDate","dateValue","DatePicker","className","description","errorMessage","id","inputRef","isDisabled","isInvalid","isRequired","label","onChange","onBlur","value","portalContainer","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","formattedDate","formatDateToStringDate","internalValue","parseDate","handleChange","jsx","FieldLayout","classNames","styles","jsxs","AriaDatePicker","Group","DateInput","DateSegment","segment","AlertCircle","Button","CaretDown","Popover","Dialog","Calendar","CaretLeft","Heading","CaretRight","CalendarGrid","date","CalendarCell"],"mappings":"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"}

package/dist/components/Common/UI/DatePicker/DatePickerTypes.d.ts

@@ -33,4 +33,8 @@ export interface DatePickerProps extends SharedFieldLayoutProps, Pick<InputHTMLA
      * Placeholder text when no date is selected
      */
     placeholder?: string;
+    /**
+     * Element to use as the portal container
+     */
+    portalContainer?: HTMLElement;
 }

package/dist/components/Common/UI/Modal/Modal.module.scss.js

@@ -1,26 +1,26 @@
-const o = "_dialog_6vred_1", l = "_backdrop_6vred_21", e = "_backdropSmall_6vred_31", d = "_modal_6vred_35", t = "_modalSmall_6vred_58", _ = "_modalOverflowing_6vred_62", a = "_content_6vred_66", r = "_contentScrollable_6vred_72", c = "_footer_6vred_79", n = "_footerFixed_6vred_84", m = {
+const o = "_dialog_19y6l_1", l = "_backdrop_19y6l_21", t = "_backdropSmall_19y6l_31", _ = "_modal_19y6l_35", a = "_modalSmall_19y6l_58", c = "_modalOverflowing_19y6l_62", n = "_content_19y6l_66", e = "_contentScrollable_19y6l_73", d = "_footer_19y6l_80", r = "_footerFixed_19y6l_93", m = {
   dialog: o,
   backdrop: l,
-  backdropSmall: e,
-  modal: d,
-  modalSmall: t,
-  modalOverflowing: _,
-  content: a,
-  contentScrollable: r,
-  footer: c,
-  footerFixed: n
+  backdropSmall: t,
+  modal: _,
+  modalSmall: a,
+  modalOverflowing: c,
+  content: n,
+  contentScrollable: e,
+  footer: d,
+  footerFixed: r
 };
 export {
   l as backdrop,
-  e as backdropSmall,
-  a as content,
-  r as contentScrollable,
+  t as backdropSmall,
+  n as content,
+  e as contentScrollable,
   m as default,
   o as dialog,
-  c as footer,
-  n as footerFixed,
-  d as modal,
-  _ as modalOverflowing,
-  t as modalSmall
+  d as footer,
+  r as footerFixed,
+  _ as modal,
+  c as modalOverflowing,
+  a as modalSmall
 };
 //# sourceMappingURL=Modal.module.scss.js.map

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

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

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

@@ -1,16 +1,16 @@
 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 { Select as j, Button as D, SelectValue as E, Popover as P, ListBox as z, ListBoxItem as H } from "react-aria-components";
+import { useTranslation as K } from "react-i18next";
+import { useMemo as M } from "react";
 import p from "classnames";
-import { useFieldIds as M } from "../hooks/useFieldIds.js";
+import { useFieldIds as U } 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";
+import { FieldLayout as V } from "../../FieldLayout/FieldLayout.js";
+import _ from "../../../../assets/icons/caret-down.svg.js";
+import $ from "../../../../assets/icons/alert-circle.svg.js";
+import { useTheme as q } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
-const re = ({
+const te = ({
   description: i,
   errorMessage: a,
   id: f,
@@ -27,29 +27,30 @@ const re = ({
   name: I,
   className: g,
   inputRef: B,
-  ...C
+  portalContainer: C,
+  ...N
 }) => {
-  const { t: N } = H(), { container: b } = $(), { inputId: d, errorMessageId: y, descriptionId: L, ariaDescribedBy: w } = M({
+  const { t: b } = K(), { container: y } = q(), { inputId: d, errorMessageId: L, descriptionId: w, ariaDescribedBy: A } = U({
     inputId: f,
     errorMessage: a,
     description: i
-  }), A = K(() => s.map((e) => ({ name: e.label, id: e.value })), [s]);
+  }), F = M(() => s.map((e) => ({ name: e.label, id: e.value })), [s]);
   return /* @__PURE__ */ r(
-    U,
+    V,
     {
       label: n,
       htmlFor: d,
       errorMessage: a,
-      errorMessageId: y,
-      descriptionId: L,
+      errorMessageId: L,
+      descriptionId: w,
       isRequired: h,
       description: i,
       shouldVisuallyHideLabel: x,
       className: p(o.root, "react-aria-CustomSelect", g),
       withErrorIcon: !1,
-      ...C,
+      ...N,
       children: /* @__PURE__ */ t(
-        T,
+        j,
         {
           "aria-label": n,
           isDisabled: u,
@@ -60,23 +61,23 @@ const re = ({
           onBlur: v,
           id: d,
           selectedKey: l || void 0,
-          "aria-describedby": w,
+          "aria-describedby": A,
           name: I,
           children: [
-            /* @__PURE__ */ t(j, { ref: B, children: [
-              /* @__PURE__ */ r(D, { children: ({ defaultChildren: e, isPlaceholder: F }) => F && c ? c : e }),
+            /* @__PURE__ */ t(D, { ref: B, children: [
+              /* @__PURE__ */ r(E, { children: ({ defaultChildren: e, isPlaceholder: T }) => T && c ? c : e }),
               /* @__PURE__ */ t("div", { className: o.icons, "aria-hidden": "true", children: [
-                m && /* @__PURE__ */ r(_, { fontSize: 16 }),
-                /* @__PURE__ */ r(V, { title: N("icons.selectArrow") })
+                m && /* @__PURE__ */ r($, { fontSize: 16 }),
+                /* @__PURE__ */ r(_, { title: b("icons.selectArrow") })
               ] })
             ] }),
             /* @__PURE__ */ r(
-              E,
+              P,
               {
                 className: p(o.popover, "react-aria-Popover"),
-                UNSTABLE_portalContainer: b.current,
+                UNSTABLE_portalContainer: C || y.current,
                 maxHeight: 320,
-                children: /* @__PURE__ */ r(P, { items: A, children: (e) => /* @__PURE__ */ r(z, { children: e.name }, e.id) })
+                children: /* @__PURE__ */ r(z, { items: F, children: (e) => /* @__PURE__ */ r(H, { children: e.name }, e.id) })
               }
             )
           ]
@@ -86,6 +87,6 @@ const re = ({
   );
 };
 export {
-  re as Select
+  te as Select
 };
 //# sourceMappingURL=Select.js.map

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 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          if (key) {\n            onChange?.(key.toString())\n          }\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;AACjB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,EAAE,WAAAC,EAAA,IAAcC,EAAA,GAChB,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,MAAA,EAAQ,GACvD,CAACnB,CAAO,CAAC;AAEZ,SACE,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,CAAA+B,MAAO;AACxB,YAAIA,KACF5B,IAAW4B,EAAI,UAAU;AAAA,UAE7B;AAAA,UACA,QAAA3B;AAAA,UACA,IAAIa;AAAA,UACJ,aAAaV,KAAyB;AAAA,UACtC,oBAAkBa;AAAA,UAClB,MAAAX;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAoB,EAACG,GAAA,EAAO,KAAKrB,GACX,UAAA;AAAA,cAAA,gBAAAc,EAACQ,GAAA,EACE,UAAA,CAAC,EAAE,iBAAAC,GAAiB,eAAAC,QACZA,KAAiB7B,IAAcA,IAAc4B,GAExD;AAAA,gCACC,OAAA,EAAI,WAAWN,EAAO,OAAO,eAAY,QACvC,UAAA;AAAA,gBAAA5B,KAAa,gBAAAyB,EAACW,GAAA,EAAY,UAAU,GAAA,CAAI;AAAA,gBACzC,gBAAAX,EAACY,GAAA,EAAU,OAAOxB,EAAE,mBAAmB,EAAA,CAAG;AAAA,cAAA,EAAA,CAC5C;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,GAAA,EAAQ,OAAAjB,GACN,UAAA,CAAAkB,MAAQ,gBAAAf,EAACgB,KAA2B,UAAAD,EAAK,KAAA,GAAfA,EAAK,EAAe,EAAA,CACjD;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"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  portalContainer,\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          if (key) {\n            onChange?.(key.toString())\n          }\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={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","portalContainer","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,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAmB;AACjB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,EAAE,WAAAC,EAAA,IAAcC,EAAA,GAChB,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASxB;AAAA,IACT,cAAAD;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEK2B,IAAQC,EAAQ,MACbnB,EAAQ,IAAI,CAAAoB,OAAM,EAAE,MAAMA,EAAE,OAAO,IAAIA,EAAE,MAAA,EAAQ,GACvD,CAACpB,CAAO,CAAC;AAEZ,SACE,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAzB;AAAA,MACA,SAASgB;AAAA,MACT,cAAArB;AAAA,MACA,gBAAAsB;AAAA,MACA,eAAAC;AAAA,MACA,YAAAnB;AAAA,MACA,aAAAL;AAAA,MACA,yBAAAY;AAAA,MACA,WAAWoB,EAAWC,EAAO,MAAM,2BAA2BnB,CAAS;AAAA,MACvE,eAAe;AAAA,MACd,GAAGG;AAAA,MAEJ,UAAA,gBAAAiB;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,cAAY7B;AAAA,UACZ,YAAAH;AAAA,UACA,WAAAC;AAAA,UACA,mBAAmB,CAAAgC,MAAO;AACxB,YAAIA,KACF7B,IAAW6B,EAAI,UAAU;AAAA,UAE7B;AAAA,UACA,QAAA5B;AAAA,UACA,IAAIc;AAAA,UACJ,aAAaX,KAAyB;AAAA,UACtC,oBAAkBc;AAAA,UAClB,MAAAZ;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAqB,EAACG,GAAA,EAAO,KAAKtB,GACX,UAAA;AAAA,cAAA,gBAAAe,EAACQ,GAAA,EACE,UAAA,CAAC,EAAE,iBAAAC,GAAiB,eAAAC,QACZA,KAAiB9B,IAAcA,IAAc6B,GAExD;AAAA,gCACC,OAAA,EAAI,WAAWN,EAAO,OAAO,eAAY,QACvC,UAAA;AAAA,gBAAA7B,KAAa,gBAAA0B,EAACW,GAAA,EAAY,UAAU,GAAA,CAAI;AAAA,gBACzC,gBAAAX,EAACY,GAAA,EAAU,OAAOxB,EAAE,mBAAmB,EAAA,CAAG;AAAA,cAAA,EAAA,CAC5C;AAAA,YAAA,GACF;AAAA,YACA,gBAAAY;AAAA,cAACa;AAAA,cAAA;AAAA,gBACC,WAAWX,EAAWC,EAAO,SAAS,oBAAoB;AAAA,gBAC1D,0BAA0BjB,KAAmBI,EAAU;AAAA,gBACvD,WAAW;AAAA,gBAEX,UAAA,gBAAAU,EAACc,GAAA,EAAQ,OAAAjB,GACN,UAAA,CAAAkB,MAAQ,gBAAAf,EAACgB,KAA2B,UAAAD,EAAK,KAAA,GAAfA,EAAK,EAAe,EAAA,CACjD;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}