@kaizen/components 1.4.19 → 1.4.20-canary.3469

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

@@ -6,9 +6,16 @@
   var __getOwnPropNames = Object.getOwnPropertyNames;
   var __getProtoOf = Object.getPrototypeOf;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __esm = (fn, res) => function __init() {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  };
   var __commonJS = (cb, mod) => function __require() {
     return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
   };
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
   var __copyProps = (to, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
       for (let key of __getOwnPropNames(from))
@@ -17,6 +24,7 @@
     }
     return to;
   };
+  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
   var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
     // If the importer is in node compatibility mode or this is not an ESM
     // file that has been converted to a CommonJS file using a Babel-
@@ -1382,7 +1390,7 @@
             }
             return dispatcher.useContext(Context2);
           }
-          function useState2(initialState) {
+          function useState3(initialState) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useState(initialState);
           }
@@ -2184,7 +2192,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;
@@ -2208,13 +2216,12 @@
     }
   });
 
-  // ../design-tokens/dist/themes/heart.js
-  var require_heart = __commonJS({
-    "../design-tokens/dist/themes/heart.js"(exports) {
+  // ../design-tokens/src/themes/heart.ts
+  var heartTheme;
+  var init_heart = __esm({
+    "../design-tokens/src/themes/heart.ts"() {
       "use strict";
-      Object.defineProperty(exports, "__esModule", { value: true });
-      exports.heartTheme = void 0;
-      exports.heartTheme = {
+      heartTheme = {
         themeKey: "heart",
         animation: {
           easingFunction: {
@@ -2525,26 +2532,21 @@
     }
   });
 
-  // ../design-tokens/dist/themes/index.js
-  var require_themes = __commonJS({
-    "../design-tokens/dist/themes/index.js"(exports) {
+  // ../design-tokens/src/themes/index.ts
+  var defaultTheme;
+  var init_themes = __esm({
+    "../design-tokens/src/themes/index.ts"() {
       "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;
+      init_heart();
+      init_heart();
+      defaultTheme = heartTheme;
     }
   });
 
-  // ../design-tokens/dist/types.js
-  var require_types = __commonJS({
-    "../design-tokens/dist/types.js"(exports) {
+  // ../design-tokens/src/types.ts
+  var init_types = __esm({
+    "../design-tokens/src/types.ts"() {
       "use strict";
-      Object.defineProperty(exports, "__esModule", { value: true });
     }
   });
 
@@ -3252,442 +3254,462 @@
     }
   });
 
-  // ../design-tokens/dist/lib/cssVariables.js
-  var require_cssVariables = __commonJS({
-    "../design-tokens/dist/lib/cssVariables.js"(exports) {
+  // ../design-tokens/src/lib/cssVariables.ts
+  var import_lodash, objectPathToCssVarFunction, objectPathToCssVarIdentifier;
+  var init_cssVariables = __esm({
+    "../design-tokens/src/lib/cssVariables.ts"() {
       "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;
+      import_lodash = __toESM(require_lodash());
+      objectPathToCssVarFunction = (path, value) => `var(${objectPathToCssVarIdentifier(path)}, ${value})`;
+      objectPathToCssVarIdentifier = (path) => `--${path.map(import_lodash.default).join("-")}`;
     }
   });
 
-  // ../design-tokens/dist/lib/addExtraThemeEntries.js
-  var require_addExtraThemeEntries = __commonJS({
-    "../design-tokens/dist/lib/addExtraThemeEntries.js"(exports) {
+  // ../design-tokens/src/lib/addExtraThemeEntries.ts
+  var import_color_string, addExtraThemeEntries;
+  var init_addExtraThemeEntries = __esm({
+    "../design-tokens/src/lib/addExtraThemeEntries.ts"() {
       "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);
+      import_color_string = __toESM(require_color_string());
+      init_cssVariables();
+      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();
-          var rgbPath = __spreadArray(__spreadArray([], path, true), ["rgb"], false);
-          var rgbTriple = printValue(rgbPath, colorRgb.slice(0, 3).join(", "));
-          result["".concat(key, "-rgb")] = rgbTriple;
+          const rgbPath = [...path, "rgb"];
+          const rgbTriple = printValue(rgbPath, colorRgb.slice(0, 3).join(", "));
+          result[`${key}-rgb`] = rgbTriple;
           if (augmentWithId) {
-            result["".concat(key, "-rgb-id")] = (0, cssVariables_1.objectPathToCssVarIdentifier)(rgbPath);
+            result[`${key}-rgb-id`] = objectPathToCssVarIdentifier(rgbPath);
           }
         }
         if (augmentWithId) {
-          result["".concat(key, "-id")] = (0, cssVariables_1.objectPathToCssVarIdentifier)(path);
+          result[`${key}-id`] = 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));
+  // ../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);
       };
-      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;
+      return Object.entries(obj).reduce(
+        (acc, [nextKey, nextValue]) => ({
+          ...acc,
+          [nextKey]: handleEntry(nextKey, nextValue)
+        }),
+        {}
+      );
+    };
+    return recurser([], object);
+  }
+  var init_mapLeafsOfObject = __esm({
+    "../design-tokens/src/lib/mapLeafsOfObject.ts"() {
+      "use strict";
     }
   });
 
-  // ../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);
+  // ../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.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;
+    });
+    return accumulatedCssVariables;
+  }
+  var init_makeCssVariableDefinitionsMap = __esm({
+    "../design-tokens/src/lib/makeCssVariableDefinitionsMap.ts"() {
+      "use strict";
+      init_addExtraThemeEntries();
+      init_cssVariables();
+      init_mapLeafsOfObject();
     }
   });
 
-  // ../design-tokens/dist/ThemeManager.js
-  var require_ThemeManager = __commonJS({
-    "../design-tokens/dist/ThemeManager.js"(exports) {
+  // ../design-tokens/src/ThemeManager.ts
+  var ThemeManager;
+  var init_ThemeManager = __esm({
+    "../design-tokens/src/ThemeManager.ts"() {
       "use strict";
-      Object.defineProperty(exports, "__esModule", { value: true });
-      exports.ThemeManager = void 0;
-      var makeCssVariableDefinitionsMap_1 = require_makeCssVariableDefinitionsMap();
-      var ThemeManager2 = (
-        /** @class */
-        function() {
-          function ThemeManager3(theme, rootElementId, apply) {
-            if (rootElementId === void 0) {
-              rootElementId = "";
-            }
-            if (apply === void 0) {
-              apply = true;
+      init_makeCssVariableDefinitionsMap();
+      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;
             }
-            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 ThemeManager3;
-        }()
-      );
-      exports.ThemeManager = ThemeManager2;
+            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();
+        }
+      };
     }
   });
 
-  // ../design-tokens/dist/react/ThemeProvider.js
-  var require_ThemeProvider = __commonJS({
-    "../design-tokens/dist/react/ThemeProvider.js"(exports) {
+  // ../design-tokens/src/react/ThemeProvider.tsx
+  var import_react, ThemeContext, ThemeProvider, useTheme;
+  var init_ThemeProvider = __esm({
+    "../design-tokens/src/react/ThemeProvider.tsx"() {
       "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) {
+      import_react = __toESM(require_react());
+      init_src();
+      ThemeContext = import_react.default.createContext(defaultTheme);
+      ThemeProvider = ({
+        themeManager,
+        ...props
+      }) => {
+        const [themeManagerInstance] = (0, import_react.useState)(
+          () => themeManager || new ThemeManager(defaultTheme)
+        );
+        const [theme, setTheme] = import_react.default.useState(
+          themeManagerInstance.getCurrentTheme()
+        );
+        import_react.default.useEffect(() => {
+          let cancelled = false;
+          const listener = (newTheme) => {
             if (!cancelled)
               setTheme(newTheme);
           };
           themeManagerInstance.addThemeChangeListener(listener);
-          return function() {
+          return () => {
             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);
+        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",
+            href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2",
+            as: "font",
+            type: "font/woff2",
+            crossOrigin: "anonymous"
+          }
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "link",
+          {
+            rel: "preload",
+            href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2",
+            as: "font",
+            type: "font/woff2",
+            crossOrigin: "anonymous"
+          }
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "link",
+          {
+            rel: "preload",
+            href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2",
+            as: "font",
+            type: "font/woff2",
+            crossOrigin: "anonymous"
+          }
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "link",
+          {
+            rel: "preload",
+            href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2",
+            as: "font",
+            type: "font/woff2",
+            crossOrigin: "anonymous"
+          }
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "link",
+          {
+            rel: "preload",
+            href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2",
+            as: "font",
+            type: "font/woff2",
+            crossOrigin: "anonymous"
+          }
+        ));
       };
-      exports.useTheme = useTheme2;
+      useTheme = () => import_react.default.useContext(ThemeContext);
     }
   });
 
-  // ../design-tokens/dist/react/index.js
-  var require_react2 = __commonJS({
-    "../design-tokens/dist/react/index.js"(exports) {
+  // ../design-tokens/src/react/index.tsx
+  var init_react = __esm({
+    "../design-tokens/src/react/index.tsx"() {
       "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];
-          } };
+      init_ThemeProvider();
+    }
+  });
+
+  // ../design-tokens/src/tailwind/tailwind-presets.ts
+  var require_tailwind_presets = __commonJS({
+    "../design-tokens/src/tailwind/tailwind-presets.ts"(exports, module) {
+      "use strict";
+      init_src();
+      var preset = {
+        theme: {
+          colors: {
+            transparent: "transparent",
+            current: "currentColor",
+            inherit: "inherit",
+            ...defaultTheme.color,
+            ...defaultTheme.dataViz
+          },
+          spacing: {
+            ...defaultTheme.spacing
+          },
+          boxShadow: {
+            none: "none",
+            sm: defaultTheme.shadow.small.boxShadow,
+            lg: defaultTheme.shadow.large.boxShadow
+          },
+          borderRadius: {
+            none: "0px",
+            default: "7px",
+            "focus-ring": "10px"
+          },
+          borderWidth: {
+            "width-none": "0px",
+            "width-default": "2px",
+            "width-focus-ring": "2px"
+          },
+          // how do we want to handle our focus rings?
+          // tailwind used a `ring` property
+          borderColor: {
+            "color-solid": defaultTheme.border.solid.borderColor,
+            "color-transparent": defaultTheme.border.borderless.borderColor,
+            "color-focus-ring": defaultTheme.color.blue[600]
+          },
+          fontFamily: {
+            "family-paragraph": defaultTheme.typography.paragraphBody.fontFamily,
+            "family-heading": defaultTheme.typography.heading1.fontFamily,
+            "family-data": defaultTheme.typography.dataLarge.fontFamily,
+            "family-display": defaultTheme.typography.display0.fontFamily
+          },
+          fontSize: {
+            "size-display": defaultTheme.typography.display0.fontSize,
+            "size-heading-1": defaultTheme.typography.heading1.fontSize,
+            "size-heading-2": defaultTheme.typography.heading2.fontSize,
+            "size-heading-3": defaultTheme.typography.heading3.fontSize,
+            "size-heading-4": defaultTheme.typography.heading4.fontSize,
+            "size-heading-5": defaultTheme.typography.heading5.fontSize,
+            "size-heading-6": defaultTheme.typography.heading6.fontSize,
+            "size-paragraph": defaultTheme.typography.paragraphBody.fontSize,
+            "size-paragraph-lede": defaultTheme.typography.paragraphIntroLede.fontSize,
+            "size-paragraph-sm": defaultTheme.typography.paragraphSmall.fontSize,
+            "size-paragraph-xs": defaultTheme.typography.paragraphExtraSmall.fontSize,
+            "size-data-lg": defaultTheme.typography.dataLarge.fontSize,
+            "size-data-md": defaultTheme.typography.dataMedium.fontSize,
+            "size-data-sm": defaultTheme.typography.dataSmall.fontSize,
+            "size-data-units-lg": defaultTheme.typography.dataLargeUnits.fontSize,
+            "size-data-units-md": defaultTheme.typography.dataMediumUnits.fontSize,
+            "size-data-units-sm": defaultTheme.typography.dataSmallUnits.fontSize
+          },
+          // font weights could have specific tokens (current don't)
+          fontWeight: {
+            normal: "400",
+            medium: "500",
+            semibold: "600",
+            bold: "700",
+            extrabold: "800",
+            "weight-paragraph": "400",
+            "weight-paragraph-bold": "600",
+            "weight-data": "700",
+            "weight-heading": "700",
+            "weight-display": "800"
+          },
+          lineHeight: {
+            "height-display": defaultTheme.typography.display0.lineHeight,
+            "height-heading-1": defaultTheme.typography.heading1.lineHeight,
+            "height-heading-2": defaultTheme.typography.heading2.lineHeight,
+            "height-heading-3": defaultTheme.typography.heading3.lineHeight,
+            "height-heading-4": defaultTheme.typography.heading4.lineHeight,
+            "height-heading-5": defaultTheme.typography.heading5.lineHeight,
+            "height-heading-6": defaultTheme.typography.heading6.lineHeight,
+            "height-paragraph": defaultTheme.typography.paragraphBody.lineHeight,
+            "height-paragraph-lede": defaultTheme.typography.paragraphIntroLede.lineHeight,
+            "height-paragraph-sm": defaultTheme.typography.paragraphSmall.lineHeight,
+            "height-paragraph-xs": defaultTheme.typography.paragraphExtraSmall.lineHeight,
+            "height-data-lg": defaultTheme.typography.dataLarge.lineHeight,
+            "height-data-md": defaultTheme.typography.dataMedium.lineHeight,
+            "height-data-sm": defaultTheme.typography.dataSmall.lineHeight,
+            "height-data-units-lg": defaultTheme.typography.dataLargeUnits.lineHeight,
+            "height-data-units-md": defaultTheme.typography.dataMediumUnits.lineHeight,
+            "height-data-units-sm": defaultTheme.typography.dataSmallUnits.lineHeight
+          },
+          letterSpacing: {
+            "spacing-normal": "normal"
+          },
+          // A mix of layout styles
+          maxWidth: {
+            content: defaultTheme.layout.contentMaxWidth,
+            "content-with-side": defaultTheme.layout.contentMaxWidthWithSidebar
+          },
+          width: {
+            "content-side-margin": defaultTheme.layout.contentSideMargin
+          },
+          height: {
+            "mobile-actions-drawer-height": defaultTheme.layout.mobileActionsDrawerHeight,
+            "navigation-bar-height": defaultTheme.layout.navigationBarHeight
+          },
+          // we will probably want to review viewport sizing
+          screens: {
+            ...defaultTheme.layout.breakpoints
+          }
         }
-        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);
+      module.exports.TailwindPreset = preset;
     }
   });
 
-  // ../design-tokens/dist/lib/makeCssVariableTheme.js
-  var require_makeCssVariableTheme = __commonJS({
-    "../design-tokens/dist/lib/makeCssVariableTheme.js"(exports) {
+  // ../design-tokens/src/tailwind/index.ts
+  var tailwind_exports = {};
+  var init_tailwind = __esm({
+    "../design-tokens/src/tailwind/index.ts"() {
       "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;
+      __reExport(tailwind_exports, __toESM(require_tailwind_presets()));
+    }
+  });
+
+  // ../design-tokens/src/lib/makeCssVariableTheme.ts
+  function makeCSSVariableTheme(theme, printValue = objectPathToCssVarFunction) {
+    const augmentedTheme = {};
+    const mapper = (leafPath, value) => {
+      const leafKey = leafPath[leafPath.length - 1];
+      const pathWithoutLast = leafPath.slice(0, leafPath.length - 1);
+      const leafObject = pathWithoutLast.reduce(
+        (child, segment) => child[segment] || (child[segment] = {}),
+        augmentedTheme
+      );
+      if (!leafKey) {
+        throw new Error("leafKey is undefined");
       }
-      exports.makeCSSVariableTheme = makeCSSVariableTheme;
+      const cssVariablesOfToken = addExtraThemeEntries(
+        leafPath,
+        leafKey,
+        value,
+        printValue,
+        { augmentWithId: true }
+      );
+      Object.assign(leafObject, cssVariablesOfToken);
+    };
+    mapLeafsOfObject(theme, mapper);
+    return augmentedTheme;
+  }
+  var init_makeCssVariableTheme = __esm({
+    "../design-tokens/src/lib/makeCssVariableTheme.ts"() {
+      "use strict";
+      init_addExtraThemeEntries();
+      init_cssVariables();
+      init_mapLeafsOfObject();
     }
   });
 
-  // ../design-tokens/dist/index.js
-  var require_dist = __commonJS({
-    "../design-tokens/dist/index.js"(exports) {
+  // ../design-tokens/src/index.ts
+  var src_exports = {};
+  __export(src_exports, {
+    ThemeContext: () => ThemeContext,
+    ThemeManager: () => ThemeManager,
+    ThemeProvider: () => ThemeProvider,
+    defaultTheme: () => defaultTheme,
+    heartTheme: () => heartTheme,
+    makeCSSVariableTheme: () => makeCSSVariableTheme,
+    makeCssVariableDefinitionsMap: () => makeCssVariableDefinitionsMap,
+    mapLeafsOfObject: () => mapLeafsOfObject,
+    useTheme: () => useTheme
+  });
+  var init_src = __esm({
+    "../design-tokens/src/index.ts"() {
       "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;
-      } });
+      init_themes();
+      init_types();
+      init_ThemeManager();
+      init_react();
+      init_tailwind();
+      __reExport(src_exports, tailwind_exports);
+      init_makeCssVariableDefinitionsMap();
+      init_makeCssVariableTheme();
+      init_mapLeafsOfObject();
     }
   });
 
   // src/KaizenProvider/ThemeProvider/ThemeProvider.tsx
-  var import_react = __toESM(require_react());
+  var import_react2 = __toESM(require_react());
+
+  // ../design-tokens/index.ts
+  var design_tokens_exports = {};
+  __export(design_tokens_exports, {
+    ThemeContext: () => ThemeContext,
+    ThemeManager: () => ThemeManager,
+    ThemeProvider: () => ThemeProvider,
+    defaultTheme: () => defaultTheme,
+    heartTheme: () => heartTheme,
+    makeCSSVariableTheme: () => makeCSSVariableTheme,
+    makeCssVariableDefinitionsMap: () => makeCssVariableDefinitionsMap,
+    mapLeafsOfObject: () => mapLeafsOfObject,
+    useTheme: () => useTheme
+  });
+  init_src();
+  __reExport(design_tokens_exports, src_exports);
 
   // src/KaizenProvider/ThemeProvider/ThemeManager.ts
-  var import_design_tokens = __toESM(require_dist());
-  var ThemeManager = class {
+  var ThemeManager2 = class {
     constructor(theme, rootElementId = "", apply = true) {
       this.themeChangeListeners = [];
       this.rootElement = null;
@@ -3720,7 +3742,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);
@@ -3738,7 +3760,7 @@
   };
 
   // src/KaizenProvider/ThemeProvider/themes/heart.ts
-  var heartTheme = {
+  var heartTheme2 = {
     themeKey: "heart",
     animation: {
       easingFunction: {
@@ -4048,21 +4070,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 ThemeProvider = ({
+  var ThemeContext2 = (0, import_react2.createContext)(defaultTheme2);
+  var ThemeProvider2 = ({
     themeManager,
     ...props
   }) => {
-    const [themeManagerInstance] = (0, import_react.useState)(
-      () => themeManager || new ThemeManager(defaultTheme)
+    const [themeManagerInstance] = (0, import_react2.useState)(
+      () => themeManager || new ThemeManager2(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)
@@ -4074,7 +4096,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",
@@ -4083,7 +4105,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -4092,7 +4114,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -4101,7 +4123,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -4110,7 +4132,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -4121,7 +4143,7 @@
       }
     ));
   };
-  var useTheme = () => (0, import_react.useContext)(ThemeContext);
+  var useTheme2 = () => (0, import_react2.useContext)(ThemeContext2);
 })();
 /*! Bundled license information: