@automattic/vip-design-system 0.34.0 → 0.34.2

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "prettier.enable": false,
+}

package/build/system/Dropdown/Dropdown.js

@@ -13,6 +13,8 @@ var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dro
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _DropdownContent = require("./DropdownContent");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -64,7 +66,8 @@ var Dropdown = function Dropdown(_ref) {
       _ref$contentProps = _ref.contentProps,
       contentProps = _ref$contentProps === void 0 ? {} : _ref$contentProps,
       _ref$portalProps = _ref.portalProps,
-      portalProps = _ref$portalProps === void 0 ? {} : _ref$portalProps;
+      portalProps = _ref$portalProps === void 0 ? {} : _ref$portalProps,
+      className = _ref.className;
 
   var firstChild = _react["default"].useMemo(function () {
     var _React$Children$only, _React$Children$only$;
@@ -73,12 +76,14 @@ var Dropdown = function Dropdown(_ref) {
   }, [children]);
 
   return (0, _jsxRuntime.jsxs)(DropdownMenu, {
+    className: (0, _classnames["default"])('vip-dropdown-menu', className),
     open: open,
     defaultOpen: defaultOpen,
     onOpenChange: onOpenChange,
     modal: modal,
     dir: dir,
     children: [(0, _jsxRuntime.jsx)(DropdownTrigger, {
+      className: "vip-dropdown-trigger",
       asChild: true,
       children: trigger
     }), (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Portal, (0, _extends2["default"])({}, portalProps, {
@@ -107,5 +112,6 @@ Dropdown.propTypes = {
   // Content props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#content
   contentProps: _propTypes["default"].any,
   // Portal props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#portal
-  portalProps: _propTypes["default"].any
+  portalProps: _propTypes["default"].any,
+  className: _propTypes["default"].string
 }; // Exports

package/build/system/Dropdown/DropdownContent.js

@@ -7,21 +7,25 @@ exports.styles = exports.DropdownSubContent = exports.DropdownContent = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["className"],
+    _excluded2 = ["className"];
+
 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; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
 var styles = {
   minWidth: 220,
   borderRadius: 6,
@@ -32,8 +36,11 @@ var styles = {
 };
 exports.styles = styles;
 
-var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var className = _ref.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuContent, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-dropdown-menu-content', className),
     ref: forwardRef,
     sx: styles
   }, props));
@@ -41,10 +48,16 @@ var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (props,
 
 exports.DropdownContent = DropdownContent;
 DropdownContent.displayName = 'DropdownContent';
+DropdownContent.propTypes = {
+  className: _propTypes["default"].string
+};
 
-var DropdownSubContent = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+var DropdownSubContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
+  var className = _ref2.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
   return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Portal, {
     children: (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuSubContent, (0, _extends2["default"])({
+      className: (0, _classnames["default"])('vip-dropdown-menu-sub-content', className),
       ref: forwardRef,
       sx: styles
     }, props))
@@ -52,4 +65,7 @@ var DropdownSubContent = /*#__PURE__*/_react["default"].forwardRef(function (pro
 });
 
 exports.DropdownSubContent = DropdownSubContent;
-DropdownSubContent.displayName = 'DropdownSubContent';
+DropdownSubContent.displayName = 'DropdownSubContent';
+DropdownSubContent.propTypes = {
+  className: _propTypes["default"].string
+};

package/build/system/Dropdown/DropdownItem.js

@@ -7,21 +7,27 @@ exports.styles = exports.DropdownSubTrigger = exports.DropdownRadioItem = export
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["className"],
+    _excluded2 = ["className"],
+    _excluded3 = ["className"],
+    _excluded4 = ["className"];
+
 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; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
 var styles = {
   unset: 'all',
   cursor: 'pointer',
@@ -51,8 +57,11 @@ var styles = {
 };
 exports.styles = styles;
 
-var DropdownItem = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+var DropdownItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var className = _ref.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuItem, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-dropdown-menu-item', className),
     ref: forwardRef,
     sx: styles
   }, props));
@@ -60,9 +69,15 @@ var DropdownItem = /*#__PURE__*/_react["default"].forwardRef(function (props, fo
 
 exports.DropdownItem = DropdownItem;
 DropdownItem.displayName = 'DropdownItem';
+DropdownItem.propTypes = {
+  className: _propTypes["default"].string
+};
 
-var DropdownCheckboxItem = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+var DropdownCheckboxItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
+  var className = _ref2.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
   return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.CheckboxItem, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-dropdown-checkbox-item', className),
     ref: forwardRef,
     sx: styles
   }, props));
@@ -70,9 +85,15 @@ var DropdownCheckboxItem = /*#__PURE__*/_react["default"].forwardRef(function (p
 
 exports.DropdownCheckboxItem = DropdownCheckboxItem;
 DropdownCheckboxItem.displayName = 'DropdownCheckboxItem';
+DropdownCheckboxItem.propTypes = {
+  className: _propTypes["default"].string
+};
 
-var DropdownRadioItem = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+var DropdownRadioItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardRef) {
+  var className = _ref3.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
   return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.RadioItem, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-dropdown-radio-item', className),
     ref: forwardRef,
     sx: styles
   }, props));
@@ -80,9 +101,15 @@ var DropdownRadioItem = /*#__PURE__*/_react["default"].forwardRef(function (prop
 
 exports.DropdownRadioItem = DropdownRadioItem;
 DropdownRadioItem.displayName = 'DropdownRadioItem';
+DropdownRadioItem.propTypes = {
+  className: _propTypes["default"].string
+};
 
-var DropdownSubTrigger = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+var DropdownSubTrigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, forwardRef) {
+  var className = _ref4.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded4);
   return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.SubTrigger, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-dropdown-sub-trigger', className),
     ref: forwardRef,
     sx: (0, _extends2["default"])({}, styles, {
       '&[data-state="open"]': {
@@ -94,4 +121,7 @@ var DropdownSubTrigger = /*#__PURE__*/_react["default"].forwardRef(function (pro
 });
 
 exports.DropdownSubTrigger = DropdownSubTrigger;
-DropdownSubTrigger.displayName = 'DropdownSubTrigger';
+DropdownSubTrigger.displayName = 'DropdownSubTrigger';
+DropdownSubTrigger.propTypes = {
+  className: _propTypes["default"].string
+};

package/build/system/Dropdown/DropdownLabel.js

@@ -7,21 +7,24 @@ exports.styles = exports.DropdownLabel = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["className"];
+
 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; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
 var styles = {
   paddingLeft: 10,
   fontSize: 12,
@@ -30,12 +33,18 @@ var styles = {
 };
 exports.styles = styles;
 
-var DropdownLabel = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+var DropdownLabel = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var className = _ref.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuLabel, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-dropdown-menu-label', className),
     ref: forwardRef,
     sx: styles
   }, props));
 });
 
 exports.DropdownLabel = DropdownLabel;
-DropdownLabel.displayName = 'DropdownLabel';
+DropdownLabel.displayName = 'DropdownLabel';
+DropdownLabel.propTypes = {
+  className: _propTypes["default"].string
+};

package/build/system/Dropdown/DropdownSeparator.js

@@ -7,21 +7,24 @@ exports.styles = exports.DropdownSeparator = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["className"];
+
 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; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
 var styles = {
   height: '1px',
   backgroundColor: 'borders.2',
@@ -29,12 +32,18 @@ var styles = {
 };
 exports.styles = styles;
 
-var DropdownSeparator = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+var DropdownSeparator = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var className = _ref.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuSeparator, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-dropdown-menu-separator', className),
     ref: forwardRef,
     sx: styles
   }, props));
 });
 
 exports.DropdownSeparator = DropdownSeparator;
-DropdownSeparator.displayName = 'DropdownSeparator';
+DropdownSeparator.displayName = 'DropdownSeparator';
+DropdownSeparator.propTypes = {
+  className: _propTypes["default"].string
+};

package/build/system/Form/Label.js

@@ -13,11 +13,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _themeUi = require("theme-ui");
+
 var _RequiredLabel = require("./RequiredLabel");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx", "children", "required"];
+var _excluded = ["sx", "children", "required", "as"];
 var baseLabelColor = 'input.label.default';
 exports.baseLabelColor = baseLabelColor;
 var baseLabelStyle = {
@@ -32,9 +34,14 @@ var Label = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
   var sx = _ref.sx,
       children = _ref.children,
       required = _ref.required,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'label' : _ref$as,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsxs)("label", (0, _extends2["default"])({
-    sx: (0, _extends2["default"])({}, baseLabelStyle, {
+  return (0, _jsxRuntime.jsxs)(_themeUi.Box, (0, _extends2["default"])({
+    as: as,
+    sx: (0, _extends2["default"])({
+      all: 'unset'
+    }, baseLabelStyle, {
       display: 'block',
       mb: 2
     }, sx),
@@ -48,6 +55,7 @@ exports.Label = Label;
 Label.propTypes = {
   children: _propTypes["default"].any,
   required: _propTypes["default"].bool,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  as: _propTypes["default"].node
 };
 Label.displayName = 'Label';

package/build/system/Form/RadioBoxGroup.js

@@ -15,10 +15,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
-var _Label = require("./Label");
-
 var _Validation = require("./Validation");
 
+var _RequiredLabel = require("./RequiredLabel");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["id", "value", "className", "label", "description", "labelProps"],
@@ -171,15 +171,15 @@ var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, f
         borderColor: 'input.border.error',
         borderRadius: 2
       } : {}),
-      ref: forwardRef
+      ref: forwardRef,
+      "aria-required": required,
+      role: "radiogroup"
     }, props, {
-      children: [groupLabel ? (0, _jsxRuntime.jsx)(_Label.Label, {
-        as: "legend",
+      children: [groupLabel ? (0, _jsxRuntime.jsxs)("legend", {
         sx: {
           mb: 2
         },
-        required: required,
-        children: groupLabel
+        children: [groupLabel, required ? (0, _jsxRuntime.jsx)(_RequiredLabel.RequiredLabel, {}) : null]
       }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
         children: "Choose an option"
       }), (0, _jsxRuntime.jsx)("div", {

package/build/system/Tabs/Tabs.js

@@ -5,8 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.Tabs = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -39,16 +37,13 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? undefined : _ref$value,
       _ref$className = _ref.className,
-      className = _ref$className === void 0 ? null : _ref$className,
-      _ref$sx = _ref.sx,
-      sx = _ref$sx === void 0 ? {} : _ref$sx;
+      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),
-    sx: (0, _extends2["default"])({}, sx),
     children: children
   });
 });
@@ -56,7 +51,6 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
 exports.Tabs = Tabs;
 Tabs.propTypes = {
   className: _propTypes["default"].any,
-  sx: _propTypes["default"].object,
   defaultValue: _propTypes["default"].node,
   value: _propTypes["default"].node,
   onValueChange: _propTypes["default"].func,

package/build/system/Tabs/Tabs.stories.js

@@ -11,6 +11,8 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */

package/build/system/Tabs/TabsContent.js

@@ -5,8 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.TabsContent = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
@@ -30,21 +28,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var TabsContent = function TabsContent(_ref) {
   var value = _ref.value,
-      sx = _ref.sx,
-      children = _ref.children;
+      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: (0, _classnames["default"])('vip-tabs-content', "vip-tabs-content-" + value, className),
     value: value,
-    sx: (0, _extends2["default"])({
+    sx: {
       mt: 4
-    }, sx),
+    },
     children: children
   });
 };
 
 exports.TabsContent = TabsContent;
 TabsContent.propTypes = {
-  sx: _propTypes["default"].object,
+  className: _propTypes["default"].string,
   value: _propTypes["default"].string,
   children: _propTypes["default"].node.isRequired
 };

package/build/system/Tabs/TabsList.js

@@ -7,43 +7,41 @@ exports.TabsList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["children", "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; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */
 var TabsList = function TabsList(_ref) {
   var children = _ref.children,
       title = _ref.title,
-      sx = _ref.sx;
-  return (0, _jsxRuntime.jsx)(TabsPrimitive.List, {
-    sx: (0, _extends2["default"])({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(TabsPrimitive.List, (0, _extends2["default"])({
+    sx: {
       borderBottom: '1px solid',
       borderColor: 'borders.2',
       display: 'flex'
-    }, sx),
-    "aria-label": title,
+    },
+    "aria-label": title
+  }, props, {
     children: children
-  });
+  }));
 };
 
 exports.TabsList = TabsList;
 TabsList.propTypes = {
-  sx: _propTypes["default"].object,
   title: _propTypes["default"].string.isRequired,
   children: _propTypes["default"].node.isRequired
 };

package/build/system/Tabs/TabsTrigger.js

@@ -64,13 +64,14 @@ var TabsTrigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forw
   var value = _ref.value,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      sx = _ref.sx,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className;
   return (0, _jsxRuntime.jsx)(TabsPrimitive.TabsTrigger, {
-    className: (0, _classnames["default"])('vip-tabs-trigger', "vip-tabs-trigger-" + value),
+    className: (0, _classnames["default"])('vip-tabs-trigger', "vip-tabs-trigger-" + value, className),
     value: value,
     disabled: disabled,
-    sx: (0, _extends2["default"])({}, styles, sx),
+    sx: (0, _extends2["default"])({}, styles),
     ref: forwardRef,
     children: children
   });
@@ -78,7 +79,7 @@ var TabsTrigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forw
 
 exports.TabsTrigger = TabsTrigger;
 TabsTrigger.propTypes = {
-  sx: _propTypes["default"].object,
+  className: _propTypes["default"].string,
   value: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   children: _propTypes["default"].node.isRequired

package/build/system/Wizard/WizardStep.js

@@ -54,7 +54,7 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
 
   if (active) {
     status = 'active';
-    statusText = 'Current step';
+    statusText = ''; // not adding the status text for active step since it's announced by aria-current
   } else if (complete) {
     status = 'complete';
     statusText = 'Step completed';
@@ -63,7 +63,10 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
     statusText = 'Step skipped';
   }
 
-  statusText = "Status: " + statusText;
+  if (statusText !== '') {
+    statusText = "Status: " + statusText;
+  }
+
   var stepText = "Step " + order + " of " + totalSteps;
   var borderLeftColor = "wizard.step.border." + status;
   var statusIconColor = "wizard.step.icon." + status;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.34.0",
+	"version": "0.34.2",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Dropdown/Dropdown.js

@@ -6,6 +6,7 @@
 import React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -33,6 +34,7 @@ export const Dropdown = ( {
 	dir = 'ltr',
 	contentProps = {},
 	portalProps = {},
+	className,
 } ) => {
 	const firstChild = React.useMemo(
 		() =>
@@ -42,13 +44,16 @@ export const Dropdown = ( {
 
 	return (
 		<DropdownMenu
+			className={ classNames( 'vip-dropdown-menu', className ) }
 			open={ open }
 			defaultOpen={ defaultOpen }
 			onOpenChange={ onOpenChange }
 			modal={ modal }
 			dir={ dir }
 		>
-			<DropdownTrigger asChild>{ trigger }</DropdownTrigger>
+			<DropdownTrigger className="vip-dropdown-trigger" asChild>
+				{ trigger }
+			</DropdownTrigger>
 
 			<DropdownMenuPrimitive.Portal { ...portalProps }>
 				{ /* User can customize the content */ }
@@ -80,6 +85,7 @@ Dropdown.propTypes = {
 	contentProps: PropTypes.any,
 	// Portal props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#portal
 	portalProps: PropTypes.any,
+	className: PropTypes.string,
 };
 
 // Exports