@automattic/vip-design-system 1.3.3 → 1.5.0

package/.storybook/decorators/withBoundingBox.tsx

@@ -27,7 +27,7 @@ export default makeDecorator( {
 						font-style: normal;
 					}
 					body {
-						backgroundcolor: '#fbfbfb';
+						background-color: #fbfbfb;
 					}
 				` }
 			/>

package/.storybook/preview.tsx

@@ -21,6 +21,9 @@ export const parameters = {
 				<Stories />
 			</>
 		),
+		canvas: {
+			sourceState: 'shown',
+		},
 	},
 	options: {
 		storySort: {

package/README.md

@@ -4,9 +4,6 @@
 
 This is the main repository to store Design system tokens and components used throughout VIP projects.
 
-- [React Components Website](https://vip-design-system-components.netlify.app/)
-- [Figma Productive Components](https://www.figma.com/file/jcGe2KIAlh2PxaAZ5liYWi/Productive-Components?type=design&node-id=7378-4230&mode=design&t=QUgpLoxTpJvAfTiN-0)
-
 ## Further documentation
 
 - [SETUP.md](https://github.com/Automattic/vip-design-system/blob/trunk/docs/SETUP.md) for installation and setup instructions, basic usage and environmental variables.
@@ -17,8 +14,9 @@ This is the main repository to store Design system tokens and components used th
 
 ## Health, logs and monitoring
 
-- TBD
+- [React Components Website](https://vip-design-system-components.netlify.app/)
+- [Figma Productive Components](https://www.figma.com/file/jcGe2KIAlh2PxaAZ5liYWi/Productive-Components?type=design&node-id=7378-4230&mode=design&t=QUgpLoxTpJvAfTiN-0)
 
 ## Links to historical documents
 
-- TBD
+For VIP folks: Please see internal documentation on vip-design-system regarding historical documents (search for vip-design-system).

package/build/system/Accordion/Accordion.d.ts

@@ -1,9 +1,6 @@
 /** @jsxImportSource theme-ui */
-/**
- * External dependencies
- */
-import React, { ReactNode } from 'react';
 import { Argument } from 'classnames';
+import React, { ReactNode } from 'react';
 import { ThemeUIStyleObject } from 'theme-ui';
 import { HeadingProps } from '../Heading/Heading';
 interface AccordionItemProps {

package/build/system/Accordion/Accordion.js

@@ -2,11 +2,11 @@
 
 exports.__esModule = true;
 exports.TriggerWithIcon = exports.Trigger = exports.Root = exports.Item = exports.Content = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _md = require("react-icons/md");
+var _react = require("@emotion/react");
 var AccordionPrimitive = _interopRequireWildcard(require("@radix-ui/react-accordion"));
-var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = _interopRequireDefault(require("react"));
+var _md = require("react-icons/md");
 var _Heading = require("../Heading");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["children"],
@@ -21,12 +21,12 @@ var _excluded = ["children"],
 /**
  * Internal dependencies
  */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _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 slideDown = (0, _react2.keyframes)({
+var slideDown = (0, _react.keyframes)({
   from: {
     height: 0
   },
@@ -34,7 +34,7 @@ var slideDown = (0, _react2.keyframes)({
     height: 'var(--radix-accordion-content-height)'
   }
 });
-var slideUp = (0, _react2.keyframes)({
+var slideUp = (0, _react.keyframes)({
   from: {
     height: 'var(--radix-accordion-content-height)'
   },
@@ -71,7 +71,7 @@ var Item = exports.Item = function Item(_ref) {
   }));
 };
 Item.displayName = 'Accordion.Item';
-var Trigger = exports.Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardedRef) {
+var Trigger = exports.Trigger = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, forwardedRef) {
   var children = _ref2.children,
     _ref2$headingVariant = _ref2.headingVariant,
     headingVariant = _ref2$headingVariant === void 0 ? 'h3' : _ref2$headingVariant,
@@ -131,7 +131,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react["default"].forwardRef(functi
   });
 });
 Trigger.displayName = 'Accordion.Trigger';
-var TriggerWithIcon = exports.TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardedRef) {
+var TriggerWithIcon = exports.TriggerWithIcon = /*#__PURE__*/_react2["default"].forwardRef(function (_ref3, forwardedRef) {
   var children = _ref3.children,
     icon = _ref3.icon,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
@@ -155,7 +155,7 @@ var TriggerWithIcon = exports.TriggerWithIcon = /*#__PURE__*/_react["default"].f
   }));
 });
 TriggerWithIcon.displayName = 'Accordion.TriggerWithIcon';
-var Content = exports.Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, forwardedRef) {
+var Content = exports.Content = /*#__PURE__*/_react2["default"].forwardRef(function (_ref4, forwardedRef) {
   var children = _ref4.children,
     _ref4$sx = _ref4.sx,
     sx = _ref4$sx === void 0 ? {} : _ref4$sx,
@@ -181,7 +181,7 @@ var Content = exports.Content = /*#__PURE__*/_react["default"].forwardRef(functi
   }));
 });
 Content.displayName = 'Accordion.Content';
-var Root = exports.Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref5, forwardRef) {
+var Root = exports.Root = /*#__PURE__*/_react2["default"].forwardRef(function (_ref5, forwardRef) {
   var _ref5$sx = _ref5.sx,
     sx = _ref5$sx === void 0 ? {} : _ref5$sx,
     children = _ref5.children,

package/build/system/Accordion/Accordion.stories.js

@@ -2,8 +2,8 @@
 
 exports.__esModule = true;
 exports["default"] = exports.WithLargeText = exports.Default = void 0;
-var _ri = require("react-icons/ri");
 var _bi = require("react-icons/bi");
+var _ri = require("react-icons/ri");
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 /** @jsxImportSource theme-ui */

package/build/system/Avatar/Avatar.d.ts

@@ -1,12 +1,16 @@
 /// <reference types="react" />
-import { ImageProps } from 'theme-ui';
+/**
+ * External dependencies
+ */
 import { Argument } from 'classnames';
+import { ImageProps, ThemeUIStyleObject } from 'theme-ui';
 export interface AvatarProps {
     isVIP?: boolean;
     size?: number;
     src?: string;
     name?: string;
     className?: Argument;
+    sx?: ThemeUIStyleObject;
 }
 type AvatarImageProps = AvatarProps & ImageProps;
 export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/build/system/Avatar/Avatar.js

@@ -2,12 +2,12 @@
 
 exports.__esModule = true;
 exports.Avatar = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _themeUi = require("theme-ui");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["isVIP", "name", "size", "src", "className"];
+var _excluded = ["isVIP", "name", "size", "src", "className", "sx"];
 /**
  * External dependencies
  */
@@ -25,16 +25,19 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     size = _ref$size === void 0 ? 32 : _ref$size,
     src = _ref.src,
     className = _ref.className,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_.Box, _extends({
-    sx: {
+    sx: _extends({
       borderRadius: '100%',
       height: size + 2,
       // +2 to compensate padding on both sides
       width: size + 2,
       // +2 to compensate padding on both sides
-      border: '2px solid',
-      borderColor: isVIP ? 'primary' : 'transparent',
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      borderColor: isVIP || isVIP === undefined ? 'primary' : 'transparent',
       overflow: 'hidden',
       backgroundColor: 'primary',
       display: 'inline-flex',
@@ -44,7 +47,7 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
       padding: '1px',
       // this should probably be replaced with a token
       textAlign: 'center'
-    },
+    }, sx),
     className: (0, _classnames["default"])('vip-avatar-component', className),
     "aria-hidden": "true",
     ref: ref

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

@@ -2,11 +2,11 @@
 /**
  * External dependencies
  */
+import { Avatar } from '..';
 import type { StoryObj } from '@storybook/react';
 /**
  * Internal dependencies
  */
-import { Avatar } from '..';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Omit<import("./Avatar").AvatarProps & import("theme-ui").ImageProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/build/system/Badge/Badge.js

@@ -2,8 +2,8 @@
 
 exports.__esModule = true;
 exports.Badge = void 0;
-var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["variant", "sx", "className"];

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

@@ -2,11 +2,11 @@
 /**
  * External dependencies
  */
+import { Badge } from '..';
 import type { StoryObj } from '@storybook/react';
 /**
  * Internal dependencies
  */
-import { Badge } from '..';
 declare const _default: {
     component: import("react").ForwardRefExoticComponent<import("./Badge").BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
     title: string;

package/build/system/Badge/Badge.stories.js

@@ -6,9 +6,10 @@ var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 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); } /**
                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                     */ /**
-                                                                                                                                                                                                                                                                                                                                                         * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                         */
+                                                                                                                                                                                                                                                                                                                                                     */
+/**
+ * Internal dependencies
+ */
 var _default = exports["default"] = {
   component: _.Badge,
   title: 'Badge'

package/build/system/Box/Box.js

@@ -2,8 +2,8 @@
 
 exports.__esModule = true;
 exports.Box = void 0;
-var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _themeUi = require("theme-ui");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

@@ -2,11 +2,11 @@
 /**
  * External dependencies
  */
+import { Box } from '..';
 import type { StoryObj } from '@storybook/react';
 /**
  * Internal dependencies
  */
-import { Box } from '..';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("theme-ui").BoxProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Button/Button.d.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import React from 'react';
 import { ButtonProps as ThemeButtonProps } from 'theme-ui';
 type ButtonClickType = React.MouseEvent<HTMLButtonElement, MouseEvent>;

package/build/system/Button/Button.js

@@ -2,17 +2,17 @@
 
 exports.__esModule = true;
 exports.ButtonVariant = exports.Button = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _themeUi = require("theme-ui");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["className", "disabled", "onClick", "sx"];
 /**
  * External dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _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 ButtonVariant = exports.ButtonVariant = /*#__PURE__*/function (ButtonVariant) {

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

@@ -3,6 +3,9 @@
  * External dependencies
  */
 import React from 'react';
+/**
+ * Internal dependencies
+ */
 import { ButtonVariant } from '..';
 declare const _default: {
     title: string;

package/build/system/Button/Button.stories.js

@@ -4,8 +4,8 @@ exports.__esModule = true;
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _bi = require("react-icons/bi");
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 var _ = require("..");
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 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 */ /**

package/build/system/Button/ButtonSubmit.d.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import React from 'react';
 import { ButtonProps } from './Button';
 interface DefaultSpinnerProps {

package/build/system/Button/ButtonSubmit.js

@@ -2,10 +2,10 @@
 
 exports.__esModule = true;
 exports.ButtonSubmit = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _Button = require("./Button");
 var _Spinner = require("../Spinner");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["show", "variant", "label", "loading", "disabled", "loadingIcon", "loadingIconSize"];
 /**
@@ -53,7 +53,7 @@ var ButtonSubmit = exports.ButtonSubmit = /*#__PURE__*/_react["default"].forward
     variant: variant,
     "aria-busy": loading
   }, rest, {
-    children: [label, ' ', !!loading && loadingIcon({
+    children: [label, ' ', Boolean(loading) && loadingIcon({
       size: loadingIconSize,
       color: "button." + variant + ".label.default"
     })]

package/build/system/Button/ButtonSubmit.stories.d.ts

@@ -2,11 +2,11 @@
  * External dependencies
  */
 import React from 'react';
+import { ButtonSubmit } from '..';
 import type { StoryObj } from '@storybook/react';
 /**
  * Internal dependencies
  */
-import { ButtonSubmit } from '..';
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<import("./ButtonSubmit").ButtonSubmitProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/build/system/Card/Card.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+/**
+ * External dependencies
+ */
 import { Argument } from 'classnames';
 import { BoxProps } from 'theme-ui';
 export interface CardProps {

package/build/system/Card/Card.js

@@ -2,9 +2,9 @@
 
 exports.__esModule = true;
 exports.Card = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _ = require("..");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["variant", "sx", "className"];
 /**

package/build/system/Code/Code.d.ts

@@ -2,8 +2,8 @@
 /**
  * External dependencies
  */
-import React, { ReactNode } from 'react';
 import { Argument } from 'classnames';
+import React, { ReactNode } from 'react';
 export interface CodeProps {
     prompt?: boolean;
     showCopy?: boolean;

package/build/system/Code/Code.js

@@ -2,8 +2,8 @@
 
 exports.__esModule = true;
 exports.Code = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
 var _md = require("react-icons/md");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["prompt", "showCopy", "onCopy", "className"];
@@ -11,9 +11,9 @@ var _excluded = ["prompt", "showCopy", "onCopy", "className"];
 /**
  * External dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _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 Code = exports.Code = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {

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

@@ -2,11 +2,11 @@
  * External dependencies
  */
 import React from 'react';
+import { Code } from '..';
 import type { StoryObj } from '@storybook/react';
 /**
  * Internal dependencies
  */
-import { Code } from '..';
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./Code").CodeProps & React.RefAttributes<HTMLDivElement>>;

package/build/system/Dialog/index.js

@@ -2,12 +2,12 @@
  * Internal dependencies
  */
 import { Dialog } from './Dialog';
+import { DialogButton } from './DialogButton';
 import { DialogContent } from './DialogContent';
-import { DialogTrigger } from './DialogTrigger';
+import { DialogDivider } from './DialogDivider';
 import { DialogMenu } from './DialogMenu';
 import { DialogMenuItem } from './DialogMenuItem';
-import { DialogDivider } from './DialogDivider';
-import { DialogButton } from './DialogButton';
+import { DialogTrigger } from './DialogTrigger';
 
 export {
 	Dialog,

package/build/system/Dropdown/Dropdown.js

@@ -3,10 +3,10 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 /**
  * Internal dependencies

package/build/system/Dropdown/Dropdown.stories.jsx

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { DotFilledIcon, CheckIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import React from 'react';
 
 /**
 /**
@@ -11,8 +11,8 @@ import { DotFilledIcon, CheckIcon, ChevronRightIcon } from '@radix-ui/react-icon
 
 import * as Dropdown from '.';
 import { Button } from '../Button';
-import * as NewDialog from '../NewDialog';
 import { Link } from '../Link';
+import * as NewDialog from '../NewDialog';
 import { Text } from '../Text';
 
 export default {

package/build/system/Dropdown/DropdownContent.js

@@ -3,10 +3,10 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 export const styles = {
 	minWidth: 220,

package/build/system/Dropdown/DropdownItem.js

@@ -3,10 +3,10 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 export const styles = {
 	unset: 'all',

package/build/system/Dropdown/DropdownLabel.js

@@ -3,10 +3,10 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 export const styles = {
 	paddingLeft: 3,

package/build/system/Dropdown/DropdownSeparator.js

@@ -3,10 +3,10 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 export const styles = {
 	height: '1px',

package/build/system/Dropdown/index.js

@@ -9,17 +9,15 @@ import {
 	DropdownItemIndicator,
 	DropdownSub,
 } from './Dropdown';
-
+import { DropdownSubContent, DropdownContent } from './DropdownContent';
 import {
 	DropdownItem,
 	DropdownCheckboxItem,
 	DropdownRadioItem,
 	DropdownSubTrigger,
 } from './DropdownItem';
-
-import { DropdownSeparator } from './DropdownSeparator';
-import { DropdownSubContent, DropdownContent } from './DropdownContent';
 import { DropdownLabel } from './DropdownLabel';
+import { DropdownSeparator } from './DropdownSeparator';
 
 const Root = Dropdown;
 const Content = DropdownContent;

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

@@ -3,9 +3,9 @@
 exports.__esModule = true;
 exports["default"] = exports.Default = void 0;
 var _react = require("react");
-var _ = require("..");
 var _Checkbox = require("./Checkbox");
 var _Label = require("./Label");
+var _ = require("..");
 var _Flex = require("../Flex");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**

package/build/system/Form/Input.js

@@ -3,9 +3,9 @@
 exports.__esModule = true;
 exports.Input = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _ = require("../");
 var _themeUi = require("theme-ui");
 var _Input = require("./Input.styles");
+var _ = require("../");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["label", "forLabel", "hasError", "required", "sx", "errorMessage"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/build/system/Form/InputWithCopyButton.js

@@ -3,16 +3,16 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { MdContentCopy } from 'react-icons/md';
+import { Input as ThemeInput } from 'theme-ui';
 
 /**
  * Internal dependencies
  */
-import { Button, Validation, Label } from '..';
-import { Input as ThemeInput } from 'theme-ui';
 import { baseControlStyle } from './Input.styles';
+import { Button, Validation, Label } from '..';
 
 const inputStyles = {
 	unset: 'all',

package/build/system/Form/InputWithCopyButton.stories.jsx

@@ -3,9 +3,10 @@
 /**
  * Internal dependencies
  */
-import { Form, Notice } from '..';
 import { useState } from 'react';
 
+import { Form, Notice } from '..';
+
 export default {
 	title: 'Form/InputWithCopyButton',
 };