@fibery/ui-kit 1.40.4 → 1.42.0

package/src/design-system.ts

@@ -1,545 +1,25 @@
-/* eslint-disable max-lines */
-import ColorHash from "color-hash";
-import _ from "lodash";
-import {
-  clampRgb,
-  darkenChroma,
-  desaturateChroma,
-  isValidColor,
-  produceColor,
-  set,
-  setAlpha,
-  setLuminanceChroma,
-  toCss,
-} from "./color-utils";
-import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
-import {ThemeMode} from "./theme-settings";
-import {defaultPaletteKey, makeDefaultPalette, ThemePalette} from "./palette-generator";
-import {
-  brandColors,
-  getOpacities,
-  makeThemeDefs,
-  pickDarkColors,
-  pickFns,
-  pickLight2Colors,
-  pickLightColors,
-  ThemeDefs,
-} from "./design-system.colors";
-
-export {cardTypeColors, opacity, getOpacities} from "./design-system.colors";
-
-export const typeSizes = [30, 24, 18, 16, 14, 12, 10, 8] as const;
-
-export const fontWeight = {
-  light: 310, // 300 basic, 310 experiment with a variable Inter
-  regular: 410, // 400 basic, 410 experiment with a variable Inter
-  mediumLight: 450,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-} as const;
-
-// 300 basic, 310 experiment with a variable Inter
-export const fontSize = {
-  xxl: 30,
-  xl: 24,
-  lg: 18,
-  md: 16,
-  sm: 15,
-  xs: 14,
-  xxs: 13,
-  xxxs: 12,
-  tiny: 11,
-  mini: 10,
-  micro: 9,
-  nano: 8,
-} as const;
-
-export const minPanelWidth = 490;
-
-export const fontFamily =
-  '"Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif';
-
-export function getThemeValue<T>(theme: ThemeMode, values: {light: T; light2?: T; dark: T}): T {
-  if (theme in values) {
-    return values[theme] as T;
-  }
-  return values.light;
-}
-
-export const getDarkenColor = _.memoize((color: string): string => {
-  return produceColor(color, [(c) => darkenChroma(c, 0.5), clampRgb, (c) => desaturateChroma(c, 0.8)]);
-});
-
-function getTypeColors(themeColor: string, theme: ThemeMode) {
-  const color = isValidColor(themeColor) ? themeColor : brandColors.green;
-
-  const makeBrightenPrimary = () => {
-    return produceColor(color, [
-      (c) => setLuminanceChroma(c, 0.92),
-      (c) => desaturateChroma(c, 0.1),
-      (c) => setAlpha(c, 0.98),
-    ]);
-  };
-
-  const makeHeaderBg = () => {
-    return produceColor(color, [
-      (c) => setLuminanceChroma(c, 0.7),
-      (c) => desaturateChroma(c, 0.5),
-      (c) => set(c, "hsl.h", (h) => h + 2),
-    ]);
-  };
-
-  const makeLightDetailsBg = () => {
-    return produceColor(color, [(c) => setAlpha(c, 0.5), (c) => setLuminanceChroma(c, 0.85)]);
-  };
-
-  const makeDarkDetailsBg = () => {
-    return produceColor(color, [
-      (c) => setAlpha(c, 0.03),
-      (c) => setLuminanceChroma(c, 0.8),
-      (c) => desaturateChroma(c, 0.8),
-      (c) => darkenChroma(c, 0.1),
-    ]);
-  };
-
-  const makeFocus = () => {
-    return produceColor(color, (c) => setAlpha(c, 0.25));
-  };
-
-  const makeSeparator = () => {
-    return produceColor(color, (c) => setAlpha(c, 0.3));
-  };
-
-  const lightTypeColors = {
-    primary: color,
-    opacity: getOpacities(color),
-    darkenPrimary: getDarkenColor(color),
-    brightenPrimary: makeBrightenPrimary(),
-    headerBg: makeHeaderBg(),
-    detailsBg: makeLightDetailsBg(),
-    focus: makeFocus(),
-    separator: makeSeparator(),
-  };
-
-  const darkTypeColors = {
-    primary: color,
-    opacity: getOpacities(color),
-    darkenPrimary: getDarkenColor(color),
-    brightenPrimary: makeBrightenPrimary(),
-    headerBg: makeHeaderBg(),
-    detailsBg: makeDarkDetailsBg(),
-    focus: makeFocus(),
-    separator: makeSeparator(),
-  };
-
-  switch (theme) {
-    case "light":
-      return lightTypeColors;
-    case "dark":
-      return darkTypeColors;
-    case "light2":
-      return lightTypeColors;
-    default:
-      return lightTypeColors;
-  }
-}
-
-type DesignColor =
-  | ReturnType<typeof pickDarkColors>
-  | ReturnType<typeof pickLightColors>
-  | ReturnType<typeof pickLight2Colors>;
-
-type ThemeFns = {
-  [K in keyof ThemeDefs["fns"]]: ThemeDefs["fns"][K]["light"];
-};
-
-export type ThemeColors = {key: string; fns: ThemeFns} & ReturnType<typeof getTypeColors> & DesignColor;
-
-export type ThemeVars = Omit<ThemeColors, "key" | "fns">;
-
-export const getThemeColors = _.memoize(
-  (_: string | null, mode: ThemeMode, palette: ThemePalette = makeDefaultPalette()): ThemeColors => {
-    const defs = makeThemeDefs(palette);
-    const colors =
-      mode === "dark" ? pickDarkColors(defs) : mode === "light2" ? pickLight2Colors(defs) : pickLightColors(defs);
-
-    return {
-      key: `${palette.key}-${mode}`,
-      fns: pickFns(defs.fns, mode) as ThemeFns,
-      ...getTypeColors(brandColors.blue, mode),
-      ...colors,
-    };
-  },
-  (_, mode, palette) => `${palette?.key ?? defaultPaletteKey}-${mode}`
-);
-
-export const getTextColor = _.memoize((color: string): string => {
-  return toCss(color);
-});
-
-export const getEnumTextColor = (color: string) => {
-  return `color-mix(in srgb, ${color} 25%, ${themeVars.textColor} 75%)`;
-};
-
-export const dropCursorColor = produceColor(brandColors.blue, (c) => setAlpha(c, 0.7));
-
-export const space = {
-  spaceAuto: "auto",
-  s0: 0,
-  s1: 1,
-  s2: 2,
-  s3: 3,
-  s4: 4,
-  s5: 5,
-  s6: 6,
-  s8: 8,
-  s10: 10,
-  s12: 12,
-  s14: 14,
-  s16: 16,
-  s18: 18,
-  s20: 20,
-  s24: 24,
-  s28: 28,
-  s32: 32,
-  s36: 36,
-  s40: 40,
-  s44: 44,
-  s48: 48,
-  s56: 56,
-  s60: 60,
-  s64: 64,
-  s80: 80,
-  s96: 96,
-  s112: 112,
-  s128: 128,
-} as const;
-/** Token for nested items spacing in nested trees */
-export const spaceNestedTreeLevel = 12;
-export const spaceNestedTreeInterval = 0;
-export const layout = {
-  logoSize: 18,
-  menuDefaultWidth: 243,
-  fiberyAiSidebarDefaultWidth: 420,
-  fiberyAiSidebarMaxWidth: 920,
-  desktopToolbarHeight: 32,
-  desktopMenuMinWidth: 240,
-  collapsedMenuMinWidth: 47,
-  menuMinWidth: 284,
-  menuMaxWidth: 480,
-  menuItemMinWidth: 80,
-  menuGroupHeaderIndent: 28, // I'm ok
-  menuItemLevelIndent: 24,
-  listItemHeight: 38,
-  mobileListItemHeight: 44,
-  itemHeight: 36,
-  itemWithSubtitleHeight: 52,
-  groupTitleHeight: 30,
-  enumItemHeight: 32,
-  menuItemHeight: 32,
-  mobileMenuItemHeight: 44,
-  newMenuItemHeight: 28, // I'm ok
-  mobileSidebarMenuItemHeight: 44,
-  newMenuIconSize: 18,
-  mobileSidebarIconSize: 20,
-  viewHeaderHeight: space.s12 * 7,
-  viewHeaderCompactHeight: 52,
-  columnMinWidth: 240,
-  columnWidths: {compact: 200, default: 240, list: 280, full: 320},
-  objectEditorMinWidth: 480,
-  typeEditorWidth: "30vw",
-  typeEditorMinWidth: 480,
-  viewSetupWidth: "30vw",
-  viewSetupMinWidth: 380,
-  inputHeight: 36, //TODO: merge input and item height?
-  timelineToolbarHeight: 48,
-  timelineLineHeight: 40,
-  timelineGroupPadding: 0,
-  timelineItemHeightRatio: 32 / 40,
-  timelineHeaderHeight: 48,
-  calendarEventHeight: 30,
-  calendarHeaderHeight: 30,
-  calendarToolbarHeight: 48,
-  checkboxSize: 15,
-  fakeBoardWidth: 260,
-  fakeBoardHeight: 160,
-  inlineInputHeight: 32,
-  menuHeight: 32,
-  popupTopMargin: 48,
-  unitHeight: 18,
-} as const;
-
-export const themeVars = makeThemeVars(getThemeColors(null, "light"), varPrefix);
-
-export const menuItemHeightVar = `--${varPrefix}-layout-menuItemHeight`;
-export const sidebarMenuItemHeightVar = `--${varPrefix}-layout-sidebarMenuItemHeight`;
-export const sidebarMenuIconSizeVar = `--${varPrefix}-layout-sidebarMenuIconSize`;
-export const listRowSurfaceFontSizeVar = `--${varPrefix}-layout-listRowSurfaceFontSize`;
-
-export const layoutVars = {
-  menuItemHeight: `var(${menuItemHeightVar})`,
-  sidebarMenuItemHeight: `var(${sidebarMenuItemHeightVar})`,
-  sidebarMenuIconSize: `var(${sidebarMenuIconSizeVar})`,
-  listRowSurfaceFontSize: `var(${listRowSurfaceFontSizeVar})`,
-};
-
-export const border = {
-  radius0: 0,
-  radius1: 1,
-  radius2: 2,
-  radius4: 4,
-  radius5: 5,
-  radius6: 6,
-  radius8: 8,
-  radius10: 10,
-  radius12: 12,
-  radius16: 16,
-  radius9999: 9999,
-} as const;
-
-export const lineHeight = {
-  text: 1.6,
-  regular: 1.5,
-  narrow: 1.4,
-  heading: 1.3,
-  nowrap: 1,
-} as const;
-
-export const tooltipDelay = {
-  enter: 500,
-  leave: 0,
-} as const;
-
-export const duration = 120;
-export const easing = "ease-in-out";
-export const transition = `${duration}ms ${easing}`;
-
-export const iconSize = 20;
-export const viewBoxSize = "0 0 20 20";
-
-export const shadows = {
-  border: `0 0 0 1px ${themeVars.shades.opacity10}`,
-  inversedBorder: `0 0 0 1px ${themeVars.lights.opacity10}`,
-  videoPreview: "0 4px 30px 4px rgba(0, 0, 0, .15)",
-} as const;
-
-export const dateFormat = "MMM D, YYYY";
-export const dateTimeFormat = "MMM D, YYYY HH:mm";
-export const timeFormat = "HH:mm";
-
-export const getLinearGradient = (backgroundColors: Array<string>): string => {
-  const parts = _.flatMap(
-    backgroundColors.map((color, index, arr) => [
-      `${color} ${(index / arr.length) * 100}%`,
-      `${color} ${((index + 1) / arr.length) * 100}%`,
-    ])
-  );
-  return `linear-gradient(to bottom, ${parts.join(", ")})`;
-};
-
-export const getObjectColorMemoized = _.memoize((name) => {
-  if (!name) {
-    return "#999999";
-  }
-  const colorHash = new ColorHash({
-    lightness: [0.5, 0.6, 0.7],
-    saturation: [0.6, 0.7, 0.8, 0.9, 1],
-  });
-  return colorHash.hex(name);
-});
-
-function makeThemeVars(sample: ThemeColors, varPrefix: string) {
-  const vars = {} as Record<string, string | {[k: string]: string}>;
-  for (const [key, value] of Object.entries(sample)) {
-    if (key === "opacity") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((opacityKey) => [opacityKey, `var(--${varPrefix}-opacity-${opacityKey})`])
-      );
-    } else if (key === "brandColors") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((brandColorKey) => [brandColorKey, `var(--${varPrefix}-brand-colors-${brandColorKey})`])
-      );
-    } else if (key === "shades") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((shadeKey) => [shadeKey, `var(--${varPrefix}-shades-${shadeKey})`])
-      );
-    } else if (key === "lights") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((lightKey) => [lightKey, `var(--${varPrefix}-lights-${lightKey})`])
-      );
-    } else if (key === "separators") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((separatorKey) => [separatorKey, `var(--${varPrefix}-separator-${separatorKey})`])
-      );
-    } else if (key === "inversedSeparators") {
-      vars[key] = Object.fromEntries(
-        Object.keys(value).map((separatorKey) => [
-          separatorKey,
-          `var(--${varPrefix}-inversed-separator-${separatorKey})`,
-        ])
-      );
-    } else if (key !== "key" && key !== "fns") {
-      vars[key] = `var(--${varPrefix}-color-${key})`;
-    }
-  }
-  return vars as ThemeVars;
-}
-
-/** @deprecated make this dark-vs-light theme override optimization more explicit */
-export const defaultThemeKeys = Object.keys(pickLightColors(makeThemeDefs(makeDefaultPalette())));
-export const rejectNoKeys: string[] = [];
-
-export const createInlineTheme = _.memoize(
-  (theme: ThemeColors, rejectKeys = defaultThemeKeys) => {
-    return createInlineStyles<ThemeColors>(theme, rejectKeys);
-  },
-  (theme, rejectKeys = defaultThemeKeys) => {
-    const rejectKeysLabel = rejectKeys === defaultThemeKeys ? "defaultThemeKeys" : rejectKeys.join(",");
-    return `${theme.key}__${rejectKeysLabel}`;
-  }
-);
-
-export const textStyles = {
-  heading1: {
-    fontFamily,
-    fontSize: typeSizes[0],
-    letterSpacing: "-0.01em",
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading2: {
-    fontFamily,
-    fontSize: typeSizes[1],
-    letterSpacing: "-0.002em",
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading3: {
-    fontFamily,
-    fontSize: typeSizes[2],
-    letterSpacing: "-0.002em",
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading4: {
-    fontFamily,
-    fontSize: typeSizes[3],
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading5: {
-    fontFamily,
-    fontSize: typeSizes[4],
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
-    color: themeVars.textColor,
-  },
-  heading6: {
-    fontFamily,
-    fontSize: typeSizes[5],
-    lineHeight: lineHeight.heading,
-    letterSpacing: 0.6,
-    textTransform: "uppercase",
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-  },
-  heading7: {
-    fontFamily,
-    fontSize: typeSizes[6],
-    lineHeight: lineHeight.heading,
-    letterSpacing: 0.6,
-    textTransform: "uppercase",
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-  },
-  heading8: {
-    fontFamily,
-    fontSize: typeSizes[6],
-    lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.medium,
-    color: themeVars.textColor,
-  },
-  big: {
-    fontFamily,
-    fontSize: typeSizes[3],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-  },
-  regular: {
-    fontFamily,
-    fontSize: typeSizes[4],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-    textTransform: "none",
-    letterSpacing: "normal",
-  },
-  small: {
-    fontFamily,
-    fontSize: typeSizes[5],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-    textTransform: "none",
-  },
-  code: {
-    fontFamily: '"SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace',
-    fontSize: typeSizes[4],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-  },
-  link: {
-    color: themeVars.linkColor,
-    borderBottom: themeVars.linkBorder,
-    textDecoration: "none",
-    cursor: "pointer",
-    transition: `border ${transition}`,
-  },
-  inversedLink: {
-    color: themeVars.inversedTextColor,
-    cursor: "pointer",
-    textDecoration: "underline",
-    textDecorationColor: themeVars.lights.opacity25,
-  },
-  note: {
-    fontFamily,
-    fontSize: typeSizes[3],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-    borderRadius: border.radius6,
-  },
-  important: {
-    fontFamily,
-    fontSize: typeSizes[3],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: themeVars.textColor,
-    border: `1px solid ${themeVars.active}`,
-    borderRadius: border.radius6,
-  },
-  numeric: {
-    tabularOn: {
-      fontVariantNumeric: "tabular-nums",
-      fontFeatureSettings: '"tnum" 1',
-    },
-    tabularOff: {
-      fontVariantNumeric: "normal",
-      fontFeatureSettings: '"tnum" 0',
-    },
-  },
-  inherit: {
-    fontFamily: "inherit",
-    fontSize: "inherit",
-    lineHeight: "inherit",
-    fontWeight: "inherit",
-    color: "inherit",
-  },
-} as const;
+export {opacity, getOpacities} from "./design-system/alpha";
+export {transition, easing, duration, tooltipDelay} from "./design-system/animation";
+export {cardTypeColors} from "./design-system/colors";
+export {getLinearGradient, getEnumTextColor, dropCursorColor, shadows} from "./design-system/colors-css";
+export {getDarkenColor, getTextColor, getObjectColorMemoized} from "./design-system/colors-js";
+export {dateFormat, dateTimeFormat, timeFormat} from "./design-system/date";
+export {
+  iconSize,
+  border,
+  space,
+  layout,
+  spaceNestedTreeInterval,
+  spaceNestedTreeLevel,
+  viewBoxSize,
+  minPanelWidth,
+} from "./design-system/layout";
+export {type ThemeColors, getThemeColors, createInlineStyles, themeVars, type ThemeStyles} from "./design-system/theme";
+export {typeSizes, fontSize, fontFamily, fontWeight, lineHeight, textStyles} from "./design-system/typography";
+export {
+  layoutVars,
+  menuItemHeightVar,
+  listRowSurfaceFontSizeVar,
+  sidebarMenuItemHeightVar,
+  sidebarMenuIconSizeVar,
+} from "./design-system/vars";

package/src/dropdown-menu/index.tsx

@@ -5,7 +5,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {forwardRef} from "react";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
 import {mobileRootSelector} from "../mobile-styles";
-import {ThemeProvider} from "../theme-provider";
+import {RadixPortalThemeProvider} from "../theme-provider";
 
 export const Root = (dropdownMenuProps: DropdownMenuPrimitive.DropdownMenuProps) => (
   <DropdownMenuPrimitive.Root dir="ltr" modal={false} {...dropdownMenuProps} />
@@ -134,7 +134,7 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(function Dropdow
 ) {
   return (
     <Wrap if={portalled} with={DropdownMenuPrimitive.Portal} container={container}>
-      <ThemeProvider portal>
+      <RadixPortalThemeProvider>
         <DropdownMenuPrimitive.Content
           onKeyDown={onContentKeyDown}
           ref={ref}
@@ -145,7 +145,7 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(function Dropdow
           sideOffset={space.s4}
           {...rest}
         />
-      </ThemeProvider>
+      </RadixPortalThemeProvider>
     </Wrap>
   );
 });
@@ -158,14 +158,14 @@ export const SubContent = forwardRef<
 >(function DropdownMenuSubContent({className, collisionPadding = space.s12, container, ...rest}, ref) {
   return (
     <DropdownMenuPrimitive.Portal container={container}>
-      <ThemeProvider portal>
+      <RadixPortalThemeProvider>
         <DropdownMenuPrimitive.SubContent
           ref={ref}
           className={cx(dropdownMenuContentStyles, className)}
           collisionPadding={collisionPadding}
           {...rest}
         />
-      </ThemeProvider>
+      </RadixPortalThemeProvider>
     </DropdownMenuPrimitive.Portal>
   );
 });

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {compact} from "lodash";
+import compact from "lodash/compact";
 import {Button} from "../button/button";
 import {space, themeVars} from "../design-system";
 import EmojiDelete from "../icons/react/EmojiDelete";

package/src/fibermoji-placeholder.tsx

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import memoize from "lodash/memoize";
 import {css} from "@linaria/core";
 import {FC, useEffect, useRef} from "react";
 import {textStyles} from "./design-system";
@@ -38,12 +38,12 @@ const mouths = [
   `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" viewBox="0 0 32 16" fill="none"><g clip-path="url(#clip0_31_1134)"><path d="M4.23177 12.4853C2.41601 11.1761 1.06315 9.59547 0.249133 7.87572C-0.702621 5.86498 1.22002 4 3.51791 4L7 4C7.55229 4 8 4.44772 8 5V13.0522C8 13.7579 7.28869 14.2398 6.6548 13.9296C5.79179 13.5074 4.97984 13.0247 4.23177 12.4853Z" fill="currentColor"/><path d="M31.7509 7.87572C30.9369 9.59547 29.584 11.1761 27.7682 12.4853C27.0202 13.0247 26.2082 13.5074 25.3452 13.9296C24.7113 14.2398 24 13.7579 24 13.0522L24 5C24 4.44772 24.4477 4 25 4L28.4821 4C30.78 4 32.7026 5.86498 31.7509 7.87572Z" fill="currentColor"/><path d="M16 16C14.564 16 13.1472 15.8662 11.7816 15.6082C11.3227 15.5215 11 15.1143 11 14.6473V5C11 4.44772 11.4477 4 12 4L20 4C20.5523 4 21 4.44772 21 5V14.6473C21 15.1143 20.6773 15.5215 20.2184 15.6082C18.8528 15.8662 17.436 16 16 16Z" fill="currentColor"/></g><defs><clipPath id="clip0_31_1134"><rect width="32" height="16" fill="white"/></clipPath></defs></svg>`,
 ];
 
-export const getColors = _.memoize((v: string) => {
+export const getColors = memoize((v: string) => {
   const idx = Math.floor((cyrb53(v) / Math.pow(2, 53)) * colors.length);
   return colors[idx];
 });
 
-const getMouth = _.memoize((v: string) => {
+const getMouth = memoize((v: string) => {
   const salted = v + "::mouth"; // made mouths independent of colors
   const idx = Math.floor((cyrb53(salted) / Math.pow(2, 53)) * mouths.length);
   return mouths[idx];

package/src/field-container.tsx

@@ -20,18 +20,27 @@ type Props = {
   label?: string;
   collapsible?: boolean;
   collapsed?: boolean;
+  collapsedDefault?: boolean;
   onCollapseChange?: (collapsed: boolean) => void;
   badge?: ReactNode;
   children: ReactNode;
 };
 
-export const FieldContainer = ({label, collapsible = false, collapsed, onCollapseChange, badge, children}: Props) => {
+export const FieldContainer = ({
+  label,
+  collapsible = false,
+  collapsed,
+  collapsedDefault = true,
+  onCollapseChange,
+  badge,
+  children,
+}: Props) => {
   return (
     <CollapsibleSection
       label={label ? <div className={labelStyle}>{label}</div> : undefined}
       collapsible={collapsible}
       collapsed={collapsed}
-      collapsedDefault={true}
+      collapsedDefault={collapsedDefault}
       onCollapsedChange={onCollapseChange}
       badge={badge}
     >

package/src/file-item/file-icon.tsx

@@ -4,11 +4,11 @@ import FileTable from "../icons/react/FileTable";
 import FileDocument from "../icons/react/FileDocument";
 import FileArchive from "../icons/react/FileArchive";
 import FilePresentation from "../icons/react/FilePresentation";
-import AppWiki from "../icons/react/AppWiki";
+import FileOther from "../icons/react/FileOther";
 
 export function getFileIconComponent(contentType?: string) {
   if (!contentType) {
-    return AppWiki;
+    return FileOther;
   }
   if (contentType.startsWith("image/")) {
     return FileImage;
@@ -29,7 +29,7 @@ export function getFileIconComponent(contentType?: string) {
     return FileDocument;
   }
 
-  return AppWiki;
+  return FileOther;
 }
 
 export function FileIcon({contentType}: {contentType?: string}) {