@noya-app/noya-designsystem 0.1.30 → 0.1.31

package/dist/index.mjs

@@ -1504,6 +1504,10 @@ var StackBase = forwardRef(function StackBase2({
   breakpoints,
   tabIndex,
   href,
+  paddingHorizontal,
+  paddingVertical,
+  padding,
+  style: style5,
   ...rest
 }, forwardedRef) {
   const elements2 = separator ? withSeparatorElements(Children2.toArray(children2), separator) : children2;
@@ -1511,7 +1515,9 @@ var StackBase = forwardRef(function StackBase2({
     display: "flex",
     position: "relative",
     alignItems: "stretch",
-    ...rest
+    padding: padding || `${paddingVertical ?? 0} ${paddingHorizontal ?? 0} ${paddingVertical ?? 0} ${paddingHorizontal ?? 0}`,
+    ...rest,
+    ...style5
   };
   return /* @__PURE__ */ React2.createElement(
     Element2,
@@ -1736,8 +1742,8 @@ var ButtonElement = styled5.button(
       background: "white",
       color: theme.colors.text,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-      fontSize: "12px",
-      padding: "0px 4px",
+      fontSize: $size === "small" ? "10px" : "12px",
+      padding: $size === "small" ? "0px 2px" : "0px 4px",
       "&:hover": {
         opacity: 0.8
       },
@@ -3269,35 +3275,38 @@ function Popover({
 // src/components/InputField.tsx
 var InputFieldContext = createContext2({
   labelPosition: "end",
-  labelSize: 6,
-  hasLabel: false,
+  labelSize: void 0,
+  buttonSize: void 0,
   hasDropdown: false,
   size: "medium",
   isFocused: false,
   onFocusChange: () => {
   }
 });
-var LabelContainer = styled12.label(({ theme, $labelPosition, $hasDropdown, pointerEvents }) => ({
-  ...theme.textStyles.label,
-  fontWeight: "bold",
-  color: theme.colors.textDisabled,
-  position: "absolute",
-  top: 0,
-  right: $labelPosition === "end" ? 0 : void 0,
-  bottom: 0,
-  left: $labelPosition === "start" ? 0 : void 0,
-  display: "flex",
-  alignItems: "center",
-  pointerEvents,
-  userSelect: "none",
-  ...$labelPosition === "start" ? { justifyContent: "flex-start", paddingLeft: "6px" } : {
-    justifyContent: "flex-end",
-    paddingRight: $hasDropdown ? "16px" : "6px"
-  }
-}));
+var LabelContainer = styled12.label(({ theme, $labelPosition, $hasDropdown, pointerEvents, $size }) => {
+  const offsetRelativeToSize = $size === "large" ? 6 : $size === "medium" ? 2 : 0;
+  return {
+    ...theme.textStyles.label,
+    fontWeight: "bold",
+    color: theme.colors.textDisabled,
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: $labelPosition === "end" ? offsetRelativeToSize : void 0,
+    left: $labelPosition === "start" ? offsetRelativeToSize : void 0,
+    display: "flex",
+    alignItems: "center",
+    pointerEvents,
+    userSelect: "none",
+    ...$labelPosition === "start" ? { justifyContent: "flex-start", paddingLeft: "6px" } : {
+      justifyContent: "flex-end",
+      paddingRight: $hasDropdown ? "16px" : "6px"
+    }
+  };
+});
 var InputFieldLabel = memo9(
   forwardRef9(function InputFieldLabel2({ children: children2 = false, pointerEvents = "none", style: style5 }, forwardedRef) {
-    const { labelPosition, hasDropdown, setLabelWidth } = useContext2(InputFieldContext);
+    const { labelPosition, hasDropdown, setLabelWidth, size: size3 } = useContext2(InputFieldContext);
     const ref = useRef11(null);
     useLayoutEffect4(() => {
       if (!setLabelWidth)
@@ -3310,6 +3319,7 @@ var InputFieldLabel = memo9(
     return /* @__PURE__ */ React18.createElement(
       LabelContainer,
       {
+        $size: size3,
         ref: (element) => {
           ref.current = element;
           assignRef(forwardedRef, element);
@@ -3346,40 +3356,56 @@ var ButtonContainer = styled12.span(
   ({ theme, $size }) => ({
     position: "absolute",
     right: $size === "large" ? "9px" : $size === "medium" ? "4px" : "2px",
-    top: $size === "large" ? "8px" : $size === "medium" ? "4px" : "2px"
+    top: $size === "large" ? "10px" : $size === "medium" ? "4px" : "2px"
   })
 );
-var InputFieldButton = memo9(function InputFieldButton2({
-  children: children2,
-  onClick
-}) {
-  const { size: size3, inputRef } = useContext2(InputFieldContext);
-  const defaultHandleClick = useCallback11(
-    (event) => {
-      if (inputRef && typeof inputRef !== "function") {
-        inputRef.current?.focus();
-        inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
-      }
+var InputFieldButton = memo9(
+  forwardRef9(function InputFieldButton2({
+    children: children2,
+    onClick
+  }, forwardedRef) {
+    const { size: size3, inputRef, setButtonWidth } = useContext2(InputFieldContext);
+    const ref = useRef11(null);
+    useLayoutEffect4(() => {
+      if (!setButtonWidth)
+        return;
+      const width = ref.current?.getBoundingClientRect().width;
+      if (!width)
+        return;
+      setButtonWidth(width);
+    }, [setButtonWidth]);
+    const defaultHandleClick = useCallback11(
+      (event) => {
+        if (inputRef && typeof inputRef !== "function") {
+          inputRef.current?.focus();
+          inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      [inputRef]
+    );
+    const handlePointerDown = useCallback11((event) => {
       event.preventDefault();
       event.stopPropagation();
-    },
-    [inputRef]
-  );
-  const handlePointerDown = useCallback11((event) => {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ React18.createElement(ButtonContainer, { $size: size3 }, /* @__PURE__ */ React18.createElement(
-    Button,
-    {
-      variant: "floating",
-      onClick: onClick ?? defaultHandleClick,
-      onPointerDown: handlePointerDown,
-      tabIndex: -1
-    },
-    children2
-  ));
-});
+    }, []);
+    return /* @__PURE__ */ React18.createElement(ButtonContainer, { $size: size3 }, /* @__PURE__ */ React18.createElement(
+      Button,
+      {
+        ref: (element) => {
+          ref.current = element;
+          assignRef(forwardedRef, element);
+        },
+        variant: "floating",
+        onClick: onClick ?? defaultHandleClick,
+        onPointerDown: handlePointerDown,
+        tabIndex: -1,
+        size: size3 === "medium" ? "normal" : size3
+      },
+      children2
+    ));
+  })
+);
 var InputElement = styled12(TextInput_default)(({
   theme,
   $labelPosition,
@@ -3387,7 +3413,6 @@ var InputElement = styled12(TextInput_default)(({
   $hasDropdown,
   $textAlign,
   disabled,
-  $hasLabel,
   readOnly,
   $variant = "normal",
   $size
@@ -3414,8 +3439,8 @@ var InputElement = styled12(TextInput_default)(({
     borderRadius: "4px",
     paddingTop: $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
     paddingBottom: $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
-    paddingLeft: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($hasLabel && $labelPosition === "start" ? 6 + $labelSize : 0) + "px",
-    paddingRight: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($hasLabel && $labelPosition === "end" ? 6 + $labelSize : 0) + ($hasDropdown ? 11 : 0) + "px",
+    paddingLeft: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0) + "px",
+    paddingRight: ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) + ($hasDropdown ? 11 : 0) + "px",
     background: theme.colors.inputBackground,
     "&:focus": {
       boxShadow: `0 0 0 2px ${theme.colors.primary}`
@@ -3449,7 +3474,7 @@ var InputFieldInput = forwardRef9(function InputFieldInput2({
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
+    buttonSize,
     size: size3,
     onFocusChange,
     setInputRef
@@ -3468,8 +3493,7 @@ var InputFieldInput = forwardRef9(function InputFieldInput2({
     {
       ref: forwardedRef,
       $labelPosition: labelPosition,
-      $labelSize: labelSize,
-      $hasLabel: hasLabel,
+      $labelSize: labelSize || buttonSize,
       $hasDropdown: hasDropdown,
       $size: size3,
       $variant: variant,
@@ -3484,7 +3508,6 @@ var InputFieldTypeahead = (props) => {
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
     size: size3
     // onFocusChange,
   } = useContext2(InputFieldContext);
@@ -3494,7 +3517,6 @@ var InputFieldTypeahead = (props) => {
       as: "span",
       $labelPosition: labelPosition,
       $labelSize: labelSize,
-      $hasLabel: hasLabel,
       $hasDropdown: hasDropdown,
       $size: size3,
       value: "",
@@ -3581,15 +3603,13 @@ function InputFieldNumberInput(props) {
     }
   );
 }
-var RootContainer = styled12.div(
-  ({ theme, $flex, $width }) => ({
-    flex: $flex ?? "1",
-    display: "flex",
-    flexDirection: "row",
-    position: "relative",
-    maxWidth: typeof $width === "number" ? `${$width}px` : void 0
-  })
-);
+var RootContainer = styled12.div(({ theme, $flex, $width }) => ({
+  flex: $flex ?? "1",
+  display: "flex",
+  flexDirection: "row",
+  position: "relative",
+  maxWidth: typeof $width === "number" ? `${$width}px` : void 0
+}));
 function InputFieldRoot({
   id,
   flex,
@@ -3607,11 +3627,9 @@ function InputFieldRoot({
   const hasDropdown = childrenArray.some(
     (child) => isValidElement2(child) && child.type === InputFieldDropdownMenu
   );
-  const hasLabel = childrenArray.some(
-    (child) => isValidElement2(child) && child.type === InputFieldLabel
-  );
   const [isFocused, setIsFocused] = React18.useState(false);
   const [measuredLabelSize, setMeasuredLabelSize] = React18.useState();
+  const [measuredButtonSize, setMeasuredButtonSize] = React18.useState();
   const [measuredWidth, setMeasuredWidth] = React18.useState();
   const handleFocusChange = useCallback11(
     (isFocused2) => {
@@ -3631,22 +3649,23 @@ function InputFieldRoot({
   const contextValue = useMemo6(
     () => ({
       labelPosition,
-      labelSize: measuredLabelSize ?? labelSize ?? 6,
+      labelSize: measuredLabelSize ?? labelSize,
+      buttonSize: measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size: size3,
       isFocused,
       onFocusChange: handleFocusChange,
       inputRef,
       setInputRef,
-      setLabelWidth: setMeasuredLabelSize
+      setLabelWidth: setMeasuredLabelSize,
+      setButtonWidth: setMeasuredButtonSize
     }),
     [
       labelPosition,
       measuredLabelSize,
       labelSize,
+      measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size3,
       isFocused,
       handleFocusChange,
@@ -14625,79 +14644,21 @@ var RadioGroup;
   RadioGroup2.Item = memo27(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 
-// src/components/Select.tsx
-import { memoize } from "@noya-app/noya-utils";
-import React64, {
-  createContext as createContext11,
-  memo as memo28,
-  useCallback as useCallback23,
-  useContext as useContext11,
-  useEffect as useEffect15,
-  useMemo as useMemo22,
-  useRef as useRef19
-} from "react";
-import styled30 from "styled-components";
-var SelectContext = createContext11(void 0);
-var SelectOption = memo28(function SelectOption2({
-  value,
-  title,
-  onSelect
-}) {
-  const { addListener, removeListener } = useContext11(SelectContext);
-  useEffect15(() => {
-    if (!onSelect)
-      return;
-    addListener(value, onSelect);
-    return () => removeListener(value);
-  }, [addListener, onSelect, removeListener, value]);
-  return /* @__PURE__ */ React64.createElement("option", { value }, title ?? value);
-});
-var createChevronSVGString = memoize(
-  (color) => `
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${color}'>
-    <path d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z'></path>
-  </svg>
-`.replace(/\n/g, "")
-);
-var SelectContainer = styled30.div(
-  ({ $flex }) => ({
-    flex: $flex ?? "1 1 0px",
-    display: "flex",
-    flexDirection: "row",
-    position: "relative"
-  })
-);
-var SelectElement = styled30.select(
-  ({ theme, $flex }) => ({
-    appearance: "none",
-    ...theme.textStyles.small,
-    color: theme.colors.text,
-    lineHeight: "19px",
-    width: "0px",
-    // Reset intrinsic width
-    flex: $flex ?? "1 1 0px",
-    position: "relative",
-    border: "0",
-    outline: "none",
-    minWidth: "0",
-    textAlign: "left",
-    alignSelf: "stretch",
-    borderRadius: "4px",
-    paddingTop: "4px",
-    paddingBottom: "4px",
-    paddingLeft: "6px",
-    paddingRight: "23px",
-    background: [
-      `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(
-        theme.colors.icon
-      )}") no-repeat`,
-      theme.colors.inputBackground
-    ].join(","),
-    "&:focus": {
-      boxShadow: `0 0 0 2px ${theme.colors.primary}`
-    }
-  })
-);
+// src/components/SelectMenu.tsx
+import { DropdownChevronIcon } from "@noya-app/noya-icons";
+import * as Select from "@radix-ui/react-select";
+import React64, { memo as memo28, useMemo as useMemo22 } from "react";
+import { styled as styled30 } from "styled-components";
+var readOnlyStyle = {
+  justifyContent: "flex-start",
+  textAlign: "left"
+};
+var flexStyle = {
+  flex: 1
+};
+var textStyle = {
+  fontSize: "0.85rem"
+};
 var SelectLabel = styled30.label(({ theme }) => ({
   ...theme.textStyles.label,
   color: theme.colors.textDisabled,
@@ -14712,66 +14673,7 @@ var SelectLabel = styled30.label(({ theme }) => ({
   justifyContent: "end",
   paddingRight: "24px"
 }));
-var Select = memo28(function Select2({
-  id,
-  flex,
-  value,
-  label,
-  ...rest
-}) {
-  const options = "options" in rest ? rest.options : void 0;
-  const getTitle = "options" in rest ? rest.getTitle : void 0;
-  const onChange = "options" in rest ? rest.onChange : void 0;
-  const children2 = "options" in rest ? void 0 : rest.children;
-  const optionElements = useMemo22(
-    () => options ? options.map((option, index) => /* @__PURE__ */ React64.createElement(
-      SelectOption,
-      {
-        key: option,
-        value: option,
-        title: getTitle?.(option, index),
-        onSelect: () => onChange?.(option)
-      }
-    )) : children2,
-    [children2, getTitle, onChange, options]
-  );
-  const listeners = useRef19(/* @__PURE__ */ new Map());
-  const contextValue = useMemo22(
-    () => ({
-      addListener: (value2, listener) => listeners.current.set(value2, listener),
-      removeListener: (value2) => listeners.current.delete(value2)
-    }),
-    []
-  );
-  return /* @__PURE__ */ React64.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React64.createElement(SelectContainer, { $flex: flex }, /* @__PURE__ */ React64.createElement(
-    SelectElement,
-    {
-      id,
-      $flex: flex,
-      value,
-      onChange: useCallback23(
-        (event) => listeners.current.get(event.target.value)?.(),
-        [listeners]
-      ),
-      onPointerDown: (event) => event.stopPropagation()
-    },
-    optionElements
-  )), label && /* @__PURE__ */ React64.createElement(SelectLabel, { htmlFor: id }, label));
-});
-
-// src/components/SelectMenu.tsx
-import { DropdownChevronIcon } from "@noya-app/noya-icons";
-import * as Select3 from "@radix-ui/react-select";
-import React65, { memo as memo29 } from "react";
-import { styled as styled31 } from "styled-components";
-var readOnlyStyle = {
-  justifyContent: "flex-start",
-  textAlign: "left"
-};
-var flexStyle = {
-  flex: 1
-};
-var SelectMenu = memo29(function SelectMenu2({
+var SelectMenu = memo28(function SelectMenu2({
   id,
   style: style5,
   className,
@@ -14780,53 +14682,75 @@ var SelectMenu = memo29(function SelectMenu2({
   onSelect,
   placeholder,
   disabled,
-  readOnly
+  readOnly,
+  label,
+  open
 }) {
   const selectedItem = menuItems.find(
     (item) => typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
-  if (readOnly) {
-    return /* @__PURE__ */ React65.createElement(
+  const readOnlyButton = useMemo22(
+    () => /* @__PURE__ */ React64.createElement(
       Button,
       {
         id,
-        style: style5,
+        style: { ...style5, ...flexStyle },
         contentStyle: readOnlyStyle,
         className,
         disabled
       },
-      icon && /* @__PURE__ */ React65.createElement(React65.Fragment, null, renderIcon(icon), /* @__PURE__ */ React65.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
-      /* @__PURE__ */ React65.createElement("span", { style: flexStyle }, selectedItem?.title ?? value)
-    );
+      icon && /* @__PURE__ */ React64.createElement(React64.Fragment, null, renderIcon(icon), /* @__PURE__ */ React64.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ React64.createElement("span", { style: { ...flexStyle, ...textStyle } }, selectedItem?.title ?? value)
+    ),
+    [icon, id, style5, className, disabled, value, selectedItem]
+  );
+  const trigger = useMemo22(
+    () => /* @__PURE__ */ React64.createElement(Select.SelectTrigger, { asChild: true }, /* @__PURE__ */ React64.createElement(
+      Button,
+      {
+        id,
+        style: { ...textStyle, ...style5, ...flexStyle },
+        className,
+        disabled
+      },
+      icon && /* @__PURE__ */ React64.createElement(React64.Fragment, null, renderIcon(icon), /* @__PURE__ */ React64.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ React64.createElement("span", { style: flexStyle }, /* @__PURE__ */ React64.createElement(Select.Value, { placeholder })),
+      /* @__PURE__ */ React64.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
+      /* @__PURE__ */ React64.createElement(DropdownChevronIcon, null)
+    )),
+    [icon, id, style5, className, disabled, placeholder]
+  );
+  if (readOnly) {
+    return label ? /* @__PURE__ */ React64.createElement(Stack.V, { position: "relative" }, readOnlyButton, /* @__PURE__ */ React64.createElement(SelectLabel, { htmlFor: id }, label)) : readOnlyButton;
   }
-  return /* @__PURE__ */ React65.createElement(Select3.Root, { value, onValueChange: onSelect }, /* @__PURE__ */ React65.createElement(Select3.SelectTrigger, { asChild: true }, /* @__PURE__ */ React65.createElement(Button, { id, style: style5, className, disabled }, icon && /* @__PURE__ */ React65.createElement(React65.Fragment, null, renderIcon(icon), /* @__PURE__ */ React65.createElement(Spacer.Horizontal, { inline: true, size: 6 })), /* @__PURE__ */ React65.createElement("span", { style: flexStyle }, /* @__PURE__ */ React65.createElement(Select3.Value, { placeholder })), /* @__PURE__ */ React65.createElement(Spacer.Horizontal, { inline: true, size: 6 }), /* @__PURE__ */ React65.createElement(DropdownChevronIcon, null))), /* @__PURE__ */ React65.createElement(Select3.Portal, null, /* @__PURE__ */ React65.createElement(SelectContent, null, /* @__PURE__ */ React65.createElement(SelectViewport, null, menuItems.map((menuItem) => {
+  return /* @__PURE__ */ React64.createElement(Select.Root, { value, onValueChange: onSelect, open }, label ? /* @__PURE__ */ React64.createElement(Stack.V, { position: "relative", style: flexStyle }, trigger, /* @__PURE__ */ React64.createElement(SelectLabel, { htmlFor: id }, label)) : trigger, /* @__PURE__ */ React64.createElement(Select.Portal, null, /* @__PURE__ */ React64.createElement(SelectContent, null, /* @__PURE__ */ React64.createElement(SelectViewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
-      return /* @__PURE__ */ React65.createElement(StyledSeparator, null);
+      return /* @__PURE__ */ React64.createElement(StyledSeparator, null);
     }
     const value2 = menuItem.value ?? "";
-    return /* @__PURE__ */ React65.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
+    return /* @__PURE__ */ React64.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
   })))));
 });
-var SelectContent = styled31(Select3.Content)(styles.contentStyle);
-var SelectViewport = styled31(Select3.Viewport)({});
-var SelectItem = React65.forwardRef(
+var SelectContent = styled30(Select.Content)(styles.contentStyle);
+var SelectViewport = styled30(Select.Viewport)({});
+var SelectItem = React64.forwardRef(
   ({
     children: children2,
     icon,
     ...props
   }, forwardedRef) => {
-    return /* @__PURE__ */ React65.createElement(StyledItem2, { ...props, ref: forwardedRef }, icon && /* @__PURE__ */ React65.createElement(React65.Fragment, null, renderIcon(icon), /* @__PURE__ */ React65.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React65.createElement(Select3.ItemText, null, children2));
+    return /* @__PURE__ */ React64.createElement(StyledItem2, { ...props, ref: forwardedRef }, icon && /* @__PURE__ */ React64.createElement(React64.Fragment, null, renderIcon(icon), /* @__PURE__ */ React64.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React64.createElement(Select.ItemText, { style: textStyle }, children2));
   }
 );
-var StyledItem2 = styled31(Select3.Item)(styles.itemStyle);
-var StyledSeparator = styled31(Select3.Separator)(styles.separatorStyle);
+var StyledItem2 = styled30(Select.Item)(styles.itemStyle);
+var StyledSeparator = styled30(Select.Separator)(styles.separatorStyle);
 
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React66, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
-import styled32 from "styled-components";
-var StyledSlider = styled32(RadixSlider.Root)({
+import React65, { useCallback as useCallback23, useMemo as useMemo23 } from "react";
+import styled31 from "styled-components";
+var StyledSlider = styled31(RadixSlider.Root)({
   flex: "1",
   position: "relative",
   display: "flex",
@@ -14835,19 +14759,19 @@ var StyledSlider = styled32(RadixSlider.Root)({
   touchAction: "none",
   height: "16px"
 });
-var StyledTrack = styled32(RadixSlider.Track)(({ theme }) => ({
+var StyledTrack = styled31(RadixSlider.Track)(({ theme }) => ({
   backgroundColor: theme.colors.divider,
   position: "relative",
   flexGrow: 1,
   height: "2px"
 }));
-var StyledRange = styled32(RadixSlider.Range)(({ theme }) => ({
+var StyledRange = styled31(RadixSlider.Range)(({ theme }) => ({
   position: "absolute",
   backgroundColor: theme.colors.primary,
   borderRadius: "9999px",
   height: "100%"
 }));
-var StyledThumb2 = styled32(RadixSlider.Thumb)(({ theme }) => ({
+var StyledThumb2 = styled31(RadixSlider.Thumb)(({ theme }) => ({
   display: "block",
   width: "12px",
   height: "12px",
@@ -14869,13 +14793,13 @@ var Slider = function Slider2({
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const handleValueChange = useCallback24(
+  const handleValueChange = useCallback23(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React65.createElement(
     StyledSlider,
     {
       min,
@@ -14884,16 +14808,16 @@ var Slider = function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange
     },
-    /* @__PURE__ */ React66.createElement(StyledTrack, null, /* @__PURE__ */ React66.createElement(StyledRange, null)),
-    /* @__PURE__ */ React66.createElement(StyledThumb2, null)
+    /* @__PURE__ */ React65.createElement(StyledTrack, null, /* @__PURE__ */ React65.createElement(StyledRange, null)),
+    /* @__PURE__ */ React65.createElement(StyledThumb2, null)
   );
 };
 
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React67 from "react";
-import styled33 from "styled-components";
-var SwitchRoot = styled33(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
+import React66 from "react";
+import styled32 from "styled-components";
+var SwitchRoot = styled32(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
   all: "unset",
   width: 32,
   height: 19,
@@ -14910,7 +14834,7 @@ var SwitchRoot = styled33(SwitchPrimitive.Root)(({ theme, $colorScheme }) => ({
     backgroundColor: $colorScheme === "primary" ? theme.colors.primary : $colorScheme === "secondary" ? theme.colors.secondary : void 0
   }
 }));
-var SwitchThumb = styled33(SwitchPrimitive.Thumb)({
+var SwitchThumb = styled32(SwitchPrimitive.Thumb)({
   display: "block",
   width: 15,
   height: 15,
@@ -14927,7 +14851,7 @@ var Switch = function Switch2({
   colorScheme = "normal",
   disabled
 }) {
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React66.createElement(
     SwitchRoot,
     {
       $colorScheme: colorScheme,
@@ -14937,14 +14861,14 @@ var Switch = function Switch2({
         onChange(newValue);
       }
     },
-    /* @__PURE__ */ React67.createElement(SwitchThumb, null)
+    /* @__PURE__ */ React66.createElement(SwitchThumb, null)
   );
 };
 
 // src/components/TextArea.tsx
-import React68, { forwardRef as forwardRef18, memo as memo30, useCallback as useCallback25, useEffect as useEffect16, useRef as useRef20 } from "react";
-import styled34 from "styled-components";
-var TextAreaElement = styled34.textarea(({ theme }) => ({
+import React67, { forwardRef as forwardRef18, memo as memo29, useCallback as useCallback24, useEffect as useEffect15, useRef as useRef19 } from "react";
+import styled33 from "styled-components";
+var TextAreaElement = styled33.textarea(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.text,
   background: theme.colors.inputBackground,
@@ -14968,8 +14892,8 @@ var TextAreaElement = styled34.textarea(({ theme }) => ({
   resize: "none"
 }));
 var useAutoResize = (value) => {
-  const textareaRef = useRef20(null);
-  useEffect16(() => {
+  const textareaRef = useRef19(null);
+  useEffect15(() => {
     if (!textareaRef.current)
       return;
     textareaRef.current.style.height = "auto";
@@ -14977,25 +14901,25 @@ var useAutoResize = (value) => {
   }, [value]);
   return textareaRef;
 };
-var AutoResizingTextArea = memo30(
+var AutoResizingTextArea = memo29(
   forwardRef18(function AutoResizingTextArea2({
     value,
     onChangeText,
     ...rest
   }, forwardedRef) {
     const ref = useAutoResize(value || rest.placeholder || "");
-    const handleChange = useCallback25(
+    const handleChange = useCallback24(
       (event) => onChangeText(event.target.value),
       [onChangeText]
     );
-    const handleRef = useCallback25(
+    const handleRef = useCallback24(
       (value2) => {
         ref.current = value2;
         assignRef(forwardedRef, value2);
       },
       [ref, forwardedRef]
     );
-    return /* @__PURE__ */ React68.createElement(
+    return /* @__PURE__ */ React67.createElement(
       TextAreaElement,
       {
         ref: handleRef,
@@ -15008,11 +14932,11 @@ var AutoResizingTextArea = memo30(
 );
 
 // src/components/TreeView.tsx
-import React69, {
+import React68, {
   forwardRef as forwardRef19,
-  memo as memo31,
-  useCallback as useCallback26,
-  useContext as useContext12
+  memo as memo30,
+  useCallback as useCallback25,
+  useContext as useContext11
 } from "react";
 var TreeRow = forwardRef19(function TreeRow2({
   icon,
@@ -15021,34 +14945,40 @@ var TreeRow = forwardRef19(function TreeRow2({
   children: children2,
   ...rest
 }, forwardedRef) {
-  const { expandable } = useContext12(ListView.RowContext);
-  const handleClickChevron = useCallback26(
+  const { expandable } = useContext11(ListView.RowContext);
+  const handleClickChevron = useCallback25(
     (event) => {
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React69.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React69.createElement(React69.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React69.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React68.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React68.createElement(React68.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React68.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React68.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React69.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React69.createElement(React69.Fragment, null, renderIcon(icon), /* @__PURE__ */ React69.createElement(Spacer.Horizontal, { size: 10 })), children2);
+  ), /* @__PURE__ */ React68.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React68.createElement(React68.Fragment, null, renderIcon(icon), /* @__PURE__ */ React68.createElement(Spacer.Horizontal, { size: 10 })), children2);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = memo31(TreeRow);
+  TreeView2.Row = memo30(TreeRow);
 })(TreeView || (TreeView = {}));
 
 // src/components/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React71, { forwardRef as forwardRef20, useImperativeHandle as useImperativeHandle4, useRef as useRef22 } from "react";
+import React70, {
+  forwardRef as forwardRef20,
+  useCallback as useCallback26,
+  useImperativeHandle as useImperativeHandle4,
+  useRef as useRef21,
+  useState as useState22
+} from "react";
 import {
   Panel,
   PanelGroup,
@@ -15056,10 +14986,10 @@ import {
 } from "react-resizable-panels";
 
 // src/hooks/usePreservePanelSize.tsx
-import { useLayoutEffect as useLayoutEffect9, useRef as useRef21 } from "react";
+import { useLayoutEffect as useLayoutEffect9, useRef as useRef20 } from "react";
 
 // src/hooks/useWindowSize.tsx
-import { useEffect as useEffect17, useState as useState21 } from "react";
+import { useEffect as useEffect16, useState as useState21 } from "react";
 function useWindowSize() {
   const [size3, setSize] = useState21(
     typeof window === "undefined" ? { width: 0, height: 0 } : {
@@ -15067,7 +14997,7 @@ function useWindowSize() {
       height: window.innerHeight
     }
   );
-  useEffect17(() => {
+  useEffect16(() => {
     const handleResize = () => setSize({
       width: window.innerWidth,
       height: window.innerHeight
@@ -15085,7 +15015,7 @@ var RIGHT_SIDEBAR_ID = "editor-right-sidebar";
 var CONTENT_AREA_ID = "editor-content-area";
 function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
   const windowSize = useWindowSize();
-  const layoutRef = useRef21();
+  const layoutRef = useRef20();
   useLayoutEffect9(() => {
     const panelGroup = document.querySelector(
       `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
@@ -15214,10 +15144,18 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
   const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
   const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
   const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
-  const panelGroupRef = useRef22(null);
-  const leftSidebarRef = useRef22(null);
-  const rightSidebarRef = useRef22(null);
-  usePreservePanelSize(panelGroupRef, onChangeLayoutState);
+  const panelGroupRef = useRef21(null);
+  const leftSidebarRef = useRef21(null);
+  const rightSidebarRef = useRef21(null);
+  const [internalLayoutState, setInternalLayoutState] = useState22(null);
+  const handleChangeLayoutState = useCallback26(
+    (state) => {
+      setInternalLayoutState(state);
+      onChangeLayoutState?.(state);
+    },
+    [onChangeLayoutState]
+  );
+  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
   const theme = useDesignSystemTheme();
   useImperativeHandle4(forwardedRef, () => ({
     setLeftSidebarExpanded: (expanded) => {
@@ -15276,7 +15214,7 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "div",
     {
       id,
@@ -15288,7 +15226,7 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
         ...style5
       }
     },
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React70.createElement(
       PanelGroup,
       {
         ref: panelGroupRef,
@@ -15297,7 +15235,7 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(
+      hasLeftSidebar && /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(
         Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -15313,8 +15251,8 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
             position: "relative"
           }
         },
-        leftPanelContent
-      ), /* @__PURE__ */ React71.createElement(
+        internalLayoutState?.leftSidebarCollapsed ? null : leftPanelContent
+      ), /* @__PURE__ */ React70.createElement(
         PanelResizeHandle,
         {
           style: {
@@ -15325,7 +15263,7 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
           }
         }
       )),
-      /* @__PURE__ */ React71.createElement(
+      /* @__PURE__ */ React70.createElement(
         Panel,
         {
           id: CONTENT_AREA_ID,
@@ -15340,7 +15278,7 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(
+      hasRightSidebar && /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(
         PanelResizeHandle,
         {
           style: {
@@ -15350,7 +15288,7 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
             backgroundColor: theme.colors.divider
           }
         }
-      ), /* @__PURE__ */ React71.createElement(
+      ), /* @__PURE__ */ React70.createElement(
         Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -15365,13 +15303,13 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
             position: "relative"
           }
         },
-        rightPanelContent
+        internalLayoutState?.rightSidebarCollapsed ? null : rightPanelContent
       ))
     )
   );
 });
 var WorkspaceLayout = forwardRef20(function WorkspaceLayout2(props, forwardedRef) {
-  return /* @__PURE__ */ React71.createElement(DesignSystemThemeProvider, null, /* @__PURE__ */ React71.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef }));
+  return /* @__PURE__ */ React70.createElement(DesignSystemThemeProvider, null, /* @__PURE__ */ React70.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef }));
 });
 
 // src/hooks/usePlatform.ts
@@ -15416,11 +15354,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React72, { memo as memo32, useCallback as useCallback27 } from "react";
+import React71, { memo as memo31, useCallback as useCallback27 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = memo32(function DimensionInput2({
+var DimensionInput = memo31(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -15438,7 +15376,7 @@ var DimensionInput = memo32(function DimensionInput2({
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React72.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React71.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ React71.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -15447,7 +15385,7 @@ var DimensionInput = memo32(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ React72.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ React71.createElement(InputField.Label, null, label));
 });
 
 // src/components/InspectorPrimitives.tsx
@@ -15466,20 +15404,20 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React73, { memo as memo33 } from "react";
-import styled35, { useTheme as useTheme4 } from "styled-components";
-var Section2 = styled35.div(({ theme, $padding = "10px", $gap }) => ({
+import React72, { memo as memo32 } from "react";
+import styled34, { useTheme as useTheme4 } from "styled-components";
+var Section2 = styled34.div(({ theme, $padding = "10px", $gap }) => ({
   flex: "0 0 auto",
   display: "flex",
   flexDirection: "column",
   padding: $padding,
   gap: $gap
 }));
-var SectionHeader = styled35.div(({ theme }) => ({
+var SectionHeader = styled34.div(({ theme }) => ({
   display: "flex",
   alignItems: "center"
 }));
-var Title3 = styled35.div(({ theme, $textStyle }) => ({
+var Title3 = styled34.div(({ theme, $textStyle }) => ({
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
@@ -15492,7 +15430,7 @@ var Title3 = styled35.div(({ theme, $textStyle }) => ({
     fontWeight: "bold"
   }
 }));
-var Row2 = styled35.div(
+var Row2 = styled34.div(
   ({ theme, $gap }) => ({
     flex: "1",
     display: "flex",
@@ -15501,26 +15439,26 @@ var Row2 = styled35.div(
     gap: $gap
   })
 );
-var Column2 = styled35.div(({ theme }) => ({
+var Column2 = styled34.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
   gap: "4px"
 }));
-var Checkbox = styled35.input(({ theme }) => ({
+var Checkbox = styled34.input(({ theme }) => ({
   margin: 0
 }));
-var Text3 = styled35.span(({ theme }) => ({
+var Text3 = styled34.span(({ theme }) => ({
   ...theme.textStyles.small
 }));
-var VerticalSeparator = () => /* @__PURE__ */ React73.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
-var HorizontalSeparator = () => /* @__PURE__ */ React73.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
-var SliderRowLabel = styled35.span(({ theme }) => ({
+var VerticalSeparator = () => /* @__PURE__ */ React72.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
+var HorizontalSeparator = () => /* @__PURE__ */ React72.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
+var SliderRowLabel = styled34.span(({ theme }) => ({
   ...theme.textStyles.small,
   color: theme.colors.textMuted,
   marginBottom: "-6px"
 }));
-var RowLabel = styled35.span(({ theme, $textStyle }) => ({
+var RowLabel = styled34.span(({ theme, $textStyle }) => ({
   // marginBottom: '6px',
   display: "flex",
   ...$textStyle ? {
@@ -15534,7 +15472,7 @@ var RowLabel = styled35.span(({ theme, $textStyle }) => ({
   // Button height
   alignItems: "center"
 }));
-var LabeledRow = memo33(function LabeledRow2({
+var LabeledRow = memo32(function LabeledRow2({
   id,
   children: children2,
   label,
@@ -15542,13 +15480,13 @@ var LabeledRow = memo33(function LabeledRow2({
   gap,
   right
 }) {
-  return /* @__PURE__ */ React73.createElement(Row2, { id }, /* @__PURE__ */ React73.createElement(Column2, null, /* @__PURE__ */ React73.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React73.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React73.createElement(Row2, { $gap: gap }, children2)));
+  return /* @__PURE__ */ React72.createElement(Row2, { id }, /* @__PURE__ */ React72.createElement(Column2, null, /* @__PURE__ */ React72.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React72.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React72.createElement(Row2, { $gap: gap }, children2)));
 });
-var LabeledSliderRow = memo33(function LabeledRow3({
+var LabeledSliderRow = memo32(function LabeledRow3({
   children: children2,
   label
 }) {
-  return /* @__PURE__ */ React73.createElement(Row2, null, /* @__PURE__ */ React73.createElement(Column2, null, /* @__PURE__ */ React73.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React73.createElement(Row2, null, children2)));
+  return /* @__PURE__ */ React72.createElement(Row2, null, /* @__PURE__ */ React72.createElement(Column2, null, /* @__PURE__ */ React72.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React72.createElement(Row2, null, children2)));
 });
 export {
   ActivityIndicator,
@@ -15558,6 +15496,7 @@ export {
   Body,
   Button,
   ButtonElement,
+  CONTENT_AREA_ID,
   Chip,
   CloseButtonContainer,
   CompletionMenu,
@@ -15572,6 +15511,7 @@ export {
   DividerVertical,
   DraggableMenuButton,
   DropdownMenu,
+  EDITOR_PANEL_GROUP_ID,
   FillInputField,
   FillPreviewBackground,
   FloatingWindow,
@@ -15595,21 +15535,21 @@ export {
   InspectorPrimitives_exports as InspectorPrimitives,
   Italic,
   KeyboardShortcut,
+  LEFT_SIDEBAR_ID,
   Label,
   LabeledElementView,
   ListView,
   PatternPreviewBackground,
   Popover,
   Progress,
+  RIGHT_SIDEBAR_ID,
   RadioGroup,
   Row,
   SEPARATOR_ITEM,
   SUPPORTED_CANVAS_UPLOAD_TYPES,
   SUPPORTED_IMAGE_UPLOAD_TYPES,
   ScrollArea,
-  Select,
   SelectMenu,
-  SelectOption,
   Slider,
   Small,
   Sortable,
@@ -15652,6 +15592,7 @@ export {
   useOpenInputDialog,
   usePlatform,
   usePlatformModKey,
+  usePreservePanelSize,
   withSeparatorElements
 };
 /*! Bundled license information: