untitledui 0.1.5 → 0.1.8

package/templates/default/src/components/shared/progress-indicators/progress-indicators.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { cx } from "@/components/utils/cx";
-
-export interface ProgressBarProps {
-    value: number;
-    min?: number;
-    max?: number;
-    className?: string;
-    progressClassName?: string;
-    valueFormatter?: (value: number, valueInPercentage: number) => string | number;
-}
-
-export const ProgressBar = ({ value, min = 0, max = 100, className, progressClassName }: ProgressBarProps) => {
-    const percentage = ((value - min) * 100) / (max - min);
-
-    return (
-        <div
-            role="progressbar"
-            aria-valuenow={value}
-            aria-valuemin={min}
-            aria-valuemax={max}
-            className={cx("h-2 w-full overflow-hidden rounded-md bg-quaternary", className)}
-        >
-            <div
-                // Use transform instead of width to avoid layout thrashing (and for smoother animation)
-                style={{ transform: `translateX(-${100 - percentage}%)` }}
-                className={cx("size-full rounded-md bg-fg-brand-primary transition duration-75 ease-linear", progressClassName)}
-            />
-        </div>
-    );
-};
-
-export const ProgressBarTextRight = ({ value, min = 0, max = 100, valueFormatter }: ProgressBarProps) => {
-    const percentage = ((value - min) * 100) / (max - min);
-
-    return (
-        <div className="flex items-center gap-3">
-            <ProgressBar min={min} max={max} value={value} />
-            <span className="tt-sm-md text-secondary tabular-nums">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</span>
-        </div>
-    );
-};
-
-export const ProgressBarTextBottom = ({ value, min = 0, max = 100, valueFormatter }: ProgressBarProps) => {
-    const percentage = ((value - min) * 100) / (max - min);
-
-    return (
-        <div className="flex flex-col items-end gap-2">
-            <ProgressBar min={min} max={max} value={value} />
-            <span className="tt-sm-md text-secondary tabular-nums">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</span>
-        </div>
-    );
-};
-
-export const ProgressBarTextTopFloating = ({ value, min = 0, max = 100, valueFormatter }: ProgressBarProps) => {
-    const percentage = ((value - min) * 100) / (max - min);
-
-    return (
-        <div className="relative flex flex-col items-end gap-2">
-            <ProgressBar min={min} max={max} value={value} />
-            <div
-                style={{ left: `${percentage}%` }}
-                className="absolute -top-2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-border-secondary_alt"
-            >
-                <div className="tt-xs-semi text-secondary tabular-nums">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
-            </div>
-        </div>
-    );
-};
-
-export const ProgressBarTextBottomFloating = ({ value, min = 0, max = 100, valueFormatter }: ProgressBarProps) => {
-    const percentage = ((value - min) * 100) / (max - min);
-
-    return (
-        <div className="relative flex flex-col items-end gap-2">
-            <ProgressBar min={min} max={max} value={value} />
-            <div
-                style={{ left: `${percentage}%` }}
-                className="absolute -bottom-2 -translate-x-1/2 translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-border-secondary_alt"
-            >
-                <div className="tt-xs-semi text-secondary">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
-            </div>
-        </div>
-    );
-};

package/templates/default/src/components/shared/progress-indicators/simple-circle.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-const CircleProgressBar = (props: { value: number; min?: 0; max?: 100 }) => {
-    const { value, min = 0, max = 100 } = props;
-    const percentage = ((value - min) * 100) / (max - min);
-
-    return (
-        <div role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} className="relative flex w-max items-center justify-center">
-            <span className="absolute tt-sm-md text-primary">{percentage}%</span>
-            <svg className="size-16 -rotate-90" viewBox="0 0 60 60">
-                <circle className="stroke-bg-quaternary" cx="30" cy="30" r="26" fill="none" strokeWidth="6" />
-                <circle
-                    className="stroke-fg-brand-primary"
-                    style={{
-                        strokeDashoffset: `calc(100 - ${percentage})`,
-                    }}
-                    cx="30"
-                    cy="30"
-                    r="26"
-                    fill="none"
-                    strokeWidth="6"
-                    strokeDasharray="100"
-                    pathLength="100"
-                    strokeLinecap="round"
-                />
-            </svg>
-        </div>
-    );
-};

package/templates/default/src/components/shared/radio-buttons/radio-buttons.tsx

@@ -1,125 +0,0 @@
-"use client";
-
-import { type ReactNode, type Ref, createContext, useContext } from "react";
-import type { RadioGroupProps as AriaRadioGroupProps } from "react-aria-components";
-import { type RadioProps as AriaRadioProps, Radio, RadioGroup } from "react-aria-components";
-import { cx } from "@/components/utils/cx";
-
-export interface RadioButtonGroupContextType {
-    size?: "sm" | "md";
-}
-
-const RadioButtonGroupContext = createContext<RadioButtonGroupContextType | null>(null);
-
-export interface RadioButtonBaseProps {
-    size?: "sm" | "md";
-    className?: string;
-    isFocused?: boolean;
-    isSelected?: boolean;
-    isDisabled?: boolean;
-}
-
-export const RadioButtonBase = ({ className, isFocused, isSelected, isDisabled, size = "sm" }: RadioButtonBaseProps) => {
-    return (
-        <div
-            className={cx(
-                "flex size-4 min-h-4 min-w-4 cursor-pointer appearance-none items-center justify-center rounded-full bg-primary ring-1 ring-border-primary ring-inset",
-                size === "md" && "size-5 min-h-5 min-w-5",
-                isSelected && !isDisabled && "bg-brand-solid ring-bg-brand-solid",
-                isDisabled && "cursor-not-allowed border-disabled bg-disabled_subtle",
-                isFocused && "outline-2 outline-offset-2 outline-focus-ring",
-                className,
-            )}
-        >
-            <div
-                className={cx(
-                    "size-1.5 rounded-full bg-fg-white opacity-0 transition-inherit-all",
-                    size === "md" && "size-2",
-                    isDisabled && "bg-fg-disabled_subtle",
-                    isSelected && "opacity-100",
-                )}
-            />
-        </div>
-    );
-};
-RadioButtonBase.displayName = "RadioButtonBase";
-
-interface RadioButtonProps extends AriaRadioProps {
-    size?: "sm" | "md";
-    label?: ReactNode;
-    hint?: ReactNode;
-    ref?: Ref<HTMLLabelElement>;
-}
-
-export const RadioButton = ({ label, hint, className, size = "sm", ...ariaRadioProps }: RadioButtonProps) => {
-    const context = useContext(RadioButtonGroupContext);
-
-    size = context?.size ?? size;
-
-    const sizes = {
-        sm: {
-            root: "gap-2",
-            textWrapper: "",
-            label: "tt-sm-md",
-            hint: "tt-sm",
-        },
-        md: {
-            root: "gap-3",
-            textWrapper: "gap-0.5",
-            label: "tt-md-md",
-            hint: "tt-md",
-        },
-    };
-
-    return (
-        <Radio
-            {...ariaRadioProps}
-            className={(renderProps) =>
-                cx(
-                    "flex items-start",
-                    renderProps.isDisabled && "cursor-not-allowed",
-                    sizes[size].root,
-                    typeof className === "function" ? className(renderProps) : className,
-                )
-            }
-        >
-            {({ isSelected, isDisabled, isFocused }) => (
-                <>
-                    <RadioButtonBase
-                        size={size}
-                        isSelected={isSelected}
-                        isDisabled={isDisabled}
-                        isFocused={isFocused}
-                        className={label || hint ? "mt-0.5" : ""}
-                    />
-                    {(label || hint) && (
-                        <div className={cx("inline-flex flex-col", sizes[size].textWrapper)}>
-                            {label && <p className={cx("text-secondary select-none", sizes[size].label)}>{label}</p>}
-                            {hint && (
-                                <span className={cx("pointer-events-none text-tertiary", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>
-                                    {hint}
-                                </span>
-                            )}
-                        </div>
-                    )}
-                </>
-            )}
-        </Radio>
-    );
-};
-RadioButton.displayName = "Checkbox";
-
-interface RadioButtonGroupProps extends RadioButtonGroupContextType, AriaRadioGroupProps {
-    children: ReactNode;
-    className?: string;
-}
-
-export const RadioButtonGroup = ({ children, className, size = "sm", ...props }: RadioButtonGroupProps) => {
-    return (
-        <RadioButtonGroupContext.Provider value={{ size }}>
-            <RadioGroup {...props} className={cx("flex flex-col gap-4", className)}>
-                {children}
-            </RadioGroup>
-        </RadioButtonGroupContext.Provider>
-    );
-};

package/templates/default/src/components/shared/radio-groups/radio-group-avatar.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import type { RadioGroupProps } from "react-aria-components";
-import { Label, Radio, RadioGroup, Text } from "react-aria-components";
-import AvatarComponent from "@/components/shared/avatar/avatar";
-import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils/cx";
-
-interface AvatarItemType {
-    id: string;
-    name: string;
-    username: string;
-    title: string;
-    avatarUrl: string;
-    disabled?: boolean;
-}
-
-interface RadioGroupAvatarProps extends RadioGroupProps {
-    size?: "sm" | "md";
-    items: AvatarItemType[];
-}
-
-export const RadioGroupAvatar = ({ items, size = "sm", className, ...props }: RadioGroupAvatarProps) => {
-    return (
-        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
-            {items.map((person) => (
-                <Radio
-                    isDisabled={person.disabled}
-                    key={person.id}
-                    value={person.id}
-                    className={({ isDisabled, isSelected, isFocusVisible }) =>
-                        cx(
-                            "relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 transition duration-100 ring-inset",
-                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
-                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled_subtle",
-                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
-                        )
-                    }
-                >
-                    {({ isDisabled, isSelected, isFocusVisible }) => (
-                        <>
-                            <div className={cx("flex flex-1", size === "md" ? "gap-3 md:gap-4" : "gap-3")}>
-                                <AvatarComponent alt={person.name} src={person.avatarUrl} size={size === "md" ? "md" : "sm"} />
-
-                                <div className={cx("flex flex-col", size === "md" ? "gap-0.5" : "")}>
-                                    <Label className={cx("pointer-events-none flex", size === "md" ? "gap-1.5" : "gap-1")}>
-                                        <span className={cx("text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>{person.name}</span>
-                                        <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{person.username}</span>
-                                    </Label>
-                                    <Text slot="description" className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
-                                        {person.title}
-                                    </Text>
-                                </div>
-                            </div>
-                            <CheckboxBase size={size === "md" ? "md" : "sm"} isDisabled={isDisabled} isSelected={isSelected} isFocused={isFocusVisible} />
-                        </>
-                    )}
-                </Radio>
-            ))}
-        </RadioGroup>
-    );
-};

package/templates/default/src/components/shared/radio-groups/radio-group-checkbox.tsx

@@ -1,72 +0,0 @@
-"use client";
-
-import type { FC } from "react";
-import type { RadioGroupProps } from "react-aria-components";
-import { Label, Radio, RadioGroup, Text } from "react-aria-components";
-import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils/cx";
-
-type RadioGroupItemType = {
-    value: string;
-    title: string;
-    disabled?: boolean;
-    description: string;
-    secondaryTitle: string;
-    icon: FC<{ className?: string }>;
-};
-
-interface RadioGroupCheckboxProps extends RadioGroupProps {
-    size?: "sm" | "md";
-    items: RadioGroupItemType[];
-}
-
-export const RadioGroupCheckbox = ({ items, size = "sm", className, ...props }: RadioGroupCheckboxProps) => {
-    return (
-        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
-            {items.map((plan) => (
-                <Radio
-                    isDisabled={plan.disabled}
-                    key={plan.value}
-                    value={plan.value}
-                    className={({ isDisabled, isFocusVisible, isSelected }) =>
-                        cx(
-                            "relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 transition duration-100 ring-inset",
-                            size === "md" ? "gap-3" : "gap-2",
-                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
-                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled_subtle",
-                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
-                        )
-                    }
-                >
-                    {({ isDisabled, isSelected, isFocusVisible }) => (
-                        <>
-                            <CheckboxBase
-                                size={size === "md" ? "md" : "sm"}
-                                isDisabled={isDisabled}
-                                isSelected={isSelected}
-                                isFocused={isFocusVisible}
-                                className="mt-0.5"
-                            />
-
-                            <div
-                                className={cx(
-                                    "flex flex-col",
-
-                                    size === "md" ? "gap-0.5" : "",
-                                )}
-                            >
-                                <Label className={cx("pointer-events-none flex", size === "md" ? "gap-1.5" : "gap-1")}>
-                                    <span className={cx("text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>{plan.title}</span>
-                                    <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.secondaryTitle}</span>
-                                </Label>
-                                <Text slot="description" className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
-                                    {plan.description}
-                                </Text>
-                            </div>
-                        </>
-                    )}
-                </Radio>
-            ))}
-        </RadioGroup>
-    );
-};

package/templates/default/src/components/shared/radio-groups/radio-group-icon-card.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import type { FC, ReactNode } from "react";
-import type { RadioGroupProps } from "react-aria-components";
-import { Radio, RadioGroup } from "react-aria-components";
-import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icons";
-import { BadgeWithDot } from "@/components/shared/badges/badges";
-import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils/cx";
-
-type IconCardItemType = {
-    value: string;
-    title: string;
-    description: string;
-    secondaryTitle?: string;
-    disabled?: boolean;
-    price?: string;
-    badge?: ReactNode;
-    icon: FC<{ className?: string }>;
-};
-
-interface RadioGroupIconCardProps extends RadioGroupProps {
-    size?: "sm" | "md";
-    items: IconCardItemType[];
-}
-
-export const RadioGroupIconCard = ({ items, size = "sm", className, ...props }: RadioGroupIconCardProps) => {
-    return (
-        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
-            {items.map((plan) => (
-                <Radio
-                    isDisabled={plan.disabled}
-                    key={plan.value}
-                    value={plan.value}
-                    className={({ isDisabled, isSelected, isFocusVisible }) =>
-                        cx(
-                            "relative block cursor-pointer rounded-xl bg-primary transition duration-100 ring-inset",
-                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
-                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled",
-                            isSelected && isDisabled && "ring-border-disabled_subtle",
-                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
-                        )
-                    }
-                >
-                    {({ isDisabled, isSelected, isFocusVisible }) => (
-                        <>
-                            <div
-                                className={cx(
-                                    "flex items-center gap-3 rounded-t-xl p-3 pr-5 transition-inherit-all ring-inset",
-                                    isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
-                                    isDisabled && "ring-border-disabled",
-                                    isSelected && isDisabled && "ring-border-disabled_subtle",
-                                    isFocusVisible && "outline-hidden",
-                                )}
-                            >
-                                <FeaturedIcon
-                                    size={size === "md" ? "md" : "sm"}
-                                    icon={plan.icon}
-                                    color="gray"
-                                    theme="modern"
-                                    className={cx(isDisabled && "bg-disabled text-fg-disabled")}
-                                />
-
-                                <span className={cx("mr-1 text-secondary", size === "md" ? "tt-lg-semi" : "tt-md-semi")}>{plan.title}</span>
-
-                                <CheckboxBase
-                                    size={size === "md" ? "md" : "sm"}
-                                    className="ml-auto"
-                                    isDisabled={isDisabled}
-                                    isSelected={isSelected}
-                                    isFocused={isFocusVisible}
-                                />
-                            </div>
-
-                            <div className="flex flex-col-reverse items-start justify-between gap-4 rounded-b-lg p-4 sm:flex-row sm:gap-1">
-                                <div className={cx("flex flex-col", size === "md" ? "gap-2" : "gap-1")}>
-                                    <p className="flex items-baseline gap-1">
-                                        <span className={cx("text-secondary", size === "md" ? "td-md-semi" : "td-sm-semi")}>{plan.price}</span>
-                                        <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.secondaryTitle}</span>
-                                    </p>
-                                    <p className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.description}</p>
-                                </div>
-                                {plan.badge && (
-                                    <BadgeWithDot size="sm" type="modern" color="success">
-                                        {plan.badge}
-                                    </BadgeWithDot>
-                                )}
-                            </div>
-                        </>
-                    )}
-                </Radio>
-            ))}
-        </RadioGroup>
-    );
-};

package/templates/default/src/components/shared/radio-groups/radio-group-icon-simple.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import type { FC } from "react";
-import type { RadioGroupProps } from "react-aria-components";
-import { Label, Radio, RadioGroup, Text } from "react-aria-components";
-import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icons";
-import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils/cx";
-
-type RadioGroupItemType = {
-    value: string;
-    title: string;
-    disabled?: boolean;
-    description: string;
-    secondaryTitle: string;
-    icon: FC<{ className?: string }>;
-};
-
-interface RadioGroupIconSimpleProps extends RadioGroupProps {
-    size?: "sm" | "md";
-    items: RadioGroupItemType[];
-}
-
-export const RadioGroupIconSimple = ({ items, size = "sm", className, ...props }: RadioGroupIconSimpleProps) => {
-    return (
-        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
-            {items.map((plan) => (
-                <Radio
-                    isDisabled={plan.disabled}
-                    key={plan.value}
-                    value={plan.value}
-                    className={({ isDisabled, isSelected, isFocusVisible }) =>
-                        cx(
-                            "relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 transition duration-100 ring-inset",
-                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
-                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled",
-                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
-                        )
-                    }
-                >
-                    {({ isDisabled, isSelected, isFocusVisible }) => (
-                        <>
-                            <div className="flex flex-1 gap-3">
-                                <FeaturedIcon
-                                    icon={plan.icon}
-                                    size={size === "md" ? "md" : "sm"}
-                                    color="gray"
-                                    theme="modern"
-                                    className={cx(isDisabled && "bg-disabled text-fg-disabled")}
-                                />
-
-                                <div className={cx("flex flex-col", size === "md" ? "gap-0.5" : "")}>
-                                    <Label className={cx("pointer-events-none flex", size === "md" ? "gap-1.5" : "gap-1")}>
-                                        <span className={cx("text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>{plan.title}</span>
-                                        <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.secondaryTitle}</span>
-                                    </Label>
-                                    <Text slot="description" className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
-                                        {plan.description}
-                                    </Text>
-                                </div>
-                            </div>
-
-                            <CheckboxBase size={size === "md" ? "md" : "sm"} isDisabled={isDisabled} isSelected={isSelected} isFocused={isFocusVisible} />
-                        </>
-                    )}
-                </Radio>
-            ))}
-        </RadioGroup>
-    );
-};

package/templates/default/src/components/shared/radio-groups/radio-group-payment-icon.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import type { RadioGroupProps } from "react-aria-components";
-import { Label, Radio, RadioGroup, Text } from "react-aria-components";
-import Button from "@/components/shared/buttons/button";
-import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils/cx";
-
-interface PaymentCardItemType {
-    value: string;
-    title: string;
-    description: string;
-    logo: ReactNode;
-    disabled?: boolean;
-}
-
-interface RadioGroupPaymentIconProps extends RadioGroupProps {
-    size?: "sm" | "md";
-    items: PaymentCardItemType[];
-}
-
-export const RadioGroupPaymentIcon = ({ items, size = "sm", className, ...props }: RadioGroupPaymentIconProps) => {
-    return (
-        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
-            {items.map((card) => (
-                <Radio
-                    isDisabled={card.disabled}
-                    key={card.value}
-                    value={card.value}
-                    className={({ isDisabled, isSelected, isFocusVisible }) =>
-                        cx(
-                            "relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 transition duration-100 ring-inset",
-                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
-                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled_subtle",
-                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
-                        )
-                    }
-                >
-                    {({ isDisabled, isSelected, isFocusVisible }) => (
-                        <>
-                            <div className={cx("flex flex-1", size === "md" ? "gap-3 md:gap-4" : "gap-3")}>
-                                <span className="shrink-0">{card.logo}</span>
-                                <div>
-                                    <div className={cx("flex flex-col", size === "md" ? "gap-0.5" : "")}>
-                                        <Label className={cx("pointer-events-none text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>
-                                            {card.title}
-                                        </Label>
-                                        <Text slot="description" className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
-                                            {card.description}
-                                        </Text>
-                                    </div>
-                                    <div className={cx("flex gap-3", size === "md" ? "mt-3" : "mt-2")}>
-                                        <Button color="link-gray" size={size === "md" ? "md" : "sm"} isDisabled={isDisabled}>
-                                            Set as default
-                                        </Button>
-                                        <Button color="link-color" size={size === "md" ? "md" : "sm"} isDisabled={isDisabled}>
-                                            Edit
-                                        </Button>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <CheckboxBase size={size === "md" ? "md" : "sm"} isDisabled={isDisabled} isSelected={isSelected} isFocused={isFocusVisible} />
-                        </>
-                    )}
-                </Radio>
-            ))}
-        </RadioGroup>
-    );
-};