sapient-ai 0.1.0

package/local-registry/src/components/ui/sapient-product-card.tsx

@@ -0,0 +1,468 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { SapientIcon } from '@/components/ui/sapient-icon';
+
+// ─── Icon helper ─────────────────────────────────────────────────────────────
+function Icon({
+    name,
+    size = 24,
+    className,
+    alt = '',
+}: {
+    name: string;
+    size?: number;
+    className?: string;
+    alt?: string;
+}) {
+    return (
+        <SapientIcon
+            name={name}
+            label={alt}
+            size={size}
+            className={className}
+        />
+    );
+}
+
+// ─── Badge ────────────────────────────────────────────────────────────────────
+function Badge({ label = 'Label' }: { label?: string }) {
+    return (
+        <div className="inline-flex items-center gap-[var(--spacing-xs4,4px)] h-5 px-[var(--spacing-xs2,8px)] rounded-[var(--radius-token-full,100px)] bg-[hsl(var(--secondary-600))]">
+            <span className="text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-regular,400)] text-white whitespace-nowrap">
+                {label}
+            </span>
+        </div>
+    );
+}
+
+// ─── Price row ────────────────────────────────────────────────────────────────
+function PriceRow({
+    price = '1.234€',
+    showInfo = true,
+    inverted = false,
+}: {
+    price?: string;
+    showInfo?: boolean;
+    inverted?: boolean;
+}) {
+    return (
+        <div className="flex items-center gap-[var(--spacing-xs3,6px)] w-full">
+            <span
+                className={cn(
+                    'text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] whitespace-nowrap',
+                    inverted ? 'text-white' : 'text-[hsl(var(--neutral-950))]'
+                )}
+            >
+                {price}
+            </span>
+            {showInfo && (
+                <Icon
+                    name="info-circle"
+                    size={24}
+                    alt="Price info"
+                    className={cn(
+                        'opacity-70',
+                        inverted ? 'brightness-0 invert' : ''
+                    )}
+                />
+            )}
+        </div>
+    );
+}
+
+// ─── Expand/Zoom icon button ──────────────────────────────────────────────────
+function ZoomButton({ inverted = false }: { inverted?: boolean }) {
+    return (
+        <button
+            type="button"
+            aria-label="Expand"
+            className={cn(
+                'inline-flex items-center justify-center shrink-0 size-[var(--sizing-s,40px)] rounded-[var(--radius-token-full,100px)] border backdrop-blur-[12px] transition-colors',
+                inverted
+                    ? 'border-white bg-white/10 text-white hover:bg-white/20'
+                    : 'border-[hsl(var(--neutral-800))] bg-white/10 text-[hsl(var(--neutral-950))] hover:bg-[hsl(var(--state-hover))]'
+            )}
+        >
+            <Icon name="expand-05" size={24} alt="Expand" className={cn(inverted ? 'brightness-0 invert' : '')} />
+        </button>
+    );
+}
+
+// ─── Card image ───────────────────────────────────────────────────────────────
+function CardImage({
+    src,
+    alt = '',
+    aspectClass,
+    className,
+}: {
+    src: string;
+    alt?: string;
+    aspectClass?: string;
+    className?: string;
+}) {
+    return (
+        <div className={cn('relative w-full overflow-hidden', aspectClass, className)}>
+            <img
+                src={src}
+                alt={alt}
+                className="absolute inset-0 w-full h-full object-cover"
+            />
+        </div>
+    );
+}
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ImageRatio = '4:5' | '4:3' | '16:9';
+
+/** Aspect-ratio utility classes keyed by ratio */
+const ASPECT_CLASS: Record<ImageRatio, string> = {
+    '16:9': 'aspect-video',          // 16/9
+    '4:3': 'aspect-[4/3]',
+    '4:5': 'aspect-[4/5]',
+};
+
+/** Card width per ratio (mirrors Figma) */
+const CARD_WIDTH: Record<ImageRatio, string> = {
+    '16:9': 'w-[353px]',
+    '4:3': 'w-[353px]',
+    '4:5': 'w-[353px]',
+};
+
+// ─── Variant A: No image (info card) ─────────────────────────────────────────
+
+export interface ProductCardNoImageProps {
+    className?: string;
+    headline?: string;
+    body?: string;
+    price?: string;
+    badgeLabel?: string;
+    imageRatio?: ImageRatio;
+    showBadge?: boolean;
+    showBody?: boolean;
+    showPrice?: boolean;
+    showPriceInfo?: boolean;
+    /** When false renders without background (ghost) */
+    withBackground?: boolean;
+}
+
+/**
+ * **Product Card – No Image**
+ *
+ * Displays product info text and price without a hero image.
+ * Supports 4:5, 4:3, and 16:9 layouts.
+ */
+export function ProductCardNoImage({
+    className,
+    headline = 'Headline lorem ipsum',
+    body = 'Body lorem ipsum dolor sit amet, consectetur adipiscing',
+    price = '1.234€',
+    badgeLabel = 'Label',
+    imageRatio = '4:3',
+    showBadge = true,
+    showBody = true,
+    showPrice = true,
+    showPriceInfo = true,
+    withBackground = true,
+}: ProductCardNoImageProps) {
+    const is45 = imageRatio === '4:5';
+
+    return (
+        <div
+            className={cn(
+                'flex flex-col items-start p-[var(--spacing-l,24px)] rounded-[var(--radius-token-lg,32px)] relative',
+                CARD_WIDTH[imageRatio],
+                withBackground && 'bg-white',
+                // height
+                is45 ? 'h-[442px] justify-between' : 'gap-[var(--spacing-l,24px)]',
+                imageRatio === '4:3' && 'h-[283px] justify-between',
+                className
+            )}
+        >
+            {/* Content up */}
+            <div
+                className={cn(
+                    'flex flex-col items-start w-full',
+                    is45 ? 'gap-[var(--spacing-m,16px)] shrink-0' : 'gap-[var(--spacing-l,24px)] flex-1 min-h-0'
+                )}
+            >
+                {showBadge && <Badge label={badgeLabel} />}
+
+                {/* Heading + body – only for 4:3 and 16:9 */}
+                {!is45 && (
+                    <div className="flex flex-col gap-[var(--spacing-xs2,8px)] items-start w-full">
+                        <p className="text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] w-full overflow-hidden text-ellipsis whitespace-pre-wrap">
+                            {headline}
+                        </p>
+                        {showBody && (
+                            <p className="text-[length:var(--text-body-small,14px)] leading-[var(--leading-body-small,22px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-600))] w-full overflow-hidden text-ellipsis whitespace-pre-wrap">
+                                {body}
+                            </p>
+                        )}
+                    </div>
+                )}
+
+                {/* Headline only for 4:5 */}
+                {is45 && (
+                    <p className="text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] w-full overflow-hidden text-ellipsis whitespace-pre-wrap">
+                        {headline}
+                    </p>
+                )}
+            </div>
+
+            {/* Price */}
+            {showPrice && (
+                <PriceRow price={price} showInfo={showPriceInfo} />
+            )}
+
+            {/* Icon button – top-right (only 4:3, 16:9) */}
+            {!is45 && (
+                <div className="absolute top-4 right-4">
+                    <ZoomButton />
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ─── Variant B: Full image (image fills the whole card) ───────────────────────
+
+export interface ProductCardFullImageProps {
+    className?: string;
+    imageSrc: string;
+    imageAlt?: string;
+    headline?: string;
+    body?: string;
+    price?: string;
+    badgeLabel?: string;
+    imageRatio?: ImageRatio;
+    showBadge?: boolean;
+    showBody?: boolean;
+    showPrice?: boolean;
+    showPriceInfo?: boolean;
+    showZoomButton?: boolean;
+    state?: 'enabled' | 'hover';
+}
+
+/**
+ * **Product Card – Full Image**
+ *
+ * Hero image fills the entire card. Text is overlaid at the bottom.
+ * Supports 4:5, 4:3, and 16:9 ratios.
+ */
+export function ProductCardFullImage({
+    className,
+    imageSrc,
+    imageAlt = '',
+    headline = 'Headline lorem ipsum',
+    body = 'Body lorem ipsum dolor sit amet, consectetur',
+    price = '1.234€',
+    badgeLabel = 'Label',
+    imageRatio = '4:5',
+    showBadge = true,
+    showBody = true,
+    showPrice = true,
+    showPriceInfo = true,
+    showZoomButton = true,
+    state = 'enabled',
+}: ProductCardFullImageProps) {
+    const is169 = imageRatio === '16:9';
+    const is45 = imageRatio === '4:5';
+    const showTextOverlay = is45 || imageRatio === '4:3';
+
+    return (
+        <div
+            className={cn(
+                'relative flex flex-col items-start overflow-hidden rounded-[var(--radius-token-lg,32px)]',
+                CARD_WIDTH[imageRatio],
+                ASPECT_CLASS[imageRatio],
+                className
+            )}
+        >
+            {/* Full-bleed image */}
+            <img
+                src={imageSrc}
+                alt={imageAlt}
+                className="absolute inset-0 w-full h-full object-cover"
+            />
+
+            {/* Top gradient + badge/zoom overlay */}
+            <div
+                className={cn(
+                    'absolute inset-x-0 top-0 flex items-start justify-between px-[var(--spacing-l,24px)] pt-[var(--spacing-l,24px)] pb-[var(--spacing-xl,32px)]',
+                    !is169 && 'bg-gradient-to-b from-black/15 to-transparent'
+                )}
+            >
+                {showBadge && <Badge label={badgeLabel} />}
+                {(is45 || imageRatio === '4:3') && showZoomButton && (
+                    <ZoomButton inverted />
+                )}
+            </div>
+
+            {/* Bottom text overlay – 4:5 and 4:3 */}
+            {showTextOverlay && (
+                <div className="absolute inset-x-0 bottom-0 bg-gradient-to-b from-transparent to-black/30 px-[var(--spacing-l,24px)] pt-[var(--spacing-xl2,40px)] pb-[var(--spacing-l,24px)] flex flex-col gap-[var(--spacing-xs2,8px)]">
+                    <p
+                        className={cn(
+                            'text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] text-white w-full overflow-hidden text-ellipsis whitespace-pre-wrap',
+                            state === 'hover' && 'text-[hsl(var(--foreground-strong))]'
+                        )}
+                    >
+                        {headline}
+                    </p>
+                    {showBody && (
+                        <p className="text-[length:var(--text-body-small,14px)] leading-[var(--leading-body-small,22px)] font-[var(--font-weight-regular,400)] text-white max-h-[44px] overflow-hidden text-ellipsis whitespace-pre-wrap w-full">
+                            {body}
+                        </p>
+                    )}
+                    {showPrice && (
+                        <PriceRow price={price} showInfo={showPriceInfo} inverted />
+                    )}
+                </div>
+            )}
+
+            {/* Bottom text overlay – 16:9 */}
+            {is169 && (
+                <div className="absolute inset-x-0 bottom-0 bg-gradient-to-b from-transparent to-black/30 px-[var(--spacing-l,24px)] pt-[var(--spacing-xl2,40px)] pb-[var(--spacing-l,24px)] flex flex-col gap-[var(--spacing-xs2,8px)]">
+                    <p
+                        className={cn(
+                            'text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] text-white w-full overflow-hidden text-ellipsis whitespace-pre-wrap',
+                            state === 'hover' && 'text-[hsl(var(--foreground-strong))]'
+                        )}
+                    >
+                        {headline}
+                    </p>
+                    {showPrice && (
+                        <PriceRow price={price} showInfo={showPriceInfo} inverted />
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ─── Variant C: Split content (image top + text bottom) ───────────────────────
+
+export interface ProductCardSplitProps {
+    className?: string;
+    imageSrc: string;
+    imageAlt?: string;
+    headline?: string;
+    body?: string;
+    price?: string;
+    badgeLabel?: string;
+    showBadge?: boolean;
+    showBody?: boolean;
+    showImage?: boolean;
+    showPrice?: boolean;
+    showPriceInfo?: boolean;
+    showZoomButton?: boolean;
+    /** Wraps content in a white card background */
+    withBackground?: boolean;
+    state?: 'enabled' | 'hover';
+}
+
+/**
+ * **Product Card – Split Content**
+ *
+ * Image on top, text panel below. Comes in two layouts:
+ * - `withBackground=true` → rounded card with white text panel
+ * - `withBackground=false` → transparent, text directly below image
+ */
+export function ProductCardSplit({
+    className,
+    imageSrc,
+    imageAlt = '',
+    headline = 'Headline lorem ipsum dolor sit amet, consectetur adipiscing elit',
+    body = 'Body lorem ipsum dolor sit amet, consectetur adipiscing elit',
+    price = '1.234€',
+    badgeLabel = 'Label',
+    showBadge = true,
+    showBody = true,
+    showImage = true,
+    showPrice = true,
+    showPriceInfo = true,
+    showZoomButton = true,
+    withBackground = true,
+    state = 'enabled',
+}: ProductCardSplitProps) {
+    const isHover = state === 'hover';
+
+    return (
+        <div
+            className={cn(
+                'flex flex-col items-start w-[353px] relative',
+                withBackground && 'overflow-hidden rounded-[var(--radius-token-lg,32px)]',
+                className
+            )}
+        >
+            {/* Image section */}
+            {showImage && (
+                <div
+                    className={cn(
+                        'relative w-full overflow-hidden shrink-0',
+                        withBackground
+                            ? 'rounded-tl-[var(--radius-token-lg,32px)] rounded-tr-[var(--radius-token-lg,32px)]'
+                            : 'rounded-[var(--radius-token-lg,32px)]',
+                        'aspect-[4/3]'
+                    )}
+                >
+                    <img
+                        src={imageSrc}
+                        alt={imageAlt}
+                        className="absolute inset-0 w-full h-full object-cover"
+                    />
+
+                    {/* Top overlay: badge + zoom */}
+                    <div className="absolute inset-x-0 top-0 flex items-start justify-between px-[var(--spacing-l,24px)] pt-[var(--spacing-l,24px)] pb-[var(--spacing-xl,32px)] bg-gradient-to-b from-black/15 to-transparent">
+                        {showBadge && <Badge label={badgeLabel} />}
+                        {showZoomButton && <ZoomButton inverted />}
+                    </div>
+                </div>
+            )}
+
+            {/* Text section */}
+            <div
+                className={cn(
+                    'flex flex-col gap-[var(--spacing-xs2,8px)] items-start w-full shrink-0',
+                    withBackground
+                        ? 'bg-white p-[var(--spacing-l,24px)]'
+                        : 'py-[var(--spacing-l,24px)]'
+                )}
+            >
+                <p
+                    className={cn(
+                        'text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] w-full overflow-hidden text-ellipsis whitespace-pre-wrap',
+                        isHover
+                            ? 'text-[hsl(var(--foreground-strong))]'
+                            : 'text-[hsl(var(--neutral-950))]'
+                    )}
+                >
+                    {headline}
+                </p>
+
+                {showBody && (
+                    <p className="text-[length:var(--text-body-small,14px)] leading-[var(--leading-body-small,22px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-600))] max-h-[44px] overflow-hidden text-ellipsis whitespace-pre-wrap w-full">
+                        {body}
+                    </p>
+                )}
+
+                {showPrice && (
+                    <PriceRow price={price} showInfo={showPriceInfo} />
+                )}
+            </div>
+        </div>
+    );
+}
+
+// ─── Combined export (convenience) ────────────────────────────────────────────
+
+export const ProductCard = {
+    NoImage: ProductCardNoImage,
+    FullImage: ProductCardFullImage,
+    Split: ProductCardSplit,
+};
+
+export default ProductCard;

package/local-registry/src/components/ui/sapient-profile-card.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { SapientIcon } from '@/components/ui/sapient-icon';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/**
+ * L – Full-bleed portrait photo card (353 × 441 px), white text overlaid at bottom.
+ * M – White card with circular avatar, dark text name + contacts below.
+ * S – White card, no photo, name + contacts only (compact).
+ */
+export type ProfileCardSize = 'L' | 'M' | 'S';
+
+export interface ProfileCardProps {
+    className?: string;
+    size?: ProfileCardSize;
+    /** First name (L/M show on separate line from surname) */
+    firstName?: string;
+    /** Last name */
+    lastName?: string;
+    /** Full name string – used by S (single line) */
+    fullName?: string;
+    email?: string;
+    phone?: string;
+    address?: string;
+    /** Photo URL. Used in L (full-bleed) and M (circular avatar). */
+    imageSrc?: string;
+    imageAlt?: string;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const PLACEHOLDER_PHOTO =
+    'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=800&q=80';
+
+function ContactRow({
+    iconName,
+    label,
+    inverted = false,
+    alignTop = false,
+}: {
+    iconName: string;
+    label: string;
+    inverted?: boolean;
+    alignTop?: boolean;
+}) {
+    return (
+        <div
+            className={cn(
+                'flex gap-[var(--spacing-xs2,8px)] w-full shrink-0',
+                alignTop ? 'items-start' : 'items-center'
+            )}
+        >
+            <SapientIcon
+                name={iconName}
+                label=""
+                size={24}
+                className={cn(
+                    'size-6 shrink-0',
+                    inverted && 'brightness-0 invert'
+                )}
+            />
+            <p
+                className={cn(
+                    'text-[length:var(--text-body,16px)] leading-[1.4] font-[var(--font-weight-regular,400)] shrink-0',
+                    inverted
+                        ? 'text-white'
+                        : 'text-[hsl(var(--neutral-950))]'
+                )}
+            >
+                {label}
+            </p>
+        </div>
+    );
+}
+
+// ─── ProfileCard ──────────────────────────────────────────────────────────────
+
+export function ProfileCard({
+    className,
+    size = 'L',
+    firstName = 'Name',
+    lastName = 'Surname',
+    fullName = 'Name Surname',
+    email = 'name.surname@email.com',
+    phone = '+00 123 456 7890',
+    address = 'Lorem Ipsum Street,  20154, Milan, Italy',
+    imageSrc = PLACEHOLDER_PHOTO,
+    imageAlt = '',
+}: ProfileCardProps) {
+
+    // ── Size L ───────────────────────────────────────────────────────────────
+    if (size === 'L') {
+        return (
+            <div
+                className={cn(
+                    'relative w-[353px] h-[441px] overflow-hidden rounded-[var(--radius-token-lg,32px)] flex flex-col justify-end',
+                    className
+                )}
+            >
+                {/* Full-bleed photo */}
+                <img
+                    src={imageSrc}
+                    alt={imageAlt}
+                    className="absolute inset-0 w-full h-full object-cover"
+                />
+
+                {/* Bottom gradient scrim */}
+                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/70 pointer-events-none" />
+
+                {/* Content */}
+                <div className="relative z-10 flex flex-col gap-[var(--spacing-l,24px)] p-[var(--spacing-l,24px)]">
+                    {/* Name */}
+                    <p className="text-[length:var(--text-display,32px)] leading-[1.2] font-[var(--font-weight-medium,500)] tracking-[0.32px] text-white whitespace-pre-wrap">
+                        {firstName}{'\n'}{lastName}
+                    </p>
+
+                    {/* Contact rows */}
+                    <div className="flex flex-col gap-[var(--spacing-m,16px)]">
+                        <ContactRow iconName="mail-01" label={email} inverted />
+                        <ContactRow iconName="phone" label={phone} inverted alignTop />
+                        <ContactRow iconName="home-02" label={address} inverted alignTop />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    // ── Size M ───────────────────────────────────────────────────────────────
+    if (size === 'M') {
+        return (
+            <div
+                className={cn(
+                    'flex flex-col items-start gap-[var(--spacing-l,24px)] p-[var(--spacing-l,24px)] w-[353px] bg-[hsl(var(--neutral-50))] rounded-[var(--radius-token-lg,32px)]',
+                    className
+                )}
+            >
+                {/* Circular avatar */}
+                <div className="relative size-[124px] rounded-full overflow-hidden shrink-0">
+                    <img
+                        src={imageSrc}
+                        alt={imageAlt}
+                        className="absolute inset-0 w-full h-full object-cover"
+                    />
+                </div>
+
+                {/* Name */}
+                <p className="text-[length:var(--text-display,32px)] leading-[1.2] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] whitespace-pre-wrap min-w-full">
+                    {firstName}{'\n'}{lastName}
+                </p>
+
+                {/* Contact rows */}
+                <div className="flex flex-col gap-[var(--spacing-m,16px)] w-full">
+                    <ContactRow iconName="mail-01" label={email} />
+                    <ContactRow iconName="phone" label={phone} alignTop />
+                    <ContactRow iconName="home-02" label={address} alignTop />
+                </div>
+            </div>
+        );
+    }
+
+    // ── Size S ───────────────────────────────────────────────────────────────
+    return (
+        <div
+            className={cn(
+                'flex flex-col items-start gap-[var(--spacing-l,24px)] p-[var(--spacing-l,24px)] w-[353px] bg-[hsl(var(--neutral-50))] rounded-[var(--radius-token-lg,32px)]',
+                className
+            )}
+        >
+            {/* Name — single line for S */}
+            <p className="text-[length:var(--text-heading,24px)] leading-[1.2] font-[var(--font-weight-medium,500)] tracking-[-0.48px] text-[hsl(var(--neutral-950))] w-[305px] whitespace-pre-wrap">
+                {fullName}
+            </p>
+
+            {/* Contact rows */}
+            <div className="flex flex-col gap-[12px] w-full">
+                <ContactRow iconName="mail-01" label={email} />
+                <ContactRow iconName="phone" label={phone} alignTop />
+                <ContactRow iconName="home-02" label={address} alignTop />
+            </div>
+        </div>
+    );
+}
+
+export const ProfileCardComponent = {
+    L: (props: Omit<ProfileCardProps, 'size'>) => <ProfileCard {...props} size="L" />,
+    M: (props: Omit<ProfileCardProps, 'size'>) => <ProfileCard {...props} size="M" />,
+    S: (props: Omit<ProfileCardProps, 'size'>) => <ProfileCard {...props} size="S" />,
+};
+
+export default ProfileCard;

package/local-registry/src/components/ui/sapient-progress.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "@/lib/utils";
+
+export interface SapientProgressProps
+  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+  value?: number;
+}
+
+export const SapientProgress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  SapientProgressProps
+>(({ className, value = 0, ...props }, ref) => {
+  return (
+    <ProgressPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
+        className
+      )}
+      value={value}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - value}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+});
+
+SapientProgress.displayName = "SapientProgress";