@shipengine/alchemy 2.4.1 → 3.0.1

package/components/alchemy-provider/alchemy-provider.d.ts

@@ -1,10 +1,8 @@
-import { BrandName } from "@packlink/brands";
-import { Theme } from "@packlink/giger-theme";
+import { CustomThemeData, Theme } from "@packlink/giger-theme";
 import { ShipEngineProps } from "@shipengine/react-api";
 export type AlchemyErrorHandler = (err: Error) => void;
 export type AlchemyContextValue = {
     baseURL: string;
-    brandName: BrandName;
     cdnURL: string;
     getToken: ShipEngineProps["getToken"];
     locale?: string;
@@ -15,13 +13,13 @@ export type AlchemyContextValue = {
 export declare const AlchemyContext: import("react").Context<AlchemyContextValue | undefined>;
 export interface AlchemyProviderProps {
     baseURL?: string;
-    brandName?: BrandName;
     cdnURL?: string;
     children: React.ReactNode;
     getToken: ShipEngineProps["getToken"];
     locale?: string;
     onError?: AlchemyErrorHandler;
     scope?: string;
+    themeConfig?: CustomThemeData;
 }
-export declare const AlchemyProvider: ({ baseURL, brandName, cdnURL, children, getToken, locale, onError, scope, }: AlchemyProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const AlchemyProvider: ({ baseURL, cdnURL, children, getToken, locale, onError, scope, themeConfig, }: AlchemyProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const useAlchemy: () => AlchemyContextValue;

package/components/alchemy-provider/hooks/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./use-load-fonts";
 export * from "./use-load-icons";
-export * from "./use-load-theme";

package/components/alchemy-provider/hooks/use-load-icons.d.ts

@@ -2,7 +2,6 @@ export type IconIndex = {
     [key: string]: string[];
 };
 export interface UseLoadIconsProps {
-    brandName: string;
     cdnURL?: string;
 }
-export declare const useLoadIcons: ({ brandName, cdnURL }: UseLoadIconsProps) => (iconName: string) => Promise<string>;
+export declare const useLoadIcons: ({ cdnURL }: UseLoadIconsProps) => (iconName: string) => Promise<string>;

package/constants.d.ts

@@ -0,0 +1,4 @@
+declare const constants: {
+    fallbackBrandName: string;
+};
+export default constants;

package/index.js

@@ -5,10 +5,9 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const React = require('react');
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('@emotion/react');
-const brands = require('@packlink/brands');
 const giger = require('@packlink/giger');
-const reactQuery = require('react-query');
 const gigerTheme = require('@packlink/giger-theme');
+const reactQuery = require('react-query');
 const reactI18next = require('react-i18next');
 const i18n = require('i18next');
 
@@ -9827,6 +9826,366 @@ const useUpdateWarehouse = () => {
   });
 };
 
+const fallbackThemeData = {
+  borderRadius: {
+    L: "16px",
+    M: "8px",
+    S: "4px",
+    XL: "32px",
+    XS: "2px"
+  },
+  breakPoints: {
+    desktop: 1280,
+    mobileLarge: 480,
+    tablet: 768,
+    tabletLarge: 960
+  },
+  card: {
+    borderRadius: {
+      desktop: "8px",
+      mobile: "4px",
+      tablet: "8px"
+    }
+  },
+  components: {
+    Button: {
+      borderRadius: "4px"
+    },
+    Checkbox: {
+      borderRadius: "2px",
+      square: false
+    },
+    Chip: {
+      backgroundColor: "#f4f4f4",
+      border: "none",
+      borderRadius: "16px",
+      color: "#706f6f",
+      fontWeight: 600,
+      isSelected: {
+        backgroundColor: "#EDEDED",
+        border: "none",
+        color: "#7A7A7A"
+      },
+      padding: "4px 16px"
+    },
+    Dialog: {
+      action: {
+        justifyContent: "center"
+      },
+      content: {
+        padding: 24,
+        textAlign: "center"
+      },
+      dialog: {
+        backgroundColor: "rgba(0, 0, 0, 0.26)",
+        borderRadius: "4px"
+      },
+      header: {
+        borderBottom: "2px solid #d3d3d3",
+        padding: 24,
+        titleColor: "#616161"
+      }
+    },
+    Field: {
+      color: "#373737",
+      fontWeight: 700,
+      placeholder: {
+        fontWeight: 700
+      }
+    },
+    FieldContainer: {
+      borderRadius: "4px"
+    },
+    Link: {
+      activeColor: "#787878",
+      defaultColor: "#616161",
+      hoverColor: "#303030",
+      isDark: {
+        activeColor: "#787878",
+        defaultColor: "#fff",
+        hoverColor: "#fff",
+        visitedColor: "#fff"
+      },
+      visitedColor: "#303030"
+    },
+    Table: {
+      border: "none",
+      borderRadius: "4px",
+      boxShadow: "0 0 12px rgba(0, 0, 0, 0.1)"
+    },
+    Typography: {
+      body1: {
+        fontSize: "16px",
+        fontWeight: 400,
+        letterSpacing: 0,
+        lineHeight: "24px"
+      },
+      body2: {
+        fontSize: "14px",
+        fontWeight: 400,
+        letterSpacing: 3,
+        lineHeight: "20px"
+      },
+      heading1: {
+        fontSize: "48px",
+        fontWeight: 700,
+        letterSpacing: 0,
+        lineHeight: "72px"
+      },
+      heading2: {
+        fontSize: "32px",
+        fontWeight: 700,
+        letterSpacing: 1,
+        lineHeight: "48px"
+      },
+      heading3: {
+        fontSize: "24px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "48px"
+      },
+      heading4: {
+        fontSize: "20px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "32px"
+      },
+      heading5: {
+        fontSize: "18px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "28px"
+      },
+      heading6: {
+        fontSize: "16px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "24px"
+      },
+      small: {
+        fontSize: "12px",
+        fontWeight: 400,
+        letterSpacing: 5,
+        lineHeight: "20px"
+      },
+      subtitle1: {
+        fontSize: "16px",
+        fontWeight: 600,
+        letterSpacing: 3,
+        lineHeight: "24px"
+      },
+      subtitle2: {
+        fontSize: "14px",
+        fontWeight: 600,
+        letterSpacing: 5,
+        lineHeight: "20px"
+      }
+    }
+  },
+  defaultFontFamily: "Arial",
+  elevations: {
+    above: {
+      boxShadow: "0 0 12px rgba(0, 0, 0, 0.1)",
+      zIndex: 1e3
+    },
+    backdrop: {
+      boxShadow: "none",
+      zIndex: 1007
+    },
+    flat1: {
+      boxShadow: "0 2px 2px rgba(0, 0, 0, 0.1)",
+      zIndex: 1
+    },
+    flat2: {
+      boxShadow: "0 2px 2px rgba(0, 0, 0, 0.1)",
+      zIndex: 1e3
+    },
+    overlay1: {
+      boxShadow: "0 0 24px rgba(0, 0, 0, 0.1)",
+      zIndex: 1006
+    },
+    overlay2: {
+      boxShadow: "0 0 24px rgba(0, 0, 0, 0.1)",
+      zIndex: 1008
+    },
+    popout1: {
+      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.1)",
+      zIndex: 1004
+    },
+    popout2: {
+      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.1)",
+      zIndex: 1005
+    },
+    raised: {
+      boxShadow: "0 8px 8px rgba(0, 0, 0, 0.1)",
+      zIndex: 1002
+    },
+    raisedInverted1: {
+      boxShadow: "0 -8px 8px rgba(0, 0, 0, 0.1)",
+      zIndex: 1002
+    },
+    raisedInverted2: {
+      boxShadow: "0 -8px 8px rgba(0, 0, 0, 0.1)",
+      zIndex: 1003
+    },
+    sticky: {
+      boxShadow: "none",
+      zIndex: 1001
+    }
+  },
+  fontFaces: [],
+  grid: {
+    desktop: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    },
+    desktopLarge: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    },
+    mobile: {
+      columns: 4,
+      gutter: 16,
+      horizontalSpace: 16,
+      verticalSpace: 16
+    },
+    mobileLarge: {
+      columns: 4,
+      gutter: 16,
+      horizontalSpace: 16,
+      verticalSpace: 16
+    },
+    tablet: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    },
+    tabletLarge: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    }
+  },
+  iconSize: {
+    extra_large: "48px",
+    large: "32px",
+    medium: "20px",
+    regular: "24px",
+    small: "16px"
+  },
+  palette: {
+    alert: {
+      light: "#ffe7ca",
+      main: "#725200"
+    },
+    black: "#000",
+    dataVisualization: {
+      highContrast: {
+        blue: "#3970C1",
+        blueDark: "#002039",
+        coral: "#F95D6A",
+        cyan: "#45CEE0",
+        green: "#B3D849",
+        orange: "#FFA600",
+        orangeDark: "#FF7C43",
+        pink: "#D12771",
+        purple: "#A05195",
+        purpleDark: "#665191"
+      },
+      lowContrast: {
+        blue: "#96B3DE",
+        blueDark: "#5283AB",
+        coral: "#FCA6AD",
+        cyan: "#BAE6FF",
+        green: "#DEF895",
+        orange: "#FDDFA5",
+        orangeDark: "#FCC2A9",
+        pink: "#E995BA",
+        purple: "#D4BBFF",
+        purpleDark: "#B1A2D0"
+      }
+    },
+    error: {
+      light: "#fee5e4",
+      main: "#a72514"
+    },
+    gray: {
+      dark: "#373737",
+      light: "#d3d3d3",
+      main: "#706f6f",
+      megaLight: "#f4f4f4",
+      ultraLight: "#f4f4f4"
+    },
+    info: {
+      light: "#dbedfd",
+      main: "#195f7f"
+    },
+    primary: {
+      dark: "#626262",
+      light: "#D6D6D6",
+      main: "#7A7A7A",
+      ultraLight: "#EDEDED"
+    },
+    secondary: {
+      dark: "#303030",
+      light: "#787878",
+      main: "#616161",
+      ultraLight: "#F4F4F4"
+    },
+    success: {
+      light: "#dcfddb",
+      main: "#286327"
+    },
+    white: "#fff"
+  },
+  spacingBase: 8,
+  typography: {
+    fontSize: {
+      L: "18px",
+      M: "16px",
+      S: "14px",
+      XL: "20px",
+      XS: "12px",
+      XXL: "24px",
+      XXS: "10px",
+      XXXL: "32px",
+      XXXXL: "48px"
+    },
+    fontWeight: {
+      bold: 700,
+      light: 200,
+      normal: 400,
+      semibold: 600
+    },
+    letterSpacing: {
+      L: 3,
+      M: 1,
+      S: 0,
+      XL: 5,
+      XXL: 8,
+      XXXL: 12
+    },
+    lineHeight: {
+      L: "28px",
+      M: "24px",
+      S: "20px",
+      XL: "32px",
+      XXL: "48px",
+      XXXL: "72px"
+    }
+  }
+};
+
+const themeData = {
+  fallback: fallbackThemeData
+};
+
 var __async$1 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -9877,6 +10236,11 @@ const useLoadFonts = ({ cdnURL = "/", scope, theme }) => {
   });
 };
 
+const fallbackBrandName = "fallback";
+const constants = {
+  fallbackBrandName
+};
+
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -9897,63 +10261,41 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const useLoadIcons = ({ brandName, cdnURL = "/" }) => {
-  const [iconIndex, setIconIndex] = React.useState();
-  React.useEffect(() => {
-    (() => __async(void 0, null, function* () {
-      try {
-        const result = yield axios.get("/brand/iconIndex.json", { baseURL: cdnURL });
-        setIconIndex(result.data);
-      } catch (error) {
-        logger.error({ error }, `Error loading icon index for brand ${brandName}`);
-      }
-    }))();
-  }, [brandName, cdnURL]);
+const useLoadIcons = ({ cdnURL = "/" }) => {
   return React.useCallback(
     (iconName) => __async(void 0, null, function* () {
-      if (iconIndex) {
-        const iconBrand = (iconIndex[iconName.toLowerCase()] || []).includes(brandName) ? brandName : brands.BrandName.FALLBACK;
-        const result = yield axios.get(
-          `/brand/${iconBrand}/icons/${iconName.toLowerCase()}.svg`,
-          {
-            baseURL: cdnURL,
-            responseType: "text"
-          }
-        );
-        return result.data;
-      }
-      return "";
+      const iconBrand = constants.fallbackBrandName;
+      const result = yield axios.get(
+        `/brand/${iconBrand}/icons/${iconName.toLowerCase()}.svg`,
+        {
+          baseURL: cdnURL,
+          responseType: "text"
+        }
+      );
+      return result.data;
     }),
-    [brandName, cdnURL, iconIndex]
+    [cdnURL]
   );
 };
 
-const useLoadTheme = ({ cdnURL = "/", brandName }) => {
-  const [theme, setTheme] = React.useState();
-  React.useEffect(() => {
-    axios.get(`/brand/${brandName}/theme.json`, { baseURL: cdnURL }).then(({ data }) => setTheme(new gigerTheme.Theme(data))).catch((error) => logger.error({ error }, `Error loading theme for brand ${brandName}`));
-  }, [brandName, cdnURL]);
-  return theme;
-};
-
 const AlchemyContext = React.createContext(void 0);
 const AlchemyProvider = ({
   baseURL = "https://api.shipengine.com",
-  brandName = brands.BrandName.FALLBACK,
   cdnURL = "/",
   children,
   getToken,
   locale = ((_a) => (_a = navigator == null ? void 0 : navigator.language) != null ? _a : "en-US")(),
   onError = _default,
-  scope = "lmnt"
+  scope = "lmnt",
+  themeConfig
 }) => {
-  const theme = useLoadTheme({ brandName, cdnURL });
+  const theme = new gigerTheme.Theme(themeConfig != null ? themeConfig : themeData.fallback);
   const fontStyles = useLoadFonts({ cdnURL, scope, theme });
-  const resolveIcon = useLoadIcons({ brandName, cdnURL });
+  const resolveIcon = useLoadIcons({ cdnURL });
   const iconCache = React.useMemo(giger.createIconCache, []);
   if (!theme)
     return null;
-  const contextValue = { baseURL, brandName, cdnURL, getToken, locale, onError, scope, theme };
+  const contextValue = { baseURL, cdnURL, getToken, locale, onError, scope, theme };
   return /* @__PURE__ */ jsx(AlchemyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(react.ThemeProvider, { theme, children: [
     /* @__PURE__ */ jsx(react.Global, { styles: [giger.getEmotionResetStyles(scope), fontStyles] }),
     /* @__PURE__ */ jsx(giger.GigerConfigProvider, { iconCache, resolveIcon, children: /* @__PURE__ */ jsx(ShipEngine, { baseURL, getToken, children }) })
@@ -9973,7 +10315,6 @@ const AlchemyTestProvider = ({ baseURL, children }) => {
   const getToken = React.useCallback(() => "none", []);
   const contextValue = {
     baseURL,
-    brandName: brands.BrandName.FALLBACK,
     cdnURL: "mockCdnUrl",
     getToken,
     onError: _default,
@@ -10669,7 +11010,6 @@ exports.useListShipments = useListShipments;
 exports.useListWarehouses = useListWarehouses;
 exports.useLoadFonts = useLoadFonts;
 exports.useLoadIcons = useLoadIcons;
-exports.useLoadTheme = useLoadTheme;
 exports.useNotifySalesOrderShipped = useNotifySalesOrderShipped;
 exports.useParseAddress = useParseAddress;
 exports.usePublishRateCard = usePublishRateCard;

package/index.mjs

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { createContext, forwardRef, useContext, createElement as createElement$1, Fragment, useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
 import { css, Global, ThemeProvider, CacheProvider } from '@emotion/react';
-import { BrandName } from '@packlink/brands';
 import { createIconCache, getEmotionResetStyles, GigerConfigProvider, GigerTestProvider, DefaultPortalRefProvider } from '@packlink/giger';
-import { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient } from 'react-query';
 import { Theme } from '@packlink/giger-theme';
+import { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient } from 'react-query';
 import { I18nextProvider } from 'react-i18next';
 import i18n from 'i18next';
 
@@ -9805,6 +9804,366 @@ const useUpdateWarehouse = () => {
   });
 };
 
+const fallbackThemeData = {
+  borderRadius: {
+    L: "16px",
+    M: "8px",
+    S: "4px",
+    XL: "32px",
+    XS: "2px"
+  },
+  breakPoints: {
+    desktop: 1280,
+    mobileLarge: 480,
+    tablet: 768,
+    tabletLarge: 960
+  },
+  card: {
+    borderRadius: {
+      desktop: "8px",
+      mobile: "4px",
+      tablet: "8px"
+    }
+  },
+  components: {
+    Button: {
+      borderRadius: "4px"
+    },
+    Checkbox: {
+      borderRadius: "2px",
+      square: false
+    },
+    Chip: {
+      backgroundColor: "#f4f4f4",
+      border: "none",
+      borderRadius: "16px",
+      color: "#706f6f",
+      fontWeight: 600,
+      isSelected: {
+        backgroundColor: "#EDEDED",
+        border: "none",
+        color: "#7A7A7A"
+      },
+      padding: "4px 16px"
+    },
+    Dialog: {
+      action: {
+        justifyContent: "center"
+      },
+      content: {
+        padding: 24,
+        textAlign: "center"
+      },
+      dialog: {
+        backgroundColor: "rgba(0, 0, 0, 0.26)",
+        borderRadius: "4px"
+      },
+      header: {
+        borderBottom: "2px solid #d3d3d3",
+        padding: 24,
+        titleColor: "#616161"
+      }
+    },
+    Field: {
+      color: "#373737",
+      fontWeight: 700,
+      placeholder: {
+        fontWeight: 700
+      }
+    },
+    FieldContainer: {
+      borderRadius: "4px"
+    },
+    Link: {
+      activeColor: "#787878",
+      defaultColor: "#616161",
+      hoverColor: "#303030",
+      isDark: {
+        activeColor: "#787878",
+        defaultColor: "#fff",
+        hoverColor: "#fff",
+        visitedColor: "#fff"
+      },
+      visitedColor: "#303030"
+    },
+    Table: {
+      border: "none",
+      borderRadius: "4px",
+      boxShadow: "0 0 12px rgba(0, 0, 0, 0.1)"
+    },
+    Typography: {
+      body1: {
+        fontSize: "16px",
+        fontWeight: 400,
+        letterSpacing: 0,
+        lineHeight: "24px"
+      },
+      body2: {
+        fontSize: "14px",
+        fontWeight: 400,
+        letterSpacing: 3,
+        lineHeight: "20px"
+      },
+      heading1: {
+        fontSize: "48px",
+        fontWeight: 700,
+        letterSpacing: 0,
+        lineHeight: "72px"
+      },
+      heading2: {
+        fontSize: "32px",
+        fontWeight: 700,
+        letterSpacing: 1,
+        lineHeight: "48px"
+      },
+      heading3: {
+        fontSize: "24px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "48px"
+      },
+      heading4: {
+        fontSize: "20px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "32px"
+      },
+      heading5: {
+        fontSize: "18px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "28px"
+      },
+      heading6: {
+        fontSize: "16px",
+        fontWeight: 700,
+        letterSpacing: 3,
+        lineHeight: "24px"
+      },
+      small: {
+        fontSize: "12px",
+        fontWeight: 400,
+        letterSpacing: 5,
+        lineHeight: "20px"
+      },
+      subtitle1: {
+        fontSize: "16px",
+        fontWeight: 600,
+        letterSpacing: 3,
+        lineHeight: "24px"
+      },
+      subtitle2: {
+        fontSize: "14px",
+        fontWeight: 600,
+        letterSpacing: 5,
+        lineHeight: "20px"
+      }
+    }
+  },
+  defaultFontFamily: "Arial",
+  elevations: {
+    above: {
+      boxShadow: "0 0 12px rgba(0, 0, 0, 0.1)",
+      zIndex: 1e3
+    },
+    backdrop: {
+      boxShadow: "none",
+      zIndex: 1007
+    },
+    flat1: {
+      boxShadow: "0 2px 2px rgba(0, 0, 0, 0.1)",
+      zIndex: 1
+    },
+    flat2: {
+      boxShadow: "0 2px 2px rgba(0, 0, 0, 0.1)",
+      zIndex: 1e3
+    },
+    overlay1: {
+      boxShadow: "0 0 24px rgba(0, 0, 0, 0.1)",
+      zIndex: 1006
+    },
+    overlay2: {
+      boxShadow: "0 0 24px rgba(0, 0, 0, 0.1)",
+      zIndex: 1008
+    },
+    popout1: {
+      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.1)",
+      zIndex: 1004
+    },
+    popout2: {
+      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.1)",
+      zIndex: 1005
+    },
+    raised: {
+      boxShadow: "0 8px 8px rgba(0, 0, 0, 0.1)",
+      zIndex: 1002
+    },
+    raisedInverted1: {
+      boxShadow: "0 -8px 8px rgba(0, 0, 0, 0.1)",
+      zIndex: 1002
+    },
+    raisedInverted2: {
+      boxShadow: "0 -8px 8px rgba(0, 0, 0, 0.1)",
+      zIndex: 1003
+    },
+    sticky: {
+      boxShadow: "none",
+      zIndex: 1001
+    }
+  },
+  fontFaces: [],
+  grid: {
+    desktop: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    },
+    desktopLarge: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    },
+    mobile: {
+      columns: 4,
+      gutter: 16,
+      horizontalSpace: 16,
+      verticalSpace: 16
+    },
+    mobileLarge: {
+      columns: 4,
+      gutter: 16,
+      horizontalSpace: 16,
+      verticalSpace: 16
+    },
+    tablet: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    },
+    tabletLarge: {
+      columns: 12,
+      gutter: 24,
+      horizontalSpace: 16,
+      verticalSpace: 24
+    }
+  },
+  iconSize: {
+    extra_large: "48px",
+    large: "32px",
+    medium: "20px",
+    regular: "24px",
+    small: "16px"
+  },
+  palette: {
+    alert: {
+      light: "#ffe7ca",
+      main: "#725200"
+    },
+    black: "#000",
+    dataVisualization: {
+      highContrast: {
+        blue: "#3970C1",
+        blueDark: "#002039",
+        coral: "#F95D6A",
+        cyan: "#45CEE0",
+        green: "#B3D849",
+        orange: "#FFA600",
+        orangeDark: "#FF7C43",
+        pink: "#D12771",
+        purple: "#A05195",
+        purpleDark: "#665191"
+      },
+      lowContrast: {
+        blue: "#96B3DE",
+        blueDark: "#5283AB",
+        coral: "#FCA6AD",
+        cyan: "#BAE6FF",
+        green: "#DEF895",
+        orange: "#FDDFA5",
+        orangeDark: "#FCC2A9",
+        pink: "#E995BA",
+        purple: "#D4BBFF",
+        purpleDark: "#B1A2D0"
+      }
+    },
+    error: {
+      light: "#fee5e4",
+      main: "#a72514"
+    },
+    gray: {
+      dark: "#373737",
+      light: "#d3d3d3",
+      main: "#706f6f",
+      megaLight: "#f4f4f4",
+      ultraLight: "#f4f4f4"
+    },
+    info: {
+      light: "#dbedfd",
+      main: "#195f7f"
+    },
+    primary: {
+      dark: "#626262",
+      light: "#D6D6D6",
+      main: "#7A7A7A",
+      ultraLight: "#EDEDED"
+    },
+    secondary: {
+      dark: "#303030",
+      light: "#787878",
+      main: "#616161",
+      ultraLight: "#F4F4F4"
+    },
+    success: {
+      light: "#dcfddb",
+      main: "#286327"
+    },
+    white: "#fff"
+  },
+  spacingBase: 8,
+  typography: {
+    fontSize: {
+      L: "18px",
+      M: "16px",
+      S: "14px",
+      XL: "20px",
+      XS: "12px",
+      XXL: "24px",
+      XXS: "10px",
+      XXXL: "32px",
+      XXXXL: "48px"
+    },
+    fontWeight: {
+      bold: 700,
+      light: 200,
+      normal: 400,
+      semibold: 600
+    },
+    letterSpacing: {
+      L: 3,
+      M: 1,
+      S: 0,
+      XL: 5,
+      XXL: 8,
+      XXXL: 12
+    },
+    lineHeight: {
+      L: "28px",
+      M: "24px",
+      S: "20px",
+      XL: "32px",
+      XXL: "48px",
+      XXXL: "72px"
+    }
+  }
+};
+
+const themeData = {
+  fallback: fallbackThemeData
+};
+
 var __async$1 = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -9855,6 +10214,11 @@ const useLoadFonts = ({ cdnURL = "/", scope, theme }) => {
   });
 };
 
+const fallbackBrandName = "fallback";
+const constants = {
+  fallbackBrandName
+};
+
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -9875,63 +10239,41 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const useLoadIcons = ({ brandName, cdnURL = "/" }) => {
-  const [iconIndex, setIconIndex] = useState();
-  useEffect(() => {
-    (() => __async(void 0, null, function* () {
-      try {
-        const result = yield axios.get("/brand/iconIndex.json", { baseURL: cdnURL });
-        setIconIndex(result.data);
-      } catch (error) {
-        logger.error({ error }, `Error loading icon index for brand ${brandName}`);
-      }
-    }))();
-  }, [brandName, cdnURL]);
+const useLoadIcons = ({ cdnURL = "/" }) => {
   return useCallback(
     (iconName) => __async(void 0, null, function* () {
-      if (iconIndex) {
-        const iconBrand = (iconIndex[iconName.toLowerCase()] || []).includes(brandName) ? brandName : BrandName.FALLBACK;
-        const result = yield axios.get(
-          `/brand/${iconBrand}/icons/${iconName.toLowerCase()}.svg`,
-          {
-            baseURL: cdnURL,
-            responseType: "text"
-          }
-        );
-        return result.data;
-      }
-      return "";
+      const iconBrand = constants.fallbackBrandName;
+      const result = yield axios.get(
+        `/brand/${iconBrand}/icons/${iconName.toLowerCase()}.svg`,
+        {
+          baseURL: cdnURL,
+          responseType: "text"
+        }
+      );
+      return result.data;
     }),
-    [brandName, cdnURL, iconIndex]
+    [cdnURL]
   );
 };
 
-const useLoadTheme = ({ cdnURL = "/", brandName }) => {
-  const [theme, setTheme] = useState();
-  useEffect(() => {
-    axios.get(`/brand/${brandName}/theme.json`, { baseURL: cdnURL }).then(({ data }) => setTheme(new Theme(data))).catch((error) => logger.error({ error }, `Error loading theme for brand ${brandName}`));
-  }, [brandName, cdnURL]);
-  return theme;
-};
-
 const AlchemyContext = createContext(void 0);
 const AlchemyProvider = ({
   baseURL = "https://api.shipengine.com",
-  brandName = BrandName.FALLBACK,
   cdnURL = "/",
   children,
   getToken,
   locale = ((_a) => (_a = navigator == null ? void 0 : navigator.language) != null ? _a : "en-US")(),
   onError = _default,
-  scope = "lmnt"
+  scope = "lmnt",
+  themeConfig
 }) => {
-  const theme = useLoadTheme({ brandName, cdnURL });
+  const theme = new Theme(themeConfig != null ? themeConfig : themeData.fallback);
   const fontStyles = useLoadFonts({ cdnURL, scope, theme });
-  const resolveIcon = useLoadIcons({ brandName, cdnURL });
+  const resolveIcon = useLoadIcons({ cdnURL });
   const iconCache = useMemo(createIconCache, []);
   if (!theme)
     return null;
-  const contextValue = { baseURL, brandName, cdnURL, getToken, locale, onError, scope, theme };
+  const contextValue = { baseURL, cdnURL, getToken, locale, onError, scope, theme };
   return /* @__PURE__ */ jsx(AlchemyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(ThemeProvider, { theme, children: [
     /* @__PURE__ */ jsx(Global, { styles: [getEmotionResetStyles(scope), fontStyles] }),
     /* @__PURE__ */ jsx(GigerConfigProvider, { iconCache, resolveIcon, children: /* @__PURE__ */ jsx(ShipEngine, { baseURL, getToken, children }) })
@@ -9951,7 +10293,6 @@ const AlchemyTestProvider = ({ baseURL, children }) => {
   const getToken = useCallback(() => "none", []);
   const contextValue = {
     baseURL,
-    brandName: BrandName.FALLBACK,
     cdnURL: "mockCdnUrl",
     getToken,
     onError: _default,
@@ -10562,4 +10903,4 @@ const alchemy = {
   createElement
 };
 
-export { AccountSettingsAPI, AddressesAPI, AlchemyContext, AlchemyProvider, AlchemyTestProvider, CarriersAPI, CodedError, ConfirmationType, CreditCardVendor, Currency, CustomPackagesAPI, CustomsContentsType, CustomsNonDeliveryType, Element, ErrorBoundary, FundingSourcesAPI, InsuranceAPI, InsuranceProviderType, LabelsAPI, OrderSourcesAPI, RateCardStatus, RateCardsAPI, RatesAPI, types as SE, SalesOrderShipmentsAPI, SalesOrdersAPI, ShipEngine, ShipEngineAPI, ShipEngineContext, ShipmentsAPI, WarehousesAPI, alchemy, alchemy as default, delay, getEndUserIpAddress, isCodedError, isCodedErrors, logger, memoizedCreateCache, onError, retryUntil, useAddFunds, useAlchemy, useCalculateRates, useConnectCarrier, useCreateFundingSource, useCreateLabel, useCreateRateCard, useCreateSalesOrderShipment, useCreateShipment, useCreateWarehouse, useDeleteRateCard, useDeleteWarehouse, useDownloadRateCard, useFundingSourcesAddFunds, useGetAccountSettings, useGetAutoFundingConfiguration, useGetCarrierById, useGetCountriesByCarrier, useGetCurrenciesByCarrier, useGetFundingSourceById, useGetInsuranceAccount, useGetLabel, useGetPackageRatingGroupByCarrier, useGetRateCardById, useGetSalesOrder, useGetSalesOrderShipment, useGetServicesByCarrier, useGetShipment, useGetShipmentRates, useGetWalletHistory, useGetZonesByCarrier, useI18n, useListCarriers, useListCustomPackageTypes, useListFundingSources, useListLabels, useListOrderSources, useListRateCards, useListSalesOrderShipments, useListSalesOrders, useListShipments, useListWarehouses, useLoadFonts, useLoadIcons, useLoadTheme, useNotifySalesOrderShipped, useParseAddress, usePublishRateCard, useRefreshOrderSource, useRefreshOrderSourceAsync, useRegisterCarrier, useShipEngine, useUpdateAccountSettings, useUpdateAutoFunding, useUpdateFundingSource, useUpdateRateCard, useUpdateSalesOrderShipment, useUpdateWarehouse, useUploadRateCard, useValidateAddresses, useVoidLabel };
+export { AccountSettingsAPI, AddressesAPI, AlchemyContext, AlchemyProvider, AlchemyTestProvider, CarriersAPI, CodedError, ConfirmationType, CreditCardVendor, Currency, CustomPackagesAPI, CustomsContentsType, CustomsNonDeliveryType, Element, ErrorBoundary, FundingSourcesAPI, InsuranceAPI, InsuranceProviderType, LabelsAPI, OrderSourcesAPI, RateCardStatus, RateCardsAPI, RatesAPI, types as SE, SalesOrderShipmentsAPI, SalesOrdersAPI, ShipEngine, ShipEngineAPI, ShipEngineContext, ShipmentsAPI, WarehousesAPI, alchemy, alchemy as default, delay, getEndUserIpAddress, isCodedError, isCodedErrors, logger, memoizedCreateCache, onError, retryUntil, useAddFunds, useAlchemy, useCalculateRates, useConnectCarrier, useCreateFundingSource, useCreateLabel, useCreateRateCard, useCreateSalesOrderShipment, useCreateShipment, useCreateWarehouse, useDeleteRateCard, useDeleteWarehouse, useDownloadRateCard, useFundingSourcesAddFunds, useGetAccountSettings, useGetAutoFundingConfiguration, useGetCarrierById, useGetCountriesByCarrier, useGetCurrenciesByCarrier, useGetFundingSourceById, useGetInsuranceAccount, useGetLabel, useGetPackageRatingGroupByCarrier, useGetRateCardById, useGetSalesOrder, useGetSalesOrderShipment, useGetServicesByCarrier, useGetShipment, useGetShipmentRates, useGetWalletHistory, useGetZonesByCarrier, useI18n, useListCarriers, useListCustomPackageTypes, useListFundingSources, useListLabels, useListOrderSources, useListRateCards, useListSalesOrderShipments, useListSalesOrders, useListShipments, useListWarehouses, useLoadFonts, useLoadIcons, useNotifySalesOrderShipped, useParseAddress, usePublishRateCard, useRefreshOrderSource, useRefreshOrderSourceAsync, useRegisterCarrier, useShipEngine, useUpdateAccountSettings, useUpdateAutoFunding, useUpdateFundingSource, useUpdateRateCard, useUpdateSalesOrderShipment, useUpdateWarehouse, useUploadRateCard, useValidateAddresses, useVoidLabel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/alchemy",
-  "version": "2.4.1",
+  "version": "3.0.1",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -17,9 +17,8 @@
   },
   "peerDependencies": {
     "@emotion/react": "11.x",
-    "@packlink/brands": "4.x.x",
-    "@packlink/giger-theme": "1.x.x",
-    "@packlink/giger": "68.x.x",
+    "@packlink/giger-theme": "2.x.x",
+    "@packlink/giger": ">= 68.19.6 < 69",
     "i18next": "22.x",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x",

package/themes/fallback.d.ts

@@ -0,0 +1,3 @@
+import { CustomThemeData } from "@packlink/giger-theme";
+declare const fallbackThemeData: CustomThemeData;
+export default fallbackThemeData;

package/themes/index.d.ts

@@ -0,0 +1,4 @@
+declare const themeData: {
+    fallback: import("@packlink/giger-theme/dist/lib/ThemeTypes").CustomThemeData;
+};
+export default themeData;

package/components/alchemy-provider/hooks/use-load-theme.d.ts

@@ -1,7 +0,0 @@
-import { BrandName } from "@packlink/brands";
-import { Theme } from "@packlink/giger-theme";
-export interface UseLoadThemeProps {
-    brandName: BrandName;
-    cdnURL?: string;
-}
-export declare const useLoadTheme: ({ cdnURL, brandName }: UseLoadThemeProps) => Theme | undefined;