@homebound/beam 2.393.0 → 2.394.1

package/dist/index.cjs

@@ -12161,7 +12161,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.$,
@@ -12188,6 +12188,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.$;
@@ -15620,7 +15621,7 @@ var import_framer_motion2 = require("framer-motion");
 var import_react84 = require("react");
 var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
 var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
-function RightSidebar({ content }) {
+function RightSidebar({ content, headerHeightPx: headerHeightPx2 }) {
   const [selectedIcon, setSelectedIcon] = (0, import_react84.useState)(void 0);
   const tid = useTestIds({}, "rightSidebar");
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
@@ -15642,23 +15643,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__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.relative.z0.px3.$, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.absolute.leftPx(-24).top0.$, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-              IconButton,
-              {
-                bgColor: "rgba(255,255,255,1)" /* White */,
-                circle: true,
-                onClick: () => setSelectedIcon(void 0),
-                icon: "x",
-                inc: 3.5
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("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__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.sticky.top0.bgWhite.$, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.absolute.leftPx(-24).top0.df.fdc.aic.$, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                IconButton,
+                {
+                  bgColor: "rgba(255,255,255,1)" /* White */,
+                  circle: true,
+                  onClick: () => setSelectedIcon(void 0),
+                  icon: "x",
+                  inc: 3.5
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: Css.absolute.topPx(48).h("calc(100vh - 168px)").wPx(1).bgGray300.$ })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: Css.df.aic.jcfe.gap2.mb3.$, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: Css.df.aic.jcfe.gap2.mb3.$, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) }),
-          selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { ...tid.content, children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
+          selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { ...tid.content, css: Css.pl3.$, children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
         ] })
       },
       "rightSidebar"
@@ -15718,7 +15721,7 @@ function FormPageLayoutComponent(props) {
       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
-      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("aside", { css: Css.gr(2).gc("3 / 4").sticky.topPx(headerHeightPx).$, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(RightSidebar, { content: rightSideBar }) })
+      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("aside", { css: Css.gr(2).gc("3 / 4").sticky.topPx(headerHeightPx).$, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(RightSidebar, { content: rightSideBar, headerHeightPx }) })
     ] }) })
   );
 }