@flipdish/ui-library 0.46.1 → 0.47.0

package/dist/components/organisms/SidePanel/components/SidePanelContent.cjs

@@ -5,11 +5,11 @@ var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 
 /** The scrolling body. It takes the height the header and footer leave. */
-const SidePanelContent = ({ className, 'data-testid': dataTestId, ...props }) => {
+const SidePanelContent = ({ className, padding = 'default', 'data-testid': dataTestId, ...props }) => {
     const prefix = testIdUtils.useTestIdPrefix();
     return (jsxRuntime.jsx("div", { ...props, "data-testid": dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'content') : undefined), 
         // The header carries the space above; this carries the space below, so the last item never sits on the footer.
-        className: cx.cx('flex min-h-0 w-full flex-1 flex-col gap-6 overflow-y-auto px-4 pb-6 lg:px-6', className) }));
+        className: cx.cx('flex min-h-0 w-full flex-1 flex-col overflow-y-auto', padding === 'default' && 'gap-6 px-4 pb-6 lg:px-6', className) }));
 };
 SidePanelContent.displayName = 'SidePanelContent';
 

package/dist/components/organisms/SidePanel/components/SidePanelContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelContent.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;AAWA;AACO,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AAC5G,IAAA,MAAM,MAAM,GAAGA,2BAAe,EAAE;IAEhC,QACEC,2BACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;;QAE/E,SAAS,EAAEC,KAAE,CAAC,6EAA6E,EAAE,SAAS,CAAC,EAAA,CACvG;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;"}
+{"version":3,"file":"SidePanelContent.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;AAiBA;MACa,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AACjI,IAAA,MAAM,MAAM,GAAGA,2BAAe,EAAE;IAEhC,QACEC,2BACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;;AAE/E,QAAA,SAAS,EAAEC,KAAE,CAAC,qDAAqD,EAAE,OAAO,KAAK,SAAS,IAAI,yBAAyB,EAAE,SAAS,CAAC,EAAA,CACnI;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;"}

package/dist/components/organisms/SidePanel/components/SidePanelContent.d.ts

@@ -1,11 +1,17 @@
 import type { ComponentPropsWithRef } from 'react';
 export type SidePanelContentProps = ComponentPropsWithRef<'div'> & {
+    /**
+     * `default` pads the sides and the end and spaces the children, for content composed of the library's
+     * own parts. `none` gives the children the whole box, edge to edge, for content that lays itself out,
+     * such as an embedded micro-frontend under a `floating` header.
+     */
+    padding?: 'default' | 'none';
     /** Overrides the content's `data-testid` (defaults to `<root>--content`). */
     'data-testid'?: string;
 };
 /** The scrolling body. It takes the height the header and footer leave. */
 export declare const SidePanelContent: {
-    ({ className, "data-testid": dataTestId, ...props }: SidePanelContentProps): import("react").JSX.Element;
+    ({ className, padding, "data-testid": dataTestId, ...props }: SidePanelContentProps): import("react").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=SidePanelContent.d.ts.map

package/dist/components/organisms/SidePanel/components/SidePanelContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACjE,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB;yDAAwD,qBAAqB;;CAWzG,CAAC"}
+{"version":3,"file":"SidePanelContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACjE;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB;kEAA6E,qBAAqB;;CAW9H,CAAC"}

package/dist/components/organisms/SidePanel/components/SidePanelContent.js

@@ -3,11 +3,11 @@ import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 
 /** The scrolling body. It takes the height the header and footer leave. */
-const SidePanelContent = ({ className, 'data-testid': dataTestId, ...props }) => {
+const SidePanelContent = ({ className, padding = 'default', 'data-testid': dataTestId, ...props }) => {
     const prefix = useTestIdPrefix();
     return (jsx("div", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'content') : undefined), 
         // The header carries the space above; this carries the space below, so the last item never sits on the footer.
-        className: cx('flex min-h-0 w-full flex-1 flex-col gap-6 overflow-y-auto px-4 pb-6 lg:px-6', className) }));
+        className: cx('flex min-h-0 w-full flex-1 flex-col overflow-y-auto', padding === 'default' && 'gap-6 px-4 pb-6 lg:px-6', className) }));
 };
 SidePanelContent.displayName = 'SidePanelContent';
 

package/dist/components/organisms/SidePanel/components/SidePanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelContent.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAWA;AACO,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AAC5G,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAEhC,QACEA,gBACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;;QAE/E,SAAS,EAAE,EAAE,CAAC,6EAA6E,EAAE,SAAS,CAAC,EAAA,CACvG;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;"}
+{"version":3,"file":"SidePanelContent.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAiBA;MACa,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AACjI,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAEhC,QACEA,gBACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;;AAE/E,QAAA,SAAS,EAAE,EAAE,CAAC,qDAAqD,EAAE,OAAO,KAAK,SAAS,IAAI,yBAAyB,EAAE,SAAS,CAAC,EAAA,CACnI;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;"}

package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs

@@ -9,13 +9,35 @@ var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var React = require('react');
 var SidePanel_context = require('../providers/SidePanel.context.cjs');
 
-/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
-const SidePanelHeader = ({ className, children, onClose, closeLabel, onBack, backLabel = 'Back', 'data-testid': dataTestId, ...props }) => {
+/** The close button's action, name and test ids, shared by both variants. */
+const useCloseButton = ({ onClose, closeLabel, 'data-testid': dataTestId }) => {
     const panel = React.useContext(SidePanel_context.SidePanelContext);
     const prefix = testIdUtils.useTestIdPrefix();
-    return (jsxRuntime.jsxs("header", { ...props, "data-testid": dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'header') : undefined), className: cx.cx('relative w-full px-4 pt-6 pb-8 lg:px-6', onBack && 'flex items-center gap-3', className), children: [onBack && (jsxRuntime.jsx(UtilityButton.ButtonUtility, { icon: uiIcons.ArrowLeft, tooltip: backLabel, color: "tertiary", size: "sm", 
+    return {
+        headerTestId: dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'header') : undefined),
+        closeTestId: prefix ? testIdUtils.joinTestId(prefix, 'close') : undefined,
+        backTestId: prefix ? testIdUtils.joinTestId(prefix, 'back') : undefined,
+        label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined),
+        close: onClose ?? panel?.close,
+    };
+};
+const SidePanelTitleHeader = ({ className, children, variant: _variant, onClose, closeLabel, onBack, backLabel = 'Back', 'data-testid': dataTestId, ...props }) => {
+    const { headerTestId, closeTestId, backTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
+    return (jsxRuntime.jsxs("header", { ...props, "data-testid": headerTestId, className: cx.cx('relative w-full px-4 pt-6 pb-8 lg:px-6', onBack && 'flex items-center gap-3', className), children: [onBack && (jsxRuntime.jsx(UtilityButton.ButtonUtility, { icon: uiIcons.ArrowLeft, tooltip: backLabel, color: "tertiary", size: "sm", 
                 // 32px tall in a 28px title line: pulled in so the header is as tall as one without a back button.
-                className: "-my-0.5", onClick: onBack, "data-testid": prefix ? testIdUtils.joinTestId(prefix, 'back') : undefined })), onBack ? jsxRuntime.jsx("div", { className: "min-w-0 flex-1 pr-12", children: children }) : children, jsxRuntime.jsx(CloseButton.CloseButton, { size: "md", label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined), className: "absolute top-3 right-3 shrink-0", onClick: onClose ?? panel?.close, "data-testid": prefix ? testIdUtils.joinTestId(prefix, 'close') : undefined })] }));
+                className: "-my-0.5", onClick: onBack, "data-testid": backTestId })), onBack ? jsxRuntime.jsx("div", { className: "min-w-0 flex-1 pr-12", children: children }) : children, jsxRuntime.jsx(CloseButton.CloseButton, { size: "md", label: label, className: "absolute top-3 right-3 shrink-0", onClick: close, "data-testid": closeTestId })] }));
+};
+const SidePanelFloatingHeader = ({ className, children: _children, variant: _variant, onClose, closeLabel, onBack: _onBack, backLabel: _backLabel, 'data-testid': dataTestId, ...props }) => {
+    const { headerTestId, closeTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
+    return (
+    // A div, not header: it holds one button and no introductory content, which the embedded content's own header carries.
+    jsxRuntime.jsx("div", { ...props, "data-testid": headerTestId, className: cx.cx('absolute top-3 right-3 z-10', className), children: jsxRuntime.jsx(CloseButton.CloseButton, { size: "md", label: label, onClick: close, "data-testid": closeTestId }) }));
+};
+/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
+const SidePanelHeader = (props) => {
+    if (props.variant === 'floating')
+        return jsxRuntime.jsx(SidePanelFloatingHeader, { ...props });
+    return jsxRuntime.jsx(SidePanelTitleHeader, { ...props });
 };
 SidePanelHeader.displayName = 'SidePanelHeader';
 

package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelHeader.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["useContext","SidePanelContext","useTestIdPrefix","_jsxs","joinTestId","cx","_jsx","ButtonUtility","ArrowLeft","CloseButton"],"mappings":";;;;;;;;;;;AAwBA;AACO,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,UAAU,EACV,MAAM,EACN,SAAS,GAAG,MAAM,EAClB,aAAa,EAAE,UAAU,EACzB,GAAG,KAAK,EACa,KAAI;AACzB,IAAA,MAAM,KAAK,GAAGA,gBAAU,CAACC,kCAAgB,CAAC;AAC1C,IAAA,MAAM,MAAM,GAAGC,2BAAe,EAAE;IAEhC,QACEC,eAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,EAC9E,SAAS,EAAEC,KAAE,CAAC,wCAAwC,EAAE,MAAM,IAAI,yBAAyB,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAEtG,MAAM,KACLC,cAAA,CAACC,2BAAa,EAAA,EACZ,IAAI,EAAEC,iBAAS,EACf,OAAO,EAAE,SAAS,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,IAAI;;gBAET,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,MAAM,EAAA,aAAA,EACF,MAAM,GAAGJ,sBAAU,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,EAAA,CAC5D,CACH,EACA,MAAM,GAAGE,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,YAAE,QAAQ,EAAA,CAAO,GAAG,QAAQ,EAC3EA,cAAA,CAACG,uBAAW,EAAA,EACV,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,UAAU,KAAK,KAAK,GAAG,CAAA,MAAA,EAAS,KAAK,CAAC,KAAK,EAAE,GAAG,SAAS,CAAC,EACjE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,EAAA,aAAA,EACnB,MAAM,GAAGL,sBAAU,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAAA,CAC7D,CAAA,EAAA,CACK;AAEb;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;"}
+{"version":3,"file":"SidePanelHeader.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["useContext","SidePanelContext","useTestIdPrefix","joinTestId","_jsxs","cx","_jsx","ButtonUtility","ArrowLeft","CloseButton"],"mappings":"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"}

package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts

@@ -1,19 +1,38 @@
 import type { ComponentPropsWithRef } from 'react';
-export interface SidePanelHeaderProps extends ComponentPropsWithRef<'header'> {
+interface SidePanelHeaderBaseProps {
     /** Runs instead of closing the panel when the close button is pressed. */
     onClose?: () => void;
     /** Accessible name of the close button. Defaults to "Close" followed by the panel's `aria-label`. */
     closeLabel?: string;
+    /** Overrides the header's `data-testid` (defaults to `<root>--header`). */
+    'data-testid'?: string;
+}
+interface SidePanelHeaderDefaultProps extends SidePanelHeaderBaseProps, ComponentPropsWithRef<'header'> {
+    /** `default` is the title band above the content. */
+    variant?: 'default';
     /** Shows a back button before the title, for a panel that is the second step of a flow; called when it is pressed. */
     onBack?: () => void;
     /** Accessible name of the back button. Defaults to "Back". */
     backLabel?: string;
-    /** Overrides the header's `data-testid` (defaults to `<root>--header`). */
-    'data-testid'?: string;
 }
+interface SidePanelHeaderFloatingProps extends SidePanelHeaderBaseProps, ComponentPropsWithRef<'div'> {
+    /**
+     * `floating` takes no height: only the close button renders, over the top-right corner of the content, so
+     * content such as an embedded micro-frontend gets the panel's full height. The content must keep that corner,
+     * `--fd-side-panel-close-reserve` square, free of its own controls.
+     */
+    variant: 'floating';
+    /** A floating header has no title: the panel is named by `aria-label`, and the content carries its own heading. */
+    children?: never;
+    /** A floating header has no back button; it is for a single full-height view. A footer still composes below the content. */
+    onBack?: never;
+    backLabel?: never;
+}
+export type SidePanelHeaderProps = SidePanelHeaderDefaultProps | SidePanelHeaderFloatingProps;
 /** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
 export declare const SidePanelHeader: {
-    ({ className, children, onClose, closeLabel, onBack, backLabel, "data-testid": dataTestId, ...props }: SidePanelHeaderProps): import("react").JSX.Element;
+    (props: SidePanelHeaderProps): import("react").JSX.Element;
     displayName: string;
 };
+export {};
 //# sourceMappingURL=SidePanelHeader.d.ts.map

package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC3E,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sHAAsH;IACtH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,sHAAsH;AACtH,eAAO,MAAM,eAAe;2GASzB,oBAAoB;;CAgCtB,CAAC"}
+{"version":3,"file":"SidePanelHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,UAAU,wBAAwB;IAChC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,2BAA4B,SAAQ,wBAAwB,EAAE,qBAAqB,CAAC,QAAQ,CAAC;IACrG,qDAAqD;IACrD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sHAAsH;IACtH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,4BAA6B,SAAQ,wBAAwB,EAAE,qBAAqB,CAAC,KAAK,CAAC;IACnG;;;;OAIG;IACH,OAAO,EAAE,UAAU,CAAC;IACpB,mHAAmH;IACnH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,4HAA4H;IAC5H,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB;AAED,MAAM,MAAM,oBAAoB,GAAG,2BAA2B,GAAG,4BAA4B,CAAC;AA0E9F,sHAAsH;AACtH,eAAO,MAAM,eAAe;YAAW,oBAAoB;;CAG1D,CAAC"}

package/dist/components/organisms/SidePanel/components/SidePanelHeader.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { ArrowLeft } from '@flipdish/ui-icons';
 import { CloseButton } from '@flipdish/ui-library/components/atoms/CloseButton';
 import { ButtonUtility } from '@flipdish/ui-library/components/atoms/UtilityButton';
@@ -7,13 +7,35 @@ import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/test
 import { useContext } from 'react';
 import { SidePanelContext } from '../providers/SidePanel.context.js';
 
-/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
-const SidePanelHeader = ({ className, children, onClose, closeLabel, onBack, backLabel = 'Back', 'data-testid': dataTestId, ...props }) => {
+/** The close button's action, name and test ids, shared by both variants. */
+const useCloseButton = ({ onClose, closeLabel, 'data-testid': dataTestId }) => {
     const panel = useContext(SidePanelContext);
     const prefix = useTestIdPrefix();
-    return (jsxs("header", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'header') : undefined), className: cx('relative w-full px-4 pt-6 pb-8 lg:px-6', onBack && 'flex items-center gap-3', className), children: [onBack && (jsx(ButtonUtility, { icon: ArrowLeft, tooltip: backLabel, color: "tertiary", size: "sm", 
+    return {
+        headerTestId: dataTestId ?? (prefix ? joinTestId(prefix, 'header') : undefined),
+        closeTestId: prefix ? joinTestId(prefix, 'close') : undefined,
+        backTestId: prefix ? joinTestId(prefix, 'back') : undefined,
+        label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined),
+        close: onClose ?? panel?.close,
+    };
+};
+const SidePanelTitleHeader = ({ className, children, variant: _variant, onClose, closeLabel, onBack, backLabel = 'Back', 'data-testid': dataTestId, ...props }) => {
+    const { headerTestId, closeTestId, backTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
+    return (jsxs("header", { ...props, "data-testid": headerTestId, className: cx('relative w-full px-4 pt-6 pb-8 lg:px-6', onBack && 'flex items-center gap-3', className), children: [onBack && (jsx(ButtonUtility, { icon: ArrowLeft, tooltip: backLabel, color: "tertiary", size: "sm", 
                 // 32px tall in a 28px title line: pulled in so the header is as tall as one without a back button.
-                className: "-my-0.5", onClick: onBack, "data-testid": prefix ? joinTestId(prefix, 'back') : undefined })), onBack ? jsx("div", { className: "min-w-0 flex-1 pr-12", children: children }) : children, jsx(CloseButton, { size: "md", label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined), className: "absolute top-3 right-3 shrink-0", onClick: onClose ?? panel?.close, "data-testid": prefix ? joinTestId(prefix, 'close') : undefined })] }));
+                className: "-my-0.5", onClick: onBack, "data-testid": backTestId })), onBack ? jsx("div", { className: "min-w-0 flex-1 pr-12", children: children }) : children, jsx(CloseButton, { size: "md", label: label, className: "absolute top-3 right-3 shrink-0", onClick: close, "data-testid": closeTestId })] }));
+};
+const SidePanelFloatingHeader = ({ className, children: _children, variant: _variant, onClose, closeLabel, onBack: _onBack, backLabel: _backLabel, 'data-testid': dataTestId, ...props }) => {
+    const { headerTestId, closeTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
+    return (
+    // A div, not header: it holds one button and no introductory content, which the embedded content's own header carries.
+    jsx("div", { ...props, "data-testid": headerTestId, className: cx('absolute top-3 right-3 z-10', className), children: jsx(CloseButton, { size: "md", label: label, onClick: close, "data-testid": closeTestId }) }));
+};
+/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
+const SidePanelHeader = (props) => {
+    if (props.variant === 'floating')
+        return jsx(SidePanelFloatingHeader, { ...props });
+    return jsx(SidePanelTitleHeader, { ...props });
 };
 SidePanelHeader.displayName = 'SidePanelHeader';
 

package/dist/components/organisms/SidePanel/components/SidePanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelHeader.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAwBA;AACO,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,UAAU,EACV,MAAM,EACN,SAAS,GAAG,MAAM,EAClB,aAAa,EAAE,UAAU,EACzB,GAAG,KAAK,EACa,KAAI;AACzB,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC;AAC1C,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAEhC,QACEA,IAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,EAC9E,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,MAAM,IAAI,yBAAyB,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAEtG,MAAM,KACLC,GAAA,CAAC,aAAa,EAAA,EACZ,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,SAAS,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,IAAI;;gBAET,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,MAAM,EAAA,aAAA,EACF,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,EAAA,CAC5D,CACH,EACA,MAAM,GAAGA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,YAAE,QAAQ,EAAA,CAAO,GAAG,QAAQ,EAC3EA,GAAA,CAAC,WAAW,EAAA,EACV,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,UAAU,KAAK,KAAK,GAAG,CAAA,MAAA,EAAS,KAAK,CAAC,KAAK,EAAE,GAAG,SAAS,CAAC,EACjE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,EAAA,aAAA,EACnB,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAAA,CAC7D,CAAA,EAAA,CACK;AAEb;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;"}
+{"version":3,"file":"SidePanelHeader.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs

@@ -9,6 +9,12 @@ var pageCover_utils = require('../../../../utilities/__internal__/pageCoverUtils
 
 /** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
 const SIDE_PANEL_WIDTH = 400;
+/**
+ * Side of the square, in pixels, that a `floating` header's close button occupies in the panel's top-right corner: the 40px
+ * button, its 12px inset and a 4px margin. Exposed to the content as `--fd-side-panel-close-reserve`, so a micro-frontend in
+ * another React root can read it from CSS.
+ */
+const SIDE_PANEL_CLOSE_RESERVE = 56;
 // Critically damped (damping = 2 * sqrt(stiffness)): a lower damping overshoots the width by a pixel and settles back, which reads as a wobble.
 const SPRING = { type: 'spring', damping: 30, stiffness: 220 };
 const DOCKED = {
@@ -46,12 +52,13 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
     const motionStates = isDesktop ? DOCKED : FULL_PAGE;
     return (jsxRuntime.jsx(react.motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId, 
         // Focusable by script only, so opening can land on the region without adding a tab stop.
-        tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING, 
+        tabIndex: -1, onFocusCapture: onFocusCapture, style: { '--fd-side-panel-close-reserve': `${SIDE_PANEL_CLOSE_RESERVE}px` }, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING, 
         // overflow-hidden clips the fixed-width content while the panel's own width animates. justify-end pins the content to the
         // right edge, which stays put, so it never sits on the animated fractional left edge where images snap to pixels and shake.
-        className: cx.cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsxRuntime.jsx("div", { className: cx.cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsxRuntime.jsx("div", { className: cx.cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
+        className: cx.cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsxRuntime.jsx("div", { className: cx.cx('relative flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsxRuntime.jsx("div", { className: cx.cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
 };
 
+exports.SIDE_PANEL_CLOSE_RESERVE = SIDE_PANEL_CLOSE_RESERVE;
 exports.SIDE_PANEL_WIDTH = SIDE_PANEL_WIDTH;
 exports.SidePanelRegion = SidePanelRegion;
 //# sourceMappingURL=SidePanelRegion.cjs.map

package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useEffect","dispatchPageCover","usePanelFocus","_jsx","motion","cx"],"mappings":"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"}
+{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useEffect","dispatchPageCover","usePanelFocus","_jsx","motion","cx"],"mappings":"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"}

package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts

@@ -1,6 +1,12 @@
 import type { ReactNode } from 'react';
 /** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
 export declare const SIDE_PANEL_WIDTH = 400;
+/**
+ * Side of the square, in pixels, that a `floating` header's close button occupies in the panel's top-right corner: the 40px
+ * button, its 12px inset and a 4px margin. Exposed to the content as `--fd-side-panel-close-reserve`, so a micro-frontend in
+ * another React root can read it from CSS.
+ */
+export declare const SIDE_PANEL_CLOSE_RESERVE = 56;
 interface SidePanelRegionProps {
     'aria-label': string;
     children: ReactNode;

package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAepC,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,2GAA2G;AAC3G,eAAO,MAAM,eAAe,GAAI,sGAQ7B,oBAAoB,gCA4DtB,CAAC"}
+{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAe3C,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,2GAA2G;AAC3G,eAAO,MAAM,eAAe,GAAI,sGAQ7B,oBAAoB,gCA6DtB,CAAC"}

package/dist/components/organisms/SidePanel/components/SidePanelRegion.js

@@ -7,6 +7,12 @@ import { dispatchPageCover } from '../../../../utilities/__internal__/pageCoverU
 
 /** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
 const SIDE_PANEL_WIDTH = 400;
+/**
+ * Side of the square, in pixels, that a `floating` header's close button occupies in the panel's top-right corner: the 40px
+ * button, its 12px inset and a 4px margin. Exposed to the content as `--fd-side-panel-close-reserve`, so a micro-frontend in
+ * another React root can read it from CSS.
+ */
+const SIDE_PANEL_CLOSE_RESERVE = 56;
 // Critically damped (damping = 2 * sqrt(stiffness)): a lower damping overshoots the width by a pixel and settles back, which reads as a wobble.
 const SPRING = { type: 'spring', damping: 30, stiffness: 220 };
 const DOCKED = {
@@ -44,11 +50,11 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
     const motionStates = isDesktop ? DOCKED : FULL_PAGE;
     return (jsx(motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId, 
         // Focusable by script only, so opening can land on the region without adding a tab stop.
-        tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING, 
+        tabIndex: -1, onFocusCapture: onFocusCapture, style: { '--fd-side-panel-close-reserve': `${SIDE_PANEL_CLOSE_RESERVE}px` }, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING, 
         // overflow-hidden clips the fixed-width content while the panel's own width animates. justify-end pins the content to the
         // right edge, which stays put, so it never sits on the animated fractional left edge where images snap to pixels and shake.
-        className: cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsx("div", { className: cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsx("div", { className: cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
+        className: cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsx("div", { className: cx('relative flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsx("div", { className: cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
 };
 
-export { SIDE_PANEL_WIDTH, SidePanelRegion };
+export { SIDE_PANEL_CLOSE_RESERVE, SIDE_PANEL_WIDTH, SidePanelRegion };
 //# sourceMappingURL=SidePanelRegion.js.map

package/dist/components/organisms/SidePanel/components/SidePanelRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AASA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,EAAE;;;AAI7C,IAAA,MAAM,UAAU,GAAG,SAAS,IAAI,CAAC,SAAS;IAC1C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,UAAU,IAAI,QAAQ,CAAC,OAAO;AAAE,YAAA,iBAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC;AACzE,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpE,SAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEA,GAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;AAEnB,QAAA,QAAQ,EAAE,EAAE,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,YAAY,CAAC,MAAM,EAC5B,OAAO,EAAE,YAAY,CAAC,IAAI,EAC1B,IAAI,EAAE,YAAY,CAAC,MAAM,EACzB,UAAU,EAAE,kBAAkB,IAAI,oBAAoB,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,MAAM;;;QAGjF,SAAS,EAAE,EAAE,CACX,kJAAkJ,EAClJ,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,YAGDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAE3GA,GAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,iBAAiB,CAAC,OAAO,IAAI,4DAA4D,CAAC,EAAA,QAAA,EAEvI,QAAQ,EAAA,EAHJ,UAAU,CAIX,EAAA,CACF,EAAA,CACO;AAEnB;;"}
+{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

package/dist/components/organisms/SidePanel/index.cjs

@@ -44,6 +44,7 @@ SidePanel.Header = SidePanelHeader.SidePanelHeader;
 SidePanel.Content = SidePanelContent.SidePanelContent;
 SidePanel.Footer = SidePanelFooter.SidePanelFooter;
 
+exports.SIDE_PANEL_CLOSE_RESERVE = SidePanelRegion.SIDE_PANEL_CLOSE_RESERVE;
 exports.SIDE_PANEL_WIDTH = SidePanelRegion.SIDE_PANEL_WIDTH;
 exports.SidePanel = SidePanel;
 //# sourceMappingURL=index.cjs.map

package/dist/components/organisms/SidePanel/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useContext","PageCoverContext","useOpenOnMount","useEffect","_jsx","SidePanelContext","TestIdProvider","AnimatePresence","SidePanelRegion","SidePanelHeader","SidePanelContent","SidePanelFooter"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAGC,6BAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEC,cAAA,CAACC,kCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFD,eAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,cAAA,CAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EARL,YAAY,CASA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC;;;;;;;AAOG;AACH,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAGC,+BAAe;AAClC,SAAS,CAAC,OAAO,GAAGC,iCAAgB;AACpC,SAAS,CAAC,MAAM,GAAGC,+BAAe;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useContext","PageCoverContext","useOpenOnMount","useEffect","_jsx","SidePanelContext","TestIdProvider","AnimatePresence","SidePanelRegion","SidePanelHeader","SidePanelContent","SidePanelFooter"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAGC,6BAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEC,cAAA,CAACC,kCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFD,eAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,cAAA,CAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EARL,YAAY,CASA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC;;;;;;;AAOG;AACH,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAGC,+BAAe;AAClC,SAAS,CAAC,OAAO,GAAGC,iCAAgB;AACpC,SAAS,CAAC,MAAM,GAAGC,+BAAe;;;;"}

package/dist/components/organisms/SidePanel/index.d.ts

@@ -5,7 +5,7 @@ import { SidePanelHeader } from './components/SidePanelHeader';
 export type { SidePanelContentProps } from './components/SidePanelContent';
 export type { SidePanelFooterProps } from './components/SidePanelFooter';
 export type { SidePanelHeaderProps } from './components/SidePanelHeader';
-export { SIDE_PANEL_WIDTH } from './components/SidePanelRegion';
+export { SIDE_PANEL_CLOSE_RESERVE, SIDE_PANEL_WIDTH } from './components/SidePanelRegion';
 export interface SidePanelProps {
     /**
      * Whether the panel is open. Share it with the control that opens the panel, e.g. `assistant.isOpen`

package/dist/components/organisms/SidePanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAM/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB,qIAAqI;IACrI,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qHAAqH;IACrH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,aAAa;qHAQhB,cAAc,GAAG,SAAS;;CAqC5B,CAAC;AAGF;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,EAAoB,OAAO,aAAa,GAAG;IACxD,MAAM,EAAE,OAAO,eAAe,CAAC;IAC/B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,MAAM,EAAE,OAAO,eAAe,CAAC;CAChC,CAAC;AAMF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAM/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAE1F,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB,qIAAqI;IACrI,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qHAAqH;IACrH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,aAAa;qHAQhB,cAAc,GAAG,SAAS;;CAqC5B,CAAC;AAGF;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,EAAoB,OAAO,aAAa,GAAG;IACxD,MAAM,EAAE,OAAO,eAAe,CAAC;IAC/B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,MAAM,EAAE,OAAO,eAAe,CAAC;CAChC,CAAC;AAMF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/organisms/SidePanel/index.js

@@ -7,7 +7,7 @@ import { SidePanelContent } from './components/SidePanelContent.js';
 import { SidePanelFooter } from './components/SidePanelFooter.js';
 import { SidePanelHeader } from './components/SidePanelHeader.js';
 import { SidePanelRegion } from './components/SidePanelRegion.js';
-export { SIDE_PANEL_WIDTH } from './components/SidePanelRegion.js';
+export { SIDE_PANEL_CLOSE_RESERVE, SIDE_PANEL_WIDTH } from './components/SidePanelRegion.js';
 import { useOpenOnMount } from './hooks/useOpenOnMount.js';
 import { PageCoverContext } from './providers/PageCover.context.js';
 import { SidePanelContext } from './providers/SidePanel.context.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.46.1",
+  "version": "0.47.0",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "imports": {