@kaizen/components 1.68.10 → 1.68.12

package/dist/cjs/Tag/Tag.cjs

@@ -4,9 +4,8 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var Avatar = require('../Avatar/Avatar.cjs');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var LiveIcon = require('../Icon/LiveIcon.cjs');
 var Icon = require('../__future__/Icon/Icon.cjs');
+var LiveIcon = require('./subcomponents/LiveIcon/LiveIcon.cjs');
 var Tag_module = require('./Tag.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -105,37 +104,7 @@ var Tag = function (props) {
     name: "cancel",
     alt: "Dismiss",
     isFilled: true
-  })))), variant === 'statusLive' && React__default.default.createElement("span", {
-    className: Tag_module.liveIcon
-  }, React__default.default.createElement(LiveIcon.LiveIcon, {
-    role: "presentation",
-    classNameOverride: Tag_module.liveIcon_base,
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }), React__default.default.createElement(LiveIcon.LiveIcon, {
-    role: "presentation",
-    classNameOverride: Tag_module.liveIcon_1,
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }), React__default.default.createElement(LiveIcon.LiveIcon, {
-    role: "presentation",
-    classNameOverride: Tag_module.liveIcon_2,
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }), React__default.default.createElement(LiveIcon.LiveIcon, {
-    role: "presentation",
-    classNameOverride: Tag_module.liveIcon_3,
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  })))));
+  })))), variant === 'statusLive' && React__default.default.createElement(LiveIcon.LiveIcon, null))));
 };
 Tag.displayName = 'Tag';
 exports.Tag = Tag;

package/dist/cjs/Tag/Tag.module.scss.cjs

@@ -25,13 +25,6 @@ var styles = {
   "statusLive": "Tag-module_statusLive__xG48w",
   "statusAction": "Tag-module_statusAction__woL-O",
   "statusClosed": "Tag-module_statusClosed__VhZP-",
-  "statusDraft": "Tag-module_statusDraft__9QZDv",
-  "liveIcon": "Tag-module_liveIcon__URtak",
-  "liveIcon_base": "Tag-module_liveIcon_base__Nk5um",
-  "liveIcon_1": "Tag-module_liveIcon_1__STFJY",
-  "liveIcon_2": "Tag-module_liveIcon_2__rko-D",
-  "liveIcon_3": "Tag-module_liveIcon_3__fL71y",
-  "pulse-inner": "Tag-module_pulse-inner__0-JFL",
-  "pulse-outer": "Tag-module_pulse-outer__f9Oox"
+  "statusDraft": "Tag-module_statusDraft__9QZDv"
 };
 module.exports = styles;

package/dist/cjs/Tag/subcomponents/LiveIcon/LiveIcon.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+var SVG = require('../../../Icon/subcomponents/SVG/SVG.cjs');
+var LiveIcon_module = require('./LiveIcon.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+var LiveIconSvg = function (_a) {
+  var classNameOverride = _a.classNameOverride;
+  return React__default.default.createElement(SVG.SVG, {
+    role: "presentation",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    classNameOverride: classNameOverride
+  }, React__default.default.createElement("path", {
+    stroke: "currentColor",
+    d: "M3.266 12.733c-2.6-2.6-2.6-6.866 0-9.466M5.2 10.8c-1.534-1.533-1.534-4.067 0-5.667",
+    strokeWidth: "1.5",
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  }), React__default.default.createElement("path", {
+    fill: "currentColor",
+    d: "M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+  }), React__default.default.createElement("path", {
+    stroke: "currentColor",
+    d: "M10.8 5.2c1.533 1.533 1.533 4.067 0 5.667M12.733 3.267c2.6 2.6 2.6 6.8 0 9.4",
+    strokeWidth: "1.5",
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  }));
+};
+LiveIconSvg.displayName = 'LiveIconSvg';
+var LiveIcon = function () {
+  return React__default.default.createElement("span", {
+    className: LiveIcon_module.liveIcon
+  }, React__default.default.createElement(LiveIconSvg, {
+    classNameOverride: LiveIcon_module.liveIcon_base
+  }), React__default.default.createElement(LiveIconSvg, {
+    classNameOverride: LiveIcon_module.liveIcon_1
+  }), React__default.default.createElement(LiveIconSvg, {
+    classNameOverride: LiveIcon_module.liveIcon_2
+  }), React__default.default.createElement(LiveIconSvg, {
+    classNameOverride: LiveIcon_module.liveIcon_3
+  }));
+};
+LiveIcon.displayName = 'LiveIcon';
+exports.LiveIcon = LiveIcon;

package/dist/cjs/Tag/subcomponents/LiveIcon/LiveIcon.module.css.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var styles = {
+  "liveIcon": "LiveIcon-module_liveIcon__v6FG-",
+  "liveIcon_base": "LiveIcon-module_liveIcon_base__Kagqm",
+  "liveIcon_1": "LiveIcon-module_liveIcon_1__ye1Qk",
+  "liveIcon_2": "LiveIcon-module_liveIcon_2__p6f55",
+  "liveIcon_3": "LiveIcon-module_liveIcon_3__JmRFR",
+  "pulse-inner": "LiveIcon-module_pulse-inner__EGliV",
+  "pulse-outer": "LiveIcon-module_pulse-outer__bxHMh"
+};
+module.exports = styles;

package/dist/cjs/Tile/TileGrid/TileGrid.cjs

@@ -17,13 +17,30 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
  * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
  */
 var TileGrid = function (_a) {
+  var _b;
   var children = _a.children,
     classNameOverride = _a.classNameOverride,
     restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
-  return React__default.default.createElement("div", tslib.__assign({
+  var isFragment = !Array.isArray(children) && children.type === React__default.default.Fragment;
+  return React__default.default.createElement("ul", tslib.__assign({
     className: classnames__default.default(TileGrid_module.grid, classNameOverride),
     "data-tile-grid": true
-  }, restProps), children);
+  }, restProps), isFragment ? ((_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.children) ? React__default.default.createElement(TileListItem, {
+    tiles: children.props.children
+  }) : null : React__default.default.createElement(TileListItem, {
+    tiles: children
+  }));
 };
 TileGrid.displayName = 'TileGrid';
+var TileListItem = function (_a) {
+  var tiles = _a.tiles;
+  if (Array.isArray(tiles)) {
+    return React__default.default.createElement(React__default.default.Fragment, null, tiles.map(function (tile, index) {
+      return React__default.default.createElement("li", {
+        key: "".concat(tile.props.title, "-").concat(index)
+      }, tile);
+    }));
+  }
+  return React__default.default.createElement("li", null, tiles);
+};
 exports.TileGrid = TileGrid;

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

@@ -0,0 +1,4 @@
+'use strict';
+
+var SCROLL_AMOUNT = 120;
+exports.SCROLL_AMOUNT = SCROLL_AMOUNT;

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

@@ -25,7 +25,9 @@ var Tab = function (props) {
   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) {
+  return React__default.default.createElement(reactAriaComponents.Tab, tslib.__assign({
+    "data-kz-tab": true
+  }, tabProps), function (_a) {
     var isSelected = _a.isSelected,
       isFocusVisible = _a.isFocusVisible,
       isHovered = _a.isHovered;

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

@@ -4,6 +4,9 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var reactAriaComponents = require('react-aria-components');
+var Icon = require('../../../Icon/Icon.cjs');
+var isRTL = require('../../../../__utilities__/isRTL/isRTL.cjs');
+var constants = require('../../constants.cjs');
 var TabList_module = require('./TabList.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -22,10 +25,121 @@ var TabList = function (props) {
     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({
+    testId = props["data-testid"],
+    restProps = tslib.__rest(props, ['aria-label', "noPadding", "children", "className", 'data-testid']);
+  var _b = React.useState(false),
+    isDocumentReady = _b[0],
+    setIsDocumentReady = _b[1];
+  var _c = React.useState(false),
+    leftArrowEnabled = _c[0],
+    setLeftArrowEnabled = _c[1];
+  var _d = React.useState(false),
+    rightArrowEnabled = _d[0],
+    setRightArrowEnabled = _d[1];
+  var tabListRef = React.useRef(null);
+  var tabListId = React.useId();
+  var _e = React.useState(false),
+    isRTL$1 = _e[0],
+    setIsRTL = _e[1];
+  var _f = React.useState(),
+    containerElement = _f[0],
+    setContainerElement = _f[1];
+  var tabListContext = React.useContext(reactAriaComponents.TabListStateContext);
+  var selectedKey = tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.selectedKey;
+  React.useEffect(function () {
+    if (!isDocumentReady) {
+      setIsDocumentReady(true);
+      return;
+    }
+    var container = document.getElementById(tabListId);
+    setContainerElement(container);
+    setIsRTL(container ? isRTL.isRTL(container) : false);
+  }, [isDocumentReady, tabListId]);
+  React.useEffect(function () {
+    if (!isDocumentReady) {
+      return;
+    }
+    var tabs = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll('[data-kz-tab]');
+    if (!tabs) {
+      return;
+    }
+    var firstTabObserver = new IntersectionObserver(function (entries) {
+      if (!entries[0].isIntersecting) {
+        setLeftArrowEnabled(true);
+        return;
+      }
+      setLeftArrowEnabled(false);
+    }, {
+      threshold: 0.75,
+      root: containerElement
+    });
+    firstTabObserver.observe(isRTL$1 ? tabs[tabs.length - 1] : tabs[0]);
+    var lastTabObserver = new IntersectionObserver(function (entries) {
+      if (!entries[0].isIntersecting) {
+        setRightArrowEnabled(true);
+        return;
+      }
+      setRightArrowEnabled(false);
+    }, {
+      threshold: 0.75,
+      root: containerElement
+    });
+    lastTabObserver.observe(isRTL$1 ? tabs[0] : tabs[tabs.length - 1]);
+    return function () {
+      firstTabObserver.disconnect();
+      lastTabObserver.disconnect();
+    };
+  }, [isDocumentReady, containerElement, isRTL$1]);
+  React.useEffect(function () {
+    var _a;
+    if (!isDocumentReady) {
+      return;
+    }
+    // Scroll selected tab into view
+    (_a = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('[role="tab"][data-selected=true]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+      block: 'nearest',
+      inline: 'center'
+    });
+  }, [selectedKey, containerElement, isDocumentReady]);
+  var handleArrowPress = function (direction) {
+    if (tabListRef.current) {
+      var tabListScrollPos = tabListRef.current.scrollLeft;
+      var newSpot = direction === 'left' ? tabListScrollPos - constants.SCROLL_AMOUNT : tabListScrollPos + constants.SCROLL_AMOUNT;
+      tabListRef.current.scrollLeft = newSpot;
+    }
+  };
+  return React__default.default.createElement("div", {
+    className: TabList_module.container,
+    id: tabListId
+  }, leftArrowEnabled &&
+  // making a conscious decision to use <div onClick> over <button> here, because:
+  // - <button> would add pointless noise for a screen reader user
+  // - keyboard only user can toggle through tabs with left/right arrow keys already
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  React__default.default.createElement("div", {
+    onClick: function () {
+      return handleArrowPress('left');
+    },
+    className: TabList_module.leftArrow,
+    "data-testid": testId ? "".concat(testId, "-kz-tablist-left-arrow") : undefined
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "chevron_left",
+    isPresentational: true
+  })), React__default.default.createElement(reactAriaComponents.TabList, tslib.__assign({
     "aria-label": ariaLabel,
+    ref: tabListRef,
     className: classnames__default.default(TabList_module.tabList, className, noPadding && TabList_module.noPadding)
-  }, restProps), children);
+  }, restProps), children), rightArrowEnabled &&
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  React__default.default.createElement("div", {
+    onClick: function () {
+      return handleArrowPress('right');
+    },
+    className: TabList_module.rightArrow,
+    "data-testid": testId ? "".concat(testId, "-kz-tablist-right-arrow") : undefined
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "chevron_right",
+    isPresentational: true
+  })));
 };
 exports.TabList = TabList;

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

@@ -1,7 +1,10 @@
 'use strict';
 
 var styles = {
+  "container": "TabList-module_container__Z8JCa",
   "tabList": "TabList-module_tabList__e1qAi",
-  "noPadding": "TabList-module_noPadding__YM23K"
+  "noPadding": "TabList-module_noPadding__YM23K",
+  "leftArrow": "TabList-module_leftArrow__CPchY",
+  "rightArrow": "TabList-module_rightArrow__0xcW1"
 };
 module.exports = styles;

package/dist/cjs/__utilities__/isRTL/isRTL.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+/**
+ * Finds the first ancestor with a `dir` property on it
+ * Returning true is that is `dir=rtl` and returning false in all other cases
+ */
+var isRTL = function (element) {
+  var _a;
+  return !!((_a = element.closest('[dir]')) === null || _a === void 0 ? void 0 : _a.matches('[dir="rtl"]'));
+};
+exports.isRTL = isRTL;

package/dist/esm/Tag/Tag.mjs

@@ -2,9 +2,8 @@ import { __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { LiveIcon } from '../Icon/LiveIcon.mjs';
 import { Icon } from '../__future__/Icon/Icon.mjs';
+import { LiveIcon } from './subcomponents/LiveIcon/LiveIcon.mjs';
 import styles from './Tag.module.scss.mjs';
 var isJSXElement = function (imageElementOrAvatarProps) {
   return 'props' in imageElementOrAvatarProps;
@@ -97,37 +96,7 @@ const Tag = /*#__PURE__*/function () {
       name: "cancel",
       alt: "Dismiss",
       isFilled: true
-    }))))), variant === 'statusLive' && ( /*#__PURE__*/React.createElement("span", {
-      className: styles.liveIcon
-    }, /*#__PURE__*/React.createElement(LiveIcon, {
-      role: "presentation",
-      classNameOverride: styles.liveIcon_base,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none"
-    }), /*#__PURE__*/React.createElement(LiveIcon, {
-      role: "presentation",
-      classNameOverride: styles.liveIcon_1,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none"
-    }), /*#__PURE__*/React.createElement(LiveIcon, {
-      role: "presentation",
-      classNameOverride: styles.liveIcon_2,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none"
-    }), /*#__PURE__*/React.createElement(LiveIcon, {
-      role: "presentation",
-      classNameOverride: styles.liveIcon_3,
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none"
-    }))))));
+    }))))), variant === 'statusLive' && /*#__PURE__*/React.createElement(LiveIcon, null))));
   };
   Tag.displayName = 'Tag';
   return Tag;

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

@@ -23,13 +23,6 @@ var styles = {
   "statusLive": "Tag-module_statusLive__xG48w",
   "statusAction": "Tag-module_statusAction__woL-O",
   "statusClosed": "Tag-module_statusClosed__VhZP-",
-  "statusDraft": "Tag-module_statusDraft__9QZDv",
-  "liveIcon": "Tag-module_liveIcon__URtak",
-  "liveIcon_base": "Tag-module_liveIcon_base__Nk5um",
-  "liveIcon_1": "Tag-module_liveIcon_1__STFJY",
-  "liveIcon_2": "Tag-module_liveIcon_2__rko-D",
-  "liveIcon_3": "Tag-module_liveIcon_3__fL71y",
-  "pulse-inner": "Tag-module_pulse-inner__0-JFL",
-  "pulse-outer": "Tag-module_pulse-outer__f9Oox"
+  "statusDraft": "Tag-module_statusDraft__9QZDv"
 };
 export { styles as default };

package/dist/esm/Tag/subcomponents/LiveIcon/LiveIcon.mjs

@@ -0,0 +1,54 @@
+import React from 'react';
+import { SVG } from '../../../Icon/subcomponents/SVG/SVG.mjs';
+import styles from './LiveIcon.module.css.mjs';
+
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+const LiveIconSvg = /*#__PURE__*/function () {
+  const LiveIconSvg = function (_a) {
+    var classNameOverride = _a.classNameOverride;
+    return /*#__PURE__*/React.createElement(SVG, {
+      role: "presentation",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      classNameOverride: classNameOverride
+    }, /*#__PURE__*/React.createElement("path", {
+      stroke: "currentColor",
+      d: "M3.266 12.733c-2.6-2.6-2.6-6.866 0-9.466M5.2 10.8c-1.534-1.533-1.534-4.067 0-5.667",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/React.createElement("path", {
+      fill: "currentColor",
+      d: "M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+    }), /*#__PURE__*/React.createElement("path", {
+      stroke: "currentColor",
+      d: "M10.8 5.2c1.533 1.533 1.533 4.067 0 5.667M12.733 3.267c2.6 2.6 2.6 6.8 0 9.4",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }));
+  };
+  LiveIconSvg.displayName = 'LiveIconSvg';
+  return LiveIconSvg;
+}();
+const LiveIcon = /*#__PURE__*/function () {
+  const LiveIcon = function () {
+    return /*#__PURE__*/React.createElement("span", {
+      className: styles.liveIcon
+    }, /*#__PURE__*/React.createElement(LiveIconSvg, {
+      classNameOverride: styles.liveIcon_base
+    }), /*#__PURE__*/React.createElement(LiveIconSvg, {
+      classNameOverride: styles.liveIcon_1
+    }), /*#__PURE__*/React.createElement(LiveIconSvg, {
+      classNameOverride: styles.liveIcon_2
+    }), /*#__PURE__*/React.createElement(LiveIconSvg, {
+      classNameOverride: styles.liveIcon_3
+    }));
+  };
+  LiveIcon.displayName = 'LiveIcon';
+  return LiveIcon;
+}();
+export { LiveIcon };

package/dist/esm/Tag/subcomponents/LiveIcon/LiveIcon.module.css.mjs

@@ -0,0 +1,10 @@
+var styles = {
+  "liveIcon": "LiveIcon-module_liveIcon__v6FG-",
+  "liveIcon_base": "LiveIcon-module_liveIcon_base__Kagqm",
+  "liveIcon_1": "LiveIcon-module_liveIcon_1__ye1Qk",
+  "liveIcon_2": "LiveIcon-module_liveIcon_2__p6f55",
+  "liveIcon_3": "LiveIcon-module_liveIcon_3__JmRFR",
+  "pulse-inner": "LiveIcon-module_pulse-inner__EGliV",
+  "pulse-outer": "LiveIcon-module_pulse-outer__bxHMh"
+};
+export { styles as default };

package/dist/esm/Tile/TileGrid/TileGrid.mjs

@@ -9,15 +9,32 @@ import styles from './TileGrid.module.scss.mjs';
  */
 const TileGrid = /*#__PURE__*/function () {
   const TileGrid = function (_a) {
+    var _b;
     var children = _a.children,
       classNameOverride = _a.classNameOverride,
       restProps = __rest(_a, ["children", "classNameOverride"]);
-    return /*#__PURE__*/React.createElement("div", __assign({
+    var isFragment = !Array.isArray(children) && children.type === React.Fragment;
+    return /*#__PURE__*/React.createElement("ul", __assign({
       className: classnames(styles.grid, classNameOverride),
       "data-tile-grid": true
-    }, restProps), children);
+    }, restProps), isFragment ? ((_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.children) ? ( /*#__PURE__*/React.createElement(TileListItem, {
+      tiles: children.props.children
+    })) : null : ( /*#__PURE__*/React.createElement(TileListItem, {
+      tiles: children
+    })));
   };
   TileGrid.displayName = 'TileGrid';
   return TileGrid;
 }();
+var TileListItem = function (_a) {
+  var tiles = _a.tiles;
+  if (Array.isArray(tiles)) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, tiles.map(function (tile, index) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: "".concat(tile.props.title, "-").concat(index)
+      }, tile);
+    }));
+  }
+  return /*#__PURE__*/React.createElement("li", null, tiles);
+};
 export { TileGrid };

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

@@ -0,0 +1,2 @@
+var SCROLL_AMOUNT = 120;
+export { SCROLL_AMOUNT };

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

@@ -16,7 +16,9 @@ var Tab = function (props) {
   var tabProps = __assign({
     className: classnames(styles.tab, className)
   }, restProps);
-  return /*#__PURE__*/React.createElement(Tab$1, __assign({}, tabProps), function (_a) {
+  return /*#__PURE__*/React.createElement(Tab$1, __assign({
+    "data-kz-tab": true
+  }, tabProps), function (_a) {
     var isSelected = _a.isSelected,
       isFocusVisible = _a.isFocusVisible,
       isHovered = _a.isHovered;