@kaizen/design-tokens 10.5.3 → 10.6.0

package/dist/cjs/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./legacy/themes/index.cjs');
+var ThemeManager = require('./legacy/ThemeManager.cjs');
+var ThemeProvider = require('./legacy/ThemeProvider.cjs');
+var makeCssVariableDefinitionsMap = require('./legacy/makeCssVariableDefinitionsMap.cjs');
+var makeCssVariableTheme = require('./legacy/makeCssVariableTheme.cjs');
+var mapLeafsOfObject = require('./legacy/mapLeafsOfObject.cjs');
+var heart = require('./legacy/themes/heart.cjs');
+exports.defaultTheme = index.defaultTheme;
+exports.ThemeManager = ThemeManager.ThemeManager;
+exports.ThemeContext = ThemeProvider.ThemeContext;
+exports.ThemeProvider = ThemeProvider.ThemeProvider;
+exports.useTheme = ThemeProvider.useTheme;
+exports.makeCssVariableDefinitionsMap = makeCssVariableDefinitionsMap.makeCssVariableDefinitionsMap;
+exports.makeCSSVariableTheme = makeCssVariableTheme.makeCSSVariableTheme;
+exports.mapLeafsOfObject = mapLeafsOfObject.mapLeafsOfObject;
+exports.heartTheme = heart.heartTheme;

package/dist/cjs/js/tokens.cjs

@@ -0,0 +1,319 @@
+'use strict';
+
+var tokens = {
+  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"
+    },
+    width: {
+      1: "1px"
+    }
+  },
+  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: "#5dcaad",
+      500: "#3f9a86",
+      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: "#878792",
+      600: "#524e56"
+    },
+    white: "#ffffff",
+    black: "#000000"
+  },
+  dataViz: {
+    favorable: "#7dd5bd",
+    unfavorable: "#e68d97"
+  },
+  layout: {
+    contentMaxWidth: "1392px",
+    contentMaxWidthWithSidebar: "1080px",
+    contentSideMargin: "72px",
+    mobileActionsDrawerHeight: "60px",
+    navigationBarHeight: "72px",
+    breakpoints: {
+      medium: "768px",
+      large: "1080px"
+    }
+  },
+  shadow: {
+    small: {
+      boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06)"
+    },
+    large: {
+      boxShadow: "0 3px 9px 0 rgba(0, 0, 0, 0.1), 0 8px 40px 0 rgba(0, 0, 0, 0.08)"
+    }
+  },
+  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",
+    20: "1.25rem",
+    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",
+      maxWidth: "975px"
+    },
+    paragraphBody: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal",
+      maxWidth: "780px"
+    },
+    paragraphSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "0.875rem",
+      lineHeight: "1.125rem",
+      letterSpacing: "normal",
+      maxWidth: "680px"
+    },
+    paragraphExtraSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "0.75rem",
+      lineHeight: "1.125rem",
+      letterSpacing: "normal",
+      maxWidth: "600px"
+    },
+    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"
+    }
+  }
+};
+exports.tokens = tokens;

package/dist/cjs/legacy/ThemeManager.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+var makeCssVariableDefinitionsMap = require('../lib/makeCssVariableDefinitionsMap.cjs');
+
+/**
+ * Use this class to set and apply themes, and to access or subscribe to the currently active one.
+ * This class fulfills the idea of theming and runtime theme switching by relying on CSS variables,
+ * and the ability to update them in JavaScript - a framework agnostic method.
+ *
+ * It works by converting a Theme interface to a flattened map of CSS variable keys and values, then calling `document.documentElement.style.setProperty(key, value)`.
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ *
+ * {@link https://cultureamp.design/?path=/docs/guides-app-starter--docs Check App Starter guidance}
+ */
+var ThemeManager = /** @class */function () {
+  function ThemeManager(theme, rootElementId, /* This allows you to stop the  class from applying the theme automatically during construction. Defaults to true */
+  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 (rootElementId) {
+      return _this.rootElementId = rootElementId;
+    };
+    this.setAndApplyTheme = function (theme, force) {
+      if (!force) {
+        if (_this.theme === theme) return;
+      }
+      _this.theme = theme;
+      _this.applyCurrentTheme();
+      _this.notifyThemeChangeListeners(theme);
+    };
+    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 = makeCssVariableDefinitionsMap.makeCssVariableDefinitionsMap(_this.theme);
+        Object.entries(cssVariableDefinitions).forEach(function (_a) {
+          var _b;
+          var key = _a[0],
+            value = _a[1];
+          (_b = _this.rootElement) === null || _b === void 0 ? void 0 : _b.style.setProperty(key, value);
+        });
+      }
+    };
+    this.notifyThemeChangeListeners = function (theme) {
+      _this.themeChangeListeners.forEach(function (listener) {
+        return listener(theme);
+      });
+    };
+    /*
+      For some reason, storybook likes this way of defining class properties better.
+      If you use `constructor( private theme: Theme, ...)` - theme becomes undefined within the class's methods.
+    */
+    this.theme = theme;
+    this.rootElementId = rootElementId;
+    if (apply) this.applyCurrentTheme();
+  }
+  return ThemeManager;
+}();
+// I would like to expose this, but instantiating ThemeManager in some situations or runtimes (such as nodejs) cause exceptions.
+// For now it is not exposed, but we might come back to it, as it makes sense to have a singleton ThemeManager in almost all cases
+/* export const defaultThemeManager = new ThemeManager(defaultTheme) */
+
+exports.ThemeManager = ThemeManager;

package/dist/cjs/legacy/ThemeProvider.cjs

@@ -0,0 +1,82 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var ThemeManager = require('./ThemeManager.cjs');
+var index = require('./themes/index.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var ThemeContext = React__default.default.createContext(index.defaultTheme);
+/**
+ * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
+ * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ *
+ * {@link https://cultureamp.design/?path=/docs/guides-app-starter--docs Check App Starter guidance}
+ */
+var ThemeProvider = function (_a) {
+  var themeManager = _a.themeManager,
+    props = tslib.__rest(_a, ["themeManager"]);
+  var themeManagerInstance = React.useState(function () {
+    return themeManager || new ThemeManager.ThemeManager(index.defaultTheme);
+  })[0];
+  var _b = React__default.default.useState(themeManagerInstance.getCurrentTheme()),
+    theme = _b[0],
+    setTheme = _b[1];
+  React__default.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__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(ThemeContext.Provider, {
+    value: theme
+  }, props.children), React__default.default.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }), React__default.default.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }), React__default.default.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }), React__default.default.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }), React__default.default.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }));
+};
+var useTheme = function () {
+  return React__default.default.useContext(ThemeContext);
+};
+exports.ThemeContext = ThemeContext;
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;

package/dist/cjs/legacy/makeCssVariableDefinitionsMap.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var tslib = require('tslib');
+var addExtraThemeEntries = require('../lib/addExtraThemeEntries.cjs');
+var cssVariables = require('../lib/cssVariables.cjs');
+var mapLeafsOfObject = require('./mapLeafsOfObject.cjs');
+
+/**
+
+ * Make a map of CSS variables -> values in a consistent way.
+ * Use this to, for example, create a CSS file that declares each theme variable on the `:root` pseudo element.
+ * Or for example when you're defining CSS variables using `rootElement.style.setProperty` within ThemeManager.
+ *
+ * It is paramount that this function defines every variable that {@link makeCssVariableTheme} expects to be defined.
+ * Otherwise, it's possible that a CSS variable token (something that looks like var(--color-purple-100-rgb)) won't have a matching defined
+ * CSS variable like `--color-purple-100-rgb: 123, 123, 123;`
+ *
+ *
+ * For example:
+ * Input:
+ * ```
+ * {
+ *      color: {
+ *        whatever: {
+ *          100: "#ff0022"
+ *        }
+ *      }
+ * }
+ * ```
+ * Output:
+ * ```
+ * {
+ *  "--color-whatever-100": "#ff0022"
+ * }
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ */
+function makeCssVariableDefinitionsMap(theme) {
+  var accumulatedCssVariables = {};
+  // Shamelessly using a map function like a forEach
+  mapLeafsOfObject.mapLeafsOfObject(theme, function (path, value) {
+    // Key will be `--color-blah`
+    var key = cssVariables.objectPathToCssVarIdentifier(path);
+    var nextCssVariables = addExtraThemeEntries.addExtraThemeEntries(path, key, value, function (_, v) {
+      return "".concat(v);
+    }, {
+      augmentWithId: false
+    });
+    accumulatedCssVariables = tslib.__assign(tslib.__assign({}, accumulatedCssVariables), nextCssVariables);
+  });
+  return accumulatedCssVariables;
+}
+exports.makeCssVariableDefinitionsMap = makeCssVariableDefinitionsMap;

package/dist/{legacy/makeCssVariableTheme.js → cjs/legacy/makeCssVariableTheme.cjs}

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeCSSVariableTheme = makeCSSVariableTheme;
-var addExtraThemeEntries_1 = require("../lib/addExtraThemeEntries");
-var cssVariables_1 = require("../lib/cssVariables");
-var mapLeafsOfObject_1 = require("../lib/mapLeafsOfObject");
+'use strict';
+
+var addExtraThemeEntries = require('../lib/addExtraThemeEntries.cjs');
+var cssVariables = require('../lib/cssVariables.cjs');
+var mapLeafsOfObject = require('../lib/mapLeafsOfObject.cjs');
+
 /**
  * This function could use a new name during a breaking change
  *
@@ -40,21 +40,25 @@ var mapLeafsOfObject_1 = require("../lib/mapLeafsOfObject");
  * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
  */
 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;
+  if (printValue === void 0) {
+    printValue = cssVariables.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 = addExtraThemeEntries.addExtraThemeEntries(leafPath, leafKey, value, printValue, {
+      augmentWithId: true
+    });
+    Object.assign(leafObject, cssVariablesOfToken);
+  };
+  mapLeafsOfObject.mapLeafsOfObject(theme, mapper);
+  return augmentedTheme;
 }
-//# sourceMappingURL=makeCssVariableTheme.js.map
+exports.makeCSSVariableTheme = makeCSSVariableTheme;

package/dist/cjs/legacy/mapLeafsOfObject.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var tslib = require('tslib');
+
+/**
+ * This allows you to map the leaf nodes of an object, and you're provided the path to that leaf as well as the value as parameters to your mapper function.
+ * This function was build to support mapping theme values to their respective CSS variable identifiers.
+ * For example:
+ * ```ts
+ * mapLeafsOfObject({
+ *  one: {
+ *    two: 4
+ *  }
+ * }, (path, value) => value + 7)
+ * ```
+ * Results in:
+ * ```
+ * {
+ *    one: {
+ *      two: 11
+ *    }
+ * }
+ * ```
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ */
+function mapLeafsOfObject(object, mapper) {
+  var recurser = function (currentPath, obj) {
+    var handleEntry = function (key, value) {
+      var pathToKey = tslib.__spreadArray(tslib.__spreadArray([], currentPath, true), [key], false);
+      if (typeof value === "object" && value !== null && value !== undefined) {
+        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 tslib.__assign(tslib.__assign({}, acc), (_b = {}, _b[nextKey] = handleEntry(nextKey, nextValue), _b));
+    }, {});
+  };
+  return recurser([], object);
+}
+exports.mapLeafsOfObject = mapLeafsOfObject;

package/dist/cjs/legacy/themes/heart.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var tslib = require('tslib');
+var tokens = require('../../js/tokens.cjs');
+
+/**
+ * @deprecated
+ * - Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ * - If you require direct usage of these tokens in js you can `import { tokens } from "@kaizen/design-tokens/js"`
+ */
+var heartTheme = tslib.__assign({
+  themeKey: "heart"
+}, tokens.tokens);
+exports.heartTheme = heartTheme;