@kaizen/components 1.64.14 → 1.66.0

package/dist/cjs/Loading/LoadingSpinner/LoadingSpinner.cjs

@@ -4,7 +4,8 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.cjs');
-var LoadingSpinner_module = require('./LoadingSpinner.module.scss.cjs');
+var SpinnerIcon = require('./subcomponents/SpinnerIcon.cjs');
+var LoadingSpinner_module = require('./LoadingSpinner.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -25,48 +26,11 @@ var LoadingSpinner = function (_a) {
     classNameOverride = _a.classNameOverride,
     props = tslib.__rest(_a, ["accessibilityLabel", "size", "classNameOverride"]);
   return React__default.default.createElement("div", tslib.__assign({
-    "data-automation-id": "loading-spinner",
-    className: classnames__default.default(LoadingSpinner_module.loadingSpinner, classNameOverride),
+    className: classnames__default.default(LoadingSpinner_module.loadingSpinner, LoadingSpinner_module[size], classNameOverride),
     role: "status"
-  }, props), React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, accessibilityLabel), size === "md" ? React__default.default.createElement("svg", {
-    className: LoadingSpinner_module.spinner,
-    "aria-hidden": "true",
-    viewBox: "0 0 48 48",
-    width: 48,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.default.createElement("circle", {
-    cx: "24",
-    cy: "24",
-    r: "22.5",
-    stroke: "currentColor",
-    strokeWidth: "3",
-    strokeOpacity: "0.3"
-  }), React__default.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    fill: "currentColor",
-    d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
-  })) : React__default.default.createElement("svg", {
-    className: LoadingSpinner_module.spinner,
-    "aria-hidden": "true",
-    viewBox: "0 0 24 24",
-    width: 24,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "9",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeOpacity: "0.3"
-  }), React__default.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    fill: "currentColor",
-    d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
-  })));
+  }, props), React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, accessibilityLabel), React__default.default.createElement(SpinnerIcon.SpinnerIcon, {
+    size: size
+  }));
 };
 LoadingSpinner.displayName = "LoadingSpinner";
 exports.LoadingSpinner = LoadingSpinner;

package/dist/cjs/Loading/LoadingSpinner/LoadingSpinner.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var styles = {
+  "loadingSpinner": "LoadingSpinner-module_loadingSpinner__Zc2mJ",
+  "xs": "LoadingSpinner-module_xs__y46OT",
+  "sm": "LoadingSpinner-module_sm__nkmIa",
+  "md": "LoadingSpinner-module_md__OWP2-",
+  "spinner": "LoadingSpinner-module_spinner__BKrX0"
+};
+module.exports = styles;

package/dist/cjs/Loading/LoadingSpinner/subcomponents/SpinnerIcon.cjs

@@ -0,0 +1,80 @@
+'use strict';
+
+var React = require('react');
+var LoadingSpinner_module = require('../LoadingSpinner.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var SmallSpinnerIcon = function () {
+  return React__default.default.createElement("svg", {
+    className: LoadingSpinner_module.spinner,
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeOpacity: "0.3"
+  }), React__default.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
+  }));
+};
+var MediumSpinnerIcon = function () {
+  return React__default.default.createElement("svg", {
+    className: LoadingSpinner_module.spinner,
+    "aria-hidden": "true",
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.default.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "22.5",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeOpacity: "0.3"
+  }), React__default.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
+  }));
+};
+var ExtraSmallSpinnerIcon = function () {
+  return React__default.default.createElement("svg", {
+    className: LoadingSpinner_module.spinner,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.default.createElement("circle", {
+    opacity: "0.3",
+    cx: "8",
+    cy: "8",
+    r: "6",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }), React__default.default.createElement("path", {
+    d: "M14 8C14 4.68629 11.3137 2 8 2",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+var SpinnerIcon = function (_a) {
+  var size = _a.size;
+  if (size === "xs") return React__default.default.createElement(ExtraSmallSpinnerIcon, null);
+  if (size === "sm") return React__default.default.createElement(SmallSpinnerIcon, null);
+  return React__default.default.createElement(MediumSpinnerIcon, null);
+};
+exports.SpinnerIcon = SpinnerIcon;

package/dist/cjs/__future__/Tabs/Tabs.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+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) {
+  return React__default.default.createElement(reactAriaComponents.Tabs, tslib.__assign({}, props));
+};
+exports.Tabs = Tabs;

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

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAriaComponents = require('react-aria-components');
+var Badge = require('../../../../Badge/Badge.cjs');
+var Tab_module = require('./Tab.module.css.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 badge = props.badge,
+    children = props.children,
+    className = props.className,
+    restProps = tslib.__rest(props, ["badge", "children", "className"]);
+  var tabProps = tslib.__assign({
+    className: classnames__default.default(Tab_module.tab, className)
+  }, restProps);
+  return React__default.default.createElement(reactAriaComponents.Tab, tslib.__assign({}, tabProps), function (_a) {
+    var isSelected = _a.isSelected,
+      isFocusVisible = _a.isFocusVisible,
+      isHovered = _a.isHovered;
+    return React__default.default.createElement(React__default.default.Fragment, null, children, badge && React__default.default.createElement("span", {
+      className: Tab_module.badge
+    }, React__default.default.createElement(Badge.Badge, {
+      variant: isSelected || isFocusVisible || isHovered ? "active" : "default"
+    }, badge)));
+  });
+};
+exports.Tab = Tab;

package/dist/cjs/__future__/Tabs/subcomponents/Tab/Tab.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "tab": "Tab-module_tab__-XtyL",
+  "badge": "Tab-module_badge__Zfili"
+};
+module.exports = styles;

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAriaComponents = require('react-aria-components');
+var TabList_module = require('./TabList.module.css.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,
+    className = props.className,
+    restProps = tslib.__rest(props, ["aria-label", "noPadding", "children", "className"]);
+  return React__default.default.createElement(reactAriaComponents.TabList, tslib.__assign({
+    "aria-label": ariaLabel,
+    className: classnames__default.default(TabList_module.tabList, className, noPadding && TabList_module.noPadding)
+  }, restProps), children);
+};
+exports.TabList = TabList;

package/dist/cjs/__future__/Tabs/subcomponents/TabList/TabList.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "tabList": "TabList-module_tabList__e1qAi",
+  "noPadding": "TabList-module_noPadding__YM23K"
+};
+module.exports = styles;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+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 className = props.className,
+    children = props.children,
+    restProps = tslib.__rest(props, ["className", "children"]);
+  return React__default.default.createElement(reactAriaComponents.TabPanel, tslib.__assign({
+    className: className
+  }, restProps), children);
+};
+exports.TabPanel = TabPanel;

package/dist/cjs/future.cjs

@@ -3,6 +3,14 @@
 var Select = require('./__future__/Select/Select.cjs');
 var RemovableTag = require('./__future__/Tag/RemovableTag/RemovableTag.cjs');
 var Tag = require('./__future__/Tag/Tag/Tag.cjs');
+var Tabs = require('./__future__/Tabs/Tabs.cjs');
+var Tab = require('./__future__/Tabs/subcomponents/Tab/Tab.cjs');
+var TabList = require('./__future__/Tabs/subcomponents/TabList/TabList.cjs');
+var TabPanel = require('./__future__/Tabs/subcomponents/TabPanel/TabPanel.cjs');
 exports.Select = Select.Select;
 exports.RemovableTag = RemovableTag.RemovableTag;
 exports.Tag = Tag.Tag;
+exports.Tabs = Tabs.Tabs;
+exports.Tab = Tab.Tab;
+exports.TabList = TabList.TabList;
+exports.TabPanel = TabPanel.TabPanel;

package/dist/esm/Loading/LoadingSpinner/LoadingSpinner.mjs

@@ -2,7 +2,8 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
-import styles from './LoadingSpinner.module.scss.mjs';
+import { SpinnerIcon } from './subcomponents/SpinnerIcon.mjs';
+import styles from './LoadingSpinner.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093253/Loading+Spinner Guidance} |
@@ -17,48 +18,11 @@ const LoadingSpinner = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       props = __rest(_a, ["accessibilityLabel", "size", "classNameOverride"]);
     return /*#__PURE__*/React.createElement("div", __assign({
-      "data-automation-id": "loading-spinner",
-      className: classnames(styles.loadingSpinner, classNameOverride),
+      className: classnames(styles.loadingSpinner, styles[size], classNameOverride),
       role: "status"
-    }, props), /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibilityLabel), size === "md" ? ( /*#__PURE__*/React.createElement("svg", {
-      className: styles.spinner,
-      "aria-hidden": "true",
-      viewBox: "0 0 48 48",
-      width: 48,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("circle", {
-      cx: "24",
-      cy: "24",
-      r: "22.5",
-      stroke: "currentColor",
-      strokeWidth: "3",
-      strokeOpacity: "0.3"
-    }), /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      fill: "currentColor",
-      d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
-    }))) : ( /*#__PURE__*/React.createElement("svg", {
-      className: styles.spinner,
-      "aria-hidden": "true",
-      viewBox: "0 0 24 24",
-      width: 24,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "9",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeOpacity: "0.3"
-    }), /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      fill: "currentColor",
-      d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
-    }))));
+    }, props), /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibilityLabel), /*#__PURE__*/React.createElement(SpinnerIcon, {
+      size: size
+    }));
   };
   LoadingSpinner.displayName = "LoadingSpinner";
   return LoadingSpinner;

package/dist/esm/Loading/LoadingSpinner/LoadingSpinner.module.css.mjs

@@ -0,0 +1,8 @@
+var styles = {
+  "loadingSpinner": "LoadingSpinner-module_loadingSpinner__Zc2mJ",
+  "xs": "LoadingSpinner-module_xs__y46OT",
+  "sm": "LoadingSpinner-module_sm__nkmIa",
+  "md": "LoadingSpinner-module_md__OWP2-",
+  "spinner": "LoadingSpinner-module_spinner__BKrX0"
+};
+export { styles as default };

package/dist/esm/Loading/LoadingSpinner/subcomponents/SpinnerIcon.mjs

@@ -0,0 +1,72 @@
+import React from 'react';
+import styles from '../LoadingSpinner.module.css.mjs';
+var SmallSpinnerIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: styles.spinner,
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeOpacity: "0.3"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
+  }));
+};
+var MediumSpinnerIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: styles.spinner,
+    "aria-hidden": "true",
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "24",
+    r: "22.5",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeOpacity: "0.3"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
+  }));
+};
+var ExtraSmallSpinnerIcon = function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: styles.spinner,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    opacity: "0.3",
+    cx: "8",
+    cy: "8",
+    r: "6",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14 8C14 4.68629 11.3137 2 8 2",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+var SpinnerIcon = function (_a) {
+  var size = _a.size;
+  if (size === "xs") return /*#__PURE__*/React.createElement(ExtraSmallSpinnerIcon, null);
+  if (size === "sm") return /*#__PURE__*/React.createElement(SmallSpinnerIcon, null);
+  return /*#__PURE__*/React.createElement(MediumSpinnerIcon, null);
+};
+export { SpinnerIcon };

package/dist/esm/__future__/Tabs/Tabs.mjs

@@ -0,0 +1,15 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { Tabs as Tabs$1 } from 'react-aria-components';
+
+/**
+ * {@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) {
+  return /*#__PURE__*/React.createElement(Tabs$1, __assign({}, props));
+};
+export { Tabs };

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

@@ -0,0 +1,30 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Tab as Tab$1 } from 'react-aria-components';
+import { Badge } from '../../../../Badge/Badge.mjs';
+import styles from './Tab.module.css.mjs';
+
+/**
+ * A tab button
+ */
+var Tab = function (props) {
+  var badge = props.badge,
+    children = props.children,
+    className = props.className,
+    restProps = __rest(props, ["badge", "children", "className"]);
+  var tabProps = __assign({
+    className: classnames(styles.tab, className)
+  }, restProps);
+  return /*#__PURE__*/React.createElement(Tab$1, __assign({}, tabProps), function (_a) {
+    var isSelected = _a.isSelected,
+      isFocusVisible = _a.isFocusVisible,
+      isHovered = _a.isHovered;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, badge && ( /*#__PURE__*/React.createElement("span", {
+      className: styles.badge
+    }, /*#__PURE__*/React.createElement(Badge, {
+      variant: isSelected || isFocusVisible || isHovered ? "active" : "default"
+    }, badge))));
+  });
+};
+export { Tab };

package/dist/esm/__future__/Tabs/subcomponents/Tab/Tab.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "tab": "Tab-module_tab__-XtyL",
+  "badge": "Tab-module_badge__Zfili"
+};
+export { styles as default };

package/dist/esm/__future__/Tabs/subcomponents/TabList/TabList.mjs

@@ -0,0 +1,22 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { TabList as TabList$1 } from 'react-aria-components';
+import styles from './TabList.module.css.mjs';
+
+/**
+ * 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,
+    className = props.className,
+    restProps = __rest(props, ["aria-label", "noPadding", "children", "className"]);
+  return /*#__PURE__*/React.createElement(TabList$1, __assign({
+    "aria-label": ariaLabel,
+    className: classnames(styles.tabList, className, noPadding && styles.noPadding)
+  }, restProps), children);
+};
+export { TabList };

package/dist/esm/__future__/Tabs/subcomponents/TabList/TabList.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "tabList": "TabList-module_tabList__e1qAi",
+  "noPadding": "TabList-module_noPadding__YM23K"
+};
+export { styles as default };

package/dist/esm/__future__/Tabs/subcomponents/TabPanel/TabPanel.mjs

@@ -0,0 +1,16 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { TabPanel as TabPanel$1 } from 'react-aria-components';
+
+/**
+ * Wrapper for the content that shows when tab is active
+ */
+var TabPanel = function (props) {
+  var className = props.className,
+    children = props.children,
+    restProps = __rest(props, ["className", "children"]);
+  return /*#__PURE__*/React.createElement(TabPanel$1, __assign({
+    className: className
+  }, restProps), children);
+};
+export { TabPanel };

package/dist/esm/future.mjs

@@ -1,3 +1,7 @@
 export { Select } from './__future__/Select/Select.mjs';
 export { RemovableTag } from './__future__/Tag/RemovableTag/RemovableTag.mjs';
 export { Tag } from './__future__/Tag/Tag/Tag.mjs';
+export { Tabs } from './__future__/Tabs/Tabs.mjs';
+export { Tab } from './__future__/Tabs/subcomponents/Tab/Tab.mjs';
+export { TabList } from './__future__/Tabs/subcomponents/TabList/TabList.mjs';
+export { TabPanel } from './__future__/Tabs/subcomponents/TabPanel/TabPanel.mjs';