@flamingo-stack/openframe-frontend-core 0.0.730 → 0.0.731

package/dist/winget-logo-icon-GBS342G4.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkR4QMR6S4cjs = require('./chunk-R4QMR6S4.cjs');
+
+
+exports.WingetLogoIcon = _chunkR4QMR6S4cjs.WingetLogoIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.730",
+  "version": "0.0.731",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/chat/entity-cards/entity-portrait-card.tsx

@@ -108,7 +108,7 @@ export function EntityPortraitCard({
   const edgeColor = useImageEdgeColor(isWide === false ? src : null, 'var(--color-bg-surface)');
 
   return (
-    <Link href={href} target={target} rel={rel} className={cn('block h-full', className)} aria-label={`Open ${title}`}>
+    <Link href={href} target={target} rel={rel} className={cn('block h-full', className)}>
       <Card className={cn(CONTENT_CARD_FRAME_CLASS, 'flex h-full flex-col gap-6 p-6')}>
         {/* Media zone — the real cover always wins: wide → cover-fill;
             non-wide → contained on the edge-color fill (news-card treatment). */}

package/src/components/chat/types/entities/program-types.ts

@@ -18,7 +18,6 @@
  */
 
 import type { ReactNode } from 'react';
-import { toStripProfile, type VideoBiteStripProfile } from '../../../features/video-bites-shared';
 
 // ============================================================================
 // HOST TYPES
@@ -36,35 +35,10 @@ export interface ProgramHost {
   role?: string; // e.g., "Host", "Speaker", "Guest"
 }
 
-/**
- * Client-safe author subset hydrated onto program items from the entity's
- * `author_id → profiles` FK join (podcast episodes / webinars). Deliberately
- * excludes `email` — this shape is serialized into public payloads.
- */
-export interface ProgramAuthorRef {
-  id?: string | null;
-  full_name?: string | null;
-  avatar_url?: string | null;
-  job_title?: string | null;
-}
-
-/**
- * Video-bites overlay profile for a program item: internal author first
- * (`author_id → profiles`), then the provider-synced primary host (Livestorm
- * speakers / Podbean hosts). Host `role` is a raw provider enum (e.g.
- * `team_member`) — never display copy, so it is not used as the subtitle.
- * Routes through `toStripProfile` (the SSoT — null on missing names).
- */
-export function programItemToStripProfile(item: {
-  author?: ProgramAuthorRef | null;
-  hosts?: ProgramHost[] | null;
-}): VideoBiteStripProfile | null {
-  const fromAuthor = toStripProfile(item.author);
-  if (fromAuthor) return fromAuthor;
-  const host = Array.isArray(item.hosts) ? item.hosts[0] : null;
-  if (!host?.name) return null;
-  return toStripProfile({ full_name: host.name, avatar_url: host.avatar_url ?? null });
-}
+// The author ref and its strip-profile adapter live in the server-safe leaf
+// (`features/video-bites-shared`): a server module that imports them from this
+// chat tree makes the whole chat a client reference of its page.
+export { programItemToStripProfile, type ProgramAuthorRef } from '../../../features/video-bites-shared';
 
 // ============================================================================
 // DATABASE ROW TYPES

package/src/components/chat/utils/icon-loading.tsx

@@ -18,9 +18,9 @@
  * `<NamedIcon>`, and never calls these functions itself.
  */
 
-import dynamicIconImports from 'lucide-react/dynamicIconImports';
 import { createElement, lazy, useEffect, useRef, useSyncExternalStore, type ComponentType, type SVGProps } from 'react';
-import { ICON_LOADERS, type LoadedIconProps } from '../../icons-v2-generated/icon-loaders';
+import type { LoadedIconProps } from '../../icons-v2-generated/icon-loaders';
+import { ICON_SET_NAMES, LUCIDE_ICON_NAMES } from '../../icons-v2-generated/icon-names';
 
 /** Every icon loaded here is a component of the generated set's own props (`icons-v2-generated`). */
 export type IconComponent = ComponentType<LoadedIconProps>;
@@ -157,10 +157,53 @@ function loadedOnDemand(key: string, displayName: string, loader: IconLoader): I
   return OnDemandIcon as IconComponent;
 }
 
+// The two loader tables are NOT imported with this module. Bundled, they are the
+// largest script a page would load (each `import()` is written out as the files it
+// needs: about 340 KB for 3,300 icons), and a page whose icons the server drew
+// never reads them. Whether a name exists is answered by `icon-names` (the names
+// alone); a table is fetched the first time an icon is loaded by name.
+type LoaderTable = Readonly<Record<string, IconLoader | undefined>>;
+
+/** What a name draws when its table has lost it (a consumer's lucide older than the list of names): nothing. */
+const NO_ICON: IconModule = { default: () => null };
+
+function fromTable(table: () => Promise<LoaderTable>, name: string): IconLoader {
+  return () => table().then(loaders => loaders[name]?.() ?? NO_ICON);
+}
+
+/**
+ * A loader table, fetched once and shared by every icon that reads it. A fetch
+ * that FAILS is forgotten, so the next icon asks again: kept, one dropped
+ * request would fail every icon of that table until the page is reloaded (an
+ * icon's own retry calls its loader again, which would get the same rejection).
+ * Exported for its test.
+ */
+export function sharedTable(fetchTable: () => Promise<LoaderTable>): () => Promise<LoaderTable> {
+  let table: Promise<LoaderTable> | undefined;
+  return () => {
+    if (!table) {
+      const attempt = fetchTable();
+      table = attempt;
+      attempt.catch(() => {
+        if (table === attempt) table = undefined;
+      });
+    }
+    return table;
+  };
+}
+
+const setLoaders = sharedTable(() =>
+  import('../../icons-v2-generated/icon-loaders').then(module => module.ICON_LOADERS as LoaderTable),
+);
+
+const lucideLoaders = sharedTable(() =>
+  import('lucide-react/dynamicIconImports').then(module => (module.default ?? module) as unknown as LoaderTable),
+);
+
 /** An icon of the generated set by its EXPORT name (`ChartPieIcon`), or `undefined` when the set has none by that name. */
 export function iconFromSet(exportName: string): IconComponent | undefined {
-  if (!Object.prototype.hasOwnProperty.call(ICON_LOADERS, exportName)) return undefined;
-  return loadedOnDemand(`set:${exportName}`, exportName, ICON_LOADERS[exportName]);
+  if (!ICON_SET_NAMES.has(exportName)) return undefined;
+  return loadedOnDemand(`set:${exportName}`, exportName, fromTable(setLoaders, exportName));
 }
 
 /** An icon the generated set is known to hold, by its export name. A name the set lost fails where it is asked for. */
@@ -170,12 +213,10 @@ export function setIcon(exportName: string): IconComponent {
   return icon;
 }
 
-const lucideLoaders = dynamicIconImports as unknown as Readonly<Record<string, IconLoader>>;
-
 /** A lucide icon by its kebab-case name (`message-circle`), or `undefined` when lucide has none by that name. */
 export function lucideIcon(name: string): IconComponent | undefined {
-  if (!Object.prototype.hasOwnProperty.call(lucideLoaders, name)) return undefined;
-  return loadedOnDemand(`lucide:${name}`, `Lucide(${name})`, lucideLoaders[name]);
+  if (!LUCIDE_ICON_NAMES.has(name)) return undefined;
+  return loadedOnDemand(`lucide:${name}`, `Lucide(${name})`, fromTable(lucideLoaders, name));
 }
 
 /**
@@ -275,7 +316,7 @@ export function platformMarkRef(platform: string): IconRef {
   if (platform === EVERY_PLATFORM) return EVERY_PLATFORM_MARK;
   const stem = setStem(platform);
   for (const exportName of [`${stem}MarkIcon`, `${stem}LogoIcon`]) {
-    if (Object.prototype.hasOwnProperty.call(ICON_LOADERS, exportName)) return { set: exportName };
+    if (ICON_SET_NAMES.has(exportName)) return { set: exportName };
   }
   return HOUSE_MARK;
 }

package/src/components/features/video-bites-shared.ts

@@ -76,3 +76,33 @@ export function sortBitesByFeaturedAtDesc(a: VideoTeaser, b: VideoTeaser): numbe
   if (!b.featured_at) return -1;
   return new Date(b.featured_at).getTime() - new Date(a.featured_at).getTime();
 }
+
+/**
+ * Client-safe author subset hydrated onto program items from the entity's
+ * `author_id → profiles` FK join (podcast episodes / webinars). Deliberately
+ * excludes `email` — this shape is serialized into public payloads.
+ */
+export interface ProgramAuthorRef {
+  id?: string | null;
+  full_name?: string | null;
+  avatar_url?: string | null;
+  job_title?: string | null;
+}
+
+/**
+ * Video-bites overlay profile for a program item: internal author first
+ * (`author_id → profiles`), then the provider-synced primary host (Livestorm
+ * speakers / Podbean hosts). Host `role` is a raw provider enum (e.g.
+ * `team_member`) — never display copy, so it is not used as the subtitle.
+ * Routes through `toStripProfile` (the SSoT — null on missing names).
+ */
+export function programItemToStripProfile(item: {
+  author?: ProgramAuthorRef | null;
+  hosts?: ReadonlyArray<{ name?: string | null; avatar_url?: string | null }> | null;
+}): VideoBiteStripProfile | null {
+  const fromAuthor = toStripProfile(item.author);
+  if (fromAuthor) return fromAuthor;
+  const host = item.hosts?.[0] ?? null;
+  if (!host?.name) return null;
+  return toStripProfile({ full_name: host.name, avatar_url: host.avatar_url ?? null });
+}

package/src/components/icons-v2-generated/brand-logos/clickup-icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import { useId, type SVGProps } from "react";
 export interface ClickupIconProps
   extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
   className?: string;
@@ -11,6 +11,8 @@ export function ClickupIcon({
   color = "currentColor",
   ...props
 }: ClickupIconProps) {
+  // Per-instance ids: see scopeIds in scripts/generate-icons.mjs.
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -23,7 +25,7 @@ export function ClickupIcon({
     >
       <defs>
         <linearGradient
-          id="clickup_svg__a"
+          id={`${uid}clickup_svg__a`}
           x1={0}
           x2={54.845}
           y1={15.049}
@@ -35,7 +37,7 @@ export function ClickupIcon({
           <stop offset={1} stopColor="#49CCF9" />
         </linearGradient>
         <linearGradient
-          id="clickup_svg__b"
+          id={`${uid}clickup_svg__b`}
           x1={1.195}
           x2={53.745}
           y1={53.166}
@@ -48,13 +50,13 @@ export function ClickupIcon({
         </linearGradient>
       </defs>
       <path
-        fill="url(#clickup_svg__a)"
+        fill={`url(#${uid}clickup_svg__a)`}
         fillRule="evenodd"
         d="m0 50.6 10.1-7.8c5.4 7 11.1 10.3 17.4 10.3s11.9-3.2 17-10.2l10.3 7.6c-7.4 10-16.6 15.3-27.3 15.3-10.6 0-19.9-5.3-27.5-15.2"
         clipRule="evenodd"
       />
       <path
-        fill="url(#clickup_svg__b)"
+        fill={`url(#${uid}clickup_svg__b)`}
         fillRule="evenodd"
         d="m27.5 16.9-18 15.5-8.3-9.7L27.6 0l26.2 22.7-8.4 9.6z"
         clipRule="evenodd"

package/src/components/icons-v2-generated/brand-logos/clickup-logo-icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import { useId, type SVGProps } from "react";
 export interface ClickupLogoIconProps
   extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
   className?: string;
@@ -11,6 +11,8 @@ export function ClickupLogoIcon({
   color = "currentColor",
   ...props
 }: ClickupLogoIconProps) {
+  // Per-instance ids: see scopeIds in scripts/generate-icons.mjs.
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,20 +24,20 @@ export function ClickupLogoIcon({
       {...props}
     >
       <path
-        fill="url(#clickup-logo_svg__a)"
+        fill={`url(#${uid}clickup-logo_svg__a)`}
         fillRule="evenodd"
         d="m4 17.366 3.069-2.356c1.63 2.132 3.361 3.116 5.29 3.116 1.917 0 3.6-.972 5.156-3.088l3.112 2.3C18.38 20.388 15.59 22 12.358 22 9.137 22 6.318 20.4 4 17.366"
         clipRule="evenodd"
       />
       <path
-        fill="url(#clickup-logo_svg__b)"
+        fill={`url(#${uid}clickup-logo_svg__b)`}
         fillRule="evenodd"
         d="m12.185 7.126-5.46 4.717L4.2 8.908 12.197 2l7.934 6.913-2.536 2.925z"
         clipRule="evenodd"
       />
       <defs>
         <linearGradient
-          id="clickup-logo_svg__a"
+          id={`${uid}clickup-logo_svg__a`}
           x1={4}
           x2={20.627}
           y1={19.764}
@@ -46,7 +48,7 @@ export function ClickupLogoIcon({
           <stop offset={1} stopColor="#49CCF9" />
         </linearGradient>
         <linearGradient
-          id="clickup-logo_svg__b"
+          id={`${uid}clickup-logo_svg__b`}
           x1={4.2}
           x2={20.131}
           y1={8.694}

package/src/components/icons-v2-generated/brand-logos/elestio-logo-grey-icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import { useId, type SVGProps } from "react";
 export interface ElestioLogoGreyIconProps
   extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
   className?: string;
@@ -11,6 +11,8 @@ export function ElestioLogoGreyIcon({
   color = "currentColor",
   ...props
 }: ElestioLogoGreyIconProps) {
+  // Per-instance ids: see scopeIds in scripts/generate-icons.mjs.
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +24,7 @@ export function ElestioLogoGreyIcon({
       {...props}
     >
       <mask
-        id="elestio-logo-grey_svg__a"
+        id={`${uid}elestio-logo-grey_svg__a`}
         width={20}
         height={20}
         x={2}
@@ -37,7 +39,7 @@ export function ElestioLogoGreyIcon({
           d="M14.543 16.983a6.8 6.8 0 0 1-2.818.618c-2.268 0-4.261-1.409-4.948-3.608h14.57c.103-.722.24-1.409.24-2.13 0-5.258-4.26-9.863-9.621-9.863C6.33 2 2 6.57 2 12.138 2 17.6 6.433 22 11.897 22c2.44 0 4.845-.997 6.598-2.577zM11.93 6.433c2.303 0 4.365 1.34 5.12 3.608H6.709c.687-2.2 2.99-3.608 5.223-3.608"
         />
       </mask>
-      <g fill={color} mask="url(#elestio-logo-grey_svg__a)">
+      <g fill={color} mask={`url(#${uid}elestio-logo-grey_svg__a)`}>
         <path d="M18.495 8.736H6.124v6.185h12.37z" />
         <path d="M11.921 6.444c.141 0 .282 0 .388.035L7.37 2.893a8 8 0 0 0-1.481.914c-3.175 2.32-4.657 6.083-4.128 9.74l5.394-3.78C8 7.691 9.558 6.443 11.92 6.443" />
         <path d="M6.461 12.031c0-.793.221-1.547.522-2.264-1.615 1.17-3.712 2.68-5.327 3.85.075.603.226 1.207.413 1.81 1.277 4.001 4.655 6.756 8.522 7.398a459 459 0 0 1-1.99-6.227c-1.314-1.057-2.14-2.718-2.14-4.567" />

package/src/components/icons-v2-generated/brand-logos/elestio-logo-icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import { useId, type SVGProps } from "react";
 export interface ElestioLogoIconProps
   extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
   className?: string;
@@ -11,6 +11,8 @@ export function ElestioLogoIcon({
   color = "currentColor",
   ...props
 }: ElestioLogoIconProps) {
+  // Per-instance ids: see scopeIds in scripts/generate-icons.mjs.
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +24,7 @@ export function ElestioLogoIcon({
       {...props}
     >
       <mask
-        id="elestio-logo_svg__a"
+        id={`${uid}elestio-logo_svg__a`}
         width={20}
         height={20}
         x={2}
@@ -37,32 +39,32 @@ export function ElestioLogoIcon({
           d="M14.543 16.983a6.8 6.8 0 0 1-2.818.618c-2.268 0-4.261-1.409-4.948-3.608h14.57c.103-.722.24-1.409.24-2.13 0-5.258-4.26-9.863-9.621-9.863C6.33 2 2 6.57 2 12.138 2 17.6 6.433 22 11.897 22c2.44 0 4.845-.997 6.598-2.577zM11.93 6.433c2.303 0 4.365 1.34 5.12 3.608H6.709c.687-2.2 2.99-3.608 5.223-3.608"
         />
       </mask>
-      <g mask="url(#elestio-logo_svg__a)">
+      <g mask={`url(#${uid}elestio-logo_svg__a)`}>
         <path fill="#A91A1F" d="M18.495 8.736H6.124v6.185h12.37z" />
         <path
-          fill="url(#elestio-logo_svg__b)"
+          fill={`url(#${uid}elestio-logo_svg__b)`}
           d="M11.921 6.444c.141 0 .282 0 .388.035L7.37 2.893a8 8 0 0 0-1.481.914c-3.175 2.32-4.657 6.083-4.128 9.74l5.394-3.78C8 7.691 9.558 6.443 11.92 6.443"
         />
         <path
-          fill="url(#elestio-logo_svg__c)"
+          fill={`url(#${uid}elestio-logo_svg__c)`}
           d="M6.461 12.031c0-.793.221-1.547.522-2.264-1.615 1.17-3.712 2.68-5.327 3.85.075.603.226 1.207.413 1.81 1.277 4.001 4.655 6.756 8.522 7.398a459 459 0 0 1-1.99-6.227c-1.314-1.057-2.14-2.718-2.14-4.567"
         />
         <path
-          fill="url(#elestio-logo_svg__d)"
+          fill={`url(#${uid}elestio-logo_svg__d)`}
           d="M14.809 16.783a5.7 5.7 0 0 1-2.975.834 5.64 5.64 0 0 1-3.648-1.321l1.877 5.703a9.5 9.5 0 0 0 1.735.139c3.967 0 7.367-2.191 9.102-5.39H14.81z"
         />
         <path
-          fill="url(#elestio-logo_svg__e)"
+          fill={`url(#${uid}elestio-logo_svg__e)`}
           d="m17.116 10.587 1.822-5.67c-.378-.412-.825-.756-1.272-1.1a9.94 9.94 0 0 0-10.275-.893l4.811 3.505c2.406.206 4.364 1.89 4.914 4.158"
         />
         <path
-          fill="url(#elestio-logo_svg__f)"
+          fill={`url(#${uid}elestio-logo_svg__f)`}
           d="m19.393 3.378-2.547 6.233c.144.454.24.945.24 1.436 0 2.153-1.442 4.042-3.605 5.1h8.316c.384-.53.672-1.134.913-1.7 1.586-4.042.144-8.273-3.317-11.069"
         />
       </g>
       <defs>
         <linearGradient
-          id="elestio-logo_svg__b"
+          id={`${uid}elestio-logo_svg__b`}
           x1={6.985}
           x2={6.985}
           y1={13.507}
@@ -73,7 +75,7 @@ export function ElestioLogoIcon({
           <stop offset={1} stopColor="#F5A11A" />
         </linearGradient>
         <linearGradient
-          id="elestio-logo_svg__c"
+          id={`${uid}elestio-logo_svg__c`}
           x1={6.133}
           x2={6.133}
           y1={22.84}
@@ -84,7 +86,7 @@ export function ElestioLogoIcon({
           <stop offset={1} stopColor="#E81C24" />
         </linearGradient>
         <linearGradient
-          id="elestio-logo_svg__d"
+          id={`${uid}elestio-logo_svg__d`}
           x1={14.586}
           x2={14.586}
           y1={22.191}
@@ -95,7 +97,7 @@ export function ElestioLogoIcon({
           <stop offset={1} stopColor="#A567A5" />
         </linearGradient>
         <linearGradient
-          id="elestio-logo_svg__e"
+          id={`${uid}elestio-logo_svg__e`}
           x1={13.174}
           x2={13.174}
           y1={10.598}
@@ -106,7 +108,7 @@ export function ElestioLogoIcon({
           <stop offset={1} stopColor="#FFC605" />
         </linearGradient>
         <linearGradient
-          id="elestio-logo_svg__f"
+          id={`${uid}elestio-logo_svg__f`}
           x1={18.365}
           x2={18.365}
           y1={16.125}

package/src/components/icons-v2-generated/brand-logos/gemini-logo-icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import { useId, type SVGProps } from "react";
 export interface GeminiLogoIconProps
   extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
   className?: string;
@@ -11,6 +11,8 @@ export function GeminiLogoIcon({
   color = "currentColor",
   ...props
 }: GeminiLogoIconProps) {
+  // Per-instance ids: see scopeIds in scripts/generate-icons.mjs.
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +24,7 @@ export function GeminiLogoIcon({
       {...props}
     >
       <mask
-        id="gemini-logo_svg__b"
+        id={`${uid}gemini-logo_svg__b`}
         width={20}
         height={20}
         x={2}
@@ -37,72 +39,72 @@ export function GeminiLogoIcon({
           d="M11.984 2c.209 0 .391.143.443.346q.234.933.614 1.817a12.8 12.8 0 0 0 2.725 4.039 12.8 12.8 0 0 0 4.038 2.724 12 12 0 0 0 1.818.615.457.457 0 0 1 0 .886q-.934.234-1.818.614a12.8 12.8 0 0 0-4.038 2.725 12.83 12.83 0 0 0-3.34 5.856.46.46 0 0 1-.442.345.46.46 0 0 1-.443-.346 12.809 12.809 0 0 0-3.34-5.855 12.8 12.8 0 0 0-5.855-3.34.457.457 0 0 1 0-.885 12.812 12.812 0 0 0 5.855-3.34 12.8 12.8 0 0 0 3.34-5.855.46.46 0 0 1 .443-.346"
         />
         <path
-          fill="url(#gemini-logo_svg__a)"
+          fill={`url(#${uid}gemini-logo_svg__a)`}
           d="M11.984 2c.209 0 .391.143.443.346q.234.933.614 1.817a12.8 12.8 0 0 0 2.725 4.039 12.8 12.8 0 0 0 4.038 2.724 12 12 0 0 0 1.818.615.457.457 0 0 1 0 .886q-.934.234-1.818.614a12.8 12.8 0 0 0-4.038 2.725 12.83 12.83 0 0 0-3.34 5.856.46.46 0 0 1-.442.345.46.46 0 0 1-.443-.346 12.809 12.809 0 0 0-3.34-5.855 12.8 12.8 0 0 0-5.855-3.34.457.457 0 0 1 0-.885 12.812 12.812 0 0 0 5.855-3.34 12.8 12.8 0 0 0 3.34-5.855.46.46 0 0 1 .443-.346"
         />
       </mask>
-      <g mask="url(#gemini-logo_svg__b)">
-        <g filter="url(#gemini-logo_svg__c)">
+      <g mask={`url(#${uid}gemini-logo_svg__b)`}>
+        <g filter={`url(#${uid}gemini-logo_svg__c)`}>
           <path
             fill="#FFE432"
             d="M.197 17.61c2.307.82 4.96-.716 5.923-3.43s-.125-5.58-2.432-6.4c-2.307-.818-4.959.718-5.923 3.432s.125 5.58 2.432 6.398"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__d)">
+        <g filter={`url(#${uid}gemini-logo_svg__d)`}>
           <path
             fill="#FC413D"
             d="M10.441 8.661c3.17 0 5.739-2.626 5.739-5.865s-2.57-5.865-5.739-5.865-5.74 2.626-5.74 5.865 2.57 5.865 5.74 5.865"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__e)">
+        <g filter={`url(#${uid}gemini-logo_svg__e)`}>
           <path
             fill="#00B95C"
             d="M8.21 27.418c3.31-.162 5.821-3.767 5.612-8.054-.21-4.286-3.062-7.63-6.37-7.468S1.63 15.664 1.84 19.95c.21 4.286 3.062 7.63 6.37 7.468"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__f)">
+        <g filter={`url(#${uid}gemini-logo_svg__f)`}>
           <path
             fill="#00B95C"
             d="M8.21 27.418c3.31-.162 5.821-3.767 5.612-8.054-.21-4.286-3.062-7.63-6.37-7.468S1.63 15.664 1.84 19.95c.21 4.286 3.062 7.63 6.37 7.468"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__g)">
+        <g filter={`url(#${uid}gemini-logo_svg__g)`}>
           <path
             fill="#00B95C"
             d="M11.524 24.825c2.774-1.688 3.516-5.531 1.658-8.585-1.857-3.054-5.612-4.161-8.386-2.474-2.774 1.688-3.516 5.532-1.659 8.586 1.859 3.053 5.613 4.16 8.387 2.473"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__h)">
+        <g filter={`url(#${uid}gemini-logo_svg__h)`}>
           <path
             fill="#3186FF"
             d="M22.736 15.229c3.117 0 5.645-2.434 5.645-5.436s-2.528-5.436-5.645-5.436c-3.118 0-5.645 2.434-5.645 5.436s2.527 5.436 5.645 5.436"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__i)">
+        <g filter={`url(#${uid}gemini-logo_svg__i)`}>
           <path
             fill="#FBBC04"
             d="M-2.02 14.598c2.87 2.183 7.064 1.498 9.367-1.53 2.302-3.027 1.842-7.252-1.029-9.434-2.87-2.184-7.064-1.499-9.367 1.53-2.302 3.027-1.841 7.251 1.03 9.434"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__j)">
+        <g filter={`url(#${uid}gemini-logo_svg__j)`}>
           <path
             fill="#3186FF"
             d="M12.69 17.825c3.425 2.355 7.967 1.7 10.143-1.466s1.163-7.64-2.263-9.997c-3.427-2.356-7.969-1.7-10.145 1.466s-1.163 7.64 2.264 9.997"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__k)">
+        <g filter={`url(#${uid}gemini-logo_svg__k)`}>
           <path
             fill="#749BFF"
             d="M18.918 1.281c.872 1.185-.249 3.49-2.502 5.147s-4.787 2.04-5.658.855.248-3.49 2.501-5.147 4.787-2.04 5.659-.855"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__l)">
+        <g filter={`url(#${uid}gemini-logo_svg__l)`}>
           <path
             fill="#FC413D"
             d="M11.762 6.955c3.485-3.233 4.681-7.61 2.672-9.775S7.97-4.122 4.486-.89-.196 6.72 1.814 8.886s6.463 1.302 9.948-1.93"
           />
         </g>
-        <g filter="url(#gemini-logo_svg__m)">
+        <g filter={`url(#${uid}gemini-logo_svg__m)`}>
           <path
             fill="#FFEE48"
             d="M4.618 18.566c2.072 1.482 4.45 1.707 5.312.503s-.118-3.383-2.19-4.865c-2.07-1.483-4.449-1.708-5.31-.504-.863 1.205.117 3.383 2.188 4.866"
@@ -111,7 +113,7 @@ export function GeminiLogoIcon({
       </g>
       <defs>
         <filter
-          id="gemini-logo_svg__c"
+          id={`${uid}gemini-logo_svg__c`}
           width={12.085}
           height={13.298}
           x={-4.1}
@@ -127,7 +129,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__d"
+          id={`${uid}gemini-logo_svg__d`}
           width={26.113}
           height={26.366}
           x={-2.616}
@@ -143,7 +145,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__e"
+          id={`${uid}gemini-logo_svg__e`}
           width={24.448}
           height={27.975}
           x={-4.393}
@@ -159,7 +161,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__f"
+          id={`${uid}gemini-logo_svg__f`}
           width={24.448}
           height={27.975}
           x={-4.393}
@@ -175,7 +177,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__g"
+          id={`${uid}gemini-logo_svg__g`}
           width={24.533}
           height={25.079}
           x={-4.107}
@@ -191,7 +193,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__h"
+          id={`${uid}gemini-logo_svg__h`}
           width={23.113}
           height={22.695}
           x={11.179}
@@ -207,7 +209,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__i"
+          id={`${uid}gemini-logo_svg__i`}
           width={24.042}
           height={24.233}
           x={-9.872}
@@ -223,7 +225,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__j"
+          id={`${uid}gemini-logo_svg__j`}
           width={24.27}
           height={23.859}
           x={4.494}
@@ -239,7 +241,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__k"
+          id={`${uid}gemini-logo_svg__k`}
           width={17.314}
           height={15.942}
           x={6.181}
@@ -255,7 +257,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__l"
+          id={`${uid}gemini-logo_svg__l`}
           width={21.802}
           height={21.325}
           x={-2.777}
@@ -271,7 +273,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <filter
-          id="gemini-logo_svg__m"
+          id={`${uid}gemini-logo_svg__m`}
           width={17.078}
           height={15.869}
           x={-2.359}
@@ -287,7 +289,7 @@ export function GeminiLogoIcon({
           />
         </filter>
         <linearGradient
-          id="gemini-logo_svg__a"
+          id={`${uid}gemini-logo_svg__a`}
           x1={7.676}
           x2={18.047}
           y1={15.36}