@automattic/vip-design-system 2.5.0 → 2.6.1

package/build/system/Dropdown/DropdownItem.js

@@ -1,108 +1,91 @@
+"use strict";
+
+exports.__esModule = true;
+exports.styles = exports.DropdownSubTrigger = exports.DropdownRadioItem = exports.DropdownItem = exports.DropdownCheckboxItem = void 0;
+var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["className"],
+  _excluded2 = ["className"],
+  _excluded3 = ["className"],
+  _excluded4 = ["className"];
 /** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-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',
-	cursor: 'pointer',
-	display: 'flex',
-	alignItems: 'center',
-	flexDirection: 'row',
-	textAlign: 'left',
-	height: 25,
-	textDecoration: 'none',
-	position: 'relative',
-	m: 0,
-	color: 'heading',
-	px: 2,
-	paddingLeft: 3,
-	py: 1,
-	'&:hover, &:focus': {
-		backgroundColor: 'hover',
-		textDecoration: 'none',
-	},
-
-	'&[data-disabled]': {
-		color: 'muted',
-		pointerEvents: 'none',
-	},
-
-	'&[data-highlighted]': {
-		backgroundColor: 'hover',
-		color: 'link',
-	},
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 styles = exports.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: 3,
+  py: 1,
+  '&:hover, &:focus': {
+    backgroundColor: 'hover',
+    textDecoration: 'none'
+  },
+  '&[data-disabled]': {
+    color: 'muted',
+    pointerEvents: 'none'
+  },
+  '&[data-highlighted]': {
+    backgroundColor: 'hover',
+    color: 'link'
+  }
 };
-
-export const DropdownItem = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.DropdownMenuItem
-		className={ classNames( 'vip-dropdown-menu-item', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
+var DropdownItem = exports.DropdownItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuItem, _extends({
+    className: (0, _classnames["default"])('vip-dropdown-menu-item', className),
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
 DropdownItem.displayName = 'DropdownItem';
-
-DropdownItem.propTypes = {
-	className: PropTypes.string,
-};
-
-export const DropdownCheckboxItem = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.CheckboxItem
-		className={ classNames( 'vip-dropdown-checkbox-item', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
+var DropdownCheckboxItem = exports.DropdownCheckboxItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
+  var className = _ref2.className,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.CheckboxItem, _extends({
+    className: (0, _classnames["default"])('vip-dropdown-checkbox-item', className),
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
 DropdownCheckboxItem.displayName = 'DropdownCheckboxItem';
-
-DropdownCheckboxItem.propTypes = {
-	className: PropTypes.string,
-};
-
-export const DropdownRadioItem = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.RadioItem
-		className={ classNames( 'vip-dropdown-radio-item', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
+var DropdownRadioItem = exports.DropdownRadioItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardRef) {
+  var className = _ref3.className,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.RadioItem, _extends({
+    className: (0, _classnames["default"])('vip-dropdown-radio-item', className),
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
 DropdownRadioItem.displayName = 'DropdownRadioItem';
-
-DropdownRadioItem.propTypes = {
-	className: PropTypes.string,
-};
-
-export const DropdownSubTrigger = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.SubTrigger
-		className={ classNames( 'vip-dropdown-sub-trigger', className ) }
-		ref={ forwardRef }
-		sx={ {
-			...styles,
-			...{
-				'&[data-state="open"]': {
-					background: 'highlight',
-					color: 'primary',
-				},
-			},
-		} }
-		{ ...props }
-	/>
-) );
-
-DropdownSubTrigger.displayName = 'DropdownSubTrigger';
-
-DropdownSubTrigger.propTypes = {
-	className: PropTypes.string,
-};
+var DropdownSubTrigger = exports.DropdownSubTrigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, forwardRef) {
+  var className = _ref4.className,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.SubTrigger, _extends({
+    className: (0, _classnames["default"])('vip-dropdown-sub-trigger', className),
+    ref: forwardRef,
+    sx: _extends({}, styles, {
+      '&[data-state="open"]': {
+        background: 'highlight',
+        color: 'primary'
+      }
+    })
+  }, props));
+});
+DropdownSubTrigger.displayName = 'DropdownSubTrigger';

package/build/system/Dropdown/DropdownLabel.d.ts

@@ -1,8 +1,12 @@
-export namespace styles {
-    let paddingLeft: number;
-    let fontSize: number;
-    let lineHeight: string;
-    let color: string;
-}
-export const DropdownLabel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/** @jsxImportSource theme-ui */
 import React from 'react';
+export interface DropdownLabelProps {
+    className?: string;
+}
+export declare const styles: {
+    paddingLeft: number;
+    fontSize: number;
+    lineHeight: string;
+    color: string;
+};
+export declare const DropdownLabel: React.ForwardRefExoticComponent<DropdownLabelProps & React.RefAttributes<HTMLDivElement>>;

package/build/system/Dropdown/DropdownLabel.js

@@ -1,31 +1,31 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-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,
-	fontSize: 12,
-	lineHeight: '25px',
-	color: 'muted',
-};
+"use strict";
 
-export const DropdownLabel = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.DropdownMenuLabel
-		className={ classNames( 'vip-dropdown-menu-label', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
-DropdownLabel.displayName = 'DropdownLabel';
-
-DropdownLabel.propTypes = {
-	className: PropTypes.string,
+exports.__esModule = true;
+exports.styles = exports.DropdownLabel = void 0;
+var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["className"];
+/** @jsxImportSource theme-ui */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 styles = exports.styles = {
+  paddingLeft: 3,
+  fontSize: 12,
+  lineHeight: '25px',
+  color: 'muted'
 };
+var DropdownLabel = exports.DropdownLabel = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuLabel, _extends({
+    className: (0, _classnames["default"])('vip-dropdown-menu-label', className),
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
+DropdownLabel.displayName = 'DropdownLabel';

package/build/system/Dropdown/DropdownSeparator.d.ts

@@ -1,7 +1,11 @@
-export namespace styles {
-    let height: string;
-    let backgroundColor: string;
-    let my: string;
-}
-export const DropdownSeparator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/** @jsxImportSource theme-ui */
 import React from 'react';
+export interface DropdownSeparatorProps {
+    className?: string;
+}
+export declare const styles: {
+    height: string;
+    backgroundColor: string;
+    my: string;
+};
+export declare const DropdownSeparator: React.ForwardRefExoticComponent<DropdownSeparatorProps & React.RefAttributes<HTMLDivElement>>;

package/build/system/Dropdown/DropdownSeparator.js

@@ -1,30 +1,30 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-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',
-	backgroundColor: 'borders.2',
-	my: '5px',
-};
+"use strict";
 
-export const DropdownSeparator = React.forwardRef( ( { className, ...props }, forwardRef ) => (
-	<DropdownMenuPrimitive.DropdownMenuSeparator
-		className={ classNames( 'vip-dropdown-menu-separator', className ) }
-		ref={ forwardRef }
-		sx={ styles }
-		{ ...props }
-	/>
-) );
-
-DropdownSeparator.displayName = 'DropdownSeparator';
-
-DropdownSeparator.propTypes = {
-	className: PropTypes.string,
+exports.__esModule = true;
+exports.styles = exports.DropdownSeparator = void 0;
+var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["className"];
+/** @jsxImportSource theme-ui */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 styles = exports.styles = {
+  height: '1px',
+  backgroundColor: 'borders.2',
+  my: '5px'
 };
+var DropdownSeparator = exports.DropdownSeparator = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(DropdownMenuPrimitive.DropdownMenuSeparator, _extends({
+    className: (0, _classnames["default"])('vip-dropdown-menu-separator', className),
+    ref: forwardRef,
+    sx: styles
+  }, props));
+});
+DropdownSeparator.displayName = 'DropdownSeparator';

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

@@ -1,40 +1,18 @@
-export default Dropdown;
-export const Root: {
-    ({ trigger, children, open, defaultOpen, onOpenChange, modal, dir, contentProps, portalProps, className, }: {
-        trigger: any;
-        children: any;
-        open?: undefined;
-        defaultOpen?: boolean | undefined;
-        onOpenChange?: undefined;
-        modal?: boolean | undefined;
-        dir?: string | undefined;
-        contentProps?: {} | undefined;
-        portalProps?: {} | undefined;
-        className: any;
-    }): import("react").JSX.Element;
-    propTypes: {
-        trigger: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
-        children: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
-        open: import("prop-types").Requireable<boolean>;
-        defaultOpen: import("prop-types").Requireable<boolean>;
-        onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;
-        modal: import("prop-types").Requireable<boolean>;
-        dir: import("prop-types").Requireable<string>;
-        contentProps: import("prop-types").Requireable<any>;
-        portalProps: import("prop-types").Requireable<any>;
-        className: import("prop-types").Requireable<string>;
-    };
-};
-export const Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export const Content: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const Item: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const CheckboxItem: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const RadioGroup: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export const RadioItem: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const ItemIndicator: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
-export const Label: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const Sub: import("react").FC<import("@radix-ui/react-dropdown-menu").DropdownMenuSubProps>;
-export const SubTrigger: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const SubContent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
 import { Dropdown } from './Dropdown';
+declare const Root: import("react").FC<import("./Dropdown").DropdownProps>;
+declare const Content: import("react").ForwardRefExoticComponent<import("./DropdownContent").DropdownContentProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Item: import("react").ForwardRefExoticComponent<import("./DropdownItem").DropdownItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const CheckboxItem: import("react").ForwardRefExoticComponent<import("./DropdownItem").DropdownCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const RadioGroup: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const RadioItem: import("react").ForwardRefExoticComponent<import("./DropdownItem").DropdownRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ItemIndicator: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Label: import("react").ForwardRefExoticComponent<import("./DropdownLabel").DropdownLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Separator: import("react").ForwardRefExoticComponent<import("./DropdownSeparator").DropdownSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Sub: import("react").FC<import("@radix-ui/react-dropdown-menu").DropdownMenuSubProps>;
+declare const SubTrigger: import("react").ForwardRefExoticComponent<import("./DropdownItem").DropdownSubTriggerItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SubContent: import("react").ForwardRefExoticComponent<import("./DropdownContent").DropdownContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Root, Trigger, Content, Item, CheckboxItem, RadioGroup, RadioItem, ItemIndicator, Label, Separator, Sub, SubTrigger, SubContent, };
+export default Dropdown;

package/build/system/Dropdown/index.js

@@ -1,52 +1,25 @@
-/** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
-import {
-	Dropdown,
-	DropdownTrigger,
-	DropdownRadioGroup,
-	DropdownItemIndicator,
-	DropdownSub,
-} from './Dropdown';
-import { DropdownSubContent, DropdownContent } from './DropdownContent';
-import {
-	DropdownItem,
-	DropdownCheckboxItem,
-	DropdownRadioItem,
-	DropdownSubTrigger,
-} from './DropdownItem';
-import { DropdownLabel } from './DropdownLabel';
-import { DropdownSeparator } from './DropdownSeparator';
-
-const Root = Dropdown;
-const Content = DropdownContent;
-const Trigger = DropdownTrigger;
-const Item = DropdownItem;
-const CheckboxItem = DropdownCheckboxItem;
-const RadioGroup = DropdownRadioGroup;
-const RadioItem = DropdownRadioItem;
-const ItemIndicator = DropdownItemIndicator;
-const Label = DropdownLabel;
-const Separator = DropdownSeparator;
-const Sub = DropdownSub;
-const SubTrigger = DropdownSubTrigger;
-const SubContent = DropdownSubContent;
+"use strict";
 
-export {
-	Root,
-	Trigger,
-	Content,
-	Item,
-	CheckboxItem,
-	RadioGroup,
-	RadioItem,
-	ItemIndicator,
-	Label,
-	Separator,
-	Sub,
-	SubTrigger,
-	SubContent,
-};
+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 _DropdownContent = require("./DropdownContent");
+var _DropdownItem = require("./DropdownItem");
+var _DropdownLabel = require("./DropdownLabel");
+var _DropdownSeparator = require("./DropdownSeparator");
+/** @jsxImportSource theme-ui */
 
-export default Dropdown;
+var Root = exports.Root = _Dropdown.Dropdown;
+var Content = exports.Content = _DropdownContent.DropdownContent;
+var Trigger = exports.Trigger = _Dropdown.DropdownTrigger;
+var Item = exports.Item = _DropdownItem.DropdownItem;
+var CheckboxItem = exports.CheckboxItem = _DropdownItem.DropdownCheckboxItem;
+var RadioGroup = exports.RadioGroup = _Dropdown.DropdownRadioGroup;
+var RadioItem = exports.RadioItem = _DropdownItem.DropdownRadioItem;
+var ItemIndicator = exports.ItemIndicator = _Dropdown.DropdownItemIndicator;
+var Label = exports.Label = _DropdownLabel.DropdownLabel;
+var Separator = exports.Separator = _DropdownSeparator.DropdownSeparator;
+var Sub = exports.Sub = _Dropdown.DropdownSub;
+var SubTrigger = exports.SubTrigger = _DropdownItem.DropdownSubTrigger;
+var SubContent = exports.SubContent = _DropdownContent.DropdownSubContent;
+var _default = exports["default"] = _Dropdown.Dropdown;

package/build/system/FilterDropdown/FilterDropdown.d.ts

@@ -0,0 +1,27 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { DropdownCheckboxItemProps } from '../Dropdown/DropdownItem';
+export type FilterDropdownCheckItemProps = DropdownCheckboxItemProps & {
+    checked: boolean;
+    item: {
+        label: string;
+        size?: number | string;
+    };
+    onClick: () => void;
+};
+export type FilterDropDownFilterProp = {
+    label: string;
+    size?: number | string;
+    value?: number | string;
+};
+export interface FilterDropdownFiltersProp {
+    [key: string]: FilterDropDownFilterProp;
+}
+export type FilterDropdownProps = {
+    className?: string;
+    filters: FilterDropdownFiltersProp;
+    label?: React.ReactNode | string;
+    onSelect: (filter: FilterDropDownFilterProp, key: string) => void;
+    defaultValue?: string | null;
+};
+export declare const FilterDropdown: ({ className, filters, label, onSelect, defaultValue, }: FilterDropdownProps) => React.JSX.Element;

package/build/system/FilterDropdown/FilterDropdown.js

@@ -0,0 +1,75 @@
+"use strict";
+
+exports.__esModule = true;
+exports.FilterDropdown = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _i18nCalypso = require("i18n-calypso");
+var _react = _interopRequireWildcard(require("react"));
+var _md = require("react-icons/md");
+var _Button = require("../Button");
+var Dropdown = _interopRequireWildcard(require("../Dropdown"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/** @jsxImportSource theme-ui */
+
+var FilterDropdownCheckItem = function FilterDropdownCheckItem(_ref) {
+  var checked = _ref.checked,
+    item = _ref.item,
+    onClick = _ref.onClick;
+  return (0, _jsxRuntime.jsxs)(Dropdown.CheckboxItem, {
+    checked: checked,
+    onClick: onClick,
+    children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
+      children: (0, _jsxRuntime.jsx)(_md.MdCheck, {
+        size: 14,
+        sx: {
+          mr: 2
+        },
+        fill: "brand"
+      })
+    }), item.label, " ", item != null && item.size ? "(" + (item == null ? void 0 : item.size) + ")" : null]
+  });
+};
+var FilterDropdown = exports.FilterDropdown = function FilterDropdown(_ref2) {
+  var className = _ref2.className,
+    filters = _ref2.filters,
+    label = _ref2.label,
+    onSelect = _ref2.onSelect,
+    _ref2$defaultValue = _ref2.defaultValue,
+    defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
+  var translate = (0, _i18nCalypso.useTranslate)();
+  var filterKeys = Object.keys(filters);
+  var firstFilter = filterKeys[0];
+  var _useState = (0, _react.useState)(defaultValue || firstFilter),
+    filter = _useState[0],
+    setFilter = _useState[1];
+  return (0, _jsxRuntime.jsx)(Dropdown.Root, {
+    trigger: (0, _jsxRuntime.jsxs)(_Button.Button, {
+      className: (0, _classnames["default"])('vip-filter-dropdown-trigger', className),
+      variant: "secondary",
+      children: [(0, _jsxRuntime.jsxs)(_ScreenReaderText["default"], {
+        children: [translate('Filter:'), " "]
+      }), label, (0, _jsxRuntime.jsxs)("strong", {
+        sx: {
+          mx: 2
+        },
+        children: [" ", filters[filter].label, " "]
+      }), (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: translate('checked')
+      }), (0, _jsxRuntime.jsx)(_md.MdKeyboardArrowDown, {})]
+    }),
+    children: filterKeys.map(function (key) {
+      return (0, _jsxRuntime.jsx)(FilterDropdownCheckItem, {
+        checked: filter === key,
+        onClick: function onClick() {
+          setFilter(key);
+          onSelect(filters[key], key);
+        },
+        item: filters[key]
+      }, key);
+    })
+  });
+};

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

@@ -0,0 +1,18 @@
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+import { FilterDropdown } from './FilterDropdown';
+import type { StoryObj } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: ({ className, filters, label, onSelect, defaultValue, }: import("./FilterDropdown").FilterDropdownProps) => import("react").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+type Story = StoryObj<typeof FilterDropdown>;
+export declare const Default: Story;