@automattic/vip-design-system 0.18.0 → 0.18.4-0

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,111 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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,
+      _ref$open = _ref.open,
+      open = _ref$open === void 0 ? undefined : _ref$open,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      _ref$onOpenChange = _ref.onOpenChange,
+      onOpenChange = _ref$onOpenChange === void 0 ? undefined : _ref$onOpenChange,
+      _ref$modal = _ref.modal,
+      modal = _ref$modal === void 0 ? true : _ref$modal,
+      _ref$dir = _ref.dir,
+      dir = _ref$dir === void 0 ? 'ltr' : _ref$dir,
+      _ref$contentProps = _ref.contentProps,
+      contentProps = _ref$contentProps === void 0 ? {} : _ref$contentProps,
+      _ref$portalProps = _ref.portalProps,
+      portalProps = _ref$portalProps === void 0 ? {} : _ref$portalProps;
+
+  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, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    modal: modal,
+    dir: dir,
+    children: [(0, _jsxRuntime.jsx)(DropdownTrigger, {
+      asChild: true,
+      children: trigger
+    }), (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Portal, (0, _extends2["default"])({}, portalProps, {
+      children: firstChild === 'DropdownContent' ? children : (0, _jsxRuntime.jsxs)(_DropdownContent.DropdownContent, (0, _extends2["default"])({}, contentProps, {
+        children: [children, (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.Arrow, {
+          sx: {
+            fill: 'background',
+            boxShadow: 'high'
+          }
+        })]
+      }))
+    }))]
+  });
+};
+
+exports.Dropdown = Dropdown;
+Dropdown.propTypes = {
+  trigger: _propTypes["default"].node.isRequired,
+  children: _propTypes["default"].node.isRequired,
+  // Props in root: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#root
+  open: _propTypes["default"].bool,
+  defaultOpen: _propTypes["default"].bool,
+  onOpenChange: _propTypes["default"].func,
+  modal: _propTypes["default"].bool,
+  dir: _propTypes["default"].string,
+  // Content props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#content
+  contentProps: _propTypes["default"].any,
+  // Portal props in: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#portal
+  portalProps: _propTypes["default"].any
+}; // Exports

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

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.WithDialog = exports.Default = exports.ComplexOptions = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIcons = require("@radix-ui/react-icons");
+
+var Dropdown = _interopRequireWildcard(require("."));
+
+var _Button = require("../Button");
+
+var NewDialog = _interopRequireWildcard(require("../NewDialog"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["onConfirm"];
+
+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; }
+
+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 WithDialog = function WithDialog() {
+  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 AreYouSureDialog = function AreYouSureDialog(_ref) {
+    var onConfirm = _ref.onConfirm,
+        props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+    return (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, props, {
+      content: (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(0, _jsxRuntime.jsx)(_Button.Button, {
+          variant: "secondary",
+          onClick: function onClick() {
+            return onConfirm();
+          },
+          children: "Custom Close."
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: "Teste abc."
+        })]
+      })
+    }));
+  };
+
+  return (0, _jsxRuntime.jsxs)("div", {
+    children: [(0, _jsxRuntime.jsx)("p", {
+      children: "This is an important example when combining the Dropdown component with the NewDialog component. In order to have the correct accessibility, there are some events you need to use. Use this example if you want to copy and paste the code."
+    }), (0, _jsxRuntime.jsxs)(Dropdown.Root, {
+      modal: !alertOpen,
+      open: menuOpen,
+      onOpenChange: setMenuOpen,
+      contentProps: {
+        sideOffset: 5
+      },
+      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
+        children: "Open"
+      }),
+      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
+        children: "I don't do anything"
+      }), (0, _jsxRuntime.jsx)(AreYouSureDialog, {
+        title: "Are you in the jungle?",
+        description: "sha-n-n-n-n-n-n-n-n knees, knees",
+        open: alertOpen,
+        onOpenChange: setAlertOpen,
+        onConfirm: function onConfirm() {
+          setAlertOpen(false);
+          setMenuOpen(false);
+        },
+        trigger: (0, _jsxRuntime.jsx)(Dropdown.Item, {
+          onSelect: function onSelect(event) {
+            return event.preventDefault();
+          },
+          children: "Open Dialog"
+        })
+      })]
+    })]
+  });
+};
+
+exports.WithDialog = WithDialog;

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';