@gusto/embedded-react-sdk 0.47.0 → 0.48.0

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 } 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 type { LoadingIndicatorContextProps } from '../LoadingIndicatorProvider/useLoadingIndicator'\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 { ResourceDictionary, SupportedLanguages } from '@/types/Helpers'\nimport type { SDKHooks } from '@/types/hooks'\nimport type { ObservabilityHook } from '@/types/observability'\nimport { normalizeToSDKError } from '@/types/sdkError'\n\nexport interface APIConfig {\n  baseUrl: string\n  headers?: HeadersInit\n  hooks?: SDKHooks\n  observability?: ObservabilityHook\n}\n\nexport interface GustoProviderProps {\n  config: APIConfig\n  dictionary?: ResourceDictionary\n  lng?: string\n  locale?: string\n  currency?: string\n  theme?: GustoSDKTheme\n  portalContainer?: HTMLElement\n  queryClient?: QueryClient\n  components: ComponentsContextType\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n}\n\nexport interface GustoProviderCustomUIAdapterProps extends GustoProviderProps {\n  children?: React.ReactNode\n}\n\n/**\n * A provider that accepts UI component adapters through the components prop\n */\nconst GustoProviderCustomUIAdapter: React.FC<GustoProviderCustomUIAdapterProps> = props => {\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\nexport { GustoProviderCustomUIAdapter }\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":";;;;;;;;;;;;;;;;AAkDA,MAAMA,IAA4E,CAAAC,MAAS;AACzF,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 } 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 type { LoadingIndicatorContextProps } from '../LoadingIndicatorProvider/useLoadingIndicator'\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 { ResourceDictionary, 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 GustoProviderProps {\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?: ResourceDictionary\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?: LoadingIndicatorContextProps['LoadingIndicator']\n}\n\n/**\n * Props for {@link GustoProviderCustomUIAdapter}.\n *\n * @public\n */\nexport interface GustoProviderCustomUIAdapterProps extends GustoProviderProps {\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 */\nconst GustoProviderCustomUIAdapter: React.FC<GustoProviderCustomUIAdapterProps> = props => {\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\nexport { GustoProviderCustomUIAdapter }\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":";;;;;;;;;;;;;;;;AA0FA,MAAMA,IAA4E,CAAAC,MAAS;AACzF,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;"}

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

@@ -1,4 +1,4 @@
 import { i18n } from 'i18next';
-/**Creating new i18next instance to avoid global clashing */
+/** @internal */
 declare const SDKI18next: i18n;
 export { SDKI18next };

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

@@ -1 +1 @@
-{"version":3,"file":"SDKI18next.js","sources":["../../../src/contexts/GustoProvider/SDKI18next.ts"],"sourcesContent":["import type { i18n } from 'i18next'\nimport i18next from 'i18next'\nimport { initReactI18next } from 'react-i18next'\nimport { defaultNS } from '@/i18n'\nimport commonEn from '@/i18n/en/common.json'\n\n/**Creating new i18next instance to avoid global clashing */\nconst SDKI18next: i18n = i18next.createInstance({\n  debug: false,\n  fallbackLng: 'en',\n  resources: {\n    en: { common: commonEn },\n  },\n  defaultNS,\n})\n\n// eslint-disable-next-line\nSDKI18next.use(initReactI18next).init().catch(console.error)\n\nexport { SDKI18next }\n"],"names":["SDKI18next","i18next","commonEn","defaultNS","initReactI18next"],"mappings":";;;;AAOA,MAAMA,IAAmBC,EAAQ,eAAe;AAAA,EAC9C,OAAO;AAAA,EACP,aAAa;AAAA,EACb,WAAW;AAAA,IACT,IAAI,EAAE,QAAQC,EAAA;AAAA,EAAS;AAAA,EAEzB,WAAAC;AACF,CAAC;AAGDH,EAAW,IAAII,CAAgB,EAAE,OAAO,MAAM,QAAQ,KAAK;"}
+{"version":3,"file":"SDKI18next.js","sources":["../../../src/contexts/GustoProvider/SDKI18next.ts"],"sourcesContent":["import type { i18n } from 'i18next'\nimport i18next from 'i18next'\nimport { initReactI18next } from 'react-i18next'\nimport { defaultNS } from '@/i18n'\nimport commonEn from '@/i18n/en/common.json'\n\n/** @internal */\nconst SDKI18next: i18n = i18next.createInstance({\n  debug: false,\n  fallbackLng: 'en',\n  resources: {\n    en: { common: commonEn },\n  },\n  defaultNS,\n})\n\n// eslint-disable-next-line\nSDKI18next.use(initReactI18next).init().catch(console.error)\n\nexport { SDKI18next }\n"],"names":["SDKI18next","i18next","commonEn","defaultNS","initReactI18next"],"mappings":";;;;AAOA,MAAMA,IAAmBC,EAAQ,eAAe;AAAA,EAC9C,OAAO;AAAA,EACP,aAAa;AAAA,EACb,WAAW;AAAA,IACT,IAAI,EAAE,QAAQC,EAAA;AAAA,EAAS;AAAA,EAEzB,WAAAC;AACF,CAAC;AAGDH,EAAW,IAAII,CAAgB,EAAE,OAAO,MAAM,QAAQ,KAAK;"}

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

@@ -1,6 +1,4 @@
 import "./types/i18next.d.ts"
-export { GustoProvider, GustoApiProvider } from './GustoProvider';
+export { GustoProvider } from './GustoProvider';
 export type { GustoApiProps } from './GustoProvider';
-export { SDKI18next } from './SDKI18next';
 export { GustoProviderCustomUIAdapter } from './GustoProviderCustomUIAdapter';
-export type { GustoProviderProps, GustoProviderCustomUIAdapterProps, APIConfig, } from './GustoProviderCustomUIAdapter';

package/dist/contexts/ThemeProvider/ThemeProvider.d.ts

@@ -1,7 +1,9 @@
 import { default as React } from 'react';
 import { GustoSDKTheme } from './theme';
+/** @internal */
 export interface ThemeProviderProps {
-    theme?: GustoSDKTheme;
+    /** Partial set of theme tokens that override the SDK defaults. */
+    theme?: Partial<GustoSDKTheme>;
     /**
      * Element to use as the portal container for all SDK overlays (Select, ComboBox,
      * DatePicker, Menu, etc.). Defaults to the SDK's root article element.
@@ -10,6 +12,8 @@ export interface ThemeProviderProps {
      * when your app's scroll or clipping context interferes with overlay positioning.
      */
     portalContainer?: HTMLElement;
+    /** Subtree rendered inside the SDK's themed root element. */
     children?: React.ReactNode;
 }
+/** @internal */
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;

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\nexport interface ThemeProviderProps {\n  theme?: 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  children?: React.ReactNode\n}\n\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: 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":";;;;;AAmBO,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,GAAsBC,MAA8B;AAC3E,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 '@/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;"}

package/dist/contexts/ThemeProvider/customRender.d.ts

@@ -1,4 +1,5 @@
 import { RenderOptions } from '@testing-library/react';
 import { ReactElement } from 'react';
+/** @internal */
 declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "wrapper">) => import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
 export { customRender as render };

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

@@ -1,4 +1,3 @@
 import "./types/i18next.d.ts"
 export { ThemeProvider, type ThemeProviderProps } from './ThemeProvider';
 export { useTheme } from './useTheme';
-export { render } from './customRender';

package/dist/contexts/ThemeProvider/theme.d.ts

@@ -1,102 +1,8 @@
+import { GustoSDKTheme, GustoSDKThemeColors } from './types';
+export type { GustoSDKTheme, GustoSDKThemeColors };
+/** @internal */
 export declare const transitionDuration = 200;
-declare const defaultThemeColors: {
-    colorBody: string;
-    colorBodyAccent: string;
-    colorBodyContent: string;
-    colorBodySubContent: string;
-    colorPrimary: string;
-    colorPrimaryAccent: string;
-    colorPrimaryContent: string;
-    colorSecondary: string;
-    colorSecondaryAccent: string;
-    colorSecondaryContent: string;
-    colorInfo: string;
-    colorInfoAccent: string;
-    colorInfoContent: string;
-    colorWarning: string;
-    colorWarningAccent: string;
-    colorWarningContent: string;
-    colorError: string;
-    colorErrorAccent: string;
-    colorErrorContent: string;
-    colorSuccess: string;
-    colorSuccessAccent: string;
-    colorSuccessContent: string;
-    colorBorderPrimary: string;
-    colorBorderSecondary: string;
-    colorButtonIcon: string;
-};
-export type GustoSDKThemeColors = Partial<typeof defaultThemeColors>;
-export declare const createTheme: (colors?: GustoSDKThemeColors) => {
-    inputBackgroundColor: string | undefined;
-    inputBorderColor: string;
-    inputContentColor: string | undefined;
-    inputBorderWidth: string;
-    inputPlaceholderColor: string | undefined;
-    inputAdornmentColor: string | undefined;
-    inputDisabledBackgroundColor: string | undefined;
-    inputLabelColor: string | undefined;
-    inputLabelFontSize: string;
-    inputLabelFontWeight: string;
-    inputDescriptionColor: string | undefined;
-    inputErrorColor: string | undefined;
-    inputRadius: string;
-    buttonRadius: string;
-    cardRadius: string;
-    badgeRadius: string;
-    bannerRadius: string;
-    boxRadius: string;
-    fontSizeRoot: string;
-    fontFamily: string;
-    fontLineHeightLarge: string;
-    fontLineHeightRegular: string;
-    fontLineHeightSmall: string;
-    fontLineHeightExtraSmall: string;
-    fontSizeExtraSmall: string;
-    fontSizeSmall: string;
-    fontSizeRegular: string;
-    fontSizeLarge: string;
-    fontSizeHeading1: string;
-    fontSizeHeading2: string;
-    fontSizeHeading3: string;
-    fontSizeHeading4: string;
-    fontSizeHeading5: string;
-    fontSizeHeading6: string;
-    fontWeightRegular: string;
-    fontWeightMedium: string;
-    fontWeightSemibold: string;
-    fontWeightBold: string;
-    transitionDuration: string;
-    shadowResting: string;
-    shadowTopmost: string;
-    focusRingColor: string | undefined;
-    focusRingWidth: string;
-    colorBody: string;
-    colorBodyAccent: string;
-    colorBodyContent: string;
-    colorBodySubContent: string;
-    colorPrimary: string;
-    colorPrimaryAccent: string;
-    colorPrimaryContent: string;
-    colorSecondary: string;
-    colorSecondaryAccent: string;
-    colorSecondaryContent: string;
-    colorInfo: string;
-    colorInfoAccent: string;
-    colorInfoContent: string;
-    colorWarning: string;
-    colorWarningAccent: string;
-    colorWarningContent: string;
-    colorError: string;
-    colorErrorAccent: string;
-    colorErrorContent: string;
-    colorSuccess: string;
-    colorSuccessAccent: string;
-    colorSuccessContent: string;
-    colorBorderPrimary: string;
-    colorBorderSecondary: string;
-    colorButtonIcon: string;
-};
-export type GustoSDKTheme = Partial<ReturnType<typeof createTheme>>;
-export declare const mergePartnerTheme: (partnerTheme: GustoSDKTheme) => GustoSDKTheme;
-export {};
+/** @internal */
+export declare const createTheme: (colors?: Partial<GustoSDKThemeColors>) => GustoSDKTheme;
+/** @internal */
+export declare const mergePartnerTheme: (partnerTheme: Partial<GustoSDKTheme>) => GustoSDKTheme;

package/dist/contexts/ThemeProvider/theme.js

@@ -1,4 +1,4 @@
-import { toRem as n, getRootFontSize as l } from "../../helpers/rem.js";
+import { toRem as n, getRootFontSize as a } from "../../helpers/rem.js";
 const o = {
   neutral: {
     25: "#FFFFFF",
@@ -31,7 +31,7 @@ const o = {
     500: "#DCDCDC",
     800: "#1C1C1C"
   }
-}, u = 200, i = {
+}, u = 200, e = {
   colorBody: o.neutral[25],
   colorBodyAccent: o.neutral[100],
   colorBodyContent: o.neutral[1e3],
@@ -57,73 +57,67 @@ const o = {
   colorBorderPrimary: o.neutral[300],
   colorBorderSecondary: o.neutral[200],
   colorButtonIcon: o.neutral[400]
-}, d = (r = {}) => ({
-  // Colors
-  ...i,
-  ...r,
-  // Input Colors
-  inputBackgroundColor: r.colorBody,
-  inputBorderColor: o.neutral[300],
-  inputContentColor: r.colorBodyContent,
-  inputBorderWidth: "1px",
-  inputPlaceholderColor: r.colorBodySubContent,
-  inputAdornmentColor: r.colorBodySubContent,
-  inputDisabledBackgroundColor: r.colorBodyAccent,
-  // Field Colors
-  inputLabelColor: r.colorBodyContent,
-  inputLabelFontSize: n(16),
-  inputLabelFontWeight: "500",
-  inputDescriptionColor: r.colorBodySubContent,
-  inputErrorColor: r.colorErrorAccent,
-  // Radius
-  inputRadius: n(8),
-  buttonRadius: n(8),
-  cardRadius: n(8),
-  badgeRadius: n(6),
-  bannerRadius: n(8),
-  boxRadius: n(8),
-  // Font
-  fontSizeRoot: l(),
-  fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontLineHeightLarge: n(28),
-  fontLineHeightRegular: n(24),
-  fontLineHeightSmall: n(20),
-  fontLineHeightExtraSmall: n(18),
-  fontSizeExtraSmall: n(12),
-  fontSizeSmall: n(14),
-  fontSizeRegular: n(16),
-  fontSizeLarge: n(18),
-  fontSizeHeading1: n(32),
-  fontSizeHeading2: n(24),
-  fontSizeHeading3: n(20),
-  fontSizeHeading4: n(18),
-  fontSizeHeading5: n(16),
-  fontSizeHeading6: n(14),
-  fontWeightRegular: "400",
-  fontWeightMedium: "500",
-  fontWeightSemibold: "600",
-  fontWeightBold: "700",
-  // Transitions
-  transitionDuration: `${u}ms`,
-  // Shadows
-  shadowResting: "0px 1px 2px 0px rgba(10, 13, 18, 0.05)",
-  shadowTopmost: "0px 4px 6px 0px rgba(28, 28, 28, 0.05), 0px 10px 15px 0px rgba(28, 28, 28, 0.10)",
-  // Focus
-  focusRingColor: r.colorPrimary,
-  focusRingWidth: "2px"
-}), C = (r) => {
-  const a = Object.entries(i).reduce(
-    (t, [e, c]) => (t[e] = r[e] || c, t),
-    {}
+}, s = (t = {}) => {
+  const r = { ...e, ...t };
+  return {
+    ...r,
+    inputBackgroundColor: r.colorBody,
+    inputBorderColor: o.neutral[300],
+    inputContentColor: r.colorBodyContent,
+    inputBorderWidth: "1px",
+    inputPlaceholderColor: r.colorBodySubContent,
+    inputAdornmentColor: r.colorBodySubContent,
+    inputDisabledBackgroundColor: r.colorBodyAccent,
+    inputLabelColor: r.colorBodyContent,
+    inputLabelFontSize: n(16),
+    inputLabelFontWeight: "500",
+    inputDescriptionColor: r.colorBodySubContent,
+    inputErrorColor: r.colorErrorAccent,
+    inputRadius: n(8),
+    buttonRadius: n(8),
+    cardRadius: n(8),
+    badgeRadius: n(6),
+    bannerRadius: n(8),
+    boxRadius: n(8),
+    fontSizeRoot: a(),
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontLineHeightLarge: n(28),
+    fontLineHeightRegular: n(24),
+    fontLineHeightSmall: n(20),
+    fontLineHeightExtraSmall: n(18),
+    fontSizeExtraSmall: n(12),
+    fontSizeSmall: n(14),
+    fontSizeRegular: n(16),
+    fontSizeLarge: n(18),
+    fontSizeHeading1: n(32),
+    fontSizeHeading2: n(24),
+    fontSizeHeading3: n(20),
+    fontSizeHeading4: n(18),
+    fontSizeHeading5: n(16),
+    fontSizeHeading6: n(14),
+    fontWeightRegular: "400",
+    fontWeightMedium: "500",
+    fontWeightSemibold: "600",
+    fontWeightBold: "700",
+    transitionDuration: `${u}ms`,
+    shadowResting: "0px 1px 2px 0px rgba(10, 13, 18, 0.05)",
+    shadowTopmost: "0px 4px 6px 0px rgba(28, 28, 28, 0.05), 0px 10px 15px 0px rgba(28, 28, 28, 0.10)",
+    focusRingColor: r.colorPrimary,
+    focusRingWidth: "2px"
+  };
+}, g = (t) => {
+  const r = Object.entries(e).reduce(
+    (i, [c, l]) => (i[c] = t[c] || l, i),
+    { ...e }
   );
   return {
-    ...d(a),
-    ...r
+    ...s(r),
+    ...t
   };
 };
 export {
-  d as createTheme,
-  C as mergePartnerTheme,
+  s as createTheme,
+  g as mergePartnerTheme,
   u as transitionDuration
 };
 //# sourceMappingURL=theme.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../src/contexts/ThemeProvider/theme.ts"],"sourcesContent":["import { getRootFontSize, toRem } from '@/helpers/rem'\n\n// Colors are for internal use in our theme currently\n// We don't export them for partner use or overrides\nconst baseColors = {\n  neutral: {\n    25: '#FFFFFF',\n    50: '#FAFAFA',\n    100: '#F5F5F5',\n    200: '#E9EAEB',\n    300: '#D5D7DA',\n    400: '#A4A7AE',\n    500: '#717680',\n    600: '#535862',\n    700: '#414651',\n    800: '#252B37',\n    900: '#181D27',\n    1000: '#0A0D12',\n  },\n  error: {\n    100: '#FEF3F2',\n    500: '#C5271C',\n    800: '#D92D20',\n  },\n  warning: {\n    100: '#FFFAF2',\n    500: '#E9B550',\n    700: '#B88023',\n    800: '#B88023',\n  },\n  success: {\n    100: '#F3FAFB',\n    400: '#2BABAD',\n    500: '#0A8080',\n    800: '#005961',\n  },\n  info: {\n    100: '#F4F4F3',\n    500: '#DCDCDC',\n    800: '#1C1C1C',\n  },\n}\n\nexport const transitionDuration = 200\n\nconst defaultThemeColors = {\n  colorBody: baseColors.neutral[25],\n  colorBodyAccent: baseColors.neutral[100],\n  colorBodyContent: baseColors.neutral[1000],\n  colorBodySubContent: baseColors.neutral[700],\n  colorPrimary: baseColors.neutral[1000],\n  colorPrimaryAccent: baseColors.neutral[900],\n  colorPrimaryContent: baseColors.neutral[100],\n  colorSecondary: baseColors.neutral[25],\n  colorSecondaryAccent: baseColors.neutral[100],\n  colorSecondaryContent: baseColors.neutral[600],\n  colorInfo: baseColors.info[100],\n  colorInfoAccent: baseColors.info[500],\n  colorInfoContent: baseColors.info[800],\n  colorWarning: baseColors.warning[100],\n  colorWarningAccent: baseColors.warning[500],\n  colorWarningContent: baseColors.warning[800],\n  colorError: baseColors.error[100],\n  colorErrorAccent: baseColors.error[500],\n  colorErrorContent: baseColors.error[800],\n  colorSuccess: baseColors.success[100],\n  colorSuccessAccent: baseColors.success[500],\n  colorSuccessContent: baseColors.success[800],\n  colorBorderPrimary: baseColors.neutral[300],\n  colorBorderSecondary: baseColors.neutral[200],\n  colorButtonIcon: baseColors.neutral[400],\n}\n\nexport type GustoSDKThemeColors = Partial<typeof defaultThemeColors>\n\nexport const createTheme = (colors: GustoSDKThemeColors = {}) => {\n  return {\n    // Colors\n    ...defaultThemeColors,\n    ...colors,\n    // Input Colors\n    inputBackgroundColor: colors.colorBody,\n    inputBorderColor: baseColors.neutral[300],\n    inputContentColor: colors.colorBodyContent,\n    inputBorderWidth: '1px',\n    inputPlaceholderColor: colors.colorBodySubContent,\n    inputAdornmentColor: colors.colorBodySubContent,\n    inputDisabledBackgroundColor: colors.colorBodyAccent,\n    // Field Colors\n    inputLabelColor: colors.colorBodyContent,\n    inputLabelFontSize: toRem(16),\n    inputLabelFontWeight: '500',\n    inputDescriptionColor: colors.colorBodySubContent,\n    inputErrorColor: colors.colorErrorAccent,\n    // Radius\n    inputRadius: toRem(8),\n    buttonRadius: toRem(8),\n    cardRadius: toRem(8),\n    badgeRadius: toRem(6),\n    bannerRadius: toRem(8),\n    boxRadius: toRem(8),\n    // Font\n    fontSizeRoot: getRootFontSize(),\n    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n    fontLineHeightLarge: toRem(28),\n    fontLineHeightRegular: toRem(24),\n    fontLineHeightSmall: toRem(20),\n    fontLineHeightExtraSmall: toRem(18),\n    fontSizeExtraSmall: toRem(12),\n    fontSizeSmall: toRem(14),\n    fontSizeRegular: toRem(16),\n    fontSizeLarge: toRem(18),\n    fontSizeHeading1: toRem(32),\n    fontSizeHeading2: toRem(24),\n    fontSizeHeading3: toRem(20),\n    fontSizeHeading4: toRem(18),\n    fontSizeHeading5: toRem(16),\n    fontSizeHeading6: toRem(14),\n    fontWeightRegular: '400',\n    fontWeightMedium: '500',\n    fontWeightSemibold: '600',\n    fontWeightBold: '700',\n    // Transitions\n    transitionDuration: `${transitionDuration}ms`,\n    // Shadows\n    shadowResting: '0px 1px 2px 0px rgba(10, 13, 18, 0.05)',\n    shadowTopmost:\n      '0px 4px 6px 0px rgba(28, 28, 28, 0.05), 0px 10px 15px 0px rgba(28, 28, 28, 0.10)',\n    // Focus\n    focusRingColor: colors.colorPrimary,\n    focusRingWidth: '2px',\n  }\n}\n\nexport type GustoSDKTheme = Partial<ReturnType<typeof createTheme>>\n\nexport const mergePartnerTheme = (partnerTheme: GustoSDKTheme): GustoSDKTheme => {\n  const colors = Object.entries(defaultThemeColors).reduce(\n    (acc: GustoSDKThemeColors, [key, value]) => {\n      acc[key as keyof typeof defaultThemeColors] =\n        partnerTheme[key as keyof typeof defaultThemeColors] || value\n      return acc\n    },\n    {},\n  )\n\n  const theme = createTheme(colors)\n\n  return {\n    ...theme,\n    ...partnerTheme,\n  }\n}\n"],"names":["baseColors","transitionDuration","defaultThemeColors","createTheme","colors","toRem","getRootFontSize","mergePartnerTheme","partnerTheme","acc","key","value"],"mappings":"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"}
+{"version":3,"file":"theme.js","sources":["../../../src/contexts/ThemeProvider/theme.ts"],"sourcesContent":["import type { GustoSDKTheme, GustoSDKThemeColors } from './types'\nimport { getRootFontSize, toRem } from '@/helpers/rem'\n\nexport type { GustoSDKTheme, GustoSDKThemeColors }\n\n// Colors are for internal use in our theme currently\n// We don't export them for partner use or overrides\nconst baseColors = {\n  neutral: {\n    25: '#FFFFFF',\n    50: '#FAFAFA',\n    100: '#F5F5F5',\n    200: '#E9EAEB',\n    300: '#D5D7DA',\n    400: '#A4A7AE',\n    500: '#717680',\n    600: '#535862',\n    700: '#414651',\n    800: '#252B37',\n    900: '#181D27',\n    1000: '#0A0D12',\n  },\n  error: {\n    100: '#FEF3F2',\n    500: '#C5271C',\n    800: '#D92D20',\n  },\n  warning: {\n    100: '#FFFAF2',\n    500: '#E9B550',\n    700: '#B88023',\n    800: '#B88023',\n  },\n  success: {\n    100: '#F3FAFB',\n    400: '#2BABAD',\n    500: '#0A8080',\n    800: '#005961',\n  },\n  info: {\n    100: '#F4F4F3',\n    500: '#DCDCDC',\n    800: '#1C1C1C',\n  },\n}\n\n/** @internal */\nexport const transitionDuration = 200\n\nconst defaultThemeColors: GustoSDKThemeColors = {\n  colorBody: baseColors.neutral[25],\n  colorBodyAccent: baseColors.neutral[100],\n  colorBodyContent: baseColors.neutral[1000],\n  colorBodySubContent: baseColors.neutral[700],\n  colorPrimary: baseColors.neutral[1000],\n  colorPrimaryAccent: baseColors.neutral[900],\n  colorPrimaryContent: baseColors.neutral[100],\n  colorSecondary: baseColors.neutral[25],\n  colorSecondaryAccent: baseColors.neutral[100],\n  colorSecondaryContent: baseColors.neutral[600],\n  colorInfo: baseColors.info[100],\n  colorInfoAccent: baseColors.info[500],\n  colorInfoContent: baseColors.info[800],\n  colorWarning: baseColors.warning[100],\n  colorWarningAccent: baseColors.warning[500],\n  colorWarningContent: baseColors.warning[800],\n  colorError: baseColors.error[100],\n  colorErrorAccent: baseColors.error[500],\n  colorErrorContent: baseColors.error[800],\n  colorSuccess: baseColors.success[100],\n  colorSuccessAccent: baseColors.success[500],\n  colorSuccessContent: baseColors.success[800],\n  colorBorderPrimary: baseColors.neutral[300],\n  colorBorderSecondary: baseColors.neutral[200],\n  colorButtonIcon: baseColors.neutral[400],\n}\n\n/** @internal */\nexport const createTheme = (colors: Partial<GustoSDKThemeColors> = {}): GustoSDKTheme => {\n  const mergedColors = { ...defaultThemeColors, ...colors }\n\n  return {\n    ...mergedColors,\n    inputBackgroundColor: mergedColors.colorBody,\n    inputBorderColor: baseColors.neutral[300],\n    inputContentColor: mergedColors.colorBodyContent,\n    inputBorderWidth: '1px',\n    inputPlaceholderColor: mergedColors.colorBodySubContent,\n    inputAdornmentColor: mergedColors.colorBodySubContent,\n    inputDisabledBackgroundColor: mergedColors.colorBodyAccent,\n    inputLabelColor: mergedColors.colorBodyContent,\n    inputLabelFontSize: toRem(16),\n    inputLabelFontWeight: '500',\n    inputDescriptionColor: mergedColors.colorBodySubContent,\n    inputErrorColor: mergedColors.colorErrorAccent,\n    inputRadius: toRem(8),\n    buttonRadius: toRem(8),\n    cardRadius: toRem(8),\n    badgeRadius: toRem(6),\n    bannerRadius: toRem(8),\n    boxRadius: toRem(8),\n    fontSizeRoot: getRootFontSize(),\n    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n    fontLineHeightLarge: toRem(28),\n    fontLineHeightRegular: toRem(24),\n    fontLineHeightSmall: toRem(20),\n    fontLineHeightExtraSmall: toRem(18),\n    fontSizeExtraSmall: toRem(12),\n    fontSizeSmall: toRem(14),\n    fontSizeRegular: toRem(16),\n    fontSizeLarge: toRem(18),\n    fontSizeHeading1: toRem(32),\n    fontSizeHeading2: toRem(24),\n    fontSizeHeading3: toRem(20),\n    fontSizeHeading4: toRem(18),\n    fontSizeHeading5: toRem(16),\n    fontSizeHeading6: toRem(14),\n    fontWeightRegular: '400',\n    fontWeightMedium: '500',\n    fontWeightSemibold: '600',\n    fontWeightBold: '700',\n    transitionDuration: `${transitionDuration}ms`,\n    shadowResting: '0px 1px 2px 0px rgba(10, 13, 18, 0.05)',\n    shadowTopmost:\n      '0px 4px 6px 0px rgba(28, 28, 28, 0.05), 0px 10px 15px 0px rgba(28, 28, 28, 0.10)',\n    focusRingColor: mergedColors.colorPrimary,\n    focusRingWidth: '2px',\n  }\n}\n\n/** @internal */\nexport const mergePartnerTheme = (partnerTheme: Partial<GustoSDKTheme>): GustoSDKTheme => {\n  const colors = Object.entries(defaultThemeColors).reduce(\n    (acc, [key, value]) => {\n      acc[key as keyof GustoSDKThemeColors] =\n        partnerTheme[key as keyof GustoSDKThemeColors] || value\n      return acc\n    },\n    { ...defaultThemeColors },\n  )\n\n  return {\n    ...createTheme(colors),\n    ...partnerTheme,\n  }\n}\n"],"names":["baseColors","transitionDuration","defaultThemeColors","createTheme","colors","mergedColors","toRem","getRootFontSize","mergePartnerTheme","partnerTheme","acc","key","value"],"mappings":"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"}

package/dist/contexts/ThemeProvider/types.d.ts

@@ -0,0 +1,181 @@
+/**
+ * Color tokens that can be overridden to customize the SDK's visual theme.
+ * Pass a `Partial<GustoSDKThemeColors>` when constructing a `Partial<GustoSDKTheme>`
+ * to supply to `ThemeProvider`.
+ *
+ * @public
+ */
+export interface GustoSDKThemeColors {
+    /** Background color of the main content area. */
+    colorBody: string;
+    /** Subtle accent background, used for hover states and alternating rows. */
+    colorBodyAccent: string;
+    /** Primary text color rendered on body backgrounds. */
+    colorBodyContent: string;
+    /** Secondary/muted text color for supporting copy and labels. */
+    colorBodySubContent: string;
+    /** Brand primary color, used for primary buttons and active states. */
+    colorPrimary: string;
+    /** Hover/pressed tint for primary elements. */
+    colorPrimaryAccent: string;
+    /** Text or icon color rendered on primary backgrounds. */
+    colorPrimaryContent: string;
+    /** Brand secondary color, used for secondary buttons and surfaces. */
+    colorSecondary: string;
+    /** Hover/pressed tint for secondary elements. */
+    colorSecondaryAccent: string;
+    /** Text or icon color rendered on secondary backgrounds. */
+    colorSecondaryContent: string;
+    /** Background for informational banners and callouts. */
+    colorInfo: string;
+    /** Border or icon accent inside informational surfaces. */
+    colorInfoAccent: string;
+    /** Text color rendered on informational surfaces. */
+    colorInfoContent: string;
+    /** Background for warning banners and callouts. */
+    colorWarning: string;
+    /** Border or icon accent inside warning surfaces. */
+    colorWarningAccent: string;
+    /** Text color rendered on warning surfaces. */
+    colorWarningContent: string;
+    /** Background for error banners and inline validation states. */
+    colorError: string;
+    /** Border, icon accent, and field error indicator inside error surfaces. */
+    colorErrorAccent: string;
+    /** Text color rendered on error surfaces. */
+    colorErrorContent: string;
+    /** Background for success banners and confirmation states. */
+    colorSuccess: string;
+    /** Border or icon accent inside success surfaces. */
+    colorSuccessAccent: string;
+    /** Text color rendered on success surfaces. */
+    colorSuccessContent: string;
+    /** Color of primary borders (inputs, cards, dividers). */
+    colorBorderPrimary: string;
+    /** Color of secondary/subtle borders. */
+    colorBorderSecondary: string;
+    /** Color of icon-only buttons. */
+    colorButtonIcon: string;
+}
+/**
+ * Complete set of design tokens that control the SDK's visual theme. Pass a
+ * `Partial<GustoSDKTheme>` to `ThemeProvider` to override specific tokens; any
+ * token not supplied falls back to the SDK default.
+ *
+ * @public
+ */
+export interface GustoSDKTheme extends GustoSDKThemeColors {
+    /**
+     * Background color of text inputs and selects.
+     * @defaultValue `colorBody`
+     */
+    inputBackgroundColor: string;
+    /** Border color of text inputs and selects. */
+    inputBorderColor: string;
+    /**
+     * Text color inside text inputs and selects.
+     * @defaultValue `colorBodyContent`
+     */
+    inputContentColor: string;
+    /** Border width of text inputs and selects. */
+    inputBorderWidth: string;
+    /**
+     * Placeholder text color inside inputs.
+     * @defaultValue `colorBodySubContent`
+     */
+    inputPlaceholderColor: string;
+    /**
+     * Color of leading/trailing adornment icons in inputs.
+     * @defaultValue `colorBodySubContent`
+     */
+    inputAdornmentColor: string;
+    /**
+     * Background color of disabled inputs.
+     * @defaultValue `colorBodyAccent`
+     */
+    inputDisabledBackgroundColor: string;
+    /**
+     * Color of form field labels.
+     * @defaultValue `colorBodyContent`
+     */
+    inputLabelColor: string;
+    /** Font size of form field labels. */
+    inputLabelFontSize: string;
+    /** Font weight of form field labels. */
+    inputLabelFontWeight: string;
+    /**
+     * Color of form field description/hint text.
+     * @defaultValue `colorBodySubContent`
+     */
+    inputDescriptionColor: string;
+    /**
+     * Color of inline field error messages.
+     * @defaultValue `colorErrorAccent`
+     */
+    inputErrorColor: string;
+    /** Border radius of text inputs and selects. */
+    inputRadius: string;
+    /** Border radius of buttons. */
+    buttonRadius: string;
+    /** Border radius of card surfaces. */
+    cardRadius: string;
+    /** Border radius of badges. */
+    badgeRadius: string;
+    /** Border radius of banners. */
+    bannerRadius: string;
+    /** Border radius of box/panel surfaces. */
+    boxRadius: string;
+    /** Root document font size as a numeric string (no `px` suffix). Used as the rem base. */
+    fontSizeRoot: string;
+    /** Font family stack applied to all SDK text. */
+    fontFamily: string;
+    /** Line height for large text. */
+    fontLineHeightLarge: string;
+    /** Line height for regular/body text. */
+    fontLineHeightRegular: string;
+    /** Line height for small text. */
+    fontLineHeightSmall: string;
+    /** Line height for extra-small text. */
+    fontLineHeightExtraSmall: string;
+    /** Font size for extra-small text. */
+    fontSizeExtraSmall: string;
+    /** Font size for small text. */
+    fontSizeSmall: string;
+    /** Font size for regular/body text. */
+    fontSizeRegular: string;
+    /** Font size for large text. */
+    fontSizeLarge: string;
+    /** Font size for H1 headings. */
+    fontSizeHeading1: string;
+    /** Font size for H2 headings. */
+    fontSizeHeading2: string;
+    /** Font size for H3 headings. */
+    fontSizeHeading3: string;
+    /** Font size for H4 headings. */
+    fontSizeHeading4: string;
+    /** Font size for H5 headings. */
+    fontSizeHeading5: string;
+    /** Font size for H6 headings. */
+    fontSizeHeading6: string;
+    /** Font weight for regular text. */
+    fontWeightRegular: string;
+    /** Font weight for medium-emphasis text. */
+    fontWeightMedium: string;
+    /** Font weight for semibold text. */
+    fontWeightSemibold: string;
+    /** Font weight for bold text. */
+    fontWeightBold: string;
+    /** Duration of UI transitions, e.g. `"200ms"`. */
+    transitionDuration: string;
+    /** Box shadow for resting/default elevation. */
+    shadowResting: string;
+    /** Box shadow for elevated/topmost surfaces such as dropdowns and modals. */
+    shadowTopmost: string;
+    /**
+     * Color of the keyboard focus ring.
+     * @defaultValue `colorPrimary`
+     */
+    focusRingColor: string;
+    /** Width of the keyboard focus ring. */
+    focusRingWidth: string;
+}

package/dist/contexts/ThemeProvider/useTheme.d.ts

@@ -1,5 +1,9 @@
+/** @internal */
 export interface ThemeContextProps {
+    /** Ref to the element used as the portal container for SDK overlays. */
     container: React.RefObject<HTMLElement | null>;
 }
+/** @internal */
 export declare const ThemeContext: import('react').Context<ThemeContextProps>;
+/** @internal */
 export declare const useTheme: () => ThemeContextProps;

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sources":["../../../src/contexts/ThemeProvider/useTheme.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface ThemeContextProps {\n  container: React.RefObject<HTMLElement | null>\n}\nexport const ThemeContext = createContext({} as ThemeContextProps)\n\nexport const useTheme = () => useContext(ThemeContext)\n"],"names":["ThemeContext","createContext","useTheme","useContext"],"mappings":";AAKO,MAAMA,IAAeC,EAAc,CAAA,CAAuB,GAEpDC,IAAW,MAAMC,EAAWH,CAAY;"}
+{"version":3,"file":"useTheme.js","sources":["../../../src/contexts/ThemeProvider/useTheme.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\n/** @internal */\nexport interface ThemeContextProps {\n  /** Ref to the element used as the portal container for SDK overlays. */\n  container: React.RefObject<HTMLElement | null>\n}\n/** @internal */\nexport const ThemeContext = createContext({} as ThemeContextProps)\n\n/** @internal */\nexport const useTheme = () => useContext(ThemeContext)\n"],"names":["ThemeContext","createContext","useTheme","useContext"],"mappings":";AAQO,MAAMA,IAAeC,EAAc,CAAA,CAAuB,GAGpDC,IAAW,MAAMC,EAAWH,CAAY;"}

package/dist/contexts/index.d.ts

@@ -1,5 +1,4 @@
 import "./types/i18next.d.ts"
-export { GustoApiProvider } from './GustoApiProvider';
 export { GustoProvider, GustoProviderCustomUIAdapter } from './GustoProvider';
 export type { GustoProviderProps, GustoProviderCustomUIAdapterProps, APIConfig, } from './GustoProvider/GustoProviderCustomUIAdapter';
 export type { GustoApiProps } from './GustoProvider';
@@ -9,3 +8,4 @@ export type { ComponentsContextType } from './ComponentAdapter/useComponentConte
 export * from './ComponentAdapter/componentAdapterTypes';
 export { ObservabilityProvider, useObservability } from './ObservabilityProvider';
 export type { ObservabilityProviderProps, ObservabilityContextValue } from './ObservabilityProvider';
+export type { GustoSDKTheme, GustoSDKThemeColors } from './ThemeProvider/theme';