@szum-tech/design-system 2.0.3 → 2.1.0

package/dist/index.js

@@ -1,830 +0,0 @@
-import { cn } from './chunk-ZD2QRAOX.js';
-export { cn } from './chunk-ZD2QRAOX.js';
-import { CaretSortIcon, CheckIcon, Cross1Icon, LoadingIcon } from './chunk-EKHM64CK.js';
-import { Dialog as Dialog$1, AlertDialog as AlertDialog$1, Label as Label$1, Avatar as Avatar$1, Tooltip as Tooltip$1, Select as Select$1, Separator as Separator$1 } from 'radix-ui';
-import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { twMerge } from 'tailwind-merge';
-import { useFormContext, FormProvider, Controller } from 'react-hook-form';
-
-var avatarCva = cva("relative flex shrink-0 overflow-hidden rounded text-gray-100", {
-  variants: {
-    size: {
-      sm: "size-6 text-xs",
-      md: "size-10 text-lg",
-      lg: "size-14 text-2xl"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-function Avatar({ className, size, ref, ...props }) {
-  const avatarStyles = avatarCva({ size });
-  return /* @__PURE__ */ jsx(Avatar$1.Root, { ref, className: cn(avatarStyles, className), ...props });
-}
-function AvatarImage({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx(Avatar$1.Image, { ref, className: cn("aspect-square h-full w-full", className), ...props });
-}
-function AvatarFallback({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Avatar$1.Fallback,
-    {
-      ref,
-      className: cn("bg-gray-350 flex h-full w-full items-center justify-center", className),
-      ...props
-    }
-  );
-}
-var buttonCva = cva(
-  [
-    "inline-flex cursor-pointer items-center justify-center align-middle no-underline transition-colors duration-300 ease-in-out",
-    "select-none appearance-none rounded-sm border font-sans font-medium tracking-[.02857em]",
-    "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
-  ],
-  {
-    variants: {
-      fullWidth: {
-        true: "w-full"
-      },
-      color: {
-        neutral: "",
-        primary: "",
-        success: "",
-        warning: "",
-        error: ""
-      },
-      size: {
-        sm: "px-2.5 py-1 text-[.8125rem] leading-4",
-        md: "px-4 py-1.5 text-[0.875rem] leading-5",
-        lg: "px-5 py-2 text-[.9375rem] leading-6"
-      },
-      variant: {
-        text: "border-transparent bg-transparent",
-        outlined: "bg-transparent",
-        contained: ""
-      }
-    },
-    compoundVariants: [
-      // ---------- TEXT ---------- //
-      {
-        variant: "text",
-        color: "neutral",
-        class: [
-          "text-gray-100",
-          "hover:border-gray-350 hover:bg-gray-350 hover:text-gray-100",
-          "active:border-gray-400 active:bg-gray-400"
-        ]
-      },
-      {
-        variant: "text",
-        color: "primary",
-        class: [
-          "text-primary-500",
-          "hover:border-primary-500 hover:bg-primary-500 hover:text-white",
-          "active:border-primary-600 active:bg-primary-600 active:text-white"
-        ]
-      },
-      {
-        variant: "text",
-        color: "success",
-        class: [
-          "text-success-500",
-          "hover:border-success-500 hover:bg-success-500 hover:text-white",
-          "active:border-success-600 active:bg-success-600 active:text-white"
-        ]
-      },
-      {
-        variant: "text",
-        color: "warning",
-        class: [
-          "text-warning-500",
-          "hover:border-warning-500 hover:bg-warning-500 hover:text-white",
-          "active:border-warning-600 active:bg-warning-600 active:text-white"
-        ]
-      },
-      {
-        variant: "text",
-        color: "error",
-        class: [
-          "text-error-500",
-          "hover:border-error-500 hover:bg-error-500 hover:text-white",
-          "active:border-error-600 active:bg-error-600 active:text-white"
-        ]
-      },
-      // ---------- OUTLINED ---------- //
-      {
-        variant: "outlined",
-        color: "neutral",
-        class: ["border-gray-350 text-gray-100", "hover:bg-gray-350", "active:bg-gray-400"]
-      },
-      {
-        variant: "outlined",
-        color: "primary",
-        class: [
-          "text-primary-500 border-primary-500",
-          "hover:bg-primary-500 hover:text-white",
-          "active:bg-primary-600 active:text-white"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "success",
-        class: [
-          "text-success-500 border-success-500",
-          "hover:bg-success-500 hover:text-white",
-          "active:bg-success-600 active:text-white"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "warning",
-        class: [
-          "text-warning-500 border-warning-500",
-          "hover:bg-warning-500 hover:text-white",
-          "active:bg-warning-600 active:text-white"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "error",
-        class: [
-          "text-error-500 border-error-500",
-          "hover:bg-error-500 hover:text-white",
-          "active:bg-error-600 active:text-white"
-        ]
-      },
-      // ---------- OUTLINED ---------- //
-      {
-        variant: "contained",
-        color: "neutral",
-        class: [
-          "border-gray-350 bg-gray-350 text-gray-100",
-          "hover:border-gray-300 hover:bg-gray-300",
-          "active:border-gray-400 active:bg-gray-400"
-        ]
-      },
-      {
-        variant: "contained",
-        color: "primary",
-        class: [
-          "border-primary-500 bg-primary-500 text-white",
-          "hover:border-primary-400 hover:bg-primary-400",
-          "active:border-primary-600 active:bg-primary-600"
-        ]
-      },
-      {
-        variant: "contained",
-        color: "success",
-        class: [
-          "border-success-500 bg-success-500 text-white",
-          "hover:border-success-400 hover:bg-success-400",
-          "active:border-success-600 active:bg-success-600"
-        ]
-      },
-      {
-        variant: "contained",
-        color: "warning",
-        class: [
-          "border-warning-500 bg-warning-500 text-white",
-          "hover:border-warning-400 hover:bg-warning-400",
-          "active:border-warning-600 active:bg-warning-600"
-        ]
-      },
-      {
-        variant: "contained",
-        color: "error",
-        class: [
-          "border-error-500 bg-error-500 text-white",
-          "hover:border-error-400 hover:bg-error-400",
-          "active:border-error-600 active:bg-error-600"
-        ]
-      }
-    ],
-    defaultVariants: {
-      fullWidth: false,
-      color: "primary",
-      size: "md",
-      variant: "text"
-    }
-  }
-);
-var iconContainerCva = cva("", {
-  variants: {
-    site: {
-      left: "",
-      right: ""
-    },
-    size: {
-      sm: "",
-      md: "",
-      lg: ""
-    }
-  },
-  compoundVariants: [
-    // ---------- LEFT ---------- //
-    {
-      site: "left",
-      size: "sm",
-      class: "-ml-0.5 mr-1.5"
-    },
-    {
-      site: "left",
-      size: "md",
-      class: "-ml-1 mr-2"
-    },
-    {
-      site: "left",
-      size: "lg",
-      class: "-ml-1.5 mr-2.5"
-    },
-    // ---------- RIGHT ---------- //
-    {
-      site: "right",
-      size: "sm",
-      class: "-mr-0.5 ml-1.5"
-    },
-    {
-      site: "right",
-      size: "md",
-      class: "-mr-1 ml-2"
-    },
-    {
-      site: "right",
-      size: "lg",
-      class: "-mr-1.5 ml-2.5"
-    }
-  ],
-  defaultVariants: {
-    site: "left",
-    size: "md"
-  }
-});
-var iconCva = cva("", {
-  variants: {
-    loading: {
-      true: "animate-spin motion-reduce:hidden"
-    },
-    size: {
-      sm: "h-4.5 w-4.5",
-      md: "size-5",
-      lg: "h-5.5 w-5.5"
-    }
-  },
-  defaultVariants: {
-    loading: false,
-    size: "md"
-  }
-});
-function Button({
-  asChild = false,
-  variant = "text",
-  color = "primary",
-  disabled = false,
-  fullWidth = false,
-  ref,
-  ...props
-}) {
-  const {
-    children,
-    type = "button",
-    loading = false,
-    size = "md",
-    loadingPosition = "start",
-    endIcon,
-    startIcon,
-    ...rest
-  } = props;
-  const Comp = asChild ? Slot : "button";
-  const buttonStyles = buttonCva({ fullWidth, size, variant, color });
-  const isDisabled = disabled || loading;
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ...asChild ? props : rest,
-      "aria-disabled": isDisabled || void 0,
-      className: buttonStyles,
-      "data-state": loading ? "loading" : void 0,
-      disabled: isDisabled,
-      ref,
-      role: Comp !== "button" ? "button" : void 0,
-      tabIndex: isDisabled ? -1 : 0,
-      type: Comp === "button" ? type : void 0,
-      children: asChild ? /* @__PURE__ */ jsx(ButtonContent, { children }) : /* @__PURE__ */ jsx(ButtonContent, { ...props })
-    }
-  );
-}
-function ButtonContent({
-  children,
-  loading = false,
-  size = "md",
-  loadingPosition = "start",
-  startIcon,
-  endIcon,
-  ...props
-}) {
-  const isStartLoading = loading && loadingPosition === "start";
-  const StartIcon = isStartLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "aria-label": "Loading" }) : startIcon || null;
-  const startIconStyles = iconCva({ size, loading: isStartLoading });
-  const startIconContainerStyles = iconContainerCva({ size, site: "left" });
-  const isEndLoading = loading && loadingPosition === "end";
-  const EndIcon = isEndLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "aria-label": "Loading" }) : endIcon || null;
-  const endIconStyles = iconCva({ size, loading: isEndLoading });
-  const endIconContainerStyles = iconContainerCva({ size, site: "right" });
-  const LeadingIcon = StartIcon ? /* @__PURE__ */ jsx("span", { className: startIconContainerStyles, role: isStartLoading ? "progressbar" : void 0, children: React.cloneElement(StartIcon, { className: startIconStyles }) }) : null;
-  const TrailingIcon = EndIcon ? /* @__PURE__ */ jsx("span", { className: endIconContainerStyles, role: isEndLoading ? "progressbar" : void 0, children: React.cloneElement(EndIcon, { className: endIconStyles }) }) : null;
-  return React.isValidElement(children) ? React.cloneElement(
-    children,
-    props,
-    /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      LeadingIcon,
-      React.isValidElement(children) ? children.props?.children : null,
-      TrailingIcon
-    ] })
-  ) : /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    LeadingIcon,
-    children,
-    TrailingIcon
-  ] });
-}
-var inputCva = cva(
-  [
-    "bg-app-foreground font-poppins h-10 w-full appearance-none border py-2 outline-0 transition-colors duration-300 ease-in-out",
-    "placeholder:select-none placeholder:text-gray-200",
-    "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
-    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
-  ],
-  {
-    variants: {
-      invalid: {
-        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["border-gray-350 hover:border-primary-500 text-gray-100"]
-      },
-      withStartIcon: {
-        true: "pl-11",
-        false: "pl-3"
-      },
-      withEndIcon: {
-        true: "pr-11",
-        false: "pr-3"
-      }
-    },
-    defaultVariants: {
-      invalid: false,
-      withStartIcon: false,
-      withEndIcon: false
-    }
-  }
-);
-var inputIconContainerCva = cva(
-  ["pointer-events-none absolute inset-y-2 inline-flex w-10 place-content-center items-center text-center"],
-  {
-    variants: {
-      disabled: {
-        true: "text-gray-200"
-      },
-      site: {
-        right: "right-0 border-l border-l-gray-400 pr-1",
-        left: "left-0 border-r border-r-gray-400 pl-1"
-      }
-    },
-    defaultVariants: {
-      disabled: false
-    }
-  }
-);
-function Input({ invalid = false, startIcon, endIcon, disabled = false, className, ...props }) {
-  const inputStyles = inputCva({ withEndIcon: !!endIcon, withStartIcon: !!startIcon, invalid });
-  const inputIconStartContainer = inputIconContainerCva({ site: "left", disabled });
-  const inputIconEndContainer = inputIconContainerCva({ site: "right", disabled });
-  return /* @__PURE__ */ jsxs("div", { className: "text-body-2 relative text-gray-100", children: [
-    startIcon ? /* @__PURE__ */ jsx("span", { className: inputIconStartContainer, children: startIcon }) : null,
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        "aria-invalid": invalid || void 0,
-        disabled,
-        className: cn(inputStyles, className),
-        ...props
-      }
-    ),
-    endIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: inputIconEndContainer, children: endIcon }) : null
-  ] });
-}
-function Tooltip({
-  defaultOpen,
-  content,
-  open,
-  onOpenChange,
-  children,
-  side,
-  align,
-  collisionPadding = 8,
-  sideOffset = 8,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Tooltip$1.Root, { delayDuration: 0, open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx(Tooltip$1.Trigger, { asChild: true, children }),
-    content ? /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
-      Tooltip$1.Content,
-      {
-        className: "text-body-1 data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade rounded bg-white p-2 text-gray-100 will-change-[transform,opacity] select-none",
-        sideOffset,
-        side,
-        align,
-        collisionPadding,
-        ...props,
-        children: [
-          content,
-          /* @__PURE__ */ jsx(Tooltip$1.Arrow, { width: 8, height: 4, className: "fill-white" })
-        ]
-      }
-    ) }) : null
-  ] });
-}
-function TooltipProvider({ children }) {
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { skipDelayDuration: 500, children });
-}
-var textareaCva = cva(
-  [
-    "bg-app-primary font-poppins text-body-2 h-28 min-h-10 w-full appearance-none border px-3 py-2 outline-0 transition-colors duration-300 ease-in-out placeholder:select-none placeholder:text-gray-200",
-    "focus:border-primary-400",
-    "active:border-primary-400",
-    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
-  ],
-  {
-    variants: {
-      invalid: {
-        true: ["text-error-500 border-error-500", "hover:border-error-400", "focus:text-gray-100"],
-        false: ["border-gray-350 text-gray-100", "hover:border-primary-500"]
-      }
-    },
-    defaultVariants: {
-      invalid: false
-    }
-  }
-);
-function Textarea({ invalid = false, ...props }) {
-  const textareaStyles = textareaCva({ invalid });
-  return /* @__PURE__ */ jsx("textarea", { "aria-invalid": invalid || void 0, className: textareaStyles, ...props });
-}
-var selectCva = cva(
-  [
-    "bg-app-foreground text-body-2 inline-flex h-10 w-full appearance-none items-center justify-between gap-2 border px-3 py-2 text-gray-100 outline-0 transition-colors duration-300 ease-in-out",
-    "placeholder:select-none placeholder:text-gray-200",
-    "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
-    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
-  ],
-  {
-    variants: {
-      invalid: {
-        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["border-gray-350 hover:border-primary-500 text-gray-100"]
-      }
-    },
-    defaultVariants: {
-      invalid: false
-    }
-  }
-);
-function Select({ children, placeholder, invalid = false, ref, ...props }) {
-  const selectStyles = selectCva({ invalid });
-  return /* @__PURE__ */ jsxs(Select$1.Root, { ...props, children: [
-    /* @__PURE__ */ jsxs(Select$1.Trigger, { className: selectStyles, ref, children: [
-      /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
-      /* @__PURE__ */ jsx(Select$1.Icon, { className: "-mr-1.5", children: /* @__PURE__ */ jsx(CaretSortIcon, { className: "size-5 text-gray-200" }) })
-    ] }),
-    /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
-      Select$1.Content,
-      {
-        sideOffset: 4,
-        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-400 py-1",
-        children: /* @__PURE__ */ jsx(Select$1.Viewport, { children })
-      }
-    ) })
-  ] });
-}
-function SelectItem({ children, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    Select$1.Item,
-    {
-      className: "text-body-2 data-[state=checked]:bg-primary-300 flex w-full flex-row items-center justify-between px-3 py-2 text-gray-100 select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-400 data-[highlighted]:outline-none",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Select$1.ItemText, { className: "flex-1", children }),
-        /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
-      ]
-    }
-  );
-}
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("bg-app-foreground h-full rounded border border-gray-400", className), ...props });
-}
-function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col p-6", className), ...props });
-}
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx("h3", { className: twMerge("text-heading-5", className), ...props });
-}
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx("p", { className: twMerge("text-body-2 text-gray-200", className), ...props });
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("p-6 pt-0", className), ...props });
-}
-function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("flex items-center p-6 pt-0", className), ...props });
-}
-var Sheet = Dialog$1.Root;
-var SheetTrigger = Dialog$1.Trigger;
-var SheetClose = Dialog$1.Close;
-var sheetContentStyles = cva(
-  "bg-foreground data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col border-gray-400 p-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
-        bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
-        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-        right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
-      }
-    },
-    defaultVariants: {
-      side: "right"
-    }
-  }
-);
-function SheetContent({ side = "right", className, children, ...props }) {
-  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
-    /* @__PURE__ */ jsx(
-      Dialog$1.Overlay,
-      {
-        className: "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsxs(Dialog$1.Content, { className: twMerge(sheetContentStyles({ side }), className), ...props, children: [
-      children,
-      /* @__PURE__ */ jsxs(Dialog$1.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-foreground data-[state=open]:bg-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
-        /* @__PURE__ */ jsx(Cross1Icon, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-      ] })
-    ] })
-  ] });
-}
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
-}
-function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
-}
-function SheetTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: twMerge("typography-heading-6", className), ...props });
-}
-function SheetDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Description, { className: twMerge("typography-body-2 text-gray-200", className), ...props });
-}
-function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Separator$1.Root,
-    {
-      decorative,
-      orientation,
-      className: twMerge(
-        "shrink-0 bg-gray-400",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function Header({ children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "header",
-    {
-      className: "bg-foreground/95 supports-[backdrop-filter]:bg-foreground/60 sticky top-0 z-50 w-full border-b border-gray-400 backdrop-blur",
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "container flex h-16 items-center", children })
-    }
-  );
-}
-var Dialog = Dialog$1.Root;
-var DialogClose = Dialog$1.Close;
-var dialogContentStyles = cva(
-  [
-    "bg-foreground fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 p-4 shadow-lg",
-    "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"
-  ],
-  {
-    variants: {
-      width: {
-        xs: "max-w-xs",
-        sm: "max-w-sm",
-        md: "max-w-md",
-        lg: "max-w-lg",
-        xl: "max-w-xl",
-        "2xl": "max-w-2xl",
-        "3xl": "max-w-3xl",
-        "4xl": "max-w-4xl",
-        "5xl": "max-w-5xl",
-        "6xl": "max-w-6xl",
-        full: "max-w-full"
-      }
-    },
-    defaultVariants: {
-      width: "md"
-    }
-  }
-);
-function DialogOverlay(props) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Overlay,
-    {
-      className: "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",
-      ...props
-    }
-  );
-}
-function DialogContent({ className, children, width = "md", ...props }) {
-  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(Dialog$1.Content, { className: twMerge(dialogContentStyles({ width }), className), ...props, children: [
-      children,
-      /* @__PURE__ */ jsxs(Dialog$1.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-foreground data-[state=open]:bg-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
-        /* @__PURE__ */ jsx(Cross1Icon, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-      ] })
-    ] })
-  ] });
-}
-var DialogTrigger = Dialog$1.Trigger;
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("mb-4 flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
-}
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
-}
-function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: twMerge("text-heading-6", className), ...props });
-}
-function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Description, { className: twMerge("text-body-2 text-gray-200", className), ...props });
-}
-var Form = FormProvider;
-var FormItemContext = React.createContext({});
-var FormItem = React.forwardRef(function({ className, ...props }, ref) {
-  const id = React.useId();
-  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: twMerge("space-y-2", className), ...props }) });
-});
-FormItem.displayName = "FormItem";
-var FormFieldContext = React.createContext({});
-var FormField = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
-};
-function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Label$1.Root,
-    {
-      className: twMerge("text-subtitle-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className),
-      ...props
-    }
-  );
-}
-var useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-  const fieldState = getFieldState(fieldContext.name, formState);
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-  const { id } = itemContext;
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  };
-};
-var FormLabel = React.forwardRef(
-  ({ className, caption, ...props }, ref) => {
-    const { error, formItemId } = useFormField();
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-end justify-between", children: [
-      /* @__PURE__ */ jsx(
-        Label,
-        {
-          ref,
-          className: twMerge(error ? "text-error-500" : null, className),
-          htmlFor: formItemId,
-          ...props
-        }
-      ),
-      caption ? /* @__PURE__ */ jsx("div", { className: "typography-caption text-gray-200", children: caption }) : null
-    ] });
-  }
-);
-FormLabel.displayName = "FormLabel";
-var FormControl = React.forwardRef(function(props, ref) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  const newProps = { ...props, invalid: !!error };
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      ref,
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error,
-      ...newProps
-    }
-  );
-});
-FormControl.displayName = "FormControl";
-var FormMessage = React.forwardRef(function({ children, ...props }, ref) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(HelperText, { ref, type: "error", id: formMessageId, ...props, children: body });
-});
-FormMessage.displayName = "FormMessage";
-var FormDescription = React.forwardRef(function(props, ref) {
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx(HelperText, { ref, id: formDescriptionId, ...props });
-});
-FormDescription.displayName = "FormDescription";
-var helperTextCva = cva("", {
-  variants: {
-    type: {
-      description: "text-body-2 text-gray-200",
-      error: "text-caption text-error-500"
-    }
-  },
-  defaultVariants: {
-    type: "description"
-  }
-});
-function HelperText({ className, children, type = "description", role, ref, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref,
-      className: twMerge(helperTextCva({ type }), className),
-      role: type === "error" ? "alert" : role,
-      ...props,
-      children
-    }
-  );
-}
-var AlertDialog = AlertDialog$1.Root;
-var AlertDialogTrigger = AlertDialog$1.Trigger;
-function AlertDialogOverlay({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    AlertDialog$1.Overlay,
-    {
-      className: cn(
-        "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertDialogContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [
-    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
-    /* @__PURE__ */ jsx(
-      AlertDialog$1.Content,
-      {
-        className: cn(
-          "bg-foreground 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%] fixed top-1/2 left-1/2 z-50 flex w-full max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 p-4 shadow-lg duration-200",
-          className
-        ),
-        ...props
-      }
-    )
-  ] });
-}
-function AlertDialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("mb-4 flex flex-col space-y-2 text-center sm:text-left", className), ...props });
-}
-function AlertDialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
-}
-function AlertDialogTitle({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx(AlertDialog$1.Title, { ref, className: cn("text-heading-6", className), ...props });
-}
-function AlertDialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(AlertDialog$1.Description, { className: cn("text-body-2 text-gray-200", className), ...props });
-}
-var AlertDialogAction = AlertDialog$1.Action;
-var AlertDialogCancel = AlertDialog$1.Cancel;
-
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, HelperText, Input, Label, Select, SelectItem, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Textarea, Tooltip, TooltipProvider };