@vite-mf-monorepo/ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,14 +1,17 @@
-import { Button_default } from './chunk-GNBS5RLB.js';
-export { Button_default as Button } from './chunk-GNBS5RLB.js';
-import { Card_default } from './chunk-JI3OVXCK.js';
+import './chunk-Y5GP5OWN.js';
+export { MovieCard_default as MovieCard } from './chunk-5NW3IDX2.js';
+import { Button_default } from './chunk-WYIIOTWJ.js';
+export { Button_default as Button } from './chunk-WYIIOTWJ.js';
+import { Typography_default } from './chunk-JDBRVX5O.js';
+export { Image_default as Image, Rating_default as Rating, Typography_default as Typography } from './chunk-JDBRVX5O.js';
+import './chunk-FDLKS7BI.js';
 export { Card_default as Card } from './chunk-JI3OVXCK.js';
 import { Icon_default } from './chunk-JHRISQQJ.js';
 export { Icon_default as Icon } from './chunk-JHRISQQJ.js';
-import clsx15 from 'clsx';
-import { createContext, useState, useRef, useEffect, useCallback, createElement, useLayoutEffect, useContext } from 'react';
+import clsx9 from 'clsx';
+import { createContext, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { getBlurDataUrl, getOptimizedImageUrl } from '@vite-mf-monorepo/shared';
-import { Link } from 'react-router-dom';
+import { getOptimizedImageUrl } from '@vite-mf-monorepo/shared';
 
 var sizeMap = {
   xs: { container: "ui:h-6 ui:w-6", icon: 12, text: "ui:text-xs" },
@@ -39,7 +42,7 @@ function Avatar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx15(
+      className: clsx9(
         "ui:relative ui:inline-flex ui:items-center ui:justify-center ui:overflow-hidden ui:rounded-full",
         "ui:bg-muted ui:text-muted-foreground",
         container,
@@ -57,7 +60,7 @@ function Avatar({
             ...rest
           }
         ),
-        showInitials && /* @__PURE__ */ jsx("span", { className: clsx15("ui:font-medium ui:uppercase", text), children: initials.slice(0, 2) }),
+        showInitials && /* @__PURE__ */ jsx("span", { className: clsx9("ui:font-medium ui:uppercase", text), children: initials.slice(0, 2) }),
         showFallback && /* @__PURE__ */ jsx(Icon_default, { name: "User", size: icon })
       ]
     }
@@ -81,7 +84,7 @@ function Badge({
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: clsx15(
+      className: clsx9(
         "ui:inline-flex ui:items-center ui:gap-1 ui:rounded-full ui:font-medium",
         padding,
         text,
@@ -122,7 +125,7 @@ function IconButton({
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: clsx15(
+      className: clsx9(
         "ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:rounded-full ui:transition-colors",
         "ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2",
         "ui:disabled:pointer-events-none ui:disabled:opacity-50",
@@ -142,122 +145,6 @@ function IconButton({
   );
 }
 var IconButton_default = IconButton;
-function Image({
-  src,
-  alt,
-  blurDataUrl,
-  autoBlur = false,
-  blurSize = 16,
-  blurQuality = 0.3,
-  aspectRatio = "2/3",
-  fallback,
-  className,
-  onLoad,
-  onError,
-  loading = "eager",
-  ...rest
-}) {
-  const imgRef = useRef(null);
-  const containerRef = useRef(null);
-  const [state, setState] = useState("loading");
-  const [generatedBlur, setGeneratedBlur] = useState(
-    void 0
-  );
-  const [blurReady, setBlurReady] = useState(!autoBlur || !!blurDataUrl);
-  const [isVisible, setIsVisible] = useState(loading === "eager");
-  const effectiveBlur = blurDataUrl ?? generatedBlur;
-  useEffect(() => {
-    if (loading === "eager" || !containerRef.current) {
-      return;
-    }
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.unobserve(entry.target);
-        }
-      },
-      { rootMargin: "50px" }
-    );
-    observer.observe(containerRef.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [loading]);
-  useEffect(() => {
-    if (!autoBlur || blurDataUrl) {
-      setBlurReady(true);
-      return;
-    }
-    setBlurReady(false);
-    getBlurDataUrl(src, blurSize, blurQuality).then((base64) => {
-      setGeneratedBlur(base64);
-      setBlurReady(true);
-    }).catch(() => {
-      setBlurReady(true);
-    });
-  }, [autoBlur, src, blurDataUrl, blurSize, blurQuality]);
-  useEffect(() => {
-    setState("loading");
-    setGeneratedBlur(void 0);
-    if (imgRef.current?.complete && imgRef.current.naturalHeight !== 0) {
-      setState("loaded");
-    }
-  }, [src]);
-  const handleLoad = useCallback(() => {
-    setState("loaded");
-    onLoad?.();
-  }, [onLoad]);
-  const handleError = useCallback(() => {
-    setState("error");
-    onError?.();
-  }, [onError]);
-  const defaultFallback = /* @__PURE__ */ jsx("div", { className: "ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted", children: /* @__PURE__ */ jsx(
-    Icon_default,
-    {
-      name: "Photo",
-      size: 48,
-      className: "ui:text-muted-foreground",
-      "aria-hidden": "true"
-    }
-  ) });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: clsx15("ui:relative ui:overflow-hidden ui:bg-muted", className),
-      style: aspectRatio ? { aspectRatio } : void 0,
-      "data-state": state,
-      children: state === "error" ? fallback ?? defaultFallback : /* @__PURE__ */ jsxs(Fragment, { children: [
-        effectiveBlur && state === "loading" && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: effectiveBlur,
-            alt: "",
-            "aria-hidden": "true",
-            className: "ui:absolute ui:inset-0 ui:h-full ui:w-full ui:scale-105 ui:object-cover"
-          }
-        ),
-        blurReady && isVisible && /* @__PURE__ */ jsx(
-          "img",
-          {
-            ref: imgRef,
-            src,
-            alt,
-            onLoad: handleLoad,
-            onError: handleError,
-            className: clsx15(
-              "ui:absolute ui:inset-0 ui:h-full ui:w-full ui:object-cover ui:transition-opacity ui:duration-300",
-              state === "loaded" ? "ui:opacity-100" : "ui:opacity-0"
-            ),
-            ...rest
-          }
-        )
-      ] })
-    }
-  );
-}
-var Image_default = Image;
 function Skeleton({
   variant = "rectangle",
   width,
@@ -270,7 +157,7 @@ function Skeleton({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx15(
+      className: clsx9(
         "ui:relative ui:overflow-hidden ui:bg-muted",
         "ui-skeleton-shimmer",
         {
@@ -364,7 +251,7 @@ function Modal({
       "aria-modal": "true",
       onClick: handleClick,
       onClose: handleClose,
-      className: clsx15(
+      className: clsx9(
         "ui:backdrop:bg-black/80",
         "ui:bg-transparent ui:border-0 ui:p-0",
         "ui:max-w-none ui:max-h-none ui:w-full ui:h-full",
@@ -375,278 +262,6 @@ function Modal({
   );
 }
 var Modal_default = Modal;
-var circleSizeMap = {
-  sm: { size: 32, stroke: 3, fontSize: "ui:text-xs" },
-  md: { size: 48, stroke: 4, fontSize: "ui:text-sm" },
-  lg: { size: 64, stroke: 5, fontSize: "ui:text-base" }
-};
-var getColorClass = (percent) => {
-  if (percent >= 70) return "ui:text-green-600";
-  if (percent >= 40) return "ui:text-amber-600";
-  return "ui:text-red-500";
-};
-function CircleRating({
-  percent,
-  size,
-  showValue,
-  value,
-  max,
-  trackClassName
-}) {
-  const { size: svgSize, stroke, fontSize } = circleSizeMap[size];
-  const radius = (svgSize - stroke) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const offset = circumference - percent / 100 * circumference;
-  return /* @__PURE__ */ jsxs("div", { className: "ui:relative ui:inline-flex ui:items-center ui:justify-center", children: [
-    /* @__PURE__ */ jsxs("svg", { width: svgSize, height: svgSize, className: "ui:-rotate-90", children: [
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          cx: svgSize / 2,
-          cy: svgSize / 2,
-          r: radius,
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: stroke,
-          className: trackClassName ?? "ui:text-gray-200"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          cx: svgSize / 2,
-          cy: svgSize / 2,
-          r: radius,
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: stroke,
-          strokeLinecap: "round",
-          strokeDasharray: circumference,
-          strokeDashoffset: offset,
-          className: clsx15(
-            "ui:transition-all ui:duration-500",
-            getColorClass(percent)
-          )
-        }
-      )
-    ] }),
-    showValue && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: clsx15(
-          "ui:absolute ui:font-bold",
-          fontSize,
-          getColorClass(percent)
-        ),
-        children: max === 100 ? Math.round(percent) : value.toFixed(1)
-      }
-    )
-  ] });
-}
-var CircleRating_default = CircleRating;
-var starsSizeMap = {
-  sm: 16,
-  md: 20,
-  lg: 24
-};
-function StarsRating({
-  percent,
-  size,
-  showValue,
-  value,
-  max
-}) {
-  const iconSize = starsSizeMap[size];
-  return /* @__PURE__ */ jsxs("div", { className: "ui:inline-flex ui:items-center ui:gap-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "ui:relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "ui:flex ui:text-gray-300", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx(Icon_default, { name: "Star", size: iconSize }, i)) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "ui:absolute ui:inset-0 ui:flex ui:text-yellow-400",
-          style: { clipPath: `inset(0 ${String(100 - percent)}% 0 0)` },
-          children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx(Icon_default, { name: "Star", size: iconSize }, i))
-        }
-      )
-    ] }),
-    showValue && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: clsx15(
-          "ui:font-medium ui:text-muted-foreground",
-          size === "sm" && "ui:text-xs",
-          size === "md" && "ui:text-sm",
-          size === "lg" && "ui:text-base"
-        ),
-        children: max === 100 ? (value / 10).toFixed(1) : value.toFixed(1)
-      }
-    )
-  ] });
-}
-var StarsRating_default = StarsRating;
-function Rating({
-  value,
-  max = 10,
-  variant = "circle",
-  size = "md",
-  showValue = true,
-  trackClassName,
-  className
-}) {
-  const clampedValue = Math.max(0, Math.min(value, max));
-  const percent = clampedValue / max * 100;
-  return /* @__PURE__ */ jsx("div", { className: clsx15("ui:inline-flex", className), children: variant === "circle" ? /* @__PURE__ */ jsx(
-    CircleRating_default,
-    {
-      percent,
-      size,
-      showValue,
-      value: clampedValue,
-      max,
-      trackClassName
-    }
-  ) : /* @__PURE__ */ jsx(
-    StarsRating_default,
-    {
-      percent,
-      size,
-      showValue,
-      value: clampedValue,
-      max
-    }
-  ) });
-}
-var Rating_default = Rating;
-var variantStyles = {
-  h1: "ui:font-roboto ui:text-xl ui:sm:text-2xl ui:md:text-3xl ui:lg:text-4xl ui:font-bold ui:leading-tight ui:text-foreground",
-  h2: "ui:font-roboto ui:text-lg ui:sm:text-xl ui:md:text-2xl ui:lg:text-3xl ui:font-bold ui:leading-tight ui:text-foreground",
-  h3: "ui:font-roboto ui:text-base ui:sm:text-lg ui:md:text-xl ui:lg:text-2xl ui:font-semibold ui:leading-snug ui:text-foreground",
-  h4: "ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:font-semibold ui:leading-snug ui:text-foreground",
-  h5: "ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground",
-  h6: "ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground",
-  body: "ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground",
-  "body-sm": "ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground",
-  "body-lg": "ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground",
-  lead: "ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:leading-relaxed ui:text-muted-foreground",
-  caption: "ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground",
-  "caption-xs": "ui:font-inter ui:text-xs ui:text-muted-foreground",
-  label: "ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground",
-  muted: "ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground",
-  blockquote: "ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:border-l-4 ui:border-border ui:pl-4 ui:italic ui:text-muted-foreground"
-};
-var variantToTag = {
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  h4: "h4",
-  h5: "h5",
-  h6: "h6",
-  body: "p",
-  "body-sm": "p",
-  "body-lg": "p",
-  lead: "p",
-  caption: "span",
-  "caption-xs": "span",
-  label: "label",
-  muted: "p",
-  blockquote: "blockquote"
-};
-function Typography({
-  variant,
-  as,
-  className,
-  children,
-  ...rest
-}) {
-  const Component = as ?? variantToTag[variant];
-  return createElement(
-    Component,
-    { className: clsx15(variantStyles[variant], className), ...rest },
-    children
-  );
-}
-var Typography_default = Typography;
-function MovieCard({
-  id,
-  title,
-  posterUrl,
-  voteAverage,
-  year,
-  className,
-  imageLoading = "lazy",
-  as = "card",
-  ...rest
-}) {
-  const to = "to" in rest ? rest.to : void 0;
-  const onClick = "onClick" in rest ? rest.onClick : void 0;
-  const isInteractive = as === "link" || as === "button";
-  const cardContent = /* @__PURE__ */ jsxs(
-    Card_default,
-    {
-      variant: "ghost",
-      className: clsx15(
-        "ui:group ui:relative ui:flex ui:flex-col ui:overflow-hidden",
-        isInteractive && [
-          "ui:cursor-pointer",
-          "ui:transition-transform ui:duration-200",
-          "hover:ui:scale-[1.02]"
-        ],
-        className
-      ),
-      onClick: as === "button" ? onClick : void 0,
-      "data-testid": `movie-card-${String(id)}`,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200", children: [
-          /* @__PURE__ */ jsx(
-            Image_default,
-            {
-              src: posterUrl,
-              alt: title,
-              loading: imageLoading,
-              aspectRatio: void 0,
-              className: "ui:h-full ui:w-full ui:object-cover"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:bottom-2 ui:right-2 ui:flex ui:items-center ui:justify-center ui:rounded-full ui:bg-white/80 ui:p-1", children: /* @__PURE__ */ jsx(
-            Rating_default,
-            {
-              value: voteAverage,
-              size: "sm",
-              variant: "circle",
-              trackClassName: "ui:text-gray-200",
-              className: "ui:drop-shadow"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1", children: [
-          /* @__PURE__ */ jsx(
-            Typography_default,
-            {
-              variant: "label",
-              as: "h3",
-              className: "ui:line-clamp-2",
-              title,
-              children: title
-            }
-          ),
-          year && /* @__PURE__ */ jsx(
-            Typography_default,
-            {
-              variant: "caption-xs",
-              className: "ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",
-              children: year
-            }
-          )
-        ] })
-      ]
-    }
-  );
-  if (as === "link" && to) {
-    return /* @__PURE__ */ jsx(Link, { to, className: "ui:block ui:no-underline ui:text-inherit", children: cardContent });
-  }
-  return cardContent;
-}
-var MovieCard_default = MovieCard;
 function TrailerCard({
   videoKey,
   title,
@@ -659,7 +274,7 @@ function TrailerCard({
     /* @__PURE__ */ jsxs(
       "button",
       {
-        className: clsx15(
+        className: clsx9(
           "ui:group ui:relative ui:flex ui:aspect-video ui:w-full ui:cursor-pointer ui:overflow-hidden ui:rounded-lg ui:bg-gray-200",
           "ui:transition-transform ui:duration-200 hover:ui:scale-[1.02]",
           className
@@ -732,7 +347,7 @@ function CarouselCounter({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx15(
+      className: clsx9(
         "ui:bg-black/50 ui:rounded-full ui:px-3 ui:py-1",
         "ui:text-white/90 ui:text-sm ui:font-medium ui:tabular-nums",
         className
@@ -822,7 +437,7 @@ function CarouselNavigation({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx15("ui:flex ui:gap-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx9("ui:flex ui:gap-2", className), children: [
     /* @__PURE__ */ jsx(
       IconButton_default,
       {
@@ -855,13 +470,13 @@ function CarouselPagination({
   className
 }) {
   if (total === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: clsx15("ui:flex ui:items-center ui:gap-2", className), children: Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: clsx9("ui:flex ui:items-center ui:gap-2", className), children: Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsx(
     "div",
     {
       "aria-hidden": "true",
-      className: clsx15(
+      className: clsx9(
         "ui:rounded-full ui:transition-all ui:duration-300",
-        index === current ? clsx15("ui:h-2 ui:w-6", light ? "ui:bg-white" : "ui:bg-primary") : clsx15(
+        index === current ? clsx9("ui:h-2 ui:w-6", light ? "ui:bg-white" : "ui:bg-primary") : clsx9(
           "ui:h-2 ui:w-2",
           light ? "ui:bg-white/50 hover:ui:bg-white/70" : "ui:bg-gray-400 hover:ui:bg-gray-500"
         )
@@ -1028,12 +643,12 @@ function Carousel({
   const canScrollPrev = currentIndex > 0;
   const canScrollNext = currentIndex < totalPositions - 1;
   const showControls = totalPositions > 1;
-  return /* @__PURE__ */ jsxs("div", { className: clsx15("ui:relative", isLightbox && "ui:h-full", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx9("ui:relative", isLightbox && "ui:h-full", className), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         ref: scrollRef,
-        className: clsx15(
+        className: clsx9(
           "ui:flex ui:overflow-x-auto ui:scroll-smooth ui:scrollbar-none",
           isFullWidth && "ui:snap-x ui:snap-mandatory",
           isLightbox && "ui:h-full",
@@ -1057,7 +672,7 @@ function Carousel({
     showControls && isHero && (showPagination || showArrows) && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx15(
+        className: clsx9(
           "ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:w-full ui:z-10 ui:flex ui:items-end",
           heroControlsClassName
         ),
@@ -1087,7 +702,7 @@ function Carousel({
     showControls && !isHero && !isLightbox && (showArrows && arrowPosition === "bottom-right" || showPagination) ? /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx15(
+        className: clsx9(
           "ui:mt-4 ui:flex ui:items-center",
           arrowPosition === "bottom-right" ? "ui:justify-end ui:gap-4" : "ui:justify-center"
         ),
@@ -1132,7 +747,7 @@ function CarouselItem({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx15(
+      className: clsx9(
         "ui:flex-shrink-0",
         (isHero || isLightbox) && "ui:w-full ui:snap-center",
         isLightbox && "ui:flex ui:items-center ui:justify-center ui:h-full",
@@ -1248,7 +863,7 @@ function TabsList({ className, children, ...rest }) {
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: clsx15(
+          className: clsx9(
             "ui:flex ui:gap-1",
             variant === "underline" && "ui:border-b ui:border-border",
             variant === "pills" && "ui:[.media-section:nth-of-type(odd)_&]:bg-white ui:bg-muted ui:p-1 ui:rounded-lg ui:w-fit",
@@ -1276,7 +891,7 @@ function TabsPanel({ value, children, ...rest }) {
       "aria-labelledby": getTabId(value),
       hidden: !isActive,
       ...rest,
-      className: clsx15("ui:mt-4", rest.className),
+      className: clsx9("ui:mt-4", rest.className),
       children
     }
   );
@@ -1368,7 +983,7 @@ function TabsTrigger({
       id: getTabId(value),
       tabIndex: isActive ? 0 : -1,
       disabled,
-      className: clsx15(
+      className: clsx9(
         "ui:px-4 ui:py-2 ui:font-roboto ui:text-sm ui:font-medium",
         "ui:flex ui:items-center ui:gap-2",
         "ui:transition-colors ui:duration-200",
@@ -1425,7 +1040,7 @@ function Tabs({
         variant,
         prefix
       },
-      children: /* @__PURE__ */ jsx("div", { className: clsx15("ui:w-full", className), ...rest, children })
+      children: /* @__PURE__ */ jsx("div", { className: clsx9("ui:w-full", className), ...rest, children })
     }
   );
 }
@@ -1445,7 +1060,7 @@ function Talent({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx15(
+      className: clsx9(
         "ui:flex ui:items-center",
         {
           "ui:flex-col ui:text-center ui:gap-3": variant === "vertical",
@@ -1468,7 +1083,7 @@ function Talent({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx15({ "ui:flex ui:flex-col": variant === "horizontal" }),
+            className: clsx9({ "ui:flex ui:flex-col": variant === "horizontal" }),
             children: [
               /* @__PURE__ */ jsx(
                 Typography_default,
@@ -1500,7 +1115,7 @@ function Spinner({ className }) {
     {
       role: "status",
       "aria-label": "Loading",
-      className: clsx15(
+      className: clsx9(
         "ui:size-12 ui:rounded-full ui:border-4 ui:border-white/20 ui:border-t-white ui:animate-spin",
         className
       )
@@ -1509,6 +1124,6 @@ function Spinner({ className }) {
 }
 var Spinner_default = Spinner;
 
-export { Avatar_default as Avatar, Badge_default as Badge, Carousel_default as Carousel, CarouselCounter_default as CarouselCounter, CarouselItem_default as CarouselItem, CarouselLoading_default as CarouselLoading, CarouselNavigation_default as CarouselNavigation, CarouselPagination_default as CarouselPagination, HeroImage_default as HeroImage, IconButton_default as IconButton, Image_default as Image, Modal_default as Modal, MovieCard_default as MovieCard, Rating_default as Rating, Skeleton_default as Skeleton, Spinner_default as Spinner, Tabs_default as Tabs, Talent_default as Talent, TrailerCard_default as TrailerCard, Typography_default as Typography };
+export { Avatar_default as Avatar, Badge_default as Badge, Carousel_default as Carousel, CarouselCounter_default as CarouselCounter, CarouselItem_default as CarouselItem, CarouselLoading_default as CarouselLoading, CarouselNavigation_default as CarouselNavigation, CarouselPagination_default as CarouselPagination, HeroImage_default as HeroImage, IconButton_default as IconButton, Modal_default as Modal, Skeleton_default as Skeleton, Spinner_default as Spinner, Tabs_default as Tabs, Talent_default as Talent, TrailerCard_default as TrailerCard };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map