@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/NewForm/FormSelectInline.js

@@ -1,39 +1,42 @@
-"use strict";
+/** @jsxImportSource theme-ui */
 
-exports.__esModule = true;
-exports.inlineStyles = void 0;
-var _Input = require("../Form/Input.styles");
-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); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */ /**
-                                                                                                                                                                                                                                                                                                                                                                                          * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                          */
-var inlineStyles = _extends({
-  display: 'grid',
-  gridTemplateColumns: 'auto 1fr',
-  position: 'relative',
-  alignItems: 'center',
-  backgroundColor: 'input.background',
-  borderRadius: 1
-}, _Input.baseControlBorderStyle, {
-  paddingRight: 0,
-  paddingLeft: 3,
-  label: {
-    margin: 0,
-    paddingRight: 2,
-    borderRightWidth: _Input.baseControlBorderStyle.borderWidth,
-    borderRightStyle: _Input.baseControlBorderStyle.borderStyle,
-    borderRightColor: _Input.baseControlBorderStyle.borderColor
-  },
-  select: {
-    width: '100%',
-    border: 'none',
-    margin: 0,
-    paddingLeft: 2
-  },
-  svg: {
-    right: 2,
-    position: 'absolute'
-  }
-});
-exports.inlineStyles = inlineStyles;
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { baseControlBorderStyle } from '../Form/Input.styles';
+
+export const inlineStyles = {
+	display: 'grid',
+	gridTemplateColumns: 'auto 1fr',
+	position: 'relative',
+	alignItems: 'center',
+	backgroundColor: 'input.background',
+	borderRadius: 1,
+	...baseControlBorderStyle,
+	paddingRight: 0,
+	paddingLeft: 3,
+
+	label: {
+		margin: 0,
+		paddingRight: 2,
+		borderRightWidth: baseControlBorderStyle.borderWidth,
+		borderRightStyle: baseControlBorderStyle.borderStyle,
+		borderRightColor: baseControlBorderStyle.borderColor,
+	},
+
+	select: {
+		width: '100%',
+		border: 'none',
+		margin: 0,
+		paddingLeft: 2,
+	},
+
+	svg: {
+		right: 2,
+		position: 'absolute',
+	},
+};

package/build/system/NewForm/FormSelectLoading.d.ts

@@ -0,0 +1,2 @@
+export const FormSelectLoading: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/build/system/NewForm/FormSelectLoading.js

@@ -1,54 +1,45 @@
-"use strict";
-
-exports.__esModule = true;
-exports.FormSelectLoading = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ai = require("react-icons/ai");
-var _react2 = require("@emotion/react");
-var _Input = require("../Form/Input.styles");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["sx"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AiOutlineLoading3Quarters } from 'react-icons/ai';
+import { keyframes } from '@emotion/react';
+
 /**
  * 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 kf = (0, _react2.keyframes)({
-  from: {
-    transform: 'rotate(0deg)'
-  },
-  to: {
-    transform: 'rotate(360deg) '
-  }
-});
-var FormSelectLoading = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var _ref$sx = _ref.sx,
-    sx = _ref$sx === void 0 ? {} : _ref$sx,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(_ai.AiOutlineLoading3Quarters, _extends({
-    ref: forwardRef,
-    "aria-hidden": "true",
-    size: 18,
-    sx: _extends({
-      position: 'absolute',
-      right: 10,
-      pointerEvents: 'none',
-      animation: kf + " 1s infinite linear",
-      opacity: 0.5,
-      svg: {
-        fill: _Input.inputBaseText
-      }
-    }, sx)
-  }, rest));
-});
-exports.FormSelectLoading = FormSelectLoading;
+import { inputBaseText } from '../Form/Input.styles';
+
+const kf = keyframes( {
+	from: { transform: 'rotate(0deg)' },
+	to: { transform: 'rotate(360deg) ' },
+} );
+
+export const FormSelectLoading = React.forwardRef( ( { sx = {}, ...rest }, forwardRef ) => (
+	<AiOutlineLoading3Quarters
+		ref={ forwardRef }
+		aria-hidden="true"
+		size={ 18 }
+		sx={ {
+			position: 'absolute',
+			right: 10,
+			pointerEvents: 'none',
+			animation: `${ kf } 1s infinite linear`,
+			opacity: 0.5,
+			svg: {
+				fill: inputBaseText,
+			},
+			...sx,
+		} }
+		{ ...rest }
+	/>
+) );
+
 FormSelectLoading.propTypes = {
-  sx: _propTypes["default"].object
+	sx: PropTypes.object,
 };
-FormSelectLoading.displayName = 'FormSelectLoading';
+
+FormSelectLoading.displayName = 'FormSelectLoading';

package/build/system/NewForm/FormSelectSearch.d.ts

@@ -0,0 +1,2 @@
+export const FormSelectSearch: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/build/system/NewForm/FormSelectSearch.js

@@ -1,26 +1,24 @@
-"use strict";
+/** @jsxImportSource theme-ui */
 
-exports.__esModule = true;
-exports.FormSelectSearch = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _md = require("react-icons/md");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-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); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */
-var FormSelectSearch = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
-  return (0, _jsxRuntime.jsx)(_md.MdSearch, _extends({
-    ref: forwardRef,
-    "aria-hidden": "true",
-    size: 24,
-    sx: {
-      position: 'absolute',
-      paddingRight: '10px',
-      left: '10px',
-      pointerEvents: 'none'
-    }
-  }, props));
-});
-exports.FormSelectSearch = FormSelectSearch;
-FormSelectSearch.displayName = 'FormSelectSearch';
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { MdSearch } from 'react-icons/md';
+
+export const FormSelectSearch = React.forwardRef( ( props, forwardRef ) => (
+	<MdSearch
+		ref={ forwardRef }
+		aria-hidden="true"
+		size={ 24 }
+		sx={ {
+			position: 'absolute',
+			paddingRight: '10px',
+			left: '10px',
+			pointerEvents: 'none',
+		} }
+		{ ...props }
+	/>
+) );
+
+FormSelectSearch.displayName = 'FormSelectSearch';

package/build/system/NewForm/Legend.d.ts

@@ -0,0 +1,2 @@
+export const Legend: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/build/system/NewForm/Legend.js

@@ -1,46 +1,41 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Legend = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Label = require("../Form/Label");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["children", "className", "sx"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
 /**
  * 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 Legend = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$sx = _ref.sx,
-    sx = _ref$sx === void 0 ? {} : _ref$sx,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)("legend", _extends({
-    ref: forwardRef,
-    className: (0, _classnames["default"])('vip-form-legend-component', className),
-    sx: _extends({
-      all: 'unset'
-    }, _Label.baseLabelStyle, {
-      px: 1,
-      mb: 0
-    }, sx)
-  }, props, {
-    children: children
-  }));
-});
-exports.Legend = Legend;
+
+import { baseLabelStyle } from '../Form/Label';
+
+const Legend = React.forwardRef( ( { children, className, sx = {}, ...props }, forwardRef ) => (
+	<legend
+		ref={ forwardRef }
+		className={ classNames( 'vip-form-legend-component', className ) }
+		sx={ {
+			all: 'unset',
+			...baseLabelStyle,
+			px: 1,
+			mb: 0,
+			...sx,
+		} }
+		{ ...props }
+	>
+		{ children }
+	</legend>
+) );
+
 Legend.propTypes = {
-  children: _propTypes["default"].any,
-  sx: _propTypes["default"].any,
-  className: _propTypes["default"].any
+	children: PropTypes.any,
+	sx: PropTypes.any,
+	className: PropTypes.any,
 };
-Legend.displayName = 'Legend';
+
+Legend.displayName = 'Legend';
+
+export { Legend };

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

@@ -0,0 +1,12 @@
+export default Root;
+export const Root: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export const Select: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export const Autocomplete: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export const AutocompleteMulti: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+import { Textarea } from '../Form/Textarea';
+import { Input } from '../Form/Input';
+import { InputWithCopyButton } from '../Form/InputWithCopyButton';
+import { Label } from '../Form/Label';
+import { Fieldset } from './Fieldset';
+import { Legend } from './Legend';
+export { Textarea, Input, InputWithCopyButton, Label, Fieldset, Legend };

package/build/system/NewForm/index.js

@@ -1,34 +1,34 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Select = exports.Root = exports.AutocompleteMulti = exports.Autocomplete = void 0;
-var _FormSelect = require("./FormSelect");
-var _FormAutocomplete = require("./FormAutocomplete");
-var _FormAutocompleteMultiselect = require("./FormAutocompleteMultiselect");
-var _Textarea = require("../Form/Textarea");
-exports.Textarea = _Textarea.Textarea;
-var _Input = require("../Form/Input");
-exports.Input = _Input.Input;
-var _InputWithCopyButton = require("../Form/InputWithCopyButton");
-exports.InputWithCopyButton = _InputWithCopyButton.InputWithCopyButton;
-var _Form = require("./Form");
-var _Fieldset = require("./Fieldset");
-exports.Fieldset = _Fieldset.Fieldset;
-var _Legend = require("./Legend");
-exports.Legend = _Legend.Legend;
-var _Label = require("../Form/Label");
-exports.Label = _Label.Label;
 /**
  * Internal dependencies
  */
 
-var Select = _FormSelect.FormSelect;
-exports.Select = Select;
-var Autocomplete = _FormAutocomplete.FormAutocomplete;
-exports.Autocomplete = Autocomplete;
-var AutocompleteMulti = _FormAutocompleteMultiselect.FormAutocompleteMultiselect;
-exports.AutocompleteMulti = AutocompleteMulti;
-var Root = _Form.Form;
-exports.Root = Root;
-var _default = Root;
-exports["default"] = _default;
+import { FormSelect } from './FormSelect';
+import { FormAutocomplete } from './FormAutocomplete';
+import { FormAutocompleteMultiselect } from './FormAutocompleteMultiselect';
+import { Textarea } from '../Form/Textarea';
+import { Input } from '../Form/Input';
+import { InputWithCopyButton } from '../Form/InputWithCopyButton';
+import { Form } from './Form';
+import { Fieldset } from './Fieldset';
+import { Legend } from './Legend';
+import { Label } from '../Form/Label';
+
+const Select = FormSelect;
+const Autocomplete = FormAutocomplete;
+const AutocompleteMulti = FormAutocompleteMultiselect;
+const Root = Form;
+
+export {
+	Root,
+	Select,
+	Autocomplete,
+	AutocompleteMulti,
+	Textarea,
+	Input,
+	InputWithCopyButton,
+	Label,
+	Fieldset,
+	Legend,
+};
+
+export default Root;

package/build/system/Notice/Notice.d.ts

@@ -0,0 +1,18 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+export interface NoticeProps {
+    children: React.ReactNode;
+    inline?: boolean;
+    sx?: ThemeUIStyleObject;
+    title?: React.ReactNode;
+    variant?: ColorVariants;
+    headingVariant?: React.ElementType;
+    className?: string;
+}
+type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
+export declare const Notice: React.ForwardRefExoticComponent<NoticeProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/build/system/Notice/Notice.js

@@ -4,7 +4,6 @@ exports.__esModule = true;
 exports.Notice = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _md = require("react-icons/md");
 var _ = require("../");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -19,44 +18,43 @@ var _excluded = ["children", "className", "headingVariant", "inline", "sx", "tit
 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 colorSystemVariant = function colorSystemVariant(color) {
-  return {
-    warning: 'warning',
-    error: 'error',
-    alert: 'error',
-    success: 'success',
-    info: 'info'
-  }[color];
-};
 var NoticeIcon = function NoticeIcon(_ref) {
   var color = _ref.color,
     variant = _ref.variant;
-  var Icon = _md.MdWarning;
+  var sx = {
+    color: color,
+    flex: '0 0 auto'
+  };
+  var size = 20;
   switch (variant) {
     case 'info':
-      Icon = _md.MdInfo;
-      break;
+      return (0, _jsxRuntime.jsx)(_md.MdInfo, {
+        sx: sx,
+        size: size,
+        "aria-hidden": "true"
+      });
     case 'error':
-      Icon = _md.MdError;
-      break;
+      return (0, _jsxRuntime.jsx)(_md.MdError, {
+        sx: sx,
+        size: size,
+        "aria-hidden": "true"
+      });
     case 'success':
-      Icon = _md.MdCheckCircle;
-      break;
+      return (0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+        sx: sx,
+        size: size,
+        "aria-hidden": "true"
+      });
   }
-  return (0, _jsxRuntime.jsx)(Icon, {
-    sx: {
-      color: color,
-      flex: '0 0 auto'
-    },
-    size: 21,
+
+  // alert and warning will get the Warning icon
+  return (0, _jsxRuntime.jsx)(_md.MdWarning, {
+    sx: sx,
+    size: size,
     "aria-hidden": "true"
   });
 };
-NoticeIcon.propTypes = {
-  color: _propTypes["default"].string,
-  variant: _propTypes["default"].string
-};
-var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
+var Notice = exports.Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
   var children = _ref2.children,
     _ref2$className = _ref2.className,
     className = _ref2$className === void 0 ? null : _ref2$className,
@@ -70,27 +68,26 @@ var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardR
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'warning' : _ref2$variant,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  var systemVariant = colorSystemVariant(variant);
   return (0, _jsxRuntime.jsx)(_.Card, _extends({
     sx: _extends({
       boxShadow: 'none',
       borderRadius: 2,
-      bg: inline ? 'transparent' : "notice.background." + systemVariant,
+      bg: inline ? 'transparent' : "notice.background." + variant,
       padding: inline ? 0 : 3,
-      color: "notice.text." + systemVariant,
+      color: "notice.text." + variant,
       p: {
-        color: "notice.text." + systemVariant
+        color: "notice.text." + variant
       },
       a: {
-        color: "notice.link." + systemVariant + ".default",
+        color: "notice.link." + variant + ".default",
         '&:visited': {
-          color: "notice.link." + systemVariant + ".visited"
+          color: "notice.link." + variant + ".visited"
         },
         '&:active': {
-          color: "notice.link." + systemVariant + ".active"
+          color: "notice.link." + variant + ".active"
         },
         '&:hover, &:focus': {
-          color: "notice.link." + systemVariant + ".hover"
+          color: "notice.link." + variant + ".hover"
         }
       }
     }, sx),
@@ -99,24 +96,23 @@ var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardR
   }, props, {
     children: (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
-        alignItems: 'center'
+        alignItems: 'start'
       },
-      children: [(0, _jsxRuntime.jsx)(_.Flex, {
+      children: [(0, _jsxRuntime.jsx)(_.Box, {
         sx: {
-          alignItems: 'center'
+          mr: 3,
+          mt: title ? 2 : 0,
+          flexShrink: 0
         },
         children: (0, _jsxRuntime.jsx)(NoticeIcon, {
-          color: "notice.icon." + systemVariant,
+          color: "notice.icon." + variant,
           variant: variant
         })
       }), (0, _jsxRuntime.jsxs)(_.Box, {
-        sx: {
-          ml: 3
-        },
         children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
           as: headingVariant,
           sx: {
-            color: "notice.text." + systemVariant,
+            color: "notice.text." + variant,
             mb: 0,
             fontSize: 2,
             fontWeight: 'bold'
@@ -127,14 +123,4 @@ var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardR
     })
   }));
 });
-exports.Notice = Notice;
-Notice.displayName = 'Notice';
-Notice.propTypes = {
-  children: _propTypes["default"].node,
-  inline: _propTypes["default"].bool,
-  sx: _propTypes["default"].object,
-  title: _propTypes["default"].node,
-  variant: _propTypes["default"].string,
-  headingVariant: _propTypes["default"].string,
-  className: _propTypes["default"].any
-};
+Notice.displayName = 'Notice';

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

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Notice").NoticeProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/build/system/Notice/Notice.stories.js

@@ -12,12 +12,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 /**
  * Internal dependencies
  */
-var _default = {
+var _default = exports["default"] = {
   title: 'Notice',
   component: _.Notice
 };
-exports["default"] = _default;
-var Default = function Default() {
+var Default = exports.Default = function Default() {
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
     children: [(0, _jsxRuntime.jsxs)(_.Notice, {
       variant: "alert",
@@ -108,5 +107,4 @@ var Default = function Default() {
       })
     })]
   });
-};
-exports.Default = Default;
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+import { Notice } from './Notice';
+export { Notice };

package/build/system/OptionRow/OptionRow.d.ts

@@ -0,0 +1,2 @@
+export const OptionRow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';