@noya-app/noya-designsystem 0.0.13 → 0.0.14

package/.turbo/turbo-build.log

@@ -6,13 +6,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.js     184.20 KB
-CJS dist/index.js.map 366.85 KB
-CJS ⚡️ Build success in 138ms
-ESM dist/index.mjs     167.94 KB
-ESM dist/index.mjs.map 365.94 KB
-ESM ⚡️ Build success in 139ms
+CJS dist/index.js     184.94 KB
+CJS dist/index.js.map 368.98 KB
+CJS ⚡️ Build success in 86ms
+ESM dist/index.mjs     168.67 KB
+ESM dist/index.mjs.map 368.07 KB
+ESM ⚡️ Build success in 86ms
 DTS Build start
-DTS ⚡️ Build success in 6080ms
-DTS dist/index.d.ts  53.26 KB
-DTS dist/index.d.mts 53.26 KB
+DTS ⚡️ Build success in 5856ms
+DTS dist/index.d.ts  53.86 KB
+DTS dist/index.d.mts 53.86 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @noya-app/noya-designsystem
 
+## 0.0.14
+
+### Patch Changes
+
+- Bump version
+- Updated dependencies
+  - @noya-app/noya-colorpicker@0.0.8
+  - @noya-app/noya-geometry@0.0.12
+  - @noya-app/noya-icons@0.0.5
+  - @noya-app/noya-keymap@0.0.7
+  - @noya-app/noya-utils@0.0.11
+
 ## 0.0.13
 
 ### Patch Changes

package/dist/index.d.mts

@@ -34,17 +34,19 @@ declare function Avatar({ image, name, fallback, size, overflow, }: {
     overflow?: number;
 }): React__default.JSX.Element;
 
-type ButtonVariant = 'normal' | 'primary' | 'secondary' | 'secondaryBright' | 'white' | 'thin' | 'floating' | 'none';
-type ButtonSize = 'normal' | 'large';
+type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "white" | "thin" | "floating" | "none";
+type ButtonSize = "normal" | "large";
 declare const ButtonElement: styled_components.StyledComponent<"button", styled_components.DefaultTheme, {
     active: boolean;
     variant: ButtonVariant;
     size: ButtonSize;
-    flex?: CSSProperties['flex'];
+    flex?: CSSProperties["flex"];
 }, never>;
 interface ButtonRootProps {
     id?: string;
-    flex?: CSSProperties['flex'];
+    className?: string;
+    style?: CSSProperties;
+    flex?: CSSProperties["flex"];
     tabIndex?: number;
     children: ReactNode;
     active?: boolean;
@@ -91,6 +93,7 @@ declare const colors$1: {
     textMuted: string;
     textSubtle: string;
     textDisabled: string;
+    textDecorativeLight: string;
     dividerSubtle: string;
     divider: string;
     dividerStrong: string;
@@ -104,6 +107,9 @@ declare const colors$1: {
     inputBackground: string;
     inputBackgroundLight: string;
     codeBackground: string;
+    codeBackgroundLight: string;
+    readonly codeBackgroundDark: string;
+    codeBackgroundDecorativeDark: string;
     selectedBackground: string;
     transparentChecker: string;
     activeBackground: string;
@@ -142,6 +148,7 @@ declare const colors$1: {
     readonly dragOutline: string;
     selection: string;
     thumbnailBackground: string;
+    thumbnailShadow: string;
 };
 declare const fonts: {
     normal: string;
@@ -336,7 +343,7 @@ type GridProps = {
     background?: keyof Colors;
 };
 
-type GridViewSize = 'xxs' | 'xs' | 'small' | 'large';
+type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
 interface ItemProps$2<MenuItemType extends string = string> {
     id: string;
     title?: ReactNode;
@@ -351,10 +358,11 @@ interface ItemProps$2<MenuItemType extends string = string> {
     menuItems?: MenuItem<MenuItemType>[];
     onSelectMenuItem?: (value: MenuItemType) => void;
     onContextMenu?: () => void;
+    style?: CSSProperties;
 }
 type GridViewContextValue = {
     size: GridViewSize;
-    textPosition: 'overlay' | 'below' | 'toolip';
+    textPosition: "overlay" | "below" | "toolip";
     bordered: boolean;
     disabled: boolean;
 };
@@ -377,6 +385,8 @@ declare namespace GridView {
 
 declare const IconButton: (props: Omit<ButtonRootProps, "children" | "size" | "flex" | "variant"> & {
     iconName: keyof typeof Icons;
+    className?: string | undefined;
+    style?: React__default.CSSProperties | undefined;
     selected?: boolean | undefined;
     color?: string | undefined;
     size?: number | undefined;
@@ -676,6 +686,7 @@ type Props$b = {
     onDeleteWhenEmpty?: () => void;
     size?: InputFieldSize;
     style?: React__default.CSSProperties;
+    className?: string;
     children?: React__default.ReactNode;
     hideChildrenWhenFocused?: boolean;
     hideMenuWhenEmptyValue?: boolean;
@@ -876,45 +887,46 @@ interface Props$3 {
 declare const Switch: ({ value, onChange, variant, }: Props$3) => React__default.JSX.Element;
 
 type StyleProps = {
-    flex?: CSSProperties$1['flex'];
-    padding?: CSSProperties$1['padding'];
-    background?: CSSProperties$1['background'];
-    borderRadius?: CSSProperties$1['borderRadius'];
-    textAlign?: CSSProperties$1['textAlign'];
-    fontWeight?: CSSProperties$1['fontWeight'];
-    fontStyle?: CSSProperties$1['fontStyle'];
-    fontSize?: CSSProperties$1['fontSize'];
-    lineHeight?: CSSProperties$1['lineHeight'];
-    fontFamily?: CSSProperties$1['fontFamily'];
-    wordBreak?: CSSProperties$1['wordBreak'];
-    whiteSpace?: CSSProperties$1['whiteSpace'];
-    height?: CSSProperties$1['height'];
-    width?: CSSProperties$1['width'];
-    opacity?: CSSProperties$1['opacity'];
-    position?: CSSProperties$1['position'];
-    overflow?: CSSProperties$1['overflow'];
-    textOverflow?: CSSProperties$1['textOverflow'];
-    textDecoration?: CSSProperties$1['textDecoration'];
-    display?: CSSProperties$1['display'];
-    top?: CSSProperties$1['top'];
-    right?: CSSProperties$1['right'];
-    bottom?: CSSProperties$1['bottom'];
-    left?: CSSProperties$1['left'];
-    userSelect?: CSSProperties$1['userSelect'];
+    flex?: CSSProperties$1["flex"];
+    padding?: CSSProperties$1["padding"];
+    background?: CSSProperties$1["background"];
+    borderRadius?: CSSProperties$1["borderRadius"];
+    textAlign?: CSSProperties$1["textAlign"];
+    fontWeight?: CSSProperties$1["fontWeight"];
+    fontStyle?: CSSProperties$1["fontStyle"];
+    fontSize?: CSSProperties$1["fontSize"];
+    lineHeight?: CSSProperties$1["lineHeight"];
+    fontFamily?: CSSProperties$1["fontFamily"];
+    wordBreak?: CSSProperties$1["wordBreak"];
+    whiteSpace?: CSSProperties$1["whiteSpace"];
+    height?: CSSProperties$1["height"];
+    width?: CSSProperties$1["width"];
+    opacity?: CSSProperties$1["opacity"];
+    position?: CSSProperties$1["position"];
+    overflow?: CSSProperties$1["overflow"];
+    textOverflow?: CSSProperties$1["textOverflow"];
+    textDecoration?: CSSProperties$1["textDecoration"];
+    display?: CSSProperties$1["display"];
+    top?: CSSProperties$1["top"];
+    right?: CSSProperties$1["right"];
+    bottom?: CSSProperties$1["bottom"];
+    left?: CSSProperties$1["left"];
+    userSelect?: CSSProperties$1["userSelect"];
+    cursor?: CSSProperties$1["cursor"];
 };
 type TextBreakpointList = BreakpointCollection<StyleProps>;
 interface Props$2 extends StyleProps {
     as?: keyof ReactHTML;
     href?: string;
     className?: string;
-    variant: keyof Theme['textStyles'];
+    variant: keyof Theme["textStyles"];
     breakpoints?: BreakpointCollection<StyleProps> | null | false;
     color?: ThemeColorName;
     children: ReactNode;
     onClick?: () => void;
 }
 declare const Text$1: (props: Props$2 & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-type PresetProps = Omit<Props$2, 'variant'>;
+type PresetProps = Omit<Props$2, "variant">;
 declare const Heading1: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 declare const Heading2: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 declare const Heading3: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
@@ -1108,6 +1120,7 @@ declare const colors: {
     textMuted: string;
     textSubtle: string;
     textDisabled: string;
+    textDecorativeLight: string;
     dividerSubtle: string;
     divider: string;
     dividerStrong: string;
@@ -1121,6 +1134,9 @@ declare const colors: {
     inputBackground: string;
     inputBackgroundLight: string;
     codeBackground: string;
+    codeBackgroundLight: string;
+    readonly codeBackgroundDark: string;
+    codeBackgroundDecorativeDark: string;
     selectedBackground: string;
     transparentChecker: string;
     activeBackground: string;
@@ -1159,6 +1175,7 @@ declare const colors: {
     readonly dragOutline: string;
     selection: string;
     thumbnailBackground: string;
+    thumbnailShadow: string;
 };
 
 declare const dark_colors: typeof colors;

package/dist/index.d.ts

@@ -34,17 +34,19 @@ declare function Avatar({ image, name, fallback, size, overflow, }: {
     overflow?: number;
 }): React__default.JSX.Element;
 
-type ButtonVariant = 'normal' | 'primary' | 'secondary' | 'secondaryBright' | 'white' | 'thin' | 'floating' | 'none';
-type ButtonSize = 'normal' | 'large';
+type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "white" | "thin" | "floating" | "none";
+type ButtonSize = "normal" | "large";
 declare const ButtonElement: styled_components.StyledComponent<"button", styled_components.DefaultTheme, {
     active: boolean;
     variant: ButtonVariant;
     size: ButtonSize;
-    flex?: CSSProperties['flex'];
+    flex?: CSSProperties["flex"];
 }, never>;
 interface ButtonRootProps {
     id?: string;
-    flex?: CSSProperties['flex'];
+    className?: string;
+    style?: CSSProperties;
+    flex?: CSSProperties["flex"];
     tabIndex?: number;
     children: ReactNode;
     active?: boolean;
@@ -91,6 +93,7 @@ declare const colors$1: {
     textMuted: string;
     textSubtle: string;
     textDisabled: string;
+    textDecorativeLight: string;
     dividerSubtle: string;
     divider: string;
     dividerStrong: string;
@@ -104,6 +107,9 @@ declare const colors$1: {
     inputBackground: string;
     inputBackgroundLight: string;
     codeBackground: string;
+    codeBackgroundLight: string;
+    readonly codeBackgroundDark: string;
+    codeBackgroundDecorativeDark: string;
     selectedBackground: string;
     transparentChecker: string;
     activeBackground: string;
@@ -142,6 +148,7 @@ declare const colors$1: {
     readonly dragOutline: string;
     selection: string;
     thumbnailBackground: string;
+    thumbnailShadow: string;
 };
 declare const fonts: {
     normal: string;
@@ -336,7 +343,7 @@ type GridProps = {
     background?: keyof Colors;
 };
 
-type GridViewSize = 'xxs' | 'xs' | 'small' | 'large';
+type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
 interface ItemProps$2<MenuItemType extends string = string> {
     id: string;
     title?: ReactNode;
@@ -351,10 +358,11 @@ interface ItemProps$2<MenuItemType extends string = string> {
     menuItems?: MenuItem<MenuItemType>[];
     onSelectMenuItem?: (value: MenuItemType) => void;
     onContextMenu?: () => void;
+    style?: CSSProperties;
 }
 type GridViewContextValue = {
     size: GridViewSize;
-    textPosition: 'overlay' | 'below' | 'toolip';
+    textPosition: "overlay" | "below" | "toolip";
     bordered: boolean;
     disabled: boolean;
 };
@@ -377,6 +385,8 @@ declare namespace GridView {
 
 declare const IconButton: (props: Omit<ButtonRootProps, "children" | "size" | "flex" | "variant"> & {
     iconName: keyof typeof Icons;
+    className?: string | undefined;
+    style?: React__default.CSSProperties | undefined;
     selected?: boolean | undefined;
     color?: string | undefined;
     size?: number | undefined;
@@ -676,6 +686,7 @@ type Props$b = {
     onDeleteWhenEmpty?: () => void;
     size?: InputFieldSize;
     style?: React__default.CSSProperties;
+    className?: string;
     children?: React__default.ReactNode;
     hideChildrenWhenFocused?: boolean;
     hideMenuWhenEmptyValue?: boolean;
@@ -876,45 +887,46 @@ interface Props$3 {
 declare const Switch: ({ value, onChange, variant, }: Props$3) => React__default.JSX.Element;
 
 type StyleProps = {
-    flex?: CSSProperties$1['flex'];
-    padding?: CSSProperties$1['padding'];
-    background?: CSSProperties$1['background'];
-    borderRadius?: CSSProperties$1['borderRadius'];
-    textAlign?: CSSProperties$1['textAlign'];
-    fontWeight?: CSSProperties$1['fontWeight'];
-    fontStyle?: CSSProperties$1['fontStyle'];
-    fontSize?: CSSProperties$1['fontSize'];
-    lineHeight?: CSSProperties$1['lineHeight'];
-    fontFamily?: CSSProperties$1['fontFamily'];
-    wordBreak?: CSSProperties$1['wordBreak'];
-    whiteSpace?: CSSProperties$1['whiteSpace'];
-    height?: CSSProperties$1['height'];
-    width?: CSSProperties$1['width'];
-    opacity?: CSSProperties$1['opacity'];
-    position?: CSSProperties$1['position'];
-    overflow?: CSSProperties$1['overflow'];
-    textOverflow?: CSSProperties$1['textOverflow'];
-    textDecoration?: CSSProperties$1['textDecoration'];
-    display?: CSSProperties$1['display'];
-    top?: CSSProperties$1['top'];
-    right?: CSSProperties$1['right'];
-    bottom?: CSSProperties$1['bottom'];
-    left?: CSSProperties$1['left'];
-    userSelect?: CSSProperties$1['userSelect'];
+    flex?: CSSProperties$1["flex"];
+    padding?: CSSProperties$1["padding"];
+    background?: CSSProperties$1["background"];
+    borderRadius?: CSSProperties$1["borderRadius"];
+    textAlign?: CSSProperties$1["textAlign"];
+    fontWeight?: CSSProperties$1["fontWeight"];
+    fontStyle?: CSSProperties$1["fontStyle"];
+    fontSize?: CSSProperties$1["fontSize"];
+    lineHeight?: CSSProperties$1["lineHeight"];
+    fontFamily?: CSSProperties$1["fontFamily"];
+    wordBreak?: CSSProperties$1["wordBreak"];
+    whiteSpace?: CSSProperties$1["whiteSpace"];
+    height?: CSSProperties$1["height"];
+    width?: CSSProperties$1["width"];
+    opacity?: CSSProperties$1["opacity"];
+    position?: CSSProperties$1["position"];
+    overflow?: CSSProperties$1["overflow"];
+    textOverflow?: CSSProperties$1["textOverflow"];
+    textDecoration?: CSSProperties$1["textDecoration"];
+    display?: CSSProperties$1["display"];
+    top?: CSSProperties$1["top"];
+    right?: CSSProperties$1["right"];
+    bottom?: CSSProperties$1["bottom"];
+    left?: CSSProperties$1["left"];
+    userSelect?: CSSProperties$1["userSelect"];
+    cursor?: CSSProperties$1["cursor"];
 };
 type TextBreakpointList = BreakpointCollection<StyleProps>;
 interface Props$2 extends StyleProps {
     as?: keyof ReactHTML;
     href?: string;
     className?: string;
-    variant: keyof Theme['textStyles'];
+    variant: keyof Theme["textStyles"];
     breakpoints?: BreakpointCollection<StyleProps> | null | false;
     color?: ThemeColorName;
     children: ReactNode;
     onClick?: () => void;
 }
 declare const Text$1: (props: Props$2 & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
-type PresetProps = Omit<Props$2, 'variant'>;
+type PresetProps = Omit<Props$2, "variant">;
 declare const Heading1: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 declare const Heading2: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 declare const Heading3: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
@@ -1108,6 +1120,7 @@ declare const colors: {
     textMuted: string;
     textSubtle: string;
     textDisabled: string;
+    textDecorativeLight: string;
     dividerSubtle: string;
     divider: string;
     dividerStrong: string;
@@ -1121,6 +1134,9 @@ declare const colors: {
     inputBackground: string;
     inputBackgroundLight: string;
     codeBackground: string;
+    codeBackgroundLight: string;
+    readonly codeBackgroundDark: string;
+    codeBackgroundDecorativeDark: string;
     selectedBackground: string;
     transparentChecker: string;
     activeBackground: string;
@@ -1159,6 +1175,7 @@ declare const colors: {
     readonly dragOutline: string;
     selection: string;
     thumbnailBackground: string;
+    thumbnailShadow: string;
 };
 
 declare const dark_colors: typeof colors;

package/dist/index.js

@@ -245,9 +245,9 @@ var ButtonElement = import_styled_components4.default.button(({ theme, active, d
   textAlign: "left",
   borderRadius: "4px",
   paddingTop: variant === "none" ? "0px" : "4px",
-  paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "6px",
+  paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
   paddingBottom: variant === "none" ? "0px" : "4px",
-  paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "6px",
+  paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
   ...size2 === "large" && {
     paddingTop: "12px",
     paddingRight: "16px",
@@ -332,6 +332,8 @@ var ButtonContent = import_styled_components4.default.span(({ theme }) => ({
 }));
 var Button = (0, import_react4.forwardRef)(function Button2({
   id,
+  className,
+  style,
   flex,
   tabIndex,
   tooltip,
@@ -350,6 +352,8 @@ var Button = (0, import_react4.forwardRef)(function Button2({
     {
       ref: forwardedRef,
       id,
+      className,
+      style,
       flex,
       tabIndex,
       active,
@@ -2751,10 +2755,20 @@ var sizes = {
     itemHeight: 170,
     gap: 20
   },
+  medium: {
+    itemWidth: 220,
+    itemHeight: 220,
+    gap: 16
+  },
   large: {
     itemWidth: 280,
     itemHeight: 280,
-    gap: 20
+    gap: 24
+  },
+  xl: {
+    itemWidth: 400,
+    itemHeight: 400,
+    gap: 32
   }
 };
 var Grid2 = import_styled_components23.default.div(({ theme, size: size2, padding }) => {
@@ -2914,7 +2928,8 @@ var GridViewItem = (0, import_react27.forwardRef)(function GridViewItem2({
   children,
   menuItems,
   onSelectMenuItem,
-  onContextMenu
+  onContextMenu,
+  style
 }, forwardedRef) {
   const [hovered, setHovered] = import_react27.default.useState(false);
   const { hoverProps } = useHover({
@@ -2963,7 +2978,8 @@ var GridViewItem = (0, import_react27.forwardRef)(function GridViewItem2({
         hovered: !disabled && hovered,
         onClick: handleClick,
         onDoubleClick,
-        onContextMenu
+        onContextMenu,
+        style
       },
       children
     ),
@@ -4072,6 +4088,7 @@ var InputFieldWithCompletions = (0, import_react31.memo)(
     onBlur,
     onDeleteWhenEmpty,
     style,
+    className,
     children,
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
@@ -4273,6 +4290,7 @@ var InputFieldWithCompletions = (0, import_react31.memo)(
           onFocusCapture: handleFocus,
           onKeyDown: handleKeyDown,
           style,
+          className,
           autoCapitalize: "off",
           autoComplete: "off",
           autoCorrect: "off",
@@ -4908,6 +4926,7 @@ var colors = {
   textMuted: "rgb(85, 85, 85)",
   textSubtle: "rgb(121, 121, 121)",
   textDisabled: "rgb(160, 160, 160)",
+  textDecorativeLight: "rgb(168, 185, 212)",
   dividerSubtle: "rgba(0, 0, 0, 0.04)",
   divider: "rgba(0, 0, 0, 0.07)",
   dividerStrong: "rgba(0, 0, 0, 0.09)",
@@ -4921,6 +4940,11 @@ var colors = {
   inputBackground: "rgb(240, 240, 242)",
   inputBackgroundLight: "rgb(243, 243, 245)",
   codeBackground: "rgb(250, 250, 250)",
+  codeBackgroundLight: "rgb(250, 250, 250)",
+  get codeBackgroundDark() {
+    return colors.text;
+  },
+  codeBackgroundDecorativeDark: "#435080",
   selectedBackground: "rgb(242, 245, 250)",
   transparentChecker: "rgba(255,255,255,0.8)",
   activeBackground: "rgba(0,0,0,0.1)",
@@ -4962,10 +4986,11 @@ var colors = {
     return colors.primary;
   },
   selection: "rgb(179,215,254)",
-  thumbnailBackground: "#E1DAFF"
+  thumbnailBackground: "#E1DAFF",
+  thumbnailShadow: "#D3CEED66"
 };
 var fonts = {
-  normal: "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+  normal: "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
   monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace"
 };
 var typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85];
@@ -4975,6 +5000,7 @@ var textStyles = {
     fontSize: `${typeScale[0]}rem`,
     fontWeight: "bold",
     lineHeight: "1.4",
+    letterSpacing: "-0.05em",
     [mediaQuery.small]: {
       fontSize: "36px"
     }
@@ -4984,6 +5010,7 @@ var textStyles = {
     fontSize: `${typeScale[3]}rem`,
     fontWeight: 500,
     lineHeight: "1.75",
+    letterSpacing: "-0.05em",
     [mediaQuery.small]: {
       fontSize: "18px"
     }
@@ -4992,19 +5019,22 @@ var textStyles = {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[2]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.75",
+    letterSpacing: "-0.025em"
   },
   heading2: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[3]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.75",
+    letterSpacing: "-0.025em"
   },
   heading3: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[4]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.75",
+    letterSpacing: "-0.025em"
   },
   heading4: {
     fontFamily: fonts.normal,
@@ -5100,6 +5130,8 @@ var colors2 = (0, import_immer.default)(colors, (colors3) => {
   colors3.placeholderDots = "rgba(255,255,255,0.3)";
   colors3.dragOutline = "white";
   colors3.activeBackground = "rgba(181,178,255,0.08)";
+  colors3.thumbnailBackground = "#1f1d33";
+  colors3.thumbnailShadow = "#1f1d3366";
 });
 
 // src/utils/createSectionedMenu.ts
@@ -5188,7 +5220,7 @@ var Column = import_styled_components34.default.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
-  gap: "2px"
+  gap: "4px"
 }));
 var Checkbox = import_styled_components34.default.input(({ theme }) => ({
   margin: 0