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

package/dist/cjs/Table/Table.cjs

@@ -0,0 +1,248 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Checkbox = require('../Checkbox/Checkbox/Checkbox.cjs');
+require('../Checkbox/CheckboxField/CheckboxField.cjs');
+require('../Checkbox/CheckboxGroup/CheckboxGroup.cjs');
+var Heading = require('../Heading/Heading.cjs');
+require('../Icon/subcomponents/SVG/SVG.cjs');
+var ExclamationIcon = require('../Icon/ExclamationIcon.cjs');
+var SortAscendingIcon = require('../Icon/SortAscendingIcon.cjs');
+var SortDescendingIcon = require('../Icon/SortDescendingIcon.cjs');
+var Tooltip = require('../Tooltip/Tooltip.cjs');
+var Table_module = require('./Table.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@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 = tslib.__rest(_a, ["variant", "children"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    role: "table",
+    className: classnames__default.default(Table_module.default.container, variant === "default" && Table_module.default.defaultSpacing, variant === "data" && Table_module.default.dataVariant)
+  }, otherProps), children);
+};
+var TableHeader = function (_a) {
+  var children = _a.children,
+    otherProps = tslib.__rest(_a, ["children"]);
+  return React__default.default.createElement("div", tslib.__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 = tslib.__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__default.default.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 = React__default.default.createElement("div", {
+    className: Table_module.default.headerRowCellLabelAndIcons
+  }, icon && React__default.default.createElement("span", {
+    className: Table_module.default.headerRowCellIcon
+  }, React.cloneElement(icon, (_b = {
+    title: labelText
+  }, _b["aria-label"] = labelText, _b.role = "img", _b))), checkable && React__default.default.createElement("div", {
+    className: Table_module.default.headerRowCellCheckbox
+  }, React__default.default.createElement(Checkbox.Checkbox, {
+    checkedStatus: checkedStatus,
+    onCheck: onCheck,
+    "aria-label": checkboxLabel
+  })), tooltipInfo != null && !isTooltipIconHidden ? React__default.default.createElement("div", {
+    className: Table_module.default.headerRowCellTooltipIcon
+  }, React__default.default.createElement(ExclamationIcon.ExclamationIcon, {
+    role: "presentation"
+  })) : null, !icon ? React__default.default.createElement(Heading.Heading, {
+    tag: "div",
+    variant: "heading-6",
+    color: sorting || isHovered ? hoveredHeaderColor : headerColor,
+    classNameOverride: Table_module.default.headerRowCellLabel
+  }, labelText) : null, (sorting || isHovered && sortingArrowsOnHover) && React__default.default.createElement("div", {
+    className: classnames__default.default(align === "center" && Table_module.default.headerRowCellIconAlignCenter, align === "end" && Table_module.default.headerRowCellIconAlignEnd, reversed && Table_module.default.whiteText)
+  }, sorting === "ascending" || sortingArrowsOnHover === "ascending" ? React__default.default.createElement(SortAscendingIcon.SortAscendingIcon, {
+    role: "presentation"
+  }) : React__default.default.createElement(SortDescendingIcon.SortDescendingIcon, {
+    role: "presentation"
+  })));
+  cellContents = href ? React__default.default.createElement("a", {
+    className: classnames__default.default(Table_module.default.headerRowCellButton, reversed && Table_module.default.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 ? React__default.default.createElement("button", {
+    type: "button",
+    className: classnames__default.default(Table_module.default.headerRowCellButton, reversed && Table_module.default.headerRowCellButtonReversed),
+    onClick: onClick,
+    onMouseEnter: function () {
+      return updateHoverState(true);
+    },
+    onFocus: function () {
+      return updateHoverState(true);
+    },
+    onMouseLeave: function () {
+      return updateHoverState(false);
+    },
+    onBlur: function () {
+      return updateHoverState(false);
+    }
+  }, cellContents) :
+  // 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__default.default.createElement("div", {
+    className: Table_module.default.headerRowCellNoButton
+  }, cellContents);
+  cellContents = tooltipInfo != null ? React__default.default.createElement(Tooltip.Tooltip, {
+    animationDuration: 0,
+    classNameOverride: Table_module.default.headerRowCellTooltip,
+    text: tooltipInfo,
+    portalSelector: tooltipPortalSelector
+  }, cellContents) :
+  // Again, this wrapper is just to make the dom tree consistent between
+  // different permutations.
+  React__default.default.createElement("div", {
+    className: Table_module.default.headerRowCellTooltip
+  }, cellContents);
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(Table_module.default.headerRowCell, wrapping === "nowrap" && Table_module.default.headerRowCellNoWrap, align === "center" && Table_module.default.headerRowCellAlignCenter, align === "end" && Table_module.default.headerRowCellAlignEnd, sorting && Table_module.default.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 = tslib.__rest(_a, ["children", "expanded", "expandedStyle", "onClick", "href", "forceHoverState", "classNameOverride"]);
+  var className = classnames__default.default(Table_module.default.card, expanded && Table_module.default.expanded, expanded && Table_module.default[expandedStyle], (forceHoverState || onClick != null || href != null) && Table_module.default.hasHoverState, classNameOverride);
+  return href != null ? React__default.default.createElement("a", tslib.__assign({
+    href: href,
+    className: className,
+    onClick: onClick
+  }, otherProps), children) : onClick ? React__default.default.createElement("button", tslib.__assign({
+    type: "button",
+    className: className,
+    onClick: onClick
+  }, otherProps), children) : React__default.default.createElement("div", tslib.__assign({
+    className: className
+  }, otherProps), children);
+};
+var TableRow = function (_a) {
+  var children = _a.children,
+    classNameOverride = _a.classNameOverride,
+    otherProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(Table_module.default.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 = tslib.__rest(_a, ["children", "width", "flex", "href", "classNameOverride"]);
+  return href != null ? React__default.default.createElement("a", tslib.__assign({
+    // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+    role: "cell",
+    style: {
+      width: ratioToPercent(width),
+      flex: flex
+    },
+    className: classnames__default.default(Table_module.default.rowCell, classNameOverride),
+    href: href
+  }, otherProps), children) : React__default.default.createElement("div", tslib.__assign({
+    role: "cell",
+    style: {
+      width: ratioToPercent(width),
+      flex: flex
+    },
+    className: classnames__default.default(Table_module.default.rowCell, classNameOverride)
+  }, otherProps), children);
+};
+exports.TableCard = TableCard;
+exports.TableContainer = TableContainer;
+exports.TableHeader = TableHeader;
+exports.TableHeaderRowCell = TableHeaderRowCell;
+exports.TableRow = TableRow;
+exports.TableRowCell = TableRowCell;

package/dist/cjs/Table/Table.module.scss.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+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));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Tabs/Tabs.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var tabs = require('@reach/tabs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * {@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
+ */
+var Tabs = function (props) {
+  var defaultIndex = props.defaultIndex,
+    selectedIndex = props.selectedIndex,
+    onChange = props.onChange,
+    children = props.children,
+    restProps = tslib.__rest(props, ["defaultIndex", "selectedIndex", "onChange", "children"]);
+  return React__default.default.createElement(tabs.Tabs, tslib.__assign({
+    defaultIndex: defaultIndex,
+    index: selectedIndex,
+    onChange: onChange
+  }, restProps), children);
+};
+Tabs.displayName = "Tabs";
+exports.Tabs = Tabs;

package/dist/cjs/Tabs/subcomponents/Tab.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var tabs = require('@reach/tabs');
+var classnames = require('classnames');
+var Badge = require('../../Badge/Badge.cjs');
+var Tab_module = require('./Tab.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * A tab button
+ */
+var Tab = function (props) {
+  var isSelected = props.isSelected,
+    badge = props.badge,
+    disabled = props.disabled,
+    children = props.children,
+    classNameOverride = props.classNameOverride,
+    restProps = tslib.__rest(props, ["isSelected", "badge", "disabled", "children", "classNameOverride"]);
+  var _a = React.useState(false),
+    isHovered = _a[0],
+    setIsHovered = _a[1];
+  var _b = React.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 React__default.default.createElement(tabs.Tab, tslib.__assign({
+    disabled: disabled,
+    className: classnames__default.default(Tab_module.default.tab, classNameOverride, isSelected && Tab_module.default.selected),
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseEnter: function () {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function () {
+      return setIsHovered(false);
+    }
+  }, restProps), children, badge && React__default.default.createElement("span", {
+    className: Tab_module.default.badge
+  }, React__default.default.createElement(Badge.Badge, {
+    variant: showActiveBadge ? "active" : "default"
+  }, badge)));
+};
+exports.Tab = Tab;

package/dist/cjs/Tabs/subcomponents/Tab.module.scss.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".Tab-module_tab__Rar3J{align-items:center;background:var(--color-white,#fff);border:0;border-left:2px solid transparent;border-right:2px solid transparent;border-top:2px solid transparent;border-top-left-radius:var(--border-borderless-border-radius,7px);border-top-right-radius:var(--border-borderless-border-radius,7px);color:var(--color-purple-800,#2f2438);display:inline-flex;font-family:var(--typography-heading-4-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-4-font-size,1.125rem);font-weight:var(--typography-heading-4-font-weight,600);letter-spacing:var(--typography-heading-4-letter-spacing,normal);line-height:var(--typography-heading-4-line-height,1.5rem);margin:0;padding:var(--spacing-md,1.5rem) var(--spacing-md,1.5rem);text-decoration:none;white-space:nowrap}.Tab-module_tab__Rar3J:focus{outline:none}.Tab-module_tab__Rar3J:focus-visible{background:var(--color-blue-100,#e6f6ff);border-color:var(--color-blue-500,#0168b3);color:var(--color-blue-500,#0168b3)}.Tab-module_tab__Rar3J:disabled{opacity:30%}.Tab-module_tab__Rar3J:not(:first-child){margin-inline-start:var(--spacing-xs,.375rem)}.Tab-module_tab__Rar3J:not(:disabled):hover{background:var(--color-blue-100,#e6f6ff);color:var(--color-blue-500,#0168b3)}.Tab-module_tab__Rar3J[data-selected]{color:var(--color-blue-500,#0168b3);position:relative}.Tab-module_tab__Rar3J[data-selected]:before{background-color:currentcolor;border-top-left-radius:5px;border-top-right-radius:5px;bottom:0;content:\"\";display:block;height:5px;left:0;position:absolute;right:0;width:100%}.Tab-module_badge__4p2nd{align-items:center;display:inline-flex;margin-inline-start:var(--spacing-sm,.75rem)}@media (forced-colors:active){.Tab-module_tab__Rar3J{border:2px solid transparent}.Tab-module_tab__Rar3J:focus-visible:after{background:transparent;border-color:transparent;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:\"\";inset:calc(var(--border-focus-ring-border-width, 2px)*2*-1 + -1px);position:absolute}.Tab-module_tab__Rar3J.Tab-module_selected__MApD6:before{border-bottom:2px solid transparent;bottom:0;content:\"\";left:0;position:absolute;right:0}}";
+var styles = {
+  "tab": "Tab-module_tab__Rar3J",
+  "badge": "Tab-module_badge__4p2nd",
+  "selected": "Tab-module_selected__MApD6"
+};
+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));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Tabs/subcomponents/TabList.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var tabs = require('@reach/tabs');
+var classnames = require('classnames');
+var TabList_module = require('./TabList.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * Wrapper for the tabs themselves
+ */
+var TabList = function (props) {
+  var ariaLabel = props["aria-label"],
+    _a = props.noPadding,
+    noPadding = _a === void 0 ? false : _a,
+    children = props.children,
+    classNameOverride = props.classNameOverride,
+    restProps = tslib.__rest(props, ["aria-label", "noPadding", "children", "classNameOverride"]);
+  return React__default.default.createElement(tabs.TabList, tslib.__assign({
+    "aria-label": ariaLabel,
+    className: classnames__default.default(TabList_module.default.tabList, classNameOverride, noPadding && TabList_module.default.noPadding)
+  }, restProps), children);
+};
+exports.TabList = TabList;

package/dist/cjs/Tabs/subcomponents/TabList.module.scss.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".TabList-module_tabList__A8Y9H{border-bottom:1px solid rgba(var(--color-gray-600-rgb,82,78,86),.1);padding:var(--spacing-xs,.375rem) var(--spacing-md,1.5rem) 0}.TabList-module_tabList__A8Y9H.TabList-module_noPadding__v073J{padding:0}";
+var styles = {
+  "tabList": "TabList-module_tabList__A8Y9H",
+  "noPadding": "TabList-module_noPadding__v073J"
+};
+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));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Tabs/subcomponents/TabPanel.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var tabs = require('@reach/tabs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * Wrapper for the content that shows when tab is active
+ */
+var TabPanel = function (props) {
+  var classNameOverride = props.classNameOverride,
+    children = props.children,
+    restProps = tslib.__rest(props, ["classNameOverride", "children"]);
+  return React__default.default.createElement(tabs.TabPanel, tslib.__assign({
+    className: classNameOverride
+  }, restProps), children);
+};
+exports.TabPanel = TabPanel;

package/dist/cjs/Tabs/subcomponents/TabPanels.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var tabs = require('@reach/tabs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * Wrapper for the content panels
+ */
+var TabPanels = function (props) {
+  var children = props.children,
+    restProps = tslib.__rest(props, ["children"]);
+  return React__default.default.createElement(tabs.TabPanels, tslib.__assign({}, restProps), children);
+};
+exports.TabPanels = TabPanels;