@viasat/beam-react 2.21.1 → 2.23.0

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

@@ -1,34 +1,47 @@
-import { jsxs as i, Fragment as n, jsx as e } from "react/jsx-runtime";
-import p from "clsx";
-import { g as f } from "../../../chunks/classNames.BTJmrO_L.js";
+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.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { Divider as l } from "../../Divider/Divider.es.js";
-import { Row as d } from "./Panel.Header.Row.es.js";
-import { ContentBefore as c } from "./Panel.Header.ContentBefore.es.js";
-import { Heading as C } from "./Panel.Header.Heading.es.js";
-import { ContentAfter as b } from "./Panel.Header.ContentAfter.es.js";
-import { Description as g } from "./Panel.Header.Description.es.js";
-import { Subheader as h } from "./Panel.Header.Subheader.es.js";
-import { s as u } from "../../../chunks/panel.module.DGxSyRdA.js";
-const { subElementClassPrefix: x } = f("panel"), H = `${x}header`, r = ({
-  children: o,
+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.DJLJpnm_.js";
+const { subElementClassPrefix: A } = d("panel"), B = `${A}header`, r = ({
+  children: e,
   className: t,
   divider: m = !0,
-  ...s
+  dividerColor: s = x,
+  backgroundColor: a,
+  ...i
 }) => {
-  const a = p(u[H], t);
-  return /* @__PURE__ */ i(n, { children: [
-    /* @__PURE__ */ e("header", { className: a, ...s, children: o }),
-    m && /* @__PURE__ */ e(l, { borderColor: "01" })
+  const n = l(N[B], t);
+  return /* @__PURE__ */ p(f, { children: [
+    /* @__PURE__ */ o(
+      C,
+      {
+        as: "header",
+        className: n,
+        backgroundColor: a,
+        ...i,
+        children: e
+      }
+    ),
+    m && /* @__PURE__ */ o(c, { borderColor: s })
   ] });
 };
 r.displayName = "Panel.Header";
-r.Row = d;
-r.ContentBefore = c;
-r.Heading = C;
-r.Description = g;
-r.ContentAfter = b;
-r.Subheader = h;
+r.Row = D;
+r.ContentBefore = b;
+r.Heading = g;
+r.Description = u;
+r.ContentAfter = h;
+r.Subheader = E;
 export {
   r as Header
 };

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"),p=require("@floating-ui/react"),I=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const b=require("./Panel.context.cjs.js"),q=require("../../FloatingUI/FloatingUI.root.cjs.js"),v=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),f=require("../../Divider/Divider.cjs.js"),C=require("../../../chunks/panel.module.a_gaicKX.js"),{baseClassNamePrefix:F}=I.getBEMClassNames("panel"),a=({position:n,className:i})=>e.jsx(f.Divider,{borderColor:"01",orientation:n==="bottom"?"horizontal":"vertical",className:i}),U=({children:n,panelClassName:i,inlineWrapperClassName:o,resolvedPosition:t,dividerBefore:r,dividerInner:l,dividerAfter:c,alwaysVisible:s,...u})=>{const{context:d,transitionConfig:x,refs:g}=v.useBmFloatingUIContext(),{isMounted:j,status:_}=p.useTransitionStatus(d,x),m=s&&_==="initial"?"open":_;return j?e.jsxs(e.Fragment,{children:[r&&e.jsx(a,{position:t}),e.jsx("div",{ref:g.setFloating,className:o,"data-position":t,"data-status":m,children:e.jsxs("div",{className:C.styles[`${F}__inline-wrapper-content`],children:[l&&e.jsx(a,{position:t}),e.jsx("aside",{...u,className:i,children:n})]})}),c&&e.jsx(a,{position:t})]}):null},h=({contextValue:n,panelClassName:i,inlineWrapperClassName:o,resolvedPosition:t,dividerBefore:r,dividerInner:l,dividerAfter:c,open:s,transitionConfig:u,children:d,...x})=>e.jsx(b.PanelContext.Provider,{value:n,children:e.jsx(q.FloatingUIRoot,{open:s??!0,portalled:!1,transitionConfig:u,children:e.jsx(U,{panelClassName:i,inlineWrapperClassName:o,resolvedPosition:t,dividerBefore:r,dividerInner:l,dividerAfter:c,alwaysVisible:s===void 0,...x,children:d})})});exports.InlineDivider=a;exports.InlinePanel=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@floating-ui/react"),q=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const b=require("./Panel.context.cjs.js"),f=require("../../FloatingUI/FloatingUI.root.cjs.js"),F=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),d=require("./Panel.Divider.cjs.js"),P=require("../../../chunks/panel.module.DCpj0tSX.js"),{baseClassNamePrefix:U}=q.getBEMClassNames("panel"),N=({children:s,panelClassName:a,inlineWrapperClassName:l,resolvedPosition:n,dividerBefore:r,dividerInner:o,dividerAfter:c,alwaysVisible:i,dividerColor:t,...u})=>{const{context:x,transitionConfig:_,refs:p}=F.useBmFloatingUIContext(),{isMounted:I,status:g}=m.useTransitionStatus(x,_),j=i&&g==="initial"?"open":g;return I?e.jsxs(e.Fragment,{children:[r&&e.jsx(d.InlineDivider,{position:n,dividerColor:t}),e.jsx("div",{ref:p.setFloating,className:l,"data-position":n,"data-status":j,children:e.jsxs("div",{className:P.styles[`${U}__inline-wrapper-content`],children:[o&&e.jsx(d.InlineDivider,{position:n,dividerColor:t}),e.jsx("aside",{...u,className:a,children:s})]})}),c&&e.jsx(d.InlineDivider,{position:n,dividerColor:t})]}):null},h=({contextValue:s,panelClassName:a,inlineWrapperClassName:l,resolvedPosition:n,dividerBefore:r,dividerInner:o,dividerAfter:c,open:i,transitionConfig:t,dividerColor:u,children:x,..._})=>e.jsx(b.PanelContext.Provider,{value:s,children:e.jsx(f.FloatingUIRoot,{open:i??!0,portalled:!1,transitionConfig:t,children:e.jsx(N,{panelClassName:a,inlineWrapperClassName:l,resolvedPosition:n,dividerBefore:r,dividerInner:o,dividerAfter:c,dividerColor:u,alwaysVisible:i===void 0,..._,children:x})})});exports.InlinePanel=h;

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

@@ -1,10 +1,6 @@
 import { UseTransitionStylesProps } from '@floating-ui/react';
-import { PanelPosition } from './Panel.types';
+import { PanelDividerColor, PanelPosition } from './Panel.types';
 import { PanelContextValue } from './Panel.context';
-export declare const InlineDivider: ({ position, className, }: {
-    position?: PanelPosition;
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
 type InlinePanelProps = {
     contextValue: PanelContextValue;
     panelClassName: string;
@@ -16,6 +12,7 @@ type InlinePanelProps = {
     open?: boolean;
     transitionConfig: UseTransitionStylesProps;
     children: React.ReactNode;
+    dividerColor?: PanelDividerColor;
 } & React.ComponentPropsWithoutRef<'aside'>;
-export declare const InlinePanel: ({ contextValue, panelClassName, inlineWrapperClassName, resolvedPosition, dividerBefore, dividerInner, dividerAfter, open, transitionConfig, children, ...props }: InlinePanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlinePanel: ({ contextValue, panelClassName, inlineWrapperClassName, resolvedPosition, dividerBefore, dividerInner, dividerAfter, open, transitionConfig, dividerColor, children, ...props }: InlinePanelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,93 +1,85 @@
-import { jsx as t, jsxs as u, Fragment as h } from "react/jsx-runtime";
-import { useTransitionStatus as I } from "@floating-ui/react";
-import { g as v } from "../../../chunks/classNames.BTJmrO_L.js";
+import { jsx as t, jsxs as g, Fragment as C } from "react/jsx-runtime";
+import { useTransitionStatus as N } from "@floating-ui/react";
+import { g as F } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { PanelContext as N } from "./Panel.context.es.js";
-import { FloatingUIRoot as b } from "../../FloatingUI/FloatingUI.root.es.js";
-import { a as F } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
-import { Divider as w } from "../../Divider/Divider.es.js";
-import { s as U } from "../../../chunks/panel.module.DGxSyRdA.js";
-const { baseClassNamePrefix: j } = v("panel"), f = ({
-  position: n,
-  className: i
-}) => /* @__PURE__ */ t(
-  w,
-  {
-    borderColor: "01",
-    orientation: n === "bottom" ? "horizontal" : "vertical",
-    className: i
-  }
-), y = ({
-  children: n,
-  panelClassName: i,
-  inlineWrapperClassName: e,
-  resolvedPosition: o,
+import { PanelContext as w } from "./Panel.context.es.js";
+import { FloatingUIRoot as U } from "../../FloatingUI/FloatingUI.root.es.js";
+import { a as b } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
+import { InlineDivider as u } from "./Panel.Divider.es.js";
+import { s as j } from "../../../chunks/panel.module.DJLJpnm_.js";
+const { baseClassNamePrefix: y } = F("panel"), B = ({
+  children: i,
+  panelClassName: e,
+  inlineWrapperClassName: o,
+  resolvedPosition: n,
   dividerBefore: r,
-  dividerInner: s,
-  dividerAfter: l,
-  alwaysVisible: a,
-  ...m
+  dividerInner: l,
+  dividerAfter: m,
+  alwaysVisible: s,
+  dividerColor: a,
+  ...p
 }) => {
   const {
-    context: p,
-    transitionConfig: c,
-    refs: g
-  } = F(), { isMounted: x, status: d } = I(
-    p,
-    c
-  ), C = a && d === "initial" ? "open" : d;
-  return x ? /* @__PURE__ */ u(h, { children: [
-    r && /* @__PURE__ */ t(f, { position: o }),
+    context: c,
+    transitionConfig: f,
+    refs: x
+  } = b(), { isMounted: I, status: d } = N(
+    c,
+    f
+  ), h = s && d === "initial" ? "open" : d;
+  return I ? /* @__PURE__ */ g(C, { children: [
+    r && /* @__PURE__ */ t(u, { position: n, dividerColor: a }),
     /* @__PURE__ */ t(
       "div",
       {
-        ref: g.setFloating,
-        className: e,
-        "data-position": o,
-        "data-status": C,
-        children: /* @__PURE__ */ u("div", { className: U[`${j}__inline-wrapper-content`], children: [
-          s && /* @__PURE__ */ t(f, { position: o }),
-          /* @__PURE__ */ t("aside", { ...m, className: i, children: n })
+        ref: x.setFloating,
+        className: o,
+        "data-position": n,
+        "data-status": h,
+        children: /* @__PURE__ */ g("div", { className: j[`${y}__inline-wrapper-content`], children: [
+          l && /* @__PURE__ */ t(u, { position: n, dividerColor: a }),
+          /* @__PURE__ */ t("aside", { ...p, className: e, children: i })
         ] })
       }
     ),
-    l && /* @__PURE__ */ t(f, { position: o })
+    m && /* @__PURE__ */ t(u, { position: n, dividerColor: a })
   ] }) : null;
-}, T = ({
-  contextValue: n,
-  panelClassName: i,
-  inlineWrapperClassName: e,
-  resolvedPosition: o,
+}, V = ({
+  contextValue: i,
+  panelClassName: e,
+  inlineWrapperClassName: o,
+  resolvedPosition: n,
   dividerBefore: r,
-  dividerInner: s,
-  dividerAfter: l,
-  open: a,
-  transitionConfig: m,
-  children: p,
-  ...c
-}) => /* @__PURE__ */ t(N.Provider, { value: n, children: /* @__PURE__ */ t(
-  b,
+  dividerInner: l,
+  dividerAfter: m,
+  open: s,
+  transitionConfig: a,
+  dividerColor: p,
+  children: c,
+  ...f
+}) => /* @__PURE__ */ t(w.Provider, { value: i, children: /* @__PURE__ */ t(
+  U,
   {
-    open: a ?? !0,
+    open: s ?? !0,
     portalled: !1,
-    transitionConfig: m,
+    transitionConfig: a,
     children: /* @__PURE__ */ t(
-      y,
+      B,
       {
-        panelClassName: i,
-        inlineWrapperClassName: e,
-        resolvedPosition: o,
+        panelClassName: e,
+        inlineWrapperClassName: o,
+        resolvedPosition: n,
         dividerBefore: r,
-        dividerInner: s,
-        dividerAfter: l,
-        alwaysVisible: a === void 0,
-        ...c,
-        children: p
+        dividerInner: l,
+        dividerAfter: m,
+        dividerColor: p,
+        alwaysVisible: s === void 0,
+        ...f,
+        children: c
       }
     )
   }
 ) });
 export {
-  f as InlineDivider,
-  T as InlinePanel
+  V as InlinePanel
 };

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"),q=require("clsx"),x=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const b=require("./Panel.context.cjs.js"),f=require("./Panel.helpers.cjs.js"),p=require("../../FloatingUI/FloatingUI.root.cjs.js"),y=require("../../FloatingUI/FloatingUI.content.cjs.js"),C=require("./Panel.Inline.cjs.js"),n=require("../../../chunks/panel.module.a_gaicKX.js"),{baseClassNamePrefix:a}=x.getBEMClassNames("panel"),F=({contextValue:t,panelClassName:r,resolvedPosition:l,showDivider:o,modalType:e,closeOnOutsidePress:c,open:u,onOpenChange:_,transitionConfig:d,children:g,...v})=>{const s=e==="isModal"||e==="alert",m=f.getPanelDismissConfig(e,c),P=q(n.styles[`${a}__overlay-divider`],n.styles[`${a}__overlay-divider--${l}`]);return i.jsx(b.PanelContext.Provider,{value:t,children:i.jsx(p.FloatingUIRoot,{open:u,onOpenChange:_,portalled:!0,transitionConfig:d,dismiss:m,focusConfiguration:s?!0:{modal:!1,closeOnFocusOut:!1},children:i.jsxs(y.Content,{className:r,skipFloatingStyles:!0,overlay:s,...v,role:e==="alert"?"alertdialog":"dialog","aria-modal":s||void 0,"data-position":l,children:[g,o&&i.jsx(C.InlineDivider,{position:l,className:P})]})})})};exports.OverlayPanel=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),x=require("clsx"),b=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const f=require("./Panel.context.cjs.js"),p=require("./Panel.helpers.cjs.js"),y=require("../../FloatingUI/FloatingUI.root.cjs.js"),C=require("../../FloatingUI/FloatingUI.content.cjs.js"),F=require("./Panel.Divider.cjs.js"),a=require("../../../chunks/panel.module.DCpj0tSX.js"),{baseClassNamePrefix:n}=b.getBEMClassNames("panel"),j=({contextValue:r,panelClassName:t,resolvedPosition:l,showDivider:o,modalType:e,closeOnOutsidePress:c,open:u,onOpenChange:_,transitionConfig:d,dividerColor:g,children:v,...m})=>{const s=e==="isModal"||e==="alert",P=p.getPanelDismissConfig(e,c),q=x(a.styles[`${n}__overlay-divider`],a.styles[`${n}__overlay-divider--${l}`]);return i.jsx(f.PanelContext.Provider,{value:r,children:i.jsx(y.FloatingUIRoot,{open:u,onOpenChange:_,portalled:!0,transitionConfig:d,dismiss:P,focusConfiguration:s?!0:{modal:!1,closeOnFocusOut:!1},children:i.jsxs(C.Content,{className:t,skipFloatingStyles:!0,overlay:s,...m,role:e==="alert"?"alertdialog":"dialog","aria-modal":s||void 0,"data-position":l,children:[v,o&&i.jsx(F.InlineDivider,{position:l,className:q,dividerColor:g})]})})})};exports.OverlayPanel=j;

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

@@ -1,5 +1,5 @@
 import { UseTransitionStylesProps } from '@floating-ui/react';
-import { PanelModalType, PanelPosition } from './Panel.types';
+import { PanelDividerColor, PanelModalType, PanelPosition } from './Panel.types';
 import { PanelContextValue } from './Panel.context';
 import { FloatingUIProps } from '../../FloatingUI/FloatingUI.context';
 type OverlayPanelProps = {
@@ -13,6 +13,7 @@ type OverlayPanelProps = {
     onOpenChange?: FloatingUIProps['onOpenChange'];
     transitionConfig: UseTransitionStylesProps;
     children: React.ReactNode;
+    dividerColor?: PanelDividerColor;
 } & React.ComponentPropsWithoutRef<'aside'>;
-export declare const OverlayPanel: ({ contextValue, panelClassName, resolvedPosition, showDivider, modalType, closeOnOutsidePress, open, onOpenChange, transitionConfig, children, ...props }: OverlayPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OverlayPanel: ({ contextValue, panelClassName, resolvedPosition, showDivider, modalType, closeOnOutsidePress, open, onOpenChange, transitionConfig, dividerColor, children, ...props }: OverlayPanelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,14 +1,14 @@
-import { jsx as s, jsxs as C } from "react/jsx-runtime";
-import x from "clsx";
-import { g as N } from "../../../chunks/classNames.BTJmrO_L.js";
+import { jsx as s, jsxs as x } from "react/jsx-runtime";
+import N from "clsx";
+import { g as y } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { PanelContext as y } from "./Panel.context.es.js";
-import { getPanelDismissConfig as _ } from "./Panel.helpers.es.js";
-import { FloatingUIRoot as h } from "../../FloatingUI/FloatingUI.root.es.js";
-import { Content as D } from "../../FloatingUI/FloatingUI.content.es.js";
-import { InlineDivider as F } from "./Panel.Inline.es.js";
-import { s as a } from "../../../chunks/panel.module.DGxSyRdA.js";
-const { baseClassNamePrefix: e } = N("panel"), R = ({
+import { PanelContext as _ } from "./Panel.context.es.js";
+import { getPanelDismissConfig as h } from "./Panel.helpers.es.js";
+import { FloatingUIRoot as D } from "../../FloatingUI/FloatingUI.root.es.js";
+import { Content as F } from "../../FloatingUI/FloatingUI.content.es.js";
+import { InlineDivider as O } from "./Panel.Divider.es.js";
+import { s as a } from "../../../chunks/panel.module.DJLJpnm_.js";
+const { baseClassNamePrefix: e } = y("panel"), S = ({
   contextValue: t,
   panelClassName: l,
   resolvedPosition: r,
@@ -18,35 +18,36 @@ const { baseClassNamePrefix: e } = N("panel"), R = ({
   open: f,
   onOpenChange: c,
   transitionConfig: d,
-  children: p,
-  ...g
+  dividerColor: p,
+  children: g,
+  ...v
 }) => {
-  const i = o === "isModal" || o === "alert", v = _(o, n), u = x(
+  const i = o === "isModal" || o === "alert", u = h(o, n), C = N(
     a[`${e}__overlay-divider`],
     a[`${e}__overlay-divider--${r}`]
   );
-  return /* @__PURE__ */ s(y.Provider, { value: t, children: /* @__PURE__ */ s(
-    h,
+  return /* @__PURE__ */ s(_.Provider, { value: t, children: /* @__PURE__ */ s(
+    D,
     {
       open: f,
       onOpenChange: c,
       portalled: !0,
       transitionConfig: d,
-      dismiss: v,
+      dismiss: u,
       focusConfiguration: i ? !0 : { modal: !1, closeOnFocusOut: !1 },
-      children: /* @__PURE__ */ C(
-        D,
+      children: /* @__PURE__ */ x(
+        F,
         {
           className: l,
           skipFloatingStyles: !0,
           overlay: i,
-          ...g,
+          ...v,
           role: o === "alert" ? "alertdialog" : "dialog",
           "aria-modal": i || void 0,
           "data-position": r,
           children: [
-            p,
-            m && /* @__PURE__ */ s(F, { position: r, className: u })
+            g,
+            m && /* @__PURE__ */ s(O, { position: r, className: C, dividerColor: p })
           ]
         }
       )
@@ -54,5 +55,5 @@ const { baseClassNamePrefix: e } = N("panel"), R = ({
   ) });
 };
 export {
-  R as OverlayPanel
+  S as OverlayPanel
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),f=require("clsx"),q=require("react"),S=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const j=require("./Panel.Header.cjs.js"),B=require("./Panel.Body.cjs.js"),F=require("./Panel.Footer.cjs.js"),i=require("./Panel.helpers.cjs.js"),H=require("./Panel.Inline.cjs.js"),T=require("./Panel.Overlay.cjs.js"),e=require("../../../chunks/panel.module.a_gaicKX.js"),{baseClassNamePrefix:s}=S.getBEMClassNames("panel"),l=({children:u,className:b,padding:C="md",onOpenChange:g,open:_,size:o,dismissible:d=!0,closeButtonAriaLabel:P="Close panel",kind:r="inline",position:t,divider:$=!0,isAnimated:p=!0,onBeforeClose:h,modalType:n,...c})=>{process.env.NODE_ENV!=="production"&&n==="alert"&&d&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'),process.env.NODE_ENV!=="production"&&c.closeOnOutsidePress&&n!=="nonModal"&&n!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.');const N=n==="alert"?!1:d,a=i.getResolvedPanelPosition(t),v=f(e.styles[s],e.styles[`${s}--${r}`],o&&e.styles[`${s}--size-${o}`],e.styles[`${s}--padding-${C}`],e.styles[`${s}--position-${a}`],b),M=f(e.styles[`${s}__inline-wrapper`],o==="full"&&e.styles[`${s}__inline-wrapper--full`]),{requestClose:y,handleOverlayOpenChange:x}=i.usePanelClose(h,g),m=q.useMemo(()=>({kind:r,dismissible:N,closeButtonAriaLabel:P,position:t,requestClose:y}),[r,N,P,t,y]),{showDivider:D,dividerBefore:E,dividerInner:I,dividerAfter:R}=i.getPanelDividerState($,a),w=q.useMemo(()=>({duration:p?i.PANEL_TRANSITION_DURATION_MS:0}),[p]);return r==="inline"?O.jsx(H.InlinePanel,{contextValue:m,panelClassName:v,inlineWrapperClassName:M,resolvedPosition:a,dividerBefore:E,dividerInner:I,dividerAfter:R,open:_,transitionConfig:w,...c,children:u}):O.jsx(T.OverlayPanel,{contextValue:m,panelClassName:v,resolvedPosition:a,showDivider:D,modalType:n,open:_,onOpenChange:x,transitionConfig:w,...c,children:u})};l.displayName="Panel";l.Header=j.Header;l.Body=B.Body;l.Footer=F.Footer;exports.Panel=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),q=require("clsx"),b=require("react"),B=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const A=require("./Panel.Header.cjs.js"),F=require("./Panel.Body.cjs.js"),H=require("./Panel.Footer.cjs.js"),i=require("./Panel.helpers.cjs.js"),T=require("./Panel.Inline.cjs.js"),V=require("./Panel.Overlay.cjs.js"),e=require("../../../chunks/panel.module.DCpj0tSX.js"),{baseClassNamePrefix:s}=B.getBEMClassNames("panel"),a=({children:u,className:C,padding:g="md",onOpenChange:h,open:_,size:r,dismissible:d=!0,closeButtonAriaLabel:P="Close panel",kind:o="inline",position:t,divider:$=!0,dividerColor:p,isAnimated:N=!0,onBeforeClose:M,modalType:n,...c})=>{process.env.NODE_ENV!=="production"&&n==="alert"&&d&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'),process.env.NODE_ENV!=="production"&&c.closeOnOutsidePress&&n!=="nonModal"&&n!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.');const y=n==="alert"?!1:d,l=i.getResolvedPanelPosition(t),x=r&&(l!=="bottom"||r==="full"),m=q(e.styles[s],e.styles[`${s}--${o}`],x&&e.styles[`${s}--size-${r}`],e.styles[`${s}--padding-${g}`],e.styles[`${s}--position-${l}`],C),D=q(e.styles[`${s}__inline-wrapper`],r==="full"&&e.styles[`${s}__inline-wrapper--full`]),{requestClose:f,handleOverlayOpenChange:E}=i.usePanelClose(M,h),v=b.useMemo(()=>({kind:o,dismissible:y,closeButtonAriaLabel:P,position:t,requestClose:f}),[o,y,P,t,f]),{showDivider:I,dividerBefore:S,dividerInner:R,dividerAfter:j}=i.getPanelDividerState($,l),w=b.useMemo(()=>({duration:N?i.PANEL_TRANSITION_DURATION_MS:0}),[N]);return o==="inline"?O.jsx(T.InlinePanel,{contextValue:v,panelClassName:m,inlineWrapperClassName:D,resolvedPosition:l,dividerBefore:S,dividerInner:R,dividerAfter:j,dividerColor:p,open:_,transitionConfig:w,...c,children:u}):O.jsx(V.OverlayPanel,{contextValue:v,panelClassName:m,resolvedPosition:l,showDivider:I,dividerColor:p,modalType:n,open:_,onOpenChange:E,transitionConfig:w,...c,children:u})};a.displayName="Panel";a.Header=A.Header;a.Body=F.Body;a.Footer=H.Footer;exports.Panel=a;

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

@@ -1,9 +1,9 @@
 import { PanelProps } from './Panel.types';
 export declare const Panel: {
-    ({ children, className: _className, padding, onOpenChange, open, size, dismissible, closeButtonAriaLabel, kind, position, divider, isAnimated, onBeforeClose, modalType, ...panelProps }: PanelProps): JSX.Element;
+    ({ children, className: _className, padding, onOpenChange, open, size, dismissible, closeButtonAriaLabel, kind, position, divider, dividerColor, isAnimated, onBeforeClose, modalType, ...panelProps }: PanelProps): JSX.Element;
     displayName: string;
     Header: {
-        ({ children, className: _className, divider, ...props }: import('./Panel.Header').PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className: _className, divider, dividerColor, backgroundColor, ...props }: import('./Panel.Header').PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
         Row: {
             ({ children, className: _className, ...props }: import('./Panel.Header.Row').PanelHeaderRowProps): import("react/jsx-runtime").JSX.Element;
@@ -31,11 +31,11 @@ export declare const Panel: {
         };
     };
     Body: {
-        ({ children, className: _className, ...props }: import('./Panel.Body').PanelBodyProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className: _className, backgroundColor, ...props }: import('./Panel.Body').PanelBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ children, className: _className, divider, ...props }: import('./Panel.Footer').PanelFooterProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className: _className, divider, dividerColor, backgroundColor, ...props }: import('./Panel.Footer').PanelFooterProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
         Actions: {
             ({ layout, children, className: _className, ...props }: import('./Panel.Footer.Actions').PanelFooterActionsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,92 +1,101 @@
-import { jsx as C } from "react/jsx-runtime";
-import $ from "clsx";
-import { useMemo as g } from "react";
+import { jsx as $ } from "react/jsx-runtime";
+import g from "clsx";
+import { useMemo as h } from "react";
 import { g as R } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { Header as S } from "./Panel.Header.es.js";
-import { Body as V } from "./Panel.Body.es.js";
-import { Footer as A } from "./Panel.Footer.es.js";
-import { usePanelClose as F, getPanelDividerState as H, PANEL_TRANSITION_DURATION_MS as T, getResolvedPanelPosition as j } from "./Panel.helpers.es.js";
-import { InlinePanel as q } from "./Panel.Inline.es.js";
-import { OverlayPanel as U } from "./Panel.Overlay.es.js";
-import { s as e } from "../../../chunks/panel.module.DGxSyRdA.js";
-const { baseClassNamePrefix: o } = R("panel"), i = ({
+import { Header as V } from "./Panel.Header.es.js";
+import { Body as F } from "./Panel.Body.es.js";
+import { Footer as H } from "./Panel.Footer.es.js";
+import { usePanelClose as T, getPanelDividerState as j, PANEL_TRANSITION_DURATION_MS as q, getResolvedPanelPosition as U } from "./Panel.helpers.es.js";
+import { InlinePanel as W } from "./Panel.Inline.es.js";
+import { OverlayPanel as G } from "./Panel.Overlay.es.js";
+import { s as e } from "../../../chunks/panel.module.DJLJpnm_.js";
+const { baseClassNamePrefix: o } = R("panel"), l = ({
   children: m,
   className: _,
-  padding: h = "md",
-  onOpenChange: w,
-  open: d,
-  size: t,
-  dismissible: f = !0,
-  closeButtonAriaLabel: p = "Close panel",
-  kind: r = "inline",
+  padding: w = "md",
+  onOpenChange: y,
+  open: p,
+  size: r,
+  dismissible: d = !0,
+  closeButtonAriaLabel: f = "Close panel",
+  kind: t = "inline",
   position: a,
   divider: D = !0,
-  isAnimated: c = !0,
+  dividerColor: c,
+  isAnimated: u = !0,
   onBeforeClose: E,
   modalType: s,
-  ...l
+  ...i
 }) => {
-  process.env.NODE_ENV !== "production" && s === "alert" && f && console.warn(
+  process.env.NODE_ENV !== "production" && s === "alert" && d && console.warn(
     'Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'
-  ), process.env.NODE_ENV !== "production" && l.closeOnOutsidePress && s !== "nonModal" && s !== void 0 && console.warn(
+  ), process.env.NODE_ENV !== "production" && i.closeOnOutsidePress && s !== "nonModal" && s !== void 0 && console.warn(
     'Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.'
   );
-  const u = s === "alert" ? !1 : f, n = j(a), N = $(
+  const N = s === "alert" ? !1 : d, n = U(a), x = r && (n !== "bottom" || r === "full"), P = g(
     e[o],
-    e[`${o}--${r}`],
-    t && e[`${o}--size-${t}`],
-    e[`${o}--padding-${h}`],
+    e[`${o}--${t}`],
+    x && e[`${o}--size-${r}`],
+    e[`${o}--padding-${w}`],
     e[`${o}--position-${n}`],
     _
-  ), x = $(
+  ), I = g(
     e[`${o}__inline-wrapper`],
-    t === "full" && e[`${o}__inline-wrapper--full`]
-  ), { requestClose: v, handleOverlayOpenChange: y } = F(
+    r === "full" && e[`${o}__inline-wrapper--full`]
+  ), { requestClose: v, handleOverlayOpenChange: M } = T(
     E,
-    w
-  ), P = g(
-    () => ({ kind: r, dismissible: u, closeButtonAriaLabel: p, position: a, requestClose: v }),
-    [r, u, p, a, v]
-  ), { showDivider: I, dividerBefore: M, dividerInner: b, dividerAfter: B } = H(D, n), O = g(
-    () => ({ duration: c ? T : 0 }),
-    [c]
+    y
+  ), O = h(
+    () => ({
+      kind: t,
+      dismissible: N,
+      closeButtonAriaLabel: f,
+      position: a,
+      requestClose: v
+    }),
+    [t, N, f, a, v]
+  ), { showDivider: b, dividerBefore: S, dividerInner: A, dividerAfter: B } = j(D, n), C = h(
+    () => ({ duration: u ? q : 0 }),
+    [u]
   );
-  return r === "inline" ? /* @__PURE__ */ C(
-    q,
+  return t === "inline" ? /* @__PURE__ */ $(
+    W,
     {
-      contextValue: P,
-      panelClassName: N,
-      inlineWrapperClassName: x,
+      contextValue: O,
+      panelClassName: P,
+      inlineWrapperClassName: I,
       resolvedPosition: n,
-      dividerBefore: M,
-      dividerInner: b,
+      dividerBefore: S,
+      dividerInner: A,
       dividerAfter: B,
-      open: d,
-      transitionConfig: O,
-      ...l,
+      dividerColor: c,
+      open: p,
+      transitionConfig: C,
+      ...i,
       children: m
     }
-  ) : /* @__PURE__ */ C(
-    U,
+  ) : /* @__PURE__ */ $(
+    G,
     {
-      contextValue: P,
-      panelClassName: N,
+      contextValue: O,
+      panelClassName: P,
       resolvedPosition: n,
-      showDivider: I,
+      showDivider: b,
+      dividerColor: c,
       modalType: s,
-      open: d,
-      onOpenChange: y,
-      transitionConfig: O,
-      ...l,
+      open: p,
+      onOpenChange: M,
+      transitionConfig: C,
+      ...i,
       children: m
     }
   );
 };
-i.displayName = "Panel";
-i.Header = S;
-i.Body = V;
-i.Footer = A;
+l.displayName = "Panel";
+l.Header = V;
+l.Body = F;
+l.Footer = H;
 export {
-  i as Panel
+  l as Panel
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),d=400,f=t=>t||"end",P=(t,s)=>{const e=t&&s!=="full";return{showDivider:e,dividerBefore:e&&s!=="start"&&s!=="bottom",dividerInner:e&&s==="bottom",dividerAfter:e&&s==="start"}},a=(t,s)=>{if(t!=="isModal")return t==="alert"?{escapeKey:!1,outsidePress:!1}:{escapeKey:!1,outsidePress:s??!1}},v=t=>t==="escape-key"?"escapeKey":t==="outside-press"?"outsidePress":"programmatic",N=(t,s)=>{const e=u.useCallback(i=>{if(!t){s==null||s(!1);return}const r=t(i);r instanceof Promise?r.then(l=>{l&&(s==null||s(!1))}).catch(()=>{}):r&&(s==null||s(!1))},[t,s]),c=u.useCallback((i,r,l)=>{i?s==null||s(!0):e(v(l))},[s,e]);return{requestClose:e,handleOverlayOpenChange:c}};exports.PANEL_TRANSITION_DURATION_MS=d;exports.getPanelDismissConfig=a;exports.getPanelDividerState=P;exports.getResolvedPanelPosition=f;exports.usePanelClose=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),d=400,f="01",P=t=>t||"end",a=(t,s)=>{const e=t&&s!=="full";return{showDivider:e,dividerBefore:e&&s!=="start"&&s!=="bottom",dividerInner:e&&s==="bottom",dividerAfter:e&&s==="start"}},D=(t,s)=>{if(t!=="isModal")return t==="alert"?{escapeKey:!1,outsidePress:!1}:{escapeKey:!1,outsidePress:s??!1}},_=t=>t==="escape-key"?"escapeKey":t==="outside-press"?"outsidePress":"programmatic",v=(t,s)=>{const e=c.useCallback(i=>{if(!t){s==null||s(!1);return}const r=t(i);r instanceof Promise?r.then(l=>{l&&(s==null||s(!1))}).catch(()=>{}):r&&(s==null||s(!1))},[t,s]),u=c.useCallback((i,r,l)=>{i?s==null||s(!0):e(_(l))},[s,e]);return{requestClose:e,handleOverlayOpenChange:u}};exports.DEFAULT_PANEL_DIVIDER_COLOR=f;exports.PANEL_TRANSITION_DURATION_MS=d;exports.getPanelDismissConfig=D;exports.getPanelDividerState=a;exports.getResolvedPanelPosition=P;exports.usePanelClose=v;

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

@@ -1,6 +1,7 @@
 import { OpenChangeReason } from '@floating-ui/react';
-import { PanelCloseReason, PanelModalType, PanelPosition, PanelProps } from './Panel.types';
+import { PanelCloseReason, PanelDividerColor, PanelModalType, PanelPosition, PanelProps } from './Panel.types';
 export declare const PANEL_TRANSITION_DURATION_MS = 400;
+export declare const DEFAULT_PANEL_DIVIDER_COLOR: PanelDividerColor;
 export declare const getResolvedPanelPosition: (position?: PanelPosition) => PanelPosition;
 export declare const getPanelDividerState: (divider: boolean, position?: PanelPosition) => {
     showDivider: boolean;

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

@@ -1,5 +1,5 @@
 import { useCallback as c } from "react";
-const P = 400, v = (t) => t || "end", m = (t, s) => {
+const P = 400, v = "01", m = (t) => t || "end", D = (t, s) => {
   const r = t && s !== "full";
   return {
     showDivider: r,
@@ -9,10 +9,10 @@ const P = 400, v = (t) => t || "end", m = (t, s) => {
     dividerInner: r && s === "bottom",
     dividerAfter: r && s === "start"
   };
-}, a = (t, s) => {
+}, _ = (t, s) => {
   if (t !== "isModal")
     return t === "alert" ? { escapeKey: !1, outsidePress: !1 } : { escapeKey: !1, outsidePress: s ?? !1 };
-}, u = (t) => t === "escape-key" ? "escapeKey" : t === "outside-press" ? "outsidePress" : "programmatic", y = (t, s) => {
+}, u = (t) => t === "escape-key" ? "escapeKey" : t === "outside-press" ? "outsidePress" : "programmatic", a = (t, s) => {
   const r = c(
     (i) => {
       if (!t) {
@@ -35,9 +35,10 @@ const P = 400, v = (t) => t || "end", m = (t, s) => {
   return { requestClose: r, handleOverlayOpenChange: f };
 };
 export {
+  v as DEFAULT_PANEL_DIVIDER_COLOR,
   P as PANEL_TRANSITION_DURATION_MS,
-  a as getPanelDismissConfig,
-  m as getPanelDividerState,
-  v as getResolvedPanelPosition,
-  y as usePanelClose
+  _ as getPanelDismissConfig,
+  D as getPanelDividerState,
+  m as getResolvedPanelPosition,
+  a as usePanelClose
 };