@pingux/astro 2.57.0 → 2.58.0

package/lib/cjs/components/ListBox/ListBox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ListLayout } from '@react-stately/layout';
+import { ListLayout } from 'listbox-layout';
 import { ListBoxProps } from '../../types';
 export declare const collectionTypes: {
     ITEM: string;

package/lib/cjs/components/ListBox/ListBox.js

@@ -25,8 +25,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _i18n = require("@react-aria/i18n");
 var _listbox = require("@react-aria/listbox");
-var _virtualizer = require("@react-aria/virtualizer");
-var _layout = require("@react-stately/layout");
+var _listboxLayout = require("listbox-layout");
+var _listboxVirtualizer = require("listbox-virtualizer");
 var _hooks = require("../../hooks");
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _index = require("./index");
@@ -50,7 +50,7 @@ function useListBoxLayout(state) {
     sensitivity: 'base'
   });
   var layout = (0, _react.useMemo)(function () {
-    return new _layout.ListLayout({
+    return new _listboxLayout.ListLayout({
       estimatedRowHeight: 41,
       estimatedHeadingHeight: 26,
       padding: 4,
@@ -145,7 +145,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         return c.viewType === 'item';
       })));
     }
-    return (0, _react2.jsx)(_virtualizer.VirtualizerItem, {
+    return (0, _react2.jsx)(_listboxVirtualizer.VirtualizerItem, {
       key: reusableView.key,
       reusableView: reusableView,
       parent: parent
@@ -153,7 +153,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
     value: state
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
+  }, (0, _react2.jsx)(_listboxVirtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
     autoFocus: hasAutoFocus,
     style: {
       outline: 'none'

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -255,17 +255,17 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
               selectionManager.toggleSelection(selectionManager.focusedKey);
               setFilterString('');
             }
-          } else if (hasCustomValue && filteredItems.length === 1) {
-            selectTheOnlyFilteredItem();
-          } else if (!hasCustomValue) {
-            setFilterString('');
-            close();
-          } else if (hasCustomValue) {
+          } else if (hasCustomValue && !selectionManager.focusedKey) {
             var _key = e.target.value;
             if (_key === '') {
               return;
             }
             addNewBadgeFromInput(e.target.value);
+          } else if (hasCustomValue && filteredItems.length === 1) {
+            selectTheOnlyFilteredItem();
+          } else if (!hasCustomValue) {
+            setFilterString('');
+            close();
           }
           break;
         }

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -703,6 +703,36 @@ test('should clear the input text onBlur and enter when a single filter result i
   });
   expect(input).toHaveValue('');
 });
+test('in non-restrictive mode the partial string values should be accepted', function () {
+  var itemsWithDuplicatePartialString = [{
+    id: 1,
+    name: 'echo:read',
+    key: 'echo:read'
+  }, {
+    id: 2,
+    name: 'echo:write',
+    key: 'echo:write'
+  }, {
+    id: 3,
+    name: 'echo:delete',
+    key: 'echo:delete'
+  }];
+  getComponent({
+    mode: 'non-restrictive',
+    items: itemsWithDuplicatePartialString
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'echo:r';
+  _userEvent["default"].type(input, value);
+  _userEvent["default"].type(input, '{enter}');
+  expect(input).toHaveValue('');
+  expect(_testWrapper.screen.queryByText(value)).toBeInTheDocument();
+  _userEvent["default"].type(input, value);
+  _userEvent["default"].type(input, '{enter}');
+  expect(input).not.toHaveValue('');
+  expect(input).toHaveValue(value);
+});
 
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({

package/lib/cjs/components/Stepper/Stepper.mdx

@@ -1,13 +1,14 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Components/Stepper/Stepper" />
 
 # Stepper
 
-The Stepper component acts as a wrapper for individual step components. 
+The Stepper component acts as a wrapper for individual step components.
 It is used to display progress through a sequence of logical and numbered steps, usually within a configuration wizard.
 
 This component should be used:
+
 - To reveal or hide sections of content.
 - For progressive disclosure.
 
@@ -19,23 +20,28 @@ This component requires the Item originating from [react-stately/collections](ht
 
 ### Accessibility
 
-This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines. 
+This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines.
 
 #### Keyboard Navigation
 
-These keys provide additional functionality to the component. 
+These keys provide additional functionality to the component.
 
-| Keys | Function |
-| ---- | ---- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Arrow keys | When this field is focused, the arrow keys can be used to navigate through the steps. |
-| Shift + Tab | Moves focus to the previous focusable component.  |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first step. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last step. |
+| Keys                                                 | Function                                                                              |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| Tab                                                  | The field is focusable using the Tab key and follows the page tab sequence.           |
+| Arrow keys                                           | When this field is focused, the arrow keys can be used to navigate through the steps. |
+| Shift + Tab                                          | Moves focus to the previous focusable component.                                      |
+| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first step.                                                   |
+| End(Fn + Left Arrow Key) Or Control/Command + End    | Shifts the focus to the last step.                                                    |
 
 #### Screen Readers
 
 This component uses the following attributes to assist screen readers:
-- The **`aria-orientation`**  attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. 
-- Each step uses the **`aria-selected`**  attribute to indicate the selection status, and the **`aria-control`**  attribute is supplied with the associated panel ID that displays the content.
-- Each step uses the **`aria-labelledby`** with the label ID to reference it.
+
+- The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
+- Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
+- Each step uses the **`aria-labelledby`** with the label ID to reference it.
+
+#### Usage
+
+- The stepper component is always center-aligned in its context, whether it's in a page, a panel, or a popup.

package/lib/cjs/components/Stepper/Stepper.stories.js

@@ -8,12 +8,14 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithoutContent = exports.Default = exports.ControlledStepper = void 0;
+exports["default"] = exports.Panel = exports.Default = exports.ControlledStepper = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
+var _CreationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CreationOutlineIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _Stepper = _interopRequireDefault(require("./Stepper.mdx"));
@@ -70,30 +72,69 @@ var _default = {
 };
 exports["default"] = _default;
 var steps = [{
-  label: 'Label 1',
-  children: 'This is content for step 1',
+  label: 'Duis Aute',
+  children: 'Quis autem vel eum iure reprehenderit qui in ea voluptate',
+  title: 'Duis Aute',
   name: 'step1'
 }, {
-  label: 'Label 2',
-  children: 'This is content for step 2',
+  label: 'Lorem Ipsum',
+  children: 'Sed ut perspiciatis unde omnis',
+  title: 'Lorem Ipsum',
   name: 'step2'
 }, {
-  label: 'Label 3',
-  children: 'This is content for step 3',
+  label: 'Excepteur Sint',
+  children: 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam',
+  title: 'Excepteur Sint',
   name: 'step3'
 }];
+var sx = {
+  overlayPanel: {
+    padding: '0px',
+    transition: 'width 500ms, right 500ms'
+  },
+  stepperContainer: {
+    padding: 'lg'
+  },
+  contentContainer: {
+    marginTop: 'lg',
+    gap: 'sm'
+  },
+  buttonStyle: {
+    margin: '50px 0px'
+  }
+};
 var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Stepper, args, (0, _react2.jsx)(_reactStately.Item, {
     key: "step1",
-    textValue: "Step 1"
+    textValue: "Duis Aute"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    pt: "lg"
-  }, "This is content for step 1")), (0, _react2.jsx)(_reactStately.Item, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
+    fontSize: "md"
+  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_reactStately.Item, {
     key: "step2",
-    textValue: "Step 2"
+    textValue: "Lorem Ipsum"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
+    fontSize: "md"
+  }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_reactStately.Item, {
+    key: "step3",
+    textValue: "Excepteur Sint"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    pt: "lg"
-  }, "This is content for step 2")));
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
+    fontSize: "md"
+  }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 exports.Default = Default;
 Default.parameters = {
@@ -107,12 +148,6 @@ var ControlledStepper = function ControlledStepper() {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     activeStep = _useState2[0],
     setActiveStep = _useState2[1];
-
-  // steps = [
-  // { label: 'Label 1', children: 'This is content for step 1', name: 'step1' },
-  // { label: 'Label 2', children: 'This is content for step 2', name: 'step2' },
-  // { label: 'Label 3', children: 'This is content for step 3', name: 'step3' },
-  // ];
   return (0, _react2.jsx)(_index.Stepper, {
     items: steps,
     activeStep: activeStep,
@@ -120,23 +155,69 @@ var ControlledStepper = function ControlledStepper() {
   }, function (item) {
     return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name,
-      textValue: item.name
+      textValue: item.title
+    }, (0, _react2.jsx)(_index.Box, {
+      sx: sx.contentContainer
     }, (0, _react2.jsx)(_index.Text, {
-      pt: "lg"
-    }, item.children));
+      fontSize: "md",
+      fontWeight: "3"
+    }, item.title), (0, _react2.jsx)(_index.Text, {
+      fontSize: "md"
+    }, item.children)));
   });
 };
 exports.ControlledStepper = ControlledStepper;
-var WithoutContent = function WithoutContent() {
-  return (0, _react2.jsx)(_index.Stepper, null, (0, _react2.jsx)(_reactStately.Item, {
-    key: "step1",
-    textValue: "Step 1"
-  }), (0, _react2.jsx)(_reactStately.Item, {
-    key: "step2",
-    textValue: "Step 2"
-  }), (0, _react2.jsx)(_reactStately.Item, {
-    key: "step3",
-    textValue: "Step 3"
-  }));
+var Panel = function Panel() {
+  var _useState3 = (0, _react.useState)(1),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    activeStep = _useState4[0],
+    setActiveStep = _useState4[1];
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var triggerRef = _react.useRef < HTMLButtonElement > null;
+  var onCloseHandler = function onCloseHandler() {
+    return onClose(state, triggerRef);
+  };
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+      onPress: state.open,
+      "aria-expanded": state.isOpen,
+      sx: sx.buttonStyle
+    }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, {
+      isTransitioning: state.isTransitioning,
+      isOpen: state.isOpen,
+      state: state,
+      triggerRef: triggerRef,
+      sx: sx.overlayPanel,
+      size: "full"
+    }, (0, _react2.jsx)(_index.PanelHeader, {
+      data: {
+        icon: _CreationOutlineIcon["default"],
+        text: 'Sed Ut Perspiciatis'
+      }
+    }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
+      onPress: onCloseHandler
+    })), (0, _react2.jsx)(_index.Stepper, {
+      items: steps,
+      activeStep: activeStep,
+      onStepChange: setActiveStep,
+      sx: sx.stepperContainer
+    }, function (item) {
+      return (0, _react2.jsx)(_reactStately.Item, {
+        key: item.name,
+        textValue: item.title
+      }, (0, _react2.jsx)(_index.Box, {
+        sx: sx.contentContainer
+      }, (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "3"
+      }, item.title), (0, _react2.jsx)(_index.Text, {
+        fontSize: "md"
+      }, item.children)));
+    })))
+  );
 };
-exports.WithoutContent = WithoutContent;
+exports.Panel = Panel;

package/lib/cjs/components/Stepper/Stepper.styles.js

@@ -24,7 +24,8 @@ var tabs = {
   outline: 'none',
   borderBottom: 'none',
   mb: 0,
-  width: '100%'
+  width: '100%',
+  justifyContent: 'center'
 };
 var tab = {
   mb: 0,

package/lib/cjs/components/Tab/Tab.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Item as Tab } from 'react-stately';
+import { TabProps } from '../../types';
+/**
+ * Tab control for dividing up closely-related content.
+ * Typically used as a child of the Tabs component.
+ */
+export declare const CollectionTab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
+export declare const TabLine: (props: any) => React.JSX.Element;
+export default Tab;

package/lib/cjs/components/Tab/Tab.js

@@ -10,12 +10,10 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.TabLine = exports.CollectionTab = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
@@ -23,13 +21,13 @@ var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _TabPicker = _interopRequireDefault(require("../TabPicker"));
 var _Tabs = require("../Tabs");
 var _react2 = require("@emotion/react");
-var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr", "title"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * Tab control for dividing up closely-related content.
  * Typically used as a child of the Tabs component.
  */
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     item = props.item,
@@ -41,17 +39,8 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var key = item.key,
     rendered = item.rendered,
     itemProps = item.props;
-  var icon = itemProps.icon,
-    tabDisabled = itemProps.isDisabled,
-    separator = itemProps.separator,
-    tabLabelProps = itemProps.tabLabelProps,
-    tabLineProps = itemProps.tabLineProps,
-    content = itemProps.content,
-    titleAttr = itemProps.titleAttr,
-    title = itemProps.title,
-    otherItemProps = (0, _objectWithoutProperties2["default"])(itemProps, _excluded);
   var state = (0, _react.useContext)(_Tabs.TabsContext);
-  var isDisabled = tabsDisabled || tabDisabled || state.disabledKeys.has(key);
+  var isDisabled = tabsDisabled || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.isDisabled) || state.disabledKeys.has(key);
   var isSelected = state.selectedKey === key;
   var _useFocusRing = (0, _reactAria.useFocusRing)(),
     isFocusVisible = _useFocusRing.isFocusVisible,
@@ -68,12 +57,8 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isSelected: isSelected
     }),
     classNames = _useStatusClasses.classNames;
-  var tabRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return tabRef.current;
-  });
+  var tabRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var _useTab = (0, _reactAria.useTab)({
       key: key,
       isDisabled: isDisabled
@@ -84,58 +69,33 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     className: classNames,
     variant: "tab"
-  }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), (0, _pendoID.getPendoID)('Tab'), otherItemProps, {
-    ref: tabRef,
-    title: titleAttr || undefined
-  }), icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
+    // title={itemProps?.titleAttr || undefined}
+  }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), (0, _pendoID.getPendoID)('Tab'), {
+    // {...otherItemProps}
+    ref: tabRef
+  }, itemProps, {
+    role: "tab"
+  }), (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     variant: "tabLabel"
-  }, tabLabelProps), rendered), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, tabLineProps)), slots === null || slots === void 0 ? void 0 : slots.afterTab);
-  if (mode === 'list' && itemProps.list) {
+  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);
+  if (mode === 'list' && itemProps !== null && itemProps !== void 0 && itemProps.list) {
     return (0, _react2.jsx)(_TabPicker["default"], (0, _extends2["default"])({
       ref: tabRef,
       className: classNames,
-      items: itemProps.list,
+      items: itemProps === null || itemProps === void 0 ? void 0 : itemProps.list,
       state: state,
       item: item
-    }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps));
+    }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), itemProps));
   }
   if (mode === 'tooltip') {
-    return (0, _react2.jsx)(_react["default"].Fragment, null, separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, tooltipTriggerProps, {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
-    }), (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)("span", {
-      variant: "quiet"
-    }, tab)), (0, _react2.jsx)(_.Tooltip, null, itemProps.textValue || itemProps.title)));
+    }), (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)("span", null, tab)), (0, _react2.jsx)(_.Tooltip, null, (itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue) || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.title))));
   }
   return tab;
 });
 exports.CollectionTab = CollectionTab;
 CollectionTab.displayName = 'CollectionTab';
-CollectionTab.propTypes = {
-  isDisabled: _propTypes["default"].bool,
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({
-      icon: _propTypes["default"].shape({}),
-      isDisabled: _propTypes["default"].bool,
-      textValue: _propTypes["default"].string,
-      tabLineProps: _propTypes["default"].shape({}),
-      tabLabelProps: _propTypes["default"].shape({}),
-      content: _propTypes["default"].shape({}),
-      titleAttr: _propTypes["default"].string,
-      title: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string, _propTypes["default"].object]),
-      separator: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].bool]),
-      list: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
-    }),
-    rendered: _propTypes["default"].node
-  }),
-  mode: _propTypes["default"].oneOf(['default', 'tooltip', 'list']),
-  orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
-  tooltipTriggerProps: _propTypes["default"].shape({}),
-  slots: _propTypes["default"].shape({
-    beforeTab: _propTypes["default"].node,
-    afterTab: _propTypes["default"].node
-  })
-};
 var TabLine = function TabLine(props) {
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     role: "presentation",

package/lib/cjs/components/Tab/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Tab';
+export * from './Tab';

package/lib/cjs/components/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabsProps } from '../../types';
+export declare const TabsContext: React.Context<{}>;
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLElement>>;
+export default Tabs;