@noya-app/noya-designsystem 0.0.12 → 0.0.14

package/dist/index.mjs

@@ -128,9 +128,9 @@ var ButtonElement = styled4.button(({ theme, active, disabled, variant, size: si
   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",
@@ -215,6 +215,8 @@ var ButtonContent = styled4.span(({ theme }) => ({
 }));
 var Button = forwardRef(function Button2({
   id,
+  className,
+  style,
   flex,
   tabIndex,
   tooltip,
@@ -233,6 +235,8 @@ var Button = forwardRef(function Button2({
     {
       ref: forwardedRef,
       id,
+      className,
+      style,
       flex,
       tabIndex,
       active,
@@ -2008,14 +2012,9 @@ var DividerVertical = memo11(function DividerVertical2(props) {
 import React22, { forwardRef as forwardRef8, memo as memo14 } from "react";
 import styled18 from "styled-components";
 
-// ../noya-file-format/dist/index.mjs
-var __defProp2 = Object.defineProperty;
-var __export2 = (target, all) => {
-  for (var name in all)
-    __defProp2(target, name, { get: all[name], enumerable: true });
-};
+// ../noya-file-format/src/types.ts
 var types_exports = {};
-__export2(types_exports, {
+__export(types_exports, {
   AnimationType: () => AnimationType,
   BlendMode: () => BlendMode,
   BlurType: () => BlurType,
@@ -2715,10 +2714,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 = styled21.div(({ theme, size: size2, padding }) => {
@@ -2878,7 +2887,8 @@ var GridViewItem = forwardRef9(function GridViewItem2({
   children,
   menuItems,
   onSelectMenuItem,
-  onContextMenu
+  onContextMenu,
+  style
 }, forwardedRef) {
   const [hovered, setHovered] = React25.useState(false);
   const { hoverProps } = useHover({
@@ -2927,7 +2937,8 @@ var GridViewItem = forwardRef9(function GridViewItem2({
         hovered: !disabled && hovered,
         onClick: handleClick,
         onDoubleClick,
-        onContextMenu
+        onContextMenu,
+        style
       },
       children
     ),
@@ -4076,6 +4087,7 @@ var InputFieldWithCompletions = memo20(
     onBlur,
     onDeleteWhenEmpty,
     style,
+    className,
     children,
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
@@ -4277,6 +4289,7 @@ var InputFieldWithCompletions = memo20(
           onFocusCapture: handleFocus,
           onKeyDown: handleKeyDown,
           style,
+          className,
           autoCapitalize: "off",
           autoComplete: "off",
           autoCorrect: "off",
@@ -4941,6 +4954,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)",
@@ -4954,6 +4968,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)",
@@ -4995,10 +5014,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];
@@ -5008,6 +5028,7 @@ var textStyles = {
     fontSize: `${typeScale[0]}rem`,
     fontWeight: "bold",
     lineHeight: "1.4",
+    letterSpacing: "-0.05em",
     [mediaQuery.small]: {
       fontSize: "36px"
     }
@@ -5017,6 +5038,7 @@ var textStyles = {
     fontSize: `${typeScale[3]}rem`,
     fontWeight: 500,
     lineHeight: "1.75",
+    letterSpacing: "-0.05em",
     [mediaQuery.small]: {
       fontSize: "18px"
     }
@@ -5025,19 +5047,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,
@@ -5133,6 +5158,8 @@ var colors2 = produce(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
@@ -5221,7 +5248,7 @@ var Column = styled32.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
-  gap: "2px"
+  gap: "4px"
 }));
 var Checkbox = styled32.input(({ theme }) => ({
   margin: 0