@gusto/embedded-react-sdk 0.32.0 → 0.34.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # Changelog
 
+## 0.34.0
+
+### Features & Enhancements
+
+- Integrate employee selection into OffCycleCreation
+- Add wire-in confirmation alert and API version header
+- Optimize ThemeProvider style tag injection and CSS generation
+
+### Fixes
+
+- Resolve double prepare API call in Off Cycle payroll flow
+
+### Chores & Maintenance
+
+- Architecture overview documentation
+- Add stylelint rule to prevent manual SCSS helpers imports
+- Upgrade zod from v3 to v4
+- Bump @gusto/embedded-api from 0.12.0 to 0.12.2
+- Bump @internationalized/date from 3.10.1 to 3.12.0
+- Bump dompurify from 3.3.1 to 3.3.2
+- Bump @storybook/addon-a11y from 10.2.14 to 10.2.15
+- Bump @storybook/addon-onboarding from 10.2.14 to 10.2.15
+- Bump @storybook/react-vite from 10.2.14 to 10.2.15
+- Bump eslint-plugin-storybook from 10.2.14 to 10.2.15
+
+## 0.33.0
+
+### Features & Enhancements
+
+- Add MultiSelectComboBox composed component
+- Remove form validation for state taxes until API is fixed
+
+### Fixes
+
+- Add support for payroll blockers in contractor flow
+- Fix duplicate payroll progress saved alerts
+
+### Chores & Maintenance
+
+- Update EmployeeDocuments with corrected copy
+- Create cursor command to seed data
+- Remove unnecessary MSW init from e2e-demo CI job
+- Bump immutable from 5.1.4 to 5.1.5
+- Bump @commitlint/cli from 20.4.2 to 20.4.3
+- Bump @commitlint/config-conventional from 20.4.2 to 20.4.3
+- Bump lint-staged from 16.3.1 to 16.3.2
+- Bump @storybook/addon-onboarding from 10.2.13 to 10.2.14
+- Bump @storybook/addon-a11y from 10.2.13 to 10.2.14
+- Bump @storybook/addon-docs from 10.2.13 to 10.2.14
+- Bump @storybook/react-vite from 10.2.13 to 10.2.14
+- Bump eslint-plugin-storybook from 10.2.13 to 10.2.14
+
 ## 0.32.0
 
 ### Features & Enhancements

package/dist/components/Common/Fields/MultiSelectComboBoxField/MultiSelectComboBoxField.d.ts

@@ -0,0 +1,5 @@
+import { UseFieldProps } from '../hooks/useField';
+import { MultiSelectComboBoxProps } from '../../UI/MultiSelectComboBox/MultiSelectComboBoxTypes';
+export interface MultiSelectComboBoxFieldProps extends Omit<MultiSelectComboBoxProps, 'name' | 'value' | 'onChange' | 'isInvalid'>, UseFieldProps<string[]> {
+}
+export declare const MultiSelectComboBoxField: React.FC<MultiSelectComboBoxFieldProps>;

package/dist/components/Common/Fields/MultiSelectComboBoxField/MultiSelectComboBoxField.js

@@ -0,0 +1,34 @@
+import { jsx as x } from "react/jsx-runtime";
+import { useField as f } from "../hooks/useField.js";
+import { useComponentContext as d } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+const h = ({
+  rules: o,
+  defaultValue: e,
+  name: t,
+  errorMessage: n,
+  isRequired: m,
+  onChange: r,
+  transform: i,
+  description: s,
+  onBlur: l,
+  inputRef: p,
+  ...C
+}) => {
+  const c = d(), u = f({
+    name: t,
+    rules: o,
+    defaultValue: e,
+    errorMessage: n,
+    isRequired: m,
+    onChange: r,
+    transform: i,
+    description: s,
+    onBlur: l,
+    inputRef: p
+  });
+  return /* @__PURE__ */ x(c.MultiSelectComboBox, { ...C, ...u });
+};
+export {
+  h as MultiSelectComboBoxField
+};
+//# sourceMappingURL=MultiSelectComboBoxField.js.map

package/dist/components/Common/Fields/MultiSelectComboBoxField/MultiSelectComboBoxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectComboBoxField.js","sources":["../../../../../src/components/Common/Fields/MultiSelectComboBoxField/MultiSelectComboBoxField.tsx"],"sourcesContent":["import { useField, type UseFieldProps } from '@/components/Common/Fields/hooks/useField'\nimport type { MultiSelectComboBoxProps } from '@/components/Common/UI/MultiSelectComboBox/MultiSelectComboBoxTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport interface MultiSelectComboBoxFieldProps\n  extends\n    Omit<MultiSelectComboBoxProps, 'name' | 'value' | 'onChange' | 'isInvalid'>,\n    UseFieldProps<string[]> {}\n\nexport const MultiSelectComboBoxField: React.FC<MultiSelectComboBoxFieldProps> = ({\n  rules,\n  defaultValue,\n  name,\n  errorMessage,\n  isRequired,\n  onChange: onChangeFromProps,\n  transform,\n  description,\n  onBlur,\n  inputRef,\n  ...multiSelectProps\n}: MultiSelectComboBoxFieldProps) => {\n  const Components = useComponentContext()\n  const fieldProps = useField<string[]>({\n    name,\n    rules,\n    defaultValue,\n    errorMessage,\n    isRequired,\n    onChange: onChangeFromProps,\n    transform,\n    description,\n    onBlur,\n    inputRef,\n  })\n\n  return <Components.MultiSelectComboBox {...multiSelectProps} {...fieldProps} />\n}\n"],"names":["MultiSelectComboBoxField","rules","defaultValue","name","errorMessage","isRequired","onChangeFromProps","transform","description","onBlur","inputRef","multiSelectProps","Components","useComponentContext","fieldProps","useField"],"mappings":";;;AASO,MAAMA,IAAoE,CAAC;AAAA,EAChF,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAqC;AACnC,QAAMC,IAAaC,EAAA,GACbC,IAAaC,EAAmB;AAAA,IACpC,MAAAZ;AAAA,IACA,OAAAF;AAAA,IACA,cAAAC;AAAA,IACA,cAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAUC;AAAA,IACV,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD;AAED,2BAAQE,EAAW,qBAAX,EAAgC,GAAGD,GAAmB,GAAGG,GAAY;AAC/E;"}

package/dist/components/Common/Fields/MultiSelectComboBoxField/index.d.ts

@@ -0,0 +1,2 @@
+import "./types/i18next.d.ts"
+export { MultiSelectComboBoxField, type MultiSelectComboBoxFieldProps, } from './MultiSelectComboBoxField';

package/dist/components/Common/SignatureForm/SignatureForm.d.ts

@@ -3,13 +3,7 @@ import { UseFormProps } from 'react-hook-form';
 export declare const SignatureFormSchema: z.ZodObject<{
     signature: z.ZodString;
     confirmSignature: z.ZodLiteral<true>;
-}, "strip", z.ZodTypeAny, {
-    signature: string;
-    confirmSignature: true;
-}, {
-    signature: string;
-    confirmSignature: true;
-}>;
+}, z.core.$strip>;
 export type SignatureFormInputs = z.infer<typeof SignatureFormSchema>;
 interface SignatureFormProps {
     onSubmit: (data: SignatureFormInputs) => void | Promise<void>;

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

@@ -1,13 +1,44 @@
-import { jsx as m } from "react/jsx-runtime";
-import p from "classnames";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import c from "classnames";
 import i from "./Badge.module.scss.js";
-import { BadgeDefaults as l } from "./BadgeTypes.js";
-import { applyMissingDefaults as n } from "../../../../helpers/applyMissingDefaults.js";
-const v = (s) => {
-  const a = n(s, l), { className: r, children: t, status: o, ...e } = a;
-  return /* @__PURE__ */ m("span", { ...e, className: p(i.badge, r), "data-variant": o, children: t });
+import { BadgeDefaults as b } from "./BadgeTypes.js";
+import { applyMissingDefaults as f } from "../../../../helpers/applyMissingDefaults.js";
+import h from "../../../../assets/icons/close.svg.js";
+const y = (e) => {
+  const r = f(e, b), {
+    className: o,
+    children: l,
+    status: m,
+    onDismiss: s,
+    dismissAriaLabel: d = "Dismiss",
+    isDisabled: a,
+    ...n
+  } = r;
+  return /* @__PURE__ */ p(
+    "span",
+    {
+      ...n,
+      className: c(i.badge, s && i.dismissable, o),
+      "data-variant": m,
+      "aria-disabled": a || void 0,
+      children: [
+        l,
+        s && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: i.dismissButton,
+            onClick: s,
+            disabled: a,
+            "aria-label": d,
+            children: /* @__PURE__ */ t(h, { "aria-hidden": !0, width: 12, height: 12 })
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  v as Badge
+  y as Badge
 };
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../../src/components/Common/UI/Badge/Badge.tsx"],"sourcesContent":["import type React from 'react'\nimport classnames from 'classnames'\nimport styles from './Badge.module.scss'\nimport type { BadgeProps } from './BadgeTypes'\nimport { BadgeDefaults } from './BadgeTypes'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\n\nexport const Badge: React.FC<BadgeProps> = rawProps => {\n  const resolvedProps = applyMissingDefaults(rawProps, BadgeDefaults)\n  const { className, children, status: variant, ...otherProps } = resolvedProps\n  return (\n    <span {...otherProps} className={classnames(styles.badge, className)} data-variant={variant}>\n      {children}\n    </span>\n  )\n}\n"],"names":["Badge","rawProps","resolvedProps","applyMissingDefaults","BadgeDefaults","className","children","variant","otherProps","jsx","classnames","styles"],"mappings":";;;;;AAOO,MAAMA,IAA8B,CAAAC,MAAY;AACrD,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAa,GAC5D,EAAE,WAAAC,GAAW,UAAAC,GAAU,QAAQC,GAAS,GAAGC,MAAeN;AAChE,SACE,gBAAAO,EAAC,QAAA,EAAM,GAAGD,GAAY,WAAWE,EAAWC,EAAO,OAAON,CAAS,GAAG,gBAAcE,GACjF,UAAAD,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"Badge.js","sources":["../../../../../src/components/Common/UI/Badge/Badge.tsx"],"sourcesContent":["import type React from 'react'\nimport classnames from 'classnames'\nimport styles from './Badge.module.scss'\nimport type { BadgeProps } from './BadgeTypes'\nimport { BadgeDefaults } from './BadgeTypes'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport CloseIcon from '@/assets/icons/close.svg?react'\n\nexport const Badge: React.FC<BadgeProps> = rawProps => {\n  const resolvedProps = applyMissingDefaults(rawProps, BadgeDefaults)\n  const {\n    className,\n    children,\n    status: variant,\n    onDismiss,\n    dismissAriaLabel = 'Dismiss',\n    isDisabled,\n    ...otherProps\n  } = resolvedProps\n  return (\n    <span\n      {...otherProps}\n      className={classnames(styles.badge, onDismiss && styles.dismissable, className)}\n      data-variant={variant}\n      aria-disabled={isDisabled || undefined}\n    >\n      {children}\n      {onDismiss && (\n        <button\n          type=\"button\"\n          className={styles.dismissButton}\n          onClick={onDismiss}\n          disabled={isDisabled}\n          aria-label={dismissAriaLabel}\n        >\n          <CloseIcon aria-hidden width={12} height={12} />\n        </button>\n      )}\n    </span>\n  )\n}\n"],"names":["Badge","rawProps","resolvedProps","applyMissingDefaults","BadgeDefaults","className","children","variant","onDismiss","dismissAriaLabel","isDisabled","otherProps","jsxs","classnames","styles","jsx","CloseIcon"],"mappings":";;;;;;AAQO,MAAMA,IAA8B,CAAAC,MAAY;AACrD,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAa,GAC5D;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAQC;AAAA,IACR,WAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDT;AACJ,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAWE,EAAWC,EAAO,OAAON,KAAaM,EAAO,aAAaT,CAAS;AAAA,MAC9E,gBAAcE;AAAA,MACd,iBAAeG,KAAc;AAAA,MAE5B,UAAA;AAAA,QAAAJ;AAAA,QACAE,KACC,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWD,EAAO;AAAA,YAClB,SAASN;AAAA,YACT,UAAUE;AAAA,YACV,cAAYD;AAAA,YAEZ,4BAACO,GAAA,EAAU,eAAW,IAAC,OAAO,IAAI,QAAQ,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAChD;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -1,8 +1,12 @@
-const e = "_badge_6p7jj_1", a = {
-  badge: e
+const s = "_badge_1jiis_1", i = "_dismissable_1jiis_38", t = "_dismissButton_1jiis_45", d = {
+  badge: s,
+  dismissable: i,
+  dismissButton: t
 };
 export {
-  e as badge,
-  a as default
+  s as badge,
+  d as default,
+  t as dismissButton,
+  i as dismissable
 };
 //# sourceMappingURL=Badge.module.scss.js.map

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

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

package/dist/components/Common/UI/Badge/BadgeTypes.d.ts

@@ -8,6 +8,18 @@ export interface BadgeProps extends Pick<HTMLAttributes<HTMLSpanElement>, 'class
      * Visual style variant of the badge
      */
     status?: 'success' | 'warning' | 'error' | 'info';
+    /**
+     * Optional callback when the dismiss button is clicked. When provided, a dismiss button is rendered inside the badge.
+     */
+    onDismiss?: () => void;
+    /**
+     * Accessible label for the dismiss button
+     */
+    dismissAriaLabel?: string;
+    /**
+     * Whether the badge interaction is disabled
+     */
+    isDisabled?: boolean;
 }
 /**
  * Default prop values for Badge component.

package/dist/components/Common/UI/Badge/BadgeTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeTypes.js","sources":["../../../../../src/components/Common/UI/Badge/BadgeTypes.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nexport interface BadgeProps extends Pick<\n  HTMLAttributes<HTMLSpanElement>,\n  'className' | 'id' | 'aria-label'\n> {\n  /**\n   * Content to be displayed inside the badge\n   */\n  children: ReactNode\n  /**\n   * Visual style variant of the badge\n   */\n  status?: 'success' | 'warning' | 'error' | 'info'\n}\n\n/**\n * Default prop values for Badge component.\n */\nexport const BadgeDefaults = {\n  status: 'info',\n} as const satisfies Partial<BadgeProps>\n"],"names":["BadgeDefaults"],"mappings":"AAmBO,MAAMA,IAAgB;AAAA,EAC3B,QAAQ;AACV;"}
+{"version":3,"file":"BadgeTypes.js","sources":["../../../../../src/components/Common/UI/Badge/BadgeTypes.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\n\nexport interface BadgeProps extends Pick<\n  HTMLAttributes<HTMLSpanElement>,\n  'className' | 'id' | 'aria-label'\n> {\n  /**\n   * Content to be displayed inside the badge\n   */\n  children: ReactNode\n  /**\n   * Visual style variant of the badge\n   */\n  status?: 'success' | 'warning' | 'error' | 'info'\n  /**\n   * Optional callback when the dismiss button is clicked. When provided, a dismiss button is rendered inside the badge.\n   */\n  onDismiss?: () => void\n  /**\n   * Accessible label for the dismiss button\n   */\n  dismissAriaLabel?: string\n  /**\n   * Whether the badge interaction is disabled\n   */\n  isDisabled?: boolean\n}\n\n/**\n * Default prop values for Badge component.\n */\nexport const BadgeDefaults = {\n  status: 'info',\n} as const satisfies Partial<BadgeProps>\n"],"names":["BadgeDefaults"],"mappings":"AA+BO,MAAMA,IAAgB;AAAA,EAC3B,QAAQ;AACV;"}

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

@@ -4,10 +4,9 @@ import r from "./Menu.module.scss.js";
 import { MenuDefaults as x } from "./MenuTypes.js";
 import { applyMissingDefaults as I } from "../../../../helpers/applyMissingDefaults.js";
 import "react";
-import "react-i18next";
 import { useTheme as O } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
-function R(s) {
+function E(s) {
   const a = I(s, x), {
     triggerRef: i,
     items: m,
@@ -49,6 +48,6 @@ function R(s) {
   );
 }
 export {
-  R as Menu
+  E as Menu
 };
 //# sourceMappingURL=Menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../../../src/components/Common/UI/Menu/Menu.tsx"],"sourcesContent":["import { Menu as AriaMenu, MenuItem as AriaMenuItem, Popover } from 'react-aria-components'\nimport styles from './Menu.module.scss'\nimport { type MenuProps, MenuDefaults } from './MenuTypes'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport { useTheme } from '@/contexts/ThemeProvider'\n\nexport function Menu(rawProps: MenuProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, MenuDefaults)\n  const {\n    triggerRef,\n    items,\n    isOpen,\n    onClose,\n    'aria-label': ariaLabel,\n    ...otherProps\n  } = resolvedProps\n  const { container } = useTheme()\n\n  const handleOpenChange = (isOpen: boolean) => {\n    if (!isOpen) {\n      onClose?.()\n    }\n  }\n\n  return (\n    <Popover\n      UNSTABLE_portalContainer={container.current}\n      onOpenChange={handleOpenChange}\n      isOpen={isOpen}\n      triggerRef={triggerRef}\n      placement=\"bottom start\"\n      offset={8}\n      shouldUpdatePosition={true}\n    >\n      <AriaMenu onClose={onClose} aria-label={ariaLabel} className={styles.root} {...otherProps}>\n        {items?.map(({ onClick, isDisabled, href, icon, label, ...itemProps }, index) => (\n          <AriaMenuItem\n            key={index}\n            onAction={() => {\n              onClick()\n            }}\n            isDisabled={isDisabled}\n            href={href}\n            className={styles.menuItem}\n            {...itemProps}\n          >\n            {icon && <div className={styles.menuIcon}>{icon}</div>}\n            {label}\n          </AriaMenuItem>\n        ))}\n      </AriaMenu>\n    </Popover>\n  )\n}\n"],"names":["Menu","rawProps","resolvedProps","applyMissingDefaults","MenuDefaults","triggerRef","items","isOpen","onClose","ariaLabel","otherProps","container","useTheme","handleOpenChange","jsx","Popover","AriaMenu","styles","onClick","isDisabled","href","icon","label","itemProps","index","jsxs","AriaMenuItem"],"mappings":";;;;;;;;;AAMO,SAASA,EAAKC,GAAqB;AACxC,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAY,GAC3D;AAAA,IACJ,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,IACDR,GACE,EAAE,WAAAS,EAAA,IAAcC,EAAA,GAEhBC,IAAmB,CAACN,MAAoB;AAC5C,IAAKA,KACHC,IAAA;AAAA,EAEJ;AAEA,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,0BAA0BJ,EAAU;AAAA,MACpC,cAAcE;AAAA,MACd,QAAAN;AAAA,MACA,YAAAF;AAAA,MACA,WAAU;AAAA,MACV,QAAQ;AAAA,MACR,sBAAsB;AAAA,MAEtB,UAAA,gBAAAS,EAACE,KAAS,SAAAR,GAAkB,cAAYC,GAAW,WAAWQ,EAAO,MAAO,GAAGP,GAC5E,UAAAJ,GAAO,IAAI,CAAC,EAAE,SAAAY,GAAS,YAAAC,GAAY,MAAAC,GAAM,MAAAC,GAAM,OAAAC,GAAO,GAAGC,EAAA,GAAaC,MACrE,gBAAAC;AAAA,QAACC;AAAAA,QAAA;AAAA,UAEC,UAAU,MAAM;AACd,YAAAR,EAAA;AAAA,UACF;AAAA,UACA,YAAAC;AAAA,UACA,MAAAC;AAAA,UACA,WAAWH,EAAO;AAAA,UACjB,GAAGM;AAAA,UAEH,UAAA;AAAA,YAAAF,KAAQ,gBAAAP,EAAC,OAAA,EAAI,WAAWG,EAAO,UAAW,UAAAI,GAAK;AAAA,YAC/CC;AAAA,UAAA;AAAA,QAAA;AAAA,QAVIE;AAAA,MAAA,CAYR,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Menu.js","sources":["../../../../../src/components/Common/UI/Menu/Menu.tsx"],"sourcesContent":["import { Menu as AriaMenu, MenuItem as AriaMenuItem, Popover } from 'react-aria-components'\nimport styles from './Menu.module.scss'\nimport { type MenuProps, MenuDefaults } from './MenuTypes'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport { useTheme } from '@/contexts/ThemeProvider'\n\nexport function Menu(rawProps: MenuProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, MenuDefaults)\n  const {\n    triggerRef,\n    items,\n    isOpen,\n    onClose,\n    'aria-label': ariaLabel,\n    ...otherProps\n  } = resolvedProps\n  const { container } = useTheme()\n\n  const handleOpenChange = (isOpen: boolean) => {\n    if (!isOpen) {\n      onClose?.()\n    }\n  }\n\n  return (\n    <Popover\n      UNSTABLE_portalContainer={container.current}\n      onOpenChange={handleOpenChange}\n      isOpen={isOpen}\n      triggerRef={triggerRef}\n      placement=\"bottom start\"\n      offset={8}\n      shouldUpdatePosition={true}\n    >\n      <AriaMenu onClose={onClose} aria-label={ariaLabel} className={styles.root} {...otherProps}>\n        {items?.map(({ onClick, isDisabled, href, icon, label, ...itemProps }, index) => (\n          <AriaMenuItem\n            key={index}\n            onAction={() => {\n              onClick()\n            }}\n            isDisabled={isDisabled}\n            href={href}\n            className={styles.menuItem}\n            {...itemProps}\n          >\n            {icon && <div className={styles.menuIcon}>{icon}</div>}\n            {label}\n          </AriaMenuItem>\n        ))}\n      </AriaMenu>\n    </Popover>\n  )\n}\n"],"names":["Menu","rawProps","resolvedProps","applyMissingDefaults","MenuDefaults","triggerRef","items","isOpen","onClose","ariaLabel","otherProps","container","useTheme","handleOpenChange","jsx","Popover","AriaMenu","styles","onClick","isDisabled","href","icon","label","itemProps","index","jsxs","AriaMenuItem"],"mappings":";;;;;;;;AAMO,SAASA,EAAKC,GAAqB;AACxC,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAY,GAC3D;AAAA,IACJ,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,IACDR,GACE,EAAE,WAAAS,EAAA,IAAcC,EAAA,GAEhBC,IAAmB,CAACN,MAAoB;AAC5C,IAAKA,KACHC,IAAA;AAAA,EAEJ;AAEA,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,0BAA0BJ,EAAU;AAAA,MACpC,cAAcE;AAAA,MACd,QAAAN;AAAA,MACA,YAAAF;AAAA,MACA,WAAU;AAAA,MACV,QAAQ;AAAA,MACR,sBAAsB;AAAA,MAEtB,UAAA,gBAAAS,EAACE,KAAS,SAAAR,GAAkB,cAAYC,GAAW,WAAWQ,EAAO,MAAO,GAAGP,GAC5E,UAAAJ,GAAO,IAAI,CAAC,EAAE,SAAAY,GAAS,YAAAC,GAAY,MAAAC,GAAM,MAAAC,GAAM,OAAAC,GAAO,GAAGC,EAAA,GAAaC,MACrE,gBAAAC;AAAA,QAACC;AAAAA,QAAA;AAAA,UAEC,UAAU,MAAM;AACd,YAAAR,EAAA;AAAA,UACF;AAAA,UACA,YAAAC;AAAA,UACA,MAAAC;AAAA,UACA,WAAWH,EAAO;AAAA,UACjB,GAAGM;AAAA,UAEH,UAAA;AAAA,YAAAF,KAAQ,gBAAAP,EAAC,OAAA,EAAI,WAAWG,EAAO,UAAW,UAAAI,GAAK;AAAA,YAC/CC;AAAA,UAAA;AAAA,QAAA;AAAA,QAVIE;AAAA,MAAA,CAYR,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,2 @@
+import { MultiSelectComboBoxProps } from './MultiSelectComboBoxTypes';
+export declare function MultiSelectComboBox({ className, description, errorMessage, id, inputRef: inputRefFromProps, isDisabled, isInvalid, isLoading, isRequired, label, name, onBlur, onChange, options, placeholder, value: selectedValues, shouldVisuallyHideLabel, }: MultiSelectComboBoxProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +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\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 internalInputRef = useRef<HTMLInputElement>(null)\n  const inputRef = useForkRef(inputRefFromProps, internalInputRef)\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 ref={inputRef} placeholder={placeholder} onBlur={onBlur} />\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}\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","internalInputRef","useRef","inputRef","useForkRef","selectedSet","useMemo","availableOptions","option","selectedOptions","items","handleSelectionChange","useCallback","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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"}

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

@@ -0,0 +1,16 @@
+const o = "_root_kyxn6_1", c = "_comboBoxField_kyxn6_5", s = "_icons_kyxn6_71", _ = "_popover_kyxn6_81", n = "_chips_kyxn6_130", t = {
+  root: o,
+  comboBoxField: c,
+  icons: s,
+  popover: _,
+  chips: n
+};
+export {
+  n as chips,
+  c as comboBoxField,
+  t as default,
+  s as icons,
+  _ as popover,
+  o as root
+};
+//# sourceMappingURL=MultiSelectComboBox.module.scss.js.map

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

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

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

@@ -0,0 +1,17 @@
+import { InputHTMLAttributes, Ref } from 'react';
+import { SharedFieldLayoutProps } from '../../FieldLayout/FieldLayoutTypes';
+export interface MultiSelectComboBoxOption {
+    label: string;
+    value: string;
+}
+export interface MultiSelectComboBoxProps extends SharedFieldLayoutProps, Pick<InputHTMLAttributes<HTMLInputElement>, 'className' | 'id' | 'name' | 'placeholder'> {
+    inputRef?: Ref<HTMLInputElement>;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    label: string;
+    options: MultiSelectComboBoxOption[];
+    value?: string[];
+    onChange?: (values: string[]) => void;
+    onBlur?: () => void;
+}

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

@@ -0,0 +1,3 @@
+import "./types/i18next.d.ts"
+export { MultiSelectComboBox } from './MultiSelectComboBox';
+export type { MultiSelectComboBoxProps, MultiSelectComboBoxOption, } from './MultiSelectComboBoxTypes';

package/dist/components/Common/index.d.ts

@@ -22,5 +22,6 @@ export { DocumentViewer } from './DocumentViewer';
 export { DatePickerField } from './Fields/DatePickerField';
 export { NumberInputField } from './Fields/NumberInputField';
 export { SwitchField } from './Fields/SwitchField';
+export { MultiSelectComboBoxField } from './Fields/MultiSelectComboBoxField';
 export { VisuallyHidden } from './VisuallyHidden';
 export { HamburgerMenu } from './HamburgerMenu';

package/dist/components/Company/AssignSignatory/CreateSignatory/Schema.d.ts

@@ -4,38 +4,12 @@ export declare const generateCreateSignatorySchema: (hasSsn?: boolean) => z.ZodO
     lastName: z.ZodString;
     email: z.ZodString;
     title: z.ZodString;
-    phone: z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>;
-    ssn: z.ZodEffects<z.ZodString, string, string>;
+    phone: z.ZodPipe<z.ZodString, z.ZodTransform<string, string>>;
+    ssn: z.ZodString;
     birthday: z.ZodDate;
     street1: z.ZodString;
     street2: z.ZodOptional<z.ZodString>;
     city: z.ZodString;
     state: z.ZodString;
-    zip: z.ZodEffects<z.ZodString, string, string>;
-}, "strip", z.ZodTypeAny, {
-    ssn: string;
-    title: string;
-    email: string;
-    firstName: string;
-    lastName: string;
-    phone: string;
-    street1: string;
-    city: string;
-    state: string;
-    zip: string;
-    birthday: Date;
-    street2?: string | undefined;
-}, {
-    ssn: string;
-    title: string;
-    email: string;
-    firstName: string;
-    lastName: string;
-    phone: string;
-    street1: string;
-    city: string;
-    state: string;
-    zip: string;
-    birthday: Date;
-    street2?: string | undefined;
-}>;
+    zip: z.ZodString;
+}, z.core.$strip>;

package/dist/components/Company/AssignSignatory/InviteSignatory/InviteSignatoryForm.d.ts

@@ -1,34 +1,10 @@
 import { z } from 'zod';
-export declare const InviteSignatorySchema: z.ZodEffects<z.ZodObject<{
+export declare const InviteSignatorySchema: z.ZodObject<{
     firstName: z.ZodString;
     lastName: z.ZodString;
     email: z.ZodString;
     confirmEmail: z.ZodString;
     title: z.ZodString;
-}, "strip", z.ZodTypeAny, {
-    title: string;
-    email: string;
-    firstName: string;
-    lastName: string;
-    confirmEmail: string;
-}, {
-    title: string;
-    email: string;
-    firstName: string;
-    lastName: string;
-    confirmEmail: string;
-}>, {
-    title: string;
-    email: string;
-    firstName: string;
-    lastName: string;
-    confirmEmail: string;
-}, {
-    title: string;
-    email: string;
-    firstName: string;
-    lastName: string;
-    confirmEmail: string;
-}>;
+}, z.core.$strip>;
 export type InviteSignatoryInputs = z.infer<typeof InviteSignatorySchema>;
 export declare const InviteSignatoryForm: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Company/BankAccount/BankAccountForm/Form.d.ts

@@ -2,12 +2,6 @@ import { z } from 'zod';
 export declare const BankAccountFormSchema: z.ZodObject<{
     routingNumber: z.ZodString;
     accountNumber: z.ZodString;
-}, "strip", z.ZodTypeAny, {
-    routingNumber: string;
-    accountNumber: string;
-}, {
-    routingNumber: string;
-    accountNumber: string;
-}>;
+}, z.core.$strip>;
 export type BankAccountFormInputs = z.infer<typeof BankAccountFormSchema>;
 export declare function Form(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Company/BankAccount/BankAccountVerify/Form.d.ts

@@ -2,12 +2,6 @@ import { z } from 'zod';
 export declare const BankAccountVerifySchema: z.ZodObject<{
     deposit1: z.ZodNumber;
     deposit2: z.ZodNumber;
-}, "strip", z.ZodTypeAny, {
-    deposit1: number;
-    deposit2: number;
-}, {
-    deposit1: number;
-    deposit2: number;
-}>;
+}, z.core.$strip>;
 export type BankAccountVerifyInputs = z.infer<typeof BankAccountVerifySchema>;
 export declare function Form(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Company/FederalTaxes/useFederalTaxes.d.ts

@@ -3,20 +3,14 @@ import { FederalTaxDetails } from '@gusto/embedded-api/models/components/federal
 import { RequireAtLeastOne } from '../../../types/Helpers';
 export declare const FederalTaxFormSchema: z.ZodObject<{
     federalEin: z.ZodOptional<z.ZodString>;
-    taxPayerType: z.ZodOptional<z.ZodEnum<[string, ...string[]]>>;
-    filingForm: z.ZodOptional<z.ZodEnum<[string, ...string[]]>>;
+    taxPayerType: z.ZodOptional<z.ZodEnum<{
+        [x: string]: string;
+    }>>;
+    filingForm: z.ZodOptional<z.ZodEnum<{
+        [x: string]: string;
+    }>>;
     legalName: z.ZodString;
-}, "strip", z.ZodTypeAny, {
-    legalName: string;
-    taxPayerType?: string | undefined;
-    filingForm?: string | undefined;
-    federalEin?: string | undefined;
-}, {
-    legalName: string;
-    taxPayerType?: string | undefined;
-    filingForm?: string | undefined;
-    federalEin?: string | undefined;
-}>;
+}, z.core.$strip>;
 export type FederalTaxFormInputs = z.input<typeof FederalTaxFormSchema>;
 export type FederalTaxesDefaultValues = RequireAtLeastOne<{
     taxPayerType?: FederalTaxFormInputs['taxPayerType'];