@automattic/vip-design-system 0.10.0 → 0.10.3

package/build/system/Form/Input.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Input = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,12 +19,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "label", "forLabel", "hasError", "required", "errorMessage"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || 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 Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
       label = _ref.label,
@@ -26,13 +26,12 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       hasError = _ref.hasError,
       required = _ref.required,
       errorMessage = _ref.errorMessage,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
     children: [label && (0, _jsxRuntime.jsxs)(_.Label, {
       htmlFor: forLabel,
       children: [label, required && '*']
-    }), (0, _jsxRuntime.jsx)("input", _extends({}, props, {
+    }), (0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({}, props, {
       ref: ref,
       id: forLabel,
       required: required,

package/build/system/Form/Input.stories.js

@@ -1,18 +1,27 @@
-/**
- * External dependencies
- */
-import React from 'react';
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
 /**
  * Internal dependencies
  */
-
-import { Input } from '..';
-export default {
+var _default = {
   title: 'Input',
-  component: Input
+  component: _.Input
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Input, {
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Input, {
     placeholder: "Your input here..."
   });
-};
+};
+
+exports.Default = Default;

package/build/system/Form/Label.js

@@ -1,16 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Label = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _extends() { _extends = Object.assign || 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); }
+/** @jsxImportSource theme-ui */
 
+/**
+ * Internal dependencies
+ */
 var Label = function Label(props) {
-  return (0, _jsxRuntime.jsx)(_.Heading, _extends({
+  return (0, _jsxRuntime.jsx)(_.Heading, (0, _extends2["default"])({
     variant: "h4",
     as: "label",
     sx: {

package/build/system/Form/Radio.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Radio = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -11,17 +17,10 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["disabled"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || 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 Radio = function Radio(_ref) {
   var disabled = _ref.disabled,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_themeUi.Radio, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_themeUi.Radio, (0, _extends2["default"])({
     sx: {
       opacity: disabled ? 0.4 : 1
     },

package/build/system/Form/RadioBoxGroup.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.RadioBoxGroup = 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 RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));
@@ -19,20 +25,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 }; }
-
-function _extends() { _extends = Object.assign || 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 RadioBoxGroup = function RadioBoxGroup(_ref) {
   var onChange = _ref.onChange,
       groupLabel = _ref.groupLabel,
       value = _ref.value,
       options = _ref.options,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(RadioGroupPrimitive.Root, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(RadioGroupPrimitive.Root, (0, _extends2["default"])({
     onValueChange: onChange,
     value: value,
     "aria-label": groupLabel,

package/build/system/Form/RadioBoxGroup.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = require("react");
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'RadioBoxGroup',
+  component: _.RadioBoxGroup
+};
+exports["default"] = _default;
+var options = [{
+  label: 'One',
+  value: 'one',
+  description: 'This is a description'
+}, {
+  label: 'Two',
+  value: 'two',
+  description: 'This is a description'
+}, {
+  label: 'Three',
+  value: 'three',
+  description: 'This is a description'
+}];
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)('one'),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  return (0, _jsxRuntime.jsx)(_.RadioBoxGroup, {
+    value: value,
+    onChange: function onChange(newValue) {
+      return setValue(newValue);
+    },
+    groupLabel: "group",
+    options: options
+  });
+};
+
+exports.Default = Default;

package/build/system/Form/SearchSelect.js

@@ -1,7 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports.SearchSelect = exports.DropdownIndicator = exports.Option = void 0;
+exports.SearchSelect = exports.Option = exports.DropdownIndicator = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
 var _md = require("react-icons/md");
 
@@ -18,23 +24,16 @@ var _excluded = ["label", "isSelected"],
     _excluded3 = ["ref"],
     _excluded4 = ["innerProps"];
 
-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 || 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; }
-
 // Option component
 var Option = function Option(_ref) {
   var label = _ref.label,
       isSelected = _ref.isSelected,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_reactSelect.components.Option, _extends({}, props, {
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _extends2["default"])({}, props, {
     children: (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
         alignItems: 'center'
@@ -85,9 +84,8 @@ var DropdownIndicator = function DropdownIndicator(_ref2) {
       setValue = _ref2.setValue,
       selectOption = _ref2.selectOption,
       theme = _ref2.theme,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
-  return (0, _jsxRuntime.jsx)(_md.MdExpandMore, _extends({}, props, {
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
+  return (0, _jsxRuntime.jsx)(_md.MdExpandMore, (0, _extends2["default"])({}, props, {
     sx: {
       color: 'text',
       mr: 2
@@ -117,10 +115,9 @@ DropdownIndicator.propTypes = {
 var ClearIndicator = function ClearIndicator(_ref3) {
   var _ref3$innerProps = _ref3.innerProps,
       ref = _ref3$innerProps.ref,
-      restInnerProps = _objectWithoutPropertiesLoose(_ref3$innerProps, _excluded3),
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
-
-  return (0, _jsxRuntime.jsx)(_md.MdClose, _extends({
+      restInnerProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref3$innerProps, _excluded3),
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded4);
+  return (0, _jsxRuntime.jsx)(_md.MdClose, (0, _extends2["default"])({
     ref: ref
   }, restInnerProps, props, {
     sx: {
@@ -135,7 +132,7 @@ ClearIndicator.propTypes = {
 }; // Parent SearchSelect component
 
 var SearchSelect = function SearchSelect(props) {
-  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
+  return (0, _jsxRuntime.jsx)(_reactSelect["default"], (0, _extends2["default"])({}, props, {
     classNamePrefix: 'select',
     components: {
       Option: Option,

package/build/system/Form/Select.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Select = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,12 +23,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["isMulti", "isInline", "isAsync", "options", "label", "isSearch", "usePortal"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || 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 Select = function Select(_ref) {
   var _ref$isMulti = _ref.isMulti,
       isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
@@ -32,8 +32,7 @@ var Select = function Select(_ref) {
       label = _ref.label,
       isSearch = _ref.isSearch,
       usePortal = _ref.usePortal,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var Component;
 
   var selectRef = _react["default"].useRef();
@@ -46,7 +45,7 @@ var Select = function Select(_ref) {
     portalProps.menuPortalTarget = selectRef == null ? void 0 : (_selectRef$current = selectRef.current) == null ? void 0 : _selectRef$current.querySelector('.select__control').parentElement;
     portalProps.styles = {
       menuPortal: function menuPortal(base) {
-        return _extends({}, base, {
+        return (0, _extends2["default"])({}, base, {
           position: 'fixed'
         });
       }
@@ -70,7 +69,7 @@ var Select = function Select(_ref) {
   return (0, _jsxRuntime.jsx)("div", {
     ref: selectRef,
     className: "vip-select-component",
-    children: (0, _jsxRuntime.jsx)(Component, _extends({
+    children: (0, _jsxRuntime.jsx)(Component, (0, _extends2["default"])({
       isMulti: isMulti,
       label: label,
       options: options