@viasat/beam-react 2.41.0 → 2.43.0

package/lib/wip/Panel/Header/Panel.Header.es.js

@@ -1,47 +1,48 @@
-import { jsxs as p, Fragment as f, jsx as o } from "react/jsx-runtime";
-import l from "clsx";
-import { g as d } from "../../../../chunks/classNames.ZWNk1hey.js";
+import { jsxs as c, Fragment as C, jsx as r } from "react/jsx-runtime";
+import g from "clsx";
+import { g as x } from "../../../../chunks/classNames.ZWNk1hey.js";
 import "../../../../chunks/constants.Cruz2A1w.js";
-import { Divider as c } from "../../../Divider/Divider.es.js";
-import { Box as C } from "../../../Box/Box.es.js";
-import { DEFAULT_PANEL_DIVIDER_COLOR as x } from "../Panel.helpers.es.js";
-import { Row as D } from "./Panel.Header.Row.es.js";
-import { ContentBefore as b } from "./Panel.Header.ContentBefore.es.js";
-import { Heading as g } from "./Panel.Header.Heading.es.js";
-import { ContentAfter as h } from "./Panel.Header.ContentAfter.es.js";
-import { Description as u } from "./Panel.Header.Description.es.js";
-import { Subheader as E } from "./Panel.Header.Subheader.es.js";
-import { s as N } from "../../../../chunks/panel.module.CnHWv4EZ.js";
-const { subElementClassPrefix: A } = d("panel"), B = `${A}header`, r = ({
+import { Divider as u } from "../../../Divider/Divider.es.js";
+import { Box as D } from "../../../Box/Box.es.js";
+import { DEFAULT_PANEL_DIVIDER_COLOR as b } from "../Panel.helpers.es.js";
+import { usePanelContext as v } from "../Panel.context.es.js";
+import { Row as B } from "./Panel.Header.Row.es.js";
+import { ContentBefore as h } from "./Panel.Header.ContentBefore.es.js";
+import { Heading as E } from "./Panel.Header.Heading.es.js";
+import { ContentAfter as N } from "./Panel.Header.ContentAfter.es.js";
+import { Description as A } from "./Panel.Header.Description.es.js";
+import { Subheader as H } from "./Panel.Header.Subheader.es.js";
+import { s as P } from "../../../../chunks/panel.module.CgFBtvbR.js";
+const { subElementClassPrefix: R } = x("panel"), L = `${R}header`, o = ({
   children: e,
   className: t,
-  divider: m = !0,
-  dividerColor: s = x,
-  backgroundColor: a,
-  ...i
+  divider: s = !0,
+  dividerColor: m,
+  backgroundColor: i,
+  ...n
 }) => {
-  const n = l(N[B], t);
-  return /* @__PURE__ */ p(f, { children: [
-    /* @__PURE__ */ o(
-      C,
+  const { backgroundColor: a, dividerColor: l } = v(), d = m ?? l ?? b, p = i ?? a, f = g(P[L], t);
+  return /* @__PURE__ */ c(C, { children: [
+    /* @__PURE__ */ r(
+      D,
       {
         as: "header",
-        className: n,
-        backgroundColor: a,
-        ...i,
+        className: f,
+        backgroundColor: p,
+        ...n,
         children: e
       }
     ),
-    m && /* @__PURE__ */ o(c, { borderColor: s })
+    s && /* @__PURE__ */ r(u, { borderColor: d })
   ] });
 };
-r.displayName = "Panel.Header";
-r.Row = D;
-r.ContentBefore = b;
-r.Heading = g;
-r.Description = u;
-r.ContentAfter = h;
-r.Subheader = E;
+o.displayName = "Panel.Header";
+o.Row = B;
+o.ContentBefore = h;
+o.Heading = E;
+o.Description = A;
+o.ContentAfter = N;
+o.Subheader = H;
 export {
-  r as Header
+  o as Header
 };

package/lib/wip/Panel/Panel.Body.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("clsx"),c=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const i=require("../../Box/Box.cjs.js"),u=require("../../../chunks/panel.module.BVmRxZHo.js"),{subElementClassPrefix:m}=c.getBEMClassNames("panel"),d=`${m}body`,e=({children:s,className:o,backgroundColor:t,...r})=>{const a=n(u.styles[d],o);return l.jsx(i.Box,{className:a,backgroundColor:t,...r,children:s})};e.displayName="Panel.Body";exports.Body=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),i=require("clsx"),d=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const x=require("../../Box/Box.cjs.js"),b=require("./Panel.context.cjs.js"),m=require("../../../chunks/panel.module.BzLGa7GY.js"),{subElementClassPrefix:B}=d.getBEMClassNames("panel"),y=`${B}body`,e=({children:s,className:o,backgroundColor:t,tabIndex:n=0,...r})=>{const{backgroundColor:l}=b.usePanelContext(),a=t??l,c=i(m.styles[y],o);return u.jsx(x.Box,{className:c,backgroundColor:a,tabIndex:n,...r,children:s})};e.displayName="Panel.Body";exports.Body=e;

package/lib/wip/Panel/Panel.Body.d.ts

@@ -11,6 +11,6 @@ export interface PanelBodyProps extends ComponentPropsWithoutRef<'div'> {
     backgroundColor?: BoxBackgroundColor;
 }
 export declare const Body: {
-    ({ children, className: _className, backgroundColor, ...props }: PanelBodyProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className: _className, backgroundColor, tabIndex, ...props }: PanelBodyProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/wip/Panel/Panel.Body.es.js

@@ -1,19 +1,21 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "clsx";
-import { g as l } from "../../../chunks/classNames.ZWNk1hey.js";
+import { jsx as n } from "react/jsx-runtime";
+import c from "clsx";
+import { g as p } from "../../../chunks/classNames.ZWNk1hey.js";
 import "../../../chunks/constants.Cruz2A1w.js";
-import { Box as p } from "../../Box/Box.es.js";
-import { s as i } from "../../../chunks/panel.module.CnHWv4EZ.js";
-const { subElementClassPrefix: n } = l("panel"), c = `${n}body`, f = ({
-  children: s,
-  className: o,
-  backgroundColor: m,
-  ...a
+import { Box as i } from "../../Box/Box.es.js";
+import { usePanelContext as d } from "./Panel.context.es.js";
+import { s as f } from "../../../chunks/panel.module.CgFBtvbR.js";
+const { subElementClassPrefix: x } = p("panel"), C = `${x}body`, g = ({
+  children: o,
+  className: s,
+  backgroundColor: r,
+  tabIndex: t = 0,
+  ...e
 }) => {
-  const r = e(i[c], o);
-  return /* @__PURE__ */ t(p, { className: r, backgroundColor: m, ...a, children: s });
+  const { backgroundColor: a } = d(), m = r ?? a, l = c(f[C], s);
+  return /* @__PURE__ */ n(i, { className: l, backgroundColor: m, tabIndex: t, ...e, children: o });
 };
-f.displayName = "Panel.Body";
+g.displayName = "Panel.Body";
 export {
-  f as Body
+  g as Body
 };

package/lib/wip/Panel/Panel.Inline.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("@floating-ui/react"),F=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const R=require("./Panel.context.cjs.js"),h=require("../../FloatingUI/FloatingUI.root.cjs.js"),w=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),j=require("./Panel.Divider.cjs.js"),U=require("./Panel.ResizeHandle.cjs.js"),N=require("./Panel.useResize.cjs.js"),y=require("../../../chunks/panel.module.BVmRxZHo.js"),{baseClassNamePrefix:v}=F.getBEMClassNames("panel"),C=({children:a,panelClassName:l,inlineWrapperClassName:r,resolvedPosition:n,dividerBefore:o,dividerInner:c,dividerAfter:u,alwaysVisible:i,skipMountAnimation:_,dividerColor:t,resizeConfig:s,sizeStyle:x,...d})=>{const{context:p,transitionConfig:g,refs:I}=w.useBmFloatingUIContext(),{isMounted:f,status:P}=b.useTransitionStatus(p,g),m=(i||_)&&P==="initial"?"open":P,{handleRef:q}=N.usePanelResize({resizeConfig:s,position:n,floatingRef:I.floating});return f?e.jsxs(e.Fragment,{children:[o&&e.jsx(j.InlineDivider,{position:n,dividerColor:t}),e.jsx("div",{ref:I.setFloating,className:r,"data-position":n,"data-status":m,style:x,children:e.jsxs("div",{className:y.styles[`${v}__inline-wrapper-content`],children:[c&&e.jsx(j.InlineDivider,{position:n,dividerColor:t}),e.jsxs("aside",{...d,className:l,children:[a,s&&e.jsx(U.PanelResizeHandle,{ref:q})]})]})}),u&&e.jsx(j.InlineDivider,{position:n,dividerColor:t})]}):null},D=({contextValue:a,panelClassName:l,inlineWrapperClassName:r,resolvedPosition:n,dividerBefore:o,dividerInner:c,dividerAfter:u,open:i,transitionConfig:_,dividerColor:t,children:s,resizeConfig:x,sizeStyle:d,skipMountAnimation:p,...g})=>e.jsx(R.PanelContext.Provider,{value:a,children:e.jsx(h.FloatingUIRoot,{open:i??!0,portalled:!1,transitionConfig:_,children:e.jsx(C,{panelClassName:l,inlineWrapperClassName:r,resolvedPosition:n,dividerBefore:o,dividerInner:c,dividerAfter:u,dividerColor:t,alwaysVisible:i===void 0,skipMountAnimation:p,resizeConfig:x,sizeStyle:d,...g,children:s})})});exports.InlinePanel=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("@floating-ui/react"),F=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const R=require("./Panel.context.cjs.js"),h=require("../../FloatingUI/FloatingUI.root.cjs.js"),w=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),j=require("./Panel.Divider.cjs.js"),U=require("./Panel.ResizeHandle.cjs.js"),N=require("./Panel.useResize.cjs.js"),y=require("../../../chunks/panel.module.BzLGa7GY.js"),{baseClassNamePrefix:v}=F.getBEMClassNames("panel"),C=({children:a,panelClassName:l,inlineWrapperClassName:r,resolvedPosition:n,dividerBefore:o,dividerInner:c,dividerAfter:u,alwaysVisible:i,skipMountAnimation:_,dividerColor:t,resizeConfig:s,cssVarStyle:x,...d})=>{const{context:p,transitionConfig:g,refs:I}=w.useBmFloatingUIContext(),{isMounted:f,status:P}=b.useTransitionStatus(p,g),m=(i||_)&&P==="initial"?"open":P,{handleRef:q}=N.usePanelResize({resizeConfig:s,position:n,floatingRef:I.floating});return f?e.jsxs(e.Fragment,{children:[o&&e.jsx(j.InlineDivider,{position:n,dividerColor:t}),e.jsx("div",{ref:I.setFloating,className:r,"data-position":n,"data-status":m,style:x,children:e.jsxs("div",{className:y.styles[`${v}__inline-wrapper-content`],children:[c&&e.jsx(j.InlineDivider,{position:n,dividerColor:t}),e.jsxs("aside",{...d,className:l,children:[a,s&&e.jsx(U.PanelResizeHandle,{ref:q})]})]})}),u&&e.jsx(j.InlineDivider,{position:n,dividerColor:t})]}):null},D=({contextValue:a,panelClassName:l,inlineWrapperClassName:r,resolvedPosition:n,dividerBefore:o,dividerInner:c,dividerAfter:u,open:i,transitionConfig:_,dividerColor:t,children:s,resizeConfig:x,cssVarStyle:d,skipMountAnimation:p,...g})=>e.jsx(R.PanelContext.Provider,{value:a,children:e.jsx(h.FloatingUIRoot,{open:i??!0,portalled:!1,transitionConfig:_,children:e.jsx(C,{panelClassName:l,inlineWrapperClassName:r,resolvedPosition:n,dividerBefore:o,dividerInner:c,dividerAfter:u,dividerColor:t,alwaysVisible:i===void 0,skipMountAnimation:p,resizeConfig:x,cssVarStyle:d,...g,children:s})})});exports.InlinePanel=D;

package/lib/wip/Panel/Panel.Inline.d.ts

@@ -14,10 +14,10 @@ type InlinePanelProps = {
     children: React.ReactNode;
     dividerColor?: PanelDividerColor;
     resizeConfig?: PanelResizeConfig;
-    /** Forwarded from Panel: CSS custom-property override for the panel size. */
-    sizeStyle?: React.CSSProperties;
+    /** Forwarded from Panel: CSS custom-property overrides (`--bm-comp-panel-width` / `-height`). */
+    cssVarStyle?: React.CSSProperties;
     /** Forwarded from Panel: when true, suppress the slide-in animation on this mount. */
     skipMountAnimation?: boolean;
 } & React.ComponentPropsWithoutRef<'aside'>;
-export declare const InlinePanel: ({ contextValue, panelClassName, inlineWrapperClassName, resolvedPosition, dividerBefore, dividerInner, dividerAfter, open, transitionConfig, dividerColor, children, resizeConfig, sizeStyle, skipMountAnimation, ...props }: InlinePanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlinePanel: ({ contextValue, panelClassName, inlineWrapperClassName, resolvedPosition, dividerBefore, dividerInner, dividerAfter, open, transitionConfig, dividerColor, children, resizeConfig, cssVarStyle, skipMountAnimation, ...props }: InlinePanelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/wip/Panel/Panel.Inline.es.js

@@ -8,7 +8,7 @@ import { a as j } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
 import { InlineDivider as h } from "./Panel.Divider.es.js";
 import { PanelResizeHandle as B } from "./Panel.ResizeHandle.es.js";
 import { usePanelResize as M } from "./Panel.useResize.es.js";
-import { s as S } from "../../../chunks/panel.module.CnHWv4EZ.js";
+import { s as S } from "../../../chunks/panel.module.CgFBtvbR.js";
 const { baseClassNamePrefix: _ } = P("panel"), z = ({
   children: i,
   panelClassName: o,
@@ -21,7 +21,7 @@ const { baseClassNamePrefix: _ } = P("panel"), z = ({
   skipMountAnimation: f,
   dividerColor: a,
   resizeConfig: s,
-  sizeStyle: c,
+  cssVarStyle: c,
   ...u
 }) => {
   const {
@@ -70,7 +70,7 @@ const { baseClassNamePrefix: _ } = P("panel"), z = ({
   dividerColor: a,
   children: s,
   resizeConfig: c,
-  sizeStyle: u,
+  cssVarStyle: u,
   skipMountAnimation: d,
   ...g
 }) => /* @__PURE__ */ t(U.Provider, { value: i, children: /* @__PURE__ */ t(
@@ -92,7 +92,7 @@ const { baseClassNamePrefix: _ } = P("panel"), z = ({
         alwaysVisible: e === void 0,
         skipMountAnimation: d,
         resizeConfig: c,
-        sizeStyle: u,
+        cssVarStyle: u,
         ...g,
         children: s
       }

package/lib/wip/Panel/Panel.Overlay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),M=require("clsx"),g=require("react"),h=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const w=require("./Panel.context.cjs.js"),S=require("./Panel.helpers.cjs.js"),k=require("../../FloatingUI/FloatingUI.root.cjs.js"),D=require("../../FloatingUI/FloatingUI.content.cjs.js"),B=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),$=require("./Panel.Divider.cjs.js"),z=require("./Panel.ResizeHandle.cjs.js"),A=require("./Panel.useResize.cjs.js"),p=require("../../../chunks/panel.module.BVmRxZHo.js"),{baseClassNamePrefix:C,variable:f}=h.getBEMClassNames("panel");function H(s,t,e){if(!(!s&&!t&&!e))return{...s,...t,...e?{[f("offset-x")]:e.x,[f("offset-y")]:e.y}:null}}const R=({children:s,panelClassName:t,resolvedPosition:e,showDivider:c,dividerColor:l,resizeConfig:a,floatingOffset:_,overlayDividerClassName:d,isBlocking:P,sizeStyle:v,skipMountAnimation:x,container:u,style:q,...b})=>{const{refs:y}=B.useBmFloatingUIContext(),{handleRef:r}=A.usePanelResize({resizeConfig:a,position:e,floatingRef:y.floating,requireMount:!0,container:u}),n=H(q,v,_);return i.jsxs(D.Content,{className:t,skipFloatingStyles:!0,overlay:P?u?{lockScroll:!1}:!0:!1,...b,style:n,"data-position":e,...x?{"data-status":"open"}:{},children:[s,c&&i.jsx($.InlineDivider,{position:e,className:d,dividerColor:l}),a&&i.jsx(z.PanelResizeHandle,{ref:r})]})},E=({contextValue:s,panelClassName:t,resolvedPosition:e,showDivider:c,modalType:l,closeOnOutsidePress:a,floatingOffset:_,open:d,onOpenChange:P,transitionConfig:v,dividerColor:x,children:u,resizeConfig:q,sizeStyle:b,skipMountAnimation:y,container:r,triggerRef:n,...j})=>{const m=l==="isModal"||l==="alert",I=g.useCallback(o=>{const F=(n==null?void 0:n.current)??null;return!(F&&o.target instanceof Node&&F.contains(o.target))},[n]),U=g.useMemo(()=>{const o=S.getPanelDismissConfig(l,a);return!n||!(l==="isModal"||l!=="alert"&&!!a)?o:{...o??{},outsidePress:I}},[l,a,n,I]),N=M(p.styles[`${C}__overlay-divider`],p.styles[`${C}__overlay-divider--${e}`]);return i.jsx(w.PanelContext.Provider,{value:s,children:i.jsx(k.FloatingUIRoot,{open:d,onOpenChange:P,portalled:r?{root:r}:!0,transitionConfig:v,dismiss:U,focusConfiguration:m?!0:{modal:!1,closeOnFocusOut:!1},children:i.jsx(R,{panelClassName:t,resolvedPosition:e,showDivider:c,dividerColor:x,floatingOffset:_,overlayDividerClassName:N,isBlocking:m,resizeConfig:q,sizeStyle:b,skipMountAnimation:y,container:r,...j,role:l==="alert"?"alertdialog":"dialog","aria-modal":m||void 0,children:u})})})};exports.OverlayPanel=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),N=require("clsx"),I=require("react"),S=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const h=require("./Panel.context.cjs.js"),w=require("./Panel.helpers.cjs.js"),k=require("../../FloatingUI/FloatingUI.root.cjs.js"),D=require("../../FloatingUI/FloatingUI.content.cjs.js"),z=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),$=require("./Panel.Divider.cjs.js"),A=require("./Panel.ResizeHandle.cjs.js"),B=require("./Panel.useResize.cjs.js"),f=require("../../../chunks/panel.module.BzLGa7GY.js"),{baseClassNamePrefix:g,variable:j}=S.getBEMClassNames("panel");function H(s,n,e){if(!(!s&&!n&&!e))return{...s,...n,...e?{[j("offset-x")]:e.x,[j("offset-y")]:e.y}:null}}const R=({children:s,panelClassName:n,resolvedPosition:e,showDivider:_,dividerColor:l,resizeConfig:o,floatingOffset:d,overlayDividerClassName:P,isBlocking:c,cssVarStyle:v,skipMountAnimation:x,container:r,style:q,...b})=>{const{refs:y}=z.useBmFloatingUIContext(),{handleRef:i}=B.usePanelResize({resizeConfig:o,position:e,floatingRef:y.floating,requireMount:!0,container:r}),t=H(q,v,d),m=I.useMemo(()=>c?r?{lockScroll:!1}:!0:{lockScroll:!1},[c,r]);return a.jsxs(D.Content,{className:n,skipFloatingStyles:!0,overlay:m,...b,style:t,"data-position":e,...x?{"data-status":"open"}:{},children:[s,_&&a.jsx($.InlineDivider,{position:e,className:P,dividerColor:l}),o&&a.jsx(A.PanelResizeHandle,{ref:i})]})},E=({contextValue:s,panelClassName:n,resolvedPosition:e,showDivider:_,modalType:l,closeOnOutsidePress:o,floatingOffset:d,open:P,onOpenChange:c,transitionConfig:v,dividerColor:x,children:r,resizeConfig:q,cssVarStyle:b,skipMountAnimation:y,container:i,triggerRef:t,...m})=>{const p=l==="isModal"||l==="alert",C=I.useCallback(u=>{const F=(t==null?void 0:t.current)??null;return!(F&&u.target instanceof Node&&F.contains(u.target))},[t]),U=I.useMemo(()=>{const u=w.getPanelDismissConfig(l,o);return!t||!(l==="isModal"||l!=="alert"&&(o??!0))?u:{...u??{},outsidePress:C}},[l,o,t,C]),M=N(f.styles[`${g}__overlay-divider`],f.styles[`${g}__overlay-divider--${e}`]);return a.jsx(h.PanelContext.Provider,{value:s,children:a.jsx(k.FloatingUIRoot,{open:P,onOpenChange:c,portalled:i?{root:i}:!0,transitionConfig:v,dismiss:U,focusConfiguration:p?!0:{modal:!1,closeOnFocusOut:!1},children:a.jsx(R,{panelClassName:n,resolvedPosition:e,showDivider:_,dividerColor:x,floatingOffset:d,overlayDividerClassName:M,isBlocking:p,resizeConfig:q,cssVarStyle:b,skipMountAnimation:y,container:i,...m,role:l==="alert"?"alertdialog":"dialog","aria-modal":p||void 0,children:r})})})};exports.OverlayPanel=E;

package/lib/wip/Panel/Panel.Overlay.d.ts

@@ -17,8 +17,8 @@ type OverlayPanelProps = {
     children: React.ReactNode;
     dividerColor?: PanelDividerColor;
     resizeConfig?: PanelResizeConfig;
-    /** Forwarded from Panel: CSS custom-property override for the panel size. */
-    sizeStyle?: CSSProperties;
+    /** Forwarded from Panel: CSS custom-property overrides (`--bm-comp-panel-width` / `-height`). */
+    cssVarStyle?: CSSProperties;
     /** Forwarded from Panel: when true, suppress the slide-in animation on this mount. */
     skipMountAnimation?: boolean;
     /**
@@ -35,5 +35,5 @@ type OverlayPanelProps = {
      */
     triggerRef?: RefObject<HTMLElement | null>;
 } & ComponentPropsWithoutRef<'aside'>;
-export declare const OverlayPanel: ({ contextValue, panelClassName, resolvedPosition, showDivider, modalType, closeOnOutsidePress, floatingOffset, open, onOpenChange, transitionConfig, dividerColor, children, resizeConfig, sizeStyle, skipMountAnimation, container, triggerRef, ...props }: OverlayPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OverlayPanel: ({ contextValue, panelClassName, resolvedPosition, showDivider, modalType, closeOnOutsidePress, floatingOffset, open, onOpenChange, transitionConfig, dividerColor, children, resizeConfig, cssVarStyle, skipMountAnimation, container, triggerRef, ...props }: OverlayPanelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/wip/Panel/Panel.Overlay.es.js

@@ -1,141 +1,144 @@
-import { jsx as n, jsxs as B } from "react/jsx-runtime";
-import D from "clsx";
-import { useCallback as S, useMemo as $ } from "react";
-import { g } from "../../../chunks/classNames.ZWNk1hey.js";
+import { jsx as m, jsxs as D } from "react/jsx-runtime";
+import $ from "clsx";
+import { useCallback as j, useMemo as S } from "react";
+import { g as A } from "../../../chunks/classNames.ZWNk1hey.js";
 import "../../../chunks/constants.Cruz2A1w.js";
-import { PanelContext as j } from "./Panel.context.es.js";
-import { getPanelDismissConfig as A } from "./Panel.helpers.es.js";
-import { FloatingUIRoot as U } from "../../FloatingUI/FloatingUI.root.es.js";
+import { PanelContext as B } from "./Panel.context.es.js";
+import { getPanelDismissConfig as U } from "./Panel.helpers.es.js";
+import { FloatingUIRoot as g } from "../../FloatingUI/FloatingUI.root.es.js";
 import { Content as q } from "../../FloatingUI/FloatingUI.content.es.js";
-import { a as E } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
-import { InlineDivider as H } from "./Panel.Divider.es.js";
-import { PanelResizeHandle as w } from "./Panel.ResizeHandle.es.js";
-import { usePanelResize as z } from "./Panel.useResize.es.js";
-import { s as h } from "../../../chunks/panel.module.CnHWv4EZ.js";
-const { baseClassNamePrefix: k, variable: F } = g("panel");
-function G(s, e, o) {
-  if (!(!s && !e && !o))
+import { a as z } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
+import { InlineDivider as E } from "./Panel.Divider.es.js";
+import { PanelResizeHandle as H } from "./Panel.ResizeHandle.es.js";
+import { usePanelResize as w } from "./Panel.useResize.es.js";
+import { s as k } from "../../../chunks/panel.module.CgFBtvbR.js";
+const { baseClassNamePrefix: F, variable: I } = A("panel");
+function G(e, s, o) {
+  if (!(!e && !s && !o))
     return {
-      ...s,
       ...e,
+      ...s,
       ...o ? {
-        [F("offset-x")]: o.x,
-        [F("offset-y")]: o.y
+        [I("offset-x")]: o.x,
+        [I("offset-y")]: o.y
       } : null
     };
 }
 const J = ({
-  children: s,
-  panelClassName: e,
+  children: e,
+  panelClassName: s,
   resolvedPosition: o,
-  showDivider: u,
+  showDivider: c,
   dividerColor: t,
-  resizeConfig: a,
-  floatingOffset: c,
-  overlayDividerClassName: f,
-  isBlocking: d,
-  sizeStyle: p,
+  resizeConfig: l,
+  floatingOffset: f,
+  overlayDividerClassName: d,
+  isBlocking: u,
+  cssVarStyle: p,
   skipMountAnimation: v,
-  container: m,
+  container: a,
   style: x,
-  ...C
+  ...y
 }) => {
-  const { refs: y } = E(), { handleRef: l } = z({
-    resizeConfig: a,
+  const { refs: C } = z(), { handleRef: i } = w({
+    resizeConfig: l,
     position: o,
-    floatingRef: y.floating,
+    floatingRef: C.floating,
     requireMount: !0,
-    container: m
-  }), r = G(x, p, c);
-  return /* @__PURE__ */ B(
+    container: a
+  }), r = G(x, p, f), P = S(
+    () => u ? a ? { lockScroll: !1 } : !0 : { lockScroll: !1 },
+    [u, a]
+  );
+  return /* @__PURE__ */ D(
     q,
     {
-      className: e,
+      className: s,
       skipFloatingStyles: !0,
-      overlay: d ? m ? { lockScroll: !1 } : !0 : !1,
-      ...C,
+      overlay: P,
+      ...y,
       style: r,
       "data-position": o,
       ...v ? { "data-status": "open" } : {},
       children: [
-        s,
-        u && /* @__PURE__ */ n(
-          H,
+        e,
+        c && /* @__PURE__ */ m(
+          E,
           {
             position: o,
-            className: f,
+            className: d,
             dividerColor: t
           }
         ),
-        a && /* @__PURE__ */ n(w, { ref: l })
+        l && /* @__PURE__ */ m(H, { ref: i })
       ]
     }
   );
-}, so = ({
-  contextValue: s,
-  panelClassName: e,
+}, eo = ({
+  contextValue: e,
+  panelClassName: s,
   resolvedPosition: o,
-  showDivider: u,
+  showDivider: c,
   modalType: t,
-  closeOnOutsidePress: a,
-  floatingOffset: c,
-  open: f,
-  onOpenChange: d,
+  closeOnOutsidePress: l,
+  floatingOffset: f,
+  open: d,
+  onOpenChange: u,
   transitionConfig: p,
   dividerColor: v,
-  children: m,
+  children: a,
   resizeConfig: x,
-  sizeStyle: C,
-  skipMountAnimation: y,
-  container: l,
+  cssVarStyle: y,
+  skipMountAnimation: C,
+  container: i,
   triggerRef: r,
-  ...I
+  ...P
 }) => {
-  const N = t === "isModal" || t === "alert", M = S(
-    (i) => {
-      const P = (r == null ? void 0 : r.current) ?? null;
-      return !(P && i.target instanceof Node && P.contains(i.target));
+  const N = t === "isModal" || t === "alert", h = j(
+    (n) => {
+      const M = (r == null ? void 0 : r.current) ?? null;
+      return !(M && n.target instanceof Node && M.contains(n.target));
     },
     [r]
-  ), _ = $(() => {
-    const i = A(t, a);
-    return !r || !(t === "isModal" || t !== "alert" && !!a) ? i : { ...i ?? {}, outsidePress: M };
-  }, [t, a, r, M]), b = D(
-    h[`${k}__overlay-divider`],
-    h[`${k}__overlay-divider--${o}`]
+  ), _ = S(() => {
+    const n = U(t, l);
+    return !r || !(t === "isModal" || t !== "alert" && (l ?? !0)) ? n : { ...n ?? {}, outsidePress: h };
+  }, [t, l, r, h]), b = $(
+    k[`${F}__overlay-divider`],
+    k[`${F}__overlay-divider--${o}`]
   );
-  return /* @__PURE__ */ n(j.Provider, { value: s, children: /* @__PURE__ */ n(
-    U,
+  return /* @__PURE__ */ m(B.Provider, { value: e, children: /* @__PURE__ */ m(
+    g,
     {
-      open: f,
-      onOpenChange: d,
-      portalled: l ? { root: l } : !0,
+      open: d,
+      onOpenChange: u,
+      portalled: i ? { root: i } : !0,
       transitionConfig: p,
       dismiss: _,
       focusConfiguration: N ? !0 : { modal: !1, closeOnFocusOut: !1 },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ m(
         J,
         {
-          panelClassName: e,
+          panelClassName: s,
           resolvedPosition: o,
-          showDivider: u,
+          showDivider: c,
           dividerColor: v,
-          floatingOffset: c,
+          floatingOffset: f,
           overlayDividerClassName: b,
           isBlocking: N,
           resizeConfig: x,
-          sizeStyle: C,
-          skipMountAnimation: y,
-          container: l,
-          ...I,
+          cssVarStyle: y,
+          skipMountAnimation: C,
+          container: i,
+          ...P,
           role: t === "alert" ? "alertdialog" : "dialog",
           "aria-modal": N || void 0,
-          children: m
+          children: a
         }
       )
     }
   ) });
 };
 export {
-  so as OverlayPanel
+  eo as OverlayPanel
 };

package/lib/wip/Panel/Panel.ResizeHandle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),n=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const l=require("../../../chunks/panel.module.BVmRxZHo.js"),{baseClassNamePrefix:i}=n.getBEMClassNames("panel"),e=r.forwardRef((t,s)=>a.jsx("div",{ref:s,className:l.styles[`${i}__resize-handle`],"aria-hidden":!0,tabIndex:-1}));e.displayName="PanelResizeHandle";exports.PanelResizeHandle=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),n=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const l=require("../../../chunks/panel.module.BzLGa7GY.js"),{baseClassNamePrefix:i}=n.getBEMClassNames("panel"),e=r.forwardRef((t,s)=>a.jsx("div",{ref:s,className:l.styles[`${i}__resize-handle`],"aria-hidden":!0,tabIndex:-1}));e.displayName="PanelResizeHandle";exports.PanelResizeHandle=e;

package/lib/wip/Panel/Panel.ResizeHandle.es.js

@@ -2,7 +2,7 @@ import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
 import { g as r } from "../../../chunks/classNames.ZWNk1hey.js";
 import "../../../chunks/constants.Cruz2A1w.js";
-import { s as o } from "../../../chunks/panel.module.CnHWv4EZ.js";
+import { s as o } from "../../../chunks/panel.module.CgFBtvbR.js";
 const { baseClassNamePrefix: i } = r("panel"), m = s((t, e) => /* @__PURE__ */ a(
   "div",
   {

package/lib/wip/Panel/Panel.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),T=require("clsx"),j=require("react"),ne=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const A=require("../../../utils/hooks/usePrevious.cjs.js"),oe=require("./Header/Panel.Header.cjs.js"),ie=require("./Panel.Body.cjs.js"),te=require("./Footer/Panel.Footer.cjs.js"),r=require("./Panel.helpers.cjs.js"),le=require("./Panel.Inline.cjs.js"),re=require("./Panel.Overlay.cjs.js"),n=require("../../../chunks/panel.module.BVmRxZHo.js"),ae=165,ce=100,ue=(e,f)=>{if(!e)return;const _=f==="bottom",a=typeof e=="object"?e:{},t=a.minSize??(_?ce:ae),y=a.maxSize??1/0,d=a.storageKey??"";return{minSize:t,maxSize:y,storageKey:d}},{baseClassNamePrefix:o,variable:ve}=ne.getBEMClassNames("panel");function de(e){return r.isPresetSize(e)?{overlaySizeClass:n.styles[`${o}--size-${e}`],inlineSizeClass:n.styles[`${o}__inline-wrapper--size-${e}`],sizeStyle:void 0}:e!==void 0?{overlaySizeClass:void 0,inlineSizeClass:void 0,sizeStyle:{[ve("size")]:e}}:{overlaySizeClass:void 0,inlineSizeClass:void 0,sizeStyle:void 0}}const v=({children:e,className:f,padding:_="md",onOpenChange:a,open:t,size:y,dismissible:d=!0,closeButtonAriaLabel:m="Close panel",kind:s="inline",position:P,divider:F=!0,dividerColor:S,isAnimated:C=!0,onBeforeClose:K,modalType:c,offset:w,resizable:L,id:z,...b})=>{const l=r.getResolvedPanelPosition(P),u=ue(L,l),V=!!u,{container:h,triggerRef:W,...N}=b,i=s==="overlay"?h:void 0;if(process.env.NODE_ENV!=="production"){u&&!u.storageKey&&console.warn("Panel: provide a `storageKey` in the `resizable` config to persist panel size across sessions."),c==="alert"&&d&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.');const{closeOnOutsidePress:se}=b;if(se&&c!=="nonModal"&&c!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.'),h&&s==="inline"&&console.warn('Panel: `container` has no effect when `kind="inline"`.'),i)try{if(typeof getComputedStyle=="function"){const p=getComputedStyle(i);p.position==="static"&&console.warn("Panel: container element should have `position: relative` (or another non-static value) for proper scoping.");const g=l==="bottom"?p.overflowY:p.overflowX;(g==="visible"||g==="auto"||g==="scroll")&&console.warn("Panel: container element should use `overflow: hidden` (or `clip`) so the slide-in/out transform does not trigger a transient scrollbar.")}}catch{}}const O=c==="alert"?!1:d,{overlaySizeClass:G,inlineSizeClass:U,sizeStyle:q}=de(y),$=s==="overlay"&&w?r.resolveOffset(w):void 0,I=!!$,M=T(n.styles[o],n.styles[`${o}--${s}`],s==="overlay"&&G,n.styles[`${o}--padding-${_}`],n.styles[`${o}--position-${l}`],I&&n.styles[`${o}--floating`],V&&n.styles[`${o}--resizable`],s==="overlay"&&i&&n.styles[`${o}--contained`],f),X=T(n.styles[`${o}__inline-wrapper`],U),{requestClose:x,handleOverlayOpenChange:Y}=r.usePanelClose(K,a),E=j.useMemo(()=>({kind:s,dismissible:O,closeButtonAriaLabel:m,position:P,requestClose:x}),[s,O,m,P,x]),{showDivider:J,dividerBefore:Q,dividerInner:Z,dividerAfter:k}=r.getPanelDividerState(F&&!I,l),B=j.useMemo(()=>({duration:C?r.PANEL_TRANSITION_DURATION_MS:0}),[C]),D=A.usePrevious(s),ee=A.usePrevious(i),H=D!==void 0&&D!==s&&t===!0||ee===null&&i!=null&&t===!0;return i===null?null:s==="inline"?R.jsx(le.InlinePanel,{contextValue:E,panelClassName:M,inlineWrapperClassName:X,resolvedPosition:l,dividerBefore:Q,dividerInner:Z,dividerAfter:k,dividerColor:S,open:t,transitionConfig:B,resizeConfig:u,skipMountAnimation:H,sizeStyle:q,id:z,...N,children:e}):R.jsx(re.OverlayPanel,{contextValue:E,panelClassName:M,resolvedPosition:l,showDivider:J,dividerColor:S,modalType:c,floatingOffset:$,open:t,onOpenChange:Y,transitionConfig:B,resizeConfig:u,skipMountAnimation:H,sizeStyle:q,id:z,...N,container:i,triggerRef:W,children:e})};v.displayName="Panel";v.Header=oe.Header;v.Body=ie.Body;v.Footer=te.Footer;exports.Panel=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),F=require("clsx"),K=require("react"),re=require("../../../chunks/classNames.DC8Ra4sw.js");require("../../../chunks/constants.CgMu0_1M.js");const V=require("../../../utils/hooks/usePrevious.cjs.js"),ae=require("./Header/Panel.Header.cjs.js"),ce=require("./Panel.Body.cjs.js"),ue=require("./Footer/Panel.Footer.cjs.js"),c=require("./Panel.helpers.cjs.js"),de=require("./Panel.Inline.cjs.js"),ve=require("./Panel.Overlay.cjs.js"),n=require("../../../chunks/panel.module.BzLGa7GY.js"),fe=165,ye=100,_e=(e,i)=>{if(!e)return;const l=i==="bottom",u=typeof e=="object"?e:{},a=u.minSize??(l?ye:fe),_=u.maxSize??1/0,P=u.storageKey??"";return{minSize:a,maxSize:_,storageKey:P}},{baseClassNamePrefix:t,variable:L}=re.getBEMClassNames("panel");function Pe(e,i){const l={overlayWidthClass:void 0,inlineWidthClass:void 0,widthStyle:void 0};return i==="bottom"?l:c.isPresetWidth(e)?{overlayWidthClass:n.styles[`${t}--width-${e}`],inlineWidthClass:n.styles[`${t}__inline-wrapper--width-${e}`],widthStyle:void 0}:e!==void 0?{...l,widthStyle:{[L("width")]:e}}:l}function pe(e,i){if(!(i!=="bottom"||e===void 0))return{[L("height")]:e}}const f=({children:e,className:i,padding:l="md",onOpenChange:u,open:a,width:_,height:P,dismissible:g=!0,closeButtonAriaLabel:w="Close panel",kind:s="overlay",position:p,divider:G=!0,dividerColor:y,backgroundColor:b,isAnimated:N=!0,onBeforeClose:U,modalType:d,offset:O,resizable:X,id:S,...C})=>{const o=c.getResolvedPanelPosition(p),v=_e(X,o),Y=!!v,{container:q,triggerRef:J,...$}=C,r=s==="overlay"?q:void 0;if(process.env.NODE_ENV!=="production"){v&&!v.storageKey&&console.warn("Panel: provide a `storageKey` in the `resizable` config to persist panel size across sessions."),d==="alert"&&g&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.');const{closeOnOutsidePress:le}=C;if(le&&d!=="nonModal"&&d!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.'),q&&s==="inline"&&console.warn('Panel: `container` has no effect when `kind="inline"`.'),r)try{if(typeof getComputedStyle=="function"){const h=getComputedStyle(r);h.position==="static"&&console.warn("Panel: container element should have `position: relative` (or another non-static value) for proper scoping.");const m=o==="bottom"?h.overflowY:h.overflowX;(m==="visible"||m==="auto"||m==="scroll")&&console.warn("Panel: container element should use `overflow: hidden` (or `clip`) so the slide-in/out transform does not trigger a transient scrollbar.")}}catch{}}const I=d==="alert"?!1:g,{overlayWidthClass:Q,inlineWidthClass:Z,widthStyle:M}=Pe(_,o),W=pe(P,o),x=M||W?{...M,...W}:void 0,E=s==="overlay"&&O?c.resolveOffset(O):void 0,z=!!E,H=F(n.styles[t],n.styles[`${t}--${s}`],s==="overlay"&&Q,n.styles[`${t}--padding-${l}`],n.styles[`${t}--position-${o}`],z&&n.styles[`${t}--floating`],Y&&n.styles[`${t}--resizable`],s==="overlay"&&r&&n.styles[`${t}--contained`],i),k=F(n.styles[`${t}__inline-wrapper`],Z),{requestClose:B,handleOverlayOpenChange:ee}=c.usePanelClose(U,u),D=K.useMemo(()=>({kind:s,dismissible:I,closeButtonAriaLabel:w,position:p,requestClose:B,backgroundColor:b,dividerColor:y}),[s,I,w,p,B,b,y]),{showDivider:se,dividerBefore:ne,dividerInner:te,dividerAfter:oe}=c.getPanelDividerState(G&&!z,o),R=K.useMemo(()=>({duration:N?c.PANEL_TRANSITION_DURATION_MS:0}),[N]),T=V.usePrevious(s),ie=V.usePrevious(r),j=T!==void 0&&T!==s&&a===!0||ie===null&&r!=null&&a===!0;return r===null?null:s==="inline"?A.jsx(de.InlinePanel,{contextValue:D,panelClassName:H,inlineWrapperClassName:k,resolvedPosition:o,dividerBefore:ne,dividerInner:te,dividerAfter:oe,dividerColor:y,open:a,transitionConfig:R,resizeConfig:v,skipMountAnimation:j,cssVarStyle:x,id:S,...$,children:e}):A.jsx(ve.OverlayPanel,{contextValue:D,panelClassName:H,resolvedPosition:o,showDivider:se,dividerColor:y,modalType:d,floatingOffset:E,open:a,onOpenChange:ee,transitionConfig:R,resizeConfig:v,skipMountAnimation:j,cssVarStyle:x,id:S,...$,container:r,triggerRef:J,children:e})};f.displayName="Panel";f.Header=ae.Header;f.Body=ce.Body;f.Footer=ue.Footer;exports.Panel=f;

package/lib/wip/Panel/Panel.context.d.ts

@@ -1,4 +1,5 @@
-import { PanelCloseReason, PanelKind, PanelPosition } from './Panel.types';
+import { BoxBackgroundColor } from '@viasat/beam-shared/components/box';
+import { PanelCloseReason, PanelDividerColor, PanelKind, PanelPosition } from './Panel.types';
 export interface PanelContextValue {
     /**
      * The panel kind — used by sub-components to vary behaviour per kind.
@@ -21,6 +22,16 @@ export interface PanelContextValue {
      * provided and only calls `onOpenChange(false)` when the guard returns `true`.
      */
     requestClose: (reason: PanelCloseReason) => void;
+    /**
+     * Default background color for all panel surfaces (Header, Body, Footer).
+     * Subcomponent-level backgroundColor props take priority.
+     */
+    backgroundColor?: BoxBackgroundColor;
+    /**
+     * Default divider color for all panel dividers (Header, Footer).
+     * Subcomponent-level dividerColor props take priority.
+     */
+    dividerColor?: PanelDividerColor;
 }
 export declare const PanelContext: import('react').Context<PanelContextValue | undefined>;
 export declare const usePanelContext: () => PanelContextValue;

package/lib/wip/Panel/Panel.d.ts

@@ -1,6 +1,6 @@
 import { PanelProps } from './Panel.types';
 export declare const Panel: {
-    ({ children, className: _className, padding, onOpenChange, open, size, dismissible, closeButtonAriaLabel, kind, position, divider, dividerColor, isAnimated, onBeforeClose, modalType, offset, resizable, id, ...panelProps }: PanelProps): JSX.Element | null;
+    ({ children, className: _className, padding, onOpenChange, open, width, height, dismissible, closeButtonAriaLabel, kind, position, divider, dividerColor, backgroundColor, isAnimated, onBeforeClose, modalType, offset, resizable, id, ...panelProps }: PanelProps): JSX.Element | null;
     displayName: string;
     Header: {
         ({ children, className: _className, divider, dividerColor, backgroundColor, ...props }: import('./Panel.types').PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
@@ -31,7 +31,7 @@ export declare const Panel: {
         };
     };
     Body: {
-        ({ children, className: _className, backgroundColor, ...props }: import('./Panel.Body').PanelBodyProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className: _className, backgroundColor, tabIndex, ...props }: import('./Panel.Body').PanelBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {