@shipengine/alchemy 5.3.0 → 5.4.0

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

@@ -23,8 +23,7 @@ export type AlchemyProviderProps = {
     onError?: AlchemyErrorHandler;
     /** Scope of the Alchemy Provider. Can be null to not specify a specific element */
     scope?: string | null;
-    scopeTheme?: boolean;
     themeConfig?: CustomThemeData;
 } & ShipEngineAPIConfig;
-export declare const AlchemyProvider: ({ baseURL, cdnURL, container, children, getToken, locale: localeProp, onError, scope, scopeTheme, themeConfig, onApiError, headers, defaultQueryClientOptions, }: AlchemyProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const AlchemyProvider: ({ baseURL, cdnURL, container, children, getToken, locale: localeProp, onError, scope, themeConfig, onApiError, headers, defaultQueryClientOptions, }: AlchemyProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const useAlchemy: () => AlchemyContextValue;

package/index.js

@@ -10511,7 +10511,18 @@ const fallbackTheme = {
       light: '#d3d3d3',
       ultraLight: '#f4f4f4',
       megaLight: '#fafafa',
-      dark: '#373737'
+      dark: '#373737',
+      25: '#F7F7F8',
+      50: '#f1f2f3',
+      100: '#e4e5e7',
+      200: '#cfd1d3',
+      300: '#afb3b6',
+      400: '#8d9196',
+      500: '#71767a',
+      600: '#56595d',
+      700: '#424548',
+      800: '#27292a',
+      900: '#0f0f10'
     },
     black: '#000',
     white: '#fff',
@@ -10717,6 +10728,8 @@ class Theme {
     this.breakPoints = merge$2(fallbackTheme.breakPoints, breakPoints);
     this.iconSize = merge$2(fallbackTheme.iconSize, iconSize);
     this.palette = merge$2(fallbackTheme.palette, palette);
+    // Adds backwards compatibility with old grays naming
+    this.palette.gray = mergeGrays(fallbackTheme.palette.gray, palette.gray);
     this.spacingBase = spacingBase || fallbackTheme.spacingBase;
     this.typography = merge$2(fallbackTheme.typography, typography);
     this.card = merge$2(fallbackTheme.card, card);
@@ -10781,6 +10794,17 @@ class Theme {
   };
   getLineHeight = (fontSizePx, lineHeightPx) => this.removePx(lineHeightPx) / this.removePx(fontSizePx);
 }
+function mergeGrays(fallbackGray, gray) {
+  return {
+    ...fallbackGray,
+    ...gray,
+    50: (gray === null || gray === void 0 ? void 0 : gray[50]) || (gray === null || gray === void 0 ? void 0 : gray.megaLight) || fallbackGray.megaLight,
+    100: (gray === null || gray === void 0 ? void 0 : gray[100]) || (gray === null || gray === void 0 ? void 0 : gray.ultraLight) || fallbackGray.ultraLight,
+    200: (gray === null || gray === void 0 ? void 0 : gray[200]) || (gray === null || gray === void 0 ? void 0 : gray.light) || fallbackGray.light,
+    600: (gray === null || gray === void 0 ? void 0 : gray[600]) || (gray === null || gray === void 0 ? void 0 : gray.main) || fallbackGray.main,
+    900: (gray === null || gray === void 0 ? void 0 : gray[900]) || (gray === null || gray === void 0 ? void 0 : gray.dark) || fallbackGray.dark
+  };
+}
 
 var AccountBillingPlanChangeType = /* @__PURE__ */ ((AccountBillingPlanChangeType2) => {
   AccountBillingPlanChangeType2["Downgrade"] = "Downgrade";
@@ -37067,7 +37091,6 @@ const AlchemyProvider = ({
   locale: localeProp,
   onError = _default,
   scope = "lmnt",
-  scopeTheme = false,
   themeConfig,
   onApiError,
   headers,
@@ -37092,7 +37115,7 @@ const AlchemyProvider = ({
       reference: scope || void 0,
       cdnUrl: cdnURL,
       resolveIcon,
-      theme: scopeTheme ? { [giger.THEME_ID]: theme } : theme,
+      theme,
       children: /* @__PURE__ */ jsx(
         ShipEngine,
         {

package/index.mjs

@@ -1,7 +1,7 @@
 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 } from 'react/jsx-runtime';
-import { GigerProvider, THEME_ID, GigerTestProvider, DefaultPortalRefProvider } from '@shipengine/giger';
+import { GigerProvider, GigerTestProvider, DefaultPortalRefProvider } from '@shipengine/giger';
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { CacheProvider } from '@emotion/react';
 import { I18nextProvider } from 'react-i18next';
@@ -10489,7 +10489,18 @@ const fallbackTheme = {
       light: '#d3d3d3',
       ultraLight: '#f4f4f4',
       megaLight: '#fafafa',
-      dark: '#373737'
+      dark: '#373737',
+      25: '#F7F7F8',
+      50: '#f1f2f3',
+      100: '#e4e5e7',
+      200: '#cfd1d3',
+      300: '#afb3b6',
+      400: '#8d9196',
+      500: '#71767a',
+      600: '#56595d',
+      700: '#424548',
+      800: '#27292a',
+      900: '#0f0f10'
     },
     black: '#000',
     white: '#fff',
@@ -10695,6 +10706,8 @@ class Theme {
     this.breakPoints = merge$2(fallbackTheme.breakPoints, breakPoints);
     this.iconSize = merge$2(fallbackTheme.iconSize, iconSize);
     this.palette = merge$2(fallbackTheme.palette, palette);
+    // Adds backwards compatibility with old grays naming
+    this.palette.gray = mergeGrays(fallbackTheme.palette.gray, palette.gray);
     this.spacingBase = spacingBase || fallbackTheme.spacingBase;
     this.typography = merge$2(fallbackTheme.typography, typography);
     this.card = merge$2(fallbackTheme.card, card);
@@ -10759,6 +10772,17 @@ class Theme {
   };
   getLineHeight = (fontSizePx, lineHeightPx) => this.removePx(lineHeightPx) / this.removePx(fontSizePx);
 }
+function mergeGrays(fallbackGray, gray) {
+  return {
+    ...fallbackGray,
+    ...gray,
+    50: (gray === null || gray === void 0 ? void 0 : gray[50]) || (gray === null || gray === void 0 ? void 0 : gray.megaLight) || fallbackGray.megaLight,
+    100: (gray === null || gray === void 0 ? void 0 : gray[100]) || (gray === null || gray === void 0 ? void 0 : gray.ultraLight) || fallbackGray.ultraLight,
+    200: (gray === null || gray === void 0 ? void 0 : gray[200]) || (gray === null || gray === void 0 ? void 0 : gray.light) || fallbackGray.light,
+    600: (gray === null || gray === void 0 ? void 0 : gray[600]) || (gray === null || gray === void 0 ? void 0 : gray.main) || fallbackGray.main,
+    900: (gray === null || gray === void 0 ? void 0 : gray[900]) || (gray === null || gray === void 0 ? void 0 : gray.dark) || fallbackGray.dark
+  };
+}
 
 var AccountBillingPlanChangeType = /* @__PURE__ */ ((AccountBillingPlanChangeType2) => {
   AccountBillingPlanChangeType2["Downgrade"] = "Downgrade";
@@ -37045,7 +37069,6 @@ const AlchemyProvider = ({
   locale: localeProp,
   onError = _default,
   scope = "lmnt",
-  scopeTheme = false,
   themeConfig,
   onApiError,
   headers,
@@ -37070,7 +37093,7 @@ const AlchemyProvider = ({
       reference: scope || void 0,
       cdnUrl: cdnURL,
       resolveIcon,
-      theme: scopeTheme ? { [THEME_ID]: theme } : theme,
+      theme,
       children: /* @__PURE__ */ jsx(
         ShipEngine,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/alchemy",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -18,7 +18,7 @@
   },
   "peerDependencies": {
     "@emotion/react": "11.x",
-    "@shipengine/giger": "1.x.x",
+    "@shipengine/giger": ">=1.10.x",
     "@tanstack/react-query": "4.x",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x",