@kaizen/components 1.4.20 → 1.4.22-canary.0

package/dist/iife/KaizenProvider/index.js

@@ -2208,346 +2208,6 @@
     }
   });
 
-  // ../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) {
@@ -3252,444 +2912,84 @@
     }
   });
 
-  // ../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;
-    }
-  });
+  // src/KaizenProvider/KaizenProvider.tsx
+  var import_react2 = __toESM(require_react());
 
-  // ../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;
-    }
-  });
+  // src/KaizenProvider/ThemeProvider/ThemeProvider.tsx
+  var import_react = __toESM(require_react());
 
-  // ../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/src/lib/addExtraThemeEntries.ts
+  var import_color_string = __toESM(require_color_string());
 
-  // ../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/src/lib/cssVariables.ts
+  var import_lodash = __toESM(require_lodash());
+  var objectPathToCssVarIdentifier = (path) => `--${path.map(import_lodash.default).join("-")}`;
 
-  // ../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/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);
+      }
     }
-  });
-
-  // ../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);
+    if (augmentWithId) {
+      result[`${key}-id`] = objectPathToCssVarIdentifier(path);
     }
-  });
+    return result;
+  };
 
-  // ../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;
+  // ../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);
         }
-        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;
-    }
-  });
+        return mapper(pathToKey, value);
+      };
+      return Object.entries(obj).reduce(
+        (acc, [nextKey, nextValue]) => ({
+          ...acc,
+          [nextKey]: handleEntry(nextKey, nextValue)
+        }),
+        {}
+      );
+    };
+    return recurser([], object);
+  }
 
-  // ../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);
+  // ../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
       };
-      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());
+    });
+    return accumulatedCssVariables;
+  }
 
   // src/KaizenProvider/ThemeProvider/ThemeManager.ts
-  var import_design_tokens = __toESM(require_dist());
   var ThemeManager = class {
     constructor(theme, rootElementId = "", apply = true) {
       this.themeChangeListeners = [];
@@ -3723,7 +3023,7 @@
           this.setRootElement(
             document.getElementById(this.rootElementId) ?? document.documentElement
           );
-          const cssVariableDefinitions = (0, import_design_tokens.makeCssVariableDefinitionsMap)(this.theme);
+          const cssVariableDefinitions = makeCssVariableDefinitionsMap(this.theme);
           Object.entries(cssVariableDefinitions).forEach(([key, value]) => {
             var _a;
             (_a = this.rootElement) == null ? void 0 : _a.style.setProperty(key, value);