@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Table/Table.js

@@ -2,8 +2,7 @@
 
 exports.__esModule = true;
 exports.Table = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
 var _ = require("../");
@@ -11,6 +10,7 @@ var _random = require("../utils/random");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["sx", "className", "children", "caption"];
 /** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
 /**
  * External dependencies
  */
@@ -18,16 +18,13 @@ var _excluded = ["sx", "className", "children", "caption"];
  * Internal dependencies
  */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+var Table = exports.Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var sx = _ref.sx,
     className = _ref.className,
     children = _ref.children,
-    _ref$caption = _ref.caption,
-    caption = _ref$caption === void 0 ? null : _ref$caption,
+    caption = _ref.caption,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   if (!caption) {
     // eslint-disable-next-line no-console
@@ -43,11 +40,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
       overflowX: 'auto'
     },
     role: "region",
-    "aria-labelledby": captionId
-    // Because this container is scrollable, it needs to be focusable.
-    // A tabIndex value of 0 makes it focusable by keyboard and does not
-    // interfere with the tab order.
-    ,
+    "aria-labelledby": captionId,
     tabIndex: 0,
     children: (0, _jsxRuntime.jsxs)("table", _extends({
       sx: _extends({
@@ -56,7 +49,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
         borderSpacing: 0
       }, sx),
       className: (0, _classnames["default"])('vip-table-component-element', className),
-      ref: forwardRef
+      ref: ref
     }, props, {
       children: [caption && (0, _jsxRuntime.jsx)("caption", {
         id: captionId,
@@ -66,11 +59,4 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
     }))
   });
 });
-exports.Table = Table;
-Table.displayName = 'Table';
-Table.propTypes = {
-  sx: _propTypes["default"].object,
-  className: _propTypes["default"].any,
-  children: _propTypes["default"].any,
-  caption: _propTypes["default"].string.isRequired
-};
+Table.displayName = 'Table';

package/build/system/Table/Table.stories.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./Table").TableProps & import("react").RefAttributes<HTMLTableElement>>;
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const WithHorizontalScroll: () => import("react").JSX.Element;

package/build/system/Table/Table.stories.js

@@ -2,22 +2,20 @@
 
 exports.__esModule = true;
 exports["default"] = exports.WithHorizontalScroll = exports.Default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
 /**
  * External dependencies
  */
 /**
  * Internal dependencies
  */
-var _default = {
+var _default = exports["default"] = {
   title: 'Table',
   component: _.Table
 };
-exports["default"] = _default;
 var ExampleTable = function ExampleTable(_ref) {
   var caption = _ref.caption;
   return (0, _jsxRuntime.jsxs)(_.Table, {
@@ -70,16 +68,12 @@ var ExampleTable = function ExampleTable(_ref) {
     })]
   });
 };
-ExampleTable.propTypes = {
-  caption: _propTypes["default"].string.isRequired
-};
-var Default = function Default() {
+var Default = exports.Default = function Default() {
   return (0, _jsxRuntime.jsx)(ExampleTable, {
     caption: "Example Table"
   });
 };
-exports.Default = Default;
-var WithHorizontalScroll = function WithHorizontalScroll() {
+var WithHorizontalScroll = exports.WithHorizontalScroll = function WithHorizontalScroll() {
   return (0, _jsxRuntime.jsx)("div", {
     sx: {
       maxWidth: '800px'
@@ -88,5 +82,4 @@ var WithHorizontalScroll = function WithHorizontalScroll() {
       caption: "Horizontal Scroll Example"
     })
   });
-};
-exports.WithHorizontalScroll = WithHorizontalScroll;
+};

package/build/system/Table/TableCell.d.ts

@@ -0,0 +1,15 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+import { ReactNode } from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+export interface TableCellProps extends React.HTMLProps<HTMLTableCellElement> {
+    children: ReactNode;
+    head?: boolean;
+    sx?: ThemeUIStyleObject;
+}
+export declare const TableCell: {
+    ({ children, head, sx, ...rest }: TableCellProps): import("react").JSX.Element;
+    displayName: string;
+};

package/build/system/Table/TableCell.js

@@ -2,25 +2,25 @@
 
 exports.__esModule = true;
 exports.TableCell = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["head", "children"];
+var _excluded = ["children", "head", "sx"];
 /** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
 /**
  * External dependencies
  */
 /**
  * Internal dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var TableCell = function TableCell(_ref) {
-  var head = _ref.head,
-    children = _ref.children,
+var TableCell = exports.TableCell = function TableCell(_ref) {
+  var children = _ref.children,
+    head = _ref.head,
+    sx = _ref.sx,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var sx = _extends({
+  var style = _extends({
     borderBottom: '1px solid',
     borderTop: head ? '1px solid' : 'none',
     // borderColor should come after borderTop so it can override it
@@ -29,12 +29,11 @@ var TableCell = function TableCell(_ref) {
     px: 3,
     py: 2,
     textAlign: 'left'
-  }, rest.sx);
-  return (0, _jsxRuntime.jsx)(_.Box, _extends({
-    as: head ? 'th' : 'td'
-  }, _extends({}, rest, {
-    sx: sx
-  }), {
+  }, sx);
+  return (0, _jsxRuntime.jsx)(_.Box, _extends({}, rest, {
+    as: head ? 'th' : 'td',
+    ref: undefined,
+    sx: style,
     children: head ? (0, _jsxRuntime.jsx)("span", {
       sx: {
         mb: 0,
@@ -46,8 +45,4 @@ var TableCell = function TableCell(_ref) {
     }) : children
   }));
 };
-exports.TableCell = TableCell;
-TableCell.propTypes = {
-  children: _propTypes["default"].node,
-  head: _propTypes["default"].bool
-};
+TableCell.displayName = 'TableCell';

package/build/system/Table/TableRow.d.ts

@@ -0,0 +1,14 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+import { ReactNode } from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+export interface TableRowProps extends React.HTMLProps<HTMLTableRowElement> {
+    cells?: ReactNode[];
+    children?: ReactNode;
+    head?: boolean;
+    onClick?: () => void;
+    sx?: ThemeUIStyleObject;
+}
+export declare const TableRow: ({ onClick, head, cells, children, sx, ...rest }: TableRowProps) => import("react").JSX.Element;

package/build/system/Table/TableRow.js

@@ -2,56 +2,51 @@
 
 exports.__esModule = true;
 exports.TableRow = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TableCell = require("./TableCell");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _excluded = ["onClick", "head", "cells", "children", "sx"];
 /** @jsxImportSource theme-ui */
-
+// we'll need jsxImportSource for the sx prop when used with html elements
 /**
  * External dependencies
  */
-
 /**
  * Internal dependencies
  */
-
-var TableRow = function TableRow(_ref) {
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var TableRow = exports.TableRow = function TableRow(_ref) {
   var onClick = _ref.onClick,
     _ref$head = _ref.head,
     head = _ref$head === void 0 ? false : _ref$head,
     _ref$cells = _ref.cells,
     cells = _ref$cells === void 0 ? [] : _ref$cells,
-    children = _ref.children;
-  var hoverStyles = onClick ? {
+    children = _ref.children,
+    sx = _ref.sx,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var hoverStyles = _extends({
     cursor: 'pointer',
     '&:hover': {
       bg: 'hover',
       borderRadius: 2
     }
-  } : {};
-  var handleKeyPress = function handleKeyPress(e) {
-    if (e.key === 'Enter' && onClick) {
+  }, sx);
+  function handleKeyPress(evt) {
+    if (onClick && evt.key === 'Enter') {
       onClick();
     }
-  };
-  return (0, _jsxRuntime.jsxs)("tr", {
-    sx: hoverStyles,
+  }
+  return (0, _jsxRuntime.jsxs)("tr", _extends({
+    sx: onClick ? hoverStyles : sx,
     onClick: onClick,
-    tabIndex: onClick ? 0 : null,
-    onKeyDown: handleKeyPress,
+    tabIndex: onClick ? 0 : undefined,
+    onKeyDown: handleKeyPress
+  }, rest, {
     children: [cells.map(function (cell, index) {
       return (0, _jsxRuntime.jsx)(_TableCell.TableCell, {
         head: head,
         children: cell
       }, index);
     }), children]
-  });
-};
-exports.TableRow = TableRow;
-TableRow.propTypes = {
-  cells: _propTypes["default"].array,
-  children: _propTypes["default"].node,
-  head: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func
+  }));
 };

package/build/system/Table/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+export { Table } from './Table';
+export { TableRow } from './TableRow';
+export { TableCell } from './TableCell';

package/build/system/Table/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
+exports.TableRow = exports.TableCell = exports.Table = void 0;
 var _Table = require("./Table");
 exports.Table = _Table.Table;
 var _TableRow = require("./TableRow");

package/build/system/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+export const Tabs: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/build/system/Tabs/Tabs.js

@@ -1,48 +1,50 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Tabs = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
-var _react = _interopRequireDefault(require("react"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import React from 'react';
 
 /**
  * Internal dependencies
- */var Tabs = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$onValueChange = _ref.onValueChange,
-    onValueChange = _ref$onValueChange === void 0 ? undefined : _ref$onValueChange,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? undefined : _ref$defaultValue,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? undefined : _ref$value,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return (0, _jsxRuntime.jsx)(TabsPrimitive.Root, {
-    ref: ref,
-    value: value,
-    defaultValue: defaultValue,
-    onValueChange: onValueChange,
-    className: (0, _classnames["default"])('vip-tabs-component', className),
-    children: children
-  });
-});
-exports.Tabs = Tabs;
+ */
+
+const Tabs = React.forwardRef(
+	(
+		{
+			children,
+			onValueChange = undefined,
+			defaultValue = undefined,
+			value = undefined,
+			className = null,
+		},
+		ref
+	) => {
+		return (
+			<TabsPrimitive.Root
+				ref={ ref }
+				value={ value }
+				defaultValue={ defaultValue }
+				onValueChange={ onValueChange }
+				className={ classNames( 'vip-tabs-component', className ) }
+			>
+				{ children }
+			</TabsPrimitive.Root>
+		);
+	}
+);
+
 Tabs.propTypes = {
-  className: _propTypes["default"].any,
-  defaultValue: _propTypes["default"].node,
-  value: _propTypes["default"].node,
-  onValueChange: _propTypes["default"].func,
-  children: _propTypes["default"].node.isRequired
+	className: PropTypes.any,
+	defaultValue: PropTypes.node,
+	value: PropTypes.node,
+	onValueChange: PropTypes.func,
+	children: PropTypes.node.isRequired,
 };
-Tabs.displayName = 'Tabs';
+
+Tabs.displayName = 'Tabs';
+
+export { Tabs };

package/build/system/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export let title: string;
+    export { Tabs as component };
+}
+export default _default;
+export function Default(): React.JSX.Element;
+export function SetActiveTab(): React.JSX.Element;
+import { Tabs } from '..';
+import React from 'react';

package/build/system/Tabs/Tabs.stories.jsx

@@ -0,0 +1,69 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Tabs, TabsTrigger, TabsList, TabsContent, Text, Link, Button } from '..';
+
+export default {
+	title: 'Tabs',
+	component: Tabs,
+};
+
+export const Default = () => (
+	<Tabs defaultValue="all">
+		<TabsList title="See all the content">
+			<TabsTrigger value="all">All (5)</TabsTrigger>
+			<TabsTrigger value="live">Live (2)</TabsTrigger>
+			<TabsTrigger value="dev">In Development (3)</TabsTrigger>
+			<TabsTrigger value="protect" disabled>
+				Not accessible
+			</TabsTrigger>
+		</TabsList>
+		<TabsContent value="all">
+			<Text>
+				All content <Link href="https://google.com">https://google.com</Link>
+			</Text>
+		</TabsContent>
+		<TabsContent value="live">Live content</TabsContent>
+		<TabsContent value="dev">
+			<Text>
+				In Development content <Button variant="secondary">Hey I am a button</Button>{ ' ' }
+			</Text>
+		</TabsContent>
+	</Tabs>
+);
+export const SetActiveTab = () => {
+	const [ activeTab, setActiveTab ] = React.useState( 'all' );
+
+	return (
+		<Tabs value={ activeTab } onValueChange={ val => setActiveTab( val ) }>
+			<TabsList title="See all the content">
+				<TabsTrigger value="all">All (5)</TabsTrigger>
+				<TabsTrigger value="live">Live (2)</TabsTrigger>
+				<TabsTrigger value="dev">In Development (3)</TabsTrigger>
+				<TabsTrigger value="protect" disabled={ true }>
+					Not accessible
+				</TabsTrigger>
+			</TabsList>
+			<TabsContent value="all">
+				<Text>
+					<button type="button" onClick={ () => setActiveTab( 'live' ) }>
+						Switch to live tab
+					</button>
+				</Text>
+			</TabsContent>
+			<TabsContent value="live">Live content</TabsContent>
+			<TabsContent value="dev">
+				<Text>
+					In Development content <button type="button">Hey I am a button</button>{ ' ' }
+				</Text>
+			</TabsContent>
+		</Tabs>
+	);
+};

package/build/system/Tabs/TabsContent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+export function TabsContent({ value, children, className }: {
+    value: any;
+    children: any;
+    className?: null | undefined;
+}): import("react").JSX.Element;
+export namespace TabsContent {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let value: PropTypes.Requireable<string>;
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    }
+}
+import PropTypes from 'prop-types';

package/build/system/Tabs/TabsContent.js

@@ -1,39 +1,32 @@
-"use strict";
-
-exports.__esModule = true;
-exports.TabsContent = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
+import PropTypes from 'prop-types';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
- */var TabsContent = function TabsContent(_ref) {
-  var value = _ref.value,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return (0, _jsxRuntime.jsx)(TabsPrimitive.Content, {
-    className: (0, _classnames["default"])('vip-tabs-content', "vip-tabs-content-" + value, className),
-    value: value,
-    sx: {
-      mt: 4
-    },
-    children: children
-  });
-};
-exports.TabsContent = TabsContent;
+ */
+
+const TabsContent = ( { value, children, className = null } ) => (
+	<TabsPrimitive.Content
+		className={ classNames( 'vip-tabs-content', `vip-tabs-content-${ value }`, className ) }
+		value={ value }
+		sx={ {
+			mt: 4,
+		} }
+	>
+		{ children }
+	</TabsPrimitive.Content>
+);
+
 TabsContent.propTypes = {
-  className: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  children: _propTypes["default"].node.isRequired
-};
+	className: PropTypes.string,
+	value: PropTypes.string,
+	children: PropTypes.node.isRequired,
+};
+
+export { TabsContent };

package/build/system/Tabs/TabsList.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+export function TabsList({ children, title, ...props }: {
+    [x: string]: any;
+    children: any;
+    title: any;
+}): import("react").JSX.Element;
+export namespace TabsList {
+    namespace propTypes {
+        let title: PropTypes.Validator<string>;
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    }
+}
+import PropTypes from 'prop-types';