@kaizen/components 1.4.22-canary.3 → 1.4.22-canary.5

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 };
@@ -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,14 +2957,14 @@
           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;
         }
       })();
     }
@@ -3492,37 +3492,12 @@
   KaizenProvider.displayName = "KaizenProvider";
 
   // ../a11y/dist/esm/index.js
-  var import_react13 = __toESM(require_react());
+  var import_react4 = __toESM(require_react());
 
-  // ../component-library/dist/esm/index.js
+  // ../component-library/dist/esm/chunk-HRENJKZ7.js
   var import_react3 = __toESM(require_react());
   var import_classnames = __toESM(require_classnames());
-  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 yellow = "\x1B[33m ";
   var reset = "\x1B[0m ";
   var warn = (message) => {
@@ -3558,16 +3533,16 @@ ${singleLine(message)}${reset}
       "presentation" to indicate it is not meaningful.
     `);
     }
-    const renderTitle = () => isMeaningfulImg && !!title && /* @__PURE__ */ import_react4.default.createElement("title", null, title);
-    const renderDesc = () => isMeaningfulImg && !!desc && /* @__PURE__ */ import_react4.default.createElement("desc", null, desc);
+    const renderTitle = () => isMeaningfulImg && !!title && /* @__PURE__ */ import_react3.default.createElement("title", null, title);
+    const renderDesc = () => isMeaningfulImg && !!desc && /* @__PURE__ */ import_react3.default.createElement("desc", null, desc);
     const accessibilityProps = {
       role,
       ["aria-hidden"]: isMeaningfulImg ? void 0 : true
     };
-    return /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react3.default.createElement(
       "svg",
       {
-        className: (0, import_classnames2.default)(import_Icon_module_VD7NKLAR.default.icon, classNameOverride, {
+        className: (0, import_classnames.default)(import_Icon_module_VD7NKLAR.default.icon, classNameOverride, {
           [import_Icon_module_VD7NKLAR.default.inheritSize]: inheritSize
         }),
         viewBox: icon.viewBox,
@@ -3577,460 +3552,19 @@ ${singleLine(message)}${reset}
       },
       renderTitle(),
       renderDesc(),
-      /* @__PURE__ */ import_react4.default.createElement("use", { xlinkHref: `#${icon.id}` })
+      /* @__PURE__ */ import_react3.default.createElement("use", { xlinkHref: `#${icon.id}` })
     );
   };
   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";
 
   // ../component-library/icons/skip.icon.svg
   var skip_icon_default = "./skip.icon-4OAFSA2T.svg";
 
   // ../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_react5 = __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)));
+  var SkipLink = ({ label, skipTo }) => /* @__PURE__ */ import_react4.default.createElement("a", { className: import_SkipLink_module_KAZA7PAL.default.skipLinkContainer, href: `#${skipTo}` }, /* @__PURE__ */ import_react4.default.createElement("span", { className: import_SkipLink_module_KAZA7PAL.default.skipLinkContent }, /* @__PURE__ */ import_react4.default.createElement("span", { className: import_SkipLink_module_KAZA7PAL.default.skipLinkIcon }, /* @__PURE__ */ import_react4.default.createElement(Icon, { icon: skip_icon_default, role: "presentation" })), /* @__PURE__ */ import_react4.default.createElement("span", null, label)));
   SkipLink.displayName = "SkipLink";
   var VisuallyHidden = ({
     children,
@@ -4039,7 +3573,7 @@ ${singleLine(message)}${reset}
     ...otherProps
   }) => {
     const className = `${import_VisuallyHidden_module_E5JUNEF5.default.srOnly} ${classNameOverride}`;
-    return (0, import_react14.createElement)(tag, { ...otherProps, className }, children);
+    return (0, import_react5.createElement)(tag, { ...otherProps, className }, children);
   };
   VisuallyHidden.displayName = "VisuallyHidden";
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.4.22-canary.3+67c597aa1",
+  "version": "1.4.22-canary.5+94347e6d9",
   "description": "Kaizen component library",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -28,49 +28,49 @@
   },
   "homepage": "https://github.com/cultureamp/kaizen-design-system#readme",
   "dependencies": {
-    "@kaizen/a11y": "^1.7.1-canary.3+67c597aa1",
+    "@kaizen/a11y": "^1.7.1-canary.5+94347e6d9",
     "@kaizen/brand": "^1.5.4",
-    "@kaizen/brand-moment": "^1.12.66-canary.3+67c597aa1",
-    "@kaizen/button": "^2.0.22-canary.3+67c597aa1",
+    "@kaizen/brand-moment": "^1.12.66-canary.5+94347e6d9",
+    "@kaizen/button": "^2.0.22-canary.5+94347e6d9",
     "@kaizen/component-base": "^1.1.3",
-    "@kaizen/component-library": "^16.4.1-canary.3+67c597aa1",
-    "@kaizen/date-picker": "^5.19.3-canary.3+67c597aa1",
+    "@kaizen/component-library": "^16.4.1-canary.5+94347e6d9",
+    "@kaizen/date-picker": "^5.19.3-canary.5+94347e6d9",
     "@kaizen/design-tokens": "^10.3.1",
-    "@kaizen/draft-avatar": "^2.8.28-canary.3+67c597aa1",
+    "@kaizen/draft-avatar": "^2.8.28-canary.5+94347e6d9",
     "@kaizen/draft-badge": "^1.13.6",
     "@kaizen/draft-card": "^3.2.6",
-    "@kaizen/draft-collapsible": "^3.5.21-canary.3+67c597aa1",
+    "@kaizen/draft-collapsible": "^3.5.21-canary.5+94347e6d9",
     "@kaizen/draft-divider": "^2.2.6",
-    "@kaizen/draft-empty-state": "^5.3.28-canary.3+67c597aa1",
-    "@kaizen/draft-filter-menu-button": "^2.6.34-canary.3+67c597aa1",
-    "@kaizen/draft-form": "^10.3.2-canary.3+67c597aa1",
-    "@kaizen/draft-guidance-block": "^6.1.17-canary.3+67c597aa1",
+    "@kaizen/draft-empty-state": "^5.3.28-canary.5+94347e6d9",
+    "@kaizen/draft-filter-menu-button": "^2.6.34-canary.5+94347e6d9",
+    "@kaizen/draft-form": "^10.3.2-canary.5+94347e6d9",
+    "@kaizen/draft-guidance-block": "^6.1.17-canary.5+94347e6d9",
     "@kaizen/draft-hero-card": "^2.2.15",
-    "@kaizen/draft-illustration": "^6.0.19-canary.3+67c597aa1",
-    "@kaizen/draft-likert-scale-legacy": "^1.10.42-canary.3+67c597aa1",
-    "@kaizen/draft-menu": "^4.8.33-canary.3+67c597aa1",
-    "@kaizen/draft-modal": "^10.6.3-canary.3+67c597aa1",
+    "@kaizen/draft-illustration": "^6.0.19-canary.5+94347e6d9",
+    "@kaizen/draft-likert-scale-legacy": "^1.10.42-canary.5+94347e6d9",
+    "@kaizen/draft-menu": "^4.8.33-canary.5+94347e6d9",
+    "@kaizen/draft-modal": "^10.6.3-canary.5+94347e6d9",
     "@kaizen/draft-page-layout": "^2.3.7",
-    "@kaizen/draft-popover": "^5.3.2-canary.3+67c597aa1",
-    "@kaizen/draft-select": "^2.10.23-canary.3+67c597aa1",
-    "@kaizen/draft-table": "^5.6.18-canary.3+67c597aa1",
-    "@kaizen/draft-tabs": "^5.2.28-canary.3+67c597aa1",
-    "@kaizen/draft-tag": "^3.4.2-canary.3+67c597aa1",
-    "@kaizen/draft-tile": "^5.9.28-canary.3+67c597aa1",
-    "@kaizen/draft-title-block-zen": "^7.9.8-canary.3+67c597aa1",
-    "@kaizen/draft-tooltip": "^5.4.30-canary.3+67c597aa1",
+    "@kaizen/draft-popover": "^5.3.2-canary.5+94347e6d9",
+    "@kaizen/draft-select": "^2.10.23-canary.5+94347e6d9",
+    "@kaizen/draft-table": "^5.6.18-canary.5+94347e6d9",
+    "@kaizen/draft-tabs": "^5.2.28-canary.5+94347e6d9",
+    "@kaizen/draft-tag": "^3.4.2-canary.5+94347e6d9",
+    "@kaizen/draft-tile": "^5.9.28-canary.5+94347e6d9",
+    "@kaizen/draft-title-block-zen": "^7.9.8-canary.5+94347e6d9",
+    "@kaizen/draft-tooltip": "^5.4.30-canary.5+94347e6d9",
     "@kaizen/draft-well": "^4.3.3",
     "@kaizen/hosted-assets": "^2.0.1",
     "@kaizen/loading-skeleton": "^2.0.2",
     "@kaizen/loading-spinner": "^2.3.6",
-    "@kaizen/notification": "^1.4.2-canary.3+67c597aa1",
-    "@kaizen/pagination": "^1.6.28-canary.3+67c597aa1",
-    "@kaizen/progress-bar": "^2.3.21-canary.3+67c597aa1",
+    "@kaizen/notification": "^1.4.2-canary.5+94347e6d9",
+    "@kaizen/pagination": "^1.6.28-canary.5+94347e6d9",
+    "@kaizen/progress-bar": "^2.3.21-canary.5+94347e6d9",
     "@kaizen/responsive": "^1.8.5",
-    "@kaizen/rich-text-editor": "^1.19.32-canary.3+67c597aa1",
-    "@kaizen/select": "^6.13.9-canary.3+67c597aa1",
-    "@kaizen/split-button": "^1.3.35-canary.3+67c597aa1",
-    "@kaizen/tabs": "^1.5.32-canary.3+67c597aa1",
+    "@kaizen/rich-text-editor": "^1.19.32-canary.5+94347e6d9",
+    "@kaizen/select": "^6.13.9-canary.5+94347e6d9",
+    "@kaizen/split-button": "^1.3.35-canary.5+94347e6d9",
+    "@kaizen/tabs": "^1.5.32-canary.5+94347e6d9",
     "@kaizen/tailwind": "^0.5.1",
     "@kaizen/typography": "^2.3.6",
     "classnames": "^2.3.2"
@@ -85,5 +85,5 @@
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "67c597aa16007790e6a1cb1a04fc0c800fcdae4b"
+  "gitHead": "94347e6d92d9d1ca40853e07b2f8d95f785223ac"
 }

package/dist/iife/Dropdown.module-4CIBZTRZ-4CIBZTRZ.scss

@@ -1,100 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/deprecated-component-library-helpers/styles/color";
-@import "../../styles/layers";
-@import "~@kaizen/deprecated-component-library-helpers/styles/type";
-
-$width: 248px;
-$caButton-border-width: $border-solid-border-width;
-$caButton-verticalPadding: calc(
-  calc(#{$ca-grid} / 2) - #{$caButton-border-width}
-);
-
-.dropdown {
-  position: relative;
-  padding: $caButton-verticalPadding
-    calc(#{$ca-grid * 1} - #{$caButton-border-width});
-}
-
-.buttonReset {
-  appearance: none;
-  display: inline;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-// @TODO - this should be using Kaizen's button
-.dropdownButton {
-  @include kz-type-inter-button-primary;
-  @include ca-inherit-baseline;
-  composes: buttonReset;
-  cursor: pointer;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-}
-
-.dropdownControlAction {
-  @include kz-type-inter-button-primary;
-  @include ca-inherit-baseline;
-}
-
-.dropdownIcon {
-  box-sizing: border-box;
-  width: $ca-grid;
-  height: $ca-grid;
-  padding: 2px;
-}
-
-.dropdownIcon + .dropdownLabel {
-  margin-left: calc(#{$ca-grid} / 2 - 2px);
-
-  [dir="rtl"] & {
-    margin-left: 0;
-    margin-right: calc(#{$ca-grid} / 2 - 2px);
-  }
-}
-
-// If you would like the dropdown icon to only be visible when a certain area is hovered,
-// have you hover area use (or compose) the `dropdownHoverArea` class. The label will
-// always be visible.
-.dropdownHoverArea {
-  .dropdownIcon {
-    opacity: 0;
-    &.isOpen,
-    &:focus {
-      opacity: 1;
-    }
-  }
-  &:hover .dropdownIcon {
-    opacity: 1;
-  }
-}
-
-.chevronIcon {
-  position: relative;
-  top: 4px;
-}
-
-.menuContainer {
-  position: absolute;
-  width: $width;
-  z-index: $ca-z-index-dropdown;
-  right: 0;
-
-  [dir="rtl"] & {
-    right: auto;
-    left: 0;
-  }
-}
-
-.reversedColor {
-  color: $color-white;
-}

package/dist/iife/Layout.module-MZ6JYT46-MZ6JYT46.scss

@@ -1,58 +0,0 @@
-@import "./styles";
-@import "~@kaizen/component-library/styles/utils";
-
-.root {
-  @extend %root;
-}
-
-.navigationBar {
-  @extend %navigation-bar;
-  box-sizing: border-box;
-  top: 0;
-  z-index: $ca-z-index-fixed;
-}
-
-.page {
-  @extend %page;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.header {
-  @extend %header;
-  box-sizing: border-box;
-}
-
-.body {
-  @extend %body;
-  box-sizing: border-box;
-}
-
-.bodyInner {
-  @extend %body-inner;
-}
-
-.sidebar {
-  @extend %sidebar;
-  box-sizing: border-box;
-}
-
-.content {
-  @extend %content;
-  box-sizing: border-box;
-}
-
-.footer {
-  @extend %footer;
-  box-sizing: border-box;
-}
-
-.toasts {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.announcers {
-  @include sr-only();
-}

package/dist/iife/Margin.module-DJURK5K7-DJURK5K7.scss

@@ -1,19 +0,0 @@
-@import "./Base.module.scss";
-
-@each $fraction, $margin in $spacing-list {
-  .m-#{$fraction} {
-    margin: $margin;
-  }
-  .mt-#{$fraction} {
-    margin-top: $margin;
-  }
-  .mr-#{$fraction} {
-    margin-right: $margin;
-  }
-  .mb-#{$fraction} {
-    margin-bottom: $margin;
-  }
-  .ml-#{$fraction} {
-    margin-left: $margin;
-  }
-}

package/dist/iife/Menu.module-N76N74LN-N76N74LN.scss

@@ -1,111 +0,0 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "~@kaizen/deprecated-component-library-helpers/styles/type";
-@import "~@kaizen/deprecated-component-library-helpers/styles/color";
-@import "../../styles/border";
-@import "../../styles/layers";
-@import "../../styles/animation";
-
-$side-padding: calc(calc(3 / 4) * #{$ca-grid});
-
-.menuList {
-  background: white;
-  border: $border-solid-border-width $border-solid-border-style
-    $color-purple-200;
-  box-shadow: $shadow-small-box-shadow;
-  line-height: 40px;
-}
-
-.header {
-  padding: 10px $side-padding;
-  text-align: left;
-  color: rgba($color-purple-800-rgb, 0.4);
-  border-bottom: $ca-border-color 1px solid;
-}
-
-.header__title {
-  @include kz-typography-heading-6;
-  @include ca-inherit-baseline;
-  display: block;
-}
-
-.menuItem {
-  @include kz-typography-paragraph-body;
-  @include ca-inherit-baseline;
-  composes: interactiveIconWrapper from "../Icon/Icon.module.scss";
-  background: transparent;
-  color: $color-purple-800;
-  cursor: pointer;
-  text-align: left;
-
-  transition: $ca-duration-immediate background-color ease,
-    $ca-duration-immediate color ease;
-
-  padding: 10px $side-padding;
-  text-decoration: none;
-  display: flex;
-  flex: 0 0 100%;
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
-
-  &.menuItem--active,
-  &:hover,
-  &:focus {
-    background: $color-gray-100;
-    color: $color-blue-500;
-    // override Murmur global styles :(
-    text-decoration: none;
-
-    .menuItem__Icon {
-      color: $color-blue-500;
-    }
-  }
-}
-
-.menuItem--active {
-  composes: active from "../Icon/Icon.module.scss";
-}
-
-.menuItem--destructive {
-  color: $color-red-600;
-  .menuItem__Icon {
-    color: $color-red-600;
-  }
-}
-
-.menuItem__Label {
-  flex: 1;
-
-  :not(:only-child) {
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
-  }
-}
-
-.menuItem__Icon {
-  text-align: right;
-  color: $color-purple-800;
-  position: relative;
-  top: 3px;
-
-  .hoverIcon & {
-    opacity: 0;
-  }
-  .menuItem--active &,
-  .hoverIcon:hover &,
-  .hoverIcon:focus & {
-    opacity: 1;
-  }
-}
-
-.separator {
-  height: 1px;
-  width: 100%;
-  border: 0;
-  background: $color-purple-200;
-  visibility: visible;
-  margin: 5px 0;
-}

package/dist/iife/Padding.module-QSNUEZBU-QSNUEZBU.scss

@@ -1,19 +0,0 @@
-@import "./Base.module.scss";
-
-@each $fraction, $padding in $spacing-list {
-  .p-#{$fraction} {
-    padding: $padding;
-  }
-  .pt-#{$fraction} {
-    padding-top: $padding;
-  }
-  .pr-#{$fraction} {
-    padding-right: $padding;
-  }
-  .pb-#{$fraction} {
-    padding-bottom: $padding;
-  }
-  .pl-#{$fraction} {
-    padding-left: $padding;
-  }
-}

package/dist/iife/Text.module-SXGFOHGJ-SXGFOHGJ.scss

@@ -1,173 +0,0 @@
-@import "~@kaizen/deprecated-component-library-helpers/styles/type";
-
-.page-title,
-h1.default-style {
-  @include ca-type-inter-page-title;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.title,
-h2.default-style {
-  @include ca-type-inter-title;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.display,
-h3.default-style {
-  @include ca-type-inter-display;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.heading,
-h4.default-style,
-h5.default-style,
-h6.default-style {
-  @include ca-type-inter-heading;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.lede {
-  @include ca-type-inter-lede;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.paragraph,
-p.default-style {
-  @include ca-type-inter-body;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.body,
-.default-style {
-  @include ca-type-inter-body;
-  margin: 0;
-}
-
-.body-bold {
-  @include ca-type-inter-body-bold;
-  margin: 0;
-}
-
-.small {
-  @include ca-type-inter-small;
-  margin: 0;
-}
-
-.small-bold {
-  @include ca-type-inter-small-bold;
-  margin: 0;
-}
-
-.notification {
-  @include ca-type-inter-notification;
-  margin: 0;
-}
-
-.label {
-  @include ca-type-inter-label;
-  margin: 0;
-}
-
-.control-action {
-  @include ca-type-inter-control-action;
-  margin: 0;
-}
-
-.button {
-  @include ca-type-inter-button;
-  margin: 0;
-}
-
-// We double the class selector to increase specificity above rules like `h1.default-style`
-.inheritBaseline.inheritBaseline {
-  @include ca-inherit-baseline;
-}
-
-// Required for aligning text alongside other elements e.g. Button
-.inline.inline {
-  display: inline-flex;
-  margin-bottom: 0;
-}
-
-// Alias classes for Elm CSS modules
-.defaultStyle {
-  composes: default-style;
-}
-.pageTitle {
-  composes: page-title;
-}
-.bodyBold {
-  composes: body-bold;
-}
-.smallBold {
-  composes: small-bold;
-}
-.controlAction {
-  composes: control-action;
-}
-
-.zen-display-0 {
-  @include kz-typography-display-0;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-heading-1 {
-  @include kz-typography-heading-1;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-heading-2 {
-  @include kz-typography-heading-2;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-heading-3 {
-  @include kz-typography-heading-3;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-large {
-  @include kz-typography-data-large;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-large-units {
-  @include kz-typography-data-large-units;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-medium {
-  @include kz-typography-data-medium;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-medium-units {
-  @include kz-typography-data-medium-units;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-small {
-  @include kz-typography-data-small;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-small-units {
-  @include kz-typography-data-small-units;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}