@drawnagency/primitives 0.1.71 → 0.1.72

package/src/hooks/useMediaPipeline.ts

@@ -24,6 +24,10 @@ interface UseMediaPipelineInput {
   setLocalChangesExist: React.Dispatch<React.SetStateAction<boolean>>;
   setDirtySectionIds: React.Dispatch<React.SetStateAction<Set<string>>>;
   markSectionDirty: (sectionId: string, content: SectionContent) => void;
+  // Surfaces upload rejections/failures (oversized files, disallowed types,
+  // upload-intent errors, direct-to-bucket PUT failures) to the caller, which
+  // decides how to display them (e.g. the media modal's rejection banner).
+  onUploadError?: (message: string) => void;
 }
 
 export function useMediaPipeline({
@@ -35,11 +39,16 @@ export function useMediaPipeline({
   setLocalChangesExist,
   setDirtySectionIds,
   markSectionDirty,
+  onUploadError,
 }: UseMediaPipelineInput) {
   const [processingItems, setProcessingItems] = useState<QueueItem[]>([]);
   const [pendingMediaItems, setPendingMediaItems] = useState<LibraryMediaItem[]>([]);
   const [pendingLocalUrls, setPendingLocalUrls] = useState<Record<string, string>>({});
   const [pendingDeletions, setPendingDeletions] = useState<string[]>([]);
+  // Direct-to-bucket large-video PUT progress, keyed by content hash (0..1).
+  // Populated by uploadLargeVideo's XHR upload.onprogress, cleared on
+  // completion or failure.
+  const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
   // True when the manifest holds unsaved edits that produce no upload/deletion —
   // e.g. alt text on an already-published image. Without this the save path's
   // hasMediaChanges check (uploads/deletions only) skips the change and the edit
@@ -52,6 +61,45 @@ export function useMediaPipeline({
   const uploadCallbacksRef = useRef<Map<string, (imageId: string) => void>>(new Map());
   const destroyedRef = useRef(false);
 
+  // Shared persistence path for every pending media item — the processing
+  // queue's small-file finalize AND the direct-to-bucket large-video upload
+  // both funnel through this so a Dexie write, the pendingMediaItems/
+  // pendingLocalUrls state, and cleanup-on-failure can't drift between them.
+  const finalizePendingMedia = useCallback(
+    async (
+      item: LibraryMediaItem,
+      localUrls: Record<string, string>,
+      blobsMap: Record<string, Blob>,
+    ): Promise<boolean> => {
+      if (destroyedRef.current) return false;
+      try {
+        // Persist blobs to IndexedDB BEFORE marking the item pending.
+        // Previously this was fire-and-forget: a Save firing before the
+        // write landed — or a failed write (e.g. storage quota) — left the
+        // item promoted into the manifest with no backing file, an orphan
+        // that dropped out on the next render and blocked re-adding it.
+        await addPendingMediaItem(item, localUrls, blobsMap);
+      } catch (err) {
+        console.error(`[useMediaPipeline] Failed to persist media "${item.originalName}":`, err);
+        for (const url of Object.values(localUrls)) URL.revokeObjectURL(url);
+        return false;
+      }
+      if (destroyedRef.current) return false;
+      removePendingMediaDeletion(item.id);
+      setPendingDeletions((prev) => prev.filter((d) => d !== item.id));
+      setPendingMediaItems((prev) => [...prev, item]);
+      const displayKey = item.kind === "video"
+        ? "primary"
+        : Object.keys(localUrls).find((k) => k !== "primary" && k !== "poster") ?? "primary";
+      if (localUrls[displayKey]) {
+        setPendingLocalUrls((prev) => ({ ...prev, [item.id]: localUrls[displayKey] }));
+      }
+      setLocalChangesExist(true);
+      return true;
+    },
+    [setLocalChangesExist],
+  );
+
   // --- Processing queue ---
 
   const mediaConfigKey = siteConfig
@@ -103,31 +151,11 @@ export function useMediaPipeline({
                 size: v.size,
               })),
               alt: "",
+              storage: "github",
             };
 
-            try {
-              // Persist blobs to IndexedDB BEFORE marking the item pending.
-              // Previously this was fire-and-forget: a Save firing before the
-              // write landed — or a failed write (e.g. storage quota) — left the
-              // item promoted into the manifest with no backing file, an orphan
-              // that dropped out on the next render and blocked re-adding it.
-              await addPendingMediaItem(item, localUrls, blobsMap);
-            } catch (err) {
-              console.error(`[useMediaPipeline] Failed to persist media "${item.originalName}":`, err);
-              for (const url of Object.values(localUrls)) URL.revokeObjectURL(url);
-              return;
-            }
-            if (destroyedRef.current) return;
-            removePendingMediaDeletion(item.id);
-            setPendingDeletions((prev) => prev.filter((d) => d !== item.id));
-            setPendingMediaItems((prev) => [...prev, item]);
-            const displayKey = kind === "video"
-              ? "primary"
-              : Object.keys(localUrls).find((k) => k !== "primary" && k !== "poster") ?? "primary";
-            if (localUrls[displayKey]) {
-              setPendingLocalUrls((prev) => ({ ...prev, [item.id]: localUrls[displayKey] }));
-            }
-            setLocalChangesExist(true);
+            const persisted = await finalizePendingMedia(item, localUrls, blobsMap);
+            if (!persisted) return;
 
             const callback = uploadCallbacksRef.current.get(event.item.hash);
             if (callback) {
@@ -179,6 +207,121 @@ export function useMediaPipeline({
 
   // --- Media handlers ---
 
+  // Direct-to-bucket path for videos over the git-path cap (maxFileSize): mint
+  // a signed URL, PUT the original straight to the bucket (with progress),
+  // then persist a pending item whose ONLY Dexie blob is the poster — the
+  // original never rides the base64 /api/save payload.
+  // Every exit path below must (1) never throw out to the caller — so the
+  // handleMediaUpload batch loop always advances to the next file — (2) call
+  // onUploadError exactly once on failure, and (3) leave no leaked
+  // uploadProgress[hash] entry. Each network/decode stage below gets its own
+  // try/catch so it can report a stage-specific, actionable message and
+  // `return` (never rethrow); the outer try/catch is a last-resort net for
+  // anything upstream of those stages (e.g. hashing), and the single outer
+  // `finally` is the one place progress gets cleared, regardless of which
+  // stage — or none — ran.
+  const uploadLargeVideo = useCallback(async (file: File, mediaConfig: SiteConfig["media"]) => {
+    let hash: string | undefined;
+    try {
+      const buffer = await file.arrayBuffer();
+      hash = await hashFileBuffer(buffer);
+
+      const isDeleted = pendingDeletions.includes(hash);
+      const existsInManifest = hash in mediaManifest.images;
+      const existsInPending = pendingMediaItems.some((i) => i.hash === hash);
+      if ((existsInManifest || existsInPending) && !isDeleted) return;
+
+      if (file.size > mediaConfig.maxAssetSize) {
+        onUploadError?.(`${file.name} exceeds the ${Math.round(mediaConfig.maxAssetSize / 1024 / 1024)}MB video limit.`);
+        return;
+      }
+
+      let uploadUrl: string;
+      let publicUrl: string;
+      try {
+        const intentRes = await fetch("/api/media/upload-intent", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ hash, contentType: file.type, size: file.size }),
+        });
+        if (!intentRes.ok) {
+          const body = await intentRes.json().catch(() => ({}) as { message?: string });
+          onUploadError?.(body.message ?? "Video upload is not available on this site.");
+          return;
+        }
+        ({ uploadUrl, publicUrl } = await intentRes.json());
+      } catch (err) {
+        onUploadError?.(`${file.name}: couldn't start the upload — ${(err as Error).message}. Try again.`);
+        return;
+      }
+
+      try {
+        // Direct browser -> bucket PUT with progress (fetch has no upload progress).
+        await new Promise<void>((resolvePut, rejectPut) => {
+          const xhr = new XMLHttpRequest();
+          xhr.open("PUT", uploadUrl);
+          xhr.setRequestHeader("Content-Type", file.type);
+          xhr.upload.onprogress = (e) => {
+            if (e.lengthComputable) setUploadProgress((prev) => ({ ...prev, [hash as string]: e.loaded / e.total }));
+          };
+          xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolvePut() : rejectPut(new Error(`upload ${xhr.status}`)));
+          xhr.onerror = () => rejectPut(new Error("upload failed"));
+          xhr.send(file);
+        });
+      } catch (err) {
+        onUploadError?.(`${file.name}: upload failed — ${(err as Error).message}. Try again.`);
+        return;
+      }
+
+      try {
+        const { posterBlob, width, height, duration } = await generateVideoPoster(file, mediaConfig.quality);
+        const sanitizedName = sanitizeMediaName(file.name);
+        const item: LibraryMediaItem = {
+          id: hash,
+          hash,
+          kind: "video",
+          originalName: sanitizedName,
+          width,
+          height,
+          mimeType: file.type,
+          size: file.size,
+          folder: `${sanitizedName}-${hash}`,
+          variants: [],
+          alt: "",
+          storage: "assets",
+          url: publicUrl,
+          // MediaRecorder-sourced webm/mp4 (screen recordings) commonly report
+          // duration as Infinity or NaN. JSON.stringify(Infinity) -> null,
+          // which ImageManifestSchema's z.number().positive().optional()
+          // rejects on the next save — omit the field entirely instead.
+          ...(Number.isFinite(duration) && duration > 0 ? { duration } : {}),
+        };
+        // Only the poster blob is persisted — the original lives in the bucket, so
+        // save/publish never ships large base64 through the Netlify function.
+        const localUrls = { primary: URL.createObjectURL(file), poster: URL.createObjectURL(posterBlob) };
+        await finalizePendingMedia(item, localUrls, { poster: posterBlob });
+      } catch (err) {
+        // The PUT already succeeded, so the original is sitting in the bucket
+        // with no pending item pointing at it — an orphan. Task 11's GC prunes
+        // unreferenced bucket objects; we don't attempt to delete it here.
+        onUploadError?.(`${file.name}: uploaded but couldn't finish processing — try again.`);
+      }
+    } catch (err) {
+      console.error(`[useMediaPipeline] uploadLargeVideo failed unexpectedly for "${file.name}":`, err);
+      onUploadError?.(`${file.name}: upload failed unexpectedly. Try again.`);
+    } finally {
+      if (hash !== undefined) {
+        const h = hash;
+        setUploadProgress((prev) => {
+          if (!(h in prev)) return prev;
+          const next = { ...prev };
+          delete next[h];
+          return next;
+        });
+      }
+    }
+  }, [mediaManifest, pendingMediaItems, pendingDeletions, onUploadError, finalizePendingMedia]);
+
   const handleMediaUpload = useCallback(async (files: File[]) => {
     if (!siteConfig) return;
     const mediaConfig = siteConfig.media;
@@ -186,7 +329,26 @@ export function useMediaPipeline({
     if (!queue) return;
 
     for (const file of files) {
-      if (file.size > mediaConfig.maxFileSize) continue;
+      if (file.size > mediaConfig.maxFileSize) {
+        if (file.type === "video/mp4" || file.type === "video/webm") {
+          // uploadLargeVideo already guarantees it never throws (see its own
+          // try/catch/finally) and reports failures via onUploadError itself;
+          // this catch is defense-in-depth only, so it must NOT call
+          // onUploadError again — doing so would double-report.
+          try {
+            await uploadLargeVideo(file, mediaConfig);
+          } catch (err) {
+            console.error(`[useMediaPipeline] uploadLargeVideo threw unexpectedly for "${file.name}":`, err);
+          }
+        } else {
+          onUploadError?.(
+            file.type.startsWith("video/")
+              ? `${file.name}: only MP4/WebM videos can be uploaded.`
+              : `${file.name} is larger than the ${Math.round(mediaConfig.maxFileSize / 1024 / 1024)}MB media limit.`,
+          );
+        }
+        continue;
+      }
 
       const buffer = await file.arrayBuffer();
       const hash = await hashFileBuffer(buffer);
@@ -202,7 +364,7 @@ export function useMediaPipeline({
 
       queue.add({ buffer, originalName: file.name, mimeType: file.type, hash, kind });
     }
-  }, [siteConfig, mediaManifest, pendingMediaItems, pendingDeletions]);
+  }, [siteConfig, mediaManifest, pendingMediaItems, pendingDeletions, onUploadError, uploadLargeVideo]);
 
   const handleMediaDelete = useCallback(async (ids: string[]) => {
     const idSet = new Set(ids);
@@ -348,6 +510,7 @@ export function useMediaPipeline({
     setPendingDeletions,
     manifestDirty,
     setManifestDirty,
+    uploadProgress,
     handleMediaUpload,
     handleMediaDelete,
     handleMediaAltChange,

package/src/lib/registry.ts

@@ -3,6 +3,7 @@ import type { ComponentType, ReactNode } from "react";
 import type { Audience } from "../schemas/auth";
 import type { LinkValue } from "../schemas/link";
 import type { SectionContent } from "../schemas/sections";
+import type { VideoSource } from "../components/sections/Video/VideoBlock";
 
 // --- Settings field types ---
 
@@ -55,6 +56,12 @@ export type SettingsFieldDef =
       label: string;
       default: LinkValue;
       target?: "content" | "options";
+    }
+  | {
+      type: "video-source";
+      label: string;
+      default: VideoSource;
+      target?: "content" | "options";
     };
 
 export type SettingsSchema = Record<string, SettingsFieldDef>;

package/src/lib/video-url.ts

@@ -0,0 +1,39 @@
+export type ParsedVideoUrl = { provider: "youtube" | "vimeo"; id: string };
+
+const YT_ID = /^[\w-]{6,20}$/;
+
+export function parseVideoUrl(raw: string): ParsedVideoUrl | null {
+  let url: URL;
+  try {
+    url = new URL(raw.trim());
+  } catch {
+    return null;
+  }
+  if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+  const host = url.hostname.replace(/^www\./, "");
+
+  if (host === "youtube.com" || host === "m.youtube.com" || host === "youtube-nocookie.com") {
+    if (url.pathname === "/watch") {
+      const v = url.searchParams.get("v");
+      return v && YT_ID.test(v) ? { provider: "youtube", id: v } : null;
+    }
+    const m = url.pathname.match(/^\/(?:embed|shorts|live)\/([\w-]{6,20})$/);
+    return m ? { provider: "youtube", id: m[1] } : null;
+  }
+  if (host === "youtu.be") {
+    const m = url.pathname.match(/^\/([\w-]{6,20})$/);
+    return m ? { provider: "youtube", id: m[1] } : null;
+  }
+  if (host === "vimeo.com" || host === "player.vimeo.com") {
+    // Last numeric path segment: /76979871, /video/76979871, /channels/x/76979871
+    const m = url.pathname.match(/\/(\d{6,12})$/);
+    return m ? { provider: "vimeo", id: m[1] } : null;
+  }
+  return null;
+}
+
+export function embedUrl(p: ParsedVideoUrl): string {
+  return p.provider === "youtube"
+    ? `https://www.youtube-nocookie.com/embed/${p.id}`
+    : `https://player.vimeo.com/video/${p.id}`;
+}

package/src/media/videoPoster.ts

@@ -1,7 +1,7 @@
 export function generateVideoPoster(
   blob: Blob,
   quality: number,
-): Promise<{ posterBlob: Blob; width: number; height: number }> {
+): Promise<{ posterBlob: Blob; width: number; height: number; duration: number }> {
   return new Promise((resolve, reject) => {
     const video = document.createElement("video");
     const url = URL.createObjectURL(blob);
@@ -59,7 +59,7 @@ export function generateVideoPoster(
                 reject(new Error("Failed to create poster blob"));
                 return;
               }
-              resolve({ posterBlob, width: w, height: h });
+              resolve({ posterBlob, width: w, height: h, duration: video.duration });
             },
             "image/webp",
             quality / 100,

package/src/schemas/link.ts

@@ -21,12 +21,23 @@ export function isSafeHref(href: string): boolean {
 }
 
 export const LinkValueSchema = z.discriminatedUnion("kind", [
-  z.object({ kind: z.literal("external"), href: z.string().refine(isSafeHref, "Unsafe href scheme"), target: LinkTargetSchema }),
+  z.object({
+    kind: z.literal("external"),
+    href: z
+      .string()
+      .refine(isSafeHref, "Unsafe href scheme")
+      .describe("An absolute http(s)/mailto URL, a relative path, or empty (unset). javascript:, data:, and protocol-relative URLs are rejected."),
+    target: LinkTargetSchema.describe("Where the link opens: '_self' (same tab) or '_blank' (new tab)."),
+  }),
   z.object({
     kind: z.literal("internal"),
-    pageId: z.string(),
-    anchorSectionId: z.string().nullable().optional(),
-    target: LinkTargetSchema,
+    pageId: z.string().describe("Id of the page to link to, within the same site."),
+    anchorSectionId: z
+      .string()
+      .nullable()
+      .optional()
+      .describe("Optional section id on the target page to scroll to; null or omitted links to the page itself."),
+    target: LinkTargetSchema.describe("Where the link opens: '_self' (same tab) or '_blank' (new tab)."),
   }),
 ]);
 

package/src/schemas/media.ts

@@ -20,6 +20,15 @@ export const MediaItemSchema = z.object({
   folder: z.string(),
   variants: z.array(VariantSchema),
   alt: z.string().default(""),
+  // Where the original bytes live. "github" = committed to the repo (images,
+  // small loops); "assets" = large original in the AssetStore bucket. Legacy
+  // manifests have no field — default keeps them on the git path.
+  storage: z.enum(["github", "assets"]).default("github"),
+  // Public CDN URL for assets-backed originals, baked at upload time so
+  // resolution needs no env access in the browser or at SSR.
+  url: z.string().optional(),
+  // Seconds; videos only. Informational (library UI).
+  duration: z.number().positive().optional(),
 });
 
 export type MediaItem = z.infer<typeof MediaItemSchema>;
@@ -34,6 +43,9 @@ export const MediaConfigSchema = z.object({
   sizes: z.array(z.number()).default([640, 1080, 1920]),
   maxFileSize: z.number().default(5242880),
   quality: z.number().min(1).max(100).default(85),
+  // Per-file cap for bucket-backed video uploads (bytes). The git-path cap is
+  // maxFileSize; anything between the two routes to the AssetStore.
+  maxAssetSize: z.number().default(209_715_200),
 });
 
 export type MediaConfig = z.infer<typeof MediaConfigSchema>;

package/src/schemas/shared.ts

@@ -33,12 +33,21 @@ export type TextLine = z.infer<typeof TextLineSchema>;
 
 // --- Media References ---
 const BaseMediaRef = z.object({
-  imageId: z.string().default(""),
-  caption: z.union([z.string(), z.array(z.string())]).optional(),
-  background: z.string().optional(),
-  invertFrom: z.string().optional(),
-  border: z.boolean().optional(),
-  objectFit: z.enum(["cover", "contain"]).optional(),
+  imageId: z.string().default("").describe("Media-library id of the image/video asset."),
+  caption: z
+    .union([z.string(), z.array(z.string())])
+    .optional()
+    .describe("Optional caption: a single string, or multiple lines as an array of strings."),
+  background: z.string().optional().describe("Optional CSS background color/value shown behind a transparent image."),
+  invertFrom: z
+    .string()
+    .optional()
+    .describe("Optional CSS color; the image inverts when the page background matches it (e.g. for dark-mode logo swaps)."),
+  border: z.boolean().optional().describe("When true, draw a border around the media."),
+  objectFit: z
+    .enum(["cover", "contain"])
+    .optional()
+    .describe("How the image fills its box: 'contain' (fit whole image) or 'cover' (fill and crop)."),
 });
 
 const ImageRef = BaseMediaRef.extend({
@@ -47,22 +56,22 @@ const ImageRef = BaseMediaRef.extend({
 
 const VideoRef = BaseMediaRef.extend({
   type: z.literal("video"),
-  poster: z.string().optional(),
-  autoplay: z.boolean().optional(),
-  loop: z.boolean().optional(),
-  muted: z.boolean().optional(),
+  poster: z.string().optional().describe("Optional poster-image URL shown before playback starts."),
+  autoplay: z.boolean().optional().describe("When true, the video starts playing automatically."),
+  loop: z.boolean().optional().describe("When true, the video repeats when it finishes."),
+  muted: z.boolean().optional().describe("When true, the video plays without sound."),
 });
 
 const DoDontImageRef = BaseMediaRef.extend({
   type: z.literal("doDontImage"),
-  doDont: z.enum(["do", "dont"]),
+  doDont: z.enum(["do", "dont"]).describe("Whether this is a 'do' (correct) or 'dont' (incorrect) example."),
 });
 
 const LinkedImageRef = BaseMediaRef.extend({
   type: z.literal("linkedImage"),
-  href: z.string(),
-  target: z.string().optional(),
-  linkText: z.string().optional(),
+  href: z.string().describe("URL the image links to."),
+  target: z.string().optional().describe("Link target, e.g. '_self' or '_blank'."),
+  linkText: z.string().optional().describe("Optional accessible link text/label."),
 });
 
 export const MediaReferenceSchema = z.discriminatedUnion("type", [

package/src/storage/index.ts

@@ -1,2 +1,2 @@
-export type { StorageProvider, FileWrite } from "./types";
+export type { StorageProvider, FileWrite, AssetStore } from "./types";
 export { StorageConflictError } from "./types";

package/src/storage/types.ts

@@ -38,3 +38,26 @@ export type FileWrite = {
   content: string | Uint8Array | null;
   encoding?: "utf-8" | "base64";
 };
+
+/**
+ * Optional large-asset store (Supabase Storage bucket). Holds video originals
+ * too big for the git path; deliberately generic so future large kinds (zips)
+ * can slot in. All paths are SITE-RELATIVE ("media/{hash}/original.mp4") —
+ * implementations prepend the tenant prefix ("sites/{siteId}/") themselves so
+ * a caller can never address another tenant's objects.
+ */
+export interface AssetStore {
+  /** Mint a signed direct-upload URL for the browser (PUT). */
+  createUploadUrl(
+    path: string,
+    opts: { contentType: string },
+  ): Promise<{ uploadUrl: string; path: string; publicUrl: string }>;
+
+  /** Deterministic public CDN URL for an object (no network call). */
+  getPublicUrl(path: string): string;
+
+  delete(paths: string[]): Promise<void>;
+
+  /** Recursive listing under a site-relative prefix. */
+  list(prefix: string): Promise<{ path: string; size: number; updatedAt: string }[]>;
+}

package/dist/chunk-4E66N6UV.js

@@ -1,10 +0,0 @@
-// src/components/shared/PagesContext.tsx
-import { createContext, useContext } from "react";
-var PagesContext = createContext({ pages: [], getPageHeadings: () => [] });
-function usePages() {
-  return useContext(PagesContext);
-}
-
-export {
-  usePages
-};

package/dist/chunk-I5737FJY.js

@@ -1,62 +0,0 @@
-import {
-  cn
-} from "./chunk-7EOSDFS3.js";
-
-// src/components/shared/icons.tsx
-import { GripVertical, Plus, Trash2, X, Settings } from "lucide-react";
-import { GripVertical as GripVertical2, Plus as Plus2, Trash2 as Trash22, X as X2, Settings as Settings2 } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
-function DragHandle({ size = 16 }) {
-  return /* @__PURE__ */ jsx(GripVertical, { size });
-}
-function AddIcon({ size = 14 }) {
-  return /* @__PURE__ */ jsx(Plus, { size });
-}
-function DeleteIcon({ size = 14 }) {
-  return /* @__PURE__ */ jsx(Trash2, { size });
-}
-function SettingsIcon({ size = 14 }) {
-  return /* @__PURE__ */ jsx(Settings, { size });
-}
-
-// src/components/shared/IconButton.tsx
-import { forwardRef } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var sizeClasses = {
-  sm: "h-chrome-sm w-chrome-sm",
-  md: "h-chrome-md w-chrome-md",
-  lg: "h-chrome-lg w-chrome-lg"
-};
-var intentClasses = {
-  default: "text-base-contrast-light hover:text-base-contrast",
-  destructive: "text-destructive hover:text-destructive-hover",
-  primary: "text-primary/60 hover:text-primary"
-};
-var IconButton = forwardRef(
-  function IconButton2({ icon, label, size = "md", intent = "default", className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx2(
-      "button",
-      {
-        ref,
-        type: "button",
-        className: cn(
-          "cursor-pointer flex items-center justify-center rounded transition-colors",
-          sizeClasses[size],
-          intentClasses[intent],
-          className
-        ),
-        "aria-label": label,
-        ...rest,
-        children: icon
-      }
-    );
-  }
-);
-
-export {
-  DragHandle,
-  AddIcon,
-  DeleteIcon,
-  SettingsIcon,
-  IconButton
-};