@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/ImageUpload/ImageUpload.js

@@ -201,15 +201,15 @@ const ImageUpload = React.forwardRef(
           ...props,
           children: [
             (label || maxFiles || minFiles) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 select-none", children: [
-              label && /* @__PURE__ */ jsxs("label", { className: "text-xs font-semibold text-foreground tracking-wide flex items-center gap-1.5", children: [
+              label && /* @__PURE__ */ jsxs("label", { className: "text-body-3 font-semibold text-foreground tracking-wide flex items-center gap-1.5", children: [
                 /* @__PURE__ */ jsx("span", { children: label }),
-                minFiles && minFiles > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted font-normal", children: [
+                minFiles && minFiles > 0 && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted font-normal", children: [
                   "(Min ",
                   minFiles,
                   ")"
                 ] })
               ] }),
-              multiple && /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium text-muted", children: [
+              multiple && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg font-medium text-muted", children: [
                 items.length,
                 maxFiles ? ` / ${maxFiles}` : "",
                 " uploaded"
@@ -284,7 +284,7 @@ const ImageUpload = React.forwardRef(
                     onDragLeave: handleDragLeave,
                     onDrop: handleDrop
                   }
-                ) : /* @__PURE__ */ jsxs("div", { className: "w-full rounded-xl border border-dashed border-grey-300 dark:border-grey-700 bg-grey-50/50 dark:bg-grey-900/30 p-3 text-center text-xs text-muted", children: [
+                ) : /* @__PURE__ */ jsxs("div", { className: "w-full rounded-xl border border-dashed border-grey-300 dark:border-grey-700 bg-grey-50/50 dark:bg-grey-900/30 p-3 text-center text-body-3 text-muted", children: [
                   "Maximum upload limit reached (",
                   maxFiles,
                   "/",
@@ -334,8 +334,8 @@ const ImageUpload = React.forwardRef(
               "p",
               {
                 className: cn(
-                  "text-xs mt-1 flex items-center gap-1.5 leading-normal",
-                  isError ? "text-destructive font-medium" : minFilesWarning ? "text-amber-600 dark:text-amber-400 font-medium" : "text-muted"
+                  "text-body-3 mt-1 flex items-center gap-1.5 leading-normal",
+                  isError ? "text-destructive font-medium" : minFilesWarning ? "text-warning dark:text-warning font-medium" : "text-muted"
                 ),
                 children: [
                   (isError || minFilesWarning) && /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),

package/dist/components/ImageUpload/subcomponents/ImageUploadDropzone.js

@@ -64,38 +64,38 @@ const ImageUploadDropzone = ({
       ),
       children: isUploading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
         /* @__PURE__ */ jsx(Spinner, { size: "md" }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: loadingText })
+        /* @__PURE__ */ jsx("span", { className: "text-body-3 font-medium text-foreground", children: loadingText })
       ] }) : size === "compact" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 text-center pointer-events-none", children: [
-        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(Plus, { className: "size-4 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-grey-50 dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(Plus, { className: "size-4 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-body-3 font-medium text-foreground", children: [
             /* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: hasItems ? "Add more files" : "Click to upload" }),
             " ",
             "or drag & drop"
           ] }),
-          /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted", children: [
             mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `Images & Videos (Max ${maxMb}MB each)` : `PNG, JPG, WEBP (Max ${maxMb}MB each)`,
             maxFiles && ` • Up to ${maxFiles} items`
           ] })
         ] })
       ] }) : aspectRatio === "square" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 text-center pointer-events-none p-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-grey-50 dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-primary underline", children: "Upload" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-primary underline", children: "Upload" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-caption text-muted", children: [
             "Max ",
             maxMb,
             "MB"
           ] })
         ] })
       ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center pointer-events-none", children: [
-        /* @__PURE__ */ jsx("div", { className: "size-10 rounded-xl bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-5 text-primary animate-bounce" }) : mediaType === "video" ? /* @__PURE__ */ jsx(FilmIcon, { className: "size-5 text-primary" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-5 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "size-10 rounded-xl bg-grey-50 dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-5 text-primary animate-bounce" }) : mediaType === "video" ? /* @__PURE__ */ jsx(FilmIcon, { className: "size-5 text-primary" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-5 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-body-3 font-medium text-foreground", children: [
             /* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: "Click to upload" }),
             " or drag and drop"
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
+          /* @__PURE__ */ jsx("span", { className: "text-caption-lg text-muted", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
         ] })
       ] })
     }

package/dist/components/ImageUpload/subcomponents/ImageUploadModal.js

@@ -42,7 +42,7 @@ const ImageUploadModal = ({
         animate: shouldAnimate ? { opacity: 1 } : void 0,
         exit: shouldAnimate ? { opacity: 0 } : void 0,
         transition: getTransition("fast"),
-        className: "fixed inset-0 z-[100] flex flex-col items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-xs",
+        className: "fixed inset-0 z-[100] flex flex-col items-center justify-center p-4 sm:p-6 bg-grey-1000/60 backdrop-blur-xs",
         onClick: onClose,
         children: /* @__PURE__ */ jsxs(
           motion.div,
@@ -51,14 +51,14 @@ const ImageUploadModal = ({
             animate: shouldAnimate ? { scale: 1, opacity: 1 } : void 0,
             exit: shouldAnimate ? { scale: 0.95, opacity: 0 } : void 0,
             transition: getTransition("spring"),
-            className: "relative max-w-2xl max-h-[85vh] w-full bg-white dark:bg-grey-950 border border-grey-200 dark:border-grey-800 rounded-2xl overflow-hidden shadow-2xl flex flex-col",
+            className: "relative max-w-2xl max-h-[85vh] w-full bg-grey-50 dark:bg-grey-950 border border-grey-200 dark:border-grey-800 rounded-2xl overflow-hidden shadow-2xl flex flex-col",
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-grey-200 dark:border-grey-800 bg-grey-50/80 dark:bg-grey-900/80 backdrop-blur-xs select-none", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground tracking-wide truncate max-w-xs sm:max-w-md", children: activeItem.name || `Media Item #${activeIndex + 1}` }),
-                  activeIndex === 0 && /* @__PURE__ */ jsx("span", { className: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/20 text-[10px] font-semibold px-2 py-0.5 rounded-full", children: "Cover" }),
-                  /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-foreground tracking-wide truncate max-w-xs sm:max-w-md", children: activeItem.name || `Media Item #${activeIndex + 1}` }),
+                  activeIndex === 0 && /* @__PURE__ */ jsx("span", { className: "bg-success/10 text-success dark:text-success border border-success/20 text-caption font-semibold px-2 py-0.5 rounded-full", children: "Cover" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted", children: [
                     "(",
                     activeIndex + 1,
                     " of ",
@@ -77,7 +77,7 @@ const ImageUploadModal = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center justify-center p-4 min-h-[260px] max-h-[70vh] bg-grey-100/50 dark:bg-black/50 overflow-hidden", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center justify-center p-4 min-h-[260px] max-h-[70vh] bg-grey-100/50 dark:bg-grey-1000/50 overflow-hidden", children: [
                 isVideoMedia(activeItem) ? /* @__PURE__ */ jsx(
                   "video",
                   {
@@ -104,7 +104,7 @@ const ImageUploadModal = ({
                         e.stopPropagation();
                         onNavigate(activeIndex > 0 ? activeIndex - 1 : items.length - 1);
                       },
-                      className: "absolute left-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-white/90 hover:bg-white dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
+                      className: "absolute left-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-grey-50/90 hover:bg-grey-50 dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
                       title: "Previous (Left Arrow)",
                       children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
                     }
@@ -117,7 +117,7 @@ const ImageUploadModal = ({
                         e.stopPropagation();
                         onNavigate(activeIndex < items.length - 1 ? activeIndex + 1 : 0);
                       },
-                      className: "absolute right-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-white/90 hover:bg-white dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
+                      className: "absolute right-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-grey-50/90 hover:bg-grey-50 dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
                       title: "Next (Right Arrow)",
                       children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
                     }

package/dist/components/ImageUpload/subcomponents/ImageUploadSinglePreview.js

@@ -58,16 +58,16 @@ const ImageUploadSinglePreview = ({
             )
           }
         ),
-        isVideo && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 z-10 bg-black/65 backdrop-blur-md text-white text-[10px] font-medium px-2 py-0.5 rounded-full border border-white/20 flex items-center gap-1 shadow-sm pointer-events-none", children: [
+        isVideo && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 z-10 bg-grey-1000/65 backdrop-blur-md text-grey-50 text-caption font-medium px-2 py-0.5 rounded-full border border-grey-50/20 flex items-center gap-1 shadow-sm pointer-events-none", children: [
           /* @__PURE__ */ jsx(PlayIcon, { className: "size-2.5" }),
           /* @__PURE__ */ jsx("span", { children: "Video" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 p-1 backdrop-blur-[2px]", children: aspectRatio === "square" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-grey-1000/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 p-1 backdrop-blur-[2px]", children: aspectRatio === "square" ? /* @__PURE__ */ jsxs(Fragment, { children: [
           enablePreviewModal && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "size-8 rounded-lg bg-black/60 hover:bg-black/85 text-white flex items-center justify-center border border-white/20 transition-all cursor-pointer shadow-xs",
+              className: "size-8 rounded-lg bg-grey-1000/60 hover:bg-grey-1000/85 text-grey-50 flex items-center justify-center border border-grey-50/20 transition-all cursor-pointer shadow-xs",
               onClick: onPreview,
               title: "Preview full size",
               children: /* @__PURE__ */ jsx(Eye, { className: "size-3.5" })
@@ -79,7 +79,7 @@ const ImageUploadSinglePreview = ({
               type: "button",
               disabled: disabled || isUploading,
               onClick: onReplace,
-              className: "size-8 rounded-lg bg-primary hover:bg-primary/90 text-white flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
+              className: "size-8 rounded-lg bg-primary hover:bg-primary/90 text-grey-50 flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
               title: "Replace image",
               children: /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-3.5" })
             }
@@ -90,7 +90,7 @@ const ImageUploadSinglePreview = ({
               type: "button",
               disabled: disabled || isUploading,
               onClick: onRemove,
-              className: "size-8 rounded-lg bg-destructive hover:bg-destructive/90 text-white flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
+              className: "size-8 rounded-lg bg-destructive hover:bg-destructive/90 text-grey-50 flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
               title: "Remove image",
               children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
             }
@@ -102,7 +102,7 @@ const ImageUploadSinglePreview = ({
               type: "button",
               variant: "outline",
               size: "sm",
-              className: "border-white/40 bg-black/40 text-white hover:bg-black/60 hover:text-white backdrop-blur-xs",
+              className: "border-grey-50/40 bg-grey-1000/40 text-grey-50 hover:bg-grey-1000/60 hover:text-grey-50 backdrop-blur-xs",
               onClick: onPreview,
               leftIcon: /* @__PURE__ */ jsx(Eye, { className: "size-3.5" }),
               children: "Preview"
@@ -126,7 +126,7 @@ const ImageUploadSinglePreview = ({
               variant: "outline",
               size: "sm",
               disabled: disabled || isUploading,
-              className: "border-destructive/60 bg-destructive/80 text-white hover:bg-destructive hover:text-white",
+              className: "border-destructive/60 bg-destructive/80 text-grey-50 hover:bg-destructive hover:text-grey-50",
               onClick: onRemove,
               leftIcon: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }),
               children: "Remove"

package/dist/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.js

@@ -50,21 +50,21 @@ const ImageUploadThumbnailCard = ({
             className: "w-full h-full object-cover"
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1.5 pointer-events-none", children: index === 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-black/65 backdrop-blur-md text-white text-[10px] font-semibold px-2 py-0.5 rounded-full border border-white/20 shadow-md flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.8)]" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1.5 pointer-events-none", children: index === 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-grey-1000/65 backdrop-blur-md text-grey-50 text-caption font-semibold px-2 py-0.5 rounded-full border border-grey-50/20 shadow-md flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-success shadow-[0_0_6px_rgba(52,211,153,0.8)]" }),
           /* @__PURE__ */ jsx("span", { children: "Cover" })
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-black/55 backdrop-blur-md text-white/90 text-[10px] font-medium px-2 py-0.5 rounded-full border border-white/10 shadow-sm", children: [
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-grey-1000/55 backdrop-blur-md text-grey-50/90 text-caption font-medium px-2 py-0.5 rounded-full border border-grey-50/10 shadow-sm", children: [
           "#",
           index + 1
         ] }) }),
-        isVideo && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 bg-black/65 backdrop-blur-md text-white p-1 rounded-full border border-white/20 shadow-md pointer-events-none", children: /* @__PURE__ */ jsx(PlayIcon, { className: "size-2.5" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/55 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 backdrop-blur-[2px] z-20", children: [
+        isVideo && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 bg-grey-1000/65 backdrop-blur-md text-grey-50 p-1 rounded-full border border-grey-50/20 shadow-md pointer-events-none", children: /* @__PURE__ */ jsx(PlayIcon, { className: "size-2.5" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-grey-1000/55 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 backdrop-blur-[2px] z-20", children: [
           enablePreviewModal && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: onPreview,
-              className: "size-8 rounded-full bg-white/25 hover:bg-white/40 text-white flex items-center justify-center transition-colors shadow-xs cursor-pointer",
+              className: "size-8 rounded-full bg-grey-50/25 hover:bg-grey-50/40 text-grey-50 flex items-center justify-center transition-colors shadow-xs cursor-pointer",
               title: "Preview full size",
               children: /* @__PURE__ */ jsx(Eye, { className: "size-4" })
             }
@@ -75,7 +75,7 @@ const ImageUploadThumbnailCard = ({
               type: "button",
               disabled,
               onClick: onRemove,
-              className: "size-8 rounded-full bg-destructive/90 hover:bg-destructive text-white flex items-center justify-center transition-colors shadow-xs cursor-pointer",
+              className: "size-8 rounded-full bg-destructive/90 hover:bg-destructive text-grey-50 flex items-center justify-center transition-colors shadow-xs cursor-pointer",
               title: "Remove item",
               children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
             }
@@ -125,9 +125,9 @@ const ImageUploadTaskCard = ({
             className: "w-full h-full object-cover blur-xs scale-105 opacity-60"
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/50 flex flex-col items-center justify-center gap-1.5 p-2 text-center", children: [
-          /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "text-white" }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-white line-clamp-1 max-w-full px-1", children: name })
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-grey-1000/50 flex flex-col items-center justify-center gap-1.5 p-2 text-center", children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "text-grey-50" }),
+          /* @__PURE__ */ jsx("span", { className: "text-caption font-medium text-grey-50 line-clamp-1 max-w-full px-1", children: name })
         ] })
       ]
     },

package/dist/components/Inline/Inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,oFA4ClB,CAAC"}
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,oFAoDlB,CAAC"}

package/dist/components/Inline/Inline.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@timmbr/utils';
-import { formatGap } from '../../utils/gap.js';
+import { formatGap, formatAxisGap } from '../../utils/gap.js';
 import { inlineVariants } from './Inline.styles.js';
 
 const Inline = React.forwardRef(
@@ -11,6 +11,8 @@ const Inline = React.forwardRef(
     className,
     style,
     gap = 3,
+    rowGap,
+    colGap,
     align = "center",
     justify = "start",
     wrap = true,
@@ -36,7 +38,13 @@ const Inline = React.forwardRef(
         "data-slot": "inline",
         "data-testid": "timmbr-inline",
         style,
-        className: cn(inlineVariants({ align, justify, wrap }), gapClass, className),
+        className: cn(
+          inlineVariants({ align, justify, wrap }),
+          gapClass,
+          formatAxisGap("y", rowGap),
+          formatAxisGap("x", colGap),
+          className
+        ),
         ...props,
         children: renderChildren()
       }

package/dist/components/Inline/Inline.types.d.ts

@@ -1,10 +1,15 @@
 import type * as React from 'react';
 import type { InlineVariants } from './Inline.styles';
+import type { GapValue } from '../../utils/gap';
 export interface InlineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'gap'>, Omit<InlineVariants, 'gap'> {
     /**
      * Gap between items. Translates standard Tailwind tokens, any number (px), or custom string.
      */
-    gap?: number | string;
+    gap?: GapValue;
+    /** Gap between wrapped lines (overrides `gap` vertically). */
+    rowGap?: GapValue;
+    /** Gap between items on a line (overrides `gap` horizontally). */
+    colGap?: GapValue;
     /**
      * Optional divider element rendered between each inline child.
      */

package/dist/components/Inline/Inline.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC;IAC7B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Inline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC;IAC7B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Input/Input.js

@@ -84,7 +84,7 @@ const Input = React.forwardRef(
             "label",
             {
               htmlFor: id,
-              className: "text-xs font-semibold text-foreground tracking-wide select-none text-left",
+              className: "text-body-3 font-semibold text-foreground tracking-wide select-none text-left",
               children: label
             }
           ),
@@ -113,7 +113,7 @@ const Input = React.forwardRef(
                       htmlFor: id,
                       className: cn(
                         "absolute pointer-events-none transition-all duration-200 select-none truncate max-w-full z-10",
-                        isFloatingActive ? "-top-2.5 left-0 px-1 bg-white dark:bg-grey-900 text-[11px] font-semibold leading-none rounded-xs" : "top-1/2 -translate-y-1/2 left-0 text-sm text-muted-foreground leading-none"
+                        isFloatingActive ? "-top-2.5 left-0 px-1 bg-grey-50 dark:bg-grey-900 text-caption-lg font-semibold leading-none rounded-xs" : "top-1/2 -translate-y-1/2 left-0 text-body-2 text-muted-foreground leading-none"
                       ),
                       style: {
                         color: isFloatingActive ? isError ? "var(--color-destructive)" : "var(--color-primary)" : void 0
@@ -136,7 +136,7 @@ const Input = React.forwardRef(
                       placeholder: floating && !isFloatingActive ? void 0 : placeholder,
                       className: cn(
                         inputFieldVariants(),
-                        "text-sm leading-normal"
+                        "text-body-2 leading-normal"
                       ),
                       "aria-invalid": isError ? "true" : void 0,
                       "aria-describedby": errorMessage || helperText ? `${id}-desc` : void 0,
@@ -175,7 +175,7 @@ const Input = React.forwardRef(
             {
               id: `${id}-desc`,
               className: cn(
-                "text-xs mt-1 flex items-center gap-1.5 text-left",
+                "text-body-3 mt-1 flex items-center gap-1.5 text-left",
                 isError ? "text-destructive font-medium" : "text-muted-foreground"
               ),
               children: [

package/dist/components/Input/Input.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const inputWrapperVariants: (props?: ({
     variant?: "filled" | "outline" | "subtle" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
     isError?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Input/Input.styles.js

@@ -5,15 +5,15 @@ const inputWrapperVariants = cva(
   {
     variants: {
       variant: {
-        outline: "border-grey-300 dark:border-grey-700 bg-white dark:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
-        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus-within:bg-white dark:focus-within:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+        outline: "border-grey-300 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus-within:bg-grey-50 dark:focus-within:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
         subtle: "border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900/50 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
       },
       size: {
-        sm: "h-9 px-2.5 text-xs",
-        default: "h-11 px-3.5 text-sm",
-        md: "h-11 px-3.5 text-sm",
-        lg: "h-[52px] px-4 text-base"
+        sm: "h-9 px-2.5 text-body-3",
+        default: "h-11 px-3.5 text-body-2",
+        md: "h-11 px-3.5 text-body-2",
+        lg: "h-[52px] px-4 text-body-1"
       },
       isError: {
         true: "border-destructive focus-within:border-destructive focus-within:ring-1 focus-within:ring-destructive text-destructive",

package/dist/components/Label/Label.styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const labelVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type LabelVariants = VariantProps<typeof labelVariants>;
 //# sourceMappingURL=Label.styles.d.ts.map

package/dist/components/Label/Label.styles.js

@@ -5,10 +5,10 @@ const labelVariants = cva(
   {
     variants: {
       size: {
-        sm: "text-xs",
-        default: "text-sm",
-        md: "text-sm",
-        lg: "text-base"
+        sm: "text-body-3",
+        default: "text-body-2",
+        md: "text-body-2",
+        lg: "text-body-1"
       }
     },
     defaultVariants: {

package/dist/components/LinkButton/LinkButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,2FAyMtB,CAAC"}
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,2FA2MtB,CAAC"}

package/dist/components/LinkButton/LinkButton.js

@@ -16,6 +16,7 @@ const LinkButton = React.forwardRef(
     style,
     variant,
     size,
+    fullWidth,
     asChild = false,
     motion,
     leftIcon,
@@ -55,6 +56,7 @@ const LinkButton = React.forwardRef(
         variant: resolvedVariant,
         size: resolvedSize,
         disabled: isDisabled,
+        fullWidth,
         className
       }),
       !shouldAnimate && "transition-none active:scale-100",

package/dist/components/LinkButton/LinkButton.styles.d.ts

@@ -1,8 +1,9 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const linkButtonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | "md" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "subtle" | "primary" | "secondary" | "muted" | "back" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | "icon" | null | undefined;
     disabled?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type LinkButtonVariants = VariantProps<typeof linkButtonVariants>;
 //# sourceMappingURL=LinkButton.styles.d.ts.map

package/dist/components/LinkButton/LinkButton.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,kBAAkB;;;;8EAiE9B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"LinkButton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,kBAAkB;;;;;8EAwE9B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/LinkButton/LinkButton.styles.js

@@ -7,24 +7,30 @@ const linkButtonVariants = cva(
       variant: {
         default: "text-primary underline-offset-4 hover:underline font-medium p-0 h-auto active:scale-100",
         link: "text-primary underline-offset-4 hover:underline font-medium p-0 h-auto active:scale-100",
-        primary: "bg-primary text-white hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        primary: "bg-primary text-grey-50 hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
         secondary: "bg-secondary text-secondary-foreground hover:bg-bg-subtle hover:brightness-105 active:bg-secondary-foreground/10 active:brightness-95 shadow-xs hover:shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
         outline: "border border-grey-300 dark:border-grey-700 bg-transparent text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 hover:border-grey-400 dark:hover:border-grey-600 active:scale-[0.98] font-semibold whitespace-nowrap",
         ghost: "text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 active:scale-[0.98] font-semibold whitespace-nowrap",
-        destructive: "bg-destructive text-white hover:bg-red-700 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        destructive: "bg-destructive text-grey-50 hover:bg-destructive/90 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
         muted: "text-grey-600 dark:text-grey-400 hover:text-foreground underline-offset-4 hover:underline font-normal p-0 h-auto active:scale-100",
+        /** "‹ Back" links: muted, no underline, 44px touch target, optically aligned to the edge. */
+        back: "-ms-1 min-h-11 text-muted-foreground hover:text-foreground font-medium p-0 active:scale-100",
         subtle: "text-foreground/80 hover:text-foreground underline-offset-4 hover:underline font-normal p-0 h-auto active:scale-100"
       },
       size: {
-        sm: "text-xs gap-1",
-        default: "text-sm gap-1.5",
-        md: "text-sm gap-1.5",
-        lg: "text-base gap-2",
+        sm: "text-body-3 gap-1",
+        default: "text-body-2 gap-1.5",
+        md: "text-body-2 gap-1.5",
+        lg: "text-body-1 gap-2",
         icon: "p-1 shrink-0"
       },
       disabled: {
         true: "pointer-events-none opacity-50 cursor-not-allowed",
         false: "cursor-pointer"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
       }
     },
     compoundVariants: [

package/dist/components/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AAEtB,eAAO,MAAM,IAAI,oFAShB,CAAC;AAGF,eAAO,MAAM,QAAQ,qFAmBpB,CAAC;AAGF,eAAO,MAAM,YAAY,0FASxB,CAAC;AAGF,eAAO,MAAM,YAAY,0FAiBxB,CAAC;AAGF,eAAO,MAAM,cAAc,4FAS1B,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AAEtB,eAAO,MAAM,IAAI,oFAShB,CAAC;AAGF,eAAO,MAAM,QAAQ,qFAoCpB,CAAC;AAGF,eAAO,MAAM,YAAY,0FASxB,CAAC;AAGF,eAAO,MAAM,YAAY,0FAiBxB,CAAC;AAGF,eAAO,MAAM,cAAc,4FAS1B,CAAC"}

package/dist/components/List/List.js

@@ -1,23 +1,35 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@timmbr/utils';
-import { listVariants, listItemVariants, listItemActionVariants, listItemIconVariants, listItemTextVariants } from './List.styles.js';
+import { listVariants, listDividedClass, listItemVariants, listItemActionVariants, listItemIconVariants, listItemTextVariants } from './List.styles.js';
 
 const List = React.forwardRef(
-  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, variant, divided = false, ...props }, ref) => /* @__PURE__ */ jsx(
     "ul",
     {
       ref,
       "data-slot": "list",
-      className: cn(listVariants({ variant }), className),
+      className: cn(listVariants({ variant }), divided && listDividedClass, className),
       ...props
     }
   )
 );
 List.displayName = "List";
 const ListItem = React.forwardRef(
-  ({ className, density, interactive, clickable, onClick, ...props }, ref) => {
+  ({ className, density, interactive, clickable, onClick, asChild = false, children, ...props }, ref) => {
+    if (asChild) {
+      return /* @__PURE__ */ jsx("li", { ref, "data-slot": "list-item", className: "list-none", children: /* @__PURE__ */ jsx(
+        Slot,
+        {
+          className: cn(listItemVariants({ density, interactive: true }), className),
+          onClick,
+          ...props,
+          children
+        }
+      ) });
+    }
     const isInteractive = interactive || clickable || !!onClick;
     return /* @__PURE__ */ jsx(
       "li",
@@ -31,7 +43,8 @@ const ListItem = React.forwardRef(
           listItemVariants({ density, interactive: isInteractive }),
           className
         ),
-        ...props
+        ...props,
+        children
       }
     );
   }
@@ -59,7 +72,7 @@ const ListItemText = React.forwardRef(
       ...props,
       children: [
         primary && /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground truncate", children: primary }),
-        secondary && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate mt-0.5", children: secondary }),
+        secondary && /* @__PURE__ */ jsx("div", { className: "text-body-3 text-muted-foreground truncate mt-0.5", children: secondary }),
         children
       ]
     }

package/dist/components/List/List.styles.d.ts

@@ -2,8 +2,10 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const listVariants: (props?: ({
     variant?: "default" | "bordered" | "divided" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Lines between items; combines with any `variant` (e.g. bordered + divided). */
+export declare const listDividedClass = "divide-y divide-border";
 export declare const listItemVariants: (props?: ({
-    density?: "default" | "sm" | "lg" | null | undefined;
+    density?: "sm" | "lg" | "default" | null | undefined;
     interactive?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const listItemIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/List/List.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.styles.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;8EAWvB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;8EAmB5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAAwB,CAAC;AAE1D,eAAO,MAAM,sBAAsB,oFAAkD,CAAC;AAEtF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"List.styles.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;8EAWvB,CAAC;AAEH,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,2BAA2B,CAAC;AAEzD,eAAO,MAAM,gBAAgB;;;8EAmB5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAAwB,CAAC;AAE1D,eAAO,MAAM,sBAAsB,oFAAkD,CAAC;AAEtF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}