@medusajs/ui 0.0.0-alpha-20230713141422

package/build/cjs/utils/clx.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+function clx(...args) {
+  return tailwindMerge.twMerge(clsx(...args));
+}
+
+exports.clx = clx;

package/build/esm/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,129 @@
+import * as Primitives from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { Heading } from '../heading/heading.js';
+import { Button } from '../button/button.js';
+import { labelVariants } from '../label/label.js';
+
+const Root = Primitives.Root;
+Root.displayName = "AlertDialog.Root";
+const Trigger = Primitives.Trigger;
+Trigger.displayName = "AlertDialog.Trigger";
+const Portal = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Primitives.AlertDialogPortal, Object.assign({
+    className: clx(className)
+  }, props));
+};
+Portal.displayName = "AlertDialog.Portal";
+const Overlay = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Overlay, Object.assign({
+    ref: ref,
+    className: clx("bg-ui-bg-overlay fixed inset-0 z-50 backdrop-blur-sm",
+    // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", // Re-enable when Admin UI has been cleaned up
+    className)
+  }, props));
+});
+Overlay.displayName = "AlertDialog.Overlay";
+const Title = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Title, Object.assign({
+    ref: ref,
+    className: clx(className)
+  }, props, {
+    asChild: true
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: "h2"
+  }, children));
+});
+Title.displayName = "AlertDialog.Title";
+const Content = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Overlay, null), /*#__PURE__*/React.createElement(Primitives.Content, Object.assign({
+    ref: ref,
+    className: clx("bg-ui-bg-base shadow-elevation-flyout fixed left-[50%] top-[50%] z-50 flex w-full max-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg border focus:outline-none",
+    // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] duration-200",  // Re-enable when Admin UI has been cleaned up
+    className)
+  }, props)));
+});
+Content.displayName = "AlertDialog.Content";
+const Description = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Description, Object.assign({
+    ref: ref,
+    className: clx("text-subtle", labelVariants({
+      size: "base"
+    }), className)
+  }, props));
+});
+Description.displayName = "AlertDialog.Description";
+const Action = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Action, Object.assign({
+    ref: ref,
+    className: clx("", className)
+  }, props, {
+    asChild: true
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "danger"
+  }, children));
+});
+Action.displayName = "AlertDialog.Action";
+const Cancel = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Cancel, Object.assign({
+    ref: ref,
+    className: clx(className)
+  }, props, {
+    asChild: true
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary"
+  }, children));
+});
+Cancel.displayName = "AlertDialog.Cancel";
+const Header = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: clx("flex flex-col gap-y-1 px-6 pt-6", className)
+  }, props));
+};
+const Footer = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: clx("flex items-center justify-end gap-x-2 p-6", className)
+  }, props));
+};
+const AlertDialog = Object.assign(Root, {
+  Trigger,
+  Content,
+  Title,
+  Description,
+  Action,
+  Cancel,
+  Header,
+  Footer
+});
+
+export { AlertDialog };

package/build/esm/components/avatar/avatar.js

@@ -0,0 +1,75 @@
+import * as Primitives from '@radix-ui/react-avatar';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { labelVariants } from '../label/label.js';
+
+const avatarVariants = cva("border-ui-border-strong flex shrink-0 items-center justify-center overflow-hidden border", {
+  variants: {
+    variant: {
+      squared: "rounded-lg",
+      rounded: "rounded-full"
+    },
+    size: {
+      base: "h-8 w-8",
+      large: "h-10 w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "rounded",
+    size: "base"
+  }
+});
+const innerVariants = cva("aspect-square object-cover object-center", {
+  variants: {
+    variant: {
+      squared: "rounded-lg",
+      rounded: "rounded-full"
+    },
+    size: {
+      base: clx(labelVariants({
+        size: "small",
+        weight: "plus"
+      }), "h-6 w-6"),
+      large: clx(labelVariants({
+        size: "base",
+        weight: "plus"
+      }), "h-8 w-8")
+    }
+  },
+  defaultVariants: {
+    variant: "rounded",
+    size: "base"
+  }
+});
+const Avatar = /*#__PURE__*/React.forwardRef(({
+  src,
+  fallback,
+  variant = "rounded",
+  size = "base",
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Root, Object.assign({
+    ref: ref
+  }, props, {
+    className: clx(avatarVariants({
+      variant,
+      size
+    }), className)
+  }), src && /*#__PURE__*/React.createElement(Primitives.Image, {
+    src: src,
+    className: innerVariants({
+      variant,
+      size
+    })
+  }), /*#__PURE__*/React.createElement(Primitives.Fallback, {
+    className: clx(innerVariants({
+      variant,
+      size
+    }), "bg-ui-bg-component text-ui-fg-subtle pointer-events-none flex select-none items-center justify-center")
+  }, fallback));
+});
+Avatar.displayName = "Avatar";
+
+export { Avatar };

package/build/esm/components/badge/badge.js

@@ -0,0 +1,77 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { labelVariants } from '../label/label.js';
+
+const badgeVariants = cva("inline-flex items-center gap-x-0.5 border", {
+  variants: {
+    type: {
+      default: "rounded-md",
+      rounded: "rounded-full",
+      icon: "rounded-md"
+    },
+    size: {
+      sm: clx("px-1.5", labelVariants({
+        size: "xsmall",
+        weight: "plus"
+      })),
+      md: clx("px-2 py-0.5", labelVariants({
+        size: "small",
+        weight: "plus"
+      })),
+      lg: clx("px-2.5 py-1", labelVariants({
+        size: "base",
+        weight: "plus"
+      }))
+    },
+    color: {
+      green: "bg-ui-tag-green-bg text-ui-tag-green-text [&_svg]:text-ui-tag-green-icon border-ui-tag-green-border",
+      red: "bg-ui-tag-red-bg text-ui-tag-red-text [&_svg]:text-ui-tag-red-icon border-ui-tag-red-border",
+      blue: "bg-ui-tag-blue-bg text-ui-tag-blue-text [&_svg]:text-ui-tag-blue-icon border-ui-tag-blue-border",
+      orange: "bg-ui-tag-orange-bg text-ui-tag-orange-text [&_svg]:text-ui-tag-orange-icon border-ui-tag-orange-border",
+      grey: "bg-ui-tag-neutral-bg text-ui-tag-neutral-text [&_svg]:text-ui-tag-neutral-icon border-ui-tag-neutral-border",
+      purple: "bg-ui-tag-purple-bg text-ui-tag-purple-text [&_svg]:text-ui-tag-purple-icon border-ui-tag-purple-border"
+    }
+  },
+  compoundVariants: [{
+    type: "icon",
+    size: "lg",
+    className: "p-1"
+  }, {
+    type: "icon",
+    size: "md",
+    className: "p-0.5"
+  }, {
+    type: "icon",
+    size: "sm",
+    className: "p-0.5" // Icon does not get any smaller than `md`
+  }],
+
+  defaultVariants: {
+    size: "md",
+    type: "default",
+    color: "grey"
+  }
+});
+const Badge = /*#__PURE__*/React.forwardRef(({
+  className,
+  size,
+  type,
+  color,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot : "span";
+  return /*#__PURE__*/React.createElement(Component, Object.assign({
+    ref: ref,
+    className: clx(badgeVariants({
+      size,
+      type,
+      color
+    }), className)
+  }, props));
+});
+Badge.displayName = "Badge";
+
+export { Badge };

package/build/esm/components/button/button.js

@@ -0,0 +1,83 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { labelVariants } from '../label/label.js';
+
+const buttonVariants = cva("disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled relative inline-flex w-fit items-center overflow-hidden rounded-lg border outline-none transition-all after:absolute after:inset-0 after:content-[''] disabled:!shadow-none", {
+  variants: {
+    variant: {
+      primary: "shadow-buttons-primary text-ui-fg-on-inverted border-ui-border-loud bg-ui-button-inverted after:button-inverted-gradient hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient focus:shadow-buttons-primary-focus",
+      secondary: "shadow-buttons-secondary text-ui-fg-base border-ui-border-loud-muted bg-ui-button-neutral after:button-neutral-gradient hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient focus:shadow-buttons-secondary-focus bg-clip-padding",
+      transparent: "text-ui-fg-base border-ui-border-loud-transparent bg-ui-button-transparent hover:bg-ui-button-transparent-hover hover:border-ui-border-loud-muted active:bg-ui-button-transparent-pressed active:border-ui-border-base focus:shadow-borders-focus focus:bg-ui-bg-base focus:border-ui-border-base",
+      danger: "shadow-buttons-danger text-ui-fg-on-inverted border-ui-border-danger bg-ui-button-danger after:button-danger-gradient hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient focus:shadow-buttons-danger-focus"
+    },
+    size: {
+      sm: clx("gap-x-0.5 px-[7px] py-[1px]", labelVariants({
+        size: "xsmall",
+        weight: "plus"
+      })),
+      md: clx("gap-x-1.5 px-[11px] py-[5px]", labelVariants({
+        size: "small",
+        weight: "plus"
+      })),
+      lg: clx("gap-x-2 px-[15px] py-[9px]", labelVariants({
+        size: "base",
+        weight: "plus"
+      })),
+      xl: clx("gap-x-2 px-[19px] py-[13px]", labelVariants({
+        size: "large",
+        weight: "plus"
+      }))
+    },
+    format: {
+      default: "",
+      icon: ""
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+    format: "default"
+  },
+  compoundVariants: [{
+    size: "sm",
+    format: "icon",
+    className: "px-px py-px"
+  }, {
+    size: "md",
+    format: "icon",
+    className: "px-[5px] py-[5px]"
+  }, {
+    size: "lg",
+    format: "icon",
+    className: "px-[9px] py-[9px]"
+  }, {
+    size: "xl",
+    format: "icon",
+    className: "px-[13px] py-[13px]"
+  }]
+});
+const Button = /*#__PURE__*/React.forwardRef(({
+  size,
+  variant,
+  format,
+  className,
+  asChild = false,
+  children,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot : "button";
+  return /*#__PURE__*/React.createElement(Component, Object.assign({
+    ref: ref
+  }, props, {
+    className: clx(buttonVariants({
+      variant,
+      size,
+      format
+    }), className)
+  }), children);
+});
+Button.displayName = "Button";
+
+export { Button };

package/build/esm/components/checkbox/checkbox.js

@@ -0,0 +1,23 @@
+import { MinusMini, CheckMini } from '@medusajs/icons';
+import * as Primitives from '@radix-ui/react-checkbox';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+
+const Checkbox = /*#__PURE__*/React.forwardRef(({
+  className,
+  checked,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Root, Object.assign({}, props, {
+    ref: ref,
+    checked: checked,
+    className: clx("group relative inline-flex h-5 w-5 items-center justify-center outline-none ", className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "text-ui-fg-on-color bg-ui-bg-base shadow-borders-base-w-shadow group-hover:shadow-borders-strong-w-shadow group-focus:!shadow-borders-interactive-w-focus group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive [&_path]:shadow-details-contrast-on-bg-interactive group-disabled:text-ui-fg-disabled group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base h-[14px] w-[14px] rounded-[3px] transition-all"
+  }, /*#__PURE__*/React.createElement(Primitives.Indicator, {
+    className: "absolute inset-0"
+  }, checked === "indeterminate" ? /*#__PURE__*/React.createElement(MinusMini, null) : /*#__PURE__*/React.createElement(CheckMini, null))));
+});
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/build/esm/components/container/container.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+
+const Container = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref,
+    className: clx("shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-8 pb-8 pt-6", className)
+  }, props));
+});
+Container.displayName = "Container";
+
+export { Container };

package/build/esm/components/drawer/drawer.js

@@ -0,0 +1,114 @@
+import { XMark } from '@medusajs/icons';
+import * as Primitives from '@radix-ui/react-dialog';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { Badge } from '../badge/badge.js';
+import { Text } from '../text/text.js';
+import { Button } from '../button/button.js';
+import { Heading } from '../heading/heading.js';
+
+const Root = Primitives.Root;
+Root.displayName = "Drawer.Root";
+const Trigger = Primitives.Trigger;
+Trigger.displayName = "Drawer.Trigger";
+const Close = Primitives.Close;
+Close.displayName = "Drawer.Close";
+const Portal = Primitives.Portal;
+Portal.displayName = "Drawer.Portal";
+const Overlay = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Overlay, Object.assign({
+    ref: ref,
+    className: clx("fixed inset-0 z-50", className)
+  }, props));
+});
+Overlay.displayName = "Drawer.Overlay";
+const Content = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Overlay, null), /*#__PURE__*/React.createElement(Primitives.Content, Object.assign({
+    ref: ref,
+    className: clx("bg-ui-bg-base shadow-elevation-modal fixed inset-y-2 right-2 z-50 flex w-full max-w-[560px] flex-1 flex-col rounded-lg border focus:outline-none",
+    // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-1/2 data-[state=open]:slide-in-from-right-1/2 duration-200",  // Re-enable when Admin UI has been cleaned up
+    className)
+  }, props)));
+});
+Content.displayName = "Drawer.Content";
+const Header = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: "border-ui-border-base flex items-start justify-between gap-x-4 border-b px-8 py-6"
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: clx("flex flex-col gap-y-1", className)
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-x-2"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    size: "sm",
+    color: "grey"
+  }, "esc"), /*#__PURE__*/React.createElement(Close, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "transparent",
+    size: "sm",
+    format: "icon"
+  }, /*#__PURE__*/React.createElement(XMark, null)))));
+};
+Header.displayName = "Drawer.Header";
+const Body = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: clx("flex-1 px-8 pb-16 pt-6", className)
+  }, props));
+};
+Body.displayName = "Drawer.Body";
+const Footer = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: clx("border-ui-border-base flex items-center justify-end space-x-2 overflow-y-scroll border-t px-8 pb-6 pt-4", className)
+  }, props));
+};
+Footer.displayName = "Drawer.Footer";
+const Title = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.Title, Object.assign({
+  ref: ref,
+  className: clx(className),
+  asChild: true
+}, props), /*#__PURE__*/React.createElement(Heading, {
+  level: "h1"
+}, children)));
+Title.displayName = "Drawer.Title";
+const Description = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.Description, Object.assign({
+  ref: ref,
+  className: clx(className),
+  asChild: true
+}, props), /*#__PURE__*/React.createElement(Text, null, children)));
+Description.displayName = "Drawer.Description";
+const Drawer = Object.assign(Root, {
+  Body,
+  Close,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  Trigger
+});
+
+export { Drawer };

package/build/esm/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,146 @@
+import { ChevronRightMini, CheckMini, EllipseMiniSolid } from '@medusajs/icons';
+import * as Primitives from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { labelVariants } from '../label/label.js';
+
+const Root = Primitives.Root;
+Root.displayName = "DropdownMenu.Root";
+const Trigger = Primitives.Trigger;
+Trigger.displayName = "DropdownMenu.Trigger";
+const Group = Primitives.Group;
+Group.displayName = "DropdownMenu.Group";
+const SubMenu = Primitives.Sub;
+SubMenu.displayName = "DropdownMenu.SubMenu";
+const RadioGroup = Primitives.RadioGroup;
+RadioGroup.displayName = "DropdownMenu.RadioGroup";
+const SubMenuTrigger = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.SubTrigger, Object.assign({
+  ref: ref,
+  className: clx("focus:bg-ui-bg-base-pressed data-[state=open]:bg-ui-bg-base-pressed flex cursor-default select-none items-center rounded-sm px-3 py-2 outline-none", labelVariants({
+    size: "small"
+  }), className)
+}, props), children, /*#__PURE__*/React.createElement(ChevronRightMini, {
+  className: "ml-auto"
+})));
+SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger";
+const SubMenuContent = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.Portal, null, /*#__PURE__*/React.createElement(Primitives.SubContent, Object.assign({
+  ref: ref,
+  className: clx("bg-ui-bg-base text-ui-fg-base data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-elevation-flyout z-50 min-w-[8rem] overflow-hidden rounded-lg border p-1", className)
+}, props))));
+SubMenuContent.displayName = "DropdownMenu.SubMenuContent";
+const Content = /*#__PURE__*/React.forwardRef(({
+  className,
+  sideOffset = 4,
+  align = "start",
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.Portal, null, /*#__PURE__*/React.createElement(Primitives.Content, Object.assign({
+  ref: ref,
+  sideOffset: sideOffset,
+  align: align,
+  className: clx("bg-ui-bg-base text-ui-fg-base data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-elevation-flyout z-50 min-w-[300px] overflow-hidden rounded-lg p-1", className)
+}, props))));
+Content.displayName = "DropdownMenu.Content";
+const Item = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.Item, Object.assign({
+  ref: ref,
+  className: clx("bg-ui-bg-base focus:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled relative flex cursor-default select-none items-center rounded-md px-3 py-2 outline-none transition-colors data-[disabled]:pointer-events-none", labelVariants({
+    size: "small"
+  }), className)
+}, props)));
+Item.displayName = "DropdownMenu.Item";
+const CheckboxItem = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  checked,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.CheckboxItem, Object.assign({
+  ref: ref,
+  className: clx("focus:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled relative flex cursor-default select-none items-center rounded-md py-2 pl-10 pr-3 text-sm outline-none transition-colors data-[disabled]:pointer-events-none", className),
+  checked: checked
+}, props), /*#__PURE__*/React.createElement("span", {
+  className: "absolute left-3 flex h-5 w-5 items-center justify-center"
+}, /*#__PURE__*/React.createElement(Primitives.ItemIndicator, null, /*#__PURE__*/React.createElement(CheckMini, null))), children));
+CheckboxItem.displayName = "DropdownMenu.CheckboxItem";
+const RadioItem = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.RadioItem, Object.assign({
+  ref: ref,
+  className: clx("focus:bg-ui-bg-base-pressed hover:bg-ui-base-hover bg-ui-bg-base relative flex cursor-default select-none items-center rounded-md py-2 pl-10 pr-3 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[state=checked]:font-medium data-[disabled]:opacity-50", labelVariants({
+    size: "small"
+  }), className)
+}, props), /*#__PURE__*/React.createElement("span", {
+  className: "absolute left-3 flex h-5 w-5 items-center justify-center"
+}, /*#__PURE__*/React.createElement(Primitives.ItemIndicator, null, /*#__PURE__*/React.createElement(EllipseMiniSolid, {
+  className: "text-ui-fg-base"
+}))), children));
+RadioItem.displayName = "DropdownMenu.RadioItem";
+const Label = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.Label, Object.assign({
+  ref: ref,
+  className: clx("text-ui-fg-subtle px-2 py-1.5", labelVariants({
+    size: "xsmall",
+    weight: "plus"
+  }), className)
+}, props)));
+Label.displayName = "DropdownMenu.Label";
+const Separator = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.Separator, Object.assign({
+  ref: ref,
+  className: clx("bg-ui-border-base -mx-1 my-1 h-px", className)
+}, props)));
+Separator.displayName = "DropdownMenu.Separator";
+const Shortcut = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("span", Object.assign({
+    className: clx("text-ui-fg-subtle ml-auto tracking-widest", labelVariants({
+      size: "small"
+    }), className)
+  }, props));
+};
+Shortcut.displayName = "DropdownMenu.Shortcut";
+const Hint = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("span", Object.assign({
+    className: clx("text-ui-fg-subtle ml-auto tracking-widest", labelVariants({
+      size: "small"
+    }), className)
+  }, props));
+};
+Hint.displayName = "DropdownMenu.Hint";
+const DropdownMenu = Object.assign(Root, {
+  Trigger,
+  Group,
+  SubMenu,
+  SubMenuContent,
+  SubMenuTrigger,
+  Content,
+  Item,
+  CheckboxItem,
+  RadioGroup,
+  RadioItem,
+  Label,
+  Separator,
+  Shortcut,
+  Hint
+});
+
+export { DropdownMenu };