@hanzogui/demos 3.0.6 → 4.4.0

package/dist/cjs/SheetDemo.cjs

@@ -2,138 +2,143 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var SheetDemo_exports = {};
 __export(SheetDemo_exports, {
   SheetDemo: () => SheetDemo
 });
 module.exports = __toCommonJS(SheetDemo_exports);
-var import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
-  import_sheet = require("@hanzogui/sheet"),
-  import_react = __toESM(require("react"), 1),
-  import_gui = require("@hanzo/gui"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const spModes = ["percent", "constant", "fit", "mixed"],
-  SheetDemo = () => {
-    const [position, setPosition] = import_react.default.useState(0),
-      [open, setOpen] = import_react.default.useState(!1),
-      [modal, setModal] = import_react.default.useState(!0),
-      [innerOpen, setInnerOpen] = import_react.default.useState(!1),
-      [snapPointsMode, setSnapPointsMode] = import_react.default.useState("percent"),
-      [mixedFitDemo, setMixedFitDemo] = import_react.default.useState(!1),
-      isPercent = snapPointsMode === "percent",
-      isConstant = snapPointsMode === "constant",
-      isFit = snapPointsMode === "fit",
-      isMixed = snapPointsMode === "mixed",
-      snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+var import_lucide_icons_2 = require("@hanzogui/lucide-icons-2");
+var import_sheet = require("@hanzogui/sheet");
+var import_react = __toESM(require("react"), 1);
+var import_gui = require("@hanzo/gui");
+var import_jsx_runtime = require("react/jsx-runtime");
+const spModes = ["percent", "constant", "fit", "mixed"];
+const SheetDemo = () => {
+  const [position, setPosition] = import_react.default.useState(0);
+  const [open, setOpen] = import_react.default.useState(false);
+  const [modal, setModal] = import_react.default.useState(true);
+  const [innerOpen, setInnerOpen] = import_react.default.useState(false);
+  const [snapPointsMode, setSnapPointsMode] = import_react.default.useState("percent");
+  const [mixedFitDemo, setMixedFitDemo] = import_react.default.useState(false);
+  const isPercent = snapPointsMode === "percent";
+  const isConstant = snapPointsMode === "constant";
+  const isFit = snapPointsMode === "fit";
+  const isMixed = snapPointsMode === "mixed";
+  const snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
         gap: "$4",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
-          gap: "$4",
-          $maxMd: {
-            flexDirection: "column",
-            items: "center"
-          },
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-            onPress: () => setOpen(!0),
-            children: "Open"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-            onPress: () => setModal(x => !x),
-            children: modal ? "Type: Modal" : "Type: Inline"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-            onPress: () => setSnapPointsMode(prev => spModes[(spModes.indexOf(prev) + 1) % spModes.length]),
-            children: `Mode: ${{
-              percent: "Percentage",
-              constant: "Constant",
-              fit: "Fit",
-              mixed: "Mixed"
-            }[snapPointsMode]}`
-          })]
-        }), isMixed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-          onPress: () => setMixedFitDemo(x => !x),
-          children: `Snap Points: ${JSON.stringify(snapPoints)}`
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
-          py: "$2.5",
-          justify: "center",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
-            children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`
-          })
+        $maxMd: {
+          flexDirection: "column",
+          items: "center"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          onPress: () => setOpen(true),
+          children: "Open"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          onPress: () => setModal(x => !x),
+          children: modal ? "Type: Modal" : "Type: Inline"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          onPress: () => setSnapPointsMode(prev => spModes[(spModes.indexOf(prev) + 1) % spModes.length]),
+          children: `Mode: ${{
+            percent: "Percentage",
+            constant: "Constant",
+            fit: "Fit",
+            mixed: "Mixed"
+          }[snapPointsMode]}`
         })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
-        modal,
-        open,
-        onOpenChange: setOpen,
-        snapPoints,
-        snapPointsMode,
-        dismissOnSnapToBottom: !0,
-        position,
-        onPositionChange: setPosition,
-        zIndex: 1e5,
-        transition: "medium",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
-          transition: "lazy",
-          bg: "$shadow6",
-          enterStyle: {
-            opacity: 0
-          },
-          exitStyle: {
-            opacity: 0
-          }
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Frame, {
-          p: "$4",
-          justify: "center",
-          items: "center",
-          gap: "$5",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SheetContents, {
+      }), isMixed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        onPress: () => setMixedFitDemo(x => !x),
+        children: `Snap Points: ${JSON.stringify(snapPoints)}`
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+        py: "$2.5",
+        justify: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+          children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
+      modal,
+      open,
+      onOpenChange: setOpen,
+      snapPoints,
+      snapPointsMode,
+      dismissOnSnapToBottom: true,
+      position,
+      onPositionChange: setPosition,
+      zIndex: 1e5,
+      transition: "medium",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
+        transition: "lazy",
+        bg: "$shadow6",
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        }
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Frame, {
+        p: "$4",
+        justify: "center",
+        items: "center",
+        gap: "$5",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SheetContents, {
+          ...{
             modal,
             isPercent,
             innerOpen,
             setInnerOpen,
             setOpen
-          })
-        })]
+          }
+        })
       })]
-    });
-  },
-  SheetContents = (0, import_react.memo)(({
-    modal,
-    isPercent,
-    innerOpen,
-    setInnerOpen,
-    setOpen
-  }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    })]
+  });
+};
+const SheetContents = (0, import_react.memo)(({
+  modal,
+  isPercent,
+  innerOpen,
+  setInnerOpen,
+  setOpen
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
       size: "$6",
-      circular: !0,
+      circular: true,
       icon: import_lucide_icons_2.ChevronDown,
-      onPress: () => setOpen(!1)
+      onPress: () => setOpen(false)
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Input, {
       width: 200
     }), modal && isPercent && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
@@ -142,18 +147,19 @@ const spModes = ["percent", "constant", "fit", "mixed"],
         onOpenChange: setInnerOpen
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
         size: "$6",
-        circular: !0,
+        circular: true,
         icon: import_lucide_icons_2.ChevronUp,
-        onPress: () => setInnerOpen(!0)
+        onPress: () => setInnerOpen(true)
       })]
     })]
-  }));
+  });
+});
 function InnerSheet(props) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
     transition: "medium",
-    modal: !0,
+    modal: true,
     snapPoints: [90],
-    dismissOnSnapToBottom: !0,
+    dismissOnSnapToBottom: true,
     ...props,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
       transition: "medium",
@@ -175,10 +181,10 @@ function InnerSheet(props) {
           gap: "$8",
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
             size: "$6",
-            circular: !0,
+            circular: true,
             self: "center",
             icon: import_lucide_icons_2.ChevronDown,
-            onPress: () => props.onOpenChange?.(!1)
+            onPress: () => props.onOpenChange?.(false)
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H2, {
             children: "Hello world"
           }), [1, 2, 3, 4, 5, 6, 7, 8].map(i => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {

package/dist/cjs/SheetDemo.native.js

@@ -4,179 +4,181 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var SheetDemo_exports = {};
 __export(SheetDemo_exports, {
   SheetDemo: () => SheetDemo
 });
 module.exports = __toCommonJS(SheetDemo_exports);
-var import_jsx_runtime = require("react/jsx-runtime"),
-  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
-  import_sheet = require("@hanzogui/sheet"),
-  import_react = __toESM(require("react"), 1),
-  import_gui = require("@hanzo/gui"),
-  spModes = ["percent", "constant", "fit", "mixed"],
-  SheetDemo = function () {
-    var [position, setPosition] = import_react.default.useState(0),
-      [open, setOpen] = import_react.default.useState(!1),
-      [modal, setModal] = import_react.default.useState(!0),
-      [innerOpen, setInnerOpen] = import_react.default.useState(!1),
-      [snapPointsMode, setSnapPointsMode] = import_react.default.useState("percent"),
-      [mixedFitDemo, setMixedFitDemo] = import_react.default.useState(!1),
-      isPercent = snapPointsMode === "percent",
-      isConstant = snapPointsMode === "constant",
-      isFit = snapPointsMode === "fit",
-      isMixed = snapPointsMode === "mixed",
-      snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_icons_2 = require("@hanzogui/lucide-icons-2");
+var import_sheet = require("@hanzogui/sheet");
+var import_react = __toESM(require("react"), 1);
+var import_gui = require("@hanzo/gui");
+var spModes = ["percent", "constant", "fit", "mixed"];
+var SheetDemo = function () {
+  var [position, setPosition] = import_react.default.useState(0);
+  var [open, setOpen] = import_react.default.useState(false);
+  var [modal, setModal] = import_react.default.useState(true);
+  var [innerOpen, setInnerOpen] = import_react.default.useState(false);
+  var [snapPointsMode, setSnapPointsMode] = import_react.default.useState("percent");
+  var [mixedFitDemo, setMixedFitDemo] = import_react.default.useState(false);
+  var isPercent = snapPointsMode === "percent";
+  var isConstant = snapPointsMode === "constant";
+  var isFit = snapPointsMode === "fit";
+  var isMixed = snapPointsMode === "mixed";
+  var snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
         gap: "$4",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
-          gap: "$4",
-          $maxMd: {
-            flexDirection: "column",
-            items: "center"
+        $maxMd: {
+          flexDirection: "column",
+          items: "center"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          onPress: function () {
+            return setOpen(true);
           },
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-            onPress: function () {
-              return setOpen(!0);
-            },
-            children: "Open"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-            onPress: function () {
-              return setModal(function (x) {
-                return !x;
-              });
-            },
-            children: modal ? "Type: Modal" : "Type: Inline"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-            onPress: function () {
-              return setSnapPointsMode(function (prev) {
-                return spModes[(spModes.indexOf(prev) + 1) % spModes.length];
-              });
-            },
-            children: `Mode: ${{
-              percent: "Percentage",
-              constant: "Constant",
-              fit: "Fit",
-              mixed: "Mixed"
-            }[snapPointsMode]}`
-          })]
-        }), isMixed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          children: "Open"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
           onPress: function () {
-            return setMixedFitDemo(function (x) {
+            return setModal(function (x) {
               return !x;
             });
           },
-          children: `Snap Points: ${JSON.stringify(snapPoints)}`
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
-          py: "$2.5",
-          justify: "center",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
-            children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`
-          })
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
-        modal,
-        open,
-        onOpenChange: setOpen,
-        snapPoints,
-        snapPointsMode,
-        dismissOnSnapToBottom: !0,
-        position,
-        onPositionChange: setPosition,
-        zIndex: 1e5,
-        transition: "medium",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
-          transition: "lazy",
-          bg: "$shadow6",
-          enterStyle: {
-            opacity: 0
+          children: modal ? "Type: Modal" : "Type: Inline"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+          onPress: function () {
+            return setSnapPointsMode(function (prev) {
+              return spModes[(spModes.indexOf(prev) + 1) % spModes.length];
+            });
           },
-          exitStyle: {
-            opacity: 0
-          }
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Frame, {
-          p: "$4",
-          justify: "center",
-          items: "center",
-          gap: "$5",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SheetContents, {
-            modal,
-            isPercent,
-            innerOpen,
-            setInnerOpen,
-            setOpen
-          })
+          children: `Mode: ${{
+            percent: "Percentage",
+            constant: "Constant",
+            fit: "Fit",
+            mixed: "Mixed"
+          }[snapPointsMode]}`
         })]
+      }), isMixed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+        onPress: function () {
+          return setMixedFitDemo(function (x) {
+            return !x;
+          });
+        },
+        children: `Snap Points: ${JSON.stringify(snapPoints)}`
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+        py: "$2.5",
+        justify: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+          children: `Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`
+        })
       })]
-    });
-  },
-  SheetContents = /* @__PURE__ */(0, import_react.memo)(function (param) {
-    var {
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
       modal,
-      isPercent,
-      innerOpen,
-      setInnerOpen,
-      setOpen
-    } = param;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      open,
+      onOpenChange: setOpen,
+      snapPoints,
+      snapPointsMode,
+      dismissOnSnapToBottom: true,
+      position,
+      onPositionChange: setPosition,
+      zIndex: 1e5,
+      transition: "medium",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
+        transition: "lazy",
+        bg: "$shadow6",
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        }
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Frame, {
+        p: "$4",
+        justify: "center",
+        items: "center",
+        gap: "$5",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SheetContents, {
+          modal,
+          isPercent,
+          innerOpen,
+          setInnerOpen,
+          setOpen
+        })
+      })]
+    })]
+  });
+};
+var SheetContents = /* @__PURE__ */(0, import_react.memo)(function (param) {
+  var {
+    modal,
+    isPercent,
+    innerOpen,
+    setInnerOpen,
+    setOpen
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
+      size: "$6",
+      circular: true,
+      icon: import_lucide_icons_2.ChevronDown,
+      onPress: function () {
+        return setOpen(false);
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Input, {
+      width: 200
+    }), modal && isPercent && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(InnerSheet, {
+        open: innerOpen,
+        onOpenChange: setInnerOpen
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
         size: "$6",
-        circular: !0,
-        icon: import_lucide_icons_2.ChevronDown,
+        circular: true,
+        icon: import_lucide_icons_2.ChevronUp,
         onPress: function () {
-          return setOpen(!1);
+          return setInnerOpen(true);
         }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Input, {
-        width: 200
-      }), modal && isPercent && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(InnerSheet, {
-          open: innerOpen,
-          onOpenChange: setInnerOpen
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
-          size: "$6",
-          circular: !0,
-          icon: import_lucide_icons_2.ChevronUp,
-          onPress: function () {
-            return setInnerOpen(!0);
-          }
-        })]
       })]
-    });
+    })]
   });
+});
 function InnerSheet(props) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_sheet.Sheet, {
     transition: "medium",
-    modal: !0,
+    modal: true,
     snapPoints: [90],
-    dismissOnSnapToBottom: !0,
+    dismissOnSnapToBottom: true,
     ...props,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {
       transition: "medium",
@@ -198,12 +200,12 @@ function InnerSheet(props) {
           gap: "$8",
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Button, {
             size: "$6",
-            circular: !0,
+            circular: true,
             self: "center",
             icon: import_lucide_icons_2.ChevronDown,
             onPress: function () {
               var _props_onOpenChange;
-              return (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, !1);
+              return (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, false);
             }
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H2, {
             children: "Hello world"