@vite-mf-monorepo/ui 0.4.21 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Icon as t}from"../Icon";function a({message:r="Failed to load data"}){return i("div",{className:"ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-3 ui:rounded-lg ui:border ui:border-red-200 ui:bg-red-50 ui:p-8 ui:text-center",children:[e(t,{name:"ExclamationTriangle",size:48,className:"ui:text-red-500"}),i("div",{className:"ui:flex ui:flex-col ui:gap-1",children:[e("p",{className:"ui:text-sm ui:font-semibold ui:text-red-900",children:"Failed to fetch data"}),e("p",{className:"ui:text-sm ui:text-red-700",children:r})]})]})}var o=a;export{o as default};
1
+ import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Icon as t}from"../Icon";function a({message:i="Failed to load data"}){return r("div",{className:"ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-3 ui:rounded-lg ui:border ui:border-red-200 ui:bg-red-50 ui:p-8 ui:text-center","data-testid":"carousel-error",children:[e(t,{name:"ExclamationTriangle",size:48,className:"ui:text-red-500"}),r("div",{className:"ui:flex ui:flex-col ui:gap-1",children:[e("p",{className:"ui:text-sm ui:font-semibold ui:text-red-900",children:"Failed to fetch data"}),e("p",{className:"ui:text-sm ui:text-red-700",children:i})]})]})}var u=a;export{u as default};
2
2
  //# sourceMappingURL=CarouselError.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Carousel/CarouselError.tsx"],"sourcesContent":["import { Icon } from '../Icon'\n\nexport interface CarouselErrorProps {\n message?: string\n}\n\nfunction CarouselError({\n message = 'Failed to load data',\n}: Readonly<CarouselErrorProps>) {\n return (\n <div className=\"ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-3 ui:rounded-lg ui:border ui:border-red-200 ui:bg-red-50 ui:p-8 ui:text-center\">\n <Icon name=\"ExclamationTriangle\" size={48} className=\"ui:text-red-500\" />\n <div className=\"ui:flex ui:flex-col ui:gap-1\">\n <p className=\"ui:text-sm ui:font-semibold ui:text-red-900\">\n Failed to fetch data\n </p>\n <p className=\"ui:text-sm ui:text-red-700\">{message}</p>\n </div>\n </div>\n )\n}\n\nexport default CarouselError\n"],"mappings":"AAWM,cAAAA,EACA,QAAAC,MADA,oBAXN,OAAS,QAAAC,MAAY,UAMrB,SAASC,EAAc,CACrB,QAAAC,EAAU,qBACZ,EAAiC,CAC/B,OACEH,EAAC,OAAI,UAAU,8IACb,UAAAD,EAACE,EAAA,CAAK,KAAK,sBAAsB,KAAM,GAAI,UAAU,kBAAkB,EACvED,EAAC,OAAI,UAAU,+BACb,UAAAD,EAAC,KAAE,UAAU,8CAA8C,gCAE3D,EACAA,EAAC,KAAE,UAAU,6BAA8B,SAAAI,EAAQ,GACrD,GACF,CAEJ,CAEA,IAAOC,EAAQF","names":["jsx","jsxs","Icon","CarouselError","message","CarouselError_default"]}
1
+ {"version":3,"sources":["../../src/Carousel/CarouselError.tsx"],"sourcesContent":["import { Icon } from '../Icon'\n\nexport interface CarouselErrorProps {\n message?: string\n}\n\nfunction CarouselError({\n message = 'Failed to load data',\n}: Readonly<CarouselErrorProps>) {\n return (\n <div\n className=\"ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-3 ui:rounded-lg ui:border ui:border-red-200 ui:bg-red-50 ui:p-8 ui:text-center\"\n data-testid=\"carousel-error\"\n >\n <Icon name=\"ExclamationTriangle\" size={48} className=\"ui:text-red-500\" />\n <div className=\"ui:flex ui:flex-col ui:gap-1\">\n <p className=\"ui:text-sm ui:font-semibold ui:text-red-900\">\n Failed to fetch data\n </p>\n <p className=\"ui:text-sm ui:text-red-700\">{message}</p>\n </div>\n </div>\n )\n}\n\nexport default CarouselError\n"],"mappings":"AAcM,cAAAA,EACA,QAAAC,MADA,oBAdN,OAAS,QAAAC,MAAY,UAMrB,SAASC,EAAc,CACrB,QAAAC,EAAU,qBACZ,EAAiC,CAC/B,OACEH,EAAC,OACC,UAAU,8IACV,cAAY,iBAEZ,UAAAD,EAACE,EAAA,CAAK,KAAK,sBAAsB,KAAM,GAAI,UAAU,kBAAkB,EACvED,EAAC,OAAI,UAAU,+BACb,UAAAD,EAAC,KAAE,UAAU,8CAA8C,gCAE3D,EACAA,EAAC,KAAE,UAAU,6BAA8B,SAAAI,EAAQ,GACrD,GACF,CAEJ,CAEA,IAAOC,EAAQF","names":["jsx","jsxs","Icon","CarouselError","message","CarouselError_default"]}
@@ -1,2 +1,2 @@
1
- import{jsx as i,jsxs as u}from"react/jsx-runtime";import l from"../Skeleton/Skeleton";function h({count:n=6,cardWidth:e=150,cardHeight:a=225,showTitle:t=!0,showSubtitle:o=!0,rounded:r=!0}){return i("div",{className:"ui:overflow-x-auto ui:flex ui:gap-4",children:Array.from({length:n}).map((v,d)=>u("div",{style:{width:e,minWidth:e,maxWidth:e},children:[i("div",{style:{width:e,height:a},children:i(l,{variant:"rectangle",width:"ui:w-full",height:"ui:h-full",rounded:r})}),(t||o)&&u("div",{style:{marginTop:8,display:"flex",flexDirection:"column",gap:8},children:[t&&i("div",{style:{width:e,height:16},children:i(l,{variant:"line",width:"ui:w-full",height:"ui:h-full"})}),o&&i("div",{style:{width:e*.75,height:12},children:i(l,{variant:"line",width:"ui:w-full",height:"ui:h-full"})})]})]},d))})}var g=h;export{g as default};
1
+ import{jsx as i,jsxs as u}from"react/jsx-runtime";import l from"../Skeleton/Skeleton";function h({count:a=6,cardWidth:e=150,cardHeight:n=225,showTitle:t=!0,showSubtitle:o=!0,rounded:d=!0}){return i("div",{className:"ui:overflow-x-auto ui:flex ui:gap-4","data-testid":"carousel-loading",children:Array.from({length:a}).map((g,r)=>u("div",{style:{width:e,minWidth:e,maxWidth:e},children:[i("div",{style:{width:e,height:n},children:i(l,{variant:"rectangle",width:"ui:w-full",height:"ui:h-full",rounded:d})}),(t||o)&&u("div",{style:{marginTop:8,display:"flex",flexDirection:"column",gap:8},children:[t&&i("div",{style:{width:e,height:16},children:i(l,{variant:"line",width:"ui:w-full",height:"ui:h-full"})}),o&&i("div",{style:{width:e*.75,height:12},children:i(l,{variant:"line",width:"ui:w-full",height:"ui:h-full"})})]})]},r))})}var f=h;export{f as default};
2
2
  //# sourceMappingURL=CarouselLoading.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Carousel/CarouselLoading.tsx"],"sourcesContent":["import Skeleton from '../Skeleton/Skeleton'\n\nexport interface CarouselLoadingProps {\n /** Number of skeleton cards to display */\n count?: number\n /** Width of each card in pixels */\n cardWidth?: number\n /** Height of each card in pixels */\n cardHeight?: number\n /** Show skeleton for title */\n showTitle?: boolean\n /** Show skeleton for subtitle/date */\n showSubtitle?: boolean\n /** Apply rounded corners to skeleton */\n rounded?: boolean\n}\n\n/**\n * CarouselLoading - Loading state for carousel with skeleton cards\n *\n * Displays a horizontal scrollable list of skeleton placeholders\n * matching the structure of MovieCard components.\n */\nfunction CarouselLoading({\n count = 6,\n cardWidth = 150,\n cardHeight = 225,\n showTitle = true,\n showSubtitle = true,\n rounded = true,\n}: Readonly<CarouselLoadingProps>) {\n return (\n <div className=\"ui:overflow-x-auto ui:flex ui:gap-4\">\n {Array.from({ length: count }).map((_, i) => (\n <div\n key={i}\n style={{ width: cardWidth, minWidth: cardWidth, maxWidth: cardWidth }}\n >\n <div style={{ width: cardWidth, height: cardHeight }}>\n <Skeleton\n variant=\"rectangle\"\n width=\"ui:w-full\"\n height=\"ui:h-full\"\n rounded={rounded}\n />\n </div>\n {(showTitle || showSubtitle) && (\n <div\n style={{\n marginTop: 8,\n display: 'flex',\n flexDirection: 'column',\n gap: 8,\n }}\n >\n {showTitle && (\n <div style={{ width: cardWidth, height: 16 }}>\n <Skeleton\n variant=\"line\"\n width=\"ui:w-full\"\n height=\"ui:h-full\"\n />\n </div>\n )}\n {showSubtitle && (\n <div style={{ width: cardWidth * 0.75, height: 12 }}>\n <Skeleton\n variant=\"line\"\n width=\"ui:w-full\"\n height=\"ui:h-full\"\n />\n </div>\n )}\n </div>\n )}\n </div>\n ))}\n </div>\n )\n}\n\nexport default CarouselLoading\n"],"mappings":"AAuCY,cAAAA,EAQA,QAAAC,MARA,oBAvCZ,OAAOC,MAAc,uBAuBrB,SAASC,EAAgB,CACvB,MAAAC,EAAQ,EACR,UAAAC,EAAY,IACZ,WAAAC,EAAa,IACb,UAAAC,EAAY,GACZ,aAAAC,EAAe,GACf,QAAAC,EAAU,EACZ,EAAmC,CACjC,OACET,EAAC,OAAI,UAAU,sCACZ,eAAM,KAAK,CAAE,OAAQI,CAAM,CAAC,EAAE,IAAI,CAACM,EAAGC,IACrCV,EAAC,OAEC,MAAO,CAAE,MAAOI,EAAW,SAAUA,EAAW,SAAUA,CAAU,EAEpE,UAAAL,EAAC,OAAI,MAAO,CAAE,MAAOK,EAAW,OAAQC,CAAW,EACjD,SAAAN,EAACE,EAAA,CACC,QAAQ,YACR,MAAM,YACN,OAAO,YACP,QAASO,EACX,EACF,GACEF,GAAaC,IACbP,EAAC,OACC,MAAO,CACL,UAAW,EACX,QAAS,OACT,cAAe,SACf,IAAK,CACP,EAEC,UAAAM,GACCP,EAAC,OAAI,MAAO,CAAE,MAAOK,EAAW,OAAQ,EAAG,EACzC,SAAAL,EAACE,EAAA,CACC,QAAQ,OACR,MAAM,YACN,OAAO,YACT,EACF,EAEDM,GACCR,EAAC,OAAI,MAAO,CAAE,MAAOK,EAAY,IAAM,OAAQ,EAAG,EAChD,SAAAL,EAACE,EAAA,CACC,QAAQ,OACR,MAAM,YACN,OAAO,YACT,EACF,GAEJ,IAtCGS,CAwCP,CACD,EACH,CAEJ,CAEA,IAAOC,EAAQT","names":["jsx","jsxs","Skeleton","CarouselLoading","count","cardWidth","cardHeight","showTitle","showSubtitle","rounded","_","i","CarouselLoading_default"]}
1
+ {"version":3,"sources":["../../src/Carousel/CarouselLoading.tsx"],"sourcesContent":["import Skeleton from '../Skeleton/Skeleton'\n\nexport interface CarouselLoadingProps {\n /** Number of skeleton cards to display */\n count?: number\n /** Width of each card in pixels */\n cardWidth?: number\n /** Height of each card in pixels */\n cardHeight?: number\n /** Show skeleton for title */\n showTitle?: boolean\n /** Show skeleton for subtitle/date */\n showSubtitle?: boolean\n /** Apply rounded corners to skeleton */\n rounded?: boolean\n}\n\n/**\n * CarouselLoading - Loading state for carousel with skeleton cards\n *\n * Displays a horizontal scrollable list of skeleton placeholders\n * matching the structure of MovieCard components.\n */\nfunction CarouselLoading({\n count = 6,\n cardWidth = 150,\n cardHeight = 225,\n showTitle = true,\n showSubtitle = true,\n rounded = true,\n}: Readonly<CarouselLoadingProps>) {\n return (\n <div\n className=\"ui:overflow-x-auto ui:flex ui:gap-4\"\n data-testid=\"carousel-loading\"\n >\n {Array.from({ length: count }).map((_, i) => (\n <div\n key={i}\n style={{ width: cardWidth, minWidth: cardWidth, maxWidth: cardWidth }}\n >\n <div style={{ width: cardWidth, height: cardHeight }}>\n <Skeleton\n variant=\"rectangle\"\n width=\"ui:w-full\"\n height=\"ui:h-full\"\n rounded={rounded}\n />\n </div>\n {(showTitle || showSubtitle) && (\n <div\n style={{\n marginTop: 8,\n display: 'flex',\n flexDirection: 'column',\n gap: 8,\n }}\n >\n {showTitle && (\n <div style={{ width: cardWidth, height: 16 }}>\n <Skeleton\n variant=\"line\"\n width=\"ui:w-full\"\n height=\"ui:h-full\"\n />\n </div>\n )}\n {showSubtitle && (\n <div style={{ width: cardWidth * 0.75, height: 12 }}>\n <Skeleton\n variant=\"line\"\n width=\"ui:w-full\"\n height=\"ui:h-full\"\n />\n </div>\n )}\n </div>\n )}\n </div>\n ))}\n </div>\n )\n}\n\nexport default CarouselLoading\n"],"mappings":"AA0CY,cAAAA,EAQA,QAAAC,MARA,oBA1CZ,OAAOC,MAAc,uBAuBrB,SAASC,EAAgB,CACvB,MAAAC,EAAQ,EACR,UAAAC,EAAY,IACZ,WAAAC,EAAa,IACb,UAAAC,EAAY,GACZ,aAAAC,EAAe,GACf,QAAAC,EAAU,EACZ,EAAmC,CACjC,OACET,EAAC,OACC,UAAU,sCACV,cAAY,mBAEX,eAAM,KAAK,CAAE,OAAQI,CAAM,CAAC,EAAE,IAAI,CAACM,EAAGC,IACrCV,EAAC,OAEC,MAAO,CAAE,MAAOI,EAAW,SAAUA,EAAW,SAAUA,CAAU,EAEpE,UAAAL,EAAC,OAAI,MAAO,CAAE,MAAOK,EAAW,OAAQC,CAAW,EACjD,SAAAN,EAACE,EAAA,CACC,QAAQ,YACR,MAAM,YACN,OAAO,YACP,QAASO,EACX,EACF,GACEF,GAAaC,IACbP,EAAC,OACC,MAAO,CACL,UAAW,EACX,QAAS,OACT,cAAe,SACf,IAAK,CACP,EAEC,UAAAM,GACCP,EAAC,OAAI,MAAO,CAAE,MAAOK,EAAW,OAAQ,EAAG,EACzC,SAAAL,EAACE,EAAA,CACC,QAAQ,OACR,MAAM,YACN,OAAO,YACT,EACF,EAEDM,GACCR,EAAC,OAAI,MAAO,CAAE,MAAOK,EAAY,IAAM,OAAQ,EAAG,EAChD,SAAAL,EAACE,EAAA,CACC,QAAQ,OACR,MAAM,YACN,OAAO,YACT,EACF,GAEJ,IAtCGS,CAwCP,CACD,EACH,CAEJ,CAEA,IAAOC,EAAQT","names":["jsx","jsxs","Skeleton","CarouselLoading","count","cardWidth","cardHeight","showTitle","showSubtitle","rounded","_","i","CarouselLoading_default"]}
@@ -1,2 +1,2 @@
1
- import{jsx as s}from"react/jsx-runtime";import d from"clsx";function u({variant:e="rectangle",width:r,height:t,aspectRatio:n,rounded:o=!0,className:i,...l}){return s("div",{className:d("ui:relative ui:overflow-hidden ui:bg-muted","ui-skeleton-shimmer",{"ui:rounded-lg":e==="rectangle"&&o,"ui:rounded-full":e==="circle","ui:rounded":e==="line"&&o},r,t,i),style:n?{aspectRatio:n}:void 0,...l})}var p=u;export{p as default};
1
+ import{jsx as s}from"react/jsx-runtime";import d from"clsx";function u({variant:e="rectangle",width:o,height:r,aspectRatio:t,rounded:n=!0,className:i,...l}){return s("div",{className:d("ui:relative ui:overflow-hidden ui:bg-muted","ui-skeleton-shimmer",{"ui:rounded-lg":e==="rectangle"&&n,"ui:rounded-full":e==="circle","ui:rounded":e==="line"&&n},o,r,i),"data-testid":"skeleton",style:t?{aspectRatio:t}:void 0,...l})}var p=u;export{p as default};
2
2
  //# sourceMappingURL=Skeleton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { ComponentProps } from 'react'\n\nexport interface SkeletonProps extends ComponentProps<'div'> {\n /** Shape variant */\n variant?: 'rectangle' | 'circle' | 'line'\n /** Width (Tailwind class or custom value) */\n width?: string\n /** Height (Tailwind class or custom value) */\n height?: string\n /** Aspect ratio (e.g., \"2/3\", \"16/9\", \"1/1\") */\n aspectRatio?: string\n /** Apply rounded corners (default: true for rectangle/line, always true for circle) */\n rounded?: boolean\n}\n\n/**\n * Skeleton - Atomic loading placeholder component\n *\n * Composable primitive for building loading states with shimmer effect.\n */\nfunction Skeleton({\n variant = 'rectangle',\n width,\n height,\n aspectRatio,\n rounded = true,\n className,\n ...rest\n}: Readonly<SkeletonProps>) {\n return (\n <div\n className={clsx(\n 'ui:relative ui:overflow-hidden ui:bg-muted',\n 'ui-skeleton-shimmer',\n {\n 'ui:rounded-lg': variant === 'rectangle' && rounded,\n 'ui:rounded-full': variant === 'circle',\n 'ui:rounded': variant === 'line' && rounded,\n },\n width,\n height,\n className\n )}\n style={aspectRatio ? { aspectRatio } : undefined}\n {...rest}\n />\n )\n}\n\nexport default Skeleton\n"],"mappings":"AAgCI,cAAAA,MAAA,oBAhCJ,OAAOC,MAAU,OAsBjB,SAASC,EAAS,CAChB,QAAAC,EAAU,YACV,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,GAAGC,CACL,EAA4B,CAC1B,OACET,EAAC,OACC,UAAWC,EACT,6CACA,sBACA,CACE,gBAAiBE,IAAY,aAAeI,EAC5C,kBAAmBJ,IAAY,SAC/B,aAAcA,IAAY,QAAUI,CACtC,EACAH,EACAC,EACAG,CACF,EACA,MAAOF,EAAc,CAAE,YAAAA,CAAY,EAAI,OACtC,GAAGG,EACN,CAEJ,CAEA,IAAOC,EAAQR","names":["jsx","clsx","Skeleton","variant","width","height","aspectRatio","rounded","className","rest","Skeleton_default"]}
1
+ {"version":3,"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { ComponentProps } from 'react'\n\nexport interface SkeletonProps extends ComponentProps<'div'> {\n /** Shape variant */\n variant?: 'rectangle' | 'circle' | 'line'\n /** Width (Tailwind class or custom value) */\n width?: string\n /** Height (Tailwind class or custom value) */\n height?: string\n /** Aspect ratio (e.g., \"2/3\", \"16/9\", \"1/1\") */\n aspectRatio?: string\n /** Apply rounded corners (default: true for rectangle/line, always true for circle) */\n rounded?: boolean\n}\n\n/**\n * Skeleton - Atomic loading placeholder component\n *\n * Composable primitive for building loading states with shimmer effect.\n */\nfunction Skeleton({\n variant = 'rectangle',\n width,\n height,\n aspectRatio,\n rounded = true,\n className,\n ...rest\n}: Readonly<SkeletonProps>) {\n return (\n <div\n className={clsx(\n 'ui:relative ui:overflow-hidden ui:bg-muted',\n 'ui-skeleton-shimmer',\n {\n 'ui:rounded-lg': variant === 'rectangle' && rounded,\n 'ui:rounded-full': variant === 'circle',\n 'ui:rounded': variant === 'line' && rounded,\n },\n width,\n height,\n className\n )}\n data-testid=\"skeleton\"\n style={aspectRatio ? { aspectRatio } : undefined}\n {...rest}\n />\n )\n}\n\nexport default Skeleton\n"],"mappings":"AAgCI,cAAAA,MAAA,oBAhCJ,OAAOC,MAAU,OAsBjB,SAASC,EAAS,CAChB,QAAAC,EAAU,YACV,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,GAAGC,CACL,EAA4B,CAC1B,OACET,EAAC,OACC,UAAWC,EACT,6CACA,sBACA,CACE,gBAAiBE,IAAY,aAAeI,EAC5C,kBAAmBJ,IAAY,SAC/B,aAAcA,IAAY,QAAUI,CACtC,EACAH,EACAC,EACAG,CACF,EACA,cAAY,WACZ,MAAOF,EAAc,CAAE,YAAAA,CAAY,EAAI,OACtC,GAAGG,EACN,CAEJ,CAEA,IAAOC,EAAQR","names":["jsx","clsx","Skeleton","variant","width","height","aspectRatio","rounded","className","rest","Skeleton_default"]}
@@ -5,7 +5,9 @@ interface NextHeroImageProps {
5
5
  backdropPath?: string | null;
6
6
  /** Alt text for the image */
7
7
  title?: string | null;
8
+ /** Base64 blur data URL for instant placeholder */
9
+ blurDataURL?: string;
8
10
  }
9
- declare function HeroImage({ backdropPath, title }: Readonly<NextHeroImageProps>): react_jsx_runtime.JSX.Element;
11
+ declare function HeroImage({ backdropPath, title, blurDataURL, }: Readonly<NextHeroImageProps>): react_jsx_runtime.JSX.Element;
10
12
 
11
13
  export { type NextHeroImageProps, HeroImage as default };
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as r,jsx as e,jsxs as n}from"react/jsx-runtime";import{Skeleton as a}from"../../Skeleton";import{NextImage as u}from"../Image";function o({backdropPath:i,title:l}){const t=i?`https://image.tmdb.org/t/p/original${i}`:void 0;return n(r,{children:[t?e(u,{src:t,alt:l??"Unknown",fill:!0,preload:!0,sizes:"100vw",className:"ui:relative ui:h-full ui:w-full ui:z-0",imageClassName:"ui:h-auto! ui:w-full",fallback:e(a,{"data-testid":"hero-image-skeleton",variant:"rectangle",width:"ui:relative ui:w-full ui:h-full ui:aspect-[21/9] ui:lg:max-h-[440px] ui:z-0",aspectRatio:"21/9",rounded:!1})}):e(a,{"data-testid":"hero-image-skeleton",variant:"rectangle",width:"ui:relative ui:w-full ui:h-auto ui:aspect-[21/9] ui:lg:max-h-[440px] ui:z-0",aspectRatio:"21/9",rounded:!1}),e("div",{className:"ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0"})]})}var m=o;export{m as default};
1
+ import{Fragment as n,jsx as t,jsxs as s}from"react/jsx-runtime";import{Skeleton as l}from"../../Skeleton";import{NextImage as r}from"../Image";function o({backdropPath:e,title:a,blurDataURL:u}){const i=e?`https://image.tmdb.org/t/p/w1280${e}`:void 0;return s(n,{children:[i?t(r,{src:i,alt:a??"Unknown",fill:!0,preload:!0,sizes:"100vw",className:"ui:relative ui:h-full ui:w-full ui:z-0",blurDataURL:u}):t(l,{"data-testid":"hero-image-skeleton",variant:"rectangle",width:"ui:relative ui:w-full ui:h-auto ui:aspect-[21/9] ui:lg:max-h-[440px] ui:z-0",aspectRatio:"21/9",rounded:!1}),t("div",{className:"ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0"})]})}var p=o;export{p as default};
2
2
  //# sourceMappingURL=HeroImage.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/next/HeroImage/HeroImage.tsx"],"sourcesContent":["'use client'\n\nimport { Skeleton } from '../../Skeleton'\nimport { NextImage } from '../Image'\n\nexport interface NextHeroImageProps {\n /** Backdrop path from TMDB API (e.g. \"/abc123.jpg\") */\n backdropPath?: string | null\n /** Alt text for the image */\n title?: string | null\n}\n\nfunction HeroImage({ backdropPath, title }: Readonly<NextHeroImageProps>) {\n const src = backdropPath\n ? `https://image.tmdb.org/t/p/original${backdropPath}`\n : undefined\n\n return (\n <>\n {src ? (\n <NextImage\n src={src}\n alt={title ?? 'Unknown'}\n fill\n preload\n sizes=\"100vw\"\n className=\"ui:relative ui:h-full ui:w-full ui:z-0\"\n imageClassName=\"ui:h-auto! ui:w-full\"\n fallback={\n <Skeleton\n data-testid=\"hero-image-skeleton\"\n variant=\"rectangle\"\n width=\"ui:relative ui:w-full ui:h-full ui:aspect-[21/9] ui:lg:max-h-[440px] ui:z-0\"\n aspectRatio=\"21/9\"\n rounded={false}\n />\n }\n />\n ) : (\n <Skeleton\n data-testid=\"hero-image-skeleton\"\n variant=\"rectangle\"\n width=\"ui:relative ui:w-full ui:h-auto ui:aspect-[21/9] ui:lg:max-h-[440px] ui:z-0\"\n aspectRatio=\"21/9\"\n rounded={false}\n />\n )}\n {/* Gradient Overlay */}\n <div className=\"ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0\" />\n </>\n )\n}\n\nexport default HeroImage\n"],"mappings":"aAkBI,mBAAAA,EAWQ,OAAAC,EAXR,QAAAC,MAAA,oBAhBJ,OAAS,YAAAC,MAAgB,iBACzB,OAAS,aAAAC,MAAiB,WAS1B,SAASC,EAAU,CAAE,aAAAC,EAAc,MAAAC,CAAM,EAAiC,CACxE,MAAMC,EAAMF,EACR,sCAAsCA,CAAY,GAClD,OAEJ,OACEJ,EAAAF,EAAA,CACG,UAAAQ,EACCP,EAACG,EAAA,CACC,IAAKI,EACL,IAAKD,GAAS,UACd,KAAI,GACJ,QAAO,GACP,MAAM,QACN,UAAU,yCACV,eAAe,uBACf,SACEN,EAACE,EAAA,CACC,cAAY,sBACZ,QAAQ,YACR,MAAM,8EACN,YAAY,OACZ,QAAS,GACX,EAEJ,EAEAF,EAACE,EAAA,CACC,cAAY,sBACZ,QAAQ,YACR,MAAM,8EACN,YAAY,OACZ,QAAS,GACX,EAGFF,EAAC,OAAI,UAAU,iJAAiJ,GAClK,CAEJ,CAEA,IAAOQ,EAAQJ","names":["Fragment","jsx","jsxs","Skeleton","NextImage","HeroImage","backdropPath","title","src","HeroImage_default"]}
1
+ {"version":3,"sources":["../../../src/next/HeroImage/HeroImage.tsx"],"sourcesContent":["import { Skeleton } from '../../Skeleton'\nimport { NextImage } from '../Image'\n\nexport interface NextHeroImageProps {\n /** Backdrop path from TMDB API (e.g. \"/abc123.jpg\") */\n backdropPath?: string | null\n /** Alt text for the image */\n title?: string | null\n /** Base64 blur data URL for instant placeholder */\n blurDataURL?: string\n}\n\nfunction HeroImage({\n backdropPath,\n title,\n blurDataURL,\n}: Readonly<NextHeroImageProps>) {\n const src = backdropPath\n ? `https://image.tmdb.org/t/p/w1280${backdropPath}`\n : undefined\n\n return (\n <>\n {src ? (\n <NextImage\n src={src}\n alt={title ?? 'Unknown'}\n fill\n preload\n sizes=\"100vw\"\n className=\"ui:relative ui:h-full ui:w-full ui:z-0\"\n blurDataURL={blurDataURL}\n />\n ) : (\n <Skeleton\n data-testid=\"hero-image-skeleton\"\n variant=\"rectangle\"\n width=\"ui:relative ui:w-full ui:h-auto ui:aspect-[21/9] ui:lg:max-h-[440px] ui:z-0\"\n aspectRatio=\"21/9\"\n rounded={false}\n />\n )}\n {/* Gradient Overlay */}\n <div className=\"ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0\" />\n </>\n )\n}\n\nexport default HeroImage\n"],"mappings":"AAsBI,mBAAAA,EAEI,OAAAC,EAFJ,QAAAC,MAAA,oBAtBJ,OAAS,YAAAC,MAAgB,iBACzB,OAAS,aAAAC,MAAiB,WAW1B,SAASC,EAAU,CACjB,aAAAC,EACA,MAAAC,EACA,YAAAC,CACF,EAAiC,CAC/B,MAAMC,EAAMH,EACR,mCAAmCA,CAAY,GAC/C,OAEJ,OACEJ,EAAAF,EAAA,CACG,UAAAS,EACCR,EAACG,EAAA,CACC,IAAKK,EACL,IAAKF,GAAS,UACd,KAAI,GACJ,QAAO,GACP,MAAM,QACN,UAAU,yCACV,YAAaC,EACf,EAEAP,EAACE,EAAA,CACC,cAAY,sBACZ,QAAQ,YACR,MAAM,8EACN,YAAY,OACZ,QAAS,GACX,EAGFF,EAAC,OAAI,UAAU,iJAAiJ,GAClK,CAEJ,CAEA,IAAOS,EAAQL","names":["Fragment","jsx","jsxs","Skeleton","NextImage","HeroImage","backdropPath","title","blurDataURL","src","HeroImage_default"]}
@@ -1,8 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { NextImageProps } from './NextImage.types.js';
3
3
  import 'next/image';
4
- import 'react';
5
4
 
6
- declare function NextImage({ fallback, aspectRatio, blurDataURL, className, imageClassName, onLoad, onError, style, ...rest }: Readonly<NextImageProps>): react_jsx_runtime.JSX.Element;
5
+ declare function NextImage({ aspectRatio, blurDataURL, className, imageClassName, style, ...rest }: Readonly<NextImageProps>): react_jsx_runtime.JSX.Element;
7
6
 
8
7
  export { NextImage as default };
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t}from"react/jsx-runtime";import s from"clsx";import v from"next/image";import{useCallback as c,useEffect as E,useRef as N,useState as S}from"react";import{Icon as x}from"../../Icon";function b({fallback:f,aspectRatio:m,blurDataURL:n,className:d,imageClassName:p,onLoad:a,onError:o,style:u,...y}){const[i,r]=S("loading"),l=N(null);E(()=>{const e=l.current?.querySelector("img");e?.complete&&e.naturalWidth>0&&r("loaded")},[]);const g=c(e=>{r("loaded"),typeof a=="function"&&a(e)},[a]),h=c(e=>{r("error"),typeof o=="function"&&o(e)},[o]),I=t("div",{className:"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted",children:t(x,{name:"Photo",size:48,className:"ui:text-muted-foreground","aria-hidden":"true"})});return t("div",{className:s("ui:relative ui:overflow-hidden ui:bg-muted",d),style:m?{aspectRatio:m,...u}:u,"data-state":i,ref:l,children:i==="error"?f??I:t(v,{...y,className:s("ui:transition-opacity ui:duration-300",i==="loaded"?"ui:opacity-100":"ui:opacity-0",p),onLoad:g,onError:h,placeholder:n?"blur":"empty",blurDataURL:n})})}var M=b;export{M as default};
1
+ import{jsx as r}from"react/jsx-runtime";import i from"clsx";import p from"next/image";function d({aspectRatio:e,blurDataURL:m,className:t,imageClassName:a,style:o,...l}){return r("div",{className:i("ui:relative ui:overflow-hidden ui:bg-muted",t),style:e?{aspectRatio:e,...o}:o,children:r(p,{...l,className:a,placeholder:m?"blur":"empty",blurDataURL:m})})}var g=d;export{g as default};
2
2
  //# sourceMappingURL=NextImage.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/next/Image/NextImage.tsx"],"sourcesContent":["'use client'\n\nimport clsx from 'clsx'\nimport Image from 'next/image'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../../Icon'\n\nimport type { NextImageProps } from './NextImage.types'\nimport type { ImageState } from '../../Image'\nimport type { SyntheticEvent } from 'react'\n\nfunction NextImage({\n fallback,\n aspectRatio,\n blurDataURL,\n className,\n imageClassName,\n onLoad,\n onError,\n style,\n ...rest\n}: Readonly<NextImageProps>) {\n const [state, setState] = useState<ImageState>('loading')\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const img = wrapperRef.current?.querySelector('img')\n\n if (img?.complete && img.naturalWidth > 0) {\n setState('loaded')\n }\n }, [])\n\n const handleLoad = useCallback(\n (e: SyntheticEvent<HTMLImageElement>) => {\n setState('loaded')\n\n if (typeof onLoad === 'function') {\n onLoad(e as Parameters<typeof onLoad>[0])\n }\n },\n [onLoad]\n )\n\n const handleError = useCallback(\n (e: SyntheticEvent<HTMLImageElement>) => {\n setState('error')\n\n if (typeof onError === 'function') {\n onError(e as Parameters<typeof onError>[0])\n }\n },\n [onError]\n )\n\n const defaultFallback = (\n <div className=\"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted\">\n <Icon\n name=\"Photo\"\n size={48}\n className=\"ui:text-muted-foreground\"\n aria-hidden=\"true\"\n />\n </div>\n )\n\n return (\n <div\n className={clsx('ui:relative ui:overflow-hidden ui:bg-muted', className)}\n style={aspectRatio ? { aspectRatio, ...style } : style}\n data-state={state}\n ref={wrapperRef}\n >\n {state === 'error' ? (\n (fallback ?? defaultFallback)\n ) : (\n <Image\n {...rest}\n className={clsx(\n 'ui:transition-opacity ui:duration-300',\n state === 'loaded' ? 'ui:opacity-100' : 'ui:opacity-0',\n imageClassName\n )}\n onLoad={handleLoad}\n onError={handleError}\n placeholder={blurDataURL ? 'blur' : 'empty'}\n blurDataURL={blurDataURL}\n />\n )}\n </div>\n )\n}\n\nexport default NextImage\n"],"mappings":"aA2DM,cAAAA,MAAA,oBAzDN,OAAOC,MAAU,OACjB,OAAOC,MAAW,aAClB,OAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAEzD,OAAS,QAAAC,MAAY,aAMrB,SAASC,EAAU,CACjB,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,eAAAC,EACA,OAAAC,EACA,QAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAA6B,CAC3B,KAAM,CAACC,EAAOC,CAAQ,EAAIb,EAAqB,SAAS,EAElDc,EAAaf,EAAuB,IAAI,EAE9CD,EAAU,IAAM,CACd,MAAMiB,EAAMD,EAAW,SAAS,cAAc,KAAK,EAE/CC,GAAK,UAAYA,EAAI,aAAe,GACtCF,EAAS,QAAQ,CAErB,EAAG,CAAC,CAAC,EAEL,MAAMG,EAAanB,EAChB,GAAwC,CACvCgB,EAAS,QAAQ,EAEb,OAAOL,GAAW,YACpBA,EAAO,CAAiC,CAE5C,EACA,CAACA,CAAM,CACT,EAEMS,EAAcpB,EACjB,GAAwC,CACvCgB,EAAS,OAAO,EAEZ,OAAOJ,GAAY,YACrBA,EAAQ,CAAkC,CAE9C,EACA,CAACA,CAAO,CACV,EAEMS,EACJxB,EAAC,OAAI,UAAU,4EACb,SAAAA,EAACO,EAAA,CACC,KAAK,QACL,KAAM,GACN,UAAU,2BACV,cAAY,OACd,EACF,EAGF,OACEP,EAAC,OACC,UAAWC,EAAK,6CAA8CW,CAAS,EACvE,MAAOF,EAAc,CAAE,YAAAA,EAAa,GAAGM,CAAM,EAAIA,EACjD,aAAYE,EACZ,IAAKE,EAEJ,SAAAF,IAAU,QACRT,GAAYe,EAEbxB,EAACE,EAAA,CACE,GAAGe,EACJ,UAAWhB,EACT,wCACAiB,IAAU,SAAW,iBAAmB,eACxCL,CACF,EACA,OAAQS,EACR,QAASC,EACT,YAAaZ,EAAc,OAAS,QACpC,YAAaA,EACf,EAEJ,CAEJ,CAEA,IAAOc,EAAQjB","names":["jsx","clsx","Image","useCallback","useEffect","useRef","useState","Icon","NextImage","fallback","aspectRatio","blurDataURL","className","imageClassName","onLoad","onError","style","rest","state","setState","wrapperRef","img","handleLoad","handleError","defaultFallback","NextImage_default"]}
1
+ {"version":3,"sources":["../../../src/next/Image/NextImage.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport Image from 'next/image'\n\nimport type { NextImageProps } from './NextImage.types'\n\nfunction NextImage({\n aspectRatio,\n blurDataURL,\n className,\n imageClassName,\n style,\n ...rest\n}: Readonly<NextImageProps>) {\n return (\n <div\n className={clsx('ui:relative ui:overflow-hidden ui:bg-muted', className)}\n style={aspectRatio ? { aspectRatio, ...style } : style}\n >\n <Image\n {...rest}\n className={imageClassName}\n placeholder={blurDataURL ? 'blur' : 'empty'}\n blurDataURL={blurDataURL}\n />\n </div>\n )\n}\n\nexport default NextImage\n"],"mappings":"AAkBM,cAAAA,MAAA,oBAlBN,OAAOC,MAAU,OACjB,OAAOC,MAAW,aAIlB,SAASC,EAAU,CACjB,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,eAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAA6B,CAC3B,OACET,EAAC,OACC,UAAWC,EAAK,6CAA8CK,CAAS,EACvE,MAAOF,EAAc,CAAE,YAAAA,EAAa,GAAGI,CAAM,EAAIA,EAEjD,SAAAR,EAACE,EAAA,CACE,GAAGO,EACJ,UAAWF,EACX,YAAaF,EAAc,OAAS,QACpC,YAAaA,EACf,EACF,CAEJ,CAEA,IAAOK,EAAQP","names":["jsx","clsx","Image","NextImage","aspectRatio","blurDataURL","className","imageClassName","style","rest","NextImage_default"]}
@@ -1,14 +1,11 @@
1
1
  import { ImageProps } from 'next/image';
2
- import { ReactNode } from 'react';
3
2
 
4
3
  interface NextImageProps extends Omit<ImageProps, 'placeholder'> {
5
- /** Custom fallback content on error (default: Photo icon) */
6
- fallback?: ReactNode;
7
4
  /** Container aspect ratio (e.g. '2/3', '16/9') */
8
5
  aspectRatio?: string;
9
6
  /** Base64 blur data URL — auto-sets placeholder="blur" when provided */
10
7
  blurDataURL?: string;
11
- /** Classes applied directly to the `<Image>` element (e.g. object-cover) */
8
+ /** Classes applied directly to the `<Image>` element */
12
9
  imageClassName?: string;
13
10
  }
14
11
 
@@ -0,0 +1,8 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { NextImageClientProps } from './NextImageClient.types.js';
3
+ import 'next/image';
4
+ import 'react';
5
+
6
+ declare function NextImageClient({ fallback, aspectRatio, blurDataURL, className, imageClassName, onLoad, onError, style, ...rest }: Readonly<NextImageClientProps>): react_jsx_runtime.JSX.Element;
7
+
8
+ export { NextImageClient as default };
@@ -0,0 +1,2 @@
1
+ "use client";import{jsx as t}from"react/jsx-runtime";import s from"clsx";import v from"next/image";import{useCallback as c,useEffect as E,useRef as N,useState as S}from"react";import{Icon as x}from"../../Icon";function b({fallback:f,aspectRatio:n,blurDataURL:l,className:d,imageClassName:p,onLoad:a,onError:i,style:m,...y}){const[o,r]=S("loading"),u=N(null);E(()=>{const e=u.current?.querySelector("img");e?.complete&&e.naturalWidth>0&&r("loaded")},[]);const g=c(e=>{r("loaded"),typeof a=="function"&&a(e)},[a]),h=c(e=>{r("error"),typeof i=="function"&&i(e)},[i]),I=t("div",{className:"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted",children:t(x,{name:"Photo",size:48,className:"ui:text-muted-foreground","aria-hidden":"true"})});return t("div",{className:s("ui:relative ui:overflow-hidden ui:bg-muted",d),style:n?{aspectRatio:n,...m}:m,"data-state":o,ref:u,children:o==="error"?f??I:t(v,{...y,className:s("ui:transition-opacity ui:duration-300",o==="loaded"?"ui:opacity-100":"ui:opacity-0",p),onLoad:g,onError:h,placeholder:l?"blur":"empty",blurDataURL:l})})}var H=b;export{H as default};
2
+ //# sourceMappingURL=NextImageClient.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/next/Image/NextImageClient.tsx"],"sourcesContent":["'use client'\n\nimport clsx from 'clsx'\nimport Image from 'next/image'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../../Icon'\n\nimport type { NextImageClientProps } from './NextImageClient.types'\nimport type { ImageState } from '../../Image'\nimport type { SyntheticEvent } from 'react'\n\nfunction NextImageClient({\n fallback,\n aspectRatio,\n blurDataURL,\n className,\n imageClassName,\n onLoad,\n onError,\n style,\n ...rest\n}: Readonly<NextImageClientProps>) {\n const [state, setState] = useState<ImageState>('loading')\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const img = wrapperRef.current?.querySelector('img')\n\n if (img?.complete && img.naturalWidth > 0) {\n setState('loaded')\n }\n }, [])\n\n const handleLoad = useCallback(\n (e: SyntheticEvent<HTMLImageElement>) => {\n setState('loaded')\n\n if (typeof onLoad === 'function') {\n onLoad(e as Parameters<typeof onLoad>[0])\n }\n },\n [onLoad]\n )\n\n const handleError = useCallback(\n (e: SyntheticEvent<HTMLImageElement>) => {\n setState('error')\n\n if (typeof onError === 'function') {\n onError(e as Parameters<typeof onError>[0])\n }\n },\n [onError]\n )\n\n const defaultFallback = (\n <div className=\"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted\">\n <Icon\n name=\"Photo\"\n size={48}\n className=\"ui:text-muted-foreground\"\n aria-hidden=\"true\"\n />\n </div>\n )\n\n return (\n <div\n className={clsx('ui:relative ui:overflow-hidden ui:bg-muted', className)}\n style={aspectRatio ? { aspectRatio, ...style } : style}\n data-state={state}\n ref={wrapperRef}\n >\n {state === 'error' ? (\n (fallback ?? defaultFallback)\n ) : (\n <Image\n {...rest}\n className={clsx(\n 'ui:transition-opacity ui:duration-300',\n state === 'loaded' ? 'ui:opacity-100' : 'ui:opacity-0',\n imageClassName\n )}\n onLoad={handleLoad}\n onError={handleError}\n placeholder={blurDataURL ? 'blur' : 'empty'}\n blurDataURL={blurDataURL}\n />\n )}\n </div>\n )\n}\n\nexport default NextImageClient\n"],"mappings":"aA2DM,cAAAA,MAAA,oBAzDN,OAAOC,MAAU,OACjB,OAAOC,MAAW,aAClB,OAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAEzD,OAAS,QAAAC,MAAY,aAMrB,SAASC,EAAgB,CACvB,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,eAAAC,EACA,OAAAC,EACA,QAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAAmC,CACjC,KAAM,CAACC,EAAOC,CAAQ,EAAIb,EAAqB,SAAS,EAElDc,EAAaf,EAAuB,IAAI,EAE9CD,EAAU,IAAM,CACd,MAAMiB,EAAMD,EAAW,SAAS,cAAc,KAAK,EAE/CC,GAAK,UAAYA,EAAI,aAAe,GACtCF,EAAS,QAAQ,CAErB,EAAG,CAAC,CAAC,EAEL,MAAMG,EAAanB,EAChB,GAAwC,CACvCgB,EAAS,QAAQ,EAEb,OAAOL,GAAW,YACpBA,EAAO,CAAiC,CAE5C,EACA,CAACA,CAAM,CACT,EAEMS,EAAcpB,EACjB,GAAwC,CACvCgB,EAAS,OAAO,EAEZ,OAAOJ,GAAY,YACrBA,EAAQ,CAAkC,CAE9C,EACA,CAACA,CAAO,CACV,EAEMS,EACJxB,EAAC,OAAI,UAAU,4EACb,SAAAA,EAACO,EAAA,CACC,KAAK,QACL,KAAM,GACN,UAAU,2BACV,cAAY,OACd,EACF,EAGF,OACEP,EAAC,OACC,UAAWC,EAAK,6CAA8CW,CAAS,EACvE,MAAOF,EAAc,CAAE,YAAAA,EAAa,GAAGM,CAAM,EAAIA,EACjD,aAAYE,EACZ,IAAKE,EAEJ,SAAAF,IAAU,QACRT,GAAYe,EAEbxB,EAACE,EAAA,CACE,GAAGe,EACJ,UAAWhB,EACT,wCACAiB,IAAU,SAAW,iBAAmB,eACxCL,CACF,EACA,OAAQS,EACR,QAASC,EACT,YAAaZ,EAAc,OAAS,QACpC,YAAaA,EACf,EAEJ,CAEJ,CAEA,IAAOc,EAAQjB","names":["jsx","clsx","Image","useCallback","useEffect","useRef","useState","Icon","NextImageClient","fallback","aspectRatio","blurDataURL","className","imageClassName","onLoad","onError","style","rest","state","setState","wrapperRef","img","handleLoad","handleError","defaultFallback","NextImageClient_default"]}
@@ -0,0 +1,15 @@
1
+ import { ImageProps } from 'next/image';
2
+ import { ReactNode } from 'react';
3
+
4
+ interface NextImageClientProps extends Omit<ImageProps, 'placeholder'> {
5
+ /** Custom fallback content on error (default: Photo icon) */
6
+ fallback?: ReactNode;
7
+ /** Container aspect ratio (e.g. '2/3', '16/9') */
8
+ aspectRatio?: string;
9
+ /** Base64 blur data URL — auto-sets placeholder="blur" when provided */
10
+ blurDataURL?: string;
11
+ /** Classes applied directly to the `<Image>` element */
12
+ imageClassName?: string;
13
+ }
14
+
15
+ export type { NextImageClientProps };
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=NextImageClient.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,5 +1,7 @@
1
1
  export { default as NextImage } from './NextImage.js';
2
+ export { default as NextImageClient } from './NextImageClient.js';
2
3
  export { NextImageProps } from './NextImage.types.js';
4
+ export { NextImageClientProps } from './NextImageClient.types.js';
3
5
  import 'react/jsx-runtime';
4
6
  import 'next/image';
5
7
  import 'react';
@@ -1,2 +1,2 @@
1
- import{default as a}from"./NextImage";export{a as NextImage};
1
+ import{default as a}from"./NextImage";import{default as o}from"./NextImageClient";export{a as NextImage,o as NextImageClient};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/next/Image/index.ts"],"sourcesContent":["export { default as NextImage } from './NextImage'\nexport type { NextImageProps } from './NextImage.types'\n"],"mappings":"AAAA,OAAoB,WAAXA,MAA4B","names":["default"]}
1
+ {"version":3,"sources":["../../../src/next/Image/index.ts"],"sourcesContent":["export { default as NextImage } from './NextImage'\nexport { default as NextImageClient } from './NextImageClient'\nexport type { NextImageProps } from './NextImage.types'\nexport type { NextImageClientProps } from './NextImageClient.types'\n"],"mappings":"AAAA,OAAoB,WAAXA,MAA4B,cACrC,OAAoB,WAAXA,MAAkC","names":["default"]}
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Card as p}from"../../Card";import{getMovieCardClasses as f}from"../../MovieCard/MovieCard.utils";import{Rating as v}from"../../Rating";import{Typography as r}from"../../Typography";import{NextImage as h}from"../Image";function N({id:o,title:i,posterUrl:s,voteAverage:l,year:t,className:n,imageLoading:u="lazy",isInteractive:d,onClick:m,blurDataURL:g}){const c=`https://image.tmdb.org/t/p/w342${s}`;return a(p,{variant:"ghost",className:f(d,n),onClick:m,"data-testid":`movie-card-${String(o)}`,children:[a("div",{className:"ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200",children:[e(h,{src:c,alt:i,width:150,height:225,loading:u,blurDataURL:g,className:"ui:h-full ui:w-full"}),e("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:e(v,{value:l,size:"sm",variant:"circle",trackClassName:"ui:text-gray-200",className:"ui:drop-shadow"})})]}),a("div",{className:"ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1",children:[e(r,{variant:"label",as:"h3",className:"ui:line-clamp-2",title:i,children:i}),t&&e(r,{variant:"caption-xs",className:"ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",children:t})]})]})}export{N as default};
1
+ import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Card as p}from"../../Card";import{getMovieCardClasses as f}from"../../MovieCard/MovieCard.utils";import{Rating as v}from"../../Rating";import{Typography as r}from"../../Typography";import{NextImage as h}from"../Image";function N({id:o,title:i,posterUrl:s,voteAverage:l,year:t,className:n,imageLoading:u="lazy",isInteractive:d,onClick:m,blurDataURL:g}){const c=`https://image.tmdb.org/t/p/w342${s}`;return a(p,{variant:"ghost",className:f(d,n),onClick:m,"data-testid":`movie-card-${String(o)}`,children:[a("div",{className:"ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200",children:[e(h,{src:c,alt:i,width:150,height:225,loading:u,blurDataURL:g,className:"ui:h-full ui:w-full"}),e("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:e(v,{value:l,size:"sm",variant:"circle",trackClassName:"ui:text-gray-200",className:"ui:drop-shadow"})})]}),a("div",{className:"ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1",children:[e(r,{variant:"label",as:"h3",className:"ui:line-clamp-2",title:i,children:i}),t&&e(r,{variant:"caption-xs",className:"ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",children:t})]})]})}export{N as default};
2
2
  //# sourceMappingURL=MovieCardContent.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/next/MovieCard/MovieCardContent.tsx"],"sourcesContent":["'use client'\n\nimport { Card } from '../../Card'\nimport { getMovieCardClasses } from '../../MovieCard/MovieCard.utils'\nimport { Rating } from '../../Rating'\nimport { Typography } from '../../Typography'\nimport { NextImage } from '../Image'\n\nimport type { ImageLoading } from '../../Image/Image'\nimport type { ReactNode } from 'react'\n\ninterface NextMovieCardContentProps {\n id: number\n title: string\n posterUrl: string\n voteAverage: number\n year?: number | null\n className?: string\n imageLoading?: ImageLoading\n isInteractive: boolean\n onClick?: (() => void) | undefined\n blurDataURL?: string\n}\n\nexport default function MovieCardContent({\n id,\n title,\n posterUrl,\n voteAverage,\n year,\n className,\n imageLoading = 'lazy',\n isInteractive,\n onClick,\n blurDataURL,\n}: Readonly<NextMovieCardContentProps>): ReactNode {\n const src = `https://image.tmdb.org/t/p/w342${posterUrl}`\n\n return (\n <Card\n variant=\"ghost\"\n className={getMovieCardClasses(isInteractive, className)}\n onClick={onClick}\n data-testid={`movie-card-${String(id)}`}\n >\n <div className=\"ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200\">\n <NextImage\n src={src}\n alt={title}\n width={150}\n height={225}\n loading={imageLoading}\n blurDataURL={blurDataURL}\n className=\"ui:h-full ui:w-full\"\n />\n <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\">\n <Rating\n value={voteAverage}\n size=\"sm\"\n variant=\"circle\"\n trackClassName=\"ui:text-gray-200\"\n className=\"ui:drop-shadow\"\n />\n </div>\n </div>\n\n <div className=\"ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1\">\n <Typography\n variant=\"label\"\n as=\"h3\"\n className=\"ui:line-clamp-2\"\n title={title}\n >\n {title}\n </Typography>\n {year && (\n <Typography\n variant=\"caption-xs\"\n className=\"ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground\"\n >\n {year}\n </Typography>\n )}\n </div>\n </Card>\n )\n}\n"],"mappings":"aA6CM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA3CN,OAAS,QAAAC,MAAY,aACrB,OAAS,uBAAAC,MAA2B,kCACpC,OAAS,UAAAC,MAAc,eACvB,OAAS,cAAAC,MAAkB,mBAC3B,OAAS,aAAAC,MAAiB,WAkBX,SAARC,EAAkC,CACvC,GAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,KAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,OACf,cAAAC,EACA,QAAAC,EACA,YAAAC,CACF,EAAmD,CACjD,MAAMC,EAAM,kCAAkCR,CAAS,GAEvD,OACET,EAACC,EAAA,CACC,QAAQ,QACR,UAAWC,EAAoBY,EAAeF,CAAS,EACvD,QAASG,EACT,cAAa,cAAc,OAAOR,CAAE,CAAC,GAErC,UAAAP,EAAC,OAAI,UAAU,wFACb,UAAAD,EAACM,EAAA,CACC,IAAKY,EACL,IAAKT,EACL,MAAO,IACP,OAAQ,IACR,QAASK,EACT,YAAaG,EACb,UAAU,sBACZ,EACAjB,EAAC,OAAI,UAAU,qHACb,SAAAA,EAACI,EAAA,CACC,MAAOO,EACP,KAAK,KACL,QAAQ,SACR,eAAe,mBACf,UAAU,iBACZ,EACF,GACF,EAEAV,EAAC,OAAI,UAAU,iDACb,UAAAD,EAACK,EAAA,CACC,QAAQ,QACR,GAAG,KACH,UAAU,kBACV,MAAOI,EAEN,SAAAA,EACH,EACCG,GACCZ,EAACK,EAAA,CACC,QAAQ,aACR,UAAU,+DAET,SAAAO,EACH,GAEJ,GACF,CAEJ","names":["jsx","jsxs","Card","getMovieCardClasses","Rating","Typography","NextImage","MovieCardContent","id","title","posterUrl","voteAverage","year","className","imageLoading","isInteractive","onClick","blurDataURL","src"]}
1
+ {"version":3,"sources":["../../../src/next/MovieCard/MovieCardContent.tsx"],"sourcesContent":["import { Card } from '../../Card'\nimport { getMovieCardClasses } from '../../MovieCard/MovieCard.utils'\nimport { Rating } from '../../Rating'\nimport { Typography } from '../../Typography'\nimport { NextImage } from '../Image'\n\nimport type { ImageLoading } from '../../Image/Image'\nimport type { ReactNode } from 'react'\n\ninterface NextMovieCardContentProps {\n id: number\n title: string\n posterUrl: string\n voteAverage: number\n year?: number | null\n className?: string\n imageLoading?: ImageLoading\n isInteractive: boolean\n onClick?: (() => void) | undefined\n blurDataURL?: string\n}\n\nexport default function MovieCardContent({\n id,\n title,\n posterUrl,\n voteAverage,\n year,\n className,\n imageLoading = 'lazy',\n isInteractive,\n onClick,\n blurDataURL,\n}: Readonly<NextMovieCardContentProps>): ReactNode {\n const src = `https://image.tmdb.org/t/p/w342${posterUrl}`\n\n return (\n <Card\n variant=\"ghost\"\n className={getMovieCardClasses(isInteractive, className)}\n onClick={onClick}\n data-testid={`movie-card-${String(id)}`}\n >\n <div className=\"ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200\">\n <NextImage\n src={src}\n alt={title}\n width={150}\n height={225}\n loading={imageLoading}\n blurDataURL={blurDataURL}\n className=\"ui:h-full ui:w-full\"\n />\n <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\">\n <Rating\n value={voteAverage}\n size=\"sm\"\n variant=\"circle\"\n trackClassName=\"ui:text-gray-200\"\n className=\"ui:drop-shadow\"\n />\n </div>\n </div>\n\n <div className=\"ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1\">\n <Typography\n variant=\"label\"\n as=\"h3\"\n className=\"ui:line-clamp-2\"\n title={title}\n >\n {title}\n </Typography>\n {year && (\n <Typography\n variant=\"caption-xs\"\n className=\"ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground\"\n >\n {year}\n </Typography>\n )}\n </div>\n </Card>\n )\n}\n"],"mappings":"AA2CM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA3CN,OAAS,QAAAC,MAAY,aACrB,OAAS,uBAAAC,MAA2B,kCACpC,OAAS,UAAAC,MAAc,eACvB,OAAS,cAAAC,MAAkB,mBAC3B,OAAS,aAAAC,MAAiB,WAkBX,SAARC,EAAkC,CACvC,GAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,KAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,OACf,cAAAC,EACA,QAAAC,EACA,YAAAC,CACF,EAAmD,CACjD,MAAMC,EAAM,kCAAkCR,CAAS,GAEvD,OACET,EAACC,EAAA,CACC,QAAQ,QACR,UAAWC,EAAoBY,EAAeF,CAAS,EACvD,QAASG,EACT,cAAa,cAAc,OAAOR,CAAE,CAAC,GAErC,UAAAP,EAAC,OAAI,UAAU,wFACb,UAAAD,EAACM,EAAA,CACC,IAAKY,EACL,IAAKT,EACL,MAAO,IACP,OAAQ,IACR,QAASK,EACT,YAAaG,EACb,UAAU,sBACZ,EACAjB,EAAC,OAAI,UAAU,qHACb,SAAAA,EAACI,EAAA,CACC,MAAOO,EACP,KAAK,KACL,QAAQ,SACR,eAAe,mBACf,UAAU,iBACZ,EACF,GACF,EAEAV,EAAC,OAAI,UAAU,iDACb,UAAAD,EAACK,EAAA,CACC,QAAQ,QACR,GAAG,KACH,UAAU,kBACV,MAAOI,EAEN,SAAAA,EACH,EACCG,GACCZ,EAACK,EAAA,CACC,QAAQ,aACR,UAAU,+DAET,SAAAO,EACH,GAEJ,GACF,CAEJ","names":["jsx","jsxs","Card","getMovieCardClasses","Rating","Typography","NextImage","MovieCardContent","id","title","posterUrl","voteAverage","year","className","imageLoading","isInteractive","onClick","blurDataURL","src"]}
@@ -2,7 +2,9 @@ export { default as Button } from './Button/Button.js';
2
2
  export { NextButtonAsButton, NextButtonAsLink, NextButtonProps } from './Button/Button.types.js';
3
3
  export { default as HeroImage, NextHeroImageProps } from './HeroImage/HeroImage.js';
4
4
  export { default as NextImage } from './Image/NextImage.js';
5
+ export { default as NextImageClient } from './Image/NextImageClient.js';
5
6
  export { NextImageProps } from './Image/NextImage.types.js';
7
+ export { NextImageClientProps } from './Image/NextImageClient.types.js';
6
8
  export { default as MovieCard } from './MovieCard/MovieCard.js';
7
9
  export { NextMovieCardAsLink, NextMovieCardProps } from './MovieCard/MovieCard.types.js';
8
10
  export { MovieCardAsButton, MovieCardAsCard, MovieCardBaseProps } from '../MovieCard/MovieCard.utils.js';
@@ -1,2 +1,2 @@
1
- "use client";import{Button as t}from"./Button";import{HeroImage as p}from"./HeroImage";import{NextImage as a}from"./Image";import{MovieCard as s}from"./MovieCard";export{t as Button,p as HeroImage,s as MovieCard,a as NextImage};
1
+ "use client";import{Button as t}from"./Button";import{HeroImage as p}from"./HeroImage";import{NextImage as a,NextImageClient as m}from"./Image";import{MovieCard as i}from"./MovieCard";export{t as Button,p as HeroImage,i as MovieCard,a as NextImage,m as NextImageClient};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/next/index.ts"],"sourcesContent":["'use client'\n\nexport { Button } from './Button'\nexport type {\n NextButtonProps,\n NextButtonAsButton,\n NextButtonAsLink,\n} from './Button'\n\nexport { HeroImage } from './HeroImage'\nexport type { NextHeroImageProps } from './HeroImage'\n\nexport { NextImage } from './Image'\nexport type { NextImageProps } from './Image'\n\nexport { MovieCard } from './MovieCard'\nexport type {\n NextMovieCardProps,\n NextMovieCardAsLink,\n MovieCardBaseProps,\n MovieCardAsCard,\n MovieCardAsButton,\n} from './MovieCard'\n"],"mappings":"aAEA,OAAS,UAAAA,MAAc,WAOvB,OAAS,aAAAC,MAAiB,cAG1B,OAAS,aAAAC,MAAiB,UAG1B,OAAS,aAAAC,MAAiB","names":["Button","HeroImage","NextImage","MovieCard"]}
1
+ {"version":3,"sources":["../../src/next/index.ts"],"sourcesContent":["'use client'\n\nexport { Button } from './Button'\nexport type {\n NextButtonProps,\n NextButtonAsButton,\n NextButtonAsLink,\n} from './Button'\n\nexport { HeroImage } from './HeroImage'\nexport type { NextHeroImageProps } from './HeroImage'\n\nexport { NextImage, NextImageClient } from './Image'\nexport type { NextImageProps, NextImageClientProps } from './Image'\n\nexport { MovieCard } from './MovieCard'\nexport type {\n NextMovieCardProps,\n NextMovieCardAsLink,\n MovieCardBaseProps,\n MovieCardAsCard,\n MovieCardAsButton,\n} from './MovieCard'\n"],"mappings":"aAEA,OAAS,UAAAA,MAAc,WAOvB,OAAS,aAAAC,MAAiB,cAG1B,OAAS,aAAAC,EAAW,mBAAAC,MAAuB,UAG3C,OAAS,aAAAC,MAAiB","names":["Button","HeroImage","NextImage","NextImageClient","MovieCard"]}
package/dist/styles.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.1.0 | MIT License | https://tailwindcss.com */
2
- @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){@layer base{*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-scroll-snap-strictness:proximity;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--ui-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--ui-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ui-color-red-50:oklch(97.1% .013 17.38);--ui-color-red-200:oklch(88.5% .062 18.334);--ui-color-red-500:oklch(63.7% .237 25.331);--ui-color-red-700:oklch(50.5% .213 27.518);--ui-color-red-900:oklch(39.6% .141 25.723);--ui-color-amber-600:oklch(66.6% .179 58.318);--ui-color-yellow-400:oklch(85.2% .199 91.936);--ui-color-green-600:oklch(62.7% .194 149.214);--ui-color-gray-200:oklch(92.8% .006 264.531);--ui-color-gray-300:oklch(87.2% .01 258.338);--ui-color-gray-400:oklch(70.7% .022 261.325);--ui-color-black:#000;--ui-color-white:#fff;--ui-container-4xl:56rem;--ui-text-xs:.75rem;--ui-text-xs--line-height:calc(1/.75);--ui-text-sm:.875rem;--ui-text-sm--line-height:calc(1.25/.875);--ui-text-base:1rem;--ui-text-base--line-height:calc(1.5/1);--ui-text-lg:1.125rem;--ui-text-lg--line-height:calc(1.75/1.125);--ui-text-xl:1.25rem;--ui-text-xl--line-height:calc(1.75/1.25);--ui-text-2xl:1.5rem;--ui-text-2xl--line-height:calc(2/1.5);--ui-text-3xl:1.875rem;--ui-text-3xl--line-height:calc(2.25/1.875);--ui-text-4xl:2.25rem;--ui-text-4xl--line-height:calc(2.5/2.25);--ui-font-weight-medium:500;--ui-font-weight-semibold:600;--ui-font-weight-bold:700;--ui-leading-tight:1.25;--ui-leading-snug:1.375;--ui-leading-normal:1.5;--ui-leading-relaxed:1.625;--ui-radius-md:.5rem;--ui-radius-lg:.75rem;--ui-animate-spin:spin 1s linear infinite;--ui-aspect-video:16/9;--ui-default-transition-duration:.15s;--ui-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--ui-default-font-family:var(--ui-font-sans);--ui-default-mono-font-family:var(--ui-font-mono);--ui-color-white-80:#fffc;--ui-color-background:#fff;--ui-color-foreground:#171717;--ui-color-primary:#f59e0b;--ui-color-primary-foreground:#171717;--ui-color-secondary:#f5f5f5;--ui-color-secondary-foreground:#171717;--ui-color-card:#fff;--ui-color-card-foreground:#171717;--ui-color-border:#e5e5e5;--ui-color-input:#d4d4d4;--ui-color-ring:#a3a3a3;--ui-color-badge-foreground:#404040;--ui-color-destructive:#ef4444;--ui-color-destructive-foreground:#fff;--ui-color-muted:#f5f5f5;--ui-color-muted-foreground:#737373;--ui-color-accent:#f5f5f5;--ui-color-accent-foreground:#171717;--ui-font-roboto:"Roboto",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--ui-font-inter:"Inter","Roboto",ui-sans-serif,system-ui,sans-serif;--ui-radius-full:9999px;--ui-spacing-0:0;--ui-spacing-1:.25rem;--ui-spacing-2:.5rem;--ui-spacing-3:.75rem;--ui-spacing-4:1rem;--ui-spacing-6:1.5rem;--ui-spacing-8:2rem;--ui-spacing-10:2.5rem;--ui-spacing-12:3rem;--ui-spacing-16:4rem;--ui-spacing-24:6rem;--ui-spacing-32:8rem;--ui-spacing-px:1px;--ui-spacing-0\.5:.125rem;--ui-spacing-2\.5:.625rem}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--ui-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--ui-default-font-feature-settings,normal);font-variation-settings:var(--ui-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--ui-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--ui-default-mono-font-feature-settings,normal);font-variation-settings:var(--ui-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab,currentColor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}}@layer components{.ui-skeleton-shimmer:before{content:"";background:linear-gradient(90deg,transparent,var(--ui-color-white-80),transparent);animation:2s infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}}@layer utilities{.ui\:absolute{position:absolute}.ui\:relative{position:relative}.ui\:inset-0{inset:var(--ui-spacing-0)}.ui\:top-0{top:var(--ui-spacing-0)}.ui\:top-1\/2{top:50%}.ui\:top-4{top:var(--ui-spacing-4)}.ui\:right-0{right:var(--ui-spacing-0)}.ui\:right-2{right:var(--ui-spacing-2)}.ui\:right-4{right:var(--ui-spacing-4)}.ui\:bottom-0{bottom:var(--ui-spacing-0)}.ui\:bottom-2{bottom:var(--ui-spacing-2)}.ui\:bottom-4{bottom:var(--ui-spacing-4)}.ui\:left-0{left:var(--ui-spacing-0)}.ui\:left-1\/2{left:50%}.ui\:left-2{left:var(--ui-spacing-2)}.ui\:left-4{left:var(--ui-spacing-4)}.ui\:z-0{z-index:0}.ui\:z-1{z-index:1}.ui\:z-10{z-index:10}.ui\:mt-2{margin-top:var(--ui-spacing-2)}.ui\:mt-4{margin-top:var(--ui-spacing-4)}.ui\:-mb-px{margin-bottom:-1px;margin-bottom:calc(var(--ui-spacing-px)*-1)}.ui\:ml-1{margin-left:var(--ui-spacing-1)}.ui\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:block{display:block}.ui\:flex{display:flex}.ui\:inline-flex{display:inline-flex}.ui\:aspect-\[2\/3\]{aspect-ratio:2/3}.ui\:aspect-\[21\/9\]{aspect-ratio:21/9}.ui\:aspect-video{aspect-ratio:var(--ui-aspect-video)}.ui\:size-12{width:var(--ui-spacing-12);height:var(--ui-spacing-12)}.ui\:h-2{height:var(--ui-spacing-2)}.ui\:h-6{height:var(--ui-spacing-6)}.ui\:h-8{height:var(--ui-spacing-8)}.ui\:h-10{height:var(--ui-spacing-10)}.ui\:h-12{height:var(--ui-spacing-12)}.ui\:h-16{height:var(--ui-spacing-16)}.ui\:h-24{height:var(--ui-spacing-24)}.ui\:h-32{height:var(--ui-spacing-32)}.ui\:h-auto{height:auto}.ui\:h-auto\!{height:auto!important}.ui\:h-full{height:100%}.ui\:max-h-none{max-height:none}.ui\:w-2{width:var(--ui-spacing-2)}.ui\:w-6{width:var(--ui-spacing-6)}.ui\:w-8{width:var(--ui-spacing-8)}.ui\:w-10{width:var(--ui-spacing-10)}.ui\:w-12{width:var(--ui-spacing-12)}.ui\:w-16{width:var(--ui-spacing-16)}.ui\:w-24{width:var(--ui-spacing-24)}.ui\:w-32{width:var(--ui-spacing-32)}.ui\:w-fit{width:fit-content}.ui\:w-full{width:100%}.ui\:max-w-4xl{max-width:var(--ui-container-4xl)}.ui\:max-w-none{max-width:none}.ui\:flex-1{flex:1}.ui\:flex-shrink-0{flex-shrink:0}.ui\:-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:translate-x-1\/2{--tw-translate-x:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.ui\:-rotate-90{rotate:-90deg}.ui\:animate-spin{animation:var(--ui-animate-spin)}.ui\:cursor-not-allowed{cursor:not-allowed}.ui\:cursor-pointer{cursor:pointer}.ui\:snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.ui\:snap-mandatory{--tw-scroll-snap-strictness:mandatory}.ui\:snap-center{scroll-snap-align:center}.ui\:flex-col{flex-direction:column}.ui\:flex-row{flex-direction:row}.ui\:flex-row-reverse{flex-direction:row-reverse}.ui\:items-center{align-items:center}.ui\:items-end{align-items:flex-end}.ui\:justify-center{justify-content:center}.ui\:justify-end{justify-content:flex-end}.ui\:gap-0\.5{gap:var(--ui-spacing-0\.5)}.ui\:gap-1{gap:var(--ui-spacing-1)}.ui\:gap-2{gap:var(--ui-spacing-2)}.ui\:gap-3{gap:var(--ui-spacing-3)}.ui\:gap-4{gap:var(--ui-spacing-4)}.ui\:overflow-hidden{overflow:hidden}.ui\:overflow-x-auto{overflow-x:auto}.ui\:scroll-smooth{scroll-behavior:smooth}.ui\:rounded{border-radius:.25rem}.ui\:rounded-full{border-radius:3.40282e38px;border-radius:var(--ui-radius-full)}.ui\:rounded-lg{border-radius:var(--ui-radius-lg)}.ui\:rounded-md{border-radius:var(--ui-radius-md)}.ui\:border{border-style:var(--tw-border-style);border-width:1px}.ui\:border-0{border-style:var(--tw-border-style);border-width:0}.ui\:border-4{border-style:var(--tw-border-style);border-width:4px}.ui\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.ui\:border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.ui\:border-border{border-color:var(--ui-color-border)}.ui\:border-input{border-color:var(--ui-color-input)}.ui\:border-primary{border-color:var(--ui-color-primary)}.ui\:border-red-200{border-color:var(--ui-color-red-200)}.ui\:border-transparent{border-color:#0000}.ui\:border-white\/20{border-color:color-mix(in oklab,var(--ui-color-white)20%,transparent)}.ui\:border-t-white{border-top-color:var(--ui-color-white)}.ui\:bg-background{background-color:var(--ui-color-background)}.ui\:bg-black\/30{background-color:color-mix(in oklab,var(--ui-color-black)30%,transparent)}.ui\:bg-black\/50{background-color:color-mix(in oklab,var(--ui-color-black)50%,transparent)}.ui\:bg-black\/80{background-color:color-mix(in oklab,var(--ui-color-black)80%,transparent)}.ui\:bg-card{background-color:var(--ui-color-card)}.ui\:bg-destructive{background-color:var(--ui-color-destructive)}.ui\:bg-gray-200{background-color:var(--ui-color-gray-200)}.ui\:bg-gray-400{background-color:var(--ui-color-gray-400)}.ui\:bg-muted{background-color:var(--ui-color-muted)}.ui\:bg-primary{background-color:var(--ui-color-primary)}.ui\:bg-red-50{background-color:var(--ui-color-red-50)}.ui\:bg-secondary{background-color:var(--ui-color-secondary)}.ui\:bg-transparent{background-color:#0000}.ui\:bg-white{background-color:var(--ui-color-white)}.ui\:bg-white\/20{background-color:color-mix(in oklab,var(--ui-color-white)20%,transparent)}.ui\:bg-white\/50{background-color:color-mix(in oklab,var(--ui-color-white)50%,transparent)}.ui\:bg-white\/80{background-color:color-mix(in oklab,var(--ui-color-white)80%,transparent)}.ui\:bg-white\/90{background-color:color-mix(in oklab,var(--ui-color-white)90%,transparent)}.ui\:bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:from-black\/80{--tw-gradient-from:color-mix(in oklab,var(--ui-color-black)80%,transparent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.ui\:via-black\/40{--tw-gradient-via:color-mix(in oklab,var(--ui-color-black)40%,transparent);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.ui\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.ui\:object-cover{object-fit:cover}.ui\:object-center{object-position:center}.ui\:p-0{padding:var(--ui-spacing-0)}.ui\:p-1{padding:var(--ui-spacing-1)}.ui\:p-4{padding:var(--ui-spacing-4)}.ui\:p-6{padding:var(--ui-spacing-6)}.ui\:p-8{padding:var(--ui-spacing-8)}.ui\:px-1{padding-inline:var(--ui-spacing-1)}.ui\:px-2{padding-inline:var(--ui-spacing-2)}.ui\:px-2\.5{padding-inline:var(--ui-spacing-2\.5)}.ui\:px-3{padding-inline:var(--ui-spacing-3)}.ui\:px-4{padding-inline:var(--ui-spacing-4)}.ui\:px-6{padding-inline:var(--ui-spacing-6)}.ui\:py-0\.5{padding-block:var(--ui-spacing-0\.5)}.ui\:py-1{padding-block:var(--ui-spacing-1)}.ui\:py-2{padding-block:var(--ui-spacing-2)}.ui\:pl-4{padding-left:var(--ui-spacing-4)}.ui\:text-center{text-align:center}.ui\:font-inter{font-family:var(--ui-font-inter)}.ui\:font-roboto{font-family:var(--ui-font-roboto)}.ui\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:text-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:text-lg{font-size:var(--ui-text-lg);line-height:var(--tw-leading,var(--ui-text-lg--line-height))}.ui\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.ui\:text-xs{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:leading-normal{--tw-leading:var(--ui-leading-normal);line-height:var(--ui-leading-normal)}.ui\:leading-relaxed{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:leading-snug{--tw-leading:var(--ui-leading-snug);line-height:var(--ui-leading-snug)}.ui\:leading-tight{--tw-leading:var(--ui-leading-tight);line-height:var(--ui-leading-tight)}.ui\:font-bold{--tw-font-weight:var(--ui-font-weight-bold);font-weight:var(--ui-font-weight-bold)}.ui\:font-medium{--tw-font-weight:var(--ui-font-weight-medium);font-weight:var(--ui-font-weight-medium)}.ui\:font-semibold{--tw-font-weight:var(--ui-font-weight-semibold);font-weight:var(--ui-font-weight-semibold)}.ui\:text-amber-600{color:var(--ui-color-amber-600)}.ui\:text-card-foreground{color:var(--ui-color-card-foreground)}.ui\:text-destructive-foreground{color:var(--ui-color-destructive-foreground)}.ui\:text-foreground{color:var(--ui-color-foreground)}.ui\:text-gray-200{color:var(--ui-color-gray-200)}.ui\:text-gray-300{color:var(--ui-color-gray-300)}.ui\:text-green-600{color:var(--ui-color-green-600)}.ui\:text-inherit{color:inherit}.ui\:text-muted-foreground{color:var(--ui-color-muted-foreground)}.ui\:text-muted-foreground\/50{color:color-mix(in oklab,var(--ui-color-muted-foreground)50%,transparent)}.ui\:text-primary{color:var(--ui-color-primary)}.ui\:text-primary-foreground{color:var(--ui-color-primary-foreground)}.ui\:text-red-500{color:var(--ui-color-red-500)}.ui\:text-red-700{color:var(--ui-color-red-700)}.ui\:text-red-900{color:var(--ui-color-red-900)}.ui\:text-secondary-foreground{color:var(--ui-color-secondary-foreground)}.ui\:text-white{color:var(--ui-color-white)}.ui\:text-white\/90{color:color-mix(in oklab,var(--ui-color-white)90%,transparent)}.ui\:text-yellow-400{color:var(--ui-color-yellow-400)}.ui\:uppercase{text-transform:uppercase}.ui\:italic{font-style:italic}.ui\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.ui\:no-underline{text-decoration-line:none}.ui\:opacity-0{opacity:0}.ui\:opacity-100{opacity:1}.ui\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:shadow-sm{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a))drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a,0 1px 1px #0000000f);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.ui\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:duration-200{--tw-duration:.2s;transition-duration:.2s}.ui\:duration-300{--tw-duration:.3s;transition-duration:.3s}.ui\:duration-500{--tw-duration:.5s;transition-duration:.5s}.ui\:backdrop\:bg-black\/80::backdrop{background-color:color-mix(in oklab,var(--ui-color-black)80%,transparent)}@media (hover:hover){.ui\:hover\:bg-accent:hover{background-color:var(--ui-color-accent)}.ui\:hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--ui-color-destructive)90%,transparent)}.ui\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--ui-color-primary)90%,transparent)}.ui\:hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--ui-color-secondary)80%,transparent)}.ui\:hover\:bg-white\/55:hover{background-color:color-mix(in oklab,var(--ui-color-white)55%,transparent)}.ui\:hover\:text-accent-foreground:hover{color:var(--ui-color-accent-foreground)}}.ui\:focus\:border-none:focus{--tw-border-style:none;border-style:none}.ui\:focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentColor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:focus\:ring-ring:focus{--tw-ring-color:var(--ui-color-ring)}.ui\:focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.ui\:focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.ui\:disabled\:pointer-events-none:disabled{pointer-events:none}.ui\:disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.ui\:sm\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:sm\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:sm\:text-lg{font-size:var(--ui-text-lg);line-height:var(--tw-leading,var(--ui-text-lg--line-height))}.ui\:sm\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:sm\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}}@media (min-width:48rem){.ui\:md\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:md\:text-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:md\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:md\:text-lg{font-size:var(--ui-text-lg);line-height:var(--tw-leading,var(--ui-text-lg--line-height))}.ui\:md\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}}@media (min-width:64rem){.ui\:lg\:max-h-\[440px\]{max-height:440px}.ui\:lg\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:lg\:text-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:lg\:text-4xl{font-size:var(--ui-text-4xl);line-height:var(--tw-leading,var(--ui-text-4xl--line-height))}.ui\:lg\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}}.media-section:nth-of-type(odd) .ui\:\[\.media-section\:nth-of-type\(odd\)_\&\]\:bg-white{background-color:var(--ui-color-white)}.media-section:nth-of-type(odd) .ui\:\[\.media-section\:nth-of-type\(odd\)_\&\]\:text-badge-foreground{color:var(--ui-color-badge-foreground)}.text-shadow-strong{text-shadow:0 0 10px #000000bf}.text-shadow-medium{text-shadow:0 0 5px #00000080}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-scroll-snap-strictness{syntax:"*";inherits:false;initial-value:proximity}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
2
+ @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){@layer base{*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-scroll-snap-strictness:proximity;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--ui-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--ui-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ui-color-red-50:oklch(97.1% .013 17.38);--ui-color-red-200:oklch(88.5% .062 18.334);--ui-color-red-500:oklch(63.7% .237 25.331);--ui-color-red-700:oklch(50.5% .213 27.518);--ui-color-red-900:oklch(39.6% .141 25.723);--ui-color-amber-600:oklch(66.6% .179 58.318);--ui-color-yellow-400:oklch(85.2% .199 91.936);--ui-color-green-600:oklch(62.7% .194 149.214);--ui-color-gray-200:oklch(92.8% .006 264.531);--ui-color-gray-300:oklch(87.2% .01 258.338);--ui-color-gray-400:oklch(70.7% .022 261.325);--ui-color-black:#000;--ui-color-white:#fff;--ui-container-4xl:56rem;--ui-text-xs:.75rem;--ui-text-xs--line-height:calc(1/.75);--ui-text-sm:.875rem;--ui-text-sm--line-height:calc(1.25/.875);--ui-text-base:1rem;--ui-text-base--line-height:calc(1.5/1);--ui-text-lg:1.125rem;--ui-text-lg--line-height:calc(1.75/1.125);--ui-text-xl:1.25rem;--ui-text-xl--line-height:calc(1.75/1.25);--ui-text-2xl:1.5rem;--ui-text-2xl--line-height:calc(2/1.5);--ui-text-3xl:1.875rem;--ui-text-3xl--line-height:calc(2.25/1.875);--ui-text-4xl:2.25rem;--ui-text-4xl--line-height:calc(2.5/2.25);--ui-font-weight-medium:500;--ui-font-weight-semibold:600;--ui-font-weight-bold:700;--ui-leading-tight:1.25;--ui-leading-snug:1.375;--ui-leading-normal:1.5;--ui-leading-relaxed:1.625;--ui-radius-md:.5rem;--ui-radius-lg:.75rem;--ui-animate-spin:spin 1s linear infinite;--ui-aspect-video:16/9;--ui-default-transition-duration:.15s;--ui-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--ui-default-font-family:var(--ui-font-sans);--ui-default-mono-font-family:var(--ui-font-mono);--ui-color-white-80:#fffc;--ui-color-background:#fff;--ui-color-foreground:#171717;--ui-color-primary:#f59e0b;--ui-color-primary-foreground:#171717;--ui-color-secondary:#f5f5f5;--ui-color-secondary-foreground:#171717;--ui-color-card:#fff;--ui-color-card-foreground:#171717;--ui-color-border:#e5e5e5;--ui-color-input:#d4d4d4;--ui-color-ring:#a3a3a3;--ui-color-badge-foreground:#404040;--ui-color-destructive:#ef4444;--ui-color-destructive-foreground:#fff;--ui-color-muted:#f5f5f5;--ui-color-muted-foreground:#737373;--ui-color-accent:#f5f5f5;--ui-color-accent-foreground:#171717;--ui-font-roboto:"Roboto",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--ui-font-inter:"Inter","Roboto",ui-sans-serif,system-ui,sans-serif;--ui-radius-full:9999px;--ui-spacing-0:0;--ui-spacing-1:.25rem;--ui-spacing-2:.5rem;--ui-spacing-3:.75rem;--ui-spacing-4:1rem;--ui-spacing-6:1.5rem;--ui-spacing-8:2rem;--ui-spacing-10:2.5rem;--ui-spacing-12:3rem;--ui-spacing-16:4rem;--ui-spacing-24:6rem;--ui-spacing-32:8rem;--ui-spacing-px:1px;--ui-spacing-0\.5:.125rem;--ui-spacing-2\.5:.625rem}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--ui-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--ui-default-font-feature-settings,normal);font-variation-settings:var(--ui-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--ui-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--ui-default-mono-font-feature-settings,normal);font-variation-settings:var(--ui-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab,currentColor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}}@layer components{.ui-skeleton-shimmer:before{content:"";background:linear-gradient(90deg,transparent,var(--ui-color-white-80),transparent);animation:2s infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}}@layer utilities{.ui\:absolute{position:absolute}.ui\:relative{position:relative}.ui\:inset-0{inset:var(--ui-spacing-0)}.ui\:top-0{top:var(--ui-spacing-0)}.ui\:top-1\/2{top:50%}.ui\:top-4{top:var(--ui-spacing-4)}.ui\:right-0{right:var(--ui-spacing-0)}.ui\:right-2{right:var(--ui-spacing-2)}.ui\:right-4{right:var(--ui-spacing-4)}.ui\:bottom-0{bottom:var(--ui-spacing-0)}.ui\:bottom-2{bottom:var(--ui-spacing-2)}.ui\:bottom-4{bottom:var(--ui-spacing-4)}.ui\:left-0{left:var(--ui-spacing-0)}.ui\:left-1\/2{left:50%}.ui\:left-2{left:var(--ui-spacing-2)}.ui\:left-4{left:var(--ui-spacing-4)}.ui\:z-0{z-index:0}.ui\:z-1{z-index:1}.ui\:z-10{z-index:10}.ui\:mt-2{margin-top:var(--ui-spacing-2)}.ui\:mt-4{margin-top:var(--ui-spacing-4)}.ui\:-mb-px{margin-bottom:-1px;margin-bottom:calc(var(--ui-spacing-px)*-1)}.ui\:ml-1{margin-left:var(--ui-spacing-1)}.ui\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:block{display:block}.ui\:flex{display:flex}.ui\:inline-flex{display:inline-flex}.ui\:aspect-\[2\/3\]{aspect-ratio:2/3}.ui\:aspect-\[21\/9\]{aspect-ratio:21/9}.ui\:aspect-video{aspect-ratio:var(--ui-aspect-video)}.ui\:size-12{width:var(--ui-spacing-12);height:var(--ui-spacing-12)}.ui\:h-2{height:var(--ui-spacing-2)}.ui\:h-6{height:var(--ui-spacing-6)}.ui\:h-8{height:var(--ui-spacing-8)}.ui\:h-10{height:var(--ui-spacing-10)}.ui\:h-12{height:var(--ui-spacing-12)}.ui\:h-16{height:var(--ui-spacing-16)}.ui\:h-24{height:var(--ui-spacing-24)}.ui\:h-32{height:var(--ui-spacing-32)}.ui\:h-auto{height:auto}.ui\:h-full{height:100%}.ui\:max-h-none{max-height:none}.ui\:w-2{width:var(--ui-spacing-2)}.ui\:w-6{width:var(--ui-spacing-6)}.ui\:w-8{width:var(--ui-spacing-8)}.ui\:w-10{width:var(--ui-spacing-10)}.ui\:w-12{width:var(--ui-spacing-12)}.ui\:w-16{width:var(--ui-spacing-16)}.ui\:w-24{width:var(--ui-spacing-24)}.ui\:w-32{width:var(--ui-spacing-32)}.ui\:w-fit{width:fit-content}.ui\:w-full{width:100%}.ui\:max-w-4xl{max-width:var(--ui-container-4xl)}.ui\:max-w-none{max-width:none}.ui\:flex-1{flex:1}.ui\:flex-shrink-0{flex-shrink:0}.ui\:-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:translate-x-1\/2{--tw-translate-x:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.ui\:-rotate-90{rotate:-90deg}.ui\:animate-spin{animation:var(--ui-animate-spin)}.ui\:cursor-not-allowed{cursor:not-allowed}.ui\:cursor-pointer{cursor:pointer}.ui\:snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.ui\:snap-mandatory{--tw-scroll-snap-strictness:mandatory}.ui\:snap-center{scroll-snap-align:center}.ui\:flex-col{flex-direction:column}.ui\:flex-row{flex-direction:row}.ui\:flex-row-reverse{flex-direction:row-reverse}.ui\:items-center{align-items:center}.ui\:items-end{align-items:flex-end}.ui\:justify-center{justify-content:center}.ui\:justify-end{justify-content:flex-end}.ui\:gap-0\.5{gap:var(--ui-spacing-0\.5)}.ui\:gap-1{gap:var(--ui-spacing-1)}.ui\:gap-2{gap:var(--ui-spacing-2)}.ui\:gap-3{gap:var(--ui-spacing-3)}.ui\:gap-4{gap:var(--ui-spacing-4)}.ui\:overflow-hidden{overflow:hidden}.ui\:overflow-x-auto{overflow-x:auto}.ui\:scroll-smooth{scroll-behavior:smooth}.ui\:rounded{border-radius:.25rem}.ui\:rounded-full{border-radius:3.40282e38px;border-radius:var(--ui-radius-full)}.ui\:rounded-lg{border-radius:var(--ui-radius-lg)}.ui\:rounded-md{border-radius:var(--ui-radius-md)}.ui\:border{border-style:var(--tw-border-style);border-width:1px}.ui\:border-0{border-style:var(--tw-border-style);border-width:0}.ui\:border-4{border-style:var(--tw-border-style);border-width:4px}.ui\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.ui\:border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.ui\:border-border{border-color:var(--ui-color-border)}.ui\:border-input{border-color:var(--ui-color-input)}.ui\:border-primary{border-color:var(--ui-color-primary)}.ui\:border-red-200{border-color:var(--ui-color-red-200)}.ui\:border-transparent{border-color:#0000}.ui\:border-white\/20{border-color:color-mix(in oklab,var(--ui-color-white)20%,transparent)}.ui\:border-t-white{border-top-color:var(--ui-color-white)}.ui\:bg-background{background-color:var(--ui-color-background)}.ui\:bg-black\/30{background-color:color-mix(in oklab,var(--ui-color-black)30%,transparent)}.ui\:bg-black\/50{background-color:color-mix(in oklab,var(--ui-color-black)50%,transparent)}.ui\:bg-black\/80{background-color:color-mix(in oklab,var(--ui-color-black)80%,transparent)}.ui\:bg-card{background-color:var(--ui-color-card)}.ui\:bg-destructive{background-color:var(--ui-color-destructive)}.ui\:bg-gray-200{background-color:var(--ui-color-gray-200)}.ui\:bg-gray-400{background-color:var(--ui-color-gray-400)}.ui\:bg-muted{background-color:var(--ui-color-muted)}.ui\:bg-primary{background-color:var(--ui-color-primary)}.ui\:bg-red-50{background-color:var(--ui-color-red-50)}.ui\:bg-secondary{background-color:var(--ui-color-secondary)}.ui\:bg-transparent{background-color:#0000}.ui\:bg-white{background-color:var(--ui-color-white)}.ui\:bg-white\/20{background-color:color-mix(in oklab,var(--ui-color-white)20%,transparent)}.ui\:bg-white\/50{background-color:color-mix(in oklab,var(--ui-color-white)50%,transparent)}.ui\:bg-white\/80{background-color:color-mix(in oklab,var(--ui-color-white)80%,transparent)}.ui\:bg-white\/90{background-color:color-mix(in oklab,var(--ui-color-white)90%,transparent)}.ui\:bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:from-black\/80{--tw-gradient-from:color-mix(in oklab,var(--ui-color-black)80%,transparent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.ui\:via-black\/40{--tw-gradient-via:color-mix(in oklab,var(--ui-color-black)40%,transparent);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.ui\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.ui\:object-cover{object-fit:cover}.ui\:object-center{object-position:center}.ui\:p-0{padding:var(--ui-spacing-0)}.ui\:p-1{padding:var(--ui-spacing-1)}.ui\:p-4{padding:var(--ui-spacing-4)}.ui\:p-6{padding:var(--ui-spacing-6)}.ui\:p-8{padding:var(--ui-spacing-8)}.ui\:px-1{padding-inline:var(--ui-spacing-1)}.ui\:px-2{padding-inline:var(--ui-spacing-2)}.ui\:px-2\.5{padding-inline:var(--ui-spacing-2\.5)}.ui\:px-3{padding-inline:var(--ui-spacing-3)}.ui\:px-4{padding-inline:var(--ui-spacing-4)}.ui\:px-6{padding-inline:var(--ui-spacing-6)}.ui\:py-0\.5{padding-block:var(--ui-spacing-0\.5)}.ui\:py-1{padding-block:var(--ui-spacing-1)}.ui\:py-2{padding-block:var(--ui-spacing-2)}.ui\:pl-4{padding-left:var(--ui-spacing-4)}.ui\:text-center{text-align:center}.ui\:font-inter{font-family:var(--ui-font-inter)}.ui\:font-roboto{font-family:var(--ui-font-roboto)}.ui\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:text-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:text-lg{font-size:var(--ui-text-lg);line-height:var(--tw-leading,var(--ui-text-lg--line-height))}.ui\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.ui\:text-xs{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:leading-normal{--tw-leading:var(--ui-leading-normal);line-height:var(--ui-leading-normal)}.ui\:leading-relaxed{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:leading-snug{--tw-leading:var(--ui-leading-snug);line-height:var(--ui-leading-snug)}.ui\:leading-tight{--tw-leading:var(--ui-leading-tight);line-height:var(--ui-leading-tight)}.ui\:font-bold{--tw-font-weight:var(--ui-font-weight-bold);font-weight:var(--ui-font-weight-bold)}.ui\:font-medium{--tw-font-weight:var(--ui-font-weight-medium);font-weight:var(--ui-font-weight-medium)}.ui\:font-semibold{--tw-font-weight:var(--ui-font-weight-semibold);font-weight:var(--ui-font-weight-semibold)}.ui\:text-amber-600{color:var(--ui-color-amber-600)}.ui\:text-card-foreground{color:var(--ui-color-card-foreground)}.ui\:text-destructive-foreground{color:var(--ui-color-destructive-foreground)}.ui\:text-foreground{color:var(--ui-color-foreground)}.ui\:text-gray-200{color:var(--ui-color-gray-200)}.ui\:text-gray-300{color:var(--ui-color-gray-300)}.ui\:text-green-600{color:var(--ui-color-green-600)}.ui\:text-inherit{color:inherit}.ui\:text-muted-foreground{color:var(--ui-color-muted-foreground)}.ui\:text-muted-foreground\/50{color:color-mix(in oklab,var(--ui-color-muted-foreground)50%,transparent)}.ui\:text-primary{color:var(--ui-color-primary)}.ui\:text-primary-foreground{color:var(--ui-color-primary-foreground)}.ui\:text-red-500{color:var(--ui-color-red-500)}.ui\:text-red-700{color:var(--ui-color-red-700)}.ui\:text-red-900{color:var(--ui-color-red-900)}.ui\:text-secondary-foreground{color:var(--ui-color-secondary-foreground)}.ui\:text-white{color:var(--ui-color-white)}.ui\:text-white\/90{color:color-mix(in oklab,var(--ui-color-white)90%,transparent)}.ui\:text-yellow-400{color:var(--ui-color-yellow-400)}.ui\:uppercase{text-transform:uppercase}.ui\:italic{font-style:italic}.ui\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.ui\:no-underline{text-decoration-line:none}.ui\:opacity-0{opacity:0}.ui\:opacity-100{opacity:1}.ui\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:shadow-sm{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a))drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a,0 1px 1px #0000000f);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.ui\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:duration-200{--tw-duration:.2s;transition-duration:.2s}.ui\:duration-300{--tw-duration:.3s;transition-duration:.3s}.ui\:duration-500{--tw-duration:.5s;transition-duration:.5s}.ui\:backdrop\:bg-black\/80::backdrop{background-color:color-mix(in oklab,var(--ui-color-black)80%,transparent)}@media (hover:hover){.ui\:hover\:bg-accent:hover{background-color:var(--ui-color-accent)}.ui\:hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--ui-color-destructive)90%,transparent)}.ui\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--ui-color-primary)90%,transparent)}.ui\:hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--ui-color-secondary)80%,transparent)}.ui\:hover\:bg-white\/55:hover{background-color:color-mix(in oklab,var(--ui-color-white)55%,transparent)}.ui\:hover\:text-accent-foreground:hover{color:var(--ui-color-accent-foreground)}}.ui\:focus\:border-none:focus{--tw-border-style:none;border-style:none}.ui\:focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentColor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:focus\:ring-ring:focus{--tw-ring-color:var(--ui-color-ring)}.ui\:focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.ui\:focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.ui\:disabled\:pointer-events-none:disabled{pointer-events:none}.ui\:disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.ui\:sm\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:sm\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:sm\:text-lg{font-size:var(--ui-text-lg);line-height:var(--tw-leading,var(--ui-text-lg--line-height))}.ui\:sm\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:sm\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}}@media (min-width:48rem){.ui\:md\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:md\:text-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:md\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:md\:text-lg{font-size:var(--ui-text-lg);line-height:var(--tw-leading,var(--ui-text-lg--line-height))}.ui\:md\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}}@media (min-width:64rem){.ui\:lg\:max-h-\[440px\]{max-height:440px}.ui\:lg\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:lg\:text-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:lg\:text-4xl{font-size:var(--ui-text-4xl);line-height:var(--tw-leading,var(--ui-text-4xl--line-height))}.ui\:lg\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}}.media-section:nth-of-type(odd) .ui\:\[\.media-section\:nth-of-type\(odd\)_\&\]\:bg-white{background-color:var(--ui-color-white)}.media-section:nth-of-type(odd) .ui\:\[\.media-section\:nth-of-type\(odd\)_\&\]\:text-badge-foreground{color:var(--ui-color-badge-foreground)}.text-shadow-strong{text-shadow:0 0 10px #000000bf}.text-shadow-medium{text-shadow:0 0 5px #00000080}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-scroll-snap-strictness{syntax:"*";inherits:false;initial-value:proximity}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vite-mf-monorepo/ui",
3
- "version": "0.4.21",
3
+ "version": "0.5.0",
4
4
  "description": "Design system components for vite-mf-monorepo",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -79,7 +79,7 @@
79
79
  "dependencies": {
80
80
  "@heroicons/react": "^2.2.0",
81
81
  "clsx": "2.1.1",
82
- "@vite-mf-monorepo/shared": "0.0.5"
82
+ "@vite-mf-monorepo/shared": "0.0.6"
83
83
  },
84
84
  "scripts": {
85
85
  "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
@@ -90,11 +90,11 @@
90
90
  "test:watch": "vitest",
91
91
  "lint": "eslint . --max-warnings 0",
92
92
  "typecheck": "tsc --noEmit",
93
- "local-release:patch": "pnpm build && ./publish-local.sh patch",
94
- "local-release:minor": "pnpm build && ./publish-local.sh minor",
95
- "local-release:major": "pnpm build && ./publish-local.sh major",
96
- "release:patch": "pnpm build && ./publish.sh patch",
97
- "release:minor": "pnpm build && ./publish.sh minor",
98
- "release:major": "pnpm build && ./publish.sh major"
93
+ "local-release:patch": "./publish-local.sh patch",
94
+ "local-release:minor": "./publish-local.sh minor",
95
+ "local-release:major": "./publish-local.sh major",
96
+ "release:patch": "./publish.sh patch",
97
+ "release:minor": "./publish.sh minor",
98
+ "release:major": "./publish.sh major"
99
99
  }
100
100
  }