@homebound/beam 2.393.0 → 2.394.1

package/dist/index.d.cts

@@ -7716,11 +7716,12 @@ type SidebarContentProps = {
 };
 type RightSidebarProps = {
     content: SidebarContentProps[];
+    headerHeightPx: number;
 };
 /** Exporting this value allows layout components to coordinate responsive column sizing
  * while avoiding layout shift when the sidebar is opened */
 declare const RIGHT_SIDEBAR_MIN_WIDTH = "250px";
-declare function RightSidebar({ content }: RightSidebarProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function RightSidebar({ content, headerHeightPx }: RightSidebarProps): _emotion_react_jsx_runtime.JSX.Element;
 
 type HeaderBreadcrumb = {
     href: string;

package/dist/index.d.ts

@@ -7716,11 +7716,12 @@ type SidebarContentProps = {
 };
 type RightSidebarProps = {
     content: SidebarContentProps[];
+    headerHeightPx: number;
 };
 /** Exporting this value allows layout components to coordinate responsive column sizing
  * while avoiding layout shift when the sidebar is opened */
 declare const RIGHT_SIDEBAR_MIN_WIDTH = "250px";
-declare function RightSidebar({ content }: RightSidebarProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function RightSidebar({ content, headerHeightPx }: RightSidebarProps): _emotion_react_jsx_runtime.JSX.Element;
 
 type HeaderBreadcrumb = {
     href: string;

package/dist/index.js

@@ -11798,7 +11798,7 @@ function Switch(props) {
           {
             "aria-hidden": "true",
             css: {
-              ...Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
+              ...Css.wPx(toggleWidth(compact)).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
               ...isHovered && switchHoverStyles,
               ...isKeyboardFocus && switchFocusStyles,
               ...isDisabled && Css.bgGray300.$,
@@ -11825,6 +11825,7 @@ function Switch(props) {
   );
 }
 var toggleHeight = (isCompact) => isCompact ? 16 : 24;
+var toggleWidth = (isCompact) => isCompact ? 32 : 40;
 var circleDiameter = (isCompact) => isCompact ? 12 : 20;
 var switchHoverStyles = Css.bgGray400.$;
 var switchFocusStyles = Css.bshFocus.$;
@@ -15257,7 +15258,7 @@ import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-m
 import { useState as useState31 } from "react";
 import { Fragment as Fragment21, jsx as jsx119, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
-function RightSidebar({ content }) {
+function RightSidebar({ content, headerHeightPx: headerHeightPx2 }) {
   const [selectedIcon, setSelectedIcon] = useState31(void 0);
   const tid = useTestIds({}, "rightSidebar");
   return /* @__PURE__ */ jsxs57(Fragment21, { children: [
@@ -15279,23 +15280,25 @@ function RightSidebar({ content }) {
         animate: { x: 0, opacity: 1 },
         transition: { delay: 0.2, ease: [0.51, 0.92, 0.24, 1], duration: 0.3 },
         exit: { transition: { ease: "linear", duration: 0.2 }, x: "100%" },
-        css: Css.w100.mw(RIGHT_SIDEBAR_MIN_WIDTH).z0.$,
-        children: /* @__PURE__ */ jsxs57("div", { css: Css.relative.z0.px3.$, children: [
-          /* @__PURE__ */ jsxs57("div", { css: Css.absolute.leftPx(-24).top0.$, children: [
-            /* @__PURE__ */ jsx119(
-              IconButton,
-              {
-                bgColor: "rgba(255,255,255,1)" /* White */,
-                circle: true,
-                onClick: () => setSelectedIcon(void 0),
-                icon: "x",
-                inc: 3.5
-              }
-            ),
-            /* @__PURE__ */ jsx119("div", { css: Css.absolute.topPx(48).leftPx(23).h("calc(100vh - 168px)").wPx(1).bgGray300.$ })
+        css: Css.w100.mw(RIGHT_SIDEBAR_MIN_WIDTH).z0.maxh(`calc(100vh - ${headerHeightPx2}px)`).oya.pl4.pr3.$,
+        children: /* @__PURE__ */ jsxs57(Fragment21, { children: [
+          /* @__PURE__ */ jsxs57("div", { css: Css.sticky.top0.bgWhite.$, children: [
+            /* @__PURE__ */ jsxs57("div", { css: Css.absolute.leftPx(-24).top0.df.fdc.aic.$, children: [
+              /* @__PURE__ */ jsx119(
+                IconButton,
+                {
+                  bgColor: "rgba(255,255,255,1)" /* White */,
+                  circle: true,
+                  onClick: () => setSelectedIcon(void 0),
+                  icon: "x",
+                  inc: 3.5
+                }
+              ),
+              /* @__PURE__ */ jsx119("div", { css: Css.absolute.topPx(48).h("calc(100vh - 168px)").wPx(1).bgGray300.$ })
+            ] }),
+            /* @__PURE__ */ jsx119("div", { css: Css.df.aic.jcfe.gap2.mb3.$, children: /* @__PURE__ */ jsx119(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
           ] }),
-          /* @__PURE__ */ jsx119("div", { css: Css.df.aic.jcfe.gap2.mb3.$, children: /* @__PURE__ */ jsx119(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) }),
-          selectedIcon && /* @__PURE__ */ jsx119("div", { ...tid.content, children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
+          selectedIcon && /* @__PURE__ */ jsx119("div", { ...tid.content, css: Css.pl3.$, children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
         ] })
       },
       "rightSidebar"
@@ -15355,7 +15358,7 @@ function FormPageLayoutComponent(props) {
       /* @__PURE__ */ jsx121(PageHeader, { ...props, ...tids.pageHeader }),
       /* @__PURE__ */ jsx121(LeftNav, { sectionsWithRefs, ...tids }),
       /* @__PURE__ */ jsx121(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ jsx121("aside", { css: Css.gr(2).gc("3 / 4").sticky.topPx(headerHeightPx).$, children: /* @__PURE__ */ jsx121(RightSidebar, { content: rightSideBar }) })
+      rightSideBar && /* @__PURE__ */ jsx121("aside", { css: Css.gr(2).gc("3 / 4").sticky.topPx(headerHeightPx).$, children: /* @__PURE__ */ jsx121(RightSidebar, { content: rightSideBar, headerHeightPx }) })
     ] }) })
   );
 }