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

package/dist/iife/index.js

@@ -39,7 +39,7 @@
       "use strict";
       var l = Symbol.for("react.element");
       var n = Symbol.for("react.portal");
-      var p = Symbol.for("react.fragment");
+      var p2 = 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), m = 0; m < g; m++)
-            f[m] = arguments[m + 2];
+          for (var f = Array(g), m2 = 0; m2 < g; m2++)
+            f[m2] = arguments[m2 + 2];
           c.children = f;
         }
         if (a && a.defaultProps)
@@ -217,7 +217,7 @@
         return a;
       } };
       exports.Component = E;
-      exports.Fragment = p;
+      exports.Fragment = p2;
       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 m = 0; m < f; m++)
-            g[m] = arguments[m + 2];
+          for (var m2 = 0; m2 < f; m2++)
+            g[m2] = arguments[m2 + 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 classNames() {
+        function classNames4() {
           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 = classNames.apply(null, arg);
+                var inner = classNames4.apply(null, arg);
                 if (inner) {
                   classes.push(inner);
                 }
@@ -2957,14 +2957,14 @@
           return classes.join(" ");
         }
         if (typeof module !== "undefined" && module.exports) {
-          classNames.default = classNames;
-          module.exports = classNames;
+          classNames4.default = classNames4;
+          module.exports = classNames4;
         } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
           define("classnames", [], function() {
-            return classNames;
+            return classNames4;
           });
         } else {
-          window.classNames = classNames;
+          window.classNames = classNames4;
         }
       })();
     }
@@ -3491,14 +3491,38 @@
   }) => /* @__PURE__ */ import_react2.default.createElement(ThemeProvider, { themeManager }, children);
   KaizenProvider.displayName = "KaizenProvider";
 
-  // ../a11y/src/SkipLink.tsx
-  var import_react4 = __toESM(require_react());
+  // node_modules/@kaizen/a11y/dist/esm/index.js
+  var import_react13 = __toESM(require_react());
 
-  // ../component-library/components/Icon/Icon.tsx
+  // node_modules/@kaizen/component-library/dist/esm/index.js
   var import_react3 = __toESM(require_react());
   var import_classnames = __toESM(require_classnames());
-
-  // ../component-library/util/console.ts
+  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) => {
@@ -3510,9 +3534,6 @@ ${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,
@@ -3537,17 +3558,17 @@ ${singleLine(message)}${reset}
       "presentation" to indicate it is not meaningful.
     `);
     }
-    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 renderTitle = () => isMeaningfulImg && !!title && /* @__PURE__ */ import_react4.default.createElement("title", null, title);
+    const renderDesc = () => isMeaningfulImg && !!desc && /* @__PURE__ */ import_react4.default.createElement("desc", null, desc);
     const accessibilityProps = {
       role,
       ["aria-hidden"]: isMeaningfulImg ? void 0 : true
     };
-    return /* @__PURE__ */ import_react3.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement(
       "svg",
       {
-        className: (0, import_classnames.default)(import_Icon_module.default.icon, classNameOverride, {
-          [import_Icon_module.default.inheritSize]: inheritSize
+        className: (0, import_classnames2.default)(import_Icon_module_VD7NKLAR.default.icon, classNameOverride, {
+          [import_Icon_module_VD7NKLAR.default.inheritSize]: inheritSize
         }),
         viewBox: icon.viewBox,
         focusable: "false",
@@ -3556,30 +3577,469 @@ ${singleLine(message)}${reset}
       },
       renderTitle(),
       renderDesc(),
-      /* @__PURE__ */ import_react3.default.createElement("use", { xlinkHref: `#${icon.id}` })
+      /* @__PURE__ */ import_react4.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
+  // node_modules/@kaizen/component-library/icons/skip.icon.svg
   var skip_icon_default = "./skip.icon-4OAFSA2T.svg";
 
-  // ../a11y/src/SkipLink.tsx
-  var import_SkipLink_module = __toESM(__require("./SkipLink.module-KAZA7PAL.scss"));
-  var SkipLink = ({ label, skipTo }) => /* @__PURE__ */ import_react4.default.createElement("a", { className: import_SkipLink_module.default.skipLinkContainer, href: `#${skipTo}` }, /* @__PURE__ */ import_react4.default.createElement("span", { className: import_SkipLink_module.default.skipLinkContent }, /* @__PURE__ */ import_react4.default.createElement("span", { className: import_SkipLink_module.default.skipLinkIcon }, /* @__PURE__ */ import_react4.default.createElement(Icon, { icon: skip_icon_default, role: "presentation" })), /* @__PURE__ */ import_react4.default.createElement("span", null, label)));
+  // 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)));
   SkipLink.displayName = "SkipLink";
-
-  // ../a11y/src/VisuallyHidden/VisuallyHidden.tsx
-  var import_react5 = __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.default.srOnly} ${classNameOverride}`;
-    return (0, import_react5.createElement)(tag, { ...otherProps, className }, children);
+    const className = `${import_VisuallyHidden_module_E5JUNEF5.default.srOnly} ${classNameOverride}`;
+    return (0, import_react14.createElement)(tag, { ...otherProps, className }, children);
   };
   VisuallyHidden.displayName = "VisuallyHidden";
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.4.22-canary.0+95edeaebc",
+  "version": "1.4.22-canary.1+ba5ad0a0b",
   "description": "Kaizen component library",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -28,12 +28,12 @@
   },
   "homepage": "https://github.com/cultureamp/kaizen-design-system#readme",
   "dependencies": {
-    "@kaizen/a11y": "^1.7.0",
+    "@kaizen/a11y": "^1.7.1",
     "@kaizen/brand": "^1.5.4",
     "@kaizen/brand-moment": "^1.12.65",
     "@kaizen/button": "^2.0.21",
     "@kaizen/component-base": "^1.1.3",
-    "@kaizen/component-library": "^16.4.0",
+    "@kaizen/component-library": "^16.4.1",
     "@kaizen/date-picker": "^5.19.2",
     "@kaizen/design-tokens": "^10.3.1",
     "@kaizen/draft-avatar": "^2.8.27",
@@ -85,5 +85,5 @@
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "95edeaebc7e483222b1dc1cc52ab2e04723e2abe"
+  "gitHead": "ba5ad0a0b1a0d4e3b98f2fda2a88e1036d9f4c28"
 }