@medusajs/ui 0.0.0-alpha-20230713141422

package/README.md

@@ -0,0 +1,3 @@
+# @medusajs/ui
+
+[Storybook](https://64ac29b6b978c0bf353e1ef8-wdedgwwcko.chromatic.com/)

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

@@ -0,0 +1,151 @@
+'use strict';
+
+var Primitives = require('@radix-ui/react-alert-dialog');
+var React = require('react');
+var clx = require('../../utils/clx.js');
+var heading = require('../heading/heading.js');
+var button = require('../button/button.js');
+var label = require('../label/label.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Primitives__namespace = /*#__PURE__*/_interopNamespaceDefault(Primitives);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Root = Primitives__namespace.Root;
+Root.displayName = "AlertDialog.Root";
+const Trigger = Primitives__namespace.Trigger;
+Trigger.displayName = "AlertDialog.Trigger";
+const Portal = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React__namespace.createElement(Primitives__namespace.AlertDialogPortal, Object.assign({
+    className: clx.clx(className)
+  }, props));
+};
+Portal.displayName = "AlertDialog.Portal";
+const Overlay = /*#__PURE__*/React__namespace.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Overlay, Object.assign({
+    ref: ref,
+    className: clx.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__namespace.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Title, Object.assign({
+    ref: ref,
+    className: clx.clx(className)
+  }, props, {
+    asChild: true
+  }), /*#__PURE__*/React__namespace.createElement(heading.Heading, {
+    level: "h2"
+  }, children));
+});
+Title.displayName = "AlertDialog.Title";
+const Content = /*#__PURE__*/React__namespace.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Portal, null, /*#__PURE__*/React__namespace.createElement(Overlay, null), /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Content, Object.assign({
+    ref: ref,
+    className: clx.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__namespace.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Description, Object.assign({
+    ref: ref,
+    className: clx.clx("text-subtle", label.labelVariants({
+      size: "base"
+    }), className)
+  }, props));
+});
+Description.displayName = "AlertDialog.Description";
+const Action = /*#__PURE__*/React__namespace.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Action, Object.assign({
+    ref: ref,
+    className: clx.clx("", className)
+  }, props, {
+    asChild: true
+  }), /*#__PURE__*/React__namespace.createElement(button.Button, {
+    variant: "danger"
+  }, children));
+});
+Action.displayName = "AlertDialog.Action";
+const Cancel = /*#__PURE__*/React__namespace.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Cancel, Object.assign({
+    ref: ref,
+    className: clx.clx(className)
+  }, props, {
+    asChild: true
+  }), /*#__PURE__*/React__namespace.createElement(button.Button, {
+    variant: "secondary"
+  }, children));
+});
+Cancel.displayName = "AlertDialog.Cancel";
+const Header = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React__namespace.createElement("div", Object.assign({
+    className: clx.clx("flex flex-col gap-y-1 px-6 pt-6", className)
+  }, props));
+};
+const Footer = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React__namespace.createElement("div", Object.assign({
+    className: clx.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
+});
+
+exports.AlertDialog = AlertDialog;

package/build/cjs/components/avatar/avatar.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var Primitives = require('@radix-ui/react-avatar');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var clx = require('../../utils/clx.js');
+var label = require('../label/label.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Primitives__namespace = /*#__PURE__*/_interopNamespaceDefault(Primitives);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const avatarVariants = classVarianceAuthority.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 = classVarianceAuthority.cva("aspect-square object-cover object-center", {
+  variants: {
+    variant: {
+      squared: "rounded-lg",
+      rounded: "rounded-full"
+    },
+    size: {
+      base: clx.clx(label.labelVariants({
+        size: "small",
+        weight: "plus"
+      }), "h-6 w-6"),
+      large: clx.clx(label.labelVariants({
+        size: "base",
+        weight: "plus"
+      }), "h-8 w-8")
+    }
+  },
+  defaultVariants: {
+    variant: "rounded",
+    size: "base"
+  }
+});
+const Avatar = /*#__PURE__*/React__namespace.forwardRef(({
+  src,
+  fallback,
+  variant = "rounded",
+  size = "base",
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Root, Object.assign({
+    ref: ref
+  }, props, {
+    className: clx.clx(avatarVariants({
+      variant,
+      size
+    }), className)
+  }), src && /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Image, {
+    src: src,
+    className: innerVariants({
+      variant,
+      size
+    })
+  }), /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Fallback, {
+    className: clx.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";
+
+exports.Avatar = Avatar;

package/build/cjs/components/badge/badge.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var clx = require('../../utils/clx.js');
+var label = require('../label/label.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const badgeVariants = classVarianceAuthority.cva("inline-flex items-center gap-x-0.5 border", {
+  variants: {
+    type: {
+      default: "rounded-md",
+      rounded: "rounded-full",
+      icon: "rounded-md"
+    },
+    size: {
+      sm: clx.clx("px-1.5", label.labelVariants({
+        size: "xsmall",
+        weight: "plus"
+      })),
+      md: clx.clx("px-2 py-0.5", label.labelVariants({
+        size: "small",
+        weight: "plus"
+      })),
+      lg: clx.clx("px-2.5 py-1", label.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__namespace.forwardRef(({
+  className,
+  size,
+  type,
+  color,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? reactSlot.Slot : "span";
+  return /*#__PURE__*/React__namespace.createElement(Component, Object.assign({
+    ref: ref,
+    className: clx.clx(badgeVariants({
+      size,
+      type,
+      color
+    }), className)
+  }, props));
+});
+Badge.displayName = "Badge";
+
+exports.Badge = Badge;

package/build/cjs/components/button/button.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var clx = require('../../utils/clx.js');
+var label = require('../label/label.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const buttonVariants = classVarianceAuthority.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.clx("gap-x-0.5 px-[7px] py-[1px]", label.labelVariants({
+        size: "xsmall",
+        weight: "plus"
+      })),
+      md: clx.clx("gap-x-1.5 px-[11px] py-[5px]", label.labelVariants({
+        size: "small",
+        weight: "plus"
+      })),
+      lg: clx.clx("gap-x-2 px-[15px] py-[9px]", label.labelVariants({
+        size: "base",
+        weight: "plus"
+      })),
+      xl: clx.clx("gap-x-2 px-[19px] py-[13px]", label.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__namespace.forwardRef(({
+  size,
+  variant,
+  format,
+  className,
+  asChild = false,
+  children,
+  ...props
+}, ref) => {
+  const Component = asChild ? reactSlot.Slot : "button";
+  return /*#__PURE__*/React__namespace.createElement(Component, Object.assign({
+    ref: ref
+  }, props, {
+    className: clx.clx(buttonVariants({
+      variant,
+      size,
+      format
+    }), className)
+  }), children);
+});
+Button.displayName = "Button";
+
+exports.Button = Button;

package/build/cjs/components/checkbox/checkbox.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var icons = require('@medusajs/icons');
+var Primitives = require('@radix-ui/react-checkbox');
+var React = require('react');
+var clx = require('../../utils/clx.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Primitives__namespace = /*#__PURE__*/_interopNamespaceDefault(Primitives);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Checkbox = /*#__PURE__*/React__namespace.forwardRef(({
+  className,
+  checked,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Root, Object.assign({}, props, {
+    ref: ref,
+    checked: checked,
+    className: clx.clx("group relative inline-flex h-5 w-5 items-center justify-center outline-none ", className)
+  }), /*#__PURE__*/React__namespace.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__namespace.createElement(Primitives__namespace.Indicator, {
+    className: "absolute inset-0"
+  }, checked === "indeterminate" ? /*#__PURE__*/React__namespace.createElement(icons.MinusMini, null) : /*#__PURE__*/React__namespace.createElement(icons.CheckMini, null))));
+});
+Checkbox.displayName = "Checkbox";
+
+exports.Checkbox = Checkbox;

package/build/cjs/components/container/container.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var clx = require('../../utils/clx.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Container = /*#__PURE__*/React__namespace.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement("div", Object.assign({
+    ref: ref,
+    className: clx.clx("shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-8 pb-8 pt-6", className)
+  }, props));
+});
+Container.displayName = "Container";
+
+exports.Container = Container;

package/build/cjs/components/drawer/drawer.js

@@ -0,0 +1,136 @@
+'use strict';
+
+var icons = require('@medusajs/icons');
+var Primitives = require('@radix-ui/react-dialog');
+var React = require('react');
+var clx = require('../../utils/clx.js');
+var badge = require('../badge/badge.js');
+var text = require('../text/text.js');
+var button = require('../button/button.js');
+var heading = require('../heading/heading.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Primitives__namespace = /*#__PURE__*/_interopNamespaceDefault(Primitives);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Root = Primitives__namespace.Root;
+Root.displayName = "Drawer.Root";
+const Trigger = Primitives__namespace.Trigger;
+Trigger.displayName = "Drawer.Trigger";
+const Close = Primitives__namespace.Close;
+Close.displayName = "Drawer.Close";
+const Portal = Primitives__namespace.Portal;
+Portal.displayName = "Drawer.Portal";
+const Overlay = /*#__PURE__*/React__namespace.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Overlay, Object.assign({
+    ref: ref,
+    className: clx.clx("fixed inset-0 z-50", className)
+  }, props));
+});
+Overlay.displayName = "Drawer.Overlay";
+const Content = /*#__PURE__*/React__namespace.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React__namespace.createElement(Portal, null, /*#__PURE__*/React__namespace.createElement(Overlay, null), /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Content, Object.assign({
+    ref: ref,
+    className: clx.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__namespace.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__namespace.createElement("div", {
+    className: clx.clx("flex flex-col gap-y-1", className)
+  }, children), /*#__PURE__*/React__namespace.createElement("div", {
+    className: "flex items-center gap-x-2"
+  }, /*#__PURE__*/React__namespace.createElement(badge.Badge, {
+    size: "sm",
+    color: "grey"
+  }, "esc"), /*#__PURE__*/React__namespace.createElement(Close, {
+    asChild: true
+  }, /*#__PURE__*/React__namespace.createElement(button.Button, {
+    variant: "transparent",
+    size: "sm",
+    format: "icon"
+  }, /*#__PURE__*/React__namespace.createElement(icons.XMark, null)))));
+};
+Header.displayName = "Drawer.Header";
+const Body = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React__namespace.createElement("div", Object.assign({
+    className: clx.clx("flex-1 px-8 pb-16 pt-6", className)
+  }, props));
+};
+Body.displayName = "Drawer.Body";
+const Footer = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React__namespace.createElement("div", Object.assign({
+    className: clx.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__namespace.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Title, Object.assign({
+  ref: ref,
+  className: clx.clx(className),
+  asChild: true
+}, props), /*#__PURE__*/React__namespace.createElement(heading.Heading, {
+  level: "h1"
+}, children)));
+Title.displayName = "Drawer.Title";
+const Description = /*#__PURE__*/React__namespace.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/React__namespace.createElement(Primitives__namespace.Description, Object.assign({
+  ref: ref,
+  className: clx.clx(className),
+  asChild: true
+}, props), /*#__PURE__*/React__namespace.createElement(text.Text, null, children)));
+Description.displayName = "Drawer.Description";
+const Drawer = Object.assign(Root, {
+  Body,
+  Close,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  Trigger
+});
+
+exports.Drawer = Drawer;