@kaizen/components 1.4.22-canary.4 → 1.4.22-canary.5

package/dist/iife/KaizenProvider/ThemeProvider/index.js

@@ -1382,7 +1382,7 @@
             }
             return dispatcher.useContext(Context2);
           }
-          function useState3(initialState) {
+          function useState2(initialState) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useState(initialState);
           }
@@ -2184,7 +2184,7 @@
           exports.useMemo = useMemo;
           exports.useReducer = useReducer;
           exports.useRef = useRef;
-          exports.useState = useState3;
+          exports.useState = useState2;
           exports.useSyncExternalStore = useSyncExternalStore;
           exports.useTransition = useTransition;
           exports.version = ReactVersion;
@@ -2913,322 +2913,16 @@
   });
 
   // src/KaizenProvider/ThemeProvider/ThemeProvider.tsx
-  var import_react2 = __toESM(require_react());
+  var import_react = __toESM(require_react());
 
-  // ../design-tokens/dist/esm/index.js
+  // ../design-tokens/src/lib/addExtraThemeEntries.ts
   var import_color_string = __toESM(require_color_string());
+
+  // ../design-tokens/src/lib/cssVariables.ts
   var import_lodash = __toESM(require_lodash());
-  var import_react = __toESM(require_react());
-  var heartTheme = {
-    themeKey: "heart",
-    animation: {
-      easingFunction: {
-        easeInOut: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
-        easeIn: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
-        easeOut: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-        linear: "linear",
-        bounceIn: "cubic-bezier(0.485, 0.155, 0.24, 1.245)",
-        bounceOut: "cubic-bezier(0.485, 0.155, 0.515, 0.845)",
-        bounceInOut: "cubic-bezier(0.76, -0.245, 0.24, 1.245)"
-      },
-      duration: {
-        instant: "0ms",
-        immediate: "100ms",
-        rapid: "200ms",
-        fast: "300ms",
-        slow: "400ms",
-        deliberate: "700ms"
-      }
-    },
-    border: {
-      solid: {
-        borderWidth: "2px",
-        borderRadius: "7px",
-        borderStyle: "solid",
-        borderColor: "#e1e2ea"
-      },
-      dashed: {
-        borderWidth: "2px",
-        borderRadius: "7px",
-        borderStyle: "dashed"
-      },
-      borderless: {
-        borderWidth: "2px",
-        borderRadius: "7px",
-        borderStyle: "solid",
-        borderColor: "transparent"
-      },
-      focusRing: {
-        borderWidth: "2px",
-        borderRadius: "10px",
-        borderStyle: "solid"
-      }
-    },
-    color: {
-      purple: {
-        100: "#f4edf8",
-        200: "#dfc9ea",
-        300: "#c9a5dd",
-        400: "#ae67b1",
-        500: "#844587",
-        600: "#5f3361",
-        700: "#4a234d",
-        800: "#2f2438"
-      },
-      blue: {
-        100: "#e6f6ff",
-        200: "#bde2f5",
-        300: "#73c0e8",
-        400: "#008bd6",
-        500: "#0168b3",
-        600: "#004970",
-        700: "#003157"
-      },
-      green: {
-        100: "#e8f8f4",
-        200: "#c4ede2",
-        300: "#8fdbc7",
-        400: "#5dcbad",
-        500: "#44a289",
-        600: "#2c7d67",
-        700: "#22594a"
-      },
-      yellow: {
-        100: "#fff9e4",
-        200: "#ffeeb3",
-        300: "#ffe36e",
-        400: "#ffca4d",
-        500: "#ffb600",
-        600: "#c68600",
-        700: "#876400"
-      },
-      red: {
-        100: "#fdeaee",
-        200: "#f9c2cb",
-        300: "#f597a8",
-        400: "#e0707d",
-        500: "#c93b55",
-        600: "#a82433",
-        700: "#6c1e20"
-      },
-      orange: {
-        100: "#fff0e8",
-        200: "#ffd1b9",
-        300: "#ffb08a",
-        400: "#ff9461",
-        500: "#e96c2f",
-        600: "#b74302",
-        700: "#903c00"
-      },
-      gray: {
-        100: "#f9f9f9",
-        200: "#f4f4f5",
-        300: "#eaeaec",
-        400: "#cdcdd0",
-        500: "#8c8c97",
-        600: "#524e56"
-      },
-      white: "#ffffff"
-    },
-    dataViz: {
-      favorable: "#7dd5bd",
-      unfavorable: "#e68d97"
-    },
-    layout: {
-      contentMaxWidth: "1392px",
-      contentMaxWidthWithSidebar: "1080px",
-      contentSideMargin: "72px",
-      mobileActionsDrawerHeight: "60px",
-      navigationBarHeight: "72px",
-      breakpoints: {
-        medium: "768px",
-        large: "1080px"
-      }
-    },
-    shadow: {
-      small: {
-        boxShadow: "0px 3px 16px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1)"
-      },
-      large: {
-        boxShadow: "0px 8px 40px rgba(0, 0, 0, 0.08), 0px 3px 9px rgba(0, 0, 0, 0.1)"
-      }
-    },
-    spacing: {
-      xs: "0.375rem",
-      sm: "0.75rem",
-      md: "1.5rem",
-      lg: "2.25rem",
-      xl: "3rem",
-      xxl: "3.75rem",
-      xxxl: "4.5rem",
-      xxxxl: "5.25rem",
-      xxxxxl: "6rem",
-      0: "0",
-      1: ".0625rem",
-      2: ".125rem",
-      4: ".25rem",
-      6: ".375rem",
-      8: ".5rem",
-      12: ".75rem",
-      16: "1rem",
-      24: "1.5rem",
-      32: "2rem",
-      40: "2.5rem",
-      48: "3rem",
-      56: "3.5rem",
-      64: "4rem",
-      72: "4.5rem",
-      80: "5rem",
-      96: "6rem",
-      112: "7rem",
-      128: "8rem",
-      160: "10rem",
-      200: "12.5rem",
-      240: "15rem",
-      280: "17.5rem",
-      320: "20rem"
-    },
-    typography: {
-      dataLarge: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "5.25rem",
-        lineHeight: "5.25rem",
-        letterSpacing: "normal"
-      },
-      dataLargeUnits: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "2.625rem",
-        lineHeight: "5.25rem",
-        letterSpacing: "normal"
-      },
-      dataMedium: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "3rem",
-        lineHeight: "5rem",
-        letterSpacing: "normal"
-      },
-      dataMediumUnits: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "1.5rem",
-        lineHeight: "5rem",
-        letterSpacing: "normal"
-      },
-      dataSmall: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "1.5rem",
-        lineHeight: "1.5rem",
-        letterSpacing: "normal"
-      },
-      dataSmallUnits: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "1.125rem",
-        lineHeight: "1.5rem",
-        letterSpacing: "normal"
-      },
-      display0: {
-        fontFamily: '"Tiempos Headline", Georgia, serif',
-        fontWeight: 800,
-        fontSize: "4.5rem",
-        lineHeight: "5.25rem",
-        letterSpacing: "0em"
-      },
-      heading1: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "2.125rem",
-        lineHeight: "2.625rem",
-        letterSpacing: "normal"
-      },
-      heading2: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "1.75rem",
-        lineHeight: "2.25rem",
-        letterSpacing: "normal"
-      },
-      heading3: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "1.375rem",
-        lineHeight: "1.875rem",
-        letterSpacing: "normal"
-      },
-      heading4: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 600,
-        fontSize: "1.125rem",
-        lineHeight: "1.5rem",
-        letterSpacing: "normal"
-      },
-      heading5: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 600,
-        fontSize: "1rem",
-        lineHeight: "1.5rem",
-        letterSpacing: "normal"
-      },
-      heading6: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "0.875rem",
-        lineHeight: "1.5rem",
-        letterSpacing: "normal"
-      },
-      paragraphIntroLede: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 400,
-        fontSize: "1.25rem",
-        lineHeight: "1.875rem",
-        letterSpacing: "0"
-      },
-      paragraphBody: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 400,
-        fontSize: "1rem",
-        lineHeight: "1.5rem",
-        letterSpacing: "normal"
-      },
-      paragraphSmall: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 400,
-        fontSize: "0.875rem",
-        lineHeight: "1.125rem",
-        letterSpacing: "normal"
-      },
-      paragraphExtraSmall: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 400,
-        fontSize: "0.75rem",
-        lineHeight: "1.125rem",
-        letterSpacing: "normal"
-      },
-      paragraphBold: {
-        fontWeight: 600
-      },
-      buttonPrimary: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 700,
-        fontSize: "1.125rem",
-        lineHeight: "1.5rem",
-        letterSpacing: "normal"
-      },
-      buttonSecondary: {
-        fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-        fontWeight: 500,
-        fontSize: "1rem",
-        lineHeight: "1.5rem",
-        letterSpacing: "normal"
-      }
-    }
-  };
-  var defaultTheme = heartTheme;
   var objectPathToCssVarIdentifier = (path) => `--${path.map(import_lodash.default).join("-")}`;
+
+  // ../design-tokens/src/lib/addExtraThemeEntries.ts
   var addExtraThemeEntries = (path, key, value, printValue, {
     augmentWithId
   }) => {
@@ -3250,6 +2944,8 @@
     }
     return result;
   };
+
+  // ../design-tokens/src/lib/mapLeafsOfObject.ts
   function mapLeafsOfObject(object, mapper) {
     const recurser = (currentPath, obj) => {
       const handleEntry = (key, value) => {
@@ -3269,6 +2965,8 @@
     };
     return recurser([], object);
   }
+
+  // ../design-tokens/src/lib/makeCssVariableDefinitionsMap.ts
   function makeCssVariableDefinitionsMap(theme) {
     let accumulatedCssVariables = {};
     mapLeafsOfObject(theme, (path, value) => {
@@ -3287,7 +2985,6 @@
     });
     return accumulatedCssVariables;
   }
-  var ThemeContext = import_react.default.createContext(defaultTheme);
 
   // src/KaizenProvider/ThemeProvider/ThemeManager.ts
   var ThemeManager = class {
@@ -3341,7 +3038,7 @@
   };
 
   // src/KaizenProvider/ThemeProvider/themes/heart.ts
-  var heartTheme2 = {
+  var heartTheme = {
     themeKey: "heart",
     animation: {
       easingFunction: {
@@ -3651,21 +3348,21 @@
   };
 
   // src/KaizenProvider/ThemeProvider/themes/index.ts
-  var defaultTheme2 = heartTheme2;
+  var defaultTheme = heartTheme;
 
   // src/KaizenProvider/ThemeProvider/ThemeProvider.tsx
-  var ThemeContext2 = (0, import_react2.createContext)(defaultTheme2);
+  var ThemeContext = (0, import_react.createContext)(defaultTheme);
   var ThemeProvider = ({
     themeManager,
     ...props
   }) => {
-    const [themeManagerInstance] = (0, import_react2.useState)(
-      () => themeManager || new ThemeManager(defaultTheme2)
+    const [themeManagerInstance] = (0, import_react.useState)(
+      () => themeManager || new ThemeManager(defaultTheme)
     );
-    const [theme, setTheme] = (0, import_react2.useState)(
+    const [theme, setTheme] = (0, import_react.useState)(
       themeManagerInstance.getCurrentTheme()
     );
-    (0, import_react2.useEffect)(() => {
+    (0, import_react.useEffect)(() => {
       let cancelled = false;
       const listener = (newTheme) => {
         if (!cancelled)
@@ -3677,7 +3374,7 @@
         themeManagerInstance.removeThemeChangeListener(listener);
       };
     }, []);
-    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(ThemeContext2.Provider, { value: theme }, props.children), /* @__PURE__ */ import_react2.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(ThemeContext.Provider, { value: theme }, props.children), /* @__PURE__ */ import_react.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3686,7 +3383,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react2.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3695,7 +3392,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react2.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3704,7 +3401,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react2.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3713,7 +3410,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react2.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3724,7 +3421,7 @@
       }
     ));
   };
-  var useTheme = () => (0, import_react2.useContext)(ThemeContext2);
+  var useTheme = () => (0, import_react.useContext)(ThemeContext);
 })();
 /*! Bundled license information: