@kaizen/components 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-declare-inject-within-20240522052630

package/dist/esm/SplitButton/SplitButton.mjs

@@ -0,0 +1,47 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Menu } from '../Menu/Menu.mjs';
+import '../Menu/subcomponents/MenuHeading/MenuHeading.mjs';
+import '../Menu/subcomponents/MenuItem/MenuItem.mjs';
+import '../Menu/subcomponents/MenuList/MenuList.mjs';
+import '../Menu/subcomponents/StatelessMenu/StatelessMenu.mjs';
+import { ActionButton } from './subcomponents/ActionButton/ActionButton.mjs';
+import { DropdownButton } from './subcomponents/DropdownButton/DropdownButton.mjs';
+import styles from './SplitButton.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896196/Split+Button Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-splitbutton--docs Storybook}
+ */
+const SplitButton = /*#__PURE__*/function () {
+  const SplitButton = function (_a) {
+    var actionButtonProps = _a.actionButtonProps,
+      dropdownButtonProps = _a.dropdownButtonProps,
+      dropdownContent = _a.dropdownContent,
+      isDropdownInitOpen = _a.isDropdownInitOpen,
+      disabled = _a.disabled,
+      isReversed = _a.isReversed,
+      dir = _a.dir,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["actionButtonProps", "dropdownButtonProps", "dropdownContent", "isDropdownInitOpen", "disabled", "isReversed", "dir", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      dir: dir,
+      className: classnames(styles.splitButton, classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement(ActionButton, __assign({
+      disabled: disabled,
+      isReversed: isReversed
+    }, actionButtonProps)), /*#__PURE__*/React.createElement(Menu, {
+      align: dir === "rtl" ? "left" : "right",
+      dropdownWidth: "contain",
+      button: /*#__PURE__*/React.createElement(DropdownButton, __assign({
+        disabled: disabled,
+        isReversed: isReversed
+      }, dropdownButtonProps)),
+      menuVisible: isDropdownInitOpen
+    }, dropdownContent));
+  };
+  SplitButton.displayName = "SplitButton";
+  return SplitButton;
+}();
+export { SplitButton };

package/dist/esm/SplitButton/SplitButton.module.scss.mjs

@@ -0,0 +1,30 @@
+var css_248z = ".SplitButton-module_splitButton__oNIKE{align-items:center;display:inline-flex}";
+var styles = {
+  "splitButton": "SplitButton-module_splitButton__oNIKE"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/SplitButton/subcomponents/ActionButton/ActionButton.mjs

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { BaseButton } from '../BaseButton/BaseButton.mjs';
+import styles from './ActionButton.module.scss.mjs';
+const ActionButton = /*#__PURE__*/function () {
+  const ActionButton = function (_a) {
+    var classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["classNameOverride"]);
+    return /*#__PURE__*/React.createElement(BaseButton, __assign({
+      classNameOverride: classnames(styles.actionButton, classNameOverride)
+    }, restProps));
+  };
+  ActionButton.displayName = "ActionButton";
+  return ActionButton;
+}();
+export { ActionButton };

package/dist/esm/SplitButton/subcomponents/ActionButton/ActionButton.module.scss.mjs

@@ -0,0 +1,30 @@
+var css_248z = ".ActionButton-module_actionButton__mJRl4{border-end-end-radius:0;border-end-start-radius:var(--border-solid-border-radius,7px);border-start-end-radius:0;border-start-start-radius:var(--border-solid-border-radius,7px)}";
+var styles = {
+  "actionButton": "ActionButton-module_actionButton__mJRl4"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/SplitButton/subcomponents/BaseButton/BaseButton.mjs

@@ -0,0 +1,37 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './BaseButton.module.scss.mjs';
+var isAnchor = function (attributes) {
+  return !attributes.disabled && attributes.href !== undefined;
+};
+const BaseButton = /*#__PURE__*/function () {
+  const BaseButton = function (_a) {
+    var label = _a.label,
+      icon = _a.icon,
+      isReversed = _a.isReversed,
+      classNameOverride = _a.classNameOverride,
+      attributes = __rest(_a, ["label", "icon", "isReversed", "classNameOverride"]);
+    var className = classnames(styles.baseButton, classNameOverride, isReversed ? styles.isReversed : styles.default);
+    var contentProps = icon ? {
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, icon),
+      "aria-label": label
+    } : {
+      children: label
+    };
+    var children = contentProps.children,
+      restContentProps = __rest(contentProps, ["children"]);
+    if (isAnchor(attributes)) {
+      return /*#__PURE__*/React.createElement("a", __assign({
+        className: className
+      }, restContentProps, attributes), children);
+    }
+    return /*#__PURE__*/React.createElement("button", __assign({
+      type: "button",
+      className: className
+    }, restContentProps, attributes), children);
+  };
+  BaseButton.displayName = "BaseButton";
+  return BaseButton;
+}();
+export { BaseButton };

package/dist/esm/SplitButton/subcomponents/BaseButton/BaseButton.module.scss.mjs

@@ -0,0 +1,32 @@
+var css_248z = ".BaseButton-module_baseButton__0XYh4{border-style:var(--border-solid-border-style,solid);border-width:var(--border-solid-border-width,2px);cursor:default;font-family:var(--typography-button-primary-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-button-primary-font-size,1.125rem);font-weight:var(--typography-button-primary-font-weight,700);letter-spacing:var(--typography-button-primary-letter-spacing,normal);line-height:var(--typography-button-primary-line-height,1.5rem);padding:calc(var(--spacing-sm, .75rem) - var(--border-borderless-border-width, 2px)) calc(var(--spacing-md, 1.5rem) - var(--border-borderless-border-width, 2px));text-decoration:unset;white-space:nowrap}.BaseButton-module_baseButton__0XYh4:active,.BaseButton-module_baseButton__0XYh4:hover{text-decoration:unset;z-index:2}.BaseButton-module_baseButton__0XYh4:active{transform:translateY(1px)}.BaseButton-module_baseButton__0XYh4:focus{outline:none}.BaseButton-module_baseButton__0XYh4:focus-visible{outline-offset:1px;outline-style:var(--border-solid-border-style,solid);outline-width:var(--border-solid-border-width,2px);z-index:3}.BaseButton-module_baseButton__0XYh4:disabled{opacity:30%;pointer-events:none}.BaseButton-module_default__6JNZx{background-color:var(--color-white,#fff);border-color:var(--color-gray-500,#878792);color:var(--color-purple-800,#2f2438)}.BaseButton-module_default__6JNZx:active,.BaseButton-module_default__6JNZx:focus-visible,.BaseButton-module_default__6JNZx:hover{background-color:var(--color-gray-200,#f4f4f5);border-color:var(--color-gray-600,#524e56);color:var(--color-purple-800,#2f2438)}.BaseButton-module_default__6JNZx:focus-visible{outline-color:var(--color-blue-500,#0168b3)}.BaseButton-module_isReversed__j8nyW{background-color:transparent;border-color:rgba(var(--color-white-rgb,255,255,255),.65);color:var(--color-white,#fff)}.BaseButton-module_isReversed__j8nyW:active,.BaseButton-module_isReversed__j8nyW:focus-visible,.BaseButton-module_isReversed__j8nyW:hover{background-color:rgba(var(--color-white-rgb,255,255,255),.1);border-color:var(--color-white,#fff);color:var(--color-white,#fff)}.BaseButton-module_isReversed__j8nyW:focus-visible{outline-color:var(--color-blue-300,#73c0e8)}";
+var styles = {
+  "baseButton": "BaseButton-module_baseButton__0XYh4",
+  "default": "BaseButton-module_default__6JNZx",
+  "isReversed": "BaseButton-module_isReversed__j8nyW"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/SplitButton/subcomponents/DropdownButton/DropdownButton.mjs

@@ -0,0 +1,30 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
+import classnames from 'classnames';
+import '../../../Icon/subcomponents/SVG/SVG.mjs';
+import { ChevronDownIcon } from '../../../Icon/ChevronDownIcon.mjs';
+import { BaseButton } from '../BaseButton/BaseButton.mjs';
+import styles from './DropdownButton.module.scss.mjs';
+const DropdownButton = /*#__PURE__*/function () {
+  const DropdownButton = function (_a) {
+    var classNameOverride = _a.classNameOverride,
+      ariaLabel = _a["aria-label"],
+      restProps = __rest(_a, ["classNameOverride", "aria-label"]);
+    var formatMessage = useIntl().formatMessage;
+    return /*#__PURE__*/React.createElement(BaseButton, __assign({
+      label: ariaLabel || formatMessage({
+        id: "splitButton.dropdownButton.label",
+        defaultMessage: "Additional actions",
+        description: "Label for a dropdown menu holding additional actions"
+      }),
+      icon: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        role: "presentation"
+      }),
+      classNameOverride: classnames(styles.dropdownButton, classNameOverride)
+    }, restProps));
+  };
+  DropdownButton.displayName = "DropdownButton";
+  return DropdownButton;
+}();
+export { DropdownButton };

package/dist/esm/SplitButton/subcomponents/DropdownButton/DropdownButton.module.scss.mjs

@@ -0,0 +1,30 @@
+var css_248z = ".DropdownButton-module_dropdownButton__PqQH6{border-end-end-radius:var(--border-solid-border-radius,7px);border-end-start-radius:0;border-inline-start-width:0;border-start-end-radius:var(--border-solid-border-radius,7px);border-start-start-radius:0;display:inline-flex;inset-inline-start:calc(var(--border-solid-border-width, 2px)*-1);margin-inline-start:var(--border-solid-border-width,2px);padding:var(--spacing-12,.75rem);position:relative}.DropdownButton-module_dropdownButton__PqQH6:active,.DropdownButton-module_dropdownButton__PqQH6:focus-visible,.DropdownButton-module_dropdownButton__PqQH6:hover{border-inline-start-width:var(--border-solid-border-width,2px);inset-inline-start:calc(var(--border-solid-border-width, 2px)*-1);margin-inline-start:unset}";
+var styles = {
+  "dropdownButton": "DropdownButton-module_dropdownButton__PqQH6"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Table/Table.mjs

@@ -0,0 +1,236 @@
+import { __rest, __assign } from 'tslib';
+import React, { cloneElement } from 'react';
+import classnames from 'classnames';
+import { Checkbox } from '../Checkbox/Checkbox/Checkbox.mjs';
+import '../Checkbox/CheckboxField/CheckboxField.mjs';
+import '../Checkbox/CheckboxGroup/CheckboxGroup.mjs';
+import { Heading } from '../Heading/Heading.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { ExclamationIcon } from '../Icon/ExclamationIcon.mjs';
+import { SortAscendingIcon } from '../Icon/SortAscendingIcon.mjs';
+import { SortDescendingIcon } from '../Icon/SortDescendingIcon.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import styles from './Table.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929256/Table Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-table--docs Storybook}
+ */
+var TableContainer = function (_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? "compact" : _b,
+    children = _a.children,
+    otherProps = __rest(_a, ["variant", "children"]);
+  return /*#__PURE__*/React.createElement("div", __assign({
+    role: "table",
+    className: classnames(styles.container, variant === "default" && styles.defaultSpacing, variant === "data" && styles.dataVariant)
+  }, otherProps), children);
+};
+var TableHeader = function (_a) {
+  var children = _a.children,
+    otherProps = __rest(_a, ["children"]);
+  return /*#__PURE__*/React.createElement("div", __assign({
+    role: "rowgroup"
+  }, otherProps), children);
+};
+var ratioToPercent = function (width) {
+  return width != null ? "".concat(width * 100, "%") : width;
+};
+var TableHeaderRowCell = function (_a) {
+  var _b;
+  var labelText = _a.labelText,
+    onClick = _a.onClick,
+    href = _a.href,
+    width = _a.width,
+    flex = _a.flex,
+    icon = _a.icon,
+    checkable = _a.checkable,
+    checkedStatus = _a.checkedStatus,
+    checkboxLabel = _a.checkboxLabel,
+    onCheck = _a.onCheck,
+    reversed = _a.reversed,
+    sortingRaw = _a.sorting,
+    // I can't say for certain why "nowrap" was the default value. Normally you wouldn't
+    // want to clip off information because it doesn't fit on one line.
+    // My assumption is that because since the cell width rows are decoupled, a heading
+    // cell with a word longer than the column width would push the columns out of
+    // alignment? I'm not sure.
+    // Anyway, we can override this default behaviour by setting wrapping to "wrap".
+    _c = _a.wrapping,
+    // I can't say for certain why "nowrap" was the default value. Normally you wouldn't
+    // want to clip off information because it doesn't fit on one line.
+    // My assumption is that because since the cell width rows are decoupled, a heading
+    // cell with a word longer than the column width would push the columns out of
+    // alignment? I'm not sure.
+    // Anyway, we can override this default behaviour by setting wrapping to "wrap".
+    wrapping = _c === void 0 ? "nowrap" : _c,
+    _d = _a.align,
+    align = _d === void 0 ? "start" : _d,
+    tooltipInfo = _a.tooltipInfo,
+    _e = _a.isTooltipIconHidden,
+    isTooltipIconHidden = _e === void 0 ? false : _e,
+    tooltipPortalSelector = _a.tooltipPortalSelector,
+    sortingArrowsOnHover = _a.sortingArrowsOnHover,
+    classNameOverride = _a.classNameOverride,
+    // There aren't any other props in the type definition, so I'm unsure why we
+    // have this spread.
+    otherProps = __rest(_a, ["labelText", "onClick", "href", "width", "flex", "icon", "checkable", "checkedStatus", "checkboxLabel", "onCheck", "reversed", "sorting", "wrapping", "align", "tooltipInfo", "isTooltipIconHidden", "tooltipPortalSelector", "sortingArrowsOnHover", "classNameOverride"]);
+  var sorting = sortingRaw;
+  var _f = React.useState(false),
+    isHovered = _f[0],
+    setIsHovered = _f[1];
+  var updateHoverState = function (hoverState) {
+    if (sortingArrowsOnHover && hoverState != isHovered) setIsHovered(hoverState);
+  };
+  var headerColor = !!reversed ? "white-reduced-opacity" : "dark-reduced-opacity";
+  var hoveredHeaderColor = !!reversed ? "white" : "dark";
+  // For this "cellContents" variable, we start at the inner most child, and
+  // wrap it elements, depending on what the props dictate.
+  var cellContents = /*#__PURE__*/React.createElement("div", {
+    className: styles.headerRowCellLabelAndIcons
+  }, icon && ( /*#__PURE__*/React.createElement("span", {
+    className: styles.headerRowCellIcon
+  }, /*#__PURE__*/cloneElement(icon, (_b = {
+    title: labelText
+  }, _b["aria-label"] = labelText, _b.role = "img", _b)))), checkable && ( /*#__PURE__*/React.createElement("div", {
+    className: styles.headerRowCellCheckbox
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checkedStatus: checkedStatus,
+    onCheck: onCheck,
+    "aria-label": checkboxLabel
+  }))), tooltipInfo != null && !isTooltipIconHidden ? ( /*#__PURE__*/React.createElement("div", {
+    className: styles.headerRowCellTooltipIcon
+  }, /*#__PURE__*/React.createElement(ExclamationIcon, {
+    role: "presentation"
+  }))) : null, !icon ? ( /*#__PURE__*/React.createElement(Heading, {
+    tag: "div",
+    variant: "heading-6",
+    color: sorting || isHovered ? hoveredHeaderColor : headerColor,
+    classNameOverride: styles.headerRowCellLabel
+  }, labelText)) : null, (sorting || isHovered && sortingArrowsOnHover) && ( /*#__PURE__*/React.createElement("div", {
+    className: classnames(align === "center" && styles.headerRowCellIconAlignCenter, align === "end" && styles.headerRowCellIconAlignEnd, reversed && styles.whiteText)
+  }, sorting === "ascending" || sortingArrowsOnHover === "ascending" ? ( /*#__PURE__*/React.createElement(SortAscendingIcon, {
+    role: "presentation"
+  })) : ( /*#__PURE__*/React.createElement(SortDescendingIcon, {
+    role: "presentation"
+  })))));
+  cellContents = href ? ( /*#__PURE__*/React.createElement("a", {
+    className: classnames(styles.headerRowCellButton, reversed && styles.headerRowCellButtonReversed),
+    href: href,
+    onClick: onClick,
+    onMouseEnter: function () {
+      return updateHoverState(true);
+    },
+    onFocus: function () {
+      return updateHoverState(true);
+    },
+    onMouseLeave: function () {
+      return updateHoverState(false);
+    },
+    onBlur: function () {
+      return updateHoverState(false);
+    }
+  }, cellContents)) : onClick ? ( /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classnames(styles.headerRowCellButton, reversed && styles.headerRowCellButtonReversed),
+    onClick: onClick,
+    onMouseEnter: function () {
+      return updateHoverState(true);
+    },
+    onFocus: function () {
+      return updateHoverState(true);
+    },
+    onMouseLeave: function () {
+      return updateHoverState(false);
+    },
+    onBlur: function () {
+      return updateHoverState(false);
+    }
+  }, cellContents)) : (
+  /*#__PURE__*/
+  // This div wrapper probably isn't needed, but it's a bit easier
+  // for this flex positioning, to have the dom tree depth match for
+  // each permutation.
+  React.createElement("div", {
+    className: styles.headerRowCellNoButton
+  }, cellContents));
+  cellContents = tooltipInfo != null ? ( /*#__PURE__*/React.createElement(Tooltip, {
+    animationDuration: 0,
+    classNameOverride: styles.headerRowCellTooltip,
+    text: tooltipInfo,
+    portalSelector: tooltipPortalSelector
+  }, cellContents)) : (
+  /*#__PURE__*/
+  // Again, this wrapper is just to make the dom tree consistent between
+  // different permutations.
+  React.createElement("div", {
+    className: styles.headerRowCellTooltip
+  }, cellContents));
+  return /*#__PURE__*/React.createElement("div", __assign({
+    className: classnames(styles.headerRowCell, wrapping === "nowrap" && styles.headerRowCellNoWrap, align === "center" && styles.headerRowCellAlignCenter, align === "end" && styles.headerRowCellAlignEnd, sorting && styles.headerRowCellActive, classNameOverride),
+    style: {
+      width: ratioToPercent(width),
+      flex: flex
+    },
+    role: "columnheader"
+  }, otherProps), cellContents);
+};
+var TableCard = function (_a) {
+  var children = _a.children,
+    expanded = _a.expanded,
+    _b = _a.expandedStyle,
+    expandedStyle = _b === void 0 ? "well" : _b,
+    onClick = _a.onClick,
+    href = _a.href,
+    _c = _a.forceHoverState,
+    forceHoverState = _c === void 0 ? false : _c,
+    classNameOverride = _a.classNameOverride,
+    otherProps = __rest(_a, ["children", "expanded", "expandedStyle", "onClick", "href", "forceHoverState", "classNameOverride"]);
+  var className = classnames(styles.card, expanded && styles.expanded, expanded && styles[expandedStyle], (forceHoverState || onClick != null || href != null) && styles.hasHoverState, classNameOverride);
+  return href != null ? ( /*#__PURE__*/React.createElement("a", __assign({
+    href: href,
+    className: className,
+    onClick: onClick
+  }, otherProps), children)) : onClick ? ( /*#__PURE__*/React.createElement("button", __assign({
+    type: "button",
+    className: className,
+    onClick: onClick
+  }, otherProps), children)) : ( /*#__PURE__*/React.createElement("div", __assign({
+    className: className
+  }, otherProps), children));
+};
+var TableRow = function (_a) {
+  var children = _a.children,
+    classNameOverride = _a.classNameOverride,
+    otherProps = __rest(_a, ["children", "classNameOverride"]);
+  return /*#__PURE__*/React.createElement("div", __assign({
+    className: classnames(styles.row, classNameOverride),
+    role: "row"
+  }, otherProps), children);
+};
+var TableRowCell = function (_a) {
+  var children = _a.children,
+    width = _a.width,
+    flex = _a.flex,
+    href = _a.href,
+    classNameOverride = _a.classNameOverride,
+    otherProps = __rest(_a, ["children", "width", "flex", "href", "classNameOverride"]);
+  return href != null ? ( /*#__PURE__*/React.createElement("a", __assign({
+    // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+    role: "cell",
+    style: {
+      width: ratioToPercent(width),
+      flex: flex
+    },
+    className: classnames(styles.rowCell, classNameOverride),
+    href: href
+  }, otherProps), children)) : ( /*#__PURE__*/React.createElement("div", __assign({
+    role: "cell",
+    style: {
+      width: ratioToPercent(width),
+      flex: flex
+    },
+    className: classnames(styles.rowCell, classNameOverride)
+  }, otherProps), children));
+};
+export { TableCard, TableContainer, TableHeader, TableHeaderRowCell, TableRow, TableRowCell };

package/dist/esm/Table/Table.module.scss.mjs

@@ -0,0 +1,57 @@
+var css_248z = ".Table-module_container__w-zFG{margin-bottom:var(--spacing-sm,.75rem);width:100%}.Table-module_headerRowCell__kW0YN{align-items:stretch;display:flex;justify-content:flex-start;padding:8px var(--spacing-md,1.5rem);position:relative;text-align:start}.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellLabel__5v6m8{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Table-module_headerRowCellAlignCenter__cobEI{justify-content:center;text-align:center}.Table-module_headerRowCellAlignEnd__dQOOQ{justify-content:flex-end;text-align:end}.Table-module_headerRowCellCheckbox__CdMiY{margin-inline-end:10px}.Table-module_headerRowCell__kW0YN .Table-module_headerRowCellTooltip__uzbpY{align-items:stretch;display:flex;max-width:100%}.Table-module_headerRowCell__kW0YN.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellContent__IArYC{max-width:100%}.Table-module_headerRowCellButton__uikM7{align-items:stretch;appearance:none;background:transparent;border:none;box-sizing:border-box;color:var(--color-purple-800,#2f2438);display:block;display:flex;font:inherit;margin:0;outline:none;padding:0;text-decoration:none;transition:none;width:100%}.Table-module_headerRowCellButton__uikM7:active,.Table-module_headerRowCellButton__uikM7:focus,.Table-module_headerRowCellButton__uikM7:hover{text-decoration:none}.Table-module_headerRowCellButton__uikM7:focus-visible{outline:none;position:relative}.Table-module_headerRowCellButton__uikM7:focus-visible:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";height:calc(100% + var(--border-focus-ring-border-width, 2px)*2 + 1px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + var(--border-focus-ring-border-width, 2px)*2 + 1px)}.Table-module_headerRowCellButtonReversed__uk87N{color:var(--color-white,#fff)}.Table-module_headerRowCellButtonReversed__uk87N:focus-visible:after{border-color:var(--color-blue-100,#e6f6ff)}.Table-module_headerRowCellNoButton__dqf1B{align-items:stretch;box-sizing:border-box;display:flex;width:100%}.Table-module_headerRowCellLabelAndIcons__OCCVi{align-items:center;display:flex;flex:1 1 100%;width:100%}.Table-module_headerRowCellTooltipIcon__X0ETJ{color:var(--color-blue-500,#0168b3);margin-inline-end:var(--spacing-xs,.375rem)}.Table-module_headerRowCellIcon__gB3zI{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);height:20px}.Table-module_headerRowCellActive__wshmg .Table-module_headerRowCellIcon__gB3zI{color:var(--color-purple-800,#2f2438)}.Table-module_headerRowCellButtonReversed__uk87N .Table-module_headerRowCellIcon__gB3zI{color:var(--color-white,#fff)}.Table-module_card__RGyjC{appearance:none;background:transparent;background:var(--color-white,#fff);border:none;border:1px solid rgba(var(--color-purple-700-rgb,74,35,77),.1);box-shadow:0 4px 6px rgba(53,55,74,.04);color:var(--color-purple-800,#2f2438);display:block;font:inherit;margin:0;outline:none;padding:0;text-decoration:none;transition:none;transition:box-shadow var(--animation-duration-rapid,.2s),border-color var(--animation-duration-rapid,.2s),margin var(--animation-duration-rapid,.2s),padding var(--animation-duration-rapid,.2s),width var(--animation-duration-rapid,.2s)}.Table-module_card__RGyjC:active,.Table-module_card__RGyjC:focus,.Table-module_card__RGyjC:hover{text-decoration:none}.Table-module_card__RGyjC:not(:first-child){margin-top:-1px}.Table-module_card__RGyjC:last-child{border-bottom-left-radius:var(--border-solid-border-radius,7px);border-bottom-right-radius:var(--border-solid-border-radius,7px)}.Table-module_card__RGyjC:hover{will-change:box-shadow,border-color,margin,padding,width}.Table-module_card__RGyjC:focus-visible{outline:none;position:relative}.Table-module_card__RGyjC:focus-visible:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:inherit;border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";height:calc(100% + var(--border-focus-ring-border-width, 2px) + 2px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + var(--border-focus-ring-border-width, 2px) + 2px)}.Table-module_card__RGyjC.Table-module_well__xQmO5{margin-top:var(--spacing-sm,.75rem)}.Table-module_card__RGyjC:first-child,[role=rowgroup]+.Table-module_card__RGyjC{border-top-left-radius:var(--border-solid-border-radius,7px);border-top-right-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.Table-module_row__GYSl1{display:flex}.Table-module_well__xQmO5{background-color:var(--color-gray-300,#eaeaec);border-color:var(--border-borderless-border-color,transparent);border-radius:var(--border-solid-border-radius,7px);box-shadow:none;margin-bottom:var(--spacing-sm,.75rem)}.Table-module_popout__PeAVV{box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08))}.Table-module_expanded__dasr3{margin-left:calc(var(--spacing-sm, .75rem)*-1);margin-right:calc(var(--spacing-sm, .75rem)*-1);padding-left:var(--spacing-sm,.75rem);padding-right:var(--spacing-sm,.75rem);position:relative;z-index:1}.Table-module_hasHoverState__u5n3E{cursor:pointer;text-align:left;width:100%}.Table-module_hasHoverState__u5n3E.Table-module_expanded__dasr3{width:calc(100% + var(--spacing-md, 1.5rem))}.Table-module_hasHoverState__u5n3E:focus,.Table-module_hasHoverState__u5n3E:hover{background-color:var(--color-gray-100,#f9f9f9)}.Table-module_rowCell__A5-2R{align-items:center;color:var(--color-purple-800,#2f2438);display:block;display:flex;min-height:60px;padding:0 var(--spacing-md,1.5rem);text-decoration:none}.Table-module_rowCell__A5-2R:active,.Table-module_rowCell__A5-2R:focus,.Table-module_rowCell__A5-2R:hover{text-decoration:none}.Table-module_defaultSpacing__zq1Ci .Table-module_rowCell__A5-2R{padding:var(--spacing-sm,.75rem) var(--spacing-md,1.5rem)}.Table-module_dataVariant__vBOag .Table-module_rowCell__A5-2R{min-height:48px}.Table-module_rowCellAlignCenter__apkoC{justify-content:center;text-align:center}.Table-module_rowCellAlignEnd__qZfa1{justify-content:flex-end;text-align:right}.Table-module_whiteText__4f-q5{color:var(--color-white,#fff)}";
+var styles = {
+  "container": "Table-module_container__w-zFG",
+  "headerRowCell": "Table-module_headerRowCell__kW0YN",
+  "headerRowCellNoWrap": "Table-module_headerRowCellNoWrap__BSuzX",
+  "headerRowCellLabel": "Table-module_headerRowCellLabel__5v6m8",
+  "headerRowCellAlignCenter": "Table-module_headerRowCellAlignCenter__cobEI",
+  "headerRowCellAlignEnd": "Table-module_headerRowCellAlignEnd__dQOOQ",
+  "headerRowCellCheckbox": "Table-module_headerRowCellCheckbox__CdMiY",
+  "headerRowCellTooltip": "Table-module_headerRowCellTooltip__uzbpY",
+  "headerRowCellContent": "Table-module_headerRowCellContent__IArYC",
+  "headerRowCellButton": "Table-module_headerRowCellButton__uikM7",
+  "headerRowCellButtonReversed": "Table-module_headerRowCellButtonReversed__uk87N",
+  "headerRowCellNoButton": "Table-module_headerRowCellNoButton__dqf1B",
+  "headerRowCellLabelAndIcons": "Table-module_headerRowCellLabelAndIcons__OCCVi",
+  "headerRowCellTooltipIcon": "Table-module_headerRowCellTooltipIcon__X0ETJ",
+  "headerRowCellIcon": "Table-module_headerRowCellIcon__gB3zI",
+  "headerRowCellActive": "Table-module_headerRowCellActive__wshmg",
+  "card": "Table-module_card__RGyjC",
+  "well": "Table-module_well__xQmO5",
+  "row": "Table-module_row__GYSl1",
+  "popout": "Table-module_popout__PeAVV",
+  "expanded": "Table-module_expanded__dasr3",
+  "hasHoverState": "Table-module_hasHoverState__u5n3E",
+  "rowCell": "Table-module_rowCell__A5-2R",
+  "defaultSpacing": "Table-module_defaultSpacing__zq1Ci",
+  "dataVariant": "Table-module_dataVariant__vBOag",
+  "rowCellAlignCenter": "Table-module_rowCellAlignCenter__apkoC",
+  "rowCellAlignEnd": "Table-module_rowCellAlignEnd__qZfa1",
+  "whiteText": "Table-module_whiteText__4f-q5"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Tabs/Tabs.mjs

@@ -0,0 +1,28 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Tabs as Tabs$1 } from '@reach/tabs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tabs--controlled Storybook}
+ *
+ * Wrapper around all of the tab subcomponents
+ * Holds a TabList and TabPanels
+ */
+const Tabs = /*#__PURE__*/function () {
+  const Tabs = function (props) {
+    var defaultIndex = props.defaultIndex,
+      selectedIndex = props.selectedIndex,
+      onChange = props.onChange,
+      children = props.children,
+      restProps = __rest(props, ["defaultIndex", "selectedIndex", "onChange", "children"]);
+    return /*#__PURE__*/React.createElement(Tabs$1, __assign({
+      defaultIndex: defaultIndex,
+      index: selectedIndex,
+      onChange: onChange
+    }, restProps), children);
+  };
+  Tabs.displayName = "Tabs";
+  return Tabs;
+}();
+export { Tabs };

package/dist/esm/Tabs/subcomponents/Tab.mjs

@@ -0,0 +1,52 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState } from 'react';
+import { Tab as Tab$1 } from '@reach/tabs';
+import classnames from 'classnames';
+import { Badge } from '../../Badge/Badge.mjs';
+import styles from './Tab.module.scss.mjs';
+
+/**
+ * A tab button
+ */
+var Tab = function (props) {
+  var isSelected = props.isSelected,
+    badge = props.badge,
+    disabled = props.disabled,
+    children = props.children,
+    classNameOverride = props.classNameOverride,
+    restProps = __rest(props, ["isSelected", "badge", "disabled", "children", "classNameOverride"]);
+  var _a = useState(false),
+    isHovered = _a[0],
+    setIsHovered = _a[1];
+  var _b = useState(false),
+    isFocused = _b[0],
+    setIsFocused = _b[1];
+  var showActiveBadge = isSelected || isHovered || isFocused;
+  var onFocus = function (event) {
+    var _a;
+    setIsFocused(true);
+    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+  };
+  var onBlur = function (event) {
+    var _a;
+    setIsFocused(false);
+    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+  };
+  return /*#__PURE__*/React.createElement(Tab$1, __assign({
+    disabled: disabled,
+    className: classnames(styles.tab, classNameOverride, isSelected && styles.selected),
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseEnter: function () {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function () {
+      return setIsHovered(false);
+    }
+  }, restProps), children, badge && ( /*#__PURE__*/React.createElement("span", {
+    className: styles.badge
+  }, /*#__PURE__*/React.createElement(Badge, {
+    variant: showActiveBadge ? "active" : "default"
+  }, badge))));
+};
+export { Tab };