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

package/dist/iife/KaizenProvider/index.js

@@ -1382,7 +1382,7 @@
             }
             return dispatcher.useContext(Context2);
           }
-          function useState2(initialState) {
+          function useState3(initialState) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useState(initialState);
           }
@@ -2184,7 +2184,7 @@
           exports.useMemo = useMemo;
           exports.useReducer = useReducer;
           exports.useRef = useRef;
-          exports.useState = useState2;
+          exports.useState = useState3;
           exports.useSyncExternalStore = useSyncExternalStore;
           exports.useTransition = useTransition;
           exports.version = ReactVersion;
@@ -2913,19 +2913,325 @@
   });
 
   // src/KaizenProvider/KaizenProvider.tsx
-  var import_react2 = __toESM(require_react());
+  var import_react3 = __toESM(require_react());
 
   // src/KaizenProvider/ThemeProvider/ThemeProvider.tsx
-  var import_react = __toESM(require_react());
+  var import_react2 = __toESM(require_react());
 
-  // ../design-tokens/src/lib/addExtraThemeEntries.ts
+  // ../design-tokens/dist/esm/index.js
   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
   }) => {
@@ -2947,8 +3253,6 @@
     }
     return result;
   };
-
-  // ../design-tokens/src/lib/mapLeafsOfObject.ts
   function mapLeafsOfObject(object, mapper) {
     const recurser = (currentPath, obj) => {
       const handleEntry = (key, value) => {
@@ -2968,8 +3272,6 @@
     };
     return recurser([], object);
   }
-
-  // ../design-tokens/src/lib/makeCssVariableDefinitionsMap.ts
   function makeCssVariableDefinitionsMap(theme) {
     let accumulatedCssVariables = {};
     mapLeafsOfObject(theme, (path, value) => {
@@ -2988,6 +3290,7 @@
     });
     return accumulatedCssVariables;
   }
+  var ThemeContext = import_react.default.createContext(defaultTheme);
 
   // src/KaizenProvider/ThemeProvider/ThemeManager.ts
   var ThemeManager = class {
@@ -3041,7 +3344,7 @@
   };
 
   // src/KaizenProvider/ThemeProvider/themes/heart.ts
-  var heartTheme = {
+  var heartTheme2 = {
     themeKey: "heart",
     animation: {
       easingFunction: {
@@ -3351,21 +3654,21 @@
   };
 
   // src/KaizenProvider/ThemeProvider/themes/index.ts
-  var defaultTheme = heartTheme;
+  var defaultTheme2 = heartTheme2;
 
   // src/KaizenProvider/ThemeProvider/ThemeProvider.tsx
-  var ThemeContext = (0, import_react.createContext)(defaultTheme);
+  var ThemeContext2 = (0, import_react2.createContext)(defaultTheme2);
   var ThemeProvider = ({
     themeManager,
     ...props
   }) => {
-    const [themeManagerInstance] = (0, import_react.useState)(
-      () => themeManager || new ThemeManager(defaultTheme)
+    const [themeManagerInstance] = (0, import_react2.useState)(
+      () => themeManager || new ThemeManager(defaultTheme2)
     );
-    const [theme, setTheme] = (0, import_react.useState)(
+    const [theme, setTheme] = (0, import_react2.useState)(
       themeManagerInstance.getCurrentTheme()
     );
-    (0, import_react.useEffect)(() => {
+    (0, import_react2.useEffect)(() => {
       let cancelled = false;
       const listener = (newTheme) => {
         if (!cancelled)
@@ -3377,7 +3680,7 @@
         themeManagerInstance.removeThemeChangeListener(listener);
       };
     }, []);
-    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(
+    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(
       "link",
       {
         rel: "preload",
@@ -3386,7 +3689,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3395,7 +3698,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3404,7 +3707,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3413,7 +3716,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3424,13 +3727,13 @@
       }
     ));
   };
-  var useTheme = () => (0, import_react.useContext)(ThemeContext);
+  var useTheme = () => (0, import_react2.useContext)(ThemeContext2);
 
   // src/KaizenProvider/KaizenProvider.tsx
   var KaizenProvider = ({
     children,
     themeManager
-  }) => /* @__PURE__ */ import_react2.default.createElement(ThemeProvider, { themeManager }, children);
+  }) => /* @__PURE__ */ import_react3.default.createElement(ThemeProvider, { themeManager }, children);
   KaizenProvider.displayName = "KaizenProvider";
 })();
 /*! Bundled license information: