@gusto/embedded-react-sdk 0.48.3 → 0.49.0

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

@@ -1,91 +1,98 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useMemo as M } from "react";
-import { NumberField as O, Group as P } from "react-aria-components";
-import { useFieldIds as k } from "../hooks/useFieldIds.js";
-import { FieldLayout as z } from "../../FieldLayout/FieldLayout.js";
-import { useLocale as A } from "../../../../contexts/LocaleProvider/useLocale.js";
-import { Input as C } from "../Input/Input.js";
-function Y({
-  name: y,
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+import { NumberField as P, Group as k } from "react-aria-components";
+import { useFieldIds as z } from "../hooks/useFieldIds.js";
+import { FieldLayout as A } from "../../FieldLayout/FieldLayout.js";
+import { useLocale as H } from "../../../../contexts/LocaleProvider/useLocale.js";
+import { Input as J } from "../Input/Input.js";
+function _({
+  name: f,
   format: r,
-  inputRef: p,
-  id: b,
-  value: f,
-  description: i,
-  errorMessage: u,
-  isRequired: m,
-  placeholder: I,
-  isInvalid: F,
-  isDisabled: l,
-  onChange: h,
-  onBlur: g,
-  label: N,
-  min: t,
-  max: n,
-  shouldVisuallyHideLabel: v,
-  adornmentStart: D,
-  adornmentEnd: w,
-  className: x,
-  maximumFractionDigits: B,
-  minimumFractionDigits: E,
-  ...a
+  inputRef: I,
+  id: h,
+  value: F,
+  description: u,
+  errorMessage: l,
+  isRequired: i,
+  placeholder: g,
+  isInvalid: N,
+  isDisabled: a,
+  onChange: v,
+  onBlur: T,
+  onInputChange: w,
+  label: B,
+  min: o,
+  max: c,
+  shouldVisuallyHideLabel: E,
+  adornmentStart: L,
+  adornmentEnd: S,
+  className: V,
+  maximumFractionDigits: m,
+  minimumFractionDigits: d,
+  ...s
 }) {
-  const { locale: s, currency: o } = A(), { inputId: d, errorMessageId: L, descriptionId: S, ariaDescribedBy: T } = k({
-    inputId: b,
-    errorMessage: u,
-    description: i
-  }), V = typeof t == "string" ? Number(t) : t, j = typeof n == "string" ? Number(n) : n, G = M(() => new Intl.NumberFormat(s, {
+  const { locale: y, currency: n } = H(), { inputId: p, errorMessageId: j, descriptionId: x, ariaDescribedBy: C } = z({
+    inputId: h,
+    errorMessage: l,
+    description: u
+  }), D = typeof o == "string" ? Number(o) : o, G = typeof c == "string" ? Number(c) : c, M = b(
+    () => ({
+      style: "decimal",
+      minimumFractionDigits: r === "currency" ? 2 : d,
+      maximumFractionDigits: r === "currency" ? 2 : m,
+      currency: n,
+      currencyDisplay: "symbol"
+    }),
+    [r, d, m, n]
+  ), O = b(() => new Intl.NumberFormat(y, {
     style: "currency",
-    currency: o
-  }).formatToParts(0).find((c) => c.type === "currency")?.value, [o, s]);
-  return /* @__PURE__ */ e(
-    z,
+    currency: n
+  }).formatToParts(0).find((e) => e.type === "currency")?.value, [n, y]);
+  return /* @__PURE__ */ t(
+    A,
     {
-      label: N,
-      description: i,
-      errorMessage: u,
-      isRequired: m,
-      htmlFor: d,
-      errorMessageId: L,
-      descriptionId: S,
-      shouldVisuallyHideLabel: v,
-      className: x,
+      label: B,
+      description: u,
+      errorMessage: l,
+      isRequired: i,
+      htmlFor: p,
+      errorMessageId: j,
+      descriptionId: x,
+      shouldVisuallyHideLabel: E,
+      className: V,
       withErrorIcon: !1,
-      ...a,
-      children: /* @__PURE__ */ e(
-        O,
+      ...s,
+      children: /* @__PURE__ */ t(
+        P,
         {
-          value: f,
-          name: y,
-          formatOptions: {
-            style: "decimal",
-            minimumFractionDigits: r === "currency" ? 2 : E,
-            maximumFractionDigits: r === "currency" ? 2 : B,
-            currency: o,
-            currencyDisplay: "symbol"
-          },
-          isInvalid: F,
-          isDisabled: l,
-          isRequired: m,
+          value: F,
+          name: f,
+          formatOptions: M,
+          isInvalid: N,
+          isDisabled: a,
+          isRequired: i,
           validationBehavior: "aria",
-          onChange: h,
-          onBlur: g,
+          onChange: v,
+          onBlur: T,
           "aria-labelledby": " ",
-          minValue: V,
-          maxValue: j,
-          ...a,
-          children: /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
-            C,
+          minValue: D,
+          maxValue: G,
+          ...s,
+          children: /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(
+            J,
             {
-              adornmentStart: D || (r === "currency" ? G : null),
-              adornmentEnd: w || (r === "percent" ? "%" : null),
-              id: d,
-              inputRef: p,
-              placeholder: I,
-              "aria-describedby": T,
-              isDisabled: l,
-              onFocus: (c) => {
-                c.currentTarget.select();
+              adornmentStart: L || (r === "currency" ? O : null),
+              adornmentEnd: S || (r === "percent" ? "%" : null),
+              id: p,
+              inputRef: I,
+              placeholder: g,
+              "aria-describedby": C,
+              isDisabled: a,
+              onChange: (e) => {
+                w?.(e.currentTarget.value);
+              },
+              onFocus: (e) => {
+                e.currentTarget.select();
               }
             }
           ) })
@@ -95,6 +102,6 @@ function Y({
   );
 }
 export {
-  Y as NumberInput
+  _ as NumberInput
 };
 //# sourceMappingURL=NumberInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../../../src/components/Common/UI/NumberInput/NumberInput.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Group, NumberField as AriaNumberField } from 'react-aria-components'\nimport { Input } from '../Input'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport type { NumberInputProps } from './NumberInputTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\n/**\n * Renders a numeric input with locale-aware formatting for currency, decimal, or percent values.\n *\n * @param props - The {@link NumberInputProps} controlling the input's label, value, format, and validation state.\n * @returns The rendered number input field.\n * @internal\n */\nexport function NumberInput({\n  name,\n  format,\n  inputRef,\n  id,\n  value,\n  description,\n  errorMessage,\n  isRequired,\n  placeholder,\n  isInvalid,\n  isDisabled,\n  onChange,\n  onBlur,\n  label,\n  min,\n  max,\n  shouldVisuallyHideLabel,\n  adornmentStart,\n  adornmentEnd,\n  className,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  ...props\n}: NumberInputProps) {\n  const { locale, currency } = useLocale()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const minValue = typeof min === 'string' ? Number(min) : min\n  const maxValue = typeof max === 'string' ? Number(max) : max\n\n  const currencySymbol = useMemo(() => {\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n    })\n      .formatToParts(0)\n      .find(part => part.type === 'currency')?.value\n  }, [currency, locale])\n\n  return (\n    <FieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={className}\n      withErrorIcon={false}\n      {...props}\n    >\n      <AriaNumberField\n        value={value}\n        name={name}\n        formatOptions={{\n          style: 'decimal',\n          minimumFractionDigits: format === 'currency' ? 2 : minimumFractionDigits,\n          maximumFractionDigits: format === 'currency' ? 2 : maximumFractionDigits,\n          currency,\n          currencyDisplay: 'symbol',\n        }}\n        isInvalid={isInvalid}\n        isDisabled={isDisabled}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        onChange={onChange}\n        onBlur={onBlur}\n        // This is a hack to silence an unnecessary react-aria warning. The FieldLayout component\n        // already associates the label and input with htmlFor + ID. If we include a label id here,\n        // the label will get read twice by assistive tech. This evaluates to an empty string which\n        // does not get associated with any elements and does not get read.\n        aria-labelledby=\" \"\n        minValue={minValue}\n        maxValue={maxValue}\n        {...props}\n      >\n        <Group>\n          <Input\n            adornmentStart={adornmentStart || (format === 'currency' ? currencySymbol : null)}\n            adornmentEnd={adornmentEnd || (format === 'percent' ? '%' : null)}\n            id={inputId}\n            inputRef={inputRef}\n            placeholder={placeholder}\n            aria-describedby={ariaDescribedBy}\n            isDisabled={isDisabled}\n            // Select the existing value on focus so users can overwrite the\n            // formatted placeholder (e.g. \"0.00\") by typing instead of having\n            // to clear the field first.\n            onFocus={event => {\n              event.currentTarget.select()\n            }}\n          />\n        </Group>\n      </AriaNumberField>\n    </FieldLayout>\n  )\n}\n"],"names":["NumberInput","name","format","inputRef","id","value","description","errorMessage","isRequired","placeholder","isInvalid","isDisabled","onChange","onBlur","label","min","max","shouldVisuallyHideLabel","adornmentStart","adornmentEnd","className","maximumFractionDigits","minimumFractionDigits","props","locale","currency","useLocale","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","minValue","maxValue","currencySymbol","useMemo","part","jsx","FieldLayout","AriaNumberField","Group","Input","event"],"mappings":";;;;;;;AAeO,SAASA,EAAY;AAAA,EAC1B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,EAAA,IAAaC,EAAA,GACvB,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAAS3B;AAAA,IACT,cAAAG;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEK0B,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GACnDkB,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GAEnDkB,IAAiBC,EAAQ,MACtB,IAAI,KAAK,aAAaX,GAAQ;AAAA,IACnC,OAAO;AAAA,IACP,UAAAC;AAAA,EAAA,CACD,EACE,cAAc,CAAC,EACf,KAAK,CAAAW,MAAQA,EAAK,SAAS,UAAU,GAAG,OAC1C,CAACX,GAAUD,CAAM,CAAC;AAErB,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,aAAAR;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASmB;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAZ;AAAA,MACA,WAAAG;AAAA,MACA,eAAe;AAAA,MACd,GAAGG;AAAA,MAEJ,UAAA,gBAAAc;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,OAAAlC;AAAA,UACA,MAAAJ;AAAA,UACA,eAAe;AAAA,YACb,OAAO;AAAA,YACP,uBAAuBC,MAAW,aAAa,IAAIoB;AAAA,YACnD,uBAAuBpB,MAAW,aAAa,IAAImB;AAAA,YACnD,UAAAI;AAAA,YACA,iBAAiB;AAAA,UAAA;AAAA,UAEnB,WAAAf;AAAA,UACA,YAAAC;AAAA,UACA,YAAAH;AAAA,UACA,oBAAmB;AAAA,UACnB,UAAAI;AAAA,UACA,QAAAC;AAAA,UAKA,mBAAgB;AAAA,UAChB,UAAAmB;AAAA,UACA,UAAAC;AAAA,UACC,GAAGV;AAAA,UAEJ,4BAACiB,GAAA,EACC,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,gBAAgBvB,MAAmBhB,MAAW,aAAagC,IAAiB;AAAA,cAC5E,cAAcf,MAAiBjB,MAAW,YAAY,MAAM;AAAA,cAC5D,IAAIyB;AAAA,cACJ,UAAAxB;AAAA,cACA,aAAAM;AAAA,cACA,oBAAkBqB;AAAA,cAClB,YAAAnB;AAAA,cAIA,SAAS,CAAA+B,MAAS;AAChB,gBAAAA,EAAM,cAAc,OAAA;AAAA,cACtB;AAAA,YAAA;AAAA,UAAA,EACF,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"NumberInput.js","sources":["../../../../../src/components/Common/UI/NumberInput/NumberInput.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Group, NumberField as AriaNumberField } from 'react-aria-components'\nimport { Input } from '../Input'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport type { NumberInputProps } from './NumberInputTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\n/**\n * Renders a numeric input with locale-aware formatting for currency, decimal, or percent values.\n *\n * @param props - The {@link NumberInputProps} controlling the input's label, value, format, and validation state.\n * @returns The rendered number input field.\n * @internal\n */\nexport function NumberInput({\n  name,\n  format,\n  inputRef,\n  id,\n  value,\n  description,\n  errorMessage,\n  isRequired,\n  placeholder,\n  isInvalid,\n  isDisabled,\n  onChange,\n  onBlur,\n  onInputChange,\n  label,\n  min,\n  max,\n  shouldVisuallyHideLabel,\n  adornmentStart,\n  adornmentEnd,\n  className,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  ...props\n}: NumberInputProps) {\n  const { locale, currency } = useLocale()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const minValue = typeof min === 'string' ? Number(min) : min\n  const maxValue = typeof max === 'string' ? Number(max) : max\n\n  const formatOptions = useMemo(\n    () => ({\n      style: 'decimal' as const,\n      minimumFractionDigits: format === 'currency' ? 2 : minimumFractionDigits,\n      maximumFractionDigits: format === 'currency' ? 2 : maximumFractionDigits,\n      currency,\n      currencyDisplay: 'symbol' as const,\n    }),\n    [format, minimumFractionDigits, maximumFractionDigits, currency],\n  )\n\n  const currencySymbol = useMemo(() => {\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency,\n    })\n      .formatToParts(0)\n      .find(part => part.type === 'currency')?.value\n  }, [currency, locale])\n\n  return (\n    <FieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={className}\n      withErrorIcon={false}\n      {...props}\n    >\n      <AriaNumberField\n        value={value}\n        name={name}\n        formatOptions={formatOptions}\n        isInvalid={isInvalid}\n        isDisabled={isDisabled}\n        isRequired={isRequired}\n        validationBehavior=\"aria\"\n        onChange={onChange}\n        onBlur={onBlur}\n        // This is a hack to silence an unnecessary react-aria warning. The FieldLayout component\n        // already associates the label and input with htmlFor + ID. If we include a label id here,\n        // the label will get read twice by assistive tech. This evaluates to an empty string which\n        // does not get associated with any elements and does not get read.\n        aria-labelledby=\" \"\n        minValue={minValue}\n        maxValue={maxValue}\n        {...props}\n      >\n        <Group>\n          <Input\n            adornmentStart={adornmentStart || (format === 'currency' ? currencySymbol : null)}\n            adornmentEnd={adornmentEnd || (format === 'percent' ? '%' : null)}\n            id={inputId}\n            inputRef={inputRef}\n            placeholder={placeholder}\n            aria-describedby={ariaDescribedBy}\n            isDisabled={isDisabled}\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              onInputChange?.(event.currentTarget.value)\n            }}\n            // Select the existing value on focus so users can overwrite the\n            // formatted placeholder (e.g. \"0.00\") by typing instead of having\n            // to clear the field first.\n            onFocus={event => {\n              event.currentTarget.select()\n            }}\n          />\n        </Group>\n      </AriaNumberField>\n    </FieldLayout>\n  )\n}\n"],"names":["NumberInput","name","format","inputRef","id","value","description","errorMessage","isRequired","placeholder","isInvalid","isDisabled","onChange","onBlur","onInputChange","label","min","max","shouldVisuallyHideLabel","adornmentStart","adornmentEnd","className","maximumFractionDigits","minimumFractionDigits","props","locale","currency","useLocale","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","minValue","maxValue","formatOptions","useMemo","currencySymbol","part","jsx","FieldLayout","AriaNumberField","Group","Input","event"],"mappings":";;;;;;;AAeO,SAASA,EAAY;AAAA,EAC1B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAM,EAAE,QAAAC,GAAQ,UAAAC,EAAA,IAAaC,EAAA,GACvB,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAAS5B;AAAA,IACT,cAAAG;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEK2B,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GACnDkB,IAAW,OAAOjB,KAAQ,WAAW,OAAOA,CAAG,IAAIA,GAEnDkB,IAAgBC;AAAA,IACpB,OAAO;AAAA,MACL,OAAO;AAAA,MACP,uBAAuBlC,MAAW,aAAa,IAAIqB;AAAA,MACnD,uBAAuBrB,MAAW,aAAa,IAAIoB;AAAA,MACnD,UAAAI;AAAA,MACA,iBAAiB;AAAA,IAAA;AAAA,IAEnB,CAACxB,GAAQqB,GAAuBD,GAAuBI,CAAQ;AAAA,EAAA,GAG3DW,IAAiBD,EAAQ,MACtB,IAAI,KAAK,aAAaX,GAAQ;AAAA,IACnC,OAAO;AAAA,IACP,UAAAC;AAAA,EAAA,CACD,EACE,cAAc,CAAC,EACf,KAAK,CAAAY,MAAQA,EAAK,SAAS,UAAU,GAAG,OAC1C,CAACZ,GAAUD,CAAM,CAAC;AAErB,SACE,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAzB;AAAA,MACA,aAAAT;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASoB;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAZ;AAAA,MACA,WAAAG;AAAA,MACA,eAAe;AAAA,MACd,GAAGG;AAAA,MAEJ,UAAA,gBAAAe;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,OAAApC;AAAA,UACA,MAAAJ;AAAA,UACA,eAAAkC;AAAA,UACA,WAAAzB;AAAA,UACA,YAAAC;AAAA,UACA,YAAAH;AAAA,UACA,oBAAmB;AAAA,UACnB,UAAAI;AAAA,UACA,QAAAC;AAAA,UAKA,mBAAgB;AAAA,UAChB,UAAAoB;AAAA,UACA,UAAAC;AAAA,UACC,GAAGV;AAAA,UAEJ,4BAACkB,GAAA,EACC,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,gBAAgBxB,MAAmBjB,MAAW,aAAamC,IAAiB;AAAA,cAC5E,cAAcjB,MAAiBlB,MAAW,YAAY,MAAM;AAAA,cAC5D,IAAI0B;AAAA,cACJ,UAAAzB;AAAA,cACA,aAAAM;AAAA,cACA,oBAAkBsB;AAAA,cAClB,YAAApB;AAAA,cACA,UAAU,CAACiC,MAA+C;AACxD,gBAAA9B,IAAgB8B,EAAM,cAAc,KAAK;AAAA,cAC3C;AAAA,cAIA,SAAS,CAAAA,MAAS;AAChB,gBAAAA,EAAM,cAAc,OAAA;AAAA,cACtB;AAAA,YAAA;AAAA,UAAA,EACF,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

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

@@ -37,6 +37,10 @@ export interface NumberInputProps extends SharedFieldLayoutProps, Pick<InputHTML
      * Handler for blur events
      */
     onBlur?: () => void;
+    /**
+     * Fires on every keystroke with the raw input string (pre-commit), unlike onChange which fires on blur/Enter.
+     */
+    onInputChange?: (value: string) => void;
     /**
      * Element to display at the start of the input
      */

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 n from "./ProgressBar.module.scss.js";
-import { Flex as p } from "../../Flex/Flex.js";
+import { Flex as n } from "../../Flex/Flex.js";
+import p from "./ProgressBar.module.scss.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(p, { flexDirection: "column", children: [
+  return /* @__PURE__ */ t(n, { flexDirection: "column", children: [
     o && /* @__PURE__ */ r(o, {}),
-    /* @__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 }) }) })
+    /* @__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 }) }) })
   ] });
 }
 export {

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

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as t } from "react/jsx-runtime";
 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 d from "classnames";
 import { useFieldIds as U } from "../hooks/useFieldIds.js";
 import o from "./Select.module.scss.js";
 import { FieldLayout as V } from "../../FieldLayout/FieldLayout.js";
@@ -12,17 +12,17 @@ import { useTheme as q } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
 const te = ({
   description: i,
-  errorMessage: n,
-  id: u,
-  isDisabled: f,
-  isInvalid: a,
-  isRequired: h,
+  errorMessage: a,
+  id: p,
+  isDisabled: u,
+  isInvalid: n,
+  isRequired: f,
   label: m,
-  onChange: S,
-  onBlur: v,
-  options: s,
-  placeholder: c,
-  value: l,
+  onChange: h,
+  onBlur: S,
+  options: c,
+  placeholder: v,
+  value: s,
   shouldVisuallyHideLabel: x,
   name: I,
   className: g,
@@ -30,51 +30,51 @@ const te = ({
   portalContainer: C,
   ...N
 }) => {
-  const { t: b } = K(), { container: y } = q(), { inputId: d, errorMessageId: L, descriptionId: w, ariaDescribedBy: A } = U({
-    inputId: u,
-    errorMessage: n,
+  const { t: b } = K(), { container: y } = q(), { inputId: l, errorMessageId: L, descriptionId: w, ariaDescribedBy: A } = U({
+    inputId: p,
+    errorMessage: a,
     description: i
-  }), F = M(() => s.map((e) => ({ name: e.label, id: e.value })), [s]);
+  }), F = M(() => c.map((e) => ({ name: e.label, id: e.value })), [c]);
   return /* @__PURE__ */ r(
     V,
     {
       label: m,
-      htmlFor: d,
-      errorMessage: n,
+      htmlFor: l,
+      errorMessage: a,
       errorMessageId: L,
       descriptionId: w,
-      isRequired: h,
+      isRequired: f,
       description: i,
       shouldVisuallyHideLabel: x,
-      className: p(o.root, "react-aria-CustomSelect", g),
+      className: d(o.root, "react-aria-CustomSelect", g),
       withErrorIcon: !1,
       ...N,
       children: /* @__PURE__ */ t(
         j,
         {
           "aria-label": m,
-          isDisabled: f,
-          isInvalid: a,
+          isDisabled: u,
+          isInvalid: n,
           onSelectionChange: (e) => {
-            e && S?.(e.toString());
+            e && h?.(e.toString());
           },
-          onBlur: v,
-          id: d,
-          selectedKey: l || null,
+          onBlur: S,
+          id: l,
+          selectedKey: s || null,
           "aria-describedby": A,
           name: I,
           children: [
             /* @__PURE__ */ t(D, { ref: B, children: [
-              /* @__PURE__ */ r(E, { children: ({ defaultChildren: e, isPlaceholder: T }) => T && c ? c : e }),
+              /* @__PURE__ */ r(E, { children: ({ defaultChildren: e, isPlaceholder: T }) => T ? v : e }),
               /* @__PURE__ */ t("div", { className: o.icons, "aria-hidden": "true", children: [
-                a && /* @__PURE__ */ r($, { fontSize: 16 }),
+                n && /* @__PURE__ */ r($, { fontSize: 16 }),
                 /* @__PURE__ */ r(_, { title: b("icons.selectArrow") })
               ] })
             ] }),
             /* @__PURE__ */ r(
               P,
               {
-                className: p(o.popover, "react-aria-Popover"),
+                className: d(o.popover, "react-aria-Popover"),
                 UNSTABLE_portalContainer: C ?? y.current ?? void 0,
                 maxHeight: 320,
                 children: /* @__PURE__ */ r(z, { items: F, children: (e) => /* @__PURE__ */ r(H, { children: e.name }, e.id) })

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\n/**\n * Renders a dropdown select with label, description, and error message support.\n *\n * @param props - The {@link SelectProps} controlling the select's label, options, and selected value.\n * @returns The rendered select field with its associated popover listbox.\n * @internal\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) : null}\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 ?? undefined}\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":";;;;;;;;;;;;AA2BO,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,WAAW;AAAA,gBAClE,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\n/**\n * Renders a dropdown select with label, description, and error message support.\n *\n * @param props - The {@link SelectProps} controlling the select's label, options, and selected value.\n * @returns The rendered select field with its associated popover listbox.\n * @internal\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) : null}\n        aria-describedby={ariaDescribedBy}\n        name={name}\n      >\n        <Button ref={inputRef}>\n          <SelectValue>\n            {({ defaultChildren, isPlaceholder }) => {\n              return isPlaceholder ? 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 ?? undefined}\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":";;;;;;;;;;;;AA2BO,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,IAAgB9B,IAAc6B,GAEzC;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,WAAW;AAAA,gBAClE,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;"}

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

@@ -49,9 +49,10 @@ export interface SelectProps extends SharedFieldLayoutProps, Pick<SelectHTMLAttr
      */
     options: SelectOption[];
     /**
-     * Placeholder text when no option is selected
+     * Placeholder text displayed when no option is selected.
+     * Required so empty dropdowns always communicate the action — pass an empty string only when a default value is guaranteed.
      */
-    placeholder?: string;
+    placeholder: string;
     /**
      * Currently selected value
      */

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

@@ -6,19 +6,20 @@ import { useTranslation as x } from "react-i18next";
 import s from "./Tabs.module.scss.js";
 import y from "../../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
 import { useComponentContext as D } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-function H({ tabs: n, selectedId: l, onSelectionChange: r, className: m, ...a }) {
-  const { t: c } = x("common"), { Select: p } = D(), t = h(null), f = !y({ ref: t }).includes("small"), o = n.find((e) => e.id === l), u = n.map((e) => ({
+function H({ tabs: l, selectedId: n, onSelectionChange: r, className: c, ...a }) {
+  const { t: m } = x("common"), { Select: p } = D(), t = h(null), f = !y({ ref: t }).includes("small"), o = l.find((e) => e.id === n), u = l.map((e) => ({
     value: e.id,
     label: typeof e.label == "string" ? e.label : e.id
   }));
-  return /* @__PURE__ */ i("div", { ref: t, className: N(s.root, m), children: f ? /* @__PURE__ */ d(b, { children: [
+  return /* @__PURE__ */ i("div", { ref: t, className: N(s.root, c), children: f ? /* @__PURE__ */ d(b, { children: [
     /* @__PURE__ */ i("div", { className: s.dropdown, children: /* @__PURE__ */ i(
       p,
       {
-        label: a["aria-label"] || c("labels.tabNavigation"),
+        label: a["aria-label"] || m("labels.tabNavigation"),
+        placeholder: "",
         shouldVisuallyHideLabel: !0,
         options: u,
-        value: l,
+        value: n,
         onChange: r
       }
     ) }),
@@ -36,14 +37,14 @@ function H({ tabs: n, selectedId: l, onSelectionChange: r, className: m, ...a })
     T,
     {
       className: s.tabsContainer,
-      selectedKey: l,
+      selectedKey: n,
       onSelectionChange: (e) => {
         e && r(e.toString());
       },
       ...a,
       children: [
-        /* @__PURE__ */ i(v, { children: n.map((e) => /* @__PURE__ */ i(g, { id: e.id, isDisabled: e.isDisabled, children: e.label }, e.id)) }),
-        n.map((e) => /* @__PURE__ */ i(C, { id: e.id, children: e.content }, e.id))
+        /* @__PURE__ */ i(v, { children: l.map((e) => /* @__PURE__ */ i(g, { id: e.id, isDisabled: e.isDisabled, children: e.label }, e.id)) }),
+        l.map((e) => /* @__PURE__ */ i(C, { id: e.id, children: e.content }, e.id))
       ]
     }
   ) });

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Common/UI/Tabs/Tabs.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tab as AriaTab,\n} from 'react-aria-components'\nimport classNames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { type TabsProps } from './TabsTypes'\nimport styles from './Tabs.module.scss'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n/**\n * Accessible controlled tab navigation that responsively adapts to container width.\n *\n * @remarks\n * At or above the small breakpoint (640px) the component renders horizontal tabs.\n * Below that breakpoint it falls back to a dropdown select to avoid horizontal\n * scrolling without positional meaning.\n *\n * @param props - Tabs configuration; see {@link TabsProps}.\n * @returns The rendered tabs with the selected panel.\n * @public\n */\nexport function Tabs({ tabs, selectedId, onSelectionChange, className, ...ariaProps }: TabsProps) {\n  const { t } = useTranslation('common')\n  const { Select } = useComponentContext()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const shouldUseDropdown = !breakpoints.includes('small')\n\n  const selectedTab = tabs.find(tab => tab.id === selectedId)\n\n  const selectOptions = tabs.map(tab => ({\n    value: tab.id,\n    label: typeof tab.label === 'string' ? tab.label : tab.id,\n  }))\n\n  return (\n    <div ref={containerRef} className={classNames(styles.root, className)}>\n      {!shouldUseDropdown ? (\n        <AriaTabs\n          className={styles.tabsContainer}\n          selectedKey={selectedId}\n          onSelectionChange={key => {\n            if (key) {\n              onSelectionChange(key.toString())\n            }\n          }}\n          {...ariaProps}\n        >\n          <AriaTabList>\n            {tabs.map(tab => (\n              <AriaTab key={tab.id} id={tab.id} isDisabled={tab.isDisabled}>\n                {tab.label}\n              </AriaTab>\n            ))}\n          </AriaTabList>\n\n          {tabs.map(tab => (\n            <AriaTabPanel key={tab.id} id={tab.id}>\n              {tab.content}\n            </AriaTabPanel>\n          ))}\n        </AriaTabs>\n      ) : (\n        <>\n          <div className={styles.dropdown}>\n            <Select\n              label={ariaProps['aria-label'] || t('labels.tabNavigation')}\n              shouldVisuallyHideLabel={true}\n              options={selectOptions}\n              value={selectedId}\n              onChange={onSelectionChange}\n            />\n          </div>\n\n          {selectedTab && (\n            <div\n              key={selectedTab.id}\n              role=\"tabpanel\"\n              id={`panel-${selectedTab.id}`}\n              aria-labelledby={selectedTab.id}\n            >\n              {selectedTab.content}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n"],"names":["Tabs","tabs","selectedId","onSelectionChange","className","ariaProps","t","useTranslation","Select","useComponentContext","containerRef","useRef","shouldUseDropdown","useContainerBreakpoints","selectedTab","tab","selectOptions","jsx","classNames","styles","jsxs","Fragment","AriaTabs","key","AriaTabList","AriaTab","AriaTabPanel"],"mappings":";;;;;;;;AA0BO,SAASA,EAAK,EAAE,MAAAC,GAAM,YAAAC,GAAY,mBAAAC,GAAmB,WAAAC,GAAW,GAAGC,KAAwB;AAChG,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/B,EAAE,QAAAC,EAAA,IAAWC,EAAA,GACbC,IAAeC,EAAuB,IAAI,GAE1CC,IAAoB,CADNC,EAAwB,EAAE,KAAKH,GAAc,EAC1B,SAAS,OAAO,GAEjDI,IAAcb,EAAK,KAAK,CAAAc,MAAOA,EAAI,OAAOb,CAAU,GAEpDc,IAAgBf,EAAK,IAAI,CAAAc,OAAQ;AAAA,IACrC,OAAOA,EAAI;AAAA,IACX,OAAO,OAAOA,EAAI,SAAU,WAAWA,EAAI,QAAQA,EAAI;AAAA,EAAA,EACvD;AAEF,SACE,gBAAAE,EAAC,OAAA,EAAI,KAAKP,GAAc,WAAWQ,EAAWC,EAAO,MAAMf,CAAS,GACjE,UAACQ,IA0BA,gBAAAQ,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAWE,EAAO,UACrB,UAAA,gBAAAF;AAAA,MAACT;AAAA,MAAA;AAAA,QACC,OAAOH,EAAU,YAAY,KAAKC,EAAE,sBAAsB;AAAA,QAC1D,yBAAyB;AAAA,QACzB,SAASU;AAAA,QACT,OAAOd;AAAA,QACP,UAAUC;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,IAECW,KACC,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,IAAI,SAASH,EAAY,EAAE;AAAA,QAC3B,mBAAiBA,EAAY;AAAA,QAE5B,UAAAA,EAAY;AAAA,MAAA;AAAA,MALRA,EAAY;AAAA,IAAA;AAAA,EAMnB,EAAA,CAEJ,IA9CA,gBAAAM;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,WAAWH,EAAO;AAAA,MAClB,aAAajB;AAAA,MACb,mBAAmB,CAAAqB,MAAO;AACxB,QAAIA,KACFpB,EAAkBoB,EAAI,UAAU;AAAA,MAEpC;AAAA,MACC,GAAGlB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAACO,KACE,UAAAvB,EAAK,IAAI,CAAAc,MACR,gBAAAE,EAACQ,KAAqB,IAAIV,EAAI,IAAI,YAAYA,EAAI,YAC/C,UAAAA,EAAI,SADOA,EAAI,EAElB,CACD,GACH;AAAA,QAECd,EAAK,IAAI,CAAAc,MACR,gBAAAE,EAACS,GAAA,EAA0B,IAAIX,EAAI,IAChC,UAAAA,EAAI,QAAA,GADYA,EAAI,EAEvB,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAwBH,CAEJ;AAEJ;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Common/UI/Tabs/Tabs.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tab as AriaTab,\n} from 'react-aria-components'\nimport classNames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { type TabsProps } from './TabsTypes'\nimport styles from './Tabs.module.scss'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n/**\n * Accessible controlled tab navigation that responsively adapts to container width.\n *\n * @remarks\n * At or above the small breakpoint (640px) the component renders horizontal tabs.\n * Below that breakpoint it falls back to a dropdown select to avoid horizontal\n * scrolling without positional meaning.\n *\n * @param props - Tabs configuration; see {@link TabsProps}.\n * @returns The rendered tabs with the selected panel.\n * @public\n */\nexport function Tabs({ tabs, selectedId, onSelectionChange, className, ...ariaProps }: TabsProps) {\n  const { t } = useTranslation('common')\n  const { Select } = useComponentContext()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const shouldUseDropdown = !breakpoints.includes('small')\n\n  const selectedTab = tabs.find(tab => tab.id === selectedId)\n\n  const selectOptions = tabs.map(tab => ({\n    value: tab.id,\n    label: typeof tab.label === 'string' ? tab.label : tab.id,\n  }))\n\n  return (\n    <div ref={containerRef} className={classNames(styles.root, className)}>\n      {!shouldUseDropdown ? (\n        <AriaTabs\n          className={styles.tabsContainer}\n          selectedKey={selectedId}\n          onSelectionChange={key => {\n            if (key) {\n              onSelectionChange(key.toString())\n            }\n          }}\n          {...ariaProps}\n        >\n          <AriaTabList>\n            {tabs.map(tab => (\n              <AriaTab key={tab.id} id={tab.id} isDisabled={tab.isDisabled}>\n                {tab.label}\n              </AriaTab>\n            ))}\n          </AriaTabList>\n\n          {tabs.map(tab => (\n            <AriaTabPanel key={tab.id} id={tab.id}>\n              {tab.content}\n            </AriaTabPanel>\n          ))}\n        </AriaTabs>\n      ) : (\n        <>\n          <div className={styles.dropdown}>\n            <Select\n              label={ariaProps['aria-label'] || t('labels.tabNavigation')}\n              placeholder=\"\"\n              shouldVisuallyHideLabel={true}\n              options={selectOptions}\n              value={selectedId}\n              onChange={onSelectionChange}\n            />\n          </div>\n\n          {selectedTab && (\n            <div\n              key={selectedTab.id}\n              role=\"tabpanel\"\n              id={`panel-${selectedTab.id}`}\n              aria-labelledby={selectedTab.id}\n            >\n              {selectedTab.content}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n"],"names":["Tabs","tabs","selectedId","onSelectionChange","className","ariaProps","t","useTranslation","Select","useComponentContext","containerRef","useRef","shouldUseDropdown","useContainerBreakpoints","selectedTab","tab","selectOptions","jsx","classNames","styles","jsxs","Fragment","AriaTabs","key","AriaTabList","AriaTab","AriaTabPanel"],"mappings":";;;;;;;;AA0BO,SAASA,EAAK,EAAE,MAAAC,GAAM,YAAAC,GAAY,mBAAAC,GAAmB,WAAAC,GAAW,GAAGC,KAAwB;AAChG,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/B,EAAE,QAAAC,EAAA,IAAWC,EAAA,GACbC,IAAeC,EAAuB,IAAI,GAE1CC,IAAoB,CADNC,EAAwB,EAAE,KAAKH,GAAc,EAC1B,SAAS,OAAO,GAEjDI,IAAcb,EAAK,KAAK,CAAAc,MAAOA,EAAI,OAAOb,CAAU,GAEpDc,IAAgBf,EAAK,IAAI,CAAAc,OAAQ;AAAA,IACrC,OAAOA,EAAI;AAAA,IACX,OAAO,OAAOA,EAAI,SAAU,WAAWA,EAAI,QAAQA,EAAI;AAAA,EAAA,EACvD;AAEF,SACE,gBAAAE,EAAC,OAAA,EAAI,KAAKP,GAAc,WAAWQ,EAAWC,EAAO,MAAMf,CAAS,GACjE,UAACQ,IA0BA,gBAAAQ,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAWE,EAAO,UACrB,UAAA,gBAAAF;AAAA,MAACT;AAAA,MAAA;AAAA,QACC,OAAOH,EAAU,YAAY,KAAKC,EAAE,sBAAsB;AAAA,QAC1D,aAAY;AAAA,QACZ,yBAAyB;AAAA,QACzB,SAASU;AAAA,QACT,OAAOd;AAAA,QACP,UAAUC;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,IAECW,KACC,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,IAAI,SAASH,EAAY,EAAE;AAAA,QAC3B,mBAAiBA,EAAY;AAAA,QAE5B,UAAAA,EAAY;AAAA,MAAA;AAAA,MALRA,EAAY;AAAA,IAAA;AAAA,EAMnB,EAAA,CAEJ,IA/CA,gBAAAM;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,WAAWH,EAAO;AAAA,MAClB,aAAajB;AAAA,MACb,mBAAmB,CAAAqB,MAAO;AACxB,QAAIA,KACFpB,EAAkBoB,EAAI,UAAU;AAAA,MAEpC;AAAA,MACC,GAAGlB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAACO,KACE,UAAAvB,EAAK,IAAI,CAAAc,MACR,gBAAAE,EAACQ,KAAqB,IAAIV,EAAI,IAAI,YAAYA,EAAI,YAC/C,UAAAA,EAAI,SADOA,EAAI,EAElB,CACD,GACH;AAAA,QAECd,EAAK,IAAI,CAAAc,MACR,gBAAAE,EAACS,GAAA,EAA0B,IAAIX,EAAI,IAChC,UAAAA,EAAI,QAAA,GADYA,EAAI,EAEvB,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAyBH,CAEJ;AAEJ;"}

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

@@ -25,6 +25,7 @@ export interface AssignSignatoryProps extends BaseComponentInterface<'Company.As
  * @remarks
  * For more granular control, use `CompanyOnboarding.CreateSignatory` or `CompanyOnboarding.InviteSignatory` directly.
  *
+ * @events
  * | Event | Description | Data |
  * | ----- | ----------- | ---- |
  * | `company/signatory/assignSignatory/modeUpdated` | The user switched between create and invite modes | The selected mode string (`'createSignatory'` or `'inviteSignatory'`) |

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

@@ -1 +1 @@
-{"version":3,"file":"AssignSignatory.js","sources":["../../../../src/components/Company/AssignSignatory/AssignSignatory.tsx"],"sourcesContent":["import { z } from 'zod'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { SignatoryForm } from './SignatoryForm'\nimport { Head } from './Head'\nimport { AssignSignatorySelection } from './AssignSignatorySelection'\nimport type { AssignSignatoryDefaultValues } from './useAssignSignatory'\nimport { AssignSignatoryProvider, SignatoryAssignmentMode } from './useAssignSignatory'\nimport { companyEvents } from '@/shared/constants'\nimport { Flex } from '@/components/Common'\nimport { useBase, BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\n\n/**\n * Props for {@link AssignSignatory}.\n *\n * @public\n */\nexport interface AssignSignatoryProps extends BaseComponentInterface<'Company.AssignSignatory'> {\n  /** Identifier of the company the signatory is being assigned to. */\n  companyId: string\n  /**\n   * Identifier of an existing signatory. When set and matching the current signatory,\n   * the create form pre-populates with their information for editing.\n   */\n  signatoryId?: string\n  /**\n   * Default values for the underlying create and invite forms. Provide a `create` object,\n   * an `invite` object, or both — see {@link AssignSignatoryDefaultValues}.\n   */\n  defaultValues?: AssignSignatoryDefaultValues\n}\n\n/**\n * Lets a user either create a new signatory with full details or invite someone else to become the signatory.\n *\n * @remarks\n * For more granular control, use `CompanyOnboarding.CreateSignatory` or `CompanyOnboarding.InviteSignatory` directly.\n *\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `company/signatory/assignSignatory/modeUpdated` | The user switched between create and invite modes | The selected mode string (`'createSignatory'` or `'inviteSignatory'`) |\n * | `company/signatory/assignSignatory/done` | The signatory assignment process completed | — |\n * | `company/signatory/created` | A new signatory was created (create mode) | Response from the create signatory API request |\n * | `company/signatory/updated` | An existing signatory was updated (create mode) | Response from the update signatory API request |\n * | `company/signatory/invited` | A signatory invitation was sent (invite mode) | Response from the invite signatory API request |\n *\n * @param props - {@link AssignSignatoryProps}.\n * @returns The rendered signatory assignment surface.\n * @public\n */\nexport function AssignSignatory(props: AssignSignatoryProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst AssignSignatorySelectionSchema = z.object({\n  signatoryAssignmentMode: z.union([\n    z.literal(SignatoryAssignmentMode.createSignatory),\n    z.literal(SignatoryAssignmentMode.inviteSignatory),\n  ]),\n})\n\ntype AssignSignatorySelectionInputs = z.infer<typeof AssignSignatorySelectionSchema>\n\nfunction Root({\n  companyId,\n  signatoryId,\n  defaultValues,\n  className,\n  children,\n  dictionary,\n}: AssignSignatoryProps) {\n  useI18n('Company.AssignSignatory')\n  useComponentDictionary('Company.AssignSignatory', dictionary)\n\n  const { onEvent } = useBase()\n\n  const formMethods = useForm<AssignSignatorySelectionInputs>({\n    resolver: zodResolver(AssignSignatorySelectionSchema),\n    defaultValues: {\n      signatoryAssignmentMode: SignatoryAssignmentMode.createSignatory,\n    },\n  })\n\n  const onSignatoryAssignmentModeChange = (mode: string) => {\n    onEvent(companyEvents.COMPANY_ASSIGN_SIGNATORY_MODE_UPDATED, mode)\n  }\n\n  const onSignatoryFormEvent: BaseComponentInterface['onEvent'] = (event, data) => {\n    if (event === companyEvents.COMPANY_CREATE_SIGNATORY_DONE) {\n      onEvent(companyEvents.COMPANY_ASSIGN_SIGNATORY_DONE)\n    } else if (event === companyEvents.COMPANY_INVITE_SIGNATORY_DONE) {\n      onEvent(companyEvents.COMPANY_ASSIGN_SIGNATORY_DONE)\n    } else {\n      onEvent(event, data)\n    }\n  }\n\n  return (\n    <section className={className}>\n      <AssignSignatoryProvider\n        value={{\n          companyId,\n          signatoryId,\n          defaultValues,\n          onSignatoryAssignmentModeChange,\n          onSignatoryFormEvent,\n        }}\n      >\n        <Flex flexDirection=\"column\" gap={32}>\n          <FormProvider {...formMethods}>\n            {children ? (\n              children\n            ) : (\n              <>\n                <Head />\n                <AssignSignatorySelection />\n                <SignatoryForm />\n              </>\n            )}\n          </FormProvider>\n        </Flex>\n      </AssignSignatoryProvider>\n    </section>\n  )\n}\n"],"names":["AssignSignatory","props","jsx","BaseComponent","Root","AssignSignatorySelectionSchema","z","SignatoryAssignmentMode","companyId","signatoryId","defaultValues","className","children","dictionary","useI18n","useComponentDictionary","onEvent","useBase","formMethods","useForm","zodResolver","AssignSignatoryProvider","mode","companyEvents","event","data","Flex","FormProvider","jsxs","Fragment","Head","AssignSignatorySelection","SignatoryForm"],"mappings":";;;;;;;;;;;;;;;;AAmDO,SAASA,EAAgBC,GAA6B;AAC3D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMI,IAAiCC,EAAE,OAAO;AAAA,EAC9C,yBAAyBA,EAAE,MAAM;AAAA,IAC/BA,EAAE,QAAQC,EAAwB,eAAe;AAAA,IACjDD,EAAE,QAAQC,EAAwB,eAAe;AAAA,EAAA,CAClD;AACH,CAAC;AAID,SAASH,EAAK;AAAA,EACZ,WAAAI;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,GAAyB;AACvB,EAAAC,EAAQ,yBAAyB,GACjCC,EAAuB,2BAA2BF,CAAU;AAE5D,QAAM,EAAE,SAAAG,EAAA,IAAYC,EAAA,GAEdC,IAAcC,EAAwC;AAAA,IAC1D,UAAUC,EAAYf,CAA8B;AAAA,IACpD,eAAe;AAAA,MACb,yBAAyBE,EAAwB;AAAA,IAAA;AAAA,EACnD,CACD;AAgBD,SACE,gBAAAL,EAAC,aAAQ,WAAAS,GACP,UAAA,gBAAAT;AAAA,IAACmB;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAAb;AAAA,QACA,aAAAC;AAAA,QACA,eAAAC;AAAA,QACA,iCArBgC,CAACY,MAAiB;AACxD,UAAAN,EAAQO,EAAc,uCAAuCD,CAAI;AAAA,QACnE;AAAA,QAoBQ,sBAlBwD,CAACE,GAAOC,MAAS;AAC/E,UAAID,MAAUD,EAAc,gCAC1BP,EAAQO,EAAc,6BAA6B,IAC1CC,MAAUD,EAAc,gCACjCP,EAAQO,EAAc,6BAA6B,IAEnDP,EAAQQ,GAAOC,CAAI;AAAA,QAEvB;AAAA,MAUQ;AAAA,MAGF,UAAA,gBAAAvB,EAACwB,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAxB,EAACyB,GAAA,EAAc,GAAGT,GACf,UAAAN,KAGC,gBAAAgB,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAA3B,EAAC4B,GAAA,EAAK;AAAA,0BACLC,GAAA,EAAyB;AAAA,0BACzBC,GAAA,CAAA,CAAc;AAAA,MAAA,EAAA,CACjB,GAEJ,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"AssignSignatory.js","sources":["../../../../src/components/Company/AssignSignatory/AssignSignatory.tsx"],"sourcesContent":["import { z } from 'zod'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { SignatoryForm } from './SignatoryForm'\nimport { Head } from './Head'\nimport { AssignSignatorySelection } from './AssignSignatorySelection'\nimport type { AssignSignatoryDefaultValues } from './useAssignSignatory'\nimport { AssignSignatoryProvider, SignatoryAssignmentMode } from './useAssignSignatory'\nimport { companyEvents } from '@/shared/constants'\nimport { Flex } from '@/components/Common'\nimport { useBase, BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\n\n/**\n * Props for {@link AssignSignatory}.\n *\n * @public\n */\nexport interface AssignSignatoryProps extends BaseComponentInterface<'Company.AssignSignatory'> {\n  /** Identifier of the company the signatory is being assigned to. */\n  companyId: string\n  /**\n   * Identifier of an existing signatory. When set and matching the current signatory,\n   * the create form pre-populates with their information for editing.\n   */\n  signatoryId?: string\n  /**\n   * Default values for the underlying create and invite forms. Provide a `create` object,\n   * an `invite` object, or both — see {@link AssignSignatoryDefaultValues}.\n   */\n  defaultValues?: AssignSignatoryDefaultValues\n}\n\n/**\n * Lets a user either create a new signatory with full details or invite someone else to become the signatory.\n *\n * @remarks\n * For more granular control, use `CompanyOnboarding.CreateSignatory` or `CompanyOnboarding.InviteSignatory` directly.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `company/signatory/assignSignatory/modeUpdated` | The user switched between create and invite modes | The selected mode string (`'createSignatory'` or `'inviteSignatory'`) |\n * | `company/signatory/assignSignatory/done` | The signatory assignment process completed | — |\n * | `company/signatory/created` | A new signatory was created (create mode) | Response from the create signatory API request |\n * | `company/signatory/updated` | An existing signatory was updated (create mode) | Response from the update signatory API request |\n * | `company/signatory/invited` | A signatory invitation was sent (invite mode) | Response from the invite signatory API request |\n *\n * @param props - {@link AssignSignatoryProps}.\n * @returns The rendered signatory assignment surface.\n * @public\n */\nexport function AssignSignatory(props: AssignSignatoryProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst AssignSignatorySelectionSchema = z.object({\n  signatoryAssignmentMode: z.union([\n    z.literal(SignatoryAssignmentMode.createSignatory),\n    z.literal(SignatoryAssignmentMode.inviteSignatory),\n  ]),\n})\n\ntype AssignSignatorySelectionInputs = z.infer<typeof AssignSignatorySelectionSchema>\n\nfunction Root({\n  companyId,\n  signatoryId,\n  defaultValues,\n  className,\n  children,\n  dictionary,\n}: AssignSignatoryProps) {\n  useI18n('Company.AssignSignatory')\n  useComponentDictionary('Company.AssignSignatory', dictionary)\n\n  const { onEvent } = useBase()\n\n  const formMethods = useForm<AssignSignatorySelectionInputs>({\n    resolver: zodResolver(AssignSignatorySelectionSchema),\n    defaultValues: {\n      signatoryAssignmentMode: SignatoryAssignmentMode.createSignatory,\n    },\n  })\n\n  const onSignatoryAssignmentModeChange = (mode: string) => {\n    onEvent(companyEvents.COMPANY_ASSIGN_SIGNATORY_MODE_UPDATED, mode)\n  }\n\n  const onSignatoryFormEvent: BaseComponentInterface['onEvent'] = (event, data) => {\n    if (event === companyEvents.COMPANY_CREATE_SIGNATORY_DONE) {\n      onEvent(companyEvents.COMPANY_ASSIGN_SIGNATORY_DONE)\n    } else if (event === companyEvents.COMPANY_INVITE_SIGNATORY_DONE) {\n      onEvent(companyEvents.COMPANY_ASSIGN_SIGNATORY_DONE)\n    } else {\n      onEvent(event, data)\n    }\n  }\n\n  return (\n    <section className={className}>\n      <AssignSignatoryProvider\n        value={{\n          companyId,\n          signatoryId,\n          defaultValues,\n          onSignatoryAssignmentModeChange,\n          onSignatoryFormEvent,\n        }}\n      >\n        <Flex flexDirection=\"column\" gap={32}>\n          <FormProvider {...formMethods}>\n            {children ? (\n              children\n            ) : (\n              <>\n                <Head />\n                <AssignSignatorySelection />\n                <SignatoryForm />\n              </>\n            )}\n          </FormProvider>\n        </Flex>\n      </AssignSignatoryProvider>\n    </section>\n  )\n}\n"],"names":["AssignSignatory","props","jsx","BaseComponent","Root","AssignSignatorySelectionSchema","z","SignatoryAssignmentMode","companyId","signatoryId","defaultValues","className","children","dictionary","useI18n","useComponentDictionary","onEvent","useBase","formMethods","useForm","zodResolver","AssignSignatoryProvider","mode","companyEvents","event","data","Flex","FormProvider","jsxs","Fragment","Head","AssignSignatorySelection","SignatoryForm"],"mappings":";;;;;;;;;;;;;;;;AAoDO,SAASA,EAAgBC,GAA6B;AAC3D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMI,IAAiCC,EAAE,OAAO;AAAA,EAC9C,yBAAyBA,EAAE,MAAM;AAAA,IAC/BA,EAAE,QAAQC,EAAwB,eAAe;AAAA,IACjDD,EAAE,QAAQC,EAAwB,eAAe;AAAA,EAAA,CAClD;AACH,CAAC;AAID,SAASH,EAAK;AAAA,EACZ,WAAAI;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,GAAyB;AACvB,EAAAC,EAAQ,yBAAyB,GACjCC,EAAuB,2BAA2BF,CAAU;AAE5D,QAAM,EAAE,SAAAG,EAAA,IAAYC,EAAA,GAEdC,IAAcC,EAAwC;AAAA,IAC1D,UAAUC,EAAYf,CAA8B;AAAA,IACpD,eAAe;AAAA,MACb,yBAAyBE,EAAwB;AAAA,IAAA;AAAA,EACnD,CACD;AAgBD,SACE,gBAAAL,EAAC,aAAQ,WAAAS,GACP,UAAA,gBAAAT;AAAA,IAACmB;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAAb;AAAA,QACA,aAAAC;AAAA,QACA,eAAAC;AAAA,QACA,iCArBgC,CAACY,MAAiB;AACxD,UAAAN,EAAQO,EAAc,uCAAuCD,CAAI;AAAA,QACnE;AAAA,QAoBQ,sBAlBwD,CAACE,GAAOC,MAAS;AAC/E,UAAID,MAAUD,EAAc,gCAC1BP,EAAQO,EAAc,6BAA6B,IAC1CC,MAAUD,EAAc,gCACjCP,EAAQO,EAAc,6BAA6B,IAEnDP,EAAQQ,GAAOC,CAAI;AAAA,QAEvB;AAAA,MAUQ;AAAA,MAGF,UAAA,gBAAAvB,EAACwB,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAxB,EAACyB,GAAA,EAAc,GAAGT,GACf,UAAAN,KAGC,gBAAAgB,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAA3B,EAAC4B,GAAA,EAAK;AAAA,0BACLC,GAAA,EAAyB;AAAA,0BACzBC,GAAA,CAAA,CAAc;AAAA,MAAA,EAAA,CACjB,GAEJ,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -1,11 +1,11 @@
 import { CreateSignatoryDefaultValues } from './useCreateSignatory';
-import { BaseComponentInterface, CommonComponentInterface } from '../../../Base';
+import { BaseComponentInterface } from '../../../Base';
 /**
  * Props for {@link CreateSignatory}.
  *
  * @public
  */
-export interface CreateSignatoryProps extends CommonComponentInterface {
+export interface CreateSignatoryProps extends BaseComponentInterface<'Company.AssignSignatory'> {
     /** Identifier of the company the signatory belongs to. */
     companyId: string;
     /** Identifier of an existing signatory. When provided and matching an existing signatory on the company, the form pre-populates with their information for editing. */
@@ -16,7 +16,7 @@ export interface CreateSignatoryProps extends CommonComponentInterface {
 /**
  * Standalone form for creating or editing a company signatory, including name, contact details, SSN, date of birth, and home address.
  *
- * @remarks
+ * @events
  * | Event | Description | Data |
  * | ----- | ----------- | ---- |
  * | `company/signatory/created` | A new signatory was created successfully | The created signatory record |
@@ -27,4 +27,4 @@ export interface CreateSignatoryProps extends CommonComponentInterface {
  * @returns The create signatory form.
  * @public
  */
-export declare function CreateSignatory(props: CreateSignatoryProps & BaseComponentInterface): import("react").JSX.Element;
+export declare function CreateSignatory(props: CreateSignatoryProps): import("react").JSX.Element;