@gusto/embedded-react-sdk 0.52.2 → 0.54.0

package/dist/components/TimeOff/TimeOffManagement/PolicyConfigurationForm/PolicyConfigurationFormPresentation.js

@@ -5,8 +5,8 @@ import { useTranslation as Z } from "react-i18next";
 import o from "./PolicyConfigurationForm.module.scss.js";
 import { Flex as d } from "../../../Common/Flex/Flex.js";
 import { ActionsLayout as $ } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as ee } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { Form as ae } from "../../../Common/Form/Form.js";
+import { Form as ee } from "../../../Common/Form/Form.js";
+import { useComponentContext as ae } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useLocale as ie } from "../../../../contexts/LocaleProvider/useLocale.js";
 import { useI18n as le } from "../../../../i18n/I18n.js";
 import { getDaysInMonth as C } from "../../../../helpers/dateFormatting.js";
@@ -24,7 +24,7 @@ function ge({
   lockedAccrualCategory: y
 }) {
   le("Company.TimeOff.CreateTimeOffPolicy");
-  const { t: e } = Z("Company.TimeOff.CreateTimeOffPolicy"), { Heading: A, Text: h, Button: L } = ee(), { locale: R } = ie(), F = J(), S = c(() => {
+  const { t: e } = Z("Company.TimeOff.CreateTimeOffPolicy"), { Heading: A, Text: h, Button: L } = ae(), { locale: R } = ie(), F = J(), S = c(() => {
     const i = new Intl.DateTimeFormat(R, { month: "long" });
     return Array.from({ length: 12 }, (r, s) => ({
       value: s + 1,
@@ -103,7 +103,7 @@ function ge({
   ), B = (i) => {
     N(i);
   }, f = n === "per_hour_paid", H = n === "per_calendar_year", G = f || H, z = E === "per_calendar_year";
-  return /* @__PURE__ */ a(X, { ...D, children: /* @__PURE__ */ a(ae, { "aria-labelledby": F, onSubmit: D.handleSubmit(B), children: /* @__PURE__ */ t(d, { flexDirection: "column", gap: 32, children: [
+  return /* @__PURE__ */ a(X, { ...D, children: /* @__PURE__ */ a(ee, { "aria-labelledby": F, onSubmit: D.handleSubmit(B), children: /* @__PURE__ */ t(d, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ a(A, { as: "h2", id: F, children: g ? e("policyDetails.editTitle", { name: g }) : e("policyDetails.createTitle") }),
     /* @__PURE__ */ t(d, { flexDirection: "column", gap: 20, children: [
       /* @__PURE__ */ a(

package/dist/components/TimeOff/shared/PolicyDetailLayout/PolicyDetailLayout.js

@@ -3,34 +3,33 @@ import { useTranslation as S } from "react-i18next";
 import { EmployeeTable as D } from "../EmployeeTable/EmployeeTable.js";
 import { EmptyData as L } from "../../../Common/EmptyData/EmptyData.js";
 import { useComponentContext as O } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
 import { useI18n as T } from "../../../../i18n/I18n.js";
 import x from "../../../../assets/icons/plus-circle.svg.js";
 import { DetailViewLayout as A } from "../../../Common/DetailViewLayout/DetailViewLayout.js";
 const v = "employees";
-function _({
+function N({
   title: r,
-  subtitle: m,
-  onBack: c,
+  subtitle: c,
+  onBack: m,
   backLabel: s,
   actions: p,
   firstTab: a,
   selectedTabId: d,
   onTabChange: h,
-  employees: t,
+  employees: e,
   onAddEmployee: n,
   removeDialog: o,
   successAlert: l,
   onDismissAlert: u
 }) {
   T("Company.TimeOff.PolicyDetail");
-  const { t: e } = S("Company.TimeOff.PolicyDetail"), { Alert: y, Dialog: C, Button: f } = O(), E = t.emptyState ?? (n ? () => /* @__PURE__ */ i(L, { title: e("emptyEmployees.title"), children: /* @__PURE__ */ i(
+  const { t } = S("Company.TimeOff.PolicyDetail"), { Alert: y, Dialog: C, Button: f } = O(), E = e.emptyState ?? (n ? () => /* @__PURE__ */ i(L, { title: t("emptyEmployees.title"), children: /* @__PURE__ */ i(
     f,
     {
       variant: "secondary",
       icon: /* @__PURE__ */ i(x, { "aria-hidden": !0 }),
       onClick: n,
-      children: e("emptyEmployees.addEmployeeCta")
+      children: t("emptyEmployees.addEmployeeCta")
     }
   ) }) : void 0), g = [
     {
@@ -40,21 +39,21 @@ function _({
     },
     {
       id: v,
-      label: e("tabs.employees"),
+      label: t("tabs.employees"),
       content: /* @__PURE__ */ i(
         D,
         {
-          data: t.data,
-          searchValue: t.searchValue,
-          onSearchChange: t.onSearchChange,
-          onSearchClear: t.onSearchClear,
-          searchPlaceholder: t.searchPlaceholder,
-          itemMenu: t.itemMenu,
-          pagination: t.pagination,
-          isFetching: t.isFetching,
+          data: e.data,
+          searchValue: e.searchValue,
+          onSearchChange: e.onSearchChange,
+          onSearchClear: e.onSearchClear,
+          searchPlaceholder: e.searchPlaceholder,
+          itemMenu: e.itemMenu,
+          pagination: e.pagination,
+          isFetching: e.isFetching,
           emptyState: E,
-          additionalColumns: t.additionalColumns,
-          hideJobTitle: t.hideJobTitle
+          additionalColumns: e.additionalColumns,
+          hideJobTitle: e.hideJobTitle
         }
       )
     }
@@ -65,8 +64,8 @@ function _({
       A,
       {
         title: r,
-        subtitle: m,
-        onBack: c,
+        subtitle: c,
+        onBack: m,
         backLabel: s,
         actions: p,
         tabs: g,
@@ -82,15 +81,15 @@ function _({
         onPrimaryActionClick: o.onConfirm,
         isPrimaryActionLoading: o.isPending,
         isDestructive: !0,
-        title: e("removeEmployeeDialog.title", { name: o.employeeName }),
-        primaryActionLabel: e("removeEmployeeDialog.confirmCta"),
-        closeActionLabel: e("removeEmployeeDialog.cancelCta"),
-        children: e("removeEmployeeDialog.description", { name: o.employeeName })
+        title: t("removeEmployeeDialog.title", { name: o.employeeName }),
+        primaryActionLabel: t("removeEmployeeDialog.confirmCta"),
+        closeActionLabel: t("removeEmployeeDialog.cancelCta"),
+        children: t("removeEmployeeDialog.description", { name: o.employeeName })
       }
     )
   ] });
 }
 export {
-  _ as PolicyDetailLayout
+  N as PolicyDetailLayout
 };
 //# sourceMappingURL=PolicyDetailLayout.js.map

package/dist/components/TimeOff/shared/PolicyDetailLayout/PolicyDetailLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PolicyDetailLayout.js","sources":["../../../../../src/components/TimeOff/shared/PolicyDetailLayout/PolicyDetailLayout.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { EmployeeTableItem } from '../EmployeeTable/EmployeeTableTypes'\nimport { EmployeeTable } from '../EmployeeTable/EmployeeTable'\nimport type { PolicyDetailLayoutProps } from './PolicyDetailLayoutTypes'\nimport { DetailViewLayout, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\nconst EMPLOYEES_TAB_ID = 'employees'\n\n/** @internal */\nexport function PolicyDetailLayout<T extends EmployeeTableItem>({\n  title,\n  subtitle,\n  onBack,\n  backLabel,\n  actions,\n  firstTab,\n  selectedTabId,\n  onTabChange,\n  employees,\n  onAddEmployee,\n  removeDialog,\n  successAlert,\n  onDismissAlert,\n}: PolicyDetailLayoutProps<T>) {\n  useI18n('Company.TimeOff.PolicyDetail')\n  const { t } = useTranslation('Company.TimeOff.PolicyDetail')\n  const { Alert, Dialog, Button } = useComponentContext()\n\n  const emptyEmployeesState =\n    employees.emptyState ??\n    (onAddEmployee\n      ? () => (\n          <EmptyData title={t('emptyEmployees.title')}>\n            <Button\n              variant=\"secondary\"\n              icon={<PlusCircleIcon aria-hidden />}\n              onClick={onAddEmployee}\n            >\n              {t('emptyEmployees.addEmployeeCta')}\n            </Button>\n          </EmptyData>\n        )\n      : undefined)\n\n  const tabs = [\n    {\n      id: firstTab.id,\n      label: firstTab.label,\n      content: firstTab.content,\n    },\n    {\n      id: EMPLOYEES_TAB_ID,\n      label: t('tabs.employees'),\n      content: (\n        <EmployeeTable<T>\n          data={employees.data}\n          searchValue={employees.searchValue}\n          onSearchChange={employees.onSearchChange}\n          onSearchClear={employees.onSearchClear}\n          searchPlaceholder={employees.searchPlaceholder}\n          itemMenu={employees.itemMenu}\n          pagination={employees.pagination}\n          isFetching={employees.isFetching}\n          emptyState={emptyEmployeesState}\n          additionalColumns={employees.additionalColumns}\n          hideJobTitle={employees.hideJobTitle}\n        />\n      ),\n    },\n  ]\n\n  return (\n    <>\n      {successAlert && <Alert status=\"success\" label={successAlert} onDismiss={onDismissAlert} />}\n\n      <DetailViewLayout\n        title={title}\n        subtitle={subtitle}\n        onBack={onBack}\n        backLabel={backLabel}\n        actions={actions}\n        tabs={tabs}\n        selectedTabId={selectedTabId}\n        onTabChange={onTabChange}\n      />\n\n      <Dialog\n        isOpen={removeDialog.isOpen}\n        onClose={removeDialog.onClose}\n        onPrimaryActionClick={removeDialog.onConfirm}\n        isPrimaryActionLoading={removeDialog.isPending}\n        isDestructive\n        title={t('removeEmployeeDialog.title', { name: removeDialog.employeeName })}\n        primaryActionLabel={t('removeEmployeeDialog.confirmCta')}\n        closeActionLabel={t('removeEmployeeDialog.cancelCta')}\n      >\n        {t('removeEmployeeDialog.description', { name: removeDialog.employeeName })}\n      </Dialog>\n    </>\n  )\n}\n"],"names":["EMPLOYEES_TAB_ID","PolicyDetailLayout","title","subtitle","onBack","backLabel","actions","firstTab","selectedTabId","onTabChange","employees","onAddEmployee","removeDialog","successAlert","onDismissAlert","useI18n","t","useTranslation","Alert","Dialog","Button","useComponentContext","emptyEmployeesState","EmptyData","jsx","PlusCircleIcon","tabs","EmployeeTable","jsxs","Fragment","DetailViewLayout"],"mappings":";;;;;;;;;AASA,MAAMA,IAAmB;AAGlB,SAASC,EAAgD;AAAA,EAC9D,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AACF,GAA+B;AAC7B,EAAAC,EAAQ,8BAA8B;AACtC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,8BAA8B,GACrD,EAAE,OAAAC,GAAO,QAAAC,GAAQ,QAAAC,EAAA,IAAWC,EAAA,GAE5BC,IACJZ,EAAU,eACTC,IACG,wBACGY,GAAA,EAAU,OAAOP,EAAE,sBAAsB,GACxC,UAAA,gBAAAQ;AAAA,IAACJ;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAM,gBAAAI,EAACC,GAAA,EAAe,eAAW,GAAA,CAAC;AAAA,MAClC,SAASd;AAAA,MAER,YAAE,+BAA+B;AAAA,IAAA;AAAA,EAAA,GAEtC,IAEF,SAEAe,IAAO;AAAA,IACX;AAAA,MACE,IAAInB,EAAS;AAAA,MACb,OAAOA,EAAS;AAAA,MAChB,SAASA,EAAS;AAAA,IAAA;AAAA,IAEpB;AAAA,MACE,IAAIP;AAAA,MACJ,OAAOgB,EAAE,gBAAgB;AAAA,MACzB,SACE,gBAAAQ;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,MAAMjB,EAAU;AAAA,UAChB,aAAaA,EAAU;AAAA,UACvB,gBAAgBA,EAAU;AAAA,UAC1B,eAAeA,EAAU;AAAA,UACzB,mBAAmBA,EAAU;AAAA,UAC7B,UAAUA,EAAU;AAAA,UACpB,YAAYA,EAAU;AAAA,UACtB,YAAYA,EAAU;AAAA,UACtB,YAAYY;AAAA,UACZ,mBAAmBZ,EAAU;AAAA,UAC7B,cAAcA,EAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B;AAAA,EAEJ;AAGF,SACE,gBAAAkB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAhB,uBAAiBK,GAAA,EAAM,QAAO,WAAU,OAAOL,GAAc,WAAWC,GAAgB;AAAA,IAEzF,gBAAAU;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,OAAA5B;AAAA,QACA,UAAAC;AAAA,QACA,QAAAC;AAAA,QACA,WAAAC;AAAA,QACA,SAAAC;AAAA,QACA,MAAAoB;AAAA,QACA,eAAAlB;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,gBAAAe;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,QAAQP,EAAa;AAAA,QACrB,SAASA,EAAa;AAAA,QACtB,sBAAsBA,EAAa;AAAA,QACnC,wBAAwBA,EAAa;AAAA,QACrC,eAAa;AAAA,QACb,OAAOI,EAAE,8BAA8B,EAAE,MAAMJ,EAAa,cAAc;AAAA,QAC1E,oBAAoBI,EAAE,iCAAiC;AAAA,QACvD,kBAAkBA,EAAE,gCAAgC;AAAA,QAEnD,YAAE,oCAAoC,EAAE,MAAMJ,EAAa,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5E,GACF;AAEJ;"}
+{"version":3,"file":"PolicyDetailLayout.js","sources":["../../../../../src/components/TimeOff/shared/PolicyDetailLayout/PolicyDetailLayout.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { EmployeeTableItem } from '../EmployeeTable/EmployeeTableTypes'\nimport { EmployeeTable } from '../EmployeeTable/EmployeeTable'\nimport type { PolicyDetailLayoutProps } from './PolicyDetailLayoutTypes'\nimport { DetailViewLayout, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\nconst EMPLOYEES_TAB_ID = 'employees'\n\n/** @internal */\nexport function PolicyDetailLayout<T extends EmployeeTableItem>({\n  title,\n  subtitle,\n  onBack,\n  backLabel,\n  actions,\n  firstTab,\n  selectedTabId,\n  onTabChange,\n  employees,\n  onAddEmployee,\n  removeDialog,\n  successAlert,\n  onDismissAlert,\n}: PolicyDetailLayoutProps<T>) {\n  useI18n('Company.TimeOff.PolicyDetail')\n  const { t } = useTranslation('Company.TimeOff.PolicyDetail')\n  const { Alert, Dialog, Button } = useComponentContext()\n\n  const emptyEmployeesState =\n    employees.emptyState ??\n    (onAddEmployee\n      ? () => (\n          <EmptyData title={t('emptyEmployees.title')}>\n            <Button\n              variant=\"secondary\"\n              icon={<PlusCircleIcon aria-hidden />}\n              onClick={onAddEmployee}\n            >\n              {t('emptyEmployees.addEmployeeCta')}\n            </Button>\n          </EmptyData>\n        )\n      : undefined)\n\n  const tabs = [\n    {\n      id: firstTab.id,\n      label: firstTab.label,\n      content: firstTab.content,\n    },\n    {\n      id: EMPLOYEES_TAB_ID,\n      label: t('tabs.employees'),\n      content: (\n        <EmployeeTable<T>\n          data={employees.data}\n          searchValue={employees.searchValue}\n          onSearchChange={employees.onSearchChange}\n          onSearchClear={employees.onSearchClear}\n          searchPlaceholder={employees.searchPlaceholder}\n          itemMenu={employees.itemMenu}\n          pagination={employees.pagination}\n          isFetching={employees.isFetching}\n          emptyState={emptyEmployeesState}\n          additionalColumns={employees.additionalColumns}\n          hideJobTitle={employees.hideJobTitle}\n        />\n      ),\n    },\n  ]\n\n  return (\n    <>\n      {successAlert && <Alert status=\"success\" label={successAlert} onDismiss={onDismissAlert} />}\n\n      <DetailViewLayout\n        title={title}\n        subtitle={subtitle}\n        onBack={onBack}\n        backLabel={backLabel}\n        actions={actions}\n        tabs={tabs}\n        selectedTabId={selectedTabId}\n        onTabChange={onTabChange}\n      />\n\n      <Dialog\n        isOpen={removeDialog.isOpen}\n        onClose={removeDialog.onClose}\n        onPrimaryActionClick={removeDialog.onConfirm}\n        isPrimaryActionLoading={removeDialog.isPending}\n        isDestructive\n        title={t('removeEmployeeDialog.title', { name: removeDialog.employeeName })}\n        primaryActionLabel={t('removeEmployeeDialog.confirmCta')}\n        closeActionLabel={t('removeEmployeeDialog.cancelCta')}\n      >\n        {t('removeEmployeeDialog.description', { name: removeDialog.employeeName })}\n      </Dialog>\n    </>\n  )\n}\n"],"names":["EMPLOYEES_TAB_ID","PolicyDetailLayout","title","subtitle","onBack","backLabel","actions","firstTab","selectedTabId","onTabChange","employees","onAddEmployee","removeDialog","successAlert","onDismissAlert","useI18n","useTranslation","Alert","Dialog","Button","useComponentContext","emptyEmployeesState","EmptyData","jsx","PlusCircleIcon","tabs","EmployeeTable","jsxs","Fragment","DetailViewLayout"],"mappings":";;;;;;;;AASA,MAAMA,IAAmB;AAGlB,SAASC,EAAgD;AAAA,EAC9D,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AACF,GAA+B;AAC7B,EAAAC,EAAQ,8BAA8B;AACtC,QAAM,EAAE,EAAA,IAAMC,EAAe,8BAA8B,GACrD,EAAE,OAAAC,GAAO,QAAAC,GAAQ,QAAAC,EAAA,IAAWC,EAAA,GAE5BC,IACJX,EAAU,eACTC,IACG,wBACGW,GAAA,EAAU,OAAO,EAAE,sBAAsB,GACxC,UAAA,gBAAAC;AAAA,IAACJ;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAM,gBAAAI,EAACC,GAAA,EAAe,eAAW,GAAA,CAAC;AAAA,MAClC,SAASb;AAAA,MAER,YAAE,+BAA+B;AAAA,IAAA;AAAA,EAAA,GAEtC,IAEF,SAEAc,IAAO;AAAA,IACX;AAAA,MACE,IAAIlB,EAAS;AAAA,MACb,OAAOA,EAAS;AAAA,MAChB,SAASA,EAAS;AAAA,IAAA;AAAA,IAEpB;AAAA,MACE,IAAIP;AAAA,MACJ,OAAO,EAAE,gBAAgB;AAAA,MACzB,SACE,gBAAAuB;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,MAAMhB,EAAU;AAAA,UAChB,aAAaA,EAAU;AAAA,UACvB,gBAAgBA,EAAU;AAAA,UAC1B,eAAeA,EAAU;AAAA,UACzB,mBAAmBA,EAAU;AAAA,UAC7B,UAAUA,EAAU;AAAA,UACpB,YAAYA,EAAU;AAAA,UACtB,YAAYA,EAAU;AAAA,UACtB,YAAYW;AAAA,UACZ,mBAAmBX,EAAU;AAAA,UAC7B,cAAcA,EAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B;AAAA,EAEJ;AAGF,SACE,gBAAAiB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAf,uBAAiBI,GAAA,EAAM,QAAO,WAAU,OAAOJ,GAAc,WAAWC,GAAgB;AAAA,IAEzF,gBAAAS;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,OAAA3B;AAAA,QACA,UAAAC;AAAA,QACA,QAAAC;AAAA,QACA,WAAAC;AAAA,QACA,SAAAC;AAAA,QACA,MAAAmB;AAAA,QACA,eAAAjB;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,gBAAAc;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,QAAQN,EAAa;AAAA,QACrB,SAASA,EAAa;AAAA,QACtB,sBAAsBA,EAAa;AAAA,QACnC,wBAAwBA,EAAa;AAAA,QACrC,eAAa;AAAA,QACb,OAAO,EAAE,8BAA8B,EAAE,MAAMA,EAAa,cAAc;AAAA,QAC1E,oBAAoB,EAAE,iCAAiC;AAAA,QACvD,kBAAkB,EAAE,gCAAgC;AAAA,QAEnD,YAAE,oCAAoC,EAAE,MAAMA,EAAa,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5E,GACF;AAEJ;"}

package/dist/contexts/GustoProvider/GustoProviderCustomUIAdapter.d.ts

@@ -38,6 +38,12 @@ export interface GustoBaseProviderProps {
     currency?: string;
     /** Theme overrides applied to SDK components. See {@link GustoSDKTheme}. */
     theme?: Partial<GustoSDKTheme>;
+    /**
+     * CSP nonce to apply to runtime-injected `<style>` elements (theming, PDF download window).
+     * Pass the same per-request nonce your app uses in its `style-src 'nonce-…'` directive.
+     * Also exposed to custom UI components via `useNonce`.
+     */
+    nonce?: string;
     /** Element to use as the portal container for SDK popovers and dropdowns. Useful when rendering inside a modal or shadow root. */
     portalContainer?: HTMLElement;
     /** Optional TanStack Query `QueryClient`. When omitted, the SDK creates its own client configured for Gusto's API. */

package/dist/contexts/GustoProvider/GustoProviderCustomUIAdapter.js

@@ -1,33 +1,34 @@
 import { jsx as o } from "react/jsx-runtime";
-import { ErrorBoundary as g } from "react-error-boundary";
-import { I18nextProvider as P } from "react-i18next";
-import { useEffect as k, useMemo as C } from "react";
-import { ComponentsProvider as S } from "../ComponentAdapter/ComponentsProvider.js";
+import { ErrorBoundary as P } from "react-error-boundary";
+import { I18nextProvider as k } from "react-i18next";
+import { useEffect as C, useMemo as S } from "react";
+import { ComponentsProvider as x } from "../ComponentAdapter/ComponentsProvider.js";
 import { ApiProvider as I } from "../ApiProvider/ApiProvider.js";
 import { LoadingIndicatorProvider as L } from "../LoadingIndicatorProvider/LoadingIndicatorProvider.js";
-import { sanitizeError as x } from "../ObservabilityProvider/sanitization.js";
+import { sanitizeError as z } from "../ObservabilityProvider/sanitization.js";
 import { SDKI18next as m } from "./SDKI18next.js";
-import { InternalError as z } from "../../components/Common/InternalError/InternalError.js";
-import "../ComponentAdapter/useComponentContext.js";
-import { LocaleProvider as D } from "../LocaleProvider/LocaleProvider.js";
+import { InternalError as D } from "../../components/Common/InternalError/InternalError.js";
+import { LocaleProvider as U } from "../LocaleProvider/LocaleProvider.js";
 import "../LocaleProvider/useLocale.js";
-import { ThemeProvider as U } from "../ThemeProvider/ThemeProvider.js";
-import { normalizeToSDKError as T } from "../../types/sdkError.js";
-import { ObservabilityProvider as w } from "../ObservabilityProvider/ObservabilityProvider.js";
-function X(s) {
+import { ThemeProvider as T } from "../ThemeProvider/ThemeProvider.js";
+import { normalizeToSDKError as w } from "../../types/sdkError.js";
+import { NonceContext as A } from "../NonceProvider/useNonce.js";
+import { ObservabilityProvider as B } from "../ObservabilityProvider/ObservabilityProvider.js";
+function Z(l) {
   const {
-    children: l,
+    children: s,
     config: r,
     dictionary: i,
     lng: n = "en",
     locale: c = "en-US",
     currency: d = "USD",
     theme: p,
+    nonce: v,
     portalContainer: f,
-    components: v,
-    LoaderComponent: u,
-    queryClient: b
-  } = s;
+    components: u,
+    LoaderComponent: b,
+    queryClient: h
+  } = l;
   if (i)
     for (const t in i) {
       const e = t;
@@ -40,33 +41,33 @@ function X(s) {
           !0
         );
     }
-  k(() => {
+  C(() => {
     (async () => await m.changeLanguage(n))();
   }, [n]);
-  const h = C(() => {
+  const y = S(() => {
     if (r.observability?.onError)
       return (t, e) => {
         if (!r.observability?.onError) return;
-        const y = {
-          ...T(t),
+        const E = {
+          ...w(t),
           timestamp: Date.now(),
           componentStack: e.componentStack ?? void 0
-        }, E = x(y, r.observability.sanitization);
-        r.observability.onError(E);
+        }, g = z(E, r.observability.sanitization);
+        r.observability.onError(g);
       };
   }, [r.observability]);
-  return /* @__PURE__ */ o(S, { value: v, children: /* @__PURE__ */ o(L, { value: u, children: /* @__PURE__ */ o(w, { observability: r.observability, children: /* @__PURE__ */ o(g, { FallbackComponent: z, onError: h, children: /* @__PURE__ */ o(U, { theme: p, portalContainer: f, children: /* @__PURE__ */ o(D, { locale: c, currency: d, children: /* @__PURE__ */ o(P, { i18n: m, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(A.Provider, { value: v, children: /* @__PURE__ */ o(x, { value: u, children: /* @__PURE__ */ o(L, { value: b, children: /* @__PURE__ */ o(B, { observability: r.observability, children: /* @__PURE__ */ o(P, { FallbackComponent: D, onError: y, children: /* @__PURE__ */ o(T, { theme: p, portalContainer: f, children: /* @__PURE__ */ o(U, { locale: c, currency: d, children: /* @__PURE__ */ o(k, { i18n: m, children: /* @__PURE__ */ o(
     I,
     {
       url: r.baseUrl,
       headers: r.headers,
       hooks: r.hooks,
-      queryClient: b,
-      children: l
+      queryClient: h,
+      children: s
     }
-  ) }, n) }) }) }) }) }) });
+  ) }, n) }) }) }) }) }) }) });
 }
 export {
-  X as GustoProviderCustomUIAdapter
+  Z as GustoProviderCustomUIAdapter
 };
 //# sourceMappingURL=GustoProviderCustomUIAdapter.js.map

package/dist/contexts/GustoProvider/GustoProviderCustomUIAdapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"GustoProviderCustomUIAdapter.js","sources":["../../../src/contexts/GustoProvider/GustoProviderCustomUIAdapter.tsx"],"sourcesContent":["import type React from 'react'\nimport type { ErrorInfo, JSX, ReactNode } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { I18nextProvider } from 'react-i18next'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useEffect, useMemo } from 'react'\nimport { ComponentsProvider } from '../ComponentAdapter/ComponentsProvider'\nimport type { ComponentsContextType } from '../ComponentAdapter/useComponentContext'\nimport { ApiProvider } from '../ApiProvider/ApiProvider'\nimport { LoadingIndicatorProvider } from '../LoadingIndicatorProvider/LoadingIndicatorProvider'\nimport { ObservabilityProvider } from '../ObservabilityProvider'\nimport { sanitizeError } from '../ObservabilityProvider/sanitization'\nimport { SDKI18next } from './SDKI18next'\nimport { InternalError } from '@/components/Common'\nimport { LocaleProvider } from '@/contexts/LocaleProvider'\nimport { ThemeProvider } from '@/contexts/ThemeProvider'\nimport type { GustoSDKTheme } from '@/contexts/ThemeProvider/theme'\nimport type { GlobalResourceDictionary, SupportedLanguages } from '@/types/Helpers'\nimport type { SDKHooks } from '@/types/hooks'\nimport type { ObservabilityHook } from '@/types/observability'\nimport { normalizeToSDKError } from '@/types/sdkError'\n\n/**\n * API client configuration passed to {@link GustoProvider} (and {@link GustoProviderCustomUIAdapter}).\n *\n * @public\n */\nexport interface APIConfig {\n  /** URL of your backend proxy that forwards SDK requests to the Gusto Embedded API. SDK components never call Gusto directly. */\n  baseUrl: string\n  /** Extra headers applied to every API request. Combined with any headers your proxy adds. */\n  headers?: HeadersInit\n  /** Request interceptor hooks. Use these to inspect, modify, or react to requests and responses. See {@link SDKHooks}. */\n  hooks?: SDKHooks\n  /** Observability hook for surfacing errors and metrics from the SDK to your monitoring stack. See {@link ObservabilityHook}. */\n  observability?: ObservabilityHook\n}\n\n/**\n * Shared configuration props accepted by {@link GustoProvider} and {@link GustoProviderCustomUIAdapter}.\n *\n * @public\n */\nexport interface GustoBaseProviderProps {\n  /** API client configuration, including the proxy `baseUrl`, request hooks, and observability. See {@link APIConfig}. */\n  config: APIConfig\n  /** Translation overrides keyed by language and i18next namespace. Strings supplied here replace the SDK defaults for the matching keys. */\n  dictionary?: GlobalResourceDictionary\n  /** Active i18next language. Defaults to `'en'`. */\n  lng?: string\n  /** BCP 47 locale used for number, date, and currency formatting throughout the SDK. Defaults to `'en-US'`. */\n  locale?: string\n  /** ISO 4217 currency code used for monetary formatting. Defaults to `'USD'`. */\n  currency?: string\n  /** Theme overrides applied to SDK components. See {@link GustoSDKTheme}. */\n  theme?: Partial<GustoSDKTheme>\n  /** Element to use as the portal container for SDK popovers and dropdowns. Useful when rendering inside a modal or shadow root. */\n  portalContainer?: HTMLElement\n  /** Optional TanStack Query `QueryClient`. When omitted, the SDK creates its own client configured for Gusto's API. */\n  queryClient?: QueryClient\n  /** Complete map of UI components the SDK renders. Required because this adapter ships no defaults. */\n  components: ComponentsContextType\n  /** Loading indicator rendered while SDK queries are pending. Overrides the SDK default spinner. */\n  LoaderComponent?: ({ children }: { children?: ReactNode }) => JSX.Element\n}\n\n/**\n * Props for {@link GustoProviderCustomUIAdapter}.\n *\n * @public\n */\nexport interface GustoProviderCustomUIAdapterProps extends GustoBaseProviderProps {\n  /** The application tree that should have access to the SDK. */\n  children?: React.ReactNode\n}\n\n/**\n * Top-level provider that requires a complete component map and ships no UI defaults.\n *\n * @remarks\n * Use this adapter when you want full control over every UI primitive the SDK renders, or when\n * you want to avoid the React Aria dependency for tree-shaking. Unlike {@link GustoProvider}, the\n * `components` prop on {@link GustoProviderProps} is required and must supply every component the\n * SDK renders.\n *\n * @param props - See {@link GustoProviderCustomUIAdapterProps}.\n * @returns The configured provider tree wrapping `children`.\n * @public\n * @group Providers\n */\nexport function GustoProviderCustomUIAdapter(props: GustoProviderCustomUIAdapterProps) {\n  const {\n    children,\n    config,\n    dictionary,\n    lng = 'en',\n    locale = 'en-US',\n    currency = 'USD',\n    theme,\n    portalContainer,\n    components,\n    LoaderComponent,\n    queryClient,\n  } = props\n\n  if (dictionary) {\n    for (const language in dictionary) {\n      const lang = language as SupportedLanguages\n      for (const ns in dictionary[lang]) {\n        SDKI18next.addResourceBundle(\n          lang,\n          ns,\n          (dictionary[lang] as Record<string, unknown>)[ns],\n          true,\n          true,\n        )\n      }\n    }\n  }\n\n  useEffect(() => {\n    void (async () => {\n      await SDKI18next.changeLanguage(lng)\n    })()\n  }, [lng])\n\n  const handleTopLevelError = useMemo(() => {\n    if (!config.observability?.onError) return undefined\n\n    return (error: unknown, errorInfo: ErrorInfo) => {\n      if (!config.observability?.onError) return\n\n      const sdkError = normalizeToSDKError(error)\n\n      const observabilityError = {\n        ...sdkError,\n        timestamp: Date.now(),\n        componentStack: errorInfo.componentStack ?? undefined,\n      }\n\n      const sanitizedError = sanitizeError(observabilityError, config.observability.sanitization)\n\n      config.observability.onError(sanitizedError)\n    }\n  }, [config.observability])\n  return (\n    <ComponentsProvider value={components}>\n      <LoadingIndicatorProvider value={LoaderComponent}>\n        <ObservabilityProvider observability={config.observability}>\n          <ErrorBoundary FallbackComponent={InternalError} onError={handleTopLevelError}>\n            <ThemeProvider theme={theme} portalContainer={portalContainer}>\n              <LocaleProvider locale={locale} currency={currency}>\n                <I18nextProvider i18n={SDKI18next} key={lng}>\n                  <ApiProvider\n                    url={config.baseUrl}\n                    headers={config.headers}\n                    hooks={config.hooks}\n                    queryClient={queryClient}\n                  >\n                    {children}\n                  </ApiProvider>\n                </I18nextProvider>\n              </LocaleProvider>\n            </ThemeProvider>\n          </ErrorBoundary>\n        </ObservabilityProvider>\n      </LoadingIndicatorProvider>\n    </ComponentsProvider>\n  )\n}\n"],"names":["GustoProviderCustomUIAdapter","props","children","config","dictionary","lng","locale","currency","theme","portalContainer","components","LoaderComponent","queryClient","language","lang","ns","SDKI18next","useEffect","handleTopLevelError","useMemo","error","errorInfo","observabilityError","normalizeToSDKError","sanitizedError","sanitizeError","jsx","ComponentsProvider","LoadingIndicatorProvider","ObservabilityProvider","ErrorBoundary","InternalError","ThemeProvider","LocaleProvider","I18nextProvider","ApiProvider"],"mappings":";;;;;;;;;;;;;;;;AA0FO,SAASA,EAA6BC,GAA0C;AACrF,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,IACEX;AAEJ,MAAIG;AACF,eAAWS,KAAYT,GAAY;AACjC,YAAMU,IAAOD;AACb,iBAAWE,KAAMX,EAAWU,CAAI;AAC9B,QAAAE,EAAW;AAAA,UACTF;AAAA,UACAC;AAAA,UACCX,EAAWU,CAAI,EAA8BC,CAAE;AAAA,UAChD;AAAA,UACA;AAAA,QAAA;AAAA,IAGN;AAGF,EAAAE,EAAU,MAAM;AACd,KAAM,YACJ,MAAMD,EAAW,eAAeX,CAAG;AAAA,EAEvC,GAAG,CAACA,CAAG,CAAC;AAER,QAAMa,IAAsBC,EAAQ,MAAM;AACxC,QAAKhB,EAAO,eAAe;AAE3B,aAAO,CAACiB,GAAgBC,MAAyB;AAC/C,YAAI,CAAClB,EAAO,eAAe,QAAS;AAIpC,cAAMmB,IAAqB;AAAA,UACzB,GAHeC,EAAoBH,CAAK;AAAA,UAIxC,WAAW,KAAK,IAAA;AAAA,UAChB,gBAAgBC,EAAU,kBAAkB;AAAA,QAAA,GAGxCG,IAAiBC,EAAcH,GAAoBnB,EAAO,cAAc,YAAY;AAE1F,QAAAA,EAAO,cAAc,QAAQqB,CAAc;AAAA,MAC7C;AAAA,EACF,GAAG,CAACrB,EAAO,aAAa,CAAC;AACzB,SACE,gBAAAuB,EAACC,GAAA,EAAmB,OAAOjB,GACzB,UAAA,gBAAAgB,EAACE,GAAA,EAAyB,OAAOjB,GAC/B,UAAA,gBAAAe,EAACG,GAAA,EAAsB,eAAe1B,EAAO,eAC3C,UAAA,gBAAAuB,EAACI,GAAA,EAAc,mBAAmBC,GAAe,SAASb,GACxD,UAAA,gBAAAQ,EAACM,GAAA,EAAc,OAAAxB,GAAc,iBAAAC,GAC3B,UAAA,gBAAAiB,EAACO,GAAA,EAAe,QAAA3B,GAAgB,UAAAC,GAC9B,UAAA,gBAAAmB,EAACQ,GAAA,EAAgB,MAAMlB,GACrB,UAAA,gBAAAU;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,KAAKhC,EAAO;AAAA,MACZ,SAASA,EAAO;AAAA,MAChB,OAAOA,EAAO;AAAA,MACd,aAAAS;AAAA,MAEC,UAAAV;AAAA,IAAA;AAAA,EAAA,KAPmCG,CASxC,GACF,GACF,EAAA,CACF,EAAA,CACF,GACF,GACF;AAEJ;"}
+{"version":3,"file":"GustoProviderCustomUIAdapter.js","sources":["../../../src/contexts/GustoProvider/GustoProviderCustomUIAdapter.tsx"],"sourcesContent":["import type React from 'react'\nimport type { ErrorInfo, JSX, ReactNode } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { I18nextProvider } from 'react-i18next'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useEffect, useMemo } from 'react'\nimport { ComponentsProvider } from '../ComponentAdapter/ComponentsProvider'\nimport type { ComponentsContextType } from '../ComponentAdapter/useComponentContext'\nimport { ApiProvider } from '../ApiProvider/ApiProvider'\nimport { LoadingIndicatorProvider } from '../LoadingIndicatorProvider/LoadingIndicatorProvider'\nimport { ObservabilityProvider } from '../ObservabilityProvider'\nimport { sanitizeError } from '../ObservabilityProvider/sanitization'\nimport { SDKI18next } from './SDKI18next'\nimport { InternalError } from '@/components/Common'\nimport { LocaleProvider } from '@/contexts/LocaleProvider'\nimport { NonceContext } from '@/contexts/NonceProvider'\nimport { ThemeProvider } from '@/contexts/ThemeProvider'\nimport type { GustoSDKTheme } from '@/contexts/ThemeProvider/theme'\nimport type { GlobalResourceDictionary, SupportedLanguages } from '@/types/Helpers'\nimport type { SDKHooks } from '@/types/hooks'\nimport type { ObservabilityHook } from '@/types/observability'\nimport { normalizeToSDKError } from '@/types/sdkError'\n\n/**\n * API client configuration passed to {@link GustoProvider} (and {@link GustoProviderCustomUIAdapter}).\n *\n * @public\n */\nexport interface APIConfig {\n  /** URL of your backend proxy that forwards SDK requests to the Gusto Embedded API. SDK components never call Gusto directly. */\n  baseUrl: string\n  /** Extra headers applied to every API request. Combined with any headers your proxy adds. */\n  headers?: HeadersInit\n  /** Request interceptor hooks. Use these to inspect, modify, or react to requests and responses. See {@link SDKHooks}. */\n  hooks?: SDKHooks\n  /** Observability hook for surfacing errors and metrics from the SDK to your monitoring stack. See {@link ObservabilityHook}. */\n  observability?: ObservabilityHook\n}\n\n/**\n * Shared configuration props accepted by {@link GustoProvider} and {@link GustoProviderCustomUIAdapter}.\n *\n * @public\n */\nexport interface GustoBaseProviderProps {\n  /** API client configuration, including the proxy `baseUrl`, request hooks, and observability. See {@link APIConfig}. */\n  config: APIConfig\n  /** Translation overrides keyed by language and i18next namespace. Strings supplied here replace the SDK defaults for the matching keys. */\n  dictionary?: GlobalResourceDictionary\n  /** Active i18next language. Defaults to `'en'`. */\n  lng?: string\n  /** BCP 47 locale used for number, date, and currency formatting throughout the SDK. Defaults to `'en-US'`. */\n  locale?: string\n  /** ISO 4217 currency code used for monetary formatting. Defaults to `'USD'`. */\n  currency?: string\n  /** Theme overrides applied to SDK components. See {@link GustoSDKTheme}. */\n  theme?: Partial<GustoSDKTheme>\n  /**\n   * CSP nonce to apply to runtime-injected `<style>` elements (theming, PDF download window).\n   * Pass the same per-request nonce your app uses in its `style-src 'nonce-…'` directive.\n   * Also exposed to custom UI components via `useNonce`.\n   */\n  nonce?: string\n  /** Element to use as the portal container for SDK popovers and dropdowns. Useful when rendering inside a modal or shadow root. */\n  portalContainer?: HTMLElement\n  /** Optional TanStack Query `QueryClient`. When omitted, the SDK creates its own client configured for Gusto's API. */\n  queryClient?: QueryClient\n  /** Complete map of UI components the SDK renders. Required because this adapter ships no defaults. */\n  components: ComponentsContextType\n  /** Loading indicator rendered while SDK queries are pending. Overrides the SDK default spinner. */\n  LoaderComponent?: ({ children }: { children?: ReactNode }) => JSX.Element\n}\n\n/**\n * Props for {@link GustoProviderCustomUIAdapter}.\n *\n * @public\n */\nexport interface GustoProviderCustomUIAdapterProps extends GustoBaseProviderProps {\n  /** The application tree that should have access to the SDK. */\n  children?: React.ReactNode\n}\n\n/**\n * Top-level provider that requires a complete component map and ships no UI defaults.\n *\n * @remarks\n * Use this adapter when you want full control over every UI primitive the SDK renders, or when\n * you want to avoid the React Aria dependency for tree-shaking. Unlike {@link GustoProvider}, the\n * `components` prop on {@link GustoProviderProps} is required and must supply every component the\n * SDK renders.\n *\n * @param props - See {@link GustoProviderCustomUIAdapterProps}.\n * @returns The configured provider tree wrapping `children`.\n * @public\n * @group Providers\n */\nexport function GustoProviderCustomUIAdapter(props: GustoProviderCustomUIAdapterProps) {\n  const {\n    children,\n    config,\n    dictionary,\n    lng = 'en',\n    locale = 'en-US',\n    currency = 'USD',\n    theme,\n    nonce,\n    portalContainer,\n    components,\n    LoaderComponent,\n    queryClient,\n  } = props\n\n  if (dictionary) {\n    for (const language in dictionary) {\n      const lang = language as SupportedLanguages\n      for (const ns in dictionary[lang]) {\n        SDKI18next.addResourceBundle(\n          lang,\n          ns,\n          (dictionary[lang] as Record<string, unknown>)[ns],\n          true,\n          true,\n        )\n      }\n    }\n  }\n\n  useEffect(() => {\n    void (async () => {\n      await SDKI18next.changeLanguage(lng)\n    })()\n  }, [lng])\n\n  const handleTopLevelError = useMemo(() => {\n    if (!config.observability?.onError) return undefined\n\n    return (error: unknown, errorInfo: ErrorInfo) => {\n      if (!config.observability?.onError) return\n\n      const sdkError = normalizeToSDKError(error)\n\n      const observabilityError = {\n        ...sdkError,\n        timestamp: Date.now(),\n        componentStack: errorInfo.componentStack ?? undefined,\n      }\n\n      const sanitizedError = sanitizeError(observabilityError, config.observability.sanitization)\n\n      config.observability.onError(sanitizedError)\n    }\n  }, [config.observability])\n  return (\n    <NonceContext.Provider value={nonce}>\n      <ComponentsProvider value={components}>\n        <LoadingIndicatorProvider value={LoaderComponent}>\n          <ObservabilityProvider observability={config.observability}>\n            <ErrorBoundary FallbackComponent={InternalError} onError={handleTopLevelError}>\n              <ThemeProvider theme={theme} portalContainer={portalContainer}>\n                <LocaleProvider locale={locale} currency={currency}>\n                  <I18nextProvider i18n={SDKI18next} key={lng}>\n                    <ApiProvider\n                      url={config.baseUrl}\n                      headers={config.headers}\n                      hooks={config.hooks}\n                      queryClient={queryClient}\n                    >\n                      {children}\n                    </ApiProvider>\n                  </I18nextProvider>\n                </LocaleProvider>\n              </ThemeProvider>\n            </ErrorBoundary>\n          </ObservabilityProvider>\n        </LoadingIndicatorProvider>\n      </ComponentsProvider>\n    </NonceContext.Provider>\n  )\n}\n"],"names":["GustoProviderCustomUIAdapter","props","children","config","dictionary","lng","locale","currency","theme","nonce","portalContainer","components","LoaderComponent","queryClient","language","lang","ns","SDKI18next","useEffect","handleTopLevelError","useMemo","error","errorInfo","observabilityError","normalizeToSDKError","sanitizedError","sanitizeError","NonceContext","jsx","ComponentsProvider","LoadingIndicatorProvider","ObservabilityProvider","ErrorBoundary","InternalError","ThemeProvider","LocaleProvider","I18nextProvider","ApiProvider"],"mappings":";;;;;;;;;;;;;;;;AAiGO,SAASA,EAA6BC,GAA0C;AACrF,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,IACEZ;AAEJ,MAAIG;AACF,eAAWU,KAAYV,GAAY;AACjC,YAAMW,IAAOD;AACb,iBAAWE,KAAMZ,EAAWW,CAAI;AAC9B,QAAAE,EAAW;AAAA,UACTF;AAAA,UACAC;AAAA,UACCZ,EAAWW,CAAI,EAA8BC,CAAE;AAAA,UAChD;AAAA,UACA;AAAA,QAAA;AAAA,IAGN;AAGF,EAAAE,EAAU,MAAM;AACd,KAAM,YACJ,MAAMD,EAAW,eAAeZ,CAAG;AAAA,EAEvC,GAAG,CAACA,CAAG,CAAC;AAER,QAAMc,IAAsBC,EAAQ,MAAM;AACxC,QAAKjB,EAAO,eAAe;AAE3B,aAAO,CAACkB,GAAgBC,MAAyB;AAC/C,YAAI,CAACnB,EAAO,eAAe,QAAS;AAIpC,cAAMoB,IAAqB;AAAA,UACzB,GAHeC,EAAoBH,CAAK;AAAA,UAIxC,WAAW,KAAK,IAAA;AAAA,UAChB,gBAAgBC,EAAU,kBAAkB;AAAA,QAAA,GAGxCG,IAAiBC,EAAcH,GAAoBpB,EAAO,cAAc,YAAY;AAE1F,QAAAA,EAAO,cAAc,QAAQsB,CAAc;AAAA,MAC7C;AAAA,EACF,GAAG,CAACtB,EAAO,aAAa,CAAC;AACzB,2BACGwB,EAAa,UAAb,EAAsB,OAAOlB,GAC5B,UAAA,gBAAAmB,EAACC,GAAA,EAAmB,OAAOlB,GACzB,4BAACmB,GAAA,EAAyB,OAAOlB,GAC/B,UAAA,gBAAAgB,EAACG,KAAsB,eAAe5B,EAAO,eAC3C,UAAA,gBAAAyB,EAACI,KAAc,mBAAmBC,GAAe,SAASd,GACxD,4BAACe,GAAA,EAAc,OAAA1B,GAAc,iBAAAE,GAC3B,UAAA,gBAAAkB,EAACO,KAAe,QAAA7B,GAAgB,UAAAC,GAC9B,UAAA,gBAAAqB,EAACQ,GAAA,EAAgB,MAAMnB,GACrB,UAAA,gBAAAW;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,KAAKlC,EAAO;AAAA,MACZ,SAASA,EAAO;AAAA,MAChB,OAAOA,EAAO;AAAA,MACd,aAAAU;AAAA,MAEC,UAAAX;AAAA,IAAA;AAAA,EAAA,KAPmCG,CASxC,EAAA,CACF,EAAA,CACF,GACF,GACF,EAAA,CACF,GACF,GACF;AAEJ;"}

package/dist/contexts/LocaleProvider/useLocale.d.ts

@@ -13,7 +13,7 @@ export interface LocaleProps {
     currency?: string;
 }
 /**
- * React context backing {@link useLocale} and {@link useLocaleDateFormatter}.
+ * React context backing {@link useLocale}.
  *
  * @internal
  */
@@ -39,11 +39,3 @@ export declare const useLocale: () => {
     locale: string;
     currency: string;
 };
-/**
- * Returns an `Intl.DateTimeFormat` configured with the active locale and a long-month, numeric-year, two-digit-day style.
- *
- * @returns An `Intl.DateTimeFormat` instance bound to the provider's locale (or `en-US` if unset).
- * @throws An `Error` when called outside a {@link LocaleProvider}.
- * @internal
- */
-export declare const useLocaleDateFormatter: () => Intl.DateTimeFormat;

package/dist/contexts/LocaleProvider/useLocale.js

@@ -1,25 +1,15 @@
-import { createContext as t, useContext as o } from "react";
-const r = t(null), a = () => {
-  const e = o(r);
+import { createContext as o, useContext as r } from "react";
+const t = o(null), n = () => {
+  const e = r(t);
   if (!e)
     throw new Error("useLocal used outside provider");
   return {
     locale: e.locale ?? "en-US",
     currency: e.currency ?? "USD"
   };
-}, c = () => {
-  const e = o(r);
-  if (!e)
-    throw new Error("useLocaleDateFormatter used outside provider");
-  return new Intl.DateTimeFormat(e.locale ?? "en-US", {
-    year: "numeric",
-    month: "long",
-    day: "2-digit"
-  });
 };
 export {
-  r as LocaleContext,
-  a as useLocale,
-  c as useLocaleDateFormatter
+  t as LocaleContext,
+  n as useLocale
 };
 //# sourceMappingURL=useLocale.js.map

package/dist/contexts/LocaleProvider/useLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLocale.js","sources":["../../../src/contexts/LocaleProvider/useLocale.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\n/**\n * Locale and currency settings supplied to {@link LocaleProvider}.\n *\n * @remarks\n * `locale` is a BCP 47 language tag (defaults to `en-US`) used for `Intl` formatting and the\n * rendered wrapper's `lang` attribute. `currency` is an ISO 4217 currency code (defaults to\n * `USD`) consumed by currency-aware inputs.\n *\n * @internal\n */\nexport interface LocaleProps {\n  locale?: string\n  currency?: string\n}\n\n/**\n * React context backing {@link useLocale} and {@link useLocaleDateFormatter}.\n *\n * @internal\n */\nexport const LocaleContext = createContext<LocaleProps | null>(null)\n\n/**\n * Returns the active locale and currency from the surrounding {@link LocaleProvider}.\n *\n * @returns An object with `locale` (defaulting to `en-US`) and `currency` (defaulting to `USD`).\n * @throws An `Error` when called outside a {@link LocaleProvider}.\n * @internal\n *\n * @example\n * ```tsx\n * import { useLocale } from '@gusto/embedded-react-sdk'\n *\n * function Amount({ value }: { value: number }) {\n *   const { locale, currency } = useLocale()\n *   return <span>{new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value)}</span>\n * }\n * ```\n */\nexport const useLocale = () => {\n  const values = useContext(LocaleContext)\n  if (!values) {\n    throw new Error('useLocal used outside provider')\n  }\n  return {\n    locale: values.locale ?? 'en-US',\n    currency: values.currency ?? 'USD',\n  }\n}\n/**\n * Returns an `Intl.DateTimeFormat` configured with the active locale and a long-month, numeric-year, two-digit-day style.\n *\n * @returns An `Intl.DateTimeFormat` instance bound to the provider's locale (or `en-US` if unset).\n * @throws An `Error` when called outside a {@link LocaleProvider}.\n * @internal\n */\nexport const useLocaleDateFormatter = () => {\n  const values = useContext(LocaleContext)\n  if (!values) {\n    throw new Error('useLocaleDateFormatter used outside provider')\n  }\n  return new Intl.DateTimeFormat(values.locale ?? 'en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: '2-digit',\n  })\n}\n"],"names":["LocaleContext","createContext","useLocale","values","useContext","useLocaleDateFormatter"],"mappings":";AAsBO,MAAMA,IAAgBC,EAAkC,IAAI,GAmBtDC,IAAY,MAAM;AAC7B,QAAMC,IAASC,EAAWJ,CAAa;AACvC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,gCAAgC;AAElD,SAAO;AAAA,IACL,QAAQA,EAAO,UAAU;AAAA,IACzB,UAAUA,EAAO,YAAY;AAAA,EAAA;AAEjC,GAQaE,IAAyB,MAAM;AAC1C,QAAMF,IAASC,EAAWJ,CAAa;AACvC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAO,IAAI,KAAK,eAAeA,EAAO,UAAU,SAAS;AAAA,IACvD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,EAAA,CACN;AACH;"}
+{"version":3,"file":"useLocale.js","sources":["../../../src/contexts/LocaleProvider/useLocale.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\n/**\n * Locale and currency settings supplied to {@link LocaleProvider}.\n *\n * @remarks\n * `locale` is a BCP 47 language tag (defaults to `en-US`) used for `Intl` formatting and the\n * rendered wrapper's `lang` attribute. `currency` is an ISO 4217 currency code (defaults to\n * `USD`) consumed by currency-aware inputs.\n *\n * @internal\n */\nexport interface LocaleProps {\n  locale?: string\n  currency?: string\n}\n\n/**\n * React context backing {@link useLocale}.\n *\n * @internal\n */\nexport const LocaleContext = createContext<LocaleProps | null>(null)\n\n/**\n * Returns the active locale and currency from the surrounding {@link LocaleProvider}.\n *\n * @returns An object with `locale` (defaulting to `en-US`) and `currency` (defaulting to `USD`).\n * @throws An `Error` when called outside a {@link LocaleProvider}.\n * @internal\n *\n * @example\n * ```tsx\n * import { useLocale } from '@gusto/embedded-react-sdk'\n *\n * function Amount({ value }: { value: number }) {\n *   const { locale, currency } = useLocale()\n *   return <span>{new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value)}</span>\n * }\n * ```\n */\nexport const useLocale = () => {\n  const values = useContext(LocaleContext)\n  if (!values) {\n    throw new Error('useLocal used outside provider')\n  }\n  return {\n    locale: values.locale ?? 'en-US',\n    currency: values.currency ?? 'USD',\n  }\n}\n"],"names":["LocaleContext","createContext","useLocale","values","useContext"],"mappings":";AAsBO,MAAMA,IAAgBC,EAAkC,IAAI,GAmBtDC,IAAY,MAAM;AAC7B,QAAMC,IAASC,EAAWJ,CAAa;AACvC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,gCAAgC;AAElD,SAAO;AAAA,IACL,QAAQA,EAAO,UAAU;AAAA,IACzB,UAAUA,EAAO,YAAY;AAAA,EAAA;AAEjC;"}

package/dist/contexts/NonceProvider/index.d.ts

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

package/dist/contexts/NonceProvider/useNonce.d.ts

@@ -0,0 +1,37 @@
+/**
+ * React context backing {@link useNonce}.
+ *
+ * @internal
+ */
+export declare const NonceContext: import('react').Context<string | undefined>;
+/**
+ * Returns the CSP nonce supplied to {@link GustoProvider}, or `undefined` when none was provided.
+ *
+ * @remarks
+ * Use this when a custom UI component or partner-provided code injects a runtime `<style>` or
+ * `<script>` element and the integrating app serves a nonce-based Content Security Policy.
+ * Apply the returned value as the `nonce` property on the created element (e.g.
+ * `el.nonce = useNonce()`) before appending it to the document.
+ *
+ * @returns The active nonce, or `undefined` when {@link GustoProvider} was not given a `nonce`.
+ * @public
+ * @page providers
+ *
+ * @example
+ * ```tsx
+ * import { useNonce } from '@gusto/embedded-react-sdk'
+ *
+ * function InjectThemeStyles({ css }: { css: string }) {
+ *   const nonce = useNonce()
+ *   useEffect(() => {
+ *     const el = document.createElement('style')
+ *     if (nonce) el.nonce = nonce
+ *     el.textContent = css
+ *     document.head.appendChild(el)
+ *     return () => el.remove()
+ *   }, [css, nonce])
+ *   return null
+ * }
+ * ```
+ */
+export declare const useNonce: () => string | undefined;

package/dist/contexts/NonceProvider/useNonce.js

@@ -0,0 +1,7 @@
+import { useContext as o, createContext as t } from "react";
+const e = t(void 0), c = () => o(e);
+export {
+  e as NonceContext,
+  c as useNonce
+};
+//# sourceMappingURL=useNonce.js.map

package/dist/contexts/NonceProvider/useNonce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNonce.js","sources":["../../../src/contexts/NonceProvider/useNonce.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\n/**\n * React context backing {@link useNonce}.\n *\n * @internal\n */\nexport const NonceContext = createContext<string | undefined>(undefined)\n\n/**\n * Returns the CSP nonce supplied to {@link GustoProvider}, or `undefined` when none was provided.\n *\n * @remarks\n * Use this when a custom UI component or partner-provided code injects a runtime `<style>` or\n * `<script>` element and the integrating app serves a nonce-based Content Security Policy.\n * Apply the returned value as the `nonce` property on the created element (e.g.\n * `el.nonce = useNonce()`) before appending it to the document.\n *\n * @returns The active nonce, or `undefined` when {@link GustoProvider} was not given a `nonce`.\n * @public\n * @page providers\n *\n * @example\n * ```tsx\n * import { useNonce } from '@gusto/embedded-react-sdk'\n *\n * function InjectThemeStyles({ css }: { css: string }) {\n *   const nonce = useNonce()\n *   useEffect(() => {\n *     const el = document.createElement('style')\n *     if (nonce) el.nonce = nonce\n *     el.textContent = css\n *     document.head.appendChild(el)\n *     return () => el.remove()\n *   }, [css, nonce])\n *   return null\n * }\n * ```\n */\nexport const useNonce = (): string | undefined => useContext(NonceContext)\n"],"names":["NonceContext","createContext","useNonce","useContext"],"mappings":";AAOO,MAAMA,IAAeC,EAAkC,MAAS,GAgC1DC,IAAW,MAA0BC,EAAWH,CAAY;"}

package/dist/contexts/ThemeProvider/ThemeProvider.js

@@ -1,38 +1,39 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useRef as u, useCallback as f, useMemo as a, useEffect as h } from "react";
-import { ThemeContext as p } from "./useTheme.js";
-import { mergePartnerTheme as C } from "./theme.js";
+import { jsx as u } from "react/jsx-runtime";
+import { useRef as a, useCallback as h, useMemo as i, useEffect as p } from "react";
+import { ThemeContext as C } from "./useTheme.js";
+import { mergePartnerTheme as S } from "./theme.js";
 /* empty css                    */
-const D = ({
-  theme: n = {},
-  portalContainer: t,
-  children: o
+import { useNonce as T } from "../NonceProvider/useNonce.js";
+const g = ({
+  theme: o = {},
+  portalContainer: r,
+  children: n
 }) => {
-  const e = u(null), r = u(null), i = f(
+  const t = T(), e = a(null), c = a(null), f = h(
     (d) => {
-      r.current = t ?? d;
+      c.current = r ?? d;
     },
-    [t]
-  ), s = a(
-    () => C(n),
-    [n]
-  ), c = a(
+    [r]
+  ), s = i(
+    () => S(o),
+    [o]
+  ), m = i(
     () => `.GSDK{
 ${l(s).join(`
 `)}
 }`,
     [s]
   );
-  return h(() => {
-    e.current || (e.current = document.createElement("style"), e.current.setAttribute("data-testid", "GSDK"), document.head.appendChild(e.current)), e.current.textContent = c;
-  }, [c]), /* @__PURE__ */ m(p.Provider, { value: { container: r }, children: /* @__PURE__ */ m("article", { className: "GSDK", "data-testid": "GSDK", ref: i, children: o }) });
-}, l = (n, t) => {
-  const o = [];
-  for (const [e, r] of Object.entries(n))
-    typeof r == "object" ? o.push(...l(r, t ? t + "-" + e : e)) : o.push(`--g-${t ? t + "-" + e : e}: ${r};`);
-  return o;
+  return p(() => {
+    e.current || (e.current = document.createElement("style"), e.current.setAttribute("data-testid", "GSDK"), t && (e.current.nonce = t), document.head.appendChild(e.current)), e.current.textContent = m;
+  }, [m, t]), /* @__PURE__ */ u(C.Provider, { value: { container: c }, children: /* @__PURE__ */ u("article", { className: "GSDK", "data-testid": "GSDK", ref: f, children: n }) });
+}, l = (o, r) => {
+  const n = [];
+  for (const [t, e] of Object.entries(o))
+    typeof e == "object" ? n.push(...l(e, r ? r + "-" + t : t)) : n.push(`--g-${r ? r + "-" + t : t}: ${e};`);
+  return n;
 };
 export {
-  D as ThemeProvider
+  g as ThemeProvider
 };
 //# sourceMappingURL=ThemeProvider.js.map

package/dist/contexts/ThemeProvider/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/contexts/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import type React from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { ThemeContext } from './useTheme'\nimport { mergePartnerTheme, type GustoSDKTheme } from './theme'\nimport '@/styles/sdk.scss'\n\n/** @internal */\nexport interface ThemeProviderProps {\n  /** Partial set of theme tokens that override the SDK defaults. */\n  theme?: Partial<GustoSDKTheme>\n  /**\n   * Element to use as the portal container for all SDK overlays (Select, ComboBox,\n   * DatePicker, Menu, etc.). Defaults to the SDK's root article element.\n   *\n   * Pass `document.body` (or another stable element outside the SDK's container)\n   * when your app's scroll or clipping context interferes with overlay positioning.\n   */\n  portalContainer?: HTMLElement\n  /** Subtree rendered inside the SDK's themed root element. */\n  children?: React.ReactNode\n}\n\n/** @internal */\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  theme: partnerThemeOverrides = {},\n  portalContainer,\n  children,\n}) => {\n  const GThemeVariables = useRef<HTMLStyleElement | null>(null)\n  const portalContainerRef = useRef<HTMLElement | null>(null)\n\n  const articleRef = useCallback(\n    (el: HTMLElement | null) => {\n      portalContainerRef.current = portalContainer ?? el\n    },\n    [portalContainer],\n  )\n\n  const mergedTheme = useMemo(\n    () => mergePartnerTheme(partnerThemeOverrides),\n    [partnerThemeOverrides],\n  )\n\n  const cssContent = useMemo(\n    () => `.GSDK{\\n${parseThemeToCSS(mergedTheme).join('\\n')}\\n}`,\n    [mergedTheme],\n  )\n\n  useEffect(() => {\n    if (!GThemeVariables.current) {\n      GThemeVariables.current = document.createElement('style')\n      GThemeVariables.current.setAttribute('data-testid', 'GSDK')\n      document.head.appendChild(GThemeVariables.current)\n    }\n\n    GThemeVariables.current.textContent = cssContent\n  }, [cssContent])\n\n  return (\n    <ThemeContext.Provider value={{ container: portalContainerRef }}>\n      <article className=\"GSDK\" data-testid=\"GSDK\" ref={articleRef}>\n        {children}\n      </article>\n    </ThemeContext.Provider>\n  )\n}\n\n/**\n * Recursive flattening of the theme object into css variable format\n */\nconst parseThemeToCSS = (theme: Partial<GustoSDKTheme>, prefix?: string): string[] => {\n  const cssProps: string[] = []\n  for (const [key, value] of Object.entries(theme)) {\n    if (typeof value === 'object') {\n      cssProps.push(...parseThemeToCSS(value, prefix ? prefix + '-' + key : key))\n    } else {\n      cssProps.push(`--g-${prefix ? prefix + '-' + key : key}: ${value};`)\n    }\n  }\n  return cssProps\n}\n"],"names":["ThemeProvider","partnerThemeOverrides","portalContainer","children","GThemeVariables","useRef","portalContainerRef","articleRef","useCallback","el","mergedTheme","useMemo","mergePartnerTheme","cssContent","parseThemeToCSS","useEffect","ThemeContext","jsx","theme","prefix","cssProps","key","value"],"mappings":";;;;;AAuBO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,OAAOC,IAAwB,CAAA;AAAA,EAC/B,iBAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAkBC,EAAgC,IAAI,GACtDC,IAAqBD,EAA2B,IAAI,GAEpDE,IAAaC;AAAA,IACjB,CAACC,MAA2B;AAC1B,MAAAH,EAAmB,UAAUJ,KAAmBO;AAAA,IAClD;AAAA,IACA,CAACP,CAAe;AAAA,EAAA,GAGZQ,IAAcC;AAAA,IAClB,MAAMC,EAAkBX,CAAqB;AAAA,IAC7C,CAACA,CAAqB;AAAA,EAAA,GAGlBY,IAAaF;AAAA,IACjB,MAAM;AAAA,EAAWG,EAAgBJ,CAAW,EAAE,KAAK;AAAA,CAAI,CAAC;AAAA;AAAA,IACxD,CAACA,CAAW;AAAA,EAAA;AAGd,SAAAK,EAAU,MAAM;AACd,IAAKX,EAAgB,YACnBA,EAAgB,UAAU,SAAS,cAAc,OAAO,GACxDA,EAAgB,QAAQ,aAAa,eAAe,MAAM,GAC1D,SAAS,KAAK,YAAYA,EAAgB,OAAO,IAGnDA,EAAgB,QAAQ,cAAcS;AAAA,EACxC,GAAG,CAACA,CAAU,CAAC,qBAGZG,EAAa,UAAb,EAAsB,OAAO,EAAE,WAAWV,EAAA,GACzC,UAAA,gBAAAW,EAAC,WAAA,EAAQ,WAAU,QAAO,eAAY,QAAO,KAAKV,GAC/C,UAAAJ,GACH,GACF;AAEJ,GAKMW,IAAkB,CAACI,GAA+BC,MAA8B;AACpF,QAAMC,IAAqB,CAAA;AAC3B,aAAW,CAACC,GAAKC,CAAK,KAAK,OAAO,QAAQJ,CAAK;AAC7C,IAAI,OAAOI,KAAU,WACnBF,EAAS,KAAK,GAAGN,EAAgBQ,GAAOH,IAASA,IAAS,MAAME,IAAMA,CAAG,CAAC,IAE1ED,EAAS,KAAK,OAAOD,IAASA,IAAS,MAAME,IAAMA,CAAG,KAAKC,CAAK,GAAG;AAGvE,SAAOF;AACT;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/contexts/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import type React from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { ThemeContext } from './useTheme'\nimport { mergePartnerTheme, type GustoSDKTheme } from './theme'\nimport { useNonce } from '@/contexts/NonceProvider'\nimport '@/styles/sdk.scss'\n\n/** @internal */\nexport interface ThemeProviderProps {\n  /** Partial set of theme tokens that override the SDK defaults. */\n  theme?: Partial<GustoSDKTheme>\n  /**\n   * Element to use as the portal container for all SDK overlays (Select, ComboBox,\n   * DatePicker, Menu, etc.). Defaults to the SDK's root article element.\n   *\n   * Pass `document.body` (or another stable element outside the SDK's container)\n   * when your app's scroll or clipping context interferes with overlay positioning.\n   */\n  portalContainer?: HTMLElement\n  /** Subtree rendered inside the SDK's themed root element. */\n  children?: React.ReactNode\n}\n\n/** @internal */\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  theme: partnerThemeOverrides = {},\n  portalContainer,\n  children,\n}) => {\n  const nonce = useNonce()\n  const GThemeVariables = useRef<HTMLStyleElement | null>(null)\n  const portalContainerRef = useRef<HTMLElement | null>(null)\n\n  const articleRef = useCallback(\n    (el: HTMLElement | null) => {\n      portalContainerRef.current = portalContainer ?? el\n    },\n    [portalContainer],\n  )\n\n  const mergedTheme = useMemo(\n    () => mergePartnerTheme(partnerThemeOverrides),\n    [partnerThemeOverrides],\n  )\n\n  const cssContent = useMemo(\n    () => `.GSDK{\\n${parseThemeToCSS(mergedTheme).join('\\n')}\\n}`,\n    [mergedTheme],\n  )\n\n  useEffect(() => {\n    if (!GThemeVariables.current) {\n      GThemeVariables.current = document.createElement('style')\n      GThemeVariables.current.setAttribute('data-testid', 'GSDK')\n      if (nonce) GThemeVariables.current.nonce = nonce\n      document.head.appendChild(GThemeVariables.current)\n    }\n\n    GThemeVariables.current.textContent = cssContent\n  }, [cssContent, nonce])\n\n  return (\n    <ThemeContext.Provider value={{ container: portalContainerRef }}>\n      <article className=\"GSDK\" data-testid=\"GSDK\" ref={articleRef}>\n        {children}\n      </article>\n    </ThemeContext.Provider>\n  )\n}\n\n/**\n * Recursive flattening of the theme object into css variable format\n */\nconst parseThemeToCSS = (theme: Partial<GustoSDKTheme>, prefix?: string): string[] => {\n  const cssProps: string[] = []\n  for (const [key, value] of Object.entries(theme)) {\n    if (typeof value === 'object') {\n      cssProps.push(...parseThemeToCSS(value, prefix ? prefix + '-' + key : key))\n    } else {\n      cssProps.push(`--g-${prefix ? prefix + '-' + key : key}: ${value};`)\n    }\n  }\n  return cssProps\n}\n"],"names":["ThemeProvider","partnerThemeOverrides","portalContainer","children","nonce","useNonce","GThemeVariables","useRef","portalContainerRef","articleRef","useCallback","el","mergedTheme","useMemo","mergePartnerTheme","cssContent","parseThemeToCSS","useEffect","ThemeContext","jsx","theme","prefix","cssProps","key","value"],"mappings":";;;;;;AAwBO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,OAAOC,IAAwB,CAAA;AAAA,EAC/B,iBAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAQC,EAAA,GACRC,IAAkBC,EAAgC,IAAI,GACtDC,IAAqBD,EAA2B,IAAI,GAEpDE,IAAaC;AAAA,IACjB,CAACC,MAA2B;AAC1B,MAAAH,EAAmB,UAAUN,KAAmBS;AAAA,IAClD;AAAA,IACA,CAACT,CAAe;AAAA,EAAA,GAGZU,IAAcC;AAAA,IAClB,MAAMC,EAAkBb,CAAqB;AAAA,IAC7C,CAACA,CAAqB;AAAA,EAAA,GAGlBc,IAAaF;AAAA,IACjB,MAAM;AAAA,EAAWG,EAAgBJ,CAAW,EAAE,KAAK;AAAA,CAAI,CAAC;AAAA;AAAA,IACxD,CAACA,CAAW;AAAA,EAAA;AAGd,SAAAK,EAAU,MAAM;AACd,IAAKX,EAAgB,YACnBA,EAAgB,UAAU,SAAS,cAAc,OAAO,GACxDA,EAAgB,QAAQ,aAAa,eAAe,MAAM,GACtDF,MAAOE,EAAgB,QAAQ,QAAQF,IAC3C,SAAS,KAAK,YAAYE,EAAgB,OAAO,IAGnDA,EAAgB,QAAQ,cAAcS;AAAA,EACxC,GAAG,CAACA,GAAYX,CAAK,CAAC,qBAGnBc,EAAa,UAAb,EAAsB,OAAO,EAAE,WAAWV,EAAA,GACzC,UAAA,gBAAAW,EAAC,WAAA,EAAQ,WAAU,QAAO,eAAY,QAAO,KAAKV,GAC/C,UAAAN,GACH,GACF;AAEJ,GAKMa,IAAkB,CAACI,GAA+BC,MAA8B;AACpF,QAAMC,IAAqB,CAAA;AAC3B,aAAW,CAACC,GAAKC,CAAK,KAAK,OAAO,QAAQJ,CAAK;AAC7C,IAAI,OAAOI,KAAU,WACnBF,EAAS,KAAK,GAAGN,EAAgBQ,GAAOH,IAASA,IAAS,MAAME,IAAMA,CAAG,CAAC,IAE1ED,EAAS,KAAK,OAAOD,IAASA,IAAS,MAAME,IAAMA,CAAG,KAAKC,CAAK,GAAG;AAGvE,SAAOF;AACT;"}

package/dist/contexts/index.d.ts

@@ -4,3 +4,4 @@ export type { GustoProviderProps } from './GustoProvider';
 export type { ComponentsContextType } from './ComponentAdapter/useComponentContext';
 export * from './ComponentAdapter/componentAdapterTypes';
 export type { GustoSDKTheme, GustoSDKThemeColors } from './ThemeProvider/theme';
+export { useNonce } from './NonceProvider';

package/dist/hooks/useDateRangeFilter/useDateRangeFilter.d.ts

@@ -1,5 +1,7 @@
 interface UseDateRangeFilterOptions {
     onFilterChange?: () => void;
+    initialStartDate?: Date | null;
+    initialEndDate?: Date | null;
 }
 interface DateRangeApiParams {
     startDate?: string;
@@ -12,9 +14,10 @@ interface DateRangeApiParams {
  * @internal
  */
 export interface UseDateRangeFilterResult {
-    filterStartDate: Date | null;
-    filterEndDate: Date | null;
-    isFilterActive: boolean;
+    startDate: Date | null;
+    endDate: Date | null;
+    /** True when the current dates differ from the initial dates the hook was seeded with. */
+    isModified: boolean;
     handleStartDateChange: (date: Date | null) => void;
     handleEndDateChange: (date: Date | null) => void;
     handleClearFilter: () => void;
@@ -23,12 +26,14 @@ export interface UseDateRangeFilterResult {
     getMinStartDate: () => Date | undefined;
 }
 /**
- * Manages an optional start/end date range filter, capping the span at 12 months.
+ * Manages a start/end date range filter as a single source of truth, capping the span at 12 months.
  *
  * @remarks
- * `getMaxEndDate` and `getMinStartDate` return bounds for date pickers that keep the
- * selected range within 12 months of the opposite endpoint. `getApiDateParams` returns
- * only the dates that are set, formatted as `YYYY-MM-DD` strings for API requests.
+ * Seed the hook with `initialStartDate` / `initialEndDate` to render a default range on load;
+ * `handleClearFilter` returns to those initial values (not `null`). `getMaxEndDate` and
+ * `getMinStartDate` return bounds for date pickers that keep the selected range within
+ * 12 months of the opposite endpoint. `getApiDateParams` returns only the dates that are set,
+ * formatted as `YYYY-MM-DD` strings for API requests.
  *
  * @param options - Optional configuration; `onFilterChange` fires after any filter mutation.
  * @returns The current filter state and handlers — see {@link UseDateRangeFilterResult}.