@automattic/vip-design-system 0.17.0 → 0.18.2-0

package/.storybook/main.js

@@ -6,5 +6,6 @@ module.exports = {
 		'@storybook/addon-essentials',
 		'@storybook/addon-links',
 		'@storybook/addon-controls',
+		'@storybook/addon-storysource',
 	],
 };

package/build/system/Dialog/Dialog.stories.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  * Internal dependencies
  */
 var _default = {
-  title: 'Dialog',
+  title: 'Dialog (Deprecated)',
   component: _.Dialog
 };
 exports["default"] = _default;

package/build/system/Dropdown/Dropdown.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.DropdownTrigger = exports.DropdownSubTrigger = exports.DropdownSubContent = exports.DropdownSub = exports.DropdownSeparator = exports.DropdownRadioGroup = exports.DropdownLabel = exports.DropdownItemIndicator = exports.Dropdown = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DropdownContent = require("./DropdownContent");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownTrigger = DropdownMenuPrimitive.Trigger;
+exports.DropdownTrigger = DropdownTrigger;
+var DropdownRadioGroup = DropdownMenuPrimitive.RadioGroup;
+exports.DropdownRadioGroup = DropdownRadioGroup;
+var DropdownItemIndicator = DropdownMenuPrimitive.DropdownMenuItemIndicator;
+exports.DropdownItemIndicator = DropdownItemIndicator;
+var DropdownLabel = DropdownMenuPrimitive.DropdownMenuLabel;
+exports.DropdownLabel = DropdownLabel;
+var DropdownSeparator = DropdownMenuPrimitive.DropdownMenuSeparator;
+exports.DropdownSeparator = DropdownSeparator;
+var DropdownSub = DropdownMenuPrimitive.DropdownMenuSub;
+exports.DropdownSub = DropdownSub;
+var DropdownSubTrigger = DropdownMenuPrimitive.DropdownMenuSubTrigger;
+exports.DropdownSubTrigger = DropdownSubTrigger;
+var DropdownSubContent = DropdownMenuPrimitive.DropdownMenuSubContent;
+exports.DropdownSubContent = DropdownSubContent;
+
+var Dropdown = function Dropdown(_ref) {
+  var trigger = _ref.trigger,
+      children = _ref.children;
+
+  var firstChild = _react["default"].useMemo(function () {
+    var _React$Children$only, _React$Children$only$;
+
+    return /*#__PURE__*/_react["default"].isValidElement(children) ? (_React$Children$only = _react["default"].Children.only(children)) == null ? void 0 : (_React$Children$only$ = _React$Children$only.type) == null ? void 0 : _React$Children$only$.displayName : '';
+  }, [children]);
+
+  return (0, _jsxRuntime.jsxs)(DropdownMenu, {
+    children: [(0, _jsxRuntime.jsx)(DropdownTrigger, {
+      asChild: true,
+      children: trigger
+    }), (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Portal, {
+      children: firstChild === 'DropdownContent' ? children : (0, _jsxRuntime.jsxs)(_DropdownContent.DropdownContent, {
+        children: [children, (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Arrow, {
+          sx: {
+            fill: 'white'
+          }
+        })]
+      })
+    })]
+  });
+};
+
+exports.Dropdown = Dropdown;
+Dropdown.propTypes = {
+  trigger: _propTypes["default"].node.isRequired,
+  children: _propTypes["default"].node.isRequired
+}; // Exports

package/build/system/Dropdown/Dropdown.stories.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.WithDialogState = exports.Default = exports.ComplexOptions = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIcons = require("@radix-ui/react-icons");
+
+var Dropdown = _interopRequireWildcard(require("."));
+
+var _Button = require("../Button");
+
+var _NewConfirmationDialog = require("../NewConfirmationDialog");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ /**
+* Internal dependencies
+*/
+var _default = {
+  title: 'Dropdown',
+  component: Dropdown.Root
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)(Dropdown.Root, {
+      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
+        children: "Open"
+      }),
+      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
+        children: "All"
+      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
+        children: "Completed"
+      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
+        children: "Running"
+      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
+        children: "Cancelled"
+      }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Item, {
+        children: "Errored"
+      })]
+    }), (0, _jsxRuntime.jsxs)("p", {
+      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)("a", {
+        href: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: "Dropdown Documentation page."
+      })]
+    })]
+  });
+};
+
+exports.Default = Default;
+
+var ComplexOptions = function ComplexOptions() {
+  var _React$useState = _react["default"].useState(true),
+      bookmarksChecked = _React$useState[0],
+      setBookmarksChecked = _React$useState[1];
+
+  var _React$useState2 = _react["default"].useState(false),
+      urlsChecked = _React$useState2[0],
+      setUrlsChecked = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState('pedro'),
+      person = _React$useState3[0],
+      setPerson = _React$useState3[1];
+
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)(Dropdown.Root, {
+      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
+        children: "See options"
+      }),
+      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
+        children: "New Tab"
+      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
+        children: "New Window"
+      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
+        disabled: true,
+        children: "New Private Window"
+      }), (0, _jsxRuntime.jsxs)(Dropdown.Sub, {
+        children: [(0, _jsxRuntime.jsxs)(Dropdown.SubTrigger, {
+          children: ["More Tools", (0, _jsxRuntime.jsx)(_reactIcons.ChevronRightIcon, {})]
+        }), (0, _jsxRuntime.jsxs)(Dropdown.SubContent, {
+          sideOffset: 2,
+          alignOffset: -5,
+          children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
+            children: "Save Page As\u2026"
+          }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
+            children: "Create Shortcut\u2026"
+          }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
+            children: "Name Window\u2026"
+          }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Item, {
+            children: "Developer Tools"
+          })]
+        })]
+      }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsxs)(Dropdown.CheckboxItem, {
+        checked: bookmarksChecked,
+        onCheckedChange: setBookmarksChecked,
+        children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
+          children: (0, _jsxRuntime.jsx)(_reactIcons.CheckIcon, {})
+        }), "Show Bookmarks"]
+      }), (0, _jsxRuntime.jsxs)(Dropdown.CheckboxItem, {
+        checked: urlsChecked,
+        onCheckedChange: setUrlsChecked,
+        children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
+          children: (0, _jsxRuntime.jsx)(_reactIcons.CheckIcon, {})
+        }), "Show Full URLs"]
+      }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Label, {
+        children: "People"
+      }), (0, _jsxRuntime.jsxs)(Dropdown.RadioGroup, {
+        value: person,
+        onValueChange: setPerson,
+        children: [(0, _jsxRuntime.jsxs)(Dropdown.RadioItem, {
+          value: "pedro",
+          children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
+            children: (0, _jsxRuntime.jsx)(_reactIcons.DotFilledIcon, {})
+          }), "Pedro Duarte"]
+        }), (0, _jsxRuntime.jsxs)(Dropdown.RadioItem, {
+          value: "colm",
+          children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
+            children: (0, _jsxRuntime.jsx)(_reactIcons.DotFilledIcon, {})
+          }), "Colm Tuite"]
+        })]
+      })]
+    }), (0, _jsxRuntime.jsxs)("p", {
+      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)("a", {
+        href: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: "Dropdown Documentation page."
+      })]
+    })]
+  });
+};
+
+exports.ComplexOptions = ComplexOptions;
+
+var WithDialogState = function WithDialogState() {
+  var _React$useState4 = _react["default"].useState(false),
+      alertOpen = _React$useState4[0],
+      setAlertOpen = _React$useState4[1];
+
+  var _React$useState5 = _react["default"].useState(false),
+      menuOpen = _React$useState5[0],
+      setMenuOpen = _React$useState5[1];
+
+  var triggerRef = _react["default"].useRef();
+
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)("p", {
+      children: "In this example, you can see how to trigger a Dialog from the Dropdown and still keep the focus back to the dropdown once the Dialog is closed. This example is important to keep accessibility."
+    }), (0, _jsxRuntime.jsx)(Dropdown.Root, {
+      open: menuOpen,
+      onOpenChange: setMenuOpen,
+      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
+        ref: triggerRef,
+        children: "Open"
+      }),
+      children: (0, _jsxRuntime.jsxs)(Dropdown.Content, {
+        hidden: alertOpen,
+        children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
+          children: "Copy"
+        }), (0, _jsxRuntime.jsx)(_NewConfirmationDialog.NewConfirmationDialog, {
+          title: 'Are you sure?',
+          description: 'Please confirm that',
+          body: "Bla bleh.",
+          needsConfirm: true,
+          open: alertOpen,
+          onOpenChange: setAlertOpen,
+          onConfirm: function onConfirm() {
+            setMenuOpen(false);
+            triggerRef.current.focus();
+          },
+          trigger: (0, _jsxRuntime.jsx)(Dropdown.Item, {
+            onSelect: function onSelect(event) {
+              return event.preventDefault();
+            },
+            children: "Click here"
+          })
+        })]
+      })
+    })]
+  });
+};
+
+exports.WithDialogState = WithDialogState;

package/build/system/Dropdown/Dropdown.test.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var Dropdown = _interopRequireWildcard(require("."));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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; }
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var defaultProps = {
+  trigger: (0, _jsxRuntime.jsx)("button", {
+    children: "Trigger"
+  })
+};
+
+var getButton = function getButton() {
+  return _react.screen.getByRole('button', {
+    name: 'Trigger'
+  });
+};
+
+describe('<Dropdown />', function () {
+  it('renders the Dropdown component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(Dropdown.Root, (0, _extends2["default"])({}, defaultProps, {
+              children: (0, _jsxRuntime.jsx)(Dropdown.Item, {
+                children: "My Item"
+              })
+            }))), container = _render.container;
+            expect(getButton()).toBeInTheDocument();
+
+            _react.fireEvent.click(getButton()); // Check for accessibility issues
+
+
+            _context.t0 = expect;
+            _context.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context.t1 = _context.sent;
+            _context.next = 9;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/Dropdown/DropdownContent.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.styles = exports.DropdownSubContent = exports.DropdownContent = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+var styles = {
+  minWidth: 220,
+  borderRadius: 6,
+  backgroundColor: 'background',
+  boxShadow: 'high',
+  px: 2,
+  py: 1
+};
+exports.styles = styles;
+
+var DropdownContent = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuContent, (0, _extends2["default"])({
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
+
+exports.DropdownContent = DropdownContent;
+DropdownContent.displayName = 'DropdownContent';
+
+var DropdownSubContent = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Portal, {
+    children: (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuSubContent, (0, _extends2["default"])({
+      ref: forwardRef,
+      sx: styles
+    }, props))
+  });
+});
+
+exports.DropdownSubContent = DropdownSubContent;
+DropdownSubContent.displayName = 'DropdownSubContent';

package/build/system/Dropdown/DropdownItem.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.styles = exports.DropdownSubTrigger = exports.DropdownRadioItem = exports.DropdownItem = exports.DropdownCheckboxItem = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+var styles = {
+  unset: 'all',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'row',
+  textAlign: 'left',
+  height: 25,
+  textDecoration: 'none',
+  position: 'relative',
+  m: 0,
+  color: 'heading',
+  px: 2,
+  paddingLeft: 10,
+  py: 1,
+  '&:hover, &:focus': {
+    backgroundColor: 'hover'
+  },
+  '&[data-disabled]': {
+    color: 'muted',
+    pointerEvents: 'none'
+  },
+  '&[data-highlighted]': {
+    backgroundColor: 'hover',
+    color: 'primary'
+  }
+};
+exports.styles = styles;
+
+var DropdownItem = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuItem, (0, _extends2["default"])({
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
+
+exports.DropdownItem = DropdownItem;
+DropdownItem.displayName = 'DropdownItem';
+
+var DropdownCheckboxItem = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.CheckboxItem, (0, _extends2["default"])({
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
+
+exports.DropdownCheckboxItem = DropdownCheckboxItem;
+DropdownCheckboxItem.displayName = 'DropdownCheckboxItem';
+
+var DropdownRadioItem = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.RadioItem, (0, _extends2["default"])({
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
+
+exports.DropdownRadioItem = DropdownRadioItem;
+DropdownRadioItem.displayName = 'DropdownRadioItem';
+
+var DropdownSubTrigger = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.SubTrigger, (0, _extends2["default"])({
+    ref: forwardRef,
+    sx: (0, _extends2["default"])({}, styles, {
+      '&[data-state="open"]': {
+        background: 'highlight',
+        color: 'primary'
+      }
+    })
+  }, props));
+});
+
+exports.DropdownSubTrigger = DropdownSubTrigger;
+DropdownSubTrigger.displayName = 'DropdownSubTrigger';

package/build/system/Dropdown/DropdownLabel.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.styles = exports.DropdownLabel = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+var styles = {
+  paddingLeft: 10,
+  fontSize: 12,
+  lineHeight: '25px',
+  color: 'muted'
+};
+exports.styles = styles;
+
+var DropdownLabel = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuLabel, (0, _extends2["default"])({
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
+
+exports.DropdownLabel = DropdownLabel;
+DropdownLabel.displayName = 'DropdownLabel';

package/build/system/Dropdown/DropdownSeparator.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.styles = exports.DropdownSeparator = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+var styles = {
+  height: '1px',
+  backgroundColor: 'border',
+  my: '5px'
+};
+exports.styles = styles;
+
+var DropdownSeparator = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuSeparator, (0, _extends2["default"])({
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
+
+exports.DropdownSeparator = DropdownSeparator;
+DropdownSeparator.displayName = 'DropdownSeparator';

package/build/system/Dropdown/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Trigger = exports.SubTrigger = exports.SubContent = exports.Sub = exports.Separator = exports.Root = exports.RadioItem = exports.RadioGroup = exports.Label = exports.ItemIndicator = exports.Item = exports.Content = exports.CheckboxItem = void 0;
+
+var _Dropdown = require("./Dropdown");
+
+var _DropdownItem = require("./DropdownItem");
+
+var _DropdownSeparator = require("./DropdownSeparator");
+
+var _DropdownContent = require("./DropdownContent");
+
+var _DropdownLabel = require("./DropdownLabel");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+var Root = _Dropdown.Dropdown;
+exports.Root = Root;
+var Content = _DropdownContent.DropdownContent;
+exports.Content = Content;
+var Trigger = _Dropdown.DropdownTrigger;
+exports.Trigger = Trigger;
+var Item = _DropdownItem.DropdownItem;
+exports.Item = Item;
+var CheckboxItem = _DropdownItem.DropdownCheckboxItem;
+exports.CheckboxItem = CheckboxItem;
+var RadioGroup = _Dropdown.DropdownRadioGroup;
+exports.RadioGroup = RadioGroup;
+var RadioItem = _DropdownItem.DropdownRadioItem;
+exports.RadioItem = RadioItem;
+var ItemIndicator = _Dropdown.DropdownItemIndicator;
+exports.ItemIndicator = ItemIndicator;
+var Label = _DropdownLabel.DropdownLabel;
+exports.Label = Label;
+var Separator = _DropdownSeparator.DropdownSeparator;
+exports.Separator = Separator;
+var Sub = _Dropdown.DropdownSub;
+exports.Sub = Sub;
+var SubTrigger = _DropdownItem.DropdownSubTrigger;
+exports.SubTrigger = SubTrigger;
+var SubContent = _DropdownContent.DropdownSubContent;
+exports.SubContent = SubContent;
+var _default = _Dropdown.Dropdown;
+exports["default"] = _default;

package/build/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -114,7 +114,7 @@ NewConfirmationDialog.propTypes = {
   needsConfirm: _propTypes["default"].bool,
   trigger: _propTypes["default"].node,
   onConfirm: _propTypes["default"].func,
-  title: _propTypes["default"].node,
+  title: _propTypes["default"].node.isRequired,
   body: _propTypes["default"].node,
   label: _propTypes["default"].node
 };