@kaizen/components 1.4.16 → 1.4.18

package/dist/iife/KaizenProvider/index.js

@@ -2208,6 +2208,346 @@
     }
   });
 
+  // ../design-tokens/dist/themes/heart.js
+  var require_heart = __commonJS({
+    "../design-tokens/dist/themes/heart.js"(exports) {
+      "use strict";
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.heartTheme = void 0;
+      exports.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"
+          }
+        }
+      };
+    }
+  });
+
+  // ../design-tokens/dist/themes/index.js
+  var require_themes = __commonJS({
+    "../design-tokens/dist/themes/index.js"(exports) {
+      "use strict";
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.defaultTheme = exports.heartTheme = void 0;
+      var heart_1 = require_heart();
+      var heart_2 = require_heart();
+      Object.defineProperty(exports, "heartTheme", { enumerable: true, get: function() {
+        return heart_2.heartTheme;
+      } });
+      exports.defaultTheme = heart_1.heartTheme;
+    }
+  });
+
+  // ../design-tokens/dist/types.js
+  var require_types = __commonJS({
+    "../design-tokens/dist/types.js"(exports) {
+      "use strict";
+      Object.defineProperty(exports, "__esModule", { value: true });
+    }
+  });
+
   // ../../node_modules/color-name/index.js
   var require_color_name = __commonJS({
     "../../node_modules/color-name/index.js"(exports, module) {
@@ -2912,13 +3252,495 @@
     }
   });
 
+  // ../design-tokens/dist/lib/cssVariables.js
+  var require_cssVariables = __commonJS({
+    "../design-tokens/dist/lib/cssVariables.js"(exports) {
+      "use strict";
+      var __importDefault = exports && exports.__importDefault || function(mod) {
+        return mod && mod.__esModule ? mod : { "default": mod };
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.objectPathToCssVarIdentifier = exports.objectPathToCssVarFunction = void 0;
+      var lodash_kebabcase_1 = __importDefault(require_lodash());
+      var objectPathToCssVarFunction = function(path, value) {
+        return "var(".concat((0, exports.objectPathToCssVarIdentifier)(path), ", ").concat(value, ")");
+      };
+      exports.objectPathToCssVarFunction = objectPathToCssVarFunction;
+      var objectPathToCssVarIdentifier = function(path) {
+        return "--".concat(path.map(lodash_kebabcase_1.default).join("-"));
+      };
+      exports.objectPathToCssVarIdentifier = objectPathToCssVarIdentifier;
+    }
+  });
+
+  // ../design-tokens/dist/lib/addExtraThemeEntries.js
+  var require_addExtraThemeEntries = __commonJS({
+    "../design-tokens/dist/lib/addExtraThemeEntries.js"(exports) {
+      "use strict";
+      var __spreadArray = exports && exports.__spreadArray || function(to, from, pack) {
+        if (pack || arguments.length === 2)
+          for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+              if (!ar)
+                ar = Array.prototype.slice.call(from, 0, i);
+              ar[i] = from[i];
+            }
+          }
+        return to.concat(ar || Array.prototype.slice.call(from));
+      };
+      var __importDefault = exports && exports.__importDefault || function(mod) {
+        return mod && mod.__esModule ? mod : { "default": mod };
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.addExtraThemeEntries = void 0;
+      var color_string_1 = __importDefault(require_color_string());
+      var cssVariables_1 = require_cssVariables();
+      var addExtraThemeEntries = function(path, key, value, printValue, _a) {
+        var _b;
+        var augmentWithId = _a.augmentWithId;
+        var colorRgb = typeof value === "string" ? color_string_1.default.get.rgb(value) : null;
+        var result = (_b = {}, _b[key] = printValue(path, value), _b);
+        if (colorRgb) {
+          result[key] = printValue(path, value).toLowerCase();
+          var rgbPath = __spreadArray(__spreadArray([], path, true), ["rgb"], false);
+          var rgbTriple = printValue(rgbPath, colorRgb.slice(0, 3).join(", "));
+          result["".concat(key, "-rgb")] = rgbTriple;
+          if (augmentWithId) {
+            result["".concat(key, "-rgb-id")] = (0, cssVariables_1.objectPathToCssVarIdentifier)(rgbPath);
+          }
+        }
+        if (augmentWithId) {
+          result["".concat(key, "-id")] = (0, cssVariables_1.objectPathToCssVarIdentifier)(path);
+        }
+        return result;
+      };
+      exports.addExtraThemeEntries = addExtraThemeEntries;
+    }
+  });
+
+  // ../design-tokens/dist/lib/mapLeafsOfObject.js
+  var require_mapLeafsOfObject = __commonJS({
+    "../design-tokens/dist/lib/mapLeafsOfObject.js"(exports) {
+      "use strict";
+      var __assign = exports && exports.__assign || function() {
+        __assign = Object.assign || function(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+              if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+          }
+          return t;
+        };
+        return __assign.apply(this, arguments);
+      };
+      var __spreadArray = exports && exports.__spreadArray || function(to, from, pack) {
+        if (pack || arguments.length === 2)
+          for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+              if (!ar)
+                ar = Array.prototype.slice.call(from, 0, i);
+              ar[i] = from[i];
+            }
+          }
+        return to.concat(ar || Array.prototype.slice.call(from));
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.mapLeafsOfObject = void 0;
+      function mapLeafsOfObject(object, mapper) {
+        var recurser = function(currentPath, obj) {
+          var handleEntry = function(key, value) {
+            var pathToKey = __spreadArray(__spreadArray([], currentPath, true), [key], false);
+            if (typeof value === "object" && value !== null && value !== void 0) {
+              return recurser(pathToKey, value);
+            }
+            return mapper(pathToKey, value);
+          };
+          return Object.entries(obj).reduce(function(acc, _a) {
+            var _b;
+            var nextKey = _a[0], nextValue = _a[1];
+            return __assign(__assign({}, acc), (_b = {}, _b[nextKey] = handleEntry(nextKey, nextValue), _b));
+          }, {});
+        };
+        return recurser([], object);
+      }
+      exports.mapLeafsOfObject = mapLeafsOfObject;
+    }
+  });
+
+  // ../design-tokens/dist/lib/makeCssVariableDefinitionsMap.js
+  var require_makeCssVariableDefinitionsMap = __commonJS({
+    "../design-tokens/dist/lib/makeCssVariableDefinitionsMap.js"(exports) {
+      "use strict";
+      var __assign = exports && exports.__assign || function() {
+        __assign = Object.assign || function(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+              if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+          }
+          return t;
+        };
+        return __assign.apply(this, arguments);
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.makeCssVariableDefinitionsMap = void 0;
+      var addExtraThemeEntries_1 = require_addExtraThemeEntries();
+      var cssVariables_1 = require_cssVariables();
+      var mapLeafsOfObject_1 = require_mapLeafsOfObject();
+      function makeCssVariableDefinitionsMap2(theme) {
+        var accumulatedCssVariables = {};
+        (0, mapLeafsOfObject_1.mapLeafsOfObject)(theme, function(path, value) {
+          var key = (0, cssVariables_1.objectPathToCssVarIdentifier)(path);
+          var nextCssVariables = (0, addExtraThemeEntries_1.addExtraThemeEntries)(path, key, value, function(_, v) {
+            return "".concat(v);
+          }, { augmentWithId: false });
+          accumulatedCssVariables = __assign(__assign({}, accumulatedCssVariables), nextCssVariables);
+        });
+        return accumulatedCssVariables;
+      }
+      exports.makeCssVariableDefinitionsMap = makeCssVariableDefinitionsMap2;
+    }
+  });
+
+  // ../design-tokens/dist/ThemeManager.js
+  var require_ThemeManager = __commonJS({
+    "../design-tokens/dist/ThemeManager.js"(exports) {
+      "use strict";
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.ThemeManager = void 0;
+      var makeCssVariableDefinitionsMap_1 = require_makeCssVariableDefinitionsMap();
+      var ThemeManager3 = (
+        /** @class */
+        function() {
+          function ThemeManager4(theme, rootElementId, apply) {
+            if (rootElementId === void 0) {
+              rootElementId = "";
+            }
+            if (apply === void 0) {
+              apply = true;
+            }
+            var _this = this;
+            this.themeChangeListeners = [];
+            this.rootElement = null;
+            this.getRootElement = function() {
+              return _this.rootElement;
+            };
+            this.getRootElementId = function() {
+              return _this.rootElementId;
+            };
+            this.getCurrentTheme = function() {
+              return _this.theme;
+            };
+            this.setRootElement = function(element) {
+              _this.rootElement = element;
+            };
+            this.setRootElementId = function(rootElementId2) {
+              return _this.rootElementId = rootElementId2;
+            };
+            this.setAndApplyTheme = function(theme2, force) {
+              if (!force) {
+                if (_this.theme === theme2)
+                  return;
+              }
+              _this.theme = theme2;
+              _this.applyCurrentTheme();
+              _this.notifyThemeChangeListeners(theme2);
+            };
+            this.addThemeChangeListener = function(listener) {
+              _this.themeChangeListeners.push(listener);
+            };
+            this.removeThemeChangeListener = function(listener) {
+              _this.themeChangeListeners = _this.themeChangeListeners.filter(function(l) {
+                return l !== listener;
+              });
+            };
+            this.applyCurrentTheme = function() {
+              var _a;
+              if (typeof window !== "undefined") {
+                _this.setRootElement((_a = document.getElementById(_this.rootElementId)) !== null && _a !== void 0 ? _a : document.documentElement);
+                var cssVariableDefinitions = (0, makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap)(_this.theme);
+                Object.entries(cssVariableDefinitions).forEach(function(_a2) {
+                  var _b;
+                  var key = _a2[0], value = _a2[1];
+                  (_b = _this.rootElement) === null || _b === void 0 ? void 0 : _b.style.setProperty(key, value);
+                });
+              }
+            };
+            this.notifyThemeChangeListeners = function(theme2) {
+              _this.themeChangeListeners.forEach(function(listener) {
+                return listener(theme2);
+              });
+            };
+            this.theme = theme;
+            this.rootElementId = rootElementId;
+            if (apply)
+              this.applyCurrentTheme();
+          }
+          return ThemeManager4;
+        }()
+      );
+      exports.ThemeManager = ThemeManager3;
+    }
+  });
+
+  // ../design-tokens/dist/react/ThemeProvider.js
+  var require_ThemeProvider = __commonJS({
+    "../design-tokens/dist/react/ThemeProvider.js"(exports) {
+      "use strict";
+      var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
+        if (k2 === void 0)
+          k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = { enumerable: true, get: function() {
+            return m[k];
+          } };
+        }
+        Object.defineProperty(o, k2, desc);
+      } : function(o, m, k, k2) {
+        if (k2 === void 0)
+          k2 = k;
+        o[k2] = m[k];
+      });
+      var __setModuleDefault = exports && exports.__setModuleDefault || (Object.create ? function(o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      } : function(o, v) {
+        o["default"] = v;
+      });
+      var __importStar = exports && exports.__importStar || function(mod) {
+        if (mod && mod.__esModule)
+          return mod;
+        var result = {};
+        if (mod != null) {
+          for (var k in mod)
+            if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+              __createBinding(result, mod, k);
+        }
+        __setModuleDefault(result, mod);
+        return result;
+      };
+      var __rest = exports && exports.__rest || function(s, e) {
+        var t = {};
+        for (var p in s)
+          if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+          }
+        return t;
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.useTheme = exports.ThemeProvider = exports.ThemeContext = void 0;
+      var react_1 = __importStar(require_react());
+      var __1 = require_dist();
+      exports.ThemeContext = react_1.default.createContext(__1.defaultTheme);
+      var ThemeProvider2 = function(_a) {
+        var themeManager = _a.themeManager, props = __rest(_a, ["themeManager"]);
+        var themeManagerInstance = (0, react_1.useState)(function() {
+          return themeManager || new __1.ThemeManager(__1.defaultTheme);
+        })[0];
+        var _b = react_1.default.useState(themeManagerInstance.getCurrentTheme()), theme = _b[0], setTheme = _b[1];
+        react_1.default.useEffect(function() {
+          var cancelled = false;
+          var listener = function(newTheme) {
+            if (!cancelled)
+              setTheme(newTheme);
+          };
+          themeManagerInstance.addThemeChangeListener(listener);
+          return function() {
+            cancelled = true;
+            themeManagerInstance.removeThemeChangeListener(listener);
+          };
+        }, []);
+        return react_1.default.createElement(
+          react_1.default.Fragment,
+          null,
+          react_1.default.createElement(exports.ThemeContext.Provider, { value: theme }, props.children),
+          react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+          react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+          react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+          react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+          react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" })
+        );
+      };
+      exports.ThemeProvider = ThemeProvider2;
+      var useTheme2 = function() {
+        return react_1.default.useContext(exports.ThemeContext);
+      };
+      exports.useTheme = useTheme2;
+    }
+  });
+
+  // ../design-tokens/dist/react/index.js
+  var require_react2 = __commonJS({
+    "../design-tokens/dist/react/index.js"(exports) {
+      "use strict";
+      var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
+        if (k2 === void 0)
+          k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = { enumerable: true, get: function() {
+            return m[k];
+          } };
+        }
+        Object.defineProperty(o, k2, desc);
+      } : function(o, m, k, k2) {
+        if (k2 === void 0)
+          k2 = k;
+        o[k2] = m[k];
+      });
+      var __exportStar = exports && exports.__exportStar || function(m, exports2) {
+        for (var p in m)
+          if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p))
+            __createBinding(exports2, m, p);
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      __exportStar(require_ThemeProvider(), exports);
+    }
+  });
+
+  // ../design-tokens/dist/lib/makeCssVariableTheme.js
+  var require_makeCssVariableTheme = __commonJS({
+    "../design-tokens/dist/lib/makeCssVariableTheme.js"(exports) {
+      "use strict";
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.makeCSSVariableTheme = void 0;
+      var addExtraThemeEntries_1 = require_addExtraThemeEntries();
+      var cssVariables_1 = require_cssVariables();
+      var mapLeafsOfObject_1 = require_mapLeafsOfObject();
+      function makeCSSVariableTheme(theme, printValue) {
+        if (printValue === void 0) {
+          printValue = cssVariables_1.objectPathToCssVarFunction;
+        }
+        var augmentedTheme = {};
+        var mapper = function(leafPath, value) {
+          var leafKey = leafPath[leafPath.length - 1];
+          var pathWithoutLast = leafPath.slice(0, leafPath.length - 1);
+          var leafObject = pathWithoutLast.reduce(function(child, segment) {
+            return child[segment] || (child[segment] = {});
+          }, augmentedTheme);
+          if (!leafKey) {
+            throw new Error("leafKey is undefined");
+          }
+          var cssVariablesOfToken = (0, addExtraThemeEntries_1.addExtraThemeEntries)(leafPath, leafKey, value, printValue, { augmentWithId: true });
+          Object.assign(leafObject, cssVariablesOfToken);
+        };
+        (0, mapLeafsOfObject_1.mapLeafsOfObject)(theme, mapper);
+        return augmentedTheme;
+      }
+      exports.makeCSSVariableTheme = makeCSSVariableTheme;
+    }
+  });
+
+  // ../design-tokens/dist/index.js
+  var require_dist = __commonJS({
+    "../design-tokens/dist/index.js"(exports) {
+      "use strict";
+      var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
+        if (k2 === void 0)
+          k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = { enumerable: true, get: function() {
+            return m[k];
+          } };
+        }
+        Object.defineProperty(o, k2, desc);
+      } : function(o, m, k, k2) {
+        if (k2 === void 0)
+          k2 = k;
+        o[k2] = m[k];
+      });
+      var __exportStar = exports && exports.__exportStar || function(m, exports2) {
+        for (var p in m)
+          if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p))
+            __createBinding(exports2, m, p);
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      exports.mapLeafsOfObject = exports.makeCSSVariableTheme = exports.makeCssVariableDefinitionsMap = void 0;
+      __exportStar(require_themes(), exports);
+      __exportStar(require_types(), exports);
+      __exportStar(require_ThemeManager(), exports);
+      __exportStar(require_react2(), exports);
+      var makeCssVariableDefinitionsMap_1 = require_makeCssVariableDefinitionsMap();
+      Object.defineProperty(exports, "makeCssVariableDefinitionsMap", { enumerable: true, get: function() {
+        return makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap;
+      } });
+      var makeCssVariableTheme_1 = require_makeCssVariableTheme();
+      Object.defineProperty(exports, "makeCSSVariableTheme", { enumerable: true, get: function() {
+        return makeCssVariableTheme_1.makeCSSVariableTheme;
+      } });
+      var mapLeafsOfObject_1 = require_mapLeafsOfObject();
+      Object.defineProperty(exports, "mapLeafsOfObject", { enumerable: true, get: function() {
+        return mapLeafsOfObject_1.mapLeafsOfObject;
+      } });
+    }
+  });
+
   // src/KaizenProvider/KaizenProvider.tsx
   var import_react2 = __toESM(require_react());
 
   // src/KaizenProvider/ThemeProvider/ThemeProvider.tsx
   var import_react = __toESM(require_react());
 
-  // ../design-tokens/src/themes/heart.ts
+  // src/KaizenProvider/ThemeProvider/ThemeManager.ts
+  var import_design_tokens = __toESM(require_dist());
+  var ThemeManager = class {
+    constructor(theme, rootElementId = "", apply = true) {
+      this.themeChangeListeners = [];
+      this.rootElement = null;
+      this.getRootElement = () => this.rootElement;
+      this.getRootElementId = () => this.rootElementId;
+      this.getCurrentTheme = () => this.theme;
+      this.setRootElement = (element) => {
+        this.rootElement = element;
+      };
+      this.setRootElementId = (rootElementId) => this.rootElementId = rootElementId;
+      this.setAndApplyTheme = (theme, force) => {
+        if (!force) {
+          if (this.theme === theme)
+            return;
+        }
+        this.theme = theme;
+        this.applyCurrentTheme();
+        this.notifyThemeChangeListeners(theme);
+      };
+      this.addThemeChangeListener = (listener) => {
+        this.themeChangeListeners.push(listener);
+      };
+      this.removeThemeChangeListener = (listener) => {
+        this.themeChangeListeners = this.themeChangeListeners.filter(
+          (l) => l !== listener
+        );
+      };
+      this.applyCurrentTheme = () => {
+        if (typeof window !== "undefined") {
+          this.setRootElement(
+            document.getElementById(this.rootElementId) ?? document.documentElement
+          );
+          const cssVariableDefinitions = (0, import_design_tokens.makeCssVariableDefinitionsMap)(this.theme);
+          Object.entries(cssVariableDefinitions).forEach(([key, value]) => {
+            var _a;
+            (_a = this.rootElement) == null ? void 0 : _a.style.setProperty(key, value);
+          });
+        }
+      };
+      this.notifyThemeChangeListeners = (theme) => {
+        this.themeChangeListeners.forEach((listener) => listener(theme));
+      };
+      this.theme = theme;
+      this.rootElementId = rootElementId;
+      if (apply)
+        this.applyCurrentTheme();
+    }
+  };
+
+  // src/KaizenProvider/ThemeProvider/themes/heart.ts
   var heartTheme = {
     themeKey: "heart",
     animation: {
@@ -3228,131 +4050,9 @@
     }
   };
 
-  // ../design-tokens/src/themes/index.ts
+  // src/KaizenProvider/ThemeProvider/themes/index.ts
   var defaultTheme = heartTheme;
 
-  // ../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 objectPathToCssVarIdentifier = (path) => `--${path.map(import_lodash.default).join("-")}`;
-
-  // ../design-tokens/src/lib/addExtraThemeEntries.ts
-  var addExtraThemeEntries = (path, key, value, printValue, {
-    augmentWithId
-  }) => {
-    const colorRgb = typeof value === "string" ? import_color_string.default.get.rgb(value) : null;
-    const result = {
-      [key]: printValue(path, value)
-    };
-    if (colorRgb) {
-      result[key] = printValue(path, value).toLowerCase();
-      const rgbPath = [...path, "rgb"];
-      const rgbTriple = printValue(rgbPath, colorRgb.slice(0, 3).join(", "));
-      result[`${key}-rgb`] = rgbTriple;
-      if (augmentWithId) {
-        result[`${key}-rgb-id`] = objectPathToCssVarIdentifier(rgbPath);
-      }
-    }
-    if (augmentWithId) {
-      result[`${key}-id`] = objectPathToCssVarIdentifier(path);
-    }
-    return result;
-  };
-
-  // ../design-tokens/src/lib/mapLeafsOfObject.ts
-  function mapLeafsOfObject(object, mapper) {
-    const recurser = (currentPath, obj) => {
-      const handleEntry = (key, value) => {
-        const pathToKey = [...currentPath, key];
-        if (typeof value === "object" && value !== null && value !== void 0) {
-          return recurser(pathToKey, value);
-        }
-        return mapper(pathToKey, value);
-      };
-      return Object.entries(obj).reduce(
-        (acc, [nextKey, nextValue]) => ({
-          ...acc,
-          [nextKey]: handleEntry(nextKey, nextValue)
-        }),
-        {}
-      );
-    };
-    return recurser([], object);
-  }
-
-  // ../design-tokens/src/lib/makeCssVariableDefinitionsMap.ts
-  function makeCssVariableDefinitionsMap(theme) {
-    let accumulatedCssVariables = {};
-    mapLeafsOfObject(theme, (path, value) => {
-      const key = objectPathToCssVarIdentifier(path);
-      const nextCssVariables = addExtraThemeEntries(
-        path,
-        key,
-        value,
-        (_, v) => `${v}`,
-        { augmentWithId: false }
-      );
-      accumulatedCssVariables = {
-        ...accumulatedCssVariables,
-        ...nextCssVariables
-      };
-    });
-    return accumulatedCssVariables;
-  }
-
-  // src/KaizenProvider/ThemeProvider/ThemeManager.ts
-  var ThemeManager = class {
-    constructor(theme, rootElementId = "", apply = true) {
-      this.themeChangeListeners = [];
-      this.rootElement = null;
-      this.getRootElement = () => this.rootElement;
-      this.getRootElementId = () => this.rootElementId;
-      this.getCurrentTheme = () => this.theme;
-      this.setRootElement = (element) => {
-        this.rootElement = element;
-      };
-      this.setRootElementId = (rootElementId) => this.rootElementId = rootElementId;
-      this.setAndApplyTheme = (theme, force) => {
-        if (!force) {
-          if (this.theme === theme)
-            return;
-        }
-        this.theme = theme;
-        this.applyCurrentTheme();
-        this.notifyThemeChangeListeners(theme);
-      };
-      this.addThemeChangeListener = (listener) => {
-        this.themeChangeListeners.push(listener);
-      };
-      this.removeThemeChangeListener = (listener) => {
-        this.themeChangeListeners = this.themeChangeListeners.filter(
-          (l) => l !== listener
-        );
-      };
-      this.applyCurrentTheme = () => {
-        if (typeof window !== "undefined") {
-          this.setRootElement(
-            document.getElementById(this.rootElementId) ?? document.documentElement
-          );
-          const cssVariableDefinitions = makeCssVariableDefinitionsMap(this.theme);
-          Object.entries(cssVariableDefinitions).forEach(([key, value]) => {
-            var _a;
-            (_a = this.rootElement) == null ? void 0 : _a.style.setProperty(key, value);
-          });
-        }
-      };
-      this.notifyThemeChangeListeners = (theme) => {
-        this.themeChangeListeners.forEach((listener) => listener(theme));
-      };
-      this.theme = theme;
-      this.rootElementId = rootElementId;
-      if (apply)
-        this.applyCurrentTheme();
-    }
-  };
-
   // src/KaizenProvider/ThemeProvider/ThemeProvider.tsx
   var ThemeContext = (0, import_react.createContext)(defaultTheme);
   var ThemeProvider = ({
@@ -3424,6 +4124,7 @@
       }
     ));
   };
+  var useTheme = () => (0, import_react.useContext)(ThemeContext);
 
   // src/KaizenProvider/KaizenProvider.tsx
   var KaizenProvider = ({