@gusto/embedded-react-sdk 0.47.0 → 0.47.1

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":";AAIA,MAAMA,IAAa;AAAA,EACjB,SAAS;AAAA,IACP,IAAI;AAAA,IAEJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IAEL,KAAK;AAAA,IACL,KAAK;AAAA,IAEL,KAAK;AAAA,IACL,KAAM;AAAA,EAAA;AAAA,EAER,OAAO;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA,EAEP,SAAS;AAAA,IACP,KAAK;AAAA,IACL,KAAK;AAAA,IAEL,KAAK;AAAA,EAAA;AAAA,EAEP,SAAS;AAAA,IACP,KAAK;AAAA,IAEL,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA,EAEP,MAAM;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAET,GAEaC,IAAqB,KAE5BC,IAAqB;AAAA,EACzB,WAAWF,EAAW,QAAQ,EAAE;AAAA,EAChC,iBAAiBA,EAAW,QAAQ,GAAG;AAAA,EACvC,kBAAkBA,EAAW,QAAQ,GAAI;AAAA,EACzC,qBAAqBA,EAAW,QAAQ,GAAG;AAAA,EAC3C,cAAcA,EAAW,QAAQ,GAAI;AAAA,EACrC,oBAAoBA,EAAW,QAAQ,GAAG;AAAA,EAC1C,qBAAqBA,EAAW,QAAQ,GAAG;AAAA,EAC3C,gBAAgBA,EAAW,QAAQ,EAAE;AAAA,EACrC,sBAAsBA,EAAW,QAAQ,GAAG;AAAA,EAC5C,uBAAuBA,EAAW,QAAQ,GAAG;AAAA,EAC7C,WAAWA,EAAW,KAAK,GAAG;AAAA,EAC9B,iBAAiBA,EAAW,KAAK,GAAG;AAAA,EACpC,kBAAkBA,EAAW,KAAK,GAAG;AAAA,EACrC,cAAcA,EAAW,QAAQ,GAAG;AAAA,EACpC,oBAAoBA,EAAW,QAAQ,GAAG;AAAA,EAC1C,qBAAqBA,EAAW,QAAQ,GAAG;AAAA,EAC3C,YAAYA,EAAW,MAAM,GAAG;AAAA,EAChC,kBAAkBA,EAAW,MAAM,GAAG;AAAA,EACtC,mBAAmBA,EAAW,MAAM,GAAG;AAAA,EACvC,cAAcA,EAAW,QAAQ,GAAG;AAAA,EACpC,oBAAoBA,EAAW,QAAQ,GAAG;AAAA,EAC1C,qBAAqBA,EAAW,QAAQ,GAAG;AAAA,EAC3C,oBAAoBA,EAAW,QAAQ,GAAG;AAAA,EAC1C,sBAAsBA,EAAW,QAAQ,GAAG;AAAA,EAC5C,iBAAiBA,EAAW,QAAQ,GAAG;AACzC,GAIaG,IAAc,CAACC,IAA8B,QACjD;AAAA;AAAA,EAEL,GAAGF;AAAA,EACH,GAAGE;AAAA;AAAA,EAEH,sBAAsBA,EAAO;AAAA,EAC7B,kBAAkBJ,EAAW,QAAQ,GAAG;AAAA,EACxC,mBAAmBI,EAAO;AAAA,EAC1B,kBAAkB;AAAA,EAClB,uBAAuBA,EAAO;AAAA,EAC9B,qBAAqBA,EAAO;AAAA,EAC5B,8BAA8BA,EAAO;AAAA;AAAA,EAErC,iBAAiBA,EAAO;AAAA,EACxB,oBAAoBC,EAAM,EAAE;AAAA,EAC5B,sBAAsB;AAAA,EACtB,uBAAuBD,EAAO;AAAA,EAC9B,iBAAiBA,EAAO;AAAA;AAAA,EAExB,aAAaC,EAAM,CAAC;AAAA,EACpB,cAAcA,EAAM,CAAC;AAAA,EACrB,YAAYA,EAAM,CAAC;AAAA,EACnB,aAAaA,EAAM,CAAC;AAAA,EACpB,cAAcA,EAAM,CAAC;AAAA,EACrB,WAAWA,EAAM,CAAC;AAAA;AAAA,EAElB,cAAcC,EAAA;AAAA,EACd,YAAY;AAAA,EACZ,qBAAqBD,EAAM,EAAE;AAAA,EAC7B,uBAAuBA,EAAM,EAAE;AAAA,EAC/B,qBAAqBA,EAAM,EAAE;AAAA,EAC7B,0BAA0BA,EAAM,EAAE;AAAA,EAClC,oBAAoBA,EAAM,EAAE;AAAA,EAC5B,eAAeA,EAAM,EAAE;AAAA,EACvB,iBAAiBA,EAAM,EAAE;AAAA,EACzB,eAAeA,EAAM,EAAE;AAAA,EACvB,kBAAkBA,EAAM,EAAE;AAAA,EAC1B,kBAAkBA,EAAM,EAAE;AAAA,EAC1B,kBAAkBA,EAAM,EAAE;AAAA,EAC1B,kBAAkBA,EAAM,EAAE;AAAA,EAC1B,kBAAkBA,EAAM,EAAE;AAAA,EAC1B,kBAAkBA,EAAM,EAAE;AAAA,EAC1B,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA;AAAA,EAEhB,oBAAoB,GAAGJ,CAAkB;AAAA;AAAA,EAEzC,eAAe;AAAA,EACf,eACE;AAAA;AAAA,EAEF,gBAAgBG,EAAO;AAAA,EACvB,gBAAgB;AAAA,IAMPG,IAAoB,CAACC,MAA+C;AAC/E,QAAMJ,IAAS,OAAO,QAAQF,CAAkB,EAAE;AAAA,IAChD,CAACO,GAA0B,CAACC,GAAKC,CAAK,OACpCF,EAAIC,CAAsC,IACxCF,EAAaE,CAAsC,KAAKC,GACnDF;AAAA,IAET,CAAA;AAAA,EAAC;AAKH,SAAO;AAAA,IACL,GAHYN,EAAYC,CAAM;AAAA,IAI9B,GAAGI;AAAA,EAAA;AAEP;"}
+{"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

@@ -9,3 +9,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';

package/dist/index.d.ts

@@ -1,14 +1,15 @@
 import "./types/i18next.d.ts"
 export * from './components';
 export * from './contexts';
-export { componentEvents } from './shared/constants';
+export { componentEvents, EmployeeOnboardingStatus, EmployeeSelfOnboardingStatuses, ContractorOnboardingStatus, ContractorSelfOnboardingStatuses, } from './shared/constants';
+export type { EventType } from './shared/constants';
 export type { BeforeCreateRequestHook, BeforeRequestHook, AfterSuccessHook, AfterErrorHook, BeforeCreateRequestContext, BeforeRequestContext, AfterSuccessContext, AfterErrorContext, SDKHooks, } from './types/hooks';
 export type { SDKError, SDKErrorCategory, SDKFieldError } from './types/sdkError';
 export { normalizeToSDKError, SDKInternalError } from './types/sdkError';
 export type { ObservabilityHook, ObservabilityError, ObservabilityMetric, ObservabilityMetricUnit, SanitizationConfig, } from './types/observability';
 export type { ConfirmWireDetailsProps, ConfirmWireDetailsComponentType, } from './components/Payroll/ConfirmWireDetails';
 export { composeErrorHandler, collectErrors, SDKFormProvider, composeSubmitHandler, useFieldErrorMessage, useDeriveFieldsMetadata, withOptions, FormFieldsMetadataProvider, TextInputHookField, SelectHookField, CheckboxHookField, NumberInputHookField, DatePickerHookField, RadioGroupHookField, SwitchHookField, } from './partner-hook-utils';
-export type { MixedErrorSource, SubmitStateForErrorHandling, HookFormInternals, HookLoadingResult, HookSubmitResult, HookErrorHandling, BaseHookReady, BaseFormHookReady, FormHookResult, FieldMetadata, FieldMetadataWithOptions, FieldsMetadata, ValidationMessages, BaseFieldProps, HookFieldProps, TextInputHookFieldProps, SelectHookFieldProps, CheckboxHookFieldProps, NumberInputHookFieldProps, DatePickerHookFieldProps, RadioGroupHookFieldProps, SwitchHookFieldProps, TextInputProps, SelectProps, SelectOption, CheckboxProps, NumberInputProps, DatePickerProps, RadioGroupProps, RadioGroupOption, SwitchProps, FormFieldsMetadataContextValue, } from './partner-hook-utils';
+export type { MixedErrorSource, SubmitStateForErrorHandling, HookFormInternals, HookLoadingResult, HookSubmitResult, HookErrorHandling, BaseHookReady, BaseFormHookReady, FormHookResult, FieldMetadata, FieldMetadataWithOptions, FieldsMetadata, ValidationMessages, BaseFieldProps, HookFieldProps, TextInputHookFieldProps, SelectHookFieldProps, CheckboxHookFieldProps, NumberInputHookFieldProps, DatePickerHookFieldProps, RadioGroupHookFieldProps, SwitchHookFieldProps, SharedFieldLayoutProps, SharedHorizontalFieldLayoutProps, TextInputProps, SelectProps, SelectOption, CheckboxProps, NumberInputProps, DatePickerProps, RadioGroupProps, RadioGroupOption, SwitchProps, FormFieldsMetadataContextValue, } from './partner-hook-utils';
 export { useDeductionForm, DeductionFormErrorCodes, createDeductionFormSchema, } from './components/Employee/Deductions/shared/useDeductionForm';
 export type { UseDeductionFormProps, UseDeductionFormResult, UseDeductionFormReady, DeductionFormFields, DeductionFormFieldsMetadata, DeductionFormErrorCode, DeductionFormOptionalFieldsToRequire, DeductionFormData, DeductionFormOutputs, DeductionFormRequiredValidation, DeductionFormNegativeAmountValidation, DeductionFormAmountValidation, DeductionFormCapValidation, DescriptionFieldProps, RecurringFieldProps, DeductAsPercentageFieldProps, AmountFieldProps as DeductionAmountFieldProps, TotalAmountFieldProps, AnnualMaximumFieldProps, GarnishmentTypeFieldProps, } from './components/Employee/Deductions/shared/useDeductionForm';
 export { useChildSupportGarnishmentForm, ChildSupportGarnishmentFormErrorCodes, createChildSupportGarnishmentFormSchema, getRequiredAttrKeys, SUPPORTED_REQUIRED_ATTR_KEYS, } from './components/Employee/Deductions/shared/useChildSupportGarnishmentForm';