@kaizen/components 1.4.22-canary.1 → 1.4.22-canary.4

package/dist/iife/index.js

@@ -39,7 +39,7 @@
       "use strict";
       var l = Symbol.for("react.element");
       var n = Symbol.for("react.portal");
-      var p2 = Symbol.for("react.fragment");
+      var p = Symbol.for("react.fragment");
       var q = Symbol.for("react.strict_mode");
       var r = Symbol.for("react.profiler");
       var t = Symbol.for("react.provider");
@@ -104,8 +104,8 @@
         if (1 === g)
           c.children = e;
         else if (1 < g) {
-          for (var f = Array(g), m2 = 0; m2 < g; m2++)
-            f[m2] = arguments[m2 + 2];
+          for (var f = Array(g), m = 0; m < g; m++)
+            f[m] = arguments[m + 2];
           c.children = f;
         }
         if (a && a.defaultProps)
@@ -217,7 +217,7 @@
         return a;
       } };
       exports.Component = E;
-      exports.Fragment = p2;
+      exports.Fragment = p;
       exports.Profiler = r;
       exports.PureComponent = G;
       exports.StrictMode = q;
@@ -240,8 +240,8 @@
           d.children = e;
         else if (1 < f) {
           g = Array(f);
-          for (var m2 = 0; m2 < f; m2++)
-            g[m2] = arguments[m2 + 2];
+          for (var m = 0; m < f; m++)
+            g[m] = arguments[m + 2];
           d.children = g;
         }
         return { $$typeof: l, type: a.type, key: c, ref: k, props: d, _owner: h };
@@ -1389,7 +1389,7 @@
             }
             return dispatcher.useContext(Context2);
           }
-          function useState2(initialState) {
+          function useState3(initialState) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useState(initialState);
           }
@@ -2191,7 +2191,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;
@@ -2926,7 +2926,7 @@
         "use strict";
         var hasOwn = {}.hasOwnProperty;
         var nativeCodeString = "[native code]";
-        function classNames4() {
+        function classNames() {
           var classes = [];
           for (var i = 0; i < arguments.length; i++) {
             var arg = arguments[i];
@@ -2937,7 +2937,7 @@
               classes.push(arg);
             } else if (Array.isArray(arg)) {
               if (arg.length) {
-                var inner = classNames4.apply(null, arg);
+                var inner = classNames.apply(null, arg);
                 if (inner) {
                   classes.push(inner);
                 }
@@ -2957,33 +2957,339 @@
           return classes.join(" ");
         }
         if (typeof module !== "undefined" && module.exports) {
-          classNames4.default = classNames4;
-          module.exports = classNames4;
+          classNames.default = classNames;
+          module.exports = classNames;
         } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
           define("classnames", [], function() {
-            return classNames4;
+            return classNames;
           });
         } else {
-          window.classNames = classNames4;
+          window.classNames = classNames;
         }
       })();
     }
   });
 
   // src/KaizenProvider/KaizenProvider.tsx
-  var import_react2 = __toESM(require_react());
+  var import_react3 = __toESM(require_react());
 
   // src/KaizenProvider/ThemeProvider/ThemeProvider.tsx
-  var import_react = __toESM(require_react());
+  var import_react2 = __toESM(require_react());
 
-  // ../design-tokens/src/lib/addExtraThemeEntries.ts
+  // ../design-tokens/dist/esm/index.js
   var import_color_string = __toESM(require_color_string());
-
-  // ../design-tokens/src/lib/cssVariables.ts
   var import_lodash = __toESM(require_lodash());
+  var import_react = __toESM(require_react());
+  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 objectPathToCssVarIdentifier = (path) => `--${path.map(import_lodash.default).join("-")}`;
-
-  // ../design-tokens/src/lib/addExtraThemeEntries.ts
   var addExtraThemeEntries = (path, key, value, printValue, {
     augmentWithId
   }) => {
@@ -3005,8 +3311,6 @@
     }
     return result;
   };
-
-  // ../design-tokens/src/lib/mapLeafsOfObject.ts
   function mapLeafsOfObject(object, mapper) {
     const recurser = (currentPath, obj) => {
       const handleEntry = (key, value) => {
@@ -3026,8 +3330,6 @@
     };
     return recurser([], object);
   }
-
-  // ../design-tokens/src/lib/makeCssVariableDefinitionsMap.ts
   function makeCssVariableDefinitionsMap(theme) {
     let accumulatedCssVariables = {};
     mapLeafsOfObject(theme, (path, value) => {
@@ -3046,6 +3348,7 @@
     });
     return accumulatedCssVariables;
   }
+  var ThemeContext = import_react.default.createContext(defaultTheme);
 
   // src/KaizenProvider/ThemeProvider/ThemeManager.ts
   var ThemeManager = class {
@@ -3099,7 +3402,7 @@
   };
 
   // src/KaizenProvider/ThemeProvider/themes/heart.ts
-  var heartTheme = {
+  var heartTheme2 = {
     themeKey: "heart",
     animation: {
       easingFunction: {
@@ -3409,21 +3712,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 ThemeContext2 = (0, import_react2.createContext)(defaultTheme2);
   var ThemeProvider = ({
     themeManager,
     ...props
   }) => {
-    const [themeManagerInstance] = (0, import_react.useState)(
-      () => themeManager || new ThemeManager(defaultTheme)
+    const [themeManagerInstance] = (0, import_react2.useState)(
+      () => themeManager || new ThemeManager(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)
@@ -3435,7 +3738,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",
@@ -3444,7 +3747,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3453,7 +3756,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3462,7 +3765,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3471,7 +3774,7 @@
         type: "font/woff2",
         crossOrigin: "anonymous"
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react2.default.createElement(
       "link",
       {
         rel: "preload",
@@ -3482,47 +3785,23 @@
       }
     ));
   };
-  var useTheme = () => (0, import_react.useContext)(ThemeContext);
+  var useTheme = () => (0, import_react2.useContext)(ThemeContext2);
 
   // src/KaizenProvider/KaizenProvider.tsx
   var KaizenProvider = ({
     children,
     themeManager
-  }) => /* @__PURE__ */ import_react2.default.createElement(ThemeProvider, { themeManager }, children);
+  }) => /* @__PURE__ */ import_react3.default.createElement(ThemeProvider, { themeManager }, children);
   KaizenProvider.displayName = "KaizenProvider";
 
-  // node_modules/@kaizen/a11y/dist/esm/index.js
-  var import_react13 = __toESM(require_react());
+  // ../a11y/src/SkipLink.tsx
+  var import_react5 = __toESM(require_react());
 
-  // node_modules/@kaizen/component-library/dist/esm/index.js
-  var import_react3 = __toESM(require_react());
-  var import_classnames = __toESM(require_classnames());
+  // ../component-library/components/Icon/Icon.tsx
   var import_react4 = __toESM(require_react());
-  var import_classnames2 = __toESM(require_classnames());
-  var import_Icon_module_VD7NKLAR = __toESM(__require("./Icon.module-VD7NKLAR-VD7NKLAR.scss"));
-  var import_react5 = __toESM(require_react());
-  var import_Dropdown_module_4CIBZTRZ = __toESM(__require("./Dropdown.module-4CIBZTRZ-4CIBZTRZ.scss"));
-  var import_Dropdown_module_4CIBZTRZ2 = __toESM(__require("./Dropdown.module-4CIBZTRZ-4CIBZTRZ.scss"));
-  var import_react6 = __toESM(require_react());
-  var import_Layout_module_MZ6JYT46 = __toESM(__require("./Layout.module-MZ6JYT46-MZ6JYT46.scss"));
-  var import_react7 = __toESM(require_react());
-  var import_Menu_module_N76N74LN = __toESM(__require("./Menu.module-N76N74LN-N76N74LN.scss"));
-  var import_react8 = __toESM(require_react());
-  var import_Menu_module_N76N74LN2 = __toESM(__require("./Menu.module-N76N74LN-N76N74LN.scss"));
-  var import_react9 = __toESM(require_react());
-  var import_classnames3 = __toESM(require_classnames());
-  var import_Menu_module_N76N74LN3 = __toESM(__require("./Menu.module-N76N74LN-N76N74LN.scss"));
-  var import_react10 = __toESM(require_react());
-  var import_Menu_module_N76N74LN4 = __toESM(__require("./Menu.module-N76N74LN-N76N74LN.scss"));
-  var import_react11 = __toESM(require_react());
-  var import_classnames4 = __toESM(require_classnames());
-  var import_Text_module_SXGFOHGJ = __toESM(__require("./Text.module-SXGFOHGJ-SXGFOHGJ.scss"));
-  var import_Padding_module_QSNUEZBU = __toESM(__require("./Padding.module-QSNUEZBU-QSNUEZBU.scss"));
-  var import_Margin_module_DJURK5K7 = __toESM(__require("./Margin.module-DJURK5K7-DJURK5K7.scss"));
-  var import_react12 = __toESM(require_react());
-  var import_classnames5 = __toESM(require_classnames());
-  var chevron_down_icon_default = "./chevron-down.icon-COG3GAYR.svg";
-  var ellipsis_icon_default = "./ellipsis.icon-DECY5OPU.svg";
+  var import_classnames = __toESM(require_classnames());
+
+  // ../component-library/util/console.ts
   var yellow = "\x1B[33m ";
   var reset = "\x1B[0m ";
   var warn = (message) => {
@@ -3534,6 +3813,9 @@ ${singleLine(message)}${reset}
     );
   };
   var singleLine = (message) => message.replace(/^ +/gm, " ").replace(/\n|\r/gm, "").trim();
+
+  // ../component-library/components/Icon/Icon.tsx
+  var import_Icon_module = __toESM(__require("./Icon.module-VD7NKLAR.scss"));
   var Icon = ({
     icon,
     inheritSize = false,
@@ -3567,8 +3849,8 @@ ${singleLine(message)}${reset}
     return /* @__PURE__ */ import_react4.default.createElement(
       "svg",
       {
-        className: (0, import_classnames2.default)(import_Icon_module_VD7NKLAR.default.icon, classNameOverride, {
-          [import_Icon_module_VD7NKLAR.default.inheritSize]: inheritSize
+        className: (0, import_classnames.default)(import_Icon_module.default.icon, classNameOverride, {
+          [import_Icon_module.default.inheritSize]: inheritSize
         }),
         viewBox: icon.viewBox,
         focusable: "false",
@@ -3581,465 +3863,26 @@ ${singleLine(message)}${reset}
     );
   };
   Icon.displayName = "Icon";
-  var DropdownMenu = class extends import_react5.default.Component {
-    constructor() {
-      super(...arguments);
-      this.menu = import_react5.default.createRef();
-      this.handleDocumentClick = (e) => {
-        if (this.menu && this.menu.current && e.target instanceof Node && !this.menu.current.contains(e.target)) {
-          this.props.hideDropdownMenu();
-        }
-      };
-      this.handleDocumentResize = () => {
-        this.props.hideDropdownMenu();
-      };
-    }
-    componentDidMount() {
-      document.addEventListener("click", this.handleDocumentClick, false);
-      window.addEventListener("resize", this.handleDocumentResize, false);
-      this.positionMenu();
-    }
-    componentWillUnmount() {
-      document.removeEventListener("click", this.handleDocumentClick, false);
-      window.removeEventListener("resize", this.handleDocumentResize, false);
-    }
-    render() {
-      const { hideDropdownMenu, children } = this.props;
-      return (
-        // Disabling instead of addressing because this component is deprecated
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-        /* @__PURE__ */ import_react5.default.createElement(
-          "div",
-          {
-            className: import_Dropdown_module_4CIBZTRZ.default.menuContainer,
-            ref: this.menu,
-            onClick: hideDropdownMenu
-          },
-          children
-        )
-      );
-    }
-    positionMenu() {
-      const menu = this.menu;
-      if (!this.props.position || !menu) {
-        return;
-      }
-      if (menu.current) {
-        const pos = this.props.position;
-        const { innerHeight } = window;
-        const rect = menu.current.getBoundingClientRect();
-        if (pos.bottom > innerHeight - rect.height) {
-          menu.current.style.bottom = "24px";
-          menu.current.style.top = "auto";
-        } else {
-          menu.current.style.top = "24px";
-          menu.current.style.bottom = "auto";
-        }
-      }
-    }
-  };
-  DropdownMenu.displayName = "DropdownMenu";
-  var DropdownMenu_default = DropdownMenu;
-  var Dropdown = class extends import_react3.default.Component {
-    constructor(props) {
-      super(props);
-      this.dropdownButton = import_react3.default.createRef();
-      this.toggleDropdownMenu = (e) => {
-        e.stopPropagation();
-        const currentState = this.state.isMenuVisible;
-        this.setState({
-          isMenuVisible: !currentState
-        });
-      };
-      this.hideDropdownMenu = () => {
-        this.setState({
-          isMenuVisible: false
-        });
-      };
-      this.renderIcon = (icon) => {
-        if (!icon)
-          return;
-        return /* @__PURE__ */ import_react3.default.createElement("span", { className: import_Dropdown_module_4CIBZTRZ2.default.dropdownIcon }, /* @__PURE__ */ import_react3.default.createElement(Icon, { icon, role: "img", title: "Open menu" }));
-      };
-      this.renderDownArrow = () => {
-        const { label, controlAction } = this.props;
-        if (!label || !controlAction)
-          return;
-        return /* @__PURE__ */ import_react3.default.createElement("span", { className: import_Dropdown_module_4CIBZTRZ2.default.chevronIcon }, /* @__PURE__ */ import_react3.default.createElement(Icon, { icon: chevron_down_icon_default, role: "img", title: "Open menu" }));
-      };
-      this.renderButtonContent = () => {
-        const { label } = this.props;
-        let { icon } = this.props;
-        if (!icon && !label) {
-          icon = ellipsis_icon_default;
-        }
-        return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, this.renderIcon(icon), label && /* @__PURE__ */ import_react3.default.createElement("span", { className: import_Dropdown_module_4CIBZTRZ2.default.dropdownLabel }, label), this.renderDownArrow());
-      };
-      this.renderReversedButtonContent = () => {
-        const { icon, label } = this.props;
-        return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, this.renderDownArrow(), label && /* @__PURE__ */ import_react3.default.createElement("span", { className: import_Dropdown_module_4CIBZTRZ2.default.dropdownLabel }, label), this.renderIcon(icon));
-      };
-      this.state = {
-        isMenuVisible: Boolean(props.menuVisible)
-      };
-    }
-    getPosition() {
-      return this.dropdownButton && this.dropdownButton.current ? this.dropdownButton.current.getBoundingClientRect() : null;
-    }
-    renderDropdownMenu() {
-      return /* @__PURE__ */ import_react3.default.createElement(
-        DropdownMenu_default,
-        {
-          hideDropdownMenu: this.hideDropdownMenu,
-          position: this.getPosition()
-        },
-        this.props.children
-      );
-    }
-    render() {
-      const { controlAction, automationId, iconPosition, reversedColor } = this.props;
-      const reverseIcon = iconPosition === "end";
-      const btnClass = (0, import_classnames.default)(import_Dropdown_module_4CIBZTRZ2.default.dropdownButton, {
-        [import_Dropdown_module_4CIBZTRZ2.default.dropdownControlAction]: controlAction,
-        [import_Dropdown_module_4CIBZTRZ2.default.isOpen]: this.state.isMenuVisible,
-        [import_Dropdown_module_4CIBZTRZ2.default.reversedColor]: reversedColor
-      });
-      return /* @__PURE__ */ import_react3.default.createElement("div", { className: import_Dropdown_module_4CIBZTRZ2.default.dropdown }, /* @__PURE__ */ import_react3.default.createElement(
-        "button",
-        {
-          className: btnClass,
-          onClick: this.toggleDropdownMenu,
-          onMouseDown: (e) => e.preventDefault(),
-          ref: this.dropdownButton,
-          "data-automation-id": automationId
-        },
-        !reverseIcon && this.renderButtonContent(),
-        reverseIcon && this.renderReversedButtonContent()
-      ), this.state.isMenuVisible && this.renderDropdownMenu());
-    }
-  };
-  Dropdown.displayName = "Dropdown";
-  Dropdown.defaultProps = {
-    iconPosition: "start"
-  };
-  var NavigationBar = ({ children }) => /* @__PURE__ */ import_react6.default.createElement("div", { className: import_Layout_module_MZ6JYT46.default.navigationBar }, children);
-  NavigationBar.displayName = "NavigationBar";
-  var Sidebar = ({ children }) => /* @__PURE__ */ import_react6.default.createElement("div", { className: import_Layout_module_MZ6JYT46.default.sidebar }, /* @__PURE__ */ import_react6.default.createElement("div", { className: import_Layout_module_MZ6JYT46.default.sidebarInner }, children));
-  Sidebar.displayName = "Sidebar";
-  var Header = ({ children }) => /* @__PURE__ */ import_react6.default.createElement("aside", { className: import_Layout_module_MZ6JYT46.default.header }, children);
-  Header.displayName = "Header";
-  var Footer = ({ children }) => /* @__PURE__ */ import_react6.default.createElement("footer", { className: import_Layout_module_MZ6JYT46.default.footer }, children);
-  Footer.displayName = "Footer";
-  var Toasts = ({ children }) => /* @__PURE__ */ import_react6.default.createElement("div", { className: import_Layout_module_MZ6JYT46.default.toasts, "aria-live": "assertive" }, children);
-  Toasts.displayName = "Toasts";
-  var Announcers = ({ children }) => /* @__PURE__ */ import_react6.default.createElement("div", { className: import_Layout_module_MZ6JYT46.default.announcers, "aria-live": "assertive" }, children);
-  Announcers.displayName = "Announcers";
-  var Layout = class extends import_react6.default.Component {
-    render() {
-      const content = import_react6.default.Children.toArray(this.props.children);
-      const navbar = extractChildOfType(content, NavigationBar);
-      const header = extractChildOfType(content, Header);
-      const sidebar = extractChildOfType(content, Sidebar);
-      const footer = extractChildOfType(content, Footer);
-      const announcers = extractChildOfType(content, Announcers);
-      const toasts = extractChildOfType(content, Toasts);
-      return /* @__PURE__ */ import_react6.default.createElement("div", { className: import_Layout_module_MZ6JYT46.default.root }, navbar, announcers, /* @__PURE__ */ import_react6.default.createElement("div", { className: import_Layout_module_MZ6JYT46.default.page }, header, toasts, /* @__PURE__ */ import_react6.default.createElement("div", { className: import_Layout_module_MZ6JYT46.default.body }, /* @__PURE__ */ import_react6.default.createElement("div", { className: import_Layout_module_MZ6JYT46.default.bodyInner }, sidebar, /* @__PURE__ */ import_react6.default.createElement("main", { className: import_Layout_module_MZ6JYT46.default.content }, content))), footer));
-    }
-  };
-  Layout.displayName = "Layout";
-  Layout.NavigationBar = NavigationBar;
-  Layout.Sidebar = Sidebar;
-  Layout.Header = Header;
-  Layout.Footer = Footer;
-  Layout.Toasts = Toasts;
-  Layout.Announcers = Announcers;
-  var extractChildOfType = (children, type) => {
-    const match = children.find((child) => {
-      if (import_react6.default.isValidElement(child) && typeof child.type === "function") {
-        return child.type.displayName === type.displayName;
-      }
-      return false;
-    });
-    if (match) {
-      const index = children.indexOf(match);
-      children.splice(index, 1);
-    }
-    return match;
-  };
-  var MenuList = (props) => /* @__PURE__ */ import_react7.default.createElement("div", { className: import_Menu_module_N76N74LN.default.menuList }, props.children);
-  MenuList.displayName = "MenuList";
-  var MenuHeader = (props) => /* @__PURE__ */ import_react8.default.createElement("div", { className: import_Menu_module_N76N74LN2.default.header }, /* @__PURE__ */ import_react8.default.createElement("span", { className: import_Menu_module_N76N74LN2.default.header__title }, props.title));
-  MenuHeader.displayName = "MenuHeader";
-  var MenuItem = (props) => {
-    const {
-      icon,
-      hoverIcon,
-      children,
-      action,
-      active,
-      destructive,
-      automationId
-    } = props;
-    const isLink = typeof action === "string";
-    const label = /* @__PURE__ */ import_react9.default.createElement("span", { className: import_Menu_module_N76N74LN3.default.menuItem__Label }, children, isLink && "\u2026");
-    const iconNode = icon && /* @__PURE__ */ import_react9.default.createElement("span", { className: import_Menu_module_N76N74LN3.default.menuItem__Icon }, /* @__PURE__ */ import_react9.default.createElement(Icon, { icon, role: "presentation" }));
-    const className = (0, import_classnames3.default)({
-      [import_Menu_module_N76N74LN3.default.menuItem]: true,
-      [import_Menu_module_N76N74LN3.default.hoverIcon]: icon && hoverIcon,
-      [import_Menu_module_N76N74LN3.default["menuItem--active"]]: active,
-      [import_Menu_module_N76N74LN3.default["menuItem--destructive"]]: destructive
-    });
-    if (typeof action === "string") {
-      return /* @__PURE__ */ import_react9.default.createElement("a", { href: action, className, "data-automation-id": automationId }, label, iconNode);
-    }
-    return (
-      // Disabling instead of addressing because this component is deprecated.
-      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-      /* @__PURE__ */ import_react9.default.createElement(
-        "a",
-        {
-          href: "#",
-          onClick: action,
-          className,
-          "data-automation-id": automationId
-        },
-        label,
-        iconNode
-      )
-    );
-  };
-  MenuItem.displayName = "MenuItem";
-  var MenuSeparator = () => /* @__PURE__ */ import_react10.default.createElement("hr", { className: import_Menu_module_N76N74LN4.default.separator });
-  MenuSeparator.displayName = "MenuSeparator";
-  var Text = ({
-    tag,
-    children,
-    inheritBaseline = false,
-    inline = false,
-    style = "default-style"
-  }) => import_react11.default.createElement(
-    tag,
-    {
-      className: (0, import_classnames4.default)(import_Text_module_SXGFOHGJ.default[style], {
-        [import_Text_module_SXGFOHGJ.default.inheritBaseline]: inheritBaseline,
-        [import_Text_module_SXGFOHGJ.default.inline]: inline
-      })
-    },
-    children
-  );
-  Text.displayName = "Text";
-  var convertFractionToString = (fraction) => {
-    switch (fraction) {
-      case 0:
-      default:
-        return "0";
-      case 0.25:
-        return "0-point-25";
-      case 0.5:
-        return "0-point-5";
-      case 0.75:
-        return "0-point-75";
-      case 1:
-        return "1";
-      case 1.25:
-        return "1-point-25";
-      case 1.5:
-        return "1-point-5";
-      case 1.75:
-        return "1-point-75";
-      case 2:
-        return "2";
-      case 2.5:
-        return "2-point-5";
-      case 3:
-        return "3";
-      case 3.5:
-        return "3-point-5";
-      case 4:
-        return "4";
-    }
-  };
-  var pt = (unit) => [
-    import_Padding_module_QSNUEZBU.default[`pt-${convertFractionToString(unit)}`]
-  ];
-  var pr = (unit) => [
-    import_Padding_module_QSNUEZBU.default[`pr-${convertFractionToString(unit)}`]
-  ];
-  var pb = (unit) => [
-    import_Padding_module_QSNUEZBU.default[`pb-${convertFractionToString(unit)}`]
-  ];
-  var pl = (unit) => [
-    import_Padding_module_QSNUEZBU.default[`pl-${convertFractionToString(unit)}`]
-  ];
-  var px = (unit) => [
-    import_Padding_module_QSNUEZBU.default[`pl-${convertFractionToString(unit)}`],
-    import_Padding_module_QSNUEZBU.default[`pr-${convertFractionToString(unit)}`]
-  ];
-  var py = (unit) => [
-    import_Padding_module_QSNUEZBU.default[`pt-${convertFractionToString(unit)}`],
-    import_Padding_module_QSNUEZBU.default[`pb-${convertFractionToString(unit)}`]
-  ];
-  var p = (unit) => {
-    const classes = [];
-    if (typeof unit === "number") {
-      classes.push(import_Padding_module_QSNUEZBU.default[`p-${convertFractionToString(unit)}`]);
-    } else {
-      Object.keys(unit).forEach((key) => {
-        classes.push(import_Padding_module_QSNUEZBU.default[`p-${convertFractionToString(unit[key])}--${key}`]);
-      });
-    }
-    return classes;
-  };
-  var paddingClasses = ({
-    p: padding,
-    pt: paddingTop,
-    pr: paddingRight,
-    pb: paddingBottom,
-    pl: paddingLeft,
-    px: paddingXAxis,
-    py: paddingYAxis,
-    rtl = false
-  }) => {
-    const classes = [];
-    if (padding !== void 0)
-      classes.push(...p(padding));
-    if (paddingTop !== void 0)
-      classes.push(...pt(paddingTop));
-    if (paddingBottom !== void 0)
-      classes.push(...pb(paddingBottom));
-    if (paddingXAxis !== void 0)
-      classes.push(...px(paddingXAxis));
-    if (paddingYAxis !== void 0)
-      classes.push(...py(paddingYAxis));
-    if (rtl) {
-      if (paddingRight !== void 0)
-        classes.push(...pl(paddingRight));
-      if (paddingLeft !== void 0)
-        classes.push(...pr(paddingLeft));
-    } else {
-      if (paddingRight !== void 0)
-        classes.push(...pr(paddingRight));
-      if (paddingLeft !== void 0)
-        classes.push(...pl(paddingLeft));
-    }
-    if (padding === void 0 && paddingTop === void 0 && paddingRight === void 0 && paddingBottom === void 0 && paddingLeft === void 0 && paddingXAxis === void 0 && paddingYAxis === void 0) {
-      classes.push(...p(0));
-    }
-    return classes;
-  };
-  var mt = (unit) => [
-    import_Margin_module_DJURK5K7.default[`mt-${convertFractionToString(unit)}`]
-  ];
-  var mr = (unit) => [
-    import_Margin_module_DJURK5K7.default[`mr-${convertFractionToString(unit)}`]
-  ];
-  var mb = (unit) => [
-    import_Margin_module_DJURK5K7.default[`mb-${convertFractionToString(unit)}`]
-  ];
-  var ml = (unit) => [
-    import_Margin_module_DJURK5K7.default[`ml-${convertFractionToString(unit)}`]
-  ];
-  var mx = (unit) => [
-    import_Margin_module_DJURK5K7.default[`ml-${convertFractionToString(unit)}`],
-    import_Margin_module_DJURK5K7.default[`mr-${convertFractionToString(unit)}`]
-  ];
-  var my = (unit) => [
-    import_Margin_module_DJURK5K7.default[`mt-${convertFractionToString(unit)}`],
-    import_Margin_module_DJURK5K7.default[`mb-${convertFractionToString(unit)}`]
-  ];
-  var m = (unit) => {
-    const classes = [];
-    if (typeof unit === "number") {
-      classes.push(import_Margin_module_DJURK5K7.default[`m-${convertFractionToString(unit)}`]);
-    } else {
-      Object.keys(unit).forEach((key) => {
-        classes.push(import_Margin_module_DJURK5K7.default[`m-${convertFractionToString(unit[key])}--${key}`]);
-      });
-    }
-    return classes;
-  };
-  var marginClasses = ({
-    m: margin,
-    mt: marginTop,
-    mr: marginRight,
-    mb: marginBottom,
-    ml: marginLeft,
-    mx: marginXAxis,
-    my: marginYAxis,
-    rtl = false
-  }) => {
-    const classes = [];
-    if (margin !== void 0)
-      classes.push(...m(margin));
-    if (marginTop !== void 0)
-      classes.push(...mt(marginTop));
-    if (marginBottom !== void 0)
-      classes.push(...mb(marginBottom));
-    if (marginXAxis !== void 0)
-      classes.push(...mx(marginXAxis));
-    if (marginYAxis !== void 0)
-      classes.push(...my(marginYAxis));
-    if (rtl) {
-      if (marginRight !== void 0)
-        classes.push(...ml(marginRight));
-      if (marginLeft !== void 0)
-        classes.push(...mr(marginLeft));
-    } else {
-      if (marginRight !== void 0)
-        classes.push(...mr(marginRight));
-      if (marginLeft !== void 0)
-        classes.push(...ml(marginLeft));
-    }
-    if (margin === void 0 && marginTop === void 0 && marginRight === void 0 && marginBottom === void 0 && marginLeft === void 0 && marginXAxis === void 0 && marginYAxis === void 0) {
-      classes.push(...m(0));
-    }
-    return classes;
-  };
-  var Box = ({
-    children,
-    rtl = false,
-    m: m2,
-    mt: mt2,
-    mr: mr2,
-    mb: mb2,
-    ml: ml2,
-    mx: mx2,
-    my: my2,
-    p: p2,
-    pt: pt2,
-    pr: pr2,
-    pb: pb2,
-    pl: pl2,
-    px: px2,
-    py: py2,
-    classNameOverride,
-    ...restProps
-  }) => {
-    const classes = [
-      ...paddingClasses({ p: p2, pt: pt2, pr: pr2, pb: pb2, pl: pl2, px: px2, py: py2, rtl }),
-      ...marginClasses({ m: m2, mt: mt2, mr: mr2, mb: mb2, ml: ml2, mx: mx2, my: my2, rtl })
-    ];
-    return /* @__PURE__ */ import_react12.default.createElement("div", { className: (0, import_classnames5.default)(classes, classNameOverride), ...restProps }, children);
-  };
-  Box.displayName = "Box";
 
-  // node_modules/@kaizen/component-library/icons/skip.icon.svg
+  // ../component-library/icons/skip.icon.svg
   var skip_icon_default = "./skip.icon-4OAFSA2T.svg";
 
-  // node_modules/@kaizen/a11y/dist/esm/index.js
-  var import_SkipLink_module_KAZA7PAL = __toESM(__require("./SkipLink.module-KAZA7PAL-KAZA7PAL.scss"));
-  var import_react14 = __toESM(require_react());
-  var import_VisuallyHidden_module_E5JUNEF5 = __toESM(__require("./VisuallyHidden.module-E5JUNEF5-E5JUNEF5.scss"));
-  var SkipLink = ({ label, skipTo }) => /* @__PURE__ */ import_react13.default.createElement("a", { className: import_SkipLink_module_KAZA7PAL.default.skipLinkContainer, href: `#${skipTo}` }, /* @__PURE__ */ import_react13.default.createElement("span", { className: import_SkipLink_module_KAZA7PAL.default.skipLinkContent }, /* @__PURE__ */ import_react13.default.createElement("span", { className: import_SkipLink_module_KAZA7PAL.default.skipLinkIcon }, /* @__PURE__ */ import_react13.default.createElement(Icon, { icon: skip_icon_default, role: "presentation" })), /* @__PURE__ */ import_react13.default.createElement("span", null, label)));
+  // ../a11y/src/SkipLink.tsx
+  var import_SkipLink_module = __toESM(__require("./SkipLink.module-KAZA7PAL.scss"));
+  var SkipLink = ({ label, skipTo }) => /* @__PURE__ */ import_react5.default.createElement("a", { className: import_SkipLink_module.default.skipLinkContainer, href: `#${skipTo}` }, /* @__PURE__ */ import_react5.default.createElement("span", { className: import_SkipLink_module.default.skipLinkContent }, /* @__PURE__ */ import_react5.default.createElement("span", { className: import_SkipLink_module.default.skipLinkIcon }, /* @__PURE__ */ import_react5.default.createElement(Icon, { icon: skip_icon_default, role: "presentation" })), /* @__PURE__ */ import_react5.default.createElement("span", null, label)));
   SkipLink.displayName = "SkipLink";
+
+  // ../a11y/src/VisuallyHidden/VisuallyHidden.tsx
+  var import_react6 = __toESM(require_react());
+  var import_VisuallyHidden_module = __toESM(__require("./VisuallyHidden.module-E5JUNEF5.scss"));
   var VisuallyHidden = ({
     children,
     classNameOverride,
     tag = "span",
     ...otherProps
   }) => {
-    const className = `${import_VisuallyHidden_module_E5JUNEF5.default.srOnly} ${classNameOverride}`;
-    return (0, import_react14.createElement)(tag, { ...otherProps, className }, children);
+    const className = `${import_VisuallyHidden_module.default.srOnly} ${classNameOverride}`;
+    return (0, import_react6.createElement)(tag, { ...otherProps, className }, children);
   };
   VisuallyHidden.displayName = "VisuallyHidden";
 })();