@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Dialog/DialogContent.js

@@ -1,149 +1,154 @@
-"use strict";
-
-exports.__esModule = true;
-exports.DialogContent = void 0;
-var _framerMotion = require("framer-motion");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["position", "variant", "onClose"],
-  _excluded2 = ["variant", "position"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import { motion } from 'framer-motion';
+import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
+
 /**
  * Internal dependencies
  */
-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 DialogContent = function DialogContent(_ref) {
-  var _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'left' : _ref$position,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'dropdown' : _ref$variant,
-    onClose = _ref.onClose,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var closeDialog = function closeDialog(e) {
-    if (e.key === 27 || e.key === 'Escape') {
-      onClose();
-    }
-  };
-  (0, _react.useEffect)(function () {
-    window.document.addEventListener('keydown', closeDialog, true);
-    return function () {
-      window.document.removeEventListener('keydown', closeDialog, true);
-    };
-  }, []);
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [['modal', 'sidebar'].includes(variant) && (0, _jsxRuntime.jsx)("div", {
-      onClick: onClose,
-      sx: {
-        position: 'fixed',
-        zIndex: 100,
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        opacity: 0.7,
-        background: "linear-gradient(\n\t\t\t\t\t\t\t198.09deg,\n\t\t\t\t\t\t\t#E5F0F6 2.01%,\n\t\t\t\t\t\t\trgba(235, 238, 242, 0) 43.18%,\n\t\t\t\t\t\t\trgba(249, 234, 232, 0) 47.86%,\n\t\t\t\t\t\t\t#FFE9D1 94.31%\n\t\t\t\t\t\t),\n\t\t\t\t\t\tlinear-gradient(\n\t\t\t\t\t\t\t98.65deg,\n\t\t\t\t\t\t\t#FFE8E6 0.58%,\n\t\t\t\t\t\t\trgba(255, 233, 214, 0) 52.45%,\n\t\t\t\t\t\t\trgba(255, 233, 219, 0) 53.76%,\n\t\t\t\t\t\t\t#FFE9D1 105.86%\n\t\t\t\t\t\t), #F5F2F1"
-      }
-    }), variant === 'sidebar' ? (0, _jsxRuntime.jsx)(SidebarMotion, _extends({}, props)) : (0, _jsxRuntime.jsx)(DialogMotion, _extends({
-      position: position,
-      variant: variant
-    }, props))]
-  });
-};
-exports.DialogContent = DialogContent;
-var SidebarMotion = function SidebarMotion(props) {
-  return (0, _jsxRuntime.jsx)(_framerMotion.motion.div, _extends({}, props, {
-    initial: {
-      x: -20,
-      opacity: 0
-    },
-    animate: {
-      x: 0,
-      opacity: 1
-    },
-    exit: {
-      x: -20,
-      opacity: 0
-    },
-    transition: {
-      duration: 0.15
-    },
-    sx: {
-      marginTop: 2,
-      borderRadius: 2,
-      backgroundColor: 'dialog',
-      boxShadow: 'medium',
-      position: 'absolute',
-      top: '100%',
-      zIndex: 100,
-      padding: 0,
-      display: 'block',
-      variant: 'dialog.sidebar'
-    }
-  }));
+
+const DialogContent = ( { position = 'left', variant = 'dropdown', onClose, ...props } ) => {
+	const closeDialog = e => {
+		if ( e.key === 27 || e.key === 'Escape' ) {
+			onClose();
+		}
+	};
+
+	useEffect( () => {
+		window.document.addEventListener( 'keydown', closeDialog, true );
+
+		return () => {
+			window.document.removeEventListener( 'keydown', closeDialog, true );
+		};
+	}, [] );
+
+	return (
+		<React.Fragment>
+			{ [ 'modal', 'sidebar' ].includes( variant ) && (
+				<div
+					onClick={ onClose }
+					sx={ {
+						position: 'fixed',
+						zIndex: 100,
+						top: 0,
+						left: 0,
+						right: 0,
+						bottom: 0,
+						opacity: 0.7,
+						background: `linear-gradient(
+							198.09deg,
+							#E5F0F6 2.01%,
+							rgba(235, 238, 242, 0) 43.18%,
+							rgba(249, 234, 232, 0) 47.86%,
+							#FFE9D1 94.31%
+						),
+						linear-gradient(
+							98.65deg,
+							#FFE8E6 0.58%,
+							rgba(255, 233, 214, 0) 52.45%,
+							rgba(255, 233, 219, 0) 53.76%,
+							#FFE9D1 105.86%
+						), #F5F2F1`,
+					} }
+				/>
+			) }
+			{ variant === 'sidebar' ? (
+				<SidebarMotion { ...props } />
+			) : (
+				<DialogMotion position={ position } variant={ variant } { ...props } />
+			) }
+		</React.Fragment>
+	);
 };
-var DialogMotion = function DialogMotion(_ref2) {
-  var variant = _ref2.variant,
-    position = _ref2.position,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  var transformOrigin = 'center';
-  if (variant === 'dropdown') {
-    if (position === 'left') {
-      transformOrigin = 'top left';
-    } else {
-      transformOrigin = 'top right';
-    }
-  }
-  return (0, _jsxRuntime.jsx)(_framerMotion.motion.div, _extends({}, props, {
-    initial: {
-      scale: 0.9,
-      x: variant === 'dropdown' ? 0 : '-50%',
-      opacity: 0
-    },
-    animate: {
-      scale: 1,
-      x: variant === 'dropdown' ? 0 : '-50%',
-      opacity: 1
-    },
-    exit: {
-      scale: 0.9,
-      opacity: 0
-    },
-    transition: {
-      duration: 0.15
-    },
-    sx: {
-      marginTop: 2,
-      transformOrigin: transformOrigin,
-      borderRadius: 2,
-      backgroundColor: 'dialog',
-      boxShadow: 'low',
-      position: 'absolute',
-      top: '100%',
-      zIndex: 100,
-      left: position === 'left' ? 0 : 'auto',
-      right: position === 'left' ? 'auto' : 0,
-      padding: 0,
-      display: 'inline-block',
-      variant: "dialog." + variant,
-      overflow: 'auto',
-      maxHeight: variant === 'modal' ? '90%' : ''
-    }
-  }));
+
+const SidebarMotion = props => (
+	<motion.div
+		{ ...props }
+		initial={ {
+			x: -20,
+			opacity: 0,
+		} }
+		animate={ {
+			x: 0,
+			opacity: 1,
+		} }
+		exit={ { x: -20, opacity: 0 } }
+		transition={ { duration: 0.15 } }
+		sx={ {
+			marginTop: 2,
+			borderRadius: 2,
+			backgroundColor: 'dialog',
+			boxShadow: 'medium',
+			position: 'absolute',
+			top: '100%',
+			zIndex: 100,
+			padding: 0,
+			display: 'block',
+			variant: 'dialog.sidebar',
+		} }
+	/>
+);
+
+const DialogMotion = ( { variant, position, ...props } ) => {
+	let transformOrigin = 'center';
+
+	if ( variant === 'dropdown' ) {
+		if ( position === 'left' ) {
+			transformOrigin = 'top left';
+		} else {
+			transformOrigin = 'top right';
+		}
+	}
+
+	return (
+		<motion.div
+			{ ...props }
+			initial={ {
+				scale: 0.9,
+				x: variant === 'dropdown' ? 0 : '-50%',
+				opacity: 0,
+			} }
+			animate={ {
+				scale: 1,
+				x: variant === 'dropdown' ? 0 : '-50%',
+				opacity: 1,
+			} }
+			exit={ { scale: 0.9, opacity: 0 } }
+			transition={ { duration: 0.15 } }
+			sx={ {
+				marginTop: 2,
+				transformOrigin,
+				borderRadius: 2,
+				backgroundColor: 'dialog',
+				boxShadow: 'low',
+				position: 'absolute',
+				top: '100%',
+				zIndex: 100,
+				left: position === 'left' ? 0 : 'auto',
+				right: position === 'left' ? 'auto' : 0,
+				padding: 0,
+				display: 'inline-block',
+				variant: `dialog.${ variant }`,
+				overflow: 'auto',
+				maxHeight: variant === 'modal' ? '90%' : '',
+			} }
+		/>
+	);
 };
+
 DialogMotion.propTypes = {
-  variant: _propTypes["default"].string,
-  position: _propTypes["default"].string
+	variant: PropTypes.string,
+	position: PropTypes.string,
 };
+
 DialogContent.propTypes = {
-  position: _propTypes["default"].string,
-  variant: _propTypes["default"].string,
-  onClose: _propTypes["default"].func
-};
+	position: PropTypes.string,
+	variant: PropTypes.string,
+	onClose: PropTypes.func,
+};
+
+export { DialogContent };

package/build/system/Dialog/DialogDivider.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+export function DialogDivider(props: any): import("react").JSX.Element;

package/build/system/Dialog/DialogDivider.js

@@ -1,22 +1,11 @@
-"use strict";
-
-exports.__esModule = true;
-exports.DialogDivider = void 0;
-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); }
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
 
-var DialogDivider = function DialogDivider(props) {
-  return (0, _jsxRuntime.jsx)("div", _extends({
-    sx: {
-      height: 1,
-      backgroundColor: 'border',
-      my: 1
-    }
-  }, props));
-};
-exports.DialogDivider = DialogDivider;
+const DialogDivider = props => (
+	<div sx={ { height: 1, backgroundColor: 'border', my: 1 } } { ...props } />
+);
+
+export { DialogDivider };

package/build/system/Dialog/DialogMenu.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+export function DialogMenu(props: any): import("react").JSX.Element;

package/build/system/Dialog/DialogMenu.js

@@ -1,24 +1,11 @@
-"use strict";
-
-exports.__esModule = true;
-exports.DialogMenu = void 0;
-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); }
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
 
-var DialogMenu = function DialogMenu(props) {
-  return (0, _jsxRuntime.jsx)("ul", _extends({
-    role: "menu",
-    sx: {
-      listStyleType: 'none',
-      m: 0,
-      px: 0,
-      py: 1
-    }
-  }, props));
-};
-exports.DialogMenu = DialogMenu;
+const DialogMenu = props => (
+	<ul role="menu" sx={ { listStyleType: 'none', m: 0, px: 0, py: 1 } } { ...props } />
+);
+
+export { DialogMenu };

package/build/system/Dialog/DialogMenuItem.d.ts

@@ -0,0 +1,13 @@
+export function DialogMenuItem({ loading, children, ...props }: {
+    [x: string]: any;
+    loading?: boolean | undefined;
+    children: any;
+}): import("react").JSX.Element;
+export namespace DialogMenuItem {
+    namespace propTypes {
+        let onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let loading: PropTypes.Requireable<boolean>;
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+import PropTypes from 'prop-types';

package/build/system/Dialog/DialogMenuItem.js

@@ -1,80 +1,73 @@
-"use strict";
-
-exports.__esModule = true;
-exports.DialogMenuItem = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
-var _ = require("../");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["loading", "children"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import PropTypes from 'prop-types';
+import { useEffect, useRef } from 'react';
+
 /**
  * Internal dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var DialogMenuItem = function DialogMenuItem(_ref) {
-  var _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var itemRef = (0, _react.useRef)(null);
-  var triggerClick = function triggerClick(e) {
-    if (itemRef.current === window.document.activeElement && (e.key === 13 || e.key === 'Enter')) {
-      props.onClick();
-    }
-  };
-  (0, _react.useEffect)(function () {
-    if (props.onClick) {
-      window.document.addEventListener('keydown', triggerClick, true);
-    }
-    return function () {
-      window.document.removeEventListener('keydown', triggerClick, true);
-    };
-  }, []);
-  return (0, _jsxRuntime.jsx)("li", {
-    role: "none",
-    children: (0, _jsxRuntime.jsxs)(_.Box, _extends({
-      ref: itemRef,
-      role: "menuitem",
-      tabIndex: "0",
-      sx: {
-        listStyleType: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        textAlign: 'left',
-        m: 0,
-        color: 'heading',
-        px: 2,
-        py: 1,
-        cursor: 'pointer',
-        textDecoration: 'none',
-        '&:hover, &:focus': {
-          backgroundColor: 'hover',
-          outline: 'none'
-        }
-      }
-    }, props, {
-      children: [(0, _jsxRuntime.jsx)(_.Box, {
-        sx: {
-          flex: '1 1 auto'
-        },
-        children: children
-      }), loading && (0, _jsxRuntime.jsx)(_.Spinner, {
-        sx: {
-          width: 12
-        }
-      })]
-    }))
-  });
+import { Box, Spinner } from '../';
+
+const DialogMenuItem = ( { loading = false, children, ...props } ) => {
+	const itemRef = useRef( null );
+
+	const triggerClick = e => {
+		if (
+			itemRef.current === window.document.activeElement &&
+			( e.key === 13 || e.key === 'Enter' )
+		) {
+			props.onClick();
+		}
+	};
+
+	useEffect( () => {
+		if ( props.onClick ) {
+			window.document.addEventListener( 'keydown', triggerClick, true );
+		}
+
+		return () => {
+			window.document.removeEventListener( 'keydown', triggerClick, true );
+		};
+	}, [] );
+
+	return (
+		<li role="none">
+			<Box
+				ref={ itemRef }
+				role="menuitem"
+				tabIndex="0"
+				sx={ {
+					listStyleType: 'none',
+					display: 'flex',
+					alignItems: 'center',
+					textAlign: 'left',
+					m: 0,
+					color: 'heading',
+					px: 2,
+					py: 1,
+					cursor: 'pointer',
+					textDecoration: 'none',
+					'&:hover, &:focus': {
+						backgroundColor: 'hover',
+						outline: 'none',
+					},
+				} }
+				{ ...props }
+			>
+				<Box sx={ { flex: '1 1 auto' } }>{ children }</Box>
+				{ loading && <Spinner sx={ { width: 12 } } /> }
+			</Box>
+		</li>
+	);
 };
-exports.DialogMenuItem = DialogMenuItem;
+
 DialogMenuItem.propTypes = {
-  onClick: _propTypes["default"].func,
-  loading: _propTypes["default"].bool,
-  children: _propTypes["default"].node
-};
+	onClick: PropTypes.func,
+	loading: PropTypes.bool,
+	children: PropTypes.node,
+};
+
+export { DialogMenuItem };

package/build/system/Dialog/DialogTrigger.d.ts

@@ -0,0 +1 @@
+export function DialogTrigger(props: any): import("react").JSX.Element;

package/build/system/Dialog/DialogTrigger.js

@@ -1,17 +1,11 @@
-"use strict";
+/** @jsxImportSource theme-ui */
 
-exports.__esModule = true;
-exports.DialogTrigger = void 0;
-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); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */
-var DialogTrigger = function DialogTrigger(props) {
-  return (0, _jsxRuntime.jsx)(_.Box, _extends({
-    sx: {
-      display: 'inline'
-    }
-  }, props));
-};
-exports.DialogTrigger = DialogTrigger;
+/**
+ * Internal dependencies
+ */
+
+import { Box } from '../';
+
+const DialogTrigger = props => <Box sx={ { display: 'inline' } } { ...props } />;
+
+export { DialogTrigger };

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

@@ -0,0 +1,8 @@
+import { Dialog } from './Dialog';
+import { DialogButton } from './DialogButton';
+import { DialogDivider } from './DialogDivider';
+import { DialogTrigger } from './DialogTrigger';
+import { DialogContent } from './DialogContent';
+import { DialogMenuItem } from './DialogMenuItem';
+import { DialogMenu } from './DialogMenu';
+export { Dialog, DialogButton, DialogDivider, DialogTrigger, DialogContent, DialogMenuItem, DialogMenu };

package/build/system/Dialog/index.js

@@ -1,17 +1,20 @@
-"use strict";
+/**
+ * Internal dependencies
+ */
+import { Dialog } from './Dialog';
+import { DialogContent } from './DialogContent';
+import { DialogTrigger } from './DialogTrigger';
+import { DialogMenu } from './DialogMenu';
+import { DialogMenuItem } from './DialogMenuItem';
+import { DialogDivider } from './DialogDivider';
+import { DialogButton } from './DialogButton';
 
-exports.__esModule = true;
-var _Dialog = require("./Dialog");
-exports.Dialog = _Dialog.Dialog;
-var _DialogContent = require("./DialogContent");
-exports.DialogContent = _DialogContent.DialogContent;
-var _DialogTrigger = require("./DialogTrigger");
-exports.DialogTrigger = _DialogTrigger.DialogTrigger;
-var _DialogMenu = require("./DialogMenu");
-exports.DialogMenu = _DialogMenu.DialogMenu;
-var _DialogMenuItem = require("./DialogMenuItem");
-exports.DialogMenuItem = _DialogMenuItem.DialogMenuItem;
-var _DialogDivider = require("./DialogDivider");
-exports.DialogDivider = _DialogDivider.DialogDivider;
-var _DialogButton = require("./DialogButton");
-exports.DialogButton = _DialogButton.DialogButton;
+export {
+	Dialog,
+	DialogButton,
+	DialogDivider,
+	DialogTrigger,
+	DialogContent,
+	DialogMenuItem,
+	DialogMenu,
+};

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

@@ -0,0 +1,37 @@
+export function Dropdown({ 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;
+}): React.JSX.Element;
+export namespace Dropdown {
+    namespace propTypes {
+        let trigger: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let open: PropTypes.Requireable<boolean>;
+        let defaultOpen: PropTypes.Requireable<boolean>;
+        let onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let modal: PropTypes.Requireable<boolean>;
+        let dir: PropTypes.Requireable<string>;
+        let contentProps: PropTypes.Requireable<any>;
+        let portalProps: PropTypes.Requireable<any>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+export const DropdownTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export const DropdownRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export const DropdownItemIndicator: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export const DropdownLabel: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+export const DropdownSeparator: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export const DropdownSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export const DropdownSubTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export const DropdownSubContent: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';