@automattic/vip-design-system 0.9.6 → 0.10.2

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'
         });
       }
@@ -69,7 +68,8 @@ var Select = function Select(_ref) {
 
   return (0, _jsxRuntime.jsx)("div", {
     ref: selectRef,
-    children: (0, _jsxRuntime.jsx)(Component, _extends({
+    className: "vip-select-component",
+    children: (0, _jsxRuntime.jsx)(Component, (0, _extends2["default"])({
       isMulti: isMulti,
       label: label,
       options: options

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

@@ -1,17 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports.DropdownMenu = exports.Inline = exports.Single = exports.Multi = exports["default"] = void 0;
+exports.usePortal = exports["default"] = exports.Single = exports.Multi = exports.Inline = exports.DropdownMenu = exports.Async = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _ = require("..");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _react = require("react");
 
-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); }
+var _ = require("..");
 
-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 _jsxRuntime = require("theme-ui/jsx-runtime");
 
 /**
  * External dependencies
@@ -80,11 +82,37 @@ var Multi = function Multi() {
 
 exports.Multi = Multi;
 
-var Single = function Single() {
+var usePortal = function usePortal() {
   var _useState2 = (0, _react.useState)([]),
       value = _useState2[0],
       setValue = _useState2[1];
 
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    sx: {
+      mr: 2,
+      width: 400
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "Type",
+      value: value,
+      isMulti: true,
+      placeholder: "Select domains...",
+      usePortal: true,
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
+};
+
+exports.usePortal = usePortal;
+
+var Single = function Single() {
+  var _useState3 = (0, _react.useState)([]),
+      value = _useState3[0],
+      setValue = _useState3[1];
+
   return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       mr: 2,
@@ -105,9 +133,9 @@ var Single = function Single() {
 exports.Single = Single;
 
 var Inline = function Inline() {
-  var _useState3 = (0, _react.useState)([]),
-      value = _useState3[0],
-      setValue = _useState3[1];
+  var _useState4 = (0, _react.useState)([]),
+      value = _useState4[0],
+      setValue = _useState4[1];
 
   return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
@@ -131,6 +159,64 @@ var Inline = function Inline() {
 
 exports.Inline = Inline;
 
+var Async = function Async() {
+  var _useState5 = (0, _react.useState)([]),
+      value = _useState5[0],
+      setValue = _useState5[1];
+
+  var loadOptions = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", new Promise(function (resolve) {
+                setTimeout(function () {
+                  resolve({
+                    options: [].concat(options, [{
+                      value: 'newvanilla',
+                      label: 'New Vanilla'
+                    }])
+                  });
+                }, 2000);
+              }));
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function loadOptions() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    sx: {
+      mr: 2,
+      width: 200
+    },
+    children: (0, _jsxRuntime.jsx)(_.Select, {
+      label: "Async Select",
+      value: value,
+      isAsync: true,
+      usePortal: true,
+      loadOptions: loadOptions,
+      noneLabel: "Everyone",
+      placeholder: "Load async...",
+      options: options,
+      onChange: function onChange(newValue) {
+        return setValue(newValue);
+      }
+    })
+  });
+};
+
+exports.Async = Async;
+
 var DropdownMenu = function DropdownMenu() {
   return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {

package/build/system/Form/Select.test.js

@@ -1,5 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
@@ -8,10 +14,13 @@ var _Select = require("./Select");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+/**
+ * External dependencies
+ */
 
+/**
+  * Internal dependencies
+  */
 describe('<Select />', function () {
   it('renders the Select component with the specified placeholder', function () {
     (0, _react.render)((0, _jsxRuntime.jsx)(_Select.Select, {
@@ -23,10 +32,10 @@ describe('<Select />', function () {
 
     expect(placeholder).toBeInTheDocument();
   });
-  it('renders the Select component with accessibility props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+  it('renders the Select component with accessibility props', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
 
-    return regeneratorRuntime.wrap(function _callee$(_context) {
+    return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:

package/build/system/Form/Textarea.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Textarea = 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 Textarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
       label = _ref.label,
@@ -26,13 +26,12 @@ var Textarea = /*#__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)("textarea", _extends({}, props, {
+    }), (0, _jsxRuntime.jsx)("textarea", (0, _extends2["default"])({}, props, {
       ref: ref,
       sx: {
         border: '1px solid',

package/build/system/Form/Toggle.js

@@ -1,27 +1,31 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Toggle = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _excluded = ["name"];
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-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); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-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 _excluded = ["name", "className"];
 
 var Toggle = function Toggle(_ref) {
   var _ref$name = _ref.name,
       name = _ref$name === void 0 ? 'toggle' : _ref$name,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(CheckBoxWrapper, {
-    children: [(0, _jsxRuntime.jsx)(CheckBox, _extends({
+    className: (0, _classnames["default"])('vip-checkbox-component', className),
+    children: [(0, _jsxRuntime.jsx)(CheckBox, (0, _extends2["default"])({
       name: name,
       id: name,
       type: "checkbox"
@@ -33,11 +37,12 @@ var Toggle = function Toggle(_ref) {
 
 exports.Toggle = Toggle;
 Toggle.propTypes = {
-  name: _propTypes["default"].string
+  name: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };
 
 var CheckBoxWrapper = function CheckBoxWrapper(props) {
-  return (0, _jsxRuntime.jsx)("div", _extends({
+  return (0, _jsxRuntime.jsx)("div", (0, _extends2["default"])({
     sx: {
       position: 'relative'
     }
@@ -45,7 +50,7 @@ var CheckBoxWrapper = function CheckBoxWrapper(props) {
 };
 
 var CheckBoxLabel = function CheckBoxLabel(props) {
-  return (0, _jsxRuntime.jsx)("label", _extends({
+  return (0, _jsxRuntime.jsx)("label", (0, _extends2["default"])({
     sx: {
       position: 'absolute',
       top: '0',
@@ -71,7 +76,7 @@ var CheckBoxLabel = function CheckBoxLabel(props) {
 };
 
 var CheckBox = function CheckBox(props) {
-  return (0, _jsxRuntime.jsx)("input", _extends({
+  return (0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({
     sx: {
       opacity: '0',
       zIndex: '1',

package/build/system/Form/ToggleGroup.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.ToggleGroup = 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"));
@@ -15,20 +21,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 ToggleGroup = function ToggleGroup(_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/ToggleGroup.stories.js

@@ -0,0 +1,50 @@
+"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: 'ToggleGroup',
+  component: _.ToggleGroup
+};
+exports["default"] = _default;
+var options = [{
+  label: 'One',
+  value: 'one'
+}, {
+  label: 'Two',
+  value: 'two'
+}, {
+  label: 'Three',
+  value: 'three'
+}];
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)('one'),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  return (0, _jsxRuntime.jsx)(_.ToggleGroup, {
+    value: value,
+    onChange: function onChange(newValue) {
+      return setValue(newValue);
+    },
+    groupLabel: "group",
+    options: options
+  });
+};
+
+exports.Default = Default;