@noya-app/noya-designsystem 0.1.19 → 0.1.21

package/dist/index.mjs

@@ -679,7 +679,8 @@ var textStyles = {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[6]}rem`,
     fontWeight: 400,
-    lineHeight: "1.4"
+    lineHeight: "19px"
+    // lineHeight: "1.4",
   },
   button: {
     fontFamily: fonts.normal,
@@ -1977,7 +1978,11 @@ var InputElement = styled12(TextInput_default)(({
     // },
   };
 });
-var InputFieldInput = forwardRef9(function InputFieldInput2(props, forwardedRef) {
+var InputFieldInput = forwardRef9(function InputFieldInput2({
+  textAlign,
+  variant,
+  ...rest
+}, forwardedRef) {
   const {
     labelPosition,
     labelSize,
@@ -2005,8 +2010,10 @@ var InputFieldInput = forwardRef9(function InputFieldInput2(props, forwardedRef)
       $hasLabel: hasLabel,
       $hasDropdown: hasDropdown,
       $size: size2,
+      $variant: variant,
+      $textAlign: textAlign,
       onFocusChange: handleFocusChange,
-      ...props
+      ...rest
     }
   );
 });
@@ -2531,15 +2538,15 @@ var ChipElement = styled14.span(({ theme, $colorScheme, $size, $variant, $monosp
     userSelect: "none",
     display: "inline-flex",
     alignItems: "center",
-    lineHeight: "1.4",
+    // lineHeight: "1.4",
+    lineHeight: "15px",
     whiteSpace: "pre",
     ...$size === "medium" ? {
       fontSize: "11px",
       padding: "4px 8px"
     } : {
       fontSize: "9px",
-      padding: "0px 4px",
-      lineHeight: "15px"
+      padding: "0px 4px"
     },
     ...$monospace && {
       fontFamily: theme.fonts.monospace
@@ -6343,11 +6350,21 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
   onChangeLayoutState,
   leftSidebarInitialSize = 280,
   rightSidebarInitialSize = 400,
-  leftSidebarCanResize = false
+  leftSidebarMinSize,
+  rightSidebarMinSize,
+  leftSidebarCanResize = false,
+  id,
+  className,
+  style: style3
 }, forwardedRef) {
   const windowSize = useWindowSize();
-  const leftSidebarPercentage = leftSidebarInitialSize / windowSize.width * 100;
-  const rightSidebarPercentage = rightSidebarInitialSize / windowSize.width * 100;
+  function getPercentage(size2) {
+    return typeof size2 === "string" ? parseFloat(size2) : size2 / windowSize.width * 100;
+  }
+  const leftSidebarPercentage = getPercentage(leftSidebarInitialSize);
+  const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
+  const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
+  const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
   const panelGroupRef = useRef20(null);
   const leftSidebarRef = useRef20(null);
   const rightSidebarRef = useRef20(null);
@@ -6409,82 +6426,97 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
       }
     }
   });
-  return /* @__PURE__ */ React47.createElement(Stack.H, { flex: "1" }, /* @__PURE__ */ React47.createElement(
-    PanelGroup,
+  const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
+  return /* @__PURE__ */ React47.createElement(
+    "div",
     {
-      ref: panelGroupRef,
-      id: EDITOR_PANEL_GROUP_ID,
-      direction: "horizontal",
-      autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
-      style: { flex: "1" }
-    },
-    hasLeftSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
-      Panel,
-      {
-        id: LEFT_SIDEBAR_ID,
-        order: 1,
-        ref: leftSidebarRef,
-        defaultSize: leftSidebarPercentage,
-        minSize: leftSidebarPercentage,
-        ...!leftSidebarCanResize && { maxSize: leftSidebarPercentage },
-        collapsible: true,
-        style: {
-          display: "flex",
-          flexDirection: "row"
-        }
-      },
-      leftPanelContent
-    ), /* @__PURE__ */ React47.createElement(
-      PanelResizeHandle,
-      {
-        style: {
-          cursor: "col-resize",
-          width: "1px",
-          height: "100%",
-          backgroundColor: theme.colors.divider
-        }
+      id,
+      className,
+      style: {
+        backgroundColor: theme.colors.canvas.background,
+        display: "flex",
+        flexDirection: "row",
+        ...style3
       }
-    )),
+    },
     /* @__PURE__ */ React47.createElement(
-      Panel,
+      PanelGroup,
       {
-        id: CONTENT_AREA_ID,
-        order: 2,
-        minSize: 10,
-        style: {
-          display: "flex",
-          flexDirection: "row"
-        }
+        ref: panelGroupRef,
+        id: EDITOR_PANEL_GROUP_ID,
+        direction: "horizontal",
+        autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
+        style: { flex: "1" }
       },
-      centerPanelContent
-    ),
-    hasRightSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
-      PanelResizeHandle,
-      {
-        style: {
-          cursor: "col-resize",
-          width: "1px",
-          height: "100%",
-          backgroundColor: theme.colors.divider
+      hasLeftSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
+        Panel,
+        {
+          id: LEFT_SIDEBAR_ID,
+          order: 1,
+          ref: leftSidebarRef,
+          defaultSize: leftSidebarPercentage,
+          minSize: leftSidebarMinPercentage ?? leftSidebarPercentage,
+          ...!leftSidebarCanResize && { maxSize: leftSidebarPercentage },
+          collapsible: true,
+          style: {
+            display: "flex",
+            flexDirection: "row"
+          }
+        },
+        leftPanelContent
+      ), /* @__PURE__ */ React47.createElement(
+        PanelResizeHandle,
+        {
+          style: {
+            cursor: "col-resize",
+            width: "1px",
+            height: "100%",
+            backgroundColor: theme.colors.divider
+          }
         }
-      }
-    ), /* @__PURE__ */ React47.createElement(
-      Panel,
-      {
-        id: RIGHT_SIDEBAR_ID,
-        order: 3,
-        ref: rightSidebarRef,
-        minSize: rightSidebarPercentage,
-        defaultSize: rightSidebarPercentage,
-        collapsible: true,
-        style: {
-          display: "flex",
-          flexDirection: "row"
+      )),
+      /* @__PURE__ */ React47.createElement(
+        Panel,
+        {
+          id: CONTENT_AREA_ID,
+          order: 2,
+          defaultSize: centerPanelPercentage,
+          minSize: 10,
+          style: {
+            display: "flex",
+            flexDirection: "row"
+          }
+        },
+        centerPanelContent
+      ),
+      hasRightSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
+        PanelResizeHandle,
+        {
+          style: {
+            cursor: "col-resize",
+            width: "1px",
+            height: "100%",
+            backgroundColor: theme.colors.divider
+          }
         }
-      },
-      rightPanelContent
-    ))
-  ));
+      ), /* @__PURE__ */ React47.createElement(
+        Panel,
+        {
+          id: RIGHT_SIDEBAR_ID,
+          order: 3,
+          ref: rightSidebarRef,
+          minSize: rightSidebarMinPercentage ?? rightSidebarPercentage,
+          defaultSize: rightSidebarPercentage,
+          collapsible: true,
+          style: {
+            display: "flex",
+            flexDirection: "row"
+          }
+        },
+        rightPanelContent
+      ))
+    )
+  );
 });
 
 // src/hooks/usePlatform.ts