@kaizen/components 1.7.8 → 1.7.10

package/dist/cjs/index.js

@@ -1,449 +1,45 @@
 'use strict';
 
+var index = require('./index-05670f16.js');
 var React = require('react');
-var index = require('./index-10631f0d.js');
 var designTokens = require('@kaizen/design-tokens');
 
 function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n.default = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-var ThemeManager = (
-  /** @class */
-  function() {
-    function ThemeManager2(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 = designTokens.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 ThemeManager2;
-  }()
-);
+const ORIGIN_BASE_URL = "https://d1e7r7b0lb8p4d.cloudfront.net";
+const assetUrl = (path) => [ORIGIN_BASE_URL, path].join("/");
 
-var heartTheme = {
-  themeKey: "heart",
-  animation: {
-    easingFunction: {
-      easeInOut: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
-      easeIn: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
-      easeOut: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-      linear: "linear",
-      bounceIn: "cubic-bezier(0.485, 0.155, 0.24, 1.245)",
-      bounceOut: "cubic-bezier(0.485, 0.155, 0.515, 0.845)",
-      bounceInOut: "cubic-bezier(0.76, -0.245, 0.24, 1.245)"
-    },
-    duration: {
-      instant: "0ms",
-      immediate: "100ms",
-      rapid: "200ms",
-      fast: "300ms",
-      slow: "400ms",
-      deliberate: "700ms"
-    }
-  },
-  border: {
-    solid: {
-      borderWidth: "2px",
-      borderRadius: "7px",
-      borderStyle: "solid",
-      borderColor: "#e1e2ea"
-    },
-    dashed: {
-      borderWidth: "2px",
-      borderRadius: "7px",
-      borderStyle: "dashed"
-    },
-    borderless: {
-      borderWidth: "2px",
-      borderRadius: "7px",
-      borderStyle: "solid",
-      borderColor: "transparent"
-    },
-    focusRing: {
-      borderWidth: "2px",
-      borderRadius: "10px",
-      borderStyle: "solid"
-    }
-  },
-  color: {
-    purple: {
-      100: "#f4edf8",
-      200: "#dfc9ea",
-      300: "#c9a5dd",
-      400: "#ae67b1",
-      500: "#844587",
-      600: "#5f3361",
-      700: "#4a234d",
-      800: "#2f2438"
-    },
-    blue: {
-      100: "#e6f6ff",
-      200: "#bde2f5",
-      300: "#73c0e8",
-      400: "#008bd6",
-      500: "#0168b3",
-      600: "#004970",
-      700: "#003157"
-    },
-    green: {
-      100: "#e8f8f4",
-      200: "#c4ede2",
-      300: "#8fdbc7",
-      400: "#5dcbad",
-      500: "#44a289",
-      600: "#2c7d67",
-      700: "#22594a"
-    },
-    yellow: {
-      100: "#fff9e4",
-      200: "#ffeeb3",
-      300: "#ffe36e",
-      400: "#ffca4d",
-      500: "#ffb600",
-      600: "#c68600",
-      700: "#876400"
-    },
-    red: {
-      100: "#fdeaee",
-      200: "#f9c2cb",
-      300: "#f597a8",
-      400: "#e0707d",
-      500: "#c93b55",
-      600: "#a82433",
-      700: "#6c1e20"
-    },
-    orange: {
-      100: "#fff0e8",
-      200: "#ffd1b9",
-      300: "#ffb08a",
-      400: "#ff9461",
-      500: "#e96c2f",
-      600: "#b74302",
-      700: "#903c00"
-    },
-    gray: {
-      100: "#f9f9f9",
-      200: "#f4f4f5",
-      300: "#eaeaec",
-      400: "#cdcdd0",
-      500: "#8c8c97",
-      600: "#524e56"
-    },
-    white: "#ffffff"
-  },
-  dataViz: {
-    favorable: "#7dd5bd",
-    unfavorable: "#e68d97"
-  },
-  layout: {
-    contentMaxWidth: "1392px",
-    contentMaxWidthWithSidebar: "1080px",
-    contentSideMargin: "72px",
-    mobileActionsDrawerHeight: "60px",
-    navigationBarHeight: "72px",
-    breakpoints: {
-      medium: "768px",
-      large: "1080px"
-    }
-  },
-  shadow: {
-    small: {
-      boxShadow: "0px 3px 16px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1)"
-    },
-    large: {
-      boxShadow: "0px 8px 40px rgba(0, 0, 0, 0.08), 0px 3px 9px rgba(0, 0, 0, 0.1)"
-    }
-  },
-  spacing: {
-    xs: "0.375rem",
-    sm: "0.75rem",
-    md: "1.5rem",
-    lg: "2.25rem",
-    xl: "3rem",
-    xxl: "3.75rem",
-    xxxl: "4.5rem",
-    xxxxl: "5.25rem",
-    xxxxxl: "6rem",
-    0: "0",
-    1: ".0625rem",
-    2: ".125rem",
-    4: ".25rem",
-    6: ".375rem",
-    8: ".5rem",
-    12: ".75rem",
-    16: "1rem",
-    24: "1.5rem",
-    32: "2rem",
-    40: "2.5rem",
-    48: "3rem",
-    56: "3.5rem",
-    64: "4rem",
-    72: "4.5rem",
-    80: "5rem",
-    96: "6rem",
-    112: "7rem",
-    128: "8rem",
-    160: "10rem",
-    200: "12.5rem",
-    240: "15rem",
-    280: "17.5rem",
-    320: "20rem"
-  },
-  typography: {
-    dataLarge: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "5.25rem",
-      lineHeight: "5.25rem",
-      letterSpacing: "normal"
-    },
-    dataLargeUnits: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "2.625rem",
-      lineHeight: "5.25rem",
-      letterSpacing: "normal"
-    },
-    dataMedium: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "3rem",
-      lineHeight: "5rem",
-      letterSpacing: "normal"
-    },
-    dataMediumUnits: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "1.5rem",
-      lineHeight: "5rem",
-      letterSpacing: "normal"
-    },
-    dataSmall: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "1.5rem",
-      lineHeight: "1.5rem",
-      letterSpacing: "normal"
-    },
-    dataSmallUnits: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "1.125rem",
-      lineHeight: "1.5rem",
-      letterSpacing: "normal"
-    },
-    display0: {
-      fontFamily: '"Tiempos Headline", Georgia, serif',
-      fontWeight: 800,
-      fontSize: "4.5rem",
-      lineHeight: "5.25rem",
-      letterSpacing: "0em"
-    },
-    heading1: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "2.125rem",
-      lineHeight: "2.625rem",
-      letterSpacing: "normal"
-    },
-    heading2: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "1.75rem",
-      lineHeight: "2.25rem",
-      letterSpacing: "normal"
-    },
-    heading3: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "1.375rem",
-      lineHeight: "1.875rem",
-      letterSpacing: "normal"
-    },
-    heading4: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 600,
-      fontSize: "1.125rem",
-      lineHeight: "1.5rem",
-      letterSpacing: "normal"
-    },
-    heading5: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 600,
-      fontSize: "1rem",
-      lineHeight: "1.5rem",
-      letterSpacing: "normal"
-    },
-    heading6: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "0.875rem",
-      lineHeight: "1.5rem",
-      letterSpacing: "normal"
-    },
-    paragraphIntroLede: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 400,
-      fontSize: "1.25rem",
-      lineHeight: "1.875rem",
-      letterSpacing: "0"
-    },
-    paragraphBody: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 400,
-      fontSize: "1rem",
-      lineHeight: "1.5rem",
-      letterSpacing: "normal"
-    },
-    paragraphSmall: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 400,
-      fontSize: "0.875rem",
-      lineHeight: "1.125rem",
-      letterSpacing: "normal"
-    },
-    paragraphExtraSmall: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 400,
-      fontSize: "0.75rem",
-      lineHeight: "1.125rem",
-      letterSpacing: "normal"
-    },
-    paragraphBold: {
-      fontWeight: 600
-    },
-    buttonPrimary: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 700,
-      fontSize: "1.125rem",
-      lineHeight: "1.5rem",
-      letterSpacing: "normal"
-    },
-    buttonSecondary: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 500,
-      fontSize: "1rem",
-      lineHeight: "1.5rem",
-      letterSpacing: "normal"
-    }
-  }
-};
+var styles$f = {"img":"Brand-module_img__uWvra"};
 
-var defaultTheme = heartTheme;
-
-var ThemeContext = React.createContext(defaultTheme);
-var ThemeProvider = function(_a) {
-  var themeManager = _a.themeManager, props = index.__rest(_a, ["themeManager"]);
-  var themeManagerInstance = React.useState(function() {
-    return themeManager || new ThemeManager(defaultTheme);
-  })[0];
-  var _b = React.useState(themeManagerInstance.getCurrentTheme()), theme = _b[0], setTheme = _b[1];
-  React.useEffect(function() {
-    var cancelled = false;
-    var listener = function(newTheme) {
-      if (!cancelled)
-        setTheme(newTheme);
-    };
-    themeManagerInstance.addThemeChangeListener(listener);
-    return function() {
-      cancelled = true;
-      themeManagerInstance.removeThemeChangeListener(listener);
-    };
-  }, []);
+var Brand = function(_a) {
+  var variant = _a.variant, alt = _a.alt, _b = _a.reversed, reversed = _b === void 0 ? false : _b, classNameOverride = _a.classNameOverride, restProps = index.__rest(_a, ["variant", "alt", "reversed", "classNameOverride"]);
+  var brandTheme = reversed ? "-reversed" : "-default";
   return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(ThemeContext.Provider, { value: theme }, props.children),
-    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
-    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
-    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
-    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
-    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" })
+    "picture",
+    index.__assign({ className: classNameOverride }, restProps),
+    React.createElement("source", { srcSet: assetUrl("brand/".concat(variant, "-reversed.svg")), media: "(forced-colors: active) and (prefers-color-scheme: dark)" }),
+    React.createElement("source", { srcSet: assetUrl("brand/".concat(variant, "-default.svg")), media: "(forced-colors: active) and (prefers-color-scheme: light)" }),
+    React.createElement("img", { src: assetUrl("brand/".concat(variant).concat(brandTheme, ".svg")), alt, className: styles$f.img })
   );
 };
-var useTheme = function() {
-  return React.useContext(ThemeContext);
-};
-
-var KaizenProvider = function(_a) {
-  var children = _a.children, themeManager = _a.themeManager;
-  return React.createElement(ThemeProvider, { themeManager }, children);
-};
-KaizenProvider.displayName = "KaizenProvider";
+Brand.displayName = "Brand";
 
 var zeroRightClassName = 'right-scroll-bar-position';
 var fullWidthClassName = 'width-before-scroll-bar';
@@ -37267,11 +36863,11 @@ function Reference(_ref) {
  // Public types
 
 var esm = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Manager: Manager,
-    Popper: Popper,
-    Reference: Reference,
-    usePopper: usePopper
+  __proto__: null,
+  Manager: Manager,
+  Popper: Popper,
+  Reference: Reference,
+  usePopper: usePopper
 });
 
 var styles$d = {"filterPopover":"FilterPopover-module_filterPopover__OgOEM"};
@@ -37497,10 +37093,10 @@ var AppearanceAnim = {};
 function c(u,e,c){var i=this,a=React.useRef(null),o=React.useRef(0),f=React.useRef(null),l=React.useRef([]),m=React.useRef(),v=React.useRef(),d=React.useRef(u),p=React.useRef(!0);React.useEffect(function(){d.current=u;},[u]);var g=!e&&0!==e&&"undefined"!=typeof window;if("function"!=typeof u)throw new TypeError("Expected a function");e=+e||0;var w=!!(c=c||{}).leading,s=!("trailing"in c)||!!c.trailing,x="maxWait"in c,y=x?Math.max(+c.maxWait||0,e):null;React.useEffect(function(){return p.current=!0,function(){p.current=!1;}},[]);var h=React.useMemo(function(){var r=function(r){var n=l.current,t=m.current;return l.current=m.current=null,o.current=r,v.current=d.current.apply(t,n)},n=function(r,n){g&&cancelAnimationFrame(f.current),f.current=g?requestAnimationFrame(r):setTimeout(r,n);},t=function(r){if(!p.current)return !1;var n=r-a.current;return !a.current||n>=e||n<0||x&&r-o.current>=y},u=function(n){return f.current=null,s&&l.current?r(n):(l.current=m.current=null,v.current)},c=function r(){var c=Date.now();if(t(c))return u(c);if(p.current){var i=e-(c-a.current),f=x?Math.min(i,y-(c-o.current)):i;n(r,f);}},h=function(){var u=Date.now(),d=t(u);if(l.current=[].slice.call(arguments),m.current=i,a.current=u,d){if(!f.current&&p.current)return o.current=a.current,n(c,e),w?r(a.current):v.current;if(x)return n(c,e),r(a.current)}return f.current||n(c,e),v.current};return h.cancel=function(){f.current&&(g?cancelAnimationFrame(f.current):clearTimeout(f.current)),o.current=0,l.current=a.current=m.current=f.current=null;},h.isPending=function(){return !!f.current},h.flush=function(){return f.current?u(Date.now()):v.current},h},[w,x,e,y,s,g]);return h}function i(r,n){return r===n}function a(r){return "function"==typeof r?function(){return r}:r}function o(n,t,o){var f,l,m=o&&o.equalityFn||i,v=(f=React.useState(a(n)),l=f[1],[f[0],React.useCallback(function(r){return l(a(r))},[])]),d=v[0],p=v[1],g=c(React.useCallback(function(r){return p(r)},[p]),t,o),w=React.useRef(n);return m(w.current,n)||(g(n),w.current=n),[d,g]}function f$1(r,n,t){var u=void 0===t?{}:t,e=u.leading,i=u.trailing;return c(r,n,{maxWait:n,leading:void 0===e||e,trailing:void 0===i||i})}
 
 var index_module = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    useDebounce: o,
-    useDebouncedCallback: c,
-    useThrottledCallback: f$1
+  __proto__: null,
+  useDebounce: o,
+  useDebouncedCallback: c,
+  useThrottledCallback: f$1
 });
 
 var require$$1$1 = /*@__PURE__*/getAugmentedNamespace(index_module);
@@ -38213,16 +37809,16 @@ function version(uuid) {
 }
 
 var esmBrowser = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    NIL: nil,
-    parse: parse,
-    stringify: stringify,
-    v1: v1,
-    v3: v3$1,
-    v4: v4,
-    v5: v5$1,
-    validate: validate,
-    version: version
+  __proto__: null,
+  NIL: nil,
+  parse: parse,
+  stringify: stringify,
+  v1: v1,
+  v3: v3$1,
+  v4: v4,
+  v5: v5$1,
+  validate: validate,
+  version: version
 });
 
 var require$$1 = /*@__PURE__*/getAugmentedNamespace(esmBrowser);
@@ -38241,8 +37837,8 @@ useUuid$1.useUuid = useUuid;
 var Tooltip_module = {"tooltip":"Tooltip-module_tooltip__80yPv","tooltipContent":"Tooltip-module_tooltipContent__gXHKT","default":"Tooltip-module_default__oLBfa","informative":"Tooltip-module_informative__Lw2ZJ","positive":"Tooltip-module_positive__31-es","cautionary":"Tooltip-module_cautionary__jr2QQ","highlight":"Tooltip-module_highlight__b5HMe","arrow":"Tooltip-module_arrow__LWe4h","arrowInner":"Tooltip-module_arrowInner__whQvw","arrowMain":"Tooltip-module_arrowMain__VSut6","arrowShadow":"Tooltip-module_arrowShadow__cwgsV","displayInline":"Tooltip-module_displayInline__iojZb","displayBlock":"Tooltip-module_displayBlock__RfmWl","displayInlineBlock":"Tooltip-module_displayInlineBlock__2q-e6","displayFlex":"Tooltip-module_displayFlex__orTOm","displayInlineFlex":"Tooltip-module_displayInlineFlex__z-4AS"};
 
 var Tooltip_module$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: Tooltip_module
+  __proto__: null,
+  default: Tooltip_module
 });
 
 var require$$6 = /*@__PURE__*/getAugmentedNamespace(Tooltip_module$1);
@@ -45420,6 +45016,429 @@ FilterSelect.SectionDivider = SectionDivider;
 FilterSelect.Option = Option;
 FilterSelect.ItemDefaultRender = ListItem;
 
+var ThemeManager = (
+  /** @class */
+  function() {
+    function ThemeManager2(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 = designTokens.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 ThemeManager2;
+  }()
+);
+
+var heartTheme = {
+  themeKey: "heart",
+  animation: {
+    easingFunction: {
+      easeInOut: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
+      easeIn: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+      easeOut: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      linear: "linear",
+      bounceIn: "cubic-bezier(0.485, 0.155, 0.24, 1.245)",
+      bounceOut: "cubic-bezier(0.485, 0.155, 0.515, 0.845)",
+      bounceInOut: "cubic-bezier(0.76, -0.245, 0.24, 1.245)"
+    },
+    duration: {
+      instant: "0ms",
+      immediate: "100ms",
+      rapid: "200ms",
+      fast: "300ms",
+      slow: "400ms",
+      deliberate: "700ms"
+    }
+  },
+  border: {
+    solid: {
+      borderWidth: "2px",
+      borderRadius: "7px",
+      borderStyle: "solid",
+      borderColor: "#e1e2ea"
+    },
+    dashed: {
+      borderWidth: "2px",
+      borderRadius: "7px",
+      borderStyle: "dashed"
+    },
+    borderless: {
+      borderWidth: "2px",
+      borderRadius: "7px",
+      borderStyle: "solid",
+      borderColor: "transparent"
+    },
+    focusRing: {
+      borderWidth: "2px",
+      borderRadius: "10px",
+      borderStyle: "solid"
+    }
+  },
+  color: {
+    purple: {
+      100: "#f4edf8",
+      200: "#dfc9ea",
+      300: "#c9a5dd",
+      400: "#ae67b1",
+      500: "#844587",
+      600: "#5f3361",
+      700: "#4a234d",
+      800: "#2f2438"
+    },
+    blue: {
+      100: "#e6f6ff",
+      200: "#bde2f5",
+      300: "#73c0e8",
+      400: "#008bd6",
+      500: "#0168b3",
+      600: "#004970",
+      700: "#003157"
+    },
+    green: {
+      100: "#e8f8f4",
+      200: "#c4ede2",
+      300: "#8fdbc7",
+      400: "#5dcbad",
+      500: "#44a289",
+      600: "#2c7d67",
+      700: "#22594a"
+    },
+    yellow: {
+      100: "#fff9e4",
+      200: "#ffeeb3",
+      300: "#ffe36e",
+      400: "#ffca4d",
+      500: "#ffb600",
+      600: "#c68600",
+      700: "#876400"
+    },
+    red: {
+      100: "#fdeaee",
+      200: "#f9c2cb",
+      300: "#f597a8",
+      400: "#e0707d",
+      500: "#c93b55",
+      600: "#a82433",
+      700: "#6c1e20"
+    },
+    orange: {
+      100: "#fff0e8",
+      200: "#ffd1b9",
+      300: "#ffb08a",
+      400: "#ff9461",
+      500: "#e96c2f",
+      600: "#b74302",
+      700: "#903c00"
+    },
+    gray: {
+      100: "#f9f9f9",
+      200: "#f4f4f5",
+      300: "#eaeaec",
+      400: "#cdcdd0",
+      500: "#8c8c97",
+      600: "#524e56"
+    },
+    white: "#ffffff"
+  },
+  dataViz: {
+    favorable: "#7dd5bd",
+    unfavorable: "#e68d97"
+  },
+  layout: {
+    contentMaxWidth: "1392px",
+    contentMaxWidthWithSidebar: "1080px",
+    contentSideMargin: "72px",
+    mobileActionsDrawerHeight: "60px",
+    navigationBarHeight: "72px",
+    breakpoints: {
+      medium: "768px",
+      large: "1080px"
+    }
+  },
+  shadow: {
+    small: {
+      boxShadow: "0px 3px 16px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1)"
+    },
+    large: {
+      boxShadow: "0px 8px 40px rgba(0, 0, 0, 0.08), 0px 3px 9px rgba(0, 0, 0, 0.1)"
+    }
+  },
+  spacing: {
+    xs: "0.375rem",
+    sm: "0.75rem",
+    md: "1.5rem",
+    lg: "2.25rem",
+    xl: "3rem",
+    xxl: "3.75rem",
+    xxxl: "4.5rem",
+    xxxxl: "5.25rem",
+    xxxxxl: "6rem",
+    0: "0",
+    1: ".0625rem",
+    2: ".125rem",
+    4: ".25rem",
+    6: ".375rem",
+    8: ".5rem",
+    12: ".75rem",
+    16: "1rem",
+    24: "1.5rem",
+    32: "2rem",
+    40: "2.5rem",
+    48: "3rem",
+    56: "3.5rem",
+    64: "4rem",
+    72: "4.5rem",
+    80: "5rem",
+    96: "6rem",
+    112: "7rem",
+    128: "8rem",
+    160: "10rem",
+    200: "12.5rem",
+    240: "15rem",
+    280: "17.5rem",
+    320: "20rem"
+  },
+  typography: {
+    dataLarge: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "5.25rem",
+      lineHeight: "5.25rem",
+      letterSpacing: "normal"
+    },
+    dataLargeUnits: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "2.625rem",
+      lineHeight: "5.25rem",
+      letterSpacing: "normal"
+    },
+    dataMedium: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "3rem",
+      lineHeight: "5rem",
+      letterSpacing: "normal"
+    },
+    dataMediumUnits: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.5rem",
+      lineHeight: "5rem",
+      letterSpacing: "normal"
+    },
+    dataSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.5rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    dataSmallUnits: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    display0: {
+      fontFamily: '"Tiempos Headline", Georgia, serif',
+      fontWeight: 800,
+      fontSize: "4.5rem",
+      lineHeight: "5.25rem",
+      letterSpacing: "0em"
+    },
+    heading1: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "2.125rem",
+      lineHeight: "2.625rem",
+      letterSpacing: "normal"
+    },
+    heading2: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.75rem",
+      lineHeight: "2.25rem",
+      letterSpacing: "normal"
+    },
+    heading3: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.375rem",
+      lineHeight: "1.875rem",
+      letterSpacing: "normal"
+    },
+    heading4: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 600,
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    heading5: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 600,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    heading6: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "0.875rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    paragraphIntroLede: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "1.25rem",
+      lineHeight: "1.875rem",
+      letterSpacing: "0"
+    },
+    paragraphBody: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    paragraphSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "0.875rem",
+      lineHeight: "1.125rem",
+      letterSpacing: "normal"
+    },
+    paragraphExtraSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "0.75rem",
+      lineHeight: "1.125rem",
+      letterSpacing: "normal"
+    },
+    paragraphBold: {
+      fontWeight: 600
+    },
+    buttonPrimary: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    buttonSecondary: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 500,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    }
+  }
+};
+
+var defaultTheme = heartTheme;
+
+var ThemeContext = React.createContext(defaultTheme);
+var ThemeProvider = function(_a) {
+  var themeManager = _a.themeManager, props = index.__rest(_a, ["themeManager"]);
+  var themeManagerInstance = React.useState(function() {
+    return themeManager || new ThemeManager(defaultTheme);
+  })[0];
+  var _b = React.useState(themeManagerInstance.getCurrentTheme()), theme = _b[0], setTheme = _b[1];
+  React.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.createElement(
+    React.Fragment,
+    null,
+    React.createElement(ThemeContext.Provider, { value: theme }, props.children),
+    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+    React.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.useContext(ThemeContext);
+};
+
+var KaizenProvider = function(_a) {
+  var children = _a.children, themeManager = _a.themeManager;
+  return React.createElement(ThemeProvider, { themeManager }, children);
+};
+KaizenProvider.displayName = "KaizenProvider";
+
+exports.Brand = Brand;
 exports.Filter = Filter;
 exports.FilterButton = FilterButton;
 exports.FilterButtonRemovable = FilterButtonRemovable;