@calcom/atoms 2.8.0 → 2.8.1

package/src/components/ui/dropdown.tsx

@@ -1,240 +0,0 @@
-// @ts-nocheck — Radix 2.x prop-pick narrowing drops className/children
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import Link from "next/link";
-import type { ComponentProps } from "react";
-import { forwardRef } from "react";
-
-import { cn } from "../../lib/utils";
-import type { ButtonColor } from "./button";
-import { Icon, type IconName } from "./icon";
-import { ChevronRightIcon, CircleCheckIcon } from "./icons";
-
-export const Dropdown = DropdownMenuPrimitive.Root;
-
-type DropdownMenuTriggerProps = ComponentProps<(typeof DropdownMenuPrimitive)["Trigger"]>;
-export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(
-  ({ className = "", ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Trigger
-      {...props}
-      className={cn(
-        !props.asChild &&
-          `focus:bg-subtle hover:bg-cal-muted text-default group-hover:text-emphasis inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium ring-0 transition ${className}`
-      )}
-      ref={forwardedRef}
-    />
-  )
-);
-DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
-
-export const DropdownMenuTriggerItem = DropdownMenuPrimitive.Trigger;
-
-export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-type DropdownMenuContentProps = ComponentProps<(typeof DropdownMenuPrimitive)["Content"]>;
-export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-  ({ children, sideOffset = 2, align = "end", ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.Content
-        align={align}
-        {...props}
-        sideOffset={sideOffset}
-        className={cn(
-          "shadow-dropdown bg-default border-subtle relative z-50 origin-top-right stack-y-px rounded-xl border p-1 text-sm",
-          "w-[220px]",
-          props.className
-        )}
-        ref={forwardedRef}
-      >
-        {children}
-      </DropdownMenuPrimitive.Content>
-    );
-  }
-);
-DropdownMenuContent.displayName = "DropdownMenuContent";
-
-type DropdownMenuLabelProps = ComponentProps<(typeof DropdownMenuPrimitive)["Label"]>;
-export const DropdownMenuLabel = (props: DropdownMenuLabelProps) => (
-  <DropdownMenuPrimitive.Label
-    {...props}
-    className={cn("text-subtle px-2 pb-1 pt-1.5 text-xs font-semibold leading-none", props.className)}
-  />
-);
-
-type DropdownMenuItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["CheckboxItem"]>;
-export const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
-  ({ className = "", ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Item
-      className={`hover:bg-subtle hover:text-emphasis text-default text-sm ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] hover:ring-0 focus:outline-none focus:bg-subtle focus:text-emphasis ${className}`}
-      {...props}
-      ref={forwardedRef}
-    />
-  )
-);
-DropdownMenuItem.displayName = "DropdownMenuItem";
-
-export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-type DropdownMenuCheckboxItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["CheckboxItem"]>;
-export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
-  ({ children, checked, onCheckedChange, ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.CheckboxItem
-        {...props}
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        ref={forwardedRef}
-        className="hover:text-emphasis text-default hover:bg-subtle flex flex-1 items-center space-x-2 px-3 py-2 hover:outline-none hover:ring-0 disabled:cursor-not-allowed"
-      >
-        <div className="w-full">{children}</div>
-        {!checked && (
-          <input
-            aria-disabled={true}
-            aria-label={typeof children === "string" ? `Not active ${children}` : undefined}
-            aria-readonly
-            checked={false}
-            type="checkbox"
-            className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default ml-auto h-4 w-4 rounded transition hover:cursor-pointer"
-          />
-        )}
-        <DropdownMenuPrimitive.ItemIndicator asChild>
-          <input
-            aria-disabled={true}
-            aria-readonly
-            aria-label={typeof children === "string" ? `Active ${children}` : undefined}
-            checked={true}
-            type="checkbox"
-            className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default h-4 w-4 rounded transition hover:cursor-pointer"
-          />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </DropdownMenuPrimitive.CheckboxItem>
-    );
-  }
-);
-DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-type DropdownMenuSubTriggerProps = ComponentProps<(typeof DropdownMenuPrimitive)["SubTrigger"]>;
-export const DropdownMenuSubTrigger = forwardRef<HTMLDivElement, DropdownMenuSubTriggerProps>(
-  ({ className = "", children, ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.SubTrigger
-      className={cn(
-        "hover:bg-subtle hover:text-emphasis text-default flex cursor-pointer select-none items-center justify-between rounded-lg p-2 text-sm font-medium outline-none ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] focus:bg-subtle focus:text-emphasis",
-        className
-      )}
-      {...props}
-      ref={forwardedRef}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-);
-DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-
-type DropdownMenuSubContentProps = ComponentProps<(typeof DropdownMenuPrimitive)["SubContent"]>;
-export const DropdownMenuSubContent = forwardRef<HTMLDivElement, DropdownMenuSubContentProps>(
-  ({ children, sideOffset = 2, alignOffset = -5, ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.SubContent
-        sideOffset={sideOffset}
-        alignOffset={alignOffset}
-        {...props}
-        className={cn(
-          "shadow-dropdown bg-default border-subtle relative z-50 min-w-[180px] origin-top-left stack-y-px rounded-xl border p-1 text-sm",
-          props.className
-        )}
-        ref={forwardedRef}
-      >
-        {children}
-      </DropdownMenuPrimitive.SubContent>
-    );
-  }
-);
-DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-
-type DropdownMenuRadioItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["RadioItem"]>;
-export const DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemProps>(
-  ({ children, ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
-        {children}
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleCheckIcon className="h-4 w-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </DropdownMenuPrimitive.RadioItem>
-    );
-  }
-);
-DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-
-type ButtonOrLinkProps = ComponentProps<"button"> & ComponentProps<"a">;
-
-type DropdownItemProps = {
-  children: React.ReactNode;
-  color?: ButtonColor;
-  StartIcon?: string;
-  CustomStartIcon?: React.ReactNode;
-  kbd?: string;
-  EndIcon?: string;
-  href?: string;
-  disabled?: boolean;
-  childrenClassName?: string;
-} & ButtonOrLinkProps;
-
-export function ButtonOrLink({ href, ...props }: ButtonOrLinkProps) {
-  const isLink = typeof href !== "undefined";
-
-  if (isLink) {
-    const { ref: _ref, ...linkProps } = props;
-    return <Link href={href} {...linkProps} />;
-  }
-
-  return <button {...props} />;
-}
-
-type DropdownItemPropsWithIconName = Omit<DropdownItemProps, "StartIcon" | "EndIcon"> & {
-  StartIcon?: IconName;
-  EndIcon?: IconName;
-};
-
-export const DropdownItem = (props: DropdownItemPropsWithIconName) => {
-  const { CustomStartIcon, StartIcon, EndIcon, children, color, childrenClassName, ...rest } = props;
-
-  return (
-    <ButtonOrLink
-      {...rest}
-      className={cn(
-        "hover:text-emphasis text-default inline-flex w-full items-center space-x-1 rounded-lg  p-2 disabled:cursor-not-allowed",
-        color === "destructive" ? "hover:bg-error hover:text-error text-error" : "hover:bg-subtle",
-        props.className
-      )}
-    >
-      <>
-        {CustomStartIcon || (StartIcon && <Icon name={StartIcon} className="mr-1 h-4 w-4 shrink-0" />)}
-        <div className={cn("w-full text-left text-sm font-medium leading-none", childrenClassName)}>
-          {children}
-        </div>
-        {EndIcon && <Icon name={EndIcon} className="h-4 w-4" />}
-      </>
-    </ButtonOrLink>
-  );
-};
-
-type DropdownMenuSeparatorProps = ComponentProps<(typeof DropdownMenuPrimitive)["Separator"]>;
-export const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
-  ({ className = "", ...props }, forwardedRef) => {
-    return (
-      <DropdownMenuPrimitive.Separator
-        className={cn("bg-emphasis -mx-1 my-1 h-px", className)}
-        {...props}
-        ref={forwardedRef}
-      />
-    );
-  }
-);
-DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-
-export default Dropdown;

package/src/components/ui/editable-heading.tsx

@@ -1,64 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import type { ControllerRenderProps } from "react-hook-form";
-
-import { cn } from "../../lib/utils";
-import { PencilIcon } from "./icons";
-
-export const EditableHeading = function EditableHeading({
-  value,
-  onChange,
-  isReady,
-  disabled = false,
-  ...passThroughProps
-}: {
-  isReady?: boolean;
-  disabled?: boolean;
-} & Omit<JSX.IntrinsicElements["input"], "name" | "onChange"> &
-  ControllerRenderProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const enableEditing = () => setIsEditing(!disabled);
-  return (
-    <div className="group pointer-events-auto relative truncate" onClick={enableEditing}>
-      <div className={cn(!disabled && "cursor-pointer", "flex items-center")}>
-        <label className="min-w-8 relative inline-block">
-          <span
-            className={cn(
-              "whitespace-pre text-xl tracking-normal w-full truncate cursor-pointer",
-              isEditing && "text-transparent"
-            )}
-          >
-            {value}
-          </span>
-
-          <input
-            {...passThroughProps}
-            disabled={disabled}
-            type="text"
-            value={value}
-            required
-            className={cn(
-              !disabled && "hover:text-default focus:text-emphasis cursor-text",
-              "text-emphasis absolute left-0 top-0 w-full truncate border-none bg-transparent p-0 align-top text-xl transition-opacity",
-              isEditing ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none",
-              passThroughProps.className
-            )}
-            onFocus={(e) => {
-              setIsEditing(!disabled);
-              passThroughProps.onFocus?.(e);
-            }}
-            onBlur={(e) => {
-              setIsEditing(false);
-              passThroughProps.onBlur?.(e);
-            }}
-            onChange={(e) => onChange?.(e.target.value)}
-          />
-          {!isEditing && isReady && !disabled && (
-            <PencilIcon className="text-subtle group-hover:text-subtle -mt-px ml-1 inline h-4 w-4" />
-          )}
-        </label>
-      </div>
-    </div>
-  );
-};

package/src/components/ui/empty-screen.tsx

@@ -1,86 +0,0 @@
-import type React from "react";
-import type { ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Icon, type IconName } from "./icon";
-
-export function EmptyScreen({
-  Icon: icon,
-  customIcon,
-  avatar,
-  headline,
-  description,
-  buttonText,
-  buttonOnClick,
-  buttonRaw,
-  border = true,
-  dashedBorder = true,
-  className,
-  iconClassName,
-  iconWrapperClassName,
-  limitWidth = true,
-}: {
-  Icon?: IconName;
-  customIcon?: React.ReactElement;
-  avatar?: React.ReactElement;
-  headline: string | React.ReactElement;
-  description?: string | React.ReactElement;
-  buttonText?: string;
-  buttonOnClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  buttonRaw?: ReactNode;
-  border?: boolean;
-  dashedBorder?: boolean;
-  iconWrapperClassName?: string;
-  iconClassName?: string;
-  limitWidth?: boolean;
-} & React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      data-testid="empty-screen"
-      className={cn(
-        "flex w-full select-none flex-col items-center justify-center rounded-lg p-7 lg:p-20",
-        border && "border-subtle border",
-        dashedBorder && "border-dashed",
-        className
-      )}
-    >
-      {!avatar ? null : (
-        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full">{avatar}</div>
-      )}
-
-      {!icon ? null : (
-        <div
-          className={cn(
-            "bg-emphasis flex h-[72px] w-[72px] items-center justify-center rounded-full ",
-            iconWrapperClassName
-          )}
-        >
-          <Icon
-            name={icon}
-            className={cn("text-default inline-block h-10 w-10 stroke-[1.3px]", iconClassName)}
-          />
-        </div>
-      )}
-      {!customIcon ? null : <>{customIcon}</>}
-      <div className={`flex ${limitWidth ? "max-w-[420px]" : ""}  flex-col items-center`}>
-        <h2
-          className={cn(
-            "font-heading text-emphasis text-center text-xl normal-nums",
-            icon && "mt-6",
-            !description && "mb-8"
-          )}
-        >
-          {headline}
-        </h2>
-        {description && (
-          <div className="text-default mb-8 mt-3 text-center text-sm font-normal leading-6">
-            {description}
-          </div>
-        )}
-        {buttonOnClick && buttonText && <Button onClick={(e) => buttonOnClick(e)}>{buttonText}</Button>}
-        {buttonRaw}
-      </div>
-    </div>
-  );
-}

package/src/components/ui/form.tsx

@@ -1,46 +0,0 @@
-import type { ReactElement, Ref } from "react";
-import React, { forwardRef } from "react";
-import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
-import { FormProvider } from "react-hook-form";
-
-import { showToast } from "./show-toast";
-
-function getErrorMessage(cause: unknown): string {
-  if (cause instanceof Error) return cause.message;
-  if (typeof cause === "string") return cause;
-  return `Unhandled error of type '${typeof cause}'`;
-}
-
-type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
-  JSX.IntrinsicElements["form"],
-  "onSubmit"
->;
-
-const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLFormElement>) => {
-  const { form, handleSubmit, ...passThrough } = props;
-
-  return (
-    <FormProvider {...form}>
-      <form
-        ref={ref}
-        onSubmit={(event) => {
-          event.preventDefault();
-          event.stopPropagation();
-
-          form
-            .handleSubmit(handleSubmit)(event)
-            .catch((err) => {
-              showToast(getErrorMessage(err), "error");
-            });
-        }}
-        {...passThrough}
-      >
-        {props.children}
-      </form>
-    </FormProvider>
-  );
-};
-
-export const Form = forwardRef(PlainForm) as <T extends FieldValues>(
-  p: FormProps<T> & { ref?: Ref<HTMLFormElement> }
-) => ReactElement;

package/src/components/ui/icon.tsx

@@ -1,249 +0,0 @@
-"use client";
-
-import type { SVGProps } from "react";
-import { forwardRef } from "react";
-
-import { cn } from "../../lib/utils";
-
-const iconPaths = {
-  "alert-circle": (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <line x1="12" x2="12" y1="8" y2="12" />
-      <line x1="12" x2="12.01" y1="16" y2="16" />
-    </>
-  ),
-  "arrow-left": <path d="m12 19-7-7 7-7M19 12H5" />,
-  "arrow-right": <path d="M5 12h14M12 5l7 7-7 7" />,
-  "chevron-left": <path d="m15 18-6-6 6-6" />,
-  "chevron-right": <path d="m9 18 6-6-6-6" />,
-  x: (
-    <>
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </>
-  ),
-  "external-link": (
-    <>
-      <path d="M15 3h6v6" />
-      <path d="M10 14 21 3" />
-      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-    </>
-  ),
-  calendar: (
-    <>
-      <rect width="18" height="18" x="3" y="4" rx="2" />
-      <line x1="16" x2="16" y1="2" y2="6" />
-      <line x1="8" x2="8" y1="2" y2="6" />
-      <line x1="3" x2="21" y1="10" y2="10" />
-    </>
-  ),
-  "calendar-days": (
-    <>
-      <rect width="18" height="18" x="3" y="4" rx="2" />
-      <line x1="16" x2="16" y1="2" y2="6" />
-      <line x1="8" x2="8" y1="2" y2="6" />
-      <line x1="3" x2="21" y1="10" y2="10" />
-      <path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
-    </>
-  ),
-  clock: (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 6v6l4 2" />
-    </>
-  ),
-  "credit-card": (
-    <>
-      <rect width="18" height="14" x="3" y="5" rx="2" />
-      <line x1="3" x2="21" y1="10" y2="10" />
-    </>
-  ),
-  ellipsis: (
-    <>
-      <circle cx="5" cy="12" r="1" />
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="19" cy="12" r="1" />
-    </>
-  ),
-  "ellipsis-vertical": (
-    <>
-      <circle cx="12" cy="5" r="1" />
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="12" cy="19" r="1" />
-    </>
-  ),
-  "grid-3x3": (
-    <>
-      <rect width="5" height="5" x="3" y="3" rx="1" />
-      <rect width="5" height="5" x="9.5" y="3" rx="1" />
-      <rect width="5" height="5" x="16" y="3" rx="1" />
-      <rect width="5" height="5" x="3" y="9.5" rx="1" />
-      <rect width="5" height="5" x="9.5" y="9.5" rx="1" />
-      <rect width="5" height="5" x="16" y="9.5" rx="1" />
-      <rect width="5" height="5" x="3" y="16" rx="1" />
-      <rect width="5" height="5" x="9.5" y="16" rx="1" />
-      <rect width="5" height="5" x="16" y="16" rx="1" />
-    </>
-  ),
-  info: (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
-    </>
-  ),
-  pencil: <path d="M12 20h9M16.5 3.5a2.12 2.12 0 1 1 3 3L7 19l-4 1 1-4Z" />,
-  plus: (
-    <>
-      <path d="M12 5v14" />
-      <path d="M5 12h14" />
-    </>
-  ),
-  trash: (
-    <>
-      <path d="M3 6h18" />
-      <path d="M8 6V4h8v2" />
-      <path d="M19 6l-1 14H6L5 6" />
-      <path d="M10 11v6" />
-      <path d="M14 11v6" />
-    </>
-  ),
-  user: (
-    <>
-      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-      <circle cx="12" cy="7" r="4" />
-    </>
-  ),
-  settings: (
-    <>
-      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
-      <circle cx="12" cy="12" r="3" />
-    </>
-  ),
-  "calendar-search": (
-    <>
-      <path d="M21 12V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.5" />
-      <path d="M16 2v4" />
-      <path d="M8 2v4" />
-      <path d="M3 10h18" />
-      <path d="M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6v0Z" />
-      <path d="m22 22-1.5-1.5" />
-    </>
-  ),
-  "trash-2": (
-    <>
-      <path d="M3 6h18" />
-      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
-      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-      <line x1="10" x2="10" y1="11" y2="17" />
-      <line x1="14" x2="14" y1="11" y2="17" />
-    </>
-  ),
-  star: (
-    <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
-  ),
-  copy: (
-    <>
-      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-    </>
-  ),
-  globe: (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
-      <path d="M2 12h20" />
-    </>
-  ),
-  "map-pin": (
-    <>
-      <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
-      <circle cx="12" cy="10" r="3" />
-    </>
-  ),
-  "calendar-x-2": (
-    <>
-      <path d="M8 2v4" />
-      <path d="M16 2v4" />
-      <path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
-      <path d="M3 10h18" />
-      <path d="m17 22 5-5" />
-      <path d="m17 17 5 5" />
-    </>
-  ),
-  "square-check": (
-    <>
-      <rect width="18" height="18" x="3" y="3" rx="2" />
-      <path d="m9 12 2 2 4-4" />
-    </>
-  ),
-  "refresh-ccw": (
-    <>
-      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
-      <path d="M21 3v5h-5" />
-      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
-      <path d="M8 16H3v5" />
-    </>
-  ),
-  "user-plus": (
-    <>
-      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-      <circle cx="9" cy="7" r="4" />
-      <line x1="19" x2="19" y1="8" y2="14" />
-      <line x1="22" x2="16" y1="11" y2="11" />
-    </>
-  ),
-} as const;
-
-export type IconName = keyof typeof iconPaths;
-
-export const Icon = forwardRef<
-  SVGSVGElement,
-  SVGProps<SVGSVGElement> & {
-    name: IconName;
-    size?: number | string;
-  }
->(function Icon({ name, size = 16, className, ...props }, ref) {
-  return (
-    <svg
-      ref={ref}
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={cn("shrink-0 fill-transparent", className)}
-      aria-hidden
-      {...props}
-    >
-      {iconPaths[name]}
-    </svg>
-  );
-});
-
-export const Spinner = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(function Spinner(
-  { className, ...props },
-  ref
-) {
-  return (
-    <svg ref={ref} viewBox="0 0 24 24" className={cn(className)} aria-hidden {...props}>
-      <path
-        className="fill-default"
-        d="M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 19a8 8 0 1 1 8-8 8 8 0 0 1-8 8Z"
-        opacity=".25"
-      />
-      <path
-        className="animate-spinning fill-emphasis origin-center"
-        d="M10.14 1.16a11 11 0 0 0-9 8.92A1.59 1.59 0 0 0 2.46 12a1.52 1.52 0 0 0 1.65-1.3 8 8 0 0 1 6.66-6.61A1.42 1.42 0 0 0 12 2.69a1.57 1.57 0 0 0-1.86-1.53Z"
-      />
-    </svg>
-  );
-});
-
-export function IconSprites() {
-  return null;
-}