@noya-app/noya-designsystem 0.1.49 → 0.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,11 +22,12 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.18",
-    "@noya-app/noya-utils": "0.1.4",
-    "@noya-app/noya-geometry": "0.1.9",
-    "@noya-app/noya-icons": "0.1.6",
+    "@noya-app/noya-colorpicker": "0.1.19",
+    "@noya-app/noya-utils": "0.1.5",
+    "@noya-app/noya-geometry": "0.1.10",
+    "@noya-app/noya-icons": "0.1.7",
     "@noya-app/noya-keymap": "0.1.3",
+    "@noya-app/noya-tailwind-config": "0.1.2",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",
@@ -47,17 +48,16 @@
     "kiwi.js": "^1.1.3",
     "react-resizable-panels": "2.0.22",
     "react-window": "^1.8.8",
-    "vscode-fuzzy-scorer": "^0.0.4"
+    "vscode-fuzzy-scorer": "^0.0.4",
+    "react-virtualized": "9.22.6"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@types/react-virtualized": "^9.21.21",
+    "@types/react-virtualized": "^9.21.30",
     "@types/react-window": "^1.8.5",
-    "esbuild-plugin-react-virtualized": "1.0.4",
     "esbuild-plugin-tailwindcss": "^1.2.1",
-    "react-virtualized": "9.22.5",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14"
   },

package/src/components/ActionMenu.tsx

@@ -12,6 +12,7 @@ type ActionMenuProps<TMenu extends string> = {
   onOpenChange: (open: boolean) => void;
   className?: string;
   style?: React.CSSProperties;
+  variant?: "normal" | "bare";
 };
 
 export const ActionMenu = memoGeneric(function ActionMenu<
@@ -23,16 +24,17 @@ export const ActionMenu = memoGeneric(function ActionMenu<
   onOpenChange,
   className,
   style,
+  variant = "normal",
 }: ActionMenuProps<TMenu>) {
   const internalStyle = useMemo(() => {
     return {
       backgroundColor: selected
         ? cssVars.colors.primaryPastel
         : cssVars.colors.inputBackground,
-      padding: "4px",
+      padding: variant === "bare" ? 0 : 4,
       ...style,
     };
-  }, [selected, style]);
+  }, [selected, style, variant]);
 
   return (
     <DropdownMenu

package/src/components/Avatar.tsx

@@ -181,8 +181,8 @@ const OverflowAvatar = React.memo(function OverflowAvatar({
   count: number;
 }) {
   return (
-    <AvatarRoot size={size} backgroundColor="var(--text-disabled)" disabled>
-      <AvatarFallback backgroundColor="var(--text-disabled)" size={size}>
+    <AvatarRoot size={size} backgroundColor="var(--n-text-disabled)" disabled>
+      <AvatarFallback backgroundColor="var(--n-text-disabled)" size={size}>
         +{count}
       </AvatarFallback>
     </AvatarRoot>

package/src/components/Banner.tsx

@@ -0,0 +1,29 @@
+import React, { CSSProperties } from "react";
+import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
+import { Small } from "./Text";
+
+const bannerStyles = {
+  backgroundColor: cssVars.colors.inputBackground,
+  color: cssVars.colors.textDisabled,
+};
+
+export type BannerProps = {
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function Banner({ label = "No items", className, style }: BannerProps) {
+  return (
+    <div
+      className={cx(
+        "flex p-1 items-center justify-center select-none rounded",
+        className
+      )}
+      style={{ ...bannerStyles, ...style }}
+    >
+      <Small color="textDisabled">{label}</Small>
+    </div>
+  );
+}

package/src/components/Button.tsx

@@ -5,8 +5,8 @@ import React, {
   ReactNode,
   useCallback,
 } from "react";
-import { Tooltip } from "./Tooltip";
 import { cx } from "../utils/classNames";
+import { Tooltip } from "./Tooltip";
 
 type ButtonVariant =
   | "normal"
@@ -87,7 +87,7 @@ export const Button = forwardRef(function Button(
       ref={forwardedRef}
       id={id}
       className={cx(
-        "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--popover-background)_inset] transition-all",
+        "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all",
         disabled ? "opacity-25" : "",
         !className?.includes("flex") ? "flex-none" : "",
         active

package/src/components/Chip.tsx

@@ -19,32 +19,32 @@ const SIZE_STYLES = {
 } as const;
 
 const SHADOW_STYLES = {
-  primary: "shadow-[0_0_0_1px_var(--chip-primary-shadow)_inset]",
-  secondary: "shadow-[0_0_0_1px_var(--chip-secondary-shadow)_inset]",
-  error: "shadow-[0_0_0_1px_var(--chip-error-shadow)_inset]",
-  default: "shadow-[0_0_0_1px_var(--chip-default-shadow)_inset]",
+  primary: "shadow-[0_0_0_1px_var(--n-chip-primary-shadow)_inset]",
+  secondary: "shadow-[0_0_0_1px_var(--n-chip-secondary-shadow)_inset]",
+  error: "shadow-[0_0_0_1px_var(--n-chip-error-shadow)_inset]",
+  default: "shadow-[0_0_0_1px_var(--n-chip-default-shadow)_inset]",
 } as const;
 
 const COLOR_STYLES = {
   primary: {
     text: "text-primary",
     bg: "bg-primary-pastel",
-    subtle: "bg-[var(--chip-primary-bg)]",
+    subtle: "bg-[var(--n-chip-primary-bg)]",
   },
   secondary: {
     text: "text-secondary",
     bg: "bg-secondary-pastel",
-    subtle: "bg-[var(--chip-secondary-bg)]",
+    subtle: "bg-[var(--n-chip-secondary-bg)]",
   },
   error: {
     text: "text-text",
     bg: "bg-[rgb(255,219,219)]",
-    subtle: "bg-[var(--chip-error-bg)]",
+    subtle: "bg-[var(--n-chip-error-bg)]",
   },
   default: {
     text: "text-text",
     bg: "bg-input-background",
-    subtle: "bg-[var(--chip-default-bg)]",
+    subtle: "bg-[var(--n-chip-default-bg)]",
   },
 } as const;
 

package/src/components/Collection.tsx

@@ -1,8 +1,12 @@
+import { forwardRefGeneric } from "@noya-app/react-utils";
 import React from "react";
-import { forwardRefGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
-import { Grid, GridViewSize } from "../components/Grid";
+import { Grid } from "../components/Grid";
 import { MenuItem } from "../components/internal/Menu";
-import { ListView, ListViewRootProps } from "../components/ListView";
+import {
+  ListView,
+  ListViewRootProps,
+  ListViewRowProps,
+} from "../components/ListView";
 import { List } from "./List";
 
 export type CollectionViewType = "grid" | "list";
@@ -16,6 +20,7 @@ export type CollectionRef = {
 export type CollectionThumbnailProps<T> = {
   item: T;
   selected: boolean;
+  size?: CollectionItemSize;
 };
 
 export type CollectionRenderActionProps<T> = {
@@ -47,6 +52,7 @@ export interface CollectionProps<T, M extends string = string> {
   renderThumbnail?: ({
     item,
     selected,
+    size,
   }: CollectionThumbnailProps<T>) => React.ReactNode;
   renderAction?:
     | "menu"
@@ -62,7 +68,7 @@ export interface CollectionProps<T, M extends string = string> {
   /** Position of the detail content. Defaults to 'end'. */
   detailPosition?: "end" | "below";
   /** Size of the list items. Defaults to 'medium'. */
-  size?: GridViewSize;
+  size?: CollectionItemSize;
   /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
   thumbnailSize?: CollectionThumbnailSize;
   /** For testing: Override the hover state with a specific item ID */
@@ -86,6 +92,7 @@ export interface CollectionProps<T, M extends string = string> {
   renderEmptyState?: () => React.ReactElement;
   /** @default false */
   sortable?: boolean;
+  dragIndicatorStyle?: ListViewRowProps<M>["dragIndicatorStyle"];
 }
 
 export const Collection = forwardRefGeneric(function Collection<
@@ -100,3 +107,10 @@ export const Collection = forwardRefGeneric(function Collection<
     <List ref={ref} {...rest} />
   );
 });
+export type CollectionItemSize =
+  | "xxs"
+  | "xs"
+  | "small"
+  | "medium"
+  | "large"
+  | "xl";

package/src/components/ComboboxMenu.tsx

@@ -25,6 +25,8 @@ interface ComboboxMenuProps<T extends string> {
   listSize: Size;
   style?: React.CSSProperties;
   indented?: boolean;
+  /** @default right */
+  iconPosition?: "left" | "right";
 }
 
 export const ComboboxMenu = memoGeneric(
@@ -37,6 +39,7 @@ export const ComboboxMenu = memoGeneric(
       listSize,
       style,
       indented,
+      iconPosition = "right",
     }: ComboboxMenuProps<T>,
     forwardedRef: ForwardedRef<IVirtualizedList>
   ) {
@@ -100,6 +103,12 @@ export const ComboboxMenu = memoGeneric(
                     size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET}
                   />
                 ) : null}
+                {iconPosition === "left" && item.icon && (
+                  <>
+                    {renderIcon(item.icon)}
+                    <Spacer.Horizontal size={8} />
+                  </>
+                )}
                 {tokens.map((token, j) => (
                   <span
                     key={`${item.value}-token-${j}`}
@@ -112,7 +121,7 @@ export const ComboboxMenu = memoGeneric(
                   </span>
                 ))}
               </div>
-              {(item.shortcut || item.icon) && (
+              {(item.shortcut || (item.icon && iconPosition === "right")) && (
                 <>
                   {item.shortcut ? (
                     <KeyboardShortcut shortcut={item.shortcut} />

package/src/components/Dialog.tsx

@@ -138,8 +138,8 @@ export const Dialog = forwardRef(function Dialog(
               className="z-[1]"
               style={{
                 position: "absolute",
-                top: "var(--dialog-padding)",
-                right: "var(--dialog-padding)",
+                top: "var(--n-dialog-padding)",
+                right: "var(--n-dialog-padding)",
               }}
             />
           </DialogPrimitive.Close>

package/src/components/FillInputField.tsx

@@ -11,7 +11,7 @@ const FillButton = forwardRef<
   <button
     ref={ref}
     className={cx(
-      `outline-none p-0 w-[50px] h-input-height rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_var(--primary)] `,
+      `outline-none p-0 w-[50px] h-input-height rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--n-divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--n-sidebar-background),0_0_0_3px_var(--n-primary)] `,
       className
     )}
     {...props}

package/src/components/Grid.tsx

@@ -1,23 +1,25 @@
-import { useFileDropTarget } from "@noya-app/react-utils";
-import React, { useImperativeHandle, useRef, useState } from "react";
 import {
   forwardRefGeneric,
   memoGeneric,
-} from "../../../noya-react-utils/src/utils/reactGenerics";
+  useFileDropTarget,
+} from "@noya-app/react-utils";
+import React, { useImperativeHandle, useRef, useState } from "react";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
 import { ActionMenu } from "./ActionMenu";
-import { CollectionProps, CollectionRef } from "./Collection";
+import {
+  CollectionItemSize,
+  CollectionProps,
+  CollectionRef,
+} from "./Collection";
 import { EditableText } from "./EditableText";
 import { GridView } from "./GridView";
 import { ListView } from "./ListView";
 
-export type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
-
-export const getGridSize = (size: GridViewSize) => {
+export const getGridSize = (size: CollectionItemSize) => {
   // Define size ranges that allow items to grow/shrink within bounds
   const sizes: Record<
-    Exclude<GridViewSize, number>,
+    Exclude<CollectionItemSize, number>,
     {
       minColumnWidth: string;
       gap: number;
@@ -173,6 +175,7 @@ export const Grid = memoGeneric(
               const thumbnail = renderThumbnail?.({
                 item,
                 selected: isSelected,
+                size,
               });
               const onOpenChange = (open: boolean) => {
                 setDropdownOpenId(open ? id : undefined);
@@ -216,9 +219,7 @@ export const Grid = memoGeneric(
                       testFocused={isTestingRenaming}
                       readOnly={!itemIsRenamable || !onRename}
                       onSubmit={(value) => {
-                        if (value !== getName(item)) {
-                          onRename?.(item, value);
-                        }
+                        onRename?.(item, value);
                         setRenamingId(undefined);
                       }}
                       onBlur={() => {

package/src/components/Label.tsx

@@ -1,5 +1,5 @@
 import React, { LabelHTMLAttributes, forwardRef, memo } from "react";
-import { cx } from "../utils/classNames";
+import { mergeConflictingClassNames } from "../utils/classNames";
 
 export type LabelPosition = "inset" | "start" | "end" | "above";
 
@@ -17,11 +17,16 @@ export const Label = memo(
     return (
       <label
         ref={ref}
-        className={cx(
-          labelStyles,
-          labelTextStyles,
-          "text-left min-h-input-height",
-          className
+        className={mergeConflictingClassNames(
+          [
+            labelStyles,
+            labelTextStyles,
+            "text-left min-h-input-height",
+            className,
+          ],
+          {
+            categories: ["color", "font"],
+          }
         )}
         {...props}
       >

package/src/components/LabeledField.tsx

@@ -4,6 +4,7 @@ import {
   LabelContext,
   LabelPositionContext,
   LabelPositionContextValue,
+  useLabelPosition,
   useLabelWidth,
 } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
@@ -23,7 +24,7 @@ const labelPositionInset: LabelPositionContextValue = {
 export const LabeledField = memo(function LabeledField({
   children,
   label,
-  labelPosition = "start",
+  labelPosition: labelPositionProp,
   fieldId,
   minWidth = 100,
   className,
@@ -44,6 +45,10 @@ export const LabeledField = memo(function LabeledField({
   const labelWidthFromContext = useLabelWidth();
   const labelWidth = labelWidthFromContext ?? minWidth;
 
+  const labelPositionFromContext = useLabelPosition();
+  const labelPosition =
+    labelPositionProp ?? labelPositionFromContext ?? "start";
+
   const labeledFieldClasses = useMemo(
     () => labeledFieldStyles(labelPosition),
     [labelPosition]

package/src/components/List.tsx

@@ -8,13 +8,16 @@ import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
 import { ActionMenu } from "./ActionMenu";
-import { CollectionProps, CollectionRef } from "./Collection";
-import { GridViewSize } from "./Grid";
+import {
+  CollectionItemSize,
+  CollectionProps,
+  CollectionRef,
+} from "./Collection";
 import { ListView, ListViewItemInfo } from "./ListView";
 import { TreeView } from "./TreeView";
 
 const cssVarOverrides = {
-  "--icon-selected": cssVars.colors.primary,
+  "--n-icon-selected": cssVars.colors.primary,
 };
 
 const emptyArray: string[] = [];
@@ -60,6 +63,7 @@ export const List = memoGeneric(
       getDropTargetParentIndex,
       getPlaceholder,
       onClickItem,
+      dragIndicatorStyle,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -148,6 +152,7 @@ export const List = memoGeneric(
           const thumbnail = renderThumbnail?.({
             item,
             selected: isSelected,
+            size,
           });
           const onOpenChange = (open: boolean) => {
             setDropdownOpenId(open ? id : undefined);
@@ -168,6 +173,7 @@ export const List = memoGeneric(
                     onSelect={(action) => handleMenuAction(action, item)}
                     selected={isSelected}
                     onOpenChange={onOpenChange}
+                    variant="bare"
                   />
                 ));
 
@@ -229,6 +235,7 @@ export const List = memoGeneric(
                 if (!expandable) return;
                 setExpanded?.(item, !expanded);
               }}
+              dragIndicatorStyle={dragIndicatorStyle}
             >
               <div
                 className={cx("flex flex-1 items-center px-2", rowGapMap[size])}
@@ -236,9 +243,10 @@ export const List = memoGeneric(
                 {thumbnail && (
                   <div
                     className={cx(
-                      "rounded overflow-hidden flex-none flex items-center justify-center",
+                      "overflow-hidden flex-none flex items-center justify-center",
                       thumbnailSize === "auto" && thumbnailSizeMap[size],
-                      isSelected && "text-primary"
+                      isSelected && "text-primary",
+                      size === "small" ? "rounded-sm" : "rounded"
                     )}
                     tabIndex={-1}
                   >
@@ -255,9 +263,7 @@ export const List = memoGeneric(
                           className={fontStyleMap[size]}
                           autoFocus={!isTestingRenaming}
                           onSubmitEditing={(value: string) => {
-                            if (value !== getName(item) && value !== "") {
-                              onRename?.(item, value);
-                            }
+                            onRename?.(item, value);
                             setRenamingId(undefined);
                           }}
                           onKeyDown={(e: React.KeyboardEvent) => {
@@ -316,37 +322,37 @@ const DetailContainer = memo(function DetailContainer({
   );
 });
 
-const pyMap: Record<GridViewSize, string> = {
-  xxs: "py-1",
-  xs: "py-1",
-  small: "py-1",
+const pyMap: Record<CollectionItemSize, string> = {
+  xxs: "py-0.5",
+  xs: "py-0.5",
+  small: "py-0.5",
   medium: "py-1",
   large: "py-2",
   xl: "py-3",
 };
 
-const thumbnailSizeMap: Record<GridViewSize, string> = {
-  xxs: "w-4 h-4",
-  xs: "w-4 h-4",
-  small: "w-6 h-6",
+const thumbnailSizeMap: Record<CollectionItemSize, string> = {
+  xxs: "w-5 h-5",
+  xs: "w-5 h-5",
+  small: "w-5 h-5",
   medium: "w-8 h-8",
   large: "w-16 h-16",
   xl: "w-24 h-24",
 };
 
-const rowGapMap: Record<GridViewSize, string> = {
-  xxs: "gap-3",
-  xs: "gap-3",
-  small: "gap-3",
+const rowGapMap: Record<CollectionItemSize, string> = {
+  xxs: "gap-2",
+  xs: "gap-2",
+  small: "gap-2",
   medium: "gap-3",
   large: "gap-3",
   xl: "gap-4",
 };
 
-const fontStyleMap: Record<GridViewSize, string> = {
-  xxs: "font-medium",
-  xs: "font-medium",
-  small: "font-medium",
+const fontStyleMap: Record<CollectionItemSize, string> = {
+  xxs: "font-medium text-list-small",
+  xs: "font-medium text-list-small",
+  small: "font-medium text-list-small",
   medium: "font-medium",
   large: "font-medium",
   xl: "font-medium text-heading4 text-text",

package/src/components/ListView.tsx

@@ -26,7 +26,7 @@ import { ListChildComponentProps, VariableSizeList } from "react-window";
 import { mergeEventHandlers } from "../hooks/mergeEventHandlers";
 import { useHover } from "../hooks/useHover";
 import { cssVars, INPUT_HEIGHT } from "../theme";
-import { cx } from "../utils/classNames";
+import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import { ContextMenu } from "./ContextMenu";
 import { InputField } from "./InputField";
 import { MenuItem } from "./internal/Menu";
@@ -376,7 +376,7 @@ interface ListViewClickInfo {
   ctrlKey: boolean;
 }
 
-interface ListViewRowProps<MenuItemType extends string = string> {
+export interface ListViewRowProps<MenuItemType extends string = string> {
   id?: string;
   tabIndex?: number;
   role?: string;
@@ -1044,9 +1044,14 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         aria-labelledby={ariaLabelledby}
         aria-orientation={ariaOrientation}
         aria-multiselectable={ariaMultiselectable}
-        className={cx(
-          `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
-          className
+        className={mergeConflictingClassNames(
+          [
+            `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
+            className,
+          ],
+          {
+            categories: ["flex"],
+          }
         )}
         style={{ ...gapStyle, ...style }}
         {...{

package/src/components/MediaThumbnail.tsx

@@ -2,9 +2,10 @@ import { ImageIcon, SpeakerLoudIcon, VideoIcon } from "@noya-app/noya-icons";
 import React, { memo, useMemo } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
+import { CollectionItemSize } from "./Collection";
 import { IconName, Icons } from "./Icons";
 
-type ColorScheme = "primary" | "icon" | "warning";
+type ColorScheme = "primary" | "secondary" | "icon" | "warning";
 
 type AssetType = "image" | "video" | "audio";
 
@@ -29,9 +30,13 @@ type MediaThumbnailProps = {
    * If provided, use this icon instead of the default one for the asset type
    */
   iconName?: IconName;
+  size?: CollectionItemSize;
 };
 
-const getColors = (colorScheme: ColorScheme, selected: boolean) => {
+export const getThumbnailColors = (
+  colorScheme: ColorScheme,
+  selected: boolean
+) => {
   if (selected) {
     return {
       icon: cssVars.colors.primary,
@@ -45,6 +50,11 @@ const getColors = (colorScheme: ColorScheme, selected: boolean) => {
         icon: cssVars.colors.primary,
         background: cssVars.colors.listViewThumbnailBackground,
       };
+    case "secondary":
+      return {
+        icon: cssVars.colors.secondary,
+        background: cssVars.colors.secondaryPastel,
+      };
     case "warning":
       return {
         icon: cssVars.colors.warning,
@@ -59,11 +69,6 @@ const getColors = (colorScheme: ColorScheme, selected: boolean) => {
   }
 };
 
-const iconStyles = {
-  width: "max(15px, 20%)",
-  height: "max(15px, 20%)",
-};
-
 export const MediaThumbnail = memo(function MediaThumbnail({
   contentType: contentTypeProp,
   selected = false,
@@ -71,12 +76,20 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   colorScheme = "icon",
   url,
   iconName = "FileIcon",
+  size = "medium",
 }: MediaThumbnailProps) {
-  const { icon: iconColor, background: backgroundColor } = getColors(
+  const { icon: iconColor, background: backgroundColor } = getThumbnailColors(
     colorScheme,
     selected
   );
   const contentType = getAssetType(contentTypeProp);
+  const iconStyles = useMemo(
+    () => ({
+      width: iconSizeMap[size],
+      height: iconSizeMap[size],
+    }),
+    [size]
+  );
 
   const content = useMemo(() => {
     switch (contentType) {
@@ -101,7 +114,7 @@ export const MediaThumbnail = memo(function MediaThumbnail({
         const Icon = Icons[iconName];
         return <Icon color={iconColor} style={iconStyles} />;
     }
-  }, [contentType, url, iconColor, iconName]);
+  }, [contentType, url, iconColor, iconStyles, iconName]);
 
   return (
     <div
@@ -115,3 +128,12 @@ export const MediaThumbnail = memo(function MediaThumbnail({
     </div>
   );
 });
+
+const iconSizeMap: Record<CollectionItemSize, number | string> = {
+  xxs: 12,
+  xs: 12,
+  small: 12,
+  medium: "max(15px, 20%)",
+  large: "max(15px, 20%)",
+  xl: "max(15px, 20%)",
+};