@gusto/embedded-react-sdk 0.55.1 → 0.55.3

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [0.55.3](https://github.com/Gusto/embedded-react-sdk/compare/v0.55.2...v0.55.3) (2026-08-24)
+
+### Features & Enhancements
+
+- Add a `readOnly` prop to `PayrollOverview` to hide the edit and cancel actions while keeping submit and receipt/paystub actions available, for read-only payroll review deep links ([#2616](https://github.com/Gusto/embedded-react-sdk/issues/2616))
+- Increase the default pagination page size from 10 to 25 in `PayrollConfiguration` and `PayrollOverview` employee tables ([#2614](https://github.com/Gusto/embedded-react-sdk/issues/2614))
+- Add partner dictionary overrides for form descriptions ([#2613](https://github.com/Gusto/embedded-react-sdk/issues/2613))
+- Show employee job titles in the off-cycle payroll employee picker ([#2617](https://github.com/Gusto/embedded-react-sdk/issues/2617))
+
+### Fixes
+
+- Always show the payroll deadline banner, regardless of payment method ([#2611](https://github.com/Gusto/embedded-react-sdk/issues/2611))
+- Fix a validation error when updating an employee's hire date while a secondary job has a future-dated effective date ([#2628](https://github.com/Gusto/embedded-react-sdk/issues/2628))
+
+### Chores & Maintenance
+
+- Bump dev dependencies (`@microsoft/api-extractor`, `@storybook/addon-a11y`, `@vitest/coverage-v8`)
+
+## [0.55.2](https://github.com/Gusto/embedded-react-sdk/compare/v0.55.1...v0.55.2) (2026-08-21)
+
+### Features & Enhancements
+
+- Add `PrintChecks` component for generating and printing payroll checks, embedded in `PayrollOverview` with a banner prompt and full form/summary/failure screens ([#2584](https://github.com/Gusto/embedded-react-sdk/issues/2584), [#2585](https://github.com/Gusto/embedded-react-sdk/issues/2585), [#2586](https://github.com/Gusto/embedded-react-sdk/issues/2586), [#2587](https://github.com/Gusto/embedded-react-sdk/issues/2587), [#2588](https://github.com/Gusto/embedded-react-sdk/issues/2588))
+- Add `withOffcyclePayroll` prop to control off-cycle payroll CTA visibility in `PayrollLanding` ([#2612](https://github.com/Gusto/embedded-react-sdk/issues/2612))
+- Make license text in payroll receipts a clickable link ([#2606](https://github.com/Gusto/embedded-react-sdk/issues/2606))
+
+### Fixes
+
+- Fix form validation incorrectly running base validators on dynamically excluded fields ([#2602](https://github.com/Gusto/embedded-react-sdk/issues/2602))
+- Show an already-processed banner and cancel-only overview in `PayrollConfiguration` when the payroll has already been processed ([#2605](https://github.com/Gusto/embedded-react-sdk/issues/2605))
+- Sort payroll employee lists alphabetically by last name ([#2607](https://github.com/Gusto/embedded-react-sdk/issues/2607))
+
+### Chores & Maintenance
+
+- Bump dev dependencies (`@hookform/resolvers`)
+
 ## [0.55.1](https://github.com/Gusto/embedded-react-sdk/compare/v0.55.0...v0.55.1) (2026-08-20)
 
 ### Features & Enhancements

package/dist/components/Common/FieldLayout/FieldLayout.js

@@ -1,9 +1,9 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import t from "classnames";
-import { FieldCaption as F } from "../FieldCaption/FieldCaption.js";
+import { FieldDescription as F } from "../FieldDescription/FieldDescription.js";
+import { FieldCaption as N } from "../FieldCaption/FieldCaption.js";
 import r from "./FieldLayout.module.scss.js";
-import { getDataProps as N } from "../../../helpers/getDataProps.js";
-import { FieldDescription as g } from "../FieldDescription/FieldDescription.js";
+import { getDataProps as g } from "../../../helpers/getDataProps.js";
 import { FieldErrorMessage as x } from "../FieldErrorMessage/FieldErrorMessage.js";
 const A = ({
   label: l,
@@ -18,7 +18,7 @@ const A = ({
   className: f,
   withErrorIcon: h = !0,
   ...D
-}) => /* @__PURE__ */ s("div", { className: t(r.root, f), ...N(D), children: [
+}) => /* @__PURE__ */ s("div", { className: t(r.root, f), ...g(D), children: [
   /* @__PURE__ */ s(
     "div",
     {
@@ -28,7 +28,7 @@ const A = ({
       }),
       children: [
         /* @__PURE__ */ e(
-          F,
+          N,
           {
             htmlFor: p,
             isRequired: c,
@@ -36,7 +36,7 @@ const A = ({
             children: l
           }
         ),
-        /* @__PURE__ */ e(g, { id: a, children: i })
+        /* @__PURE__ */ e(F, { id: a, children: i })
       ]
     }
   ),

package/dist/components/Common/Fieldset/Fieldset.js

@@ -1,10 +1,10 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import { useId as f } from "react";
 import l from "classnames";
+import { FieldDescription as g } from "../FieldDescription/FieldDescription.js";
 import e from "./Fieldset.module.scss.js";
-import { getDataProps as g } from "../../../helpers/getDataProps.js";
-import { FieldCaption as h } from "../FieldCaption/FieldCaption.js";
-import { FieldDescription as D } from "../FieldDescription/FieldDescription.js";
+import { getDataProps as h } from "../../../helpers/getDataProps.js";
+import { FieldCaption as D } from "../FieldCaption/FieldCaption.js";
 import { FieldErrorMessage as F } from "../FieldErrorMessage/FieldErrorMessage.js";
 const y = ({
   children: d,
@@ -22,7 +22,7 @@ const y = ({
     {
       className: l(e.root, c),
       "aria-describedby": i ? t : void 0,
-      ...g(p),
+      ...h(p),
       children: [
         /* @__PURE__ */ a(
           "div",
@@ -33,7 +33,7 @@ const y = ({
             }),
             children: [
               /* @__PURE__ */ r(
-                h,
+                D,
                 {
                   as: "legend",
                   isRequired: m,
@@ -41,7 +41,7 @@ const y = ({
                   children: n
                 }
               ),
-              /* @__PURE__ */ r(D, { children: s })
+              /* @__PURE__ */ r(g, { children: s })
             ]
           }
         ),

package/dist/components/Common/HorizontalFieldLayout/HorizontalFieldLayout.js

@@ -1,9 +1,9 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import N from "classnames";
+import { FieldDescription as b } from "../FieldDescription/FieldDescription.js";
 import r from "./HorizontalFieldLayout.module.scss.js";
-import { getDataProps as b } from "../../../helpers/getDataProps.js";
-import { VisuallyHidden as g } from "../VisuallyHidden/VisuallyHidden.js";
-import { FieldDescription as w } from "../FieldDescription/FieldDescription.js";
+import { getDataProps as g } from "../../../helpers/getDataProps.js";
+import { VisuallyHidden as w } from "../VisuallyHidden/VisuallyHidden.js";
 import { FieldErrorMessage as x } from "../FieldErrorMessage/FieldErrorMessage.js";
 const M = ({
   label: m,
@@ -29,11 +29,11 @@ const M = ({
         },
         p
       ),
-      ...b(h),
+      ...g(h),
       children: [
         /* @__PURE__ */ e("div", { className: r.children, children: c }),
-        i ? /* @__PURE__ */ e(g, { children: t }) : t,
-        /* @__PURE__ */ e(w, { id: a, className: r.description, children: o }),
+        i ? /* @__PURE__ */ e(w, { children: t }) : t,
+        /* @__PURE__ */ e(b, { id: a, className: r.description, children: o }),
         /* @__PURE__ */ e(x, { id: n, className: r.errorMessage, children: s })
       ]
     }

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

@@ -1,9 +1,9 @@
 import { jsx as l } from "react/jsx-runtime";
 import h from "classnames";
-import { Flex as u } from "../../Flex/Flex.js";
 import { BreadcrumbsDefaults as C } from "./BreadcrumbsTypes.js";
 import i from "./Breadcrumbs.module.scss.js";
 import { applyMissingDefaults as x } from "../../../../helpers/applyMissingDefaults.js";
+import { Flex as u } from "../../Flex/Flex.js";
 function P(f) {
   const p = x(f, C), {
     className: s,

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

@@ -7,13 +7,13 @@ import { FileInputDefaults as K } from "./FileInputTypes.js";
 import n from "./FileInput.module.scss.js";
 import { applyMissingDefaults as L } from "../../../../helpers/applyMissingDefaults.js";
 import { FieldLayout as O } from "../../FieldLayout/FieldLayout.js";
-import { Flex as y } from "../../Flex/Flex.js";
 import { ButtonIcon as R } from "../Button/ButtonIcon.js";
 import W from "../../../../assets/icons/icon-trashcan.svg.js";
 import Z from "../../../../assets/icons/icon-file-outline.svg.js";
 import $ from "../../../../assets/icons/icon-file-pdf.svg.js";
 import H from "../../../../assets/icons/icon-file-png.svg.js";
 import V from "../../../../assets/icons/icon-file-jpg.svg.js";
+import { Flex as y } from "../../Flex/Flex.js";
 function Q(i) {
   return i === "application/pdf" ? $ : i === "image/png" ? H : i === "image/jpeg" || i === "image/jpg" ? V : Z;
 }

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

@@ -1,74 +1,80 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useState as Q, useRef as C, useCallback as c, useMemo as m } from "react";
-import { ComboBox as W, Input as X, Button as Y, Popover as Z, Virtualizer as $, ListLayout as V, ListBox as ee, ListBoxItem as te } from "react-aria-components";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useState as Q, useRef as C, useCallback as m, useMemo as u } from "react";
+import { ComboBox as W, Input as X, Button as Y, Popover as Z, Virtualizer as $, ListLayout as V, ListBox as ee, ListBoxItem as re } from "react-aria-components";
 import N from "classnames";
-import { useTranslation as re } from "react-i18next";
-import { useFieldIds as oe } from "../hooks/useFieldIds.js";
-import i from "./MultiSelectComboBox.module.scss.js";
-import { FieldLayout as ie } from "../../FieldLayout/FieldLayout.js";
-import { useComponentContext as ne } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useTheme as le } from "../../../../contexts/ThemeProvider/useTheme.js";
+import { useTranslation as te } from "react-i18next";
+import { useFieldIds as ie } from "../hooks/useFieldIds.js";
+import t from "./MultiSelectComboBox.module.scss.js";
+import { FieldLayout as oe } from "../../FieldLayout/FieldLayout.js";
+import { FieldDescription as ne } from "../../FieldDescription/FieldDescription.js";
+import { useComponentContext as le } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useTheme as se } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
-import { useForkRef as se } from "../../../../hooks/useForkRef/useForkRef.js";
-import ae from "../../../../assets/icons/alert-circle.svg.js";
-import ce from "../../../../assets/icons/caret-down.svg.js";
-function ye({
-  className: y,
+import { useForkRef as ae } from "../../../../hooks/useForkRef/useForkRef.js";
+import ce from "../../../../assets/icons/alert-circle.svg.js";
+import me from "../../../../assets/icons/caret-down.svg.js";
+function Le({
+  className: D,
   description: F,
   errorMessage: p,
   id: L,
-  inputRef: T,
+  inputRef: y,
   isDisabled: f,
   isInvalid: h,
-  isLoading: D,
+  isLoading: T,
   isRequired: R,
-  label: u,
+  label: d,
   name: w,
   onBlur: b,
   onChange: n,
   options: l,
   placeholder: A,
-  value: r = [],
+  value: i = [],
   shouldVisuallyHideLabel: O
 }) {
-  const j = ne(), { t: s } = re("common"), { container: z } = le(), [E, v] = Q(""), o = C(null), I = C(null), M = se(T, I), P = c(() => {
+  const j = le(), { t: s } = te("common"), { container: z } = se(), [E, v] = Q(""), o = C(null), I = C(null), M = ae(y, I), P = m(() => {
     o.current = setTimeout(() => {
       o.current = null, b?.();
     }, 50);
-  }, [b]), k = c(() => {
+  }, [b]), k = m(() => {
     o.current && (clearTimeout(o.current), o.current = null);
-  }, []), a = m(() => new Set(r), [r]), g = m(
+  }, []), a = u(() => new Set(i), [i]), x = u(
     () => l.filter((e) => !a.has(e.value)).map((e) => ({
       label: e.label,
-      value: e.value
+      value: e.value,
+      description: e.description
     })),
     [l, a]
-  ), x = m(
+  ), g = u(
     () => l.filter((e) => a.has(e.value)),
     [l, a]
-  ), H = m(
-    () => g.map((e) => ({ name: e.label, id: e.value })),
-    [g]
-  ), K = c(
+  ), H = u(
+    () => x.map((e) => ({
+      name: e.label,
+      id: e.value,
+      description: e.description
+    })),
+    [x]
+  ), K = m(
     (e) => {
-      e && (n?.([...r, e.toString()]), v(""), I.current?.blur());
+      e && (n?.([...i, e.toString()]), v(""), I.current?.blur());
     },
-    [r, n]
-  ), U = c(
+    [i, n]
+  ), U = m(
     (e) => {
-      n?.(r.filter((J) => J !== e));
+      n?.(i.filter((J) => J !== e));
     },
-    [r, n]
-  ), B = (D ? s("status.loadingOptions") : void 0) ?? F, { inputId: S, errorMessageId: _, descriptionId: q, ariaDescribedBy: G } = oe({
+    [i, n]
+  ), B = (T ? s("status.loadingOptions") : void 0) ?? F, { inputId: S, errorMessageId: _, descriptionId: q, ariaDescribedBy: G } = ie({
     inputId: L,
     errorMessage: p,
     description: B
   });
-  return /* @__PURE__ */ d("div", { className: N(i.root, y), children: [
-    /* @__PURE__ */ t(
-      ie,
+  return /* @__PURE__ */ c("div", { className: N(t.root, D), children: [
+    /* @__PURE__ */ r(
+      oe,
       {
-        label: u,
+        label: d,
         htmlFor: S,
         errorMessage: p,
         errorMessageId: _,
@@ -76,12 +82,12 @@ function ye({
         isRequired: R,
         description: B,
         shouldVisuallyHideLabel: O,
-        className: i.comboBoxField,
+        className: t.comboBoxField,
         withErrorIcon: !1,
-        children: /* @__PURE__ */ d(
+        children: /* @__PURE__ */ c(
           W,
           {
-            "aria-label": u,
+            "aria-label": d,
             "aria-describedby": G,
             className: "react-aria-ComboBox-root",
             isDisabled: f,
@@ -94,7 +100,7 @@ function ye({
             id: S,
             name: w,
             children: [
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ r(
                 X,
                 {
                   ref: M,
@@ -103,17 +109,20 @@ function ye({
                   onFocus: k
                 }
               ),
-              /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ d("div", { "aria-hidden": "true", className: i.icons, children: [
-                h && /* @__PURE__ */ t(ae, { fontSize: 16 }),
-                /* @__PURE__ */ t(ce, { title: s("icons.selectArrow") })
+              /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ c("div", { "aria-hidden": "true", className: t.icons, children: [
+                h && /* @__PURE__ */ r(ce, { fontSize: 16 }),
+                /* @__PURE__ */ r(me, { title: s("icons.selectArrow") })
               ] }) }),
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ r(
                 Z,
                 {
-                  className: N(i.popover, "react-aria-Popover"),
+                  className: N(t.popover, "react-aria-Popover"),
                   UNSTABLE_portalContainer: z.current ?? void 0,
                   maxHeight: 320,
-                  children: /* @__PURE__ */ t($, { layout: V, children: /* @__PURE__ */ t(ee, { items: H, children: (e) => /* @__PURE__ */ t(te, { children: e.name }, e.id) }) })
+                  children: /* @__PURE__ */ r($, { layout: V, children: /* @__PURE__ */ r(ee, { items: H, children: (e) => /* @__PURE__ */ c(re, { textValue: e.name, children: [
+                    /* @__PURE__ */ r("div", { className: t.optionLabel, children: e.name }),
+                    e.description && /* @__PURE__ */ r(ne, { className: t.optionDescription, children: e.description })
+                  ] }, e.id) }) })
                 }
               )
             ]
@@ -121,7 +130,7 @@ function ye({
         )
       }
     ),
-    x.length > 0 && /* @__PURE__ */ t("div", { className: i.chips, role: "list", "aria-label": s("labels.selectedItems", { label: u }), children: x.map((e) => /* @__PURE__ */ t("span", { role: "listitem", children: /* @__PURE__ */ t(
+    g.length > 0 && /* @__PURE__ */ r("div", { className: t.chips, role: "list", "aria-label": s("labels.selectedItems", { label: d }), children: g.map((e) => /* @__PURE__ */ r("span", { role: "listitem", children: /* @__PURE__ */ r(
       j.Badge,
       {
         status: "info",
@@ -136,6 +145,6 @@ function ye({
   ] });
 }
 export {
-  ye as MultiSelectComboBox
+  Le as MultiSelectComboBox
 };
 //# sourceMappingURL=MultiSelectComboBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectComboBox.js","sources":["../../../../../src/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react'\nimport type { Key } from 'react-aria-components'\nimport {\n  ComboBox as AriaComboBox,\n  Button,\n  Input,\n  ListBox,\n  ListBoxItem,\n  ListLayout,\n  Popover,\n  Virtualizer,\n} from 'react-aria-components'\nimport classNames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './MultiSelectComboBox.module.scss'\nimport type { MultiSelectComboBoxProps } from './MultiSelectComboBoxTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\n\n/**\n * Combo box that lets the user pick multiple options, rendering each selection as a dismissable chip below the input.\n *\n * @param props - See {@link MultiSelectComboBoxProps}.\n * @returns The rendered multi-select combo box field.\n * @internal\n */\nexport function MultiSelectComboBox({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef: inputRefFromProps,\n  isDisabled,\n  isInvalid,\n  isLoading,\n  isRequired,\n  label,\n  name,\n  onBlur,\n  onChange,\n  options,\n  placeholder,\n  value: selectedValues = [],\n  shouldVisuallyHideLabel,\n}: MultiSelectComboBoxProps) {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const { container } = useTheme()\n  const [inputValue, setInputValue] = useState('')\n  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const internalInputRef = useRef<HTMLInputElement>(null)\n  const inputRef = useForkRef(inputRefFromProps, internalInputRef)\n\n  const handleInputBlur = useCallback(() => {\n    blurTimeoutRef.current = setTimeout(() => {\n      blurTimeoutRef.current = null\n      onBlur?.()\n    }, 50)\n  }, [onBlur])\n\n  const handleInputFocus = useCallback(() => {\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current)\n      blurTimeoutRef.current = null\n    }\n  }, [])\n\n  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues])\n\n  const availableOptions = useMemo(\n    () =>\n      options\n        .filter(option => !selectedSet.has(option.value))\n        .map(option => ({\n          label: option.label,\n          value: option.value,\n        })),\n    [options, selectedSet],\n  )\n\n  const selectedOptions = useMemo(\n    () => options.filter(option => selectedSet.has(option.value)),\n    [options, selectedSet],\n  )\n\n  const items = useMemo(\n    () => availableOptions.map(option => ({ name: option.label, id: option.value })),\n    [availableOptions],\n  )\n\n  const handleSelectionChange = useCallback(\n    (key: Key | null) => {\n      if (!key) return\n      onChange?.([...selectedValues, key.toString()])\n      setInputValue('')\n      internalInputRef.current?.blur()\n    },\n    [selectedValues, onChange],\n  )\n\n  const handleDismiss = useCallback(\n    (value: string) => {\n      onChange?.(selectedValues.filter(v => v !== value))\n    },\n    [selectedValues, onChange],\n  )\n\n  const loadingDescription = isLoading ? t('status.loadingOptions') : undefined\n  const displayDescription = loadingDescription ?? description\n\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description: displayDescription,\n  })\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <FieldLayout\n        label={label}\n        htmlFor={inputId}\n        errorMessage={errorMessage}\n        errorMessageId={errorMessageId}\n        descriptionId={descriptionId}\n        isRequired={isRequired}\n        description={displayDescription}\n        shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n        className={styles.comboBoxField}\n        withErrorIcon={false}\n      >\n        <AriaComboBox\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          className={'react-aria-ComboBox-root'}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          menuTrigger=\"focus\"\n          inputValue={inputValue}\n          onInputChange={setInputValue}\n          selectedKey={null}\n          onSelectionChange={handleSelectionChange}\n          id={inputId}\n          name={name}\n        >\n          <Input\n            ref={inputRef}\n            placeholder={placeholder}\n            onBlur={handleInputBlur}\n            onFocus={handleInputFocus}\n          />\n          <Button>\n            <div aria-hidden=\"true\" className={styles.icons}>\n              {isInvalid && <AlertCircle fontSize={16} />}\n              <CaretDown title={t('icons.selectArrow')} />\n            </div>\n          </Button>\n\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={container.current ?? undefined}\n            maxHeight={320}\n          >\n            <Virtualizer layout={ListLayout}>\n              <ListBox items={items}>\n                {item => <ListBoxItem key={item.id}>{item.name}</ListBoxItem>}\n              </ListBox>\n            </Virtualizer>\n          </Popover>\n        </AriaComboBox>\n      </FieldLayout>\n\n      {selectedOptions.length > 0 && (\n        <div className={styles.chips} role=\"list\" aria-label={t('labels.selectedItems', { label })}>\n          {selectedOptions.map(option => (\n            <span key={option.value} role=\"listitem\">\n              <Components.Badge\n                status=\"info\"\n                onDismiss={() => {\n                  handleDismiss(option.value)\n                }}\n                dismissAriaLabel={t('labels.removeItem', { label: option.label })}\n                isDisabled={isDisabled}\n              >\n                {option.label}\n              </Components.Badge>\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["MultiSelectComboBox","className","description","errorMessage","id","inputRefFromProps","isDisabled","isInvalid","isLoading","isRequired","label","name","onBlur","onChange","options","placeholder","selectedValues","shouldVisuallyHideLabel","Components","useComponentContext","t","useTranslation","container","useTheme","inputValue","setInputValue","useState","blurTimeoutRef","useRef","internalInputRef","inputRef","useForkRef","handleInputBlur","useCallback","handleInputFocus","selectedSet","useMemo","availableOptions","option","selectedOptions","items","handleSelectionChange","key","handleDismiss","value","v","displayDescription","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","classNames","styles","jsx","FieldLayout","jsxs","AriaComboBox","Input","Button","AlertCircle","CaretDown","Popover","Virtualizer","ListLayout","ListBox","item","ListBoxItem"],"mappings":"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"}
+{"version":3,"file":"MultiSelectComboBox.js","sources":["../../../../../src/components/Common/UI/MultiSelectComboBox/MultiSelectComboBox.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react'\nimport type { Key } from 'react-aria-components'\nimport {\n  ComboBox as AriaComboBox,\n  Button,\n  Input,\n  ListBox,\n  ListBoxItem,\n  ListLayout,\n  Popover,\n  Virtualizer,\n} from 'react-aria-components'\nimport classNames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './MultiSelectComboBox.module.scss'\nimport type { MultiSelectComboBoxProps } from './MultiSelectComboBoxTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { FieldDescription } from '@/components/Common/FieldDescription'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\n\n/**\n * Combo box that lets the user pick multiple options, rendering each selection as a dismissable chip below the input.\n *\n * @param props - See {@link MultiSelectComboBoxProps}.\n * @returns The rendered multi-select combo box field.\n * @internal\n */\nexport function MultiSelectComboBox({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef: inputRefFromProps,\n  isDisabled,\n  isInvalid,\n  isLoading,\n  isRequired,\n  label,\n  name,\n  onBlur,\n  onChange,\n  options,\n  placeholder,\n  value: selectedValues = [],\n  shouldVisuallyHideLabel,\n}: MultiSelectComboBoxProps) {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const { container } = useTheme()\n  const [inputValue, setInputValue] = useState('')\n  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const internalInputRef = useRef<HTMLInputElement>(null)\n  const inputRef = useForkRef(inputRefFromProps, internalInputRef)\n\n  const handleInputBlur = useCallback(() => {\n    blurTimeoutRef.current = setTimeout(() => {\n      blurTimeoutRef.current = null\n      onBlur?.()\n    }, 50)\n  }, [onBlur])\n\n  const handleInputFocus = useCallback(() => {\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current)\n      blurTimeoutRef.current = null\n    }\n  }, [])\n\n  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues])\n\n  const availableOptions = useMemo(\n    () =>\n      options\n        .filter(option => !selectedSet.has(option.value))\n        .map(option => ({\n          label: option.label,\n          value: option.value,\n          description: option.description,\n        })),\n    [options, selectedSet],\n  )\n\n  const selectedOptions = useMemo(\n    () => options.filter(option => selectedSet.has(option.value)),\n    [options, selectedSet],\n  )\n\n  const items = useMemo(\n    () =>\n      availableOptions.map(option => ({\n        name: option.label,\n        id: option.value,\n        description: option.description,\n      })),\n    [availableOptions],\n  )\n\n  const handleSelectionChange = useCallback(\n    (key: Key | null) => {\n      if (!key) return\n      onChange?.([...selectedValues, key.toString()])\n      setInputValue('')\n      internalInputRef.current?.blur()\n    },\n    [selectedValues, onChange],\n  )\n\n  const handleDismiss = useCallback(\n    (value: string) => {\n      onChange?.(selectedValues.filter(v => v !== value))\n    },\n    [selectedValues, onChange],\n  )\n\n  const loadingDescription = isLoading ? t('status.loadingOptions') : undefined\n  const displayDescription = loadingDescription ?? description\n\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description: displayDescription,\n  })\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <FieldLayout\n        label={label}\n        htmlFor={inputId}\n        errorMessage={errorMessage}\n        errorMessageId={errorMessageId}\n        descriptionId={descriptionId}\n        isRequired={isRequired}\n        description={displayDescription}\n        shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n        className={styles.comboBoxField}\n        withErrorIcon={false}\n      >\n        <AriaComboBox\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          className={'react-aria-ComboBox-root'}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          menuTrigger=\"focus\"\n          inputValue={inputValue}\n          onInputChange={setInputValue}\n          selectedKey={null}\n          onSelectionChange={handleSelectionChange}\n          id={inputId}\n          name={name}\n        >\n          <Input\n            ref={inputRef}\n            placeholder={placeholder}\n            onBlur={handleInputBlur}\n            onFocus={handleInputFocus}\n          />\n          <Button>\n            <div aria-hidden=\"true\" className={styles.icons}>\n              {isInvalid && <AlertCircle fontSize={16} />}\n              <CaretDown title={t('icons.selectArrow')} />\n            </div>\n          </Button>\n\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={container.current ?? undefined}\n            maxHeight={320}\n          >\n            <Virtualizer layout={ListLayout}>\n              <ListBox items={items}>\n                {item => (\n                  <ListBoxItem key={item.id} textValue={item.name}>\n                    <div className={styles.optionLabel}>{item.name}</div>\n                    {item.description && (\n                      <FieldDescription className={styles.optionDescription}>\n                        {item.description}\n                      </FieldDescription>\n                    )}\n                  </ListBoxItem>\n                )}\n              </ListBox>\n            </Virtualizer>\n          </Popover>\n        </AriaComboBox>\n      </FieldLayout>\n\n      {selectedOptions.length > 0 && (\n        <div className={styles.chips} role=\"list\" aria-label={t('labels.selectedItems', { label })}>\n          {selectedOptions.map(option => (\n            <span key={option.value} role=\"listitem\">\n              <Components.Badge\n                status=\"info\"\n                onDismiss={() => {\n                  handleDismiss(option.value)\n                }}\n                dismissAriaLabel={t('labels.removeItem', { label: option.label })}\n                isDisabled={isDisabled}\n              >\n                {option.label}\n              </Components.Badge>\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["MultiSelectComboBox","className","description","errorMessage","id","inputRefFromProps","isDisabled","isInvalid","isLoading","isRequired","label","name","onBlur","onChange","options","placeholder","selectedValues","shouldVisuallyHideLabel","Components","useComponentContext","t","useTranslation","container","useTheme","inputValue","setInputValue","useState","blurTimeoutRef","useRef","internalInputRef","inputRef","useForkRef","handleInputBlur","useCallback","handleInputFocus","selectedSet","useMemo","availableOptions","option","selectedOptions","items","handleSelectionChange","key","handleDismiss","value","v","displayDescription","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","classNames","styles","jsx","FieldLayout","jsxs","AriaComboBox","Input","Button","AlertCircle","CaretDown","Popover","Virtualizer","ListLayout","ListBox","item","ListBoxItem","FieldDescription"],"mappings":"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"}

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

@@ -1,16 +1,20 @@
-const o = "_root_kyxn6_1", c = "_comboBoxField_kyxn6_5", s = "_icons_kyxn6_71", _ = "_popover_kyxn6_81", n = "_chips_kyxn6_130", t = {
+const o = "_root_1ynwu_1", n = "_comboBoxField_1ynwu_5", t = "_icons_1ynwu_71", i = "_popover_1ynwu_81", _ = "_optionLabel_1ynwu_130", c = "_optionDescription_1ynwu_134", s = "_chips_1ynwu_138", p = {
   root: o,
-  comboBoxField: c,
-  icons: s,
-  popover: _,
-  chips: n
+  comboBoxField: n,
+  icons: t,
+  popover: i,
+  optionLabel: _,
+  optionDescription: c,
+  chips: s
 };
 export {
-  n as chips,
-  c as comboBoxField,
-  t as default,
-  s as icons,
-  _ as popover,
+  s as chips,
+  n as comboBoxField,
+  p as default,
+  t as icons,
+  c as optionDescription,
+  _ as optionLabel,
+  i as popover,
   o as root
 };
 //# sourceMappingURL=MultiSelectComboBox.module.scss.js.map

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

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

package/dist/components/Common/UI/MultiSelectComboBox/MultiSelectComboBoxTypes.d.ts

@@ -15,6 +15,10 @@ export interface MultiSelectComboBoxOption {
      * Value of the option that will be passed to onChange
      */
     value: string;
+    /**
+     * Optional secondary text rendered beneath the label in the option list
+     */
+    description?: string;
 }
 /**
  * Props your `MultiSelectComboBox` implementation must accept from the component adapter.

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

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import c from "classnames";
-import { Flex as n } from "../../Flex/Flex.js";
-import p from "./ProgressBar.module.scss.js";
+import n from "./ProgressBar.module.scss.js";
+import { Flex as p } from "../../Flex/Flex.js";
 import { VisuallyHidden as d } from "../../VisuallyHidden/VisuallyHidden.js";
 function y({
   className: i,
@@ -13,9 +13,9 @@ function y({
   const s = Math.max(1, Math.min(m, e)), l = {
     "--g-progress-bar-width": `${s * 100 / e}%`
   };
-  return /* @__PURE__ */ t(n, { flexDirection: "column", children: [
+  return /* @__PURE__ */ t(p, { flexDirection: "column", children: [
     o && /* @__PURE__ */ r(o, {}),
-    /* @__PURE__ */ r("div", { className: c(p.root, i), style: l, children: /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r("progress", { "aria-label": a, value: s, max: e }) }) })
+    /* @__PURE__ */ r("div", { className: c(n.root, i), style: l, children: /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r("progress", { "aria-label": a, value: s, max: e }) }) })
   ] });
 }
 export {

package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js

@@ -9,12 +9,15 @@ import "@gusto/embedded-api/models/errors/gustoembeddederror";
 import "@gusto/embedded-api/models/errors/sdkvalidationerror";
 import "@gusto/embedded-api/models/errors/unprocessableentityerror";
 import "@gusto/embedded-api/models/errors/httpclienterrors";
+import "dompurify";
+import "../../../../contexts/LocaleProvider/useLocale.js";
 import "../../../../shared/constants.js";
 import "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { createCompoundContext as t } from "../../../Base/createCompoundContext.js";
-const [d, s] = t("CreateSignatoryContext");
+const [f, v] = t("CreateSignatoryContext");
 export {
-  s as CreateSignatoryProvider,
-  d as useCreateSignatory
+  v as CreateSignatoryProvider,
+  f as useCreateSignatory
 };
 //# sourceMappingURL=useCreateSignatory.js.map

package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateSignatory.js","sources":["../../../../../src/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.ts"],"sourcesContent":["import { type Signatory } from '@gusto/embedded-api/models/components/signatory'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/**\n * Initial values for the {@link CreateSignatory} form fields. At least one field must be provided.\n *\n * @public\n */\nexport type CreateSignatoryDefaultValues = RequireAtLeastOne<\n  Pick<Signatory, 'firstName' | 'lastName' | 'email' | 'title' | 'phone' | 'birthday'> &\n    Pick<\n      NonNullable<Signatory['homeAddress']>,\n      'street1' | 'street2' | 'city' | 'state' | 'zip'\n    > & {\n      ssn?: string\n    }\n>\ntype CreateSignatoryContextType = {\n  isPending: boolean\n  currentSignatory?: Signatory\n}\n\nconst [useCreateSignatory, CreateSignatoryProvider] =\n  createCompoundContext<CreateSignatoryContextType>('CreateSignatoryContext')\n\nexport {\n  /** @internal */\n  useCreateSignatory,\n  /** @internal */\n  CreateSignatoryProvider,\n}\n"],"names":["useCreateSignatory","CreateSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}
+{"version":3,"file":"useCreateSignatory.js","sources":["../../../../../src/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.ts"],"sourcesContent":["import { type Signatory } from '@gusto/embedded-api/models/components/signatory'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/**\n * Initial values for the {@link CreateSignatory} form fields. At least one field must be provided.\n *\n * @public\n */\nexport type CreateSignatoryDefaultValues = RequireAtLeastOne<\n  Pick<Signatory, 'firstName' | 'lastName' | 'email' | 'title' | 'phone' | 'birthday'> &\n    Pick<\n      NonNullable<Signatory['homeAddress']>,\n      'street1' | 'street2' | 'city' | 'state' | 'zip'\n    > & {\n      ssn?: string\n    }\n>\ntype CreateSignatoryContextType = {\n  isPending: boolean\n  currentSignatory?: Signatory\n}\n\nconst [useCreateSignatory, CreateSignatoryProvider] =\n  createCompoundContext<CreateSignatoryContextType>('CreateSignatoryContext')\n\nexport {\n  /** @internal */\n  useCreateSignatory,\n  /** @internal */\n  CreateSignatoryProvider,\n}\n"],"names":["useCreateSignatory","CreateSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}

package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js

@@ -9,12 +9,15 @@ import "@gusto/embedded-api/models/errors/gustoembeddederror";
 import "@gusto/embedded-api/models/errors/sdkvalidationerror";
 import "@gusto/embedded-api/models/errors/unprocessableentityerror";
 import "@gusto/embedded-api/models/errors/httpclienterrors";
+import "dompurify";
+import "../../../../contexts/LocaleProvider/useLocale.js";
 import "../../../../shared/constants.js";
 import "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { createCompoundContext as t } from "../../../Base/createCompoundContext.js";
-const [S, c] = t("InviteSignatoryContext");
+const [s, u] = t("InviteSignatoryContext");
 export {
-  c as InviteSignatoryProvider,
-  S as useInviteSignatory
+  u as InviteSignatoryProvider,
+  s as useInviteSignatory
 };
 //# sourceMappingURL=useInviteSignatory.js.map

package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInviteSignatory.js","sources":["../../../../../src/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.ts"],"sourcesContent":["import { type Signatory } from '@gusto/embedded-api/models/components/signatory'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\ntype InviteSignatoryContextType = {\n  isPending: boolean\n}\n\n/**\n * Default values for the invite signatory form fields: `firstName`, `lastName`, `email`,\n * `confirmEmail`, and `title`. At least one field is required.\n *\n * @public\n */\nexport type InviteSignatoryDefaultValues = RequireAtLeastOne<\n  Pick<Signatory, 'firstName' | 'lastName' | 'email' | 'title'> & {\n    confirmEmail: string\n  }\n>\n\nconst [useInviteSignatory, InviteSignatoryProvider] =\n  createCompoundContext<InviteSignatoryContextType>('InviteSignatoryContext')\n\nexport { useInviteSignatory, InviteSignatoryProvider }\n"],"names":["useInviteSignatory","InviteSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}
+{"version":3,"file":"useInviteSignatory.js","sources":["../../../../../src/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.ts"],"sourcesContent":["import { type Signatory } from '@gusto/embedded-api/models/components/signatory'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\ntype InviteSignatoryContextType = {\n  isPending: boolean\n}\n\n/**\n * Default values for the invite signatory form fields: `firstName`, `lastName`, `email`,\n * `confirmEmail`, and `title`. At least one field is required.\n *\n * @public\n */\nexport type InviteSignatoryDefaultValues = RequireAtLeastOne<\n  Pick<Signatory, 'firstName' | 'lastName' | 'email' | 'title'> & {\n    confirmEmail: string\n  }\n>\n\nconst [useInviteSignatory, InviteSignatoryProvider] =\n  createCompoundContext<InviteSignatoryContextType>('InviteSignatoryContext')\n\nexport { useInviteSignatory, InviteSignatoryProvider }\n"],"names":["useInviteSignatory","InviteSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,CAACA,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}

package/dist/components/Company/AssignSignatory/useAssignSignatory.js

@@ -9,16 +9,19 @@ import "@gusto/embedded-api/models/errors/gustoembeddederror";
 import "@gusto/embedded-api/models/errors/sdkvalidationerror";
 import "@gusto/embedded-api/models/errors/unprocessableentityerror";
 import "@gusto/embedded-api/models/errors/httpclienterrors";
+import "dompurify";
+import "../../../contexts/LocaleProvider/useLocale.js";
 import "../../../shared/constants.js";
 import "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { createCompoundContext as t } from "../../Base/createCompoundContext.js";
-const d = {
+const C = {
   createSignatory: "createSignatory",
   inviteSignatory: "inviteSignatory"
-}, [v, x] = t("AssignSignatoryContext");
+}, [u, f] = t("AssignSignatoryContext");
 export {
-  x as AssignSignatoryProvider,
-  d as SignatoryAssignmentMode,
-  v as useAssignSignatory
+  f as AssignSignatoryProvider,
+  C as SignatoryAssignmentMode,
+  u as useAssignSignatory
 };
 //# sourceMappingURL=useAssignSignatory.js.map

package/dist/components/Company/AssignSignatory/useAssignSignatory.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAssignSignatory.js","sources":["../../../../src/components/Company/AssignSignatory/useAssignSignatory.ts"],"sourcesContent":["import { type CreateSignatoryDefaultValues } from './CreateSignatory'\nimport { type InviteSignatoryDefaultValues } from './InviteSignatory'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/** @internal */\nexport const SignatoryAssignmentMode = {\n  createSignatory: 'createSignatory',\n  inviteSignatory: 'inviteSignatory',\n} as const\n\n/**\n * Default values for the create and invite forms rendered by {@link AssignSignatory}.\n *\n * @remarks\n * At least one of `create` or `invite` must be provided.\n *\n * @public\n */\nexport type AssignSignatoryDefaultValues = RequireAtLeastOne<{\n  create?: CreateSignatoryDefaultValues\n  invite?: InviteSignatoryDefaultValues\n}>\n\ntype AssignSignatoryContextType = {\n  companyId: string\n  signatoryId?: string\n  defaultValues?: AssignSignatoryDefaultValues\n  onSignatoryAssignmentModeChange: (mode: string) => void\n  onSignatoryFormEvent: BaseComponentInterface['onEvent']\n}\n\nconst [useAssignSignatory, AssignSignatoryProvider] =\n  createCompoundContext<AssignSignatoryContextType>('AssignSignatoryContext')\n\nexport { useAssignSignatory, AssignSignatoryProvider }\n"],"names":["SignatoryAssignmentMode","useAssignSignatory","AssignSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AAOO,MAAMA,IAA0B;AAAA,EACrC,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GAuBM,CAACC,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}
+{"version":3,"file":"useAssignSignatory.js","sources":["../../../../src/components/Company/AssignSignatory/useAssignSignatory.ts"],"sourcesContent":["import { type CreateSignatoryDefaultValues } from './CreateSignatory'\nimport { type InviteSignatoryDefaultValues } from './InviteSignatory'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { createCompoundContext } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\n/** @internal */\nexport const SignatoryAssignmentMode = {\n  createSignatory: 'createSignatory',\n  inviteSignatory: 'inviteSignatory',\n} as const\n\n/**\n * Default values for the create and invite forms rendered by {@link AssignSignatory}.\n *\n * @remarks\n * At least one of `create` or `invite` must be provided.\n *\n * @public\n */\nexport type AssignSignatoryDefaultValues = RequireAtLeastOne<{\n  create?: CreateSignatoryDefaultValues\n  invite?: InviteSignatoryDefaultValues\n}>\n\ntype AssignSignatoryContextType = {\n  companyId: string\n  signatoryId?: string\n  defaultValues?: AssignSignatoryDefaultValues\n  onSignatoryAssignmentModeChange: (mode: string) => void\n  onSignatoryFormEvent: BaseComponentInterface['onEvent']\n}\n\nconst [useAssignSignatory, AssignSignatoryProvider] =\n  createCompoundContext<AssignSignatoryContextType>('AssignSignatoryContext')\n\nexport { useAssignSignatory, AssignSignatoryProvider }\n"],"names":["SignatoryAssignmentMode","useAssignSignatory","AssignSignatoryProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;;AAOO,MAAMA,IAA0B;AAAA,EACrC,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GAuBM,CAACC,GAAoBC,CAAuB,IAChDC,EAAkD,wBAAwB;"}

package/dist/components/Company/BankAccount/BankAccountForm/context.js

@@ -9,12 +9,15 @@ import "@gusto/embedded-api/models/errors/gustoembeddederror";
 import "@gusto/embedded-api/models/errors/sdkvalidationerror";
 import "@gusto/embedded-api/models/errors/unprocessableentityerror";
 import "@gusto/embedded-api/models/errors/httpclienterrors";
+import "dompurify";
+import "../../../../contexts/LocaleProvider/useLocale.js";
 import "../../../../shared/constants.js";
 import "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { createCompoundContext as o } from "../../../Base/createCompoundContext.js";
-const [C, d] = o("BankAccountContext");
+const [F, f] = o("BankAccountContext");
 export {
-  d as BankAccountFormProvider,
-  C as useBankAccountForm
+  f as BankAccountFormProvider,
+  F as useBankAccountForm
 };
 //# sourceMappingURL=context.js.map