@flipdish/ui-library 0.32.0 → 0.33.0

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;AAEhC,IAAA,QACEC,cAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC,EAC/E,SAAS,EAAEC,KAAE,CAAC,wEAAwE,EAAE,SAAS,CAAC,EAAA,CAClG;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":";;;;;;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;;"}

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;;CAUzG,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,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB;yDAAwD,qBAAqB;;CAWzG,CAAC"}

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

@@ -5,7 +5,9 @@ import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/test
 /** The scrolling body. It takes the height the header and footer leave. */
 const SidePanelContent = ({ className, 'data-testid': dataTestId, ...props }) => {
     const prefix = useTestIdPrefix();
-    return (jsx("div", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'content') : undefined), className: cx('flex min-h-0 w-full flex-1 flex-col gap-6 overflow-y-auto px-4 lg:px-6', className) }));
+    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) }));
 };
 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;AAEhC,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC,EAC/E,SAAS,EAAE,EAAE,CAAC,wEAAwE,EAAE,SAAS,CAAC,EAAA,CAClG;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":";;;;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;;"}

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

@@ -4,10 +4,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 
-/** Pinned actions under the content, such as a message input. */
-const SidePanelFooter = ({ className, 'data-testid': dataTestId, ...props }) => {
+/** Pinned actions under the content, such as a message input or a primary button. */
+const SidePanelFooter = ({ className, variant = 'plain', 'data-testid': dataTestId, ...props }) => {
     const prefix = testIdUtils.useTestIdPrefix();
-    return (jsxRuntime.jsx("footer", { ...props, "data-testid": dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'footer') : undefined), className: cx.cx('w-full px-4 pb-4 lg:px-6 lg:pb-5', className) }));
+    return (jsxRuntime.jsx("footer", { ...props, "data-testid": dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'footer') : undefined), className: cx.cx('w-full px-4 pb-4 lg:px-6 lg:pb-5', variant === 'actions' && 'flex items-center justify-end gap-3 border-t border-secondary pt-4', className) }));
 };
 SidePanelFooter.displayName = 'SidePanelFooter';
 

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

@@ -1 +1 @@
-{"version":3,"file":"SidePanelFooter.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelFooter.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;AAWA;AACO,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AAC1G,IAAA,MAAM,MAAM,GAAGA,2BAAe,EAAE;AAEhC,IAAA,QACEC,cAAA,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,kCAAkC,EAAE,SAAS,CAAC,EAAA,CAC5D;AAEN;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;"}
+{"version":3,"file":"SidePanelFooter.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelFooter.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;AAgBA;MACa,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AAC7H,IAAA,MAAM,MAAM,GAAGA,2BAAe,EAAE;AAEhC,IAAA,QACEC,cAAA,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,CACX,kCAAkC,EAClC,OAAO,KAAK,SAAS,IAAI,oEAAoE,EAC7F,SAAS,CACV,EAAA,CACD;AAEN;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;"}

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

@@ -1,11 +1,16 @@
 import type { ComponentPropsWithRef } from 'react';
 export type SidePanelFooterProps = ComponentPropsWithRef<'footer'> & {
+    /**
+     * `plain` pads the content, for a message input. `actions` adds the top border of the design's
+     * action bar and right-aligns its children, for one or two buttons.
+     */
+    variant?: 'plain' | 'actions';
     /** Overrides the footer's `data-testid` (defaults to `<root>--footer`). */
     'data-testid'?: string;
 };
-/** Pinned actions under the content, such as a message input. */
+/** Pinned actions under the content, such as a message input or a primary button. */
 export declare const SidePanelFooter: {
-    ({ className, "data-testid": dataTestId, ...props }: SidePanelFooterProps): import("react").JSX.Element;
+    ({ className, variant, "data-testid": dataTestId, ...props }: SidePanelFooterProps): import("react").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=SidePanelFooter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidePanelFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelFooter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,QAAQ,CAAC,GAAG;IACnE,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,eAAe;yDAAwD,oBAAoB;;CAUvG,CAAC"}
+{"version":3,"file":"SidePanelFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelFooter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,QAAQ,CAAC,GAAG;IACnE;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,qFAAqF;AACrF,eAAO,MAAM,eAAe;kEAA2E,oBAAoB;;CAc1H,CAAC"}

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

@@ -2,10 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 
-/** Pinned actions under the content, such as a message input. */
-const SidePanelFooter = ({ className, 'data-testid': dataTestId, ...props }) => {
+/** Pinned actions under the content, such as a message input or a primary button. */
+const SidePanelFooter = ({ className, variant = 'plain', 'data-testid': dataTestId, ...props }) => {
     const prefix = useTestIdPrefix();
-    return (jsx("footer", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'footer') : undefined), className: cx('w-full px-4 pb-4 lg:px-6 lg:pb-5', className) }));
+    return (jsx("footer", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'footer') : undefined), className: cx('w-full px-4 pb-4 lg:px-6 lg:pb-5', variant === 'actions' && 'flex items-center justify-end gap-3 border-t border-secondary pt-4', className) }));
 };
 SidePanelFooter.displayName = 'SidePanelFooter';
 

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

@@ -1 +1 @@
-{"version":3,"file":"SidePanelFooter.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelFooter.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAWA;AACO,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AAC1G,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAEhC,IAAA,QACEA,GAAA,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,kCAAkC,EAAE,SAAS,CAAC,EAAA,CAC5D;AAEN;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;"}
+{"version":3,"file":"SidePanelFooter.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelFooter.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAgBA;MACa,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AAC7H,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAEhC,IAAA,QACEA,GAAA,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,CACX,kCAAkC,EAClC,OAAO,KAAK,SAAS,IAAI,oEAAoE,EAC7F,SAAS,CACV,EAAA,CACD;AAEN;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;"}

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

@@ -1,17 +1,21 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
 var CloseButton = require('@flipdish/ui-library/components/atoms/CloseButton');
+var UtilityButton = require('@flipdish/ui-library/components/atoms/UtilityButton');
 var cx = require('@flipdish/ui-library/utilities/cx');
 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. */
-const SidePanelHeader = ({ className, children, onClose, closeLabel, 'data-testid': dataTestId, ...props }) => {
+/** 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 }) => {
     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', className), 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 })] }));
+    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", 
+                // 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 })] }));
 };
 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","CloseButton"],"mappings":";;;;;;;;;AAkBA;MACa,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AACzI,IAAA,MAAM,KAAK,GAAGA,gBAAU,CAACC,kCAAgB,CAAC;AAC1C,IAAA,MAAM,MAAM,GAAGC,2BAAe,EAAE;AAEhC,IAAA,QACEC,eAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,iBACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,EAC9E,SAAS,EAAEC,KAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAEjE,QAAQ,EACTC,cAAA,CAACC,uBAAW,IACV,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,UAAU,KAAK,KAAK,GAAG,SAAS,KAAK,CAAC,KAAK,CAAA,CAAE,GAAG,SAAS,CAAC,EACjE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,EAAA,aAAA,EACnB,MAAM,GAAGH,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","_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;;"}

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

@@ -4,12 +4,16 @@ export interface SidePanelHeaderProps extends ComponentPropsWithRef<'header'> {
     onClose?: () => void;
     /** Accessible name of the close button. Defaults to "Close" followed by the panel's `aria-label`. */
     closeLabel?: string;
+    /** 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;
 }
-/** Title area with a close button, which closes the panel unless `onClose` is passed. */
+/** 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, "data-testid": dataTestId, ...props }: SidePanelHeaderProps): import("react").JSX.Element;
+    ({ className, children, onClose, closeLabel, onBack, backLabel, "data-testid": dataTestId, ...props }: SidePanelHeaderProps): import("react").JSX.Element;
     displayName: string;
 };
 //# 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":"AAKA,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,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,yFAAyF;AACzF,eAAO,MAAM,eAAe;wFAAuF,oBAAoB;;CAoBtI,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,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"}

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

@@ -1,15 +1,19 @@
 import { jsxs, jsx } 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';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 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. */
-const SidePanelHeader = ({ className, children, onClose, closeLabel, 'data-testid': dataTestId, ...props }) => {
+/** 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 }) => {
     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', className), 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 })] }));
+    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", 
+                // 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 })] }));
 };
 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":";;;;;;;AAkBA;MACa,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AACzI,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC;AAC1C,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAEhC,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,iBACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,EAC9E,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAEjE,QAAQ,EACTC,GAAA,CAAC,WAAW,IACV,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,UAAU,KAAK,KAAK,GAAG,SAAS,KAAK,CAAC,KAAK,CAAA,CAAE,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":";;;;;;;;;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;;"}

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

@@ -18,11 +18,16 @@ const FULL_PAGE = {
     open: { width: '100%', x: 0 },
 };
 /** The rendered region. A component of its own so it can tell, while animating out, that it is leaving. */
-const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, testId, isDesktop, shouldFocusOnMount }) => {
+const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, contentKey, testId, isDesktop, shouldFocusOnMount, }) => {
     const panelRef = React.useRef(null);
     const isPresent = react.useIsPresent();
     const shouldReduceMotion = react.useReducedMotion();
-    const { onFocusCapture } = usePanelFocus.usePanelFocus({ panelRef, isPresent, isDesktop, shouldFocusOnMount });
+    const { onFocusCapture } = usePanelFocus.usePanelFocus({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey });
+    // The first content arrives with the panel's own opening animation; only a later swap fades in.
+    const firstContentKey = React.useRef(contentKey);
+    const hasSwappedContent = React.useRef(false);
+    if (firstContentKey.current !== contentKey)
+        hasSwappedContent.current = true;
     // Crossing the breakpoint while open swaps the layout at once; only opening and closing animate.
     const previousIsDesktop = React.useRef(isDesktop);
     const hasCrossedBreakpoint = previousIsDesktop.current !== isDesktop;
@@ -34,7 +39,7 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, 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, 
         // overflow-hidden clips the fixed-width content while the panel's own width animates.
-        className: cx.cx('flex h-full min-h-0 shrink-0 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: children }) }));
+        className: cx.cx('flex h-full min-h-0 shrink-0 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) }) }));
 };
 
 exports.SIDE_PANEL_WIDTH = SIDE_PANEL_WIDTH;

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","usePanelFocus","useEffect","_jsx","motion","cx"],"mappings":";;;;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW;AAElF,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;AAWV;MACa,eAAe,GAAG,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAwB,KAAI;AAC/I,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAGC,kBAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAGC,sBAAgB,EAAE;AAC7C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAGC,2BAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;;AAGhG,IAAA,MAAM,iBAAiB,GAAGH,YAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpEI,eAAS,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,QACEC,cAAA,CAACC,YAAM,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;;AAEjF,QAAA,SAAS,EAAEC,KAAE,CACX,sIAAsI,EACtI,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,EAAA,QAAA,EAGDF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,KAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,EAAA,CAClH;AAEnB;;;"}
+{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","usePanelFocus","useEffect","_jsx","motion","cx"],"mappings":";;;;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW;AAElF,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,GAAGA,YAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAGC,kBAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAGC,sBAAgB,EAAE;AAC7C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAGC,2BAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAGH,YAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpEI,eAAS,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,QACEC,cAAA,CAACC,YAAM,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;;QAEjF,SAAS,EAAEC,KAAE,CACX,sIAAsI,EACtI,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,YAGDF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,KAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAE3GF,cAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAEE,KAAE,CAAC,8BAA8B,EAAE,iBAAiB,CAAC,OAAO,IAAI,4DAA4D,CAAC,EAAA,QAAA,EAEvI,QAAQ,EAAA,EAHJ,UAAU,CAIX,EAAA,CACF,EAAA,CACO;AAEnB;;;"}

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

@@ -5,11 +5,12 @@ interface SidePanelRegionProps {
     'aria-label': string;
     children: ReactNode;
     className?: string;
+    contentKey?: string;
     testId: string;
     isDesktop: boolean;
     shouldFocusOnMount: boolean;
 }
 /** The rendered region. A component of its own so it can tell, while animating out, that it is leaving. */
-export declare const SidePanelRegion: ({ "aria-label": ariaLabel, children, className, testId, isDesktop, shouldFocusOnMount }: SidePanelRegionProps) => import("react").JSX.Element;
+export declare const SidePanelRegion: ({ "aria-label": ariaLabel, children, className, contentKey, testId, isDesktop, shouldFocusOnMount, }: SidePanelRegionProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=SidePanelRegion.d.ts.map

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;AAIvC,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAcpC,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,2GAA2G;AAC3G,eAAO,MAAM,eAAe,GAAI,yFAAyF,oBAAoB,gCAsC5I,CAAC"}
+{"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;AAIvC,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAcpC,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,gCAmDtB,CAAC"}

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

@@ -16,11 +16,16 @@ const FULL_PAGE = {
     open: { width: '100%', x: 0 },
 };
 /** The rendered region. A component of its own so it can tell, while animating out, that it is leaving. */
-const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, testId, isDesktop, shouldFocusOnMount }) => {
+const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, contentKey, testId, isDesktop, shouldFocusOnMount, }) => {
     const panelRef = useRef(null);
     const isPresent = useIsPresent();
     const shouldReduceMotion = useReducedMotion();
-    const { onFocusCapture } = usePanelFocus({ panelRef, isPresent, isDesktop, shouldFocusOnMount });
+    const { onFocusCapture } = usePanelFocus({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey });
+    // The first content arrives with the panel's own opening animation; only a later swap fades in.
+    const firstContentKey = useRef(contentKey);
+    const hasSwappedContent = useRef(false);
+    if (firstContentKey.current !== contentKey)
+        hasSwappedContent.current = true;
     // Crossing the breakpoint while open swaps the layout at once; only opening and closing animate.
     const previousIsDesktop = useRef(isDesktop);
     const hasCrossedBreakpoint = previousIsDesktop.current !== isDesktop;
@@ -32,7 +37,7 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, 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, 
         // overflow-hidden clips the fixed-width content while the panel's own width animates.
-        className: cx('flex h-full min-h-0 shrink-0 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: children }) }));
+        className: cx('flex h-full min-h-0 shrink-0 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) }) }));
 };
 
 export { SIDE_PANEL_WIDTH, SidePanelRegion };

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":";;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW;AAElF,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;AAWV;MACa,eAAe,GAAG,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAwB,KAAI;AAC/I,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,EAAE;AAC7C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;;AAGhG,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;;AAEjF,QAAA,SAAS,EAAE,EAAE,CACX,sIAAsI,EACtI,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,EAAA,QAAA,EAGDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,EAAA,CAClH;AAEnB;;"}
+{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW;AAElF,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;AAC7C,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;;QAEjF,SAAS,EAAE,EAAE,CACX,sIAAsI,EACtI,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;;"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs

@@ -15,7 +15,7 @@ const focusableSiblingBefore = (panel) => {
  *
  * @returns a capture-phase focus handler to spread onto the panel element
  */
-const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) => {
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey }) => {
     const openerRef = React.useRef(null);
     const previousIsPresent = React.useRef(null);
     const previousIsDesktop = React.useRef(isDesktop);
@@ -63,6 +63,17 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) =
             panel.focus({ preventScroll: true });
         }
     }, [panelRef, isDesktop]);
+    // Swapping content unmounts whatever held focus, which drops it on the page. The region takes it, so Tab stays inside and
+    // closing can still hand it back. Content that focuses itself on mount (an `autoFocus` input) has done so by now and keeps it.
+    const previousContentKey = React.useRef(contentKey);
+    React.useLayoutEffect(() => {
+        if (previousContentKey.current === contentKey)
+            return;
+        previousContentKey.current = contentKey;
+        const panel = panelRef.current;
+        if (panel && isPresent && focus_utils.getFocusedElement() === null)
+            panel.focus({ preventScroll: true });
+    }, [panelRef, contentKey, isPresent]);
     // A panel that was open on load has no opener, so closing hands focus back to wherever it first came in from.
     const onFocusCapture = (event) => {
         const from = event.relatedTarget;

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePanelFocus.cjs","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":["useRef","useState","getFocusedElement","useEffect"],"mappings":"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"}
+{"version":3,"file":"usePanelFocus.cjs","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":["useRef","useState","getFocusedElement","useEffect","useLayoutEffect"],"mappings":"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"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts

@@ -7,6 +7,8 @@ interface UsePanelFocusOptions {
     isDesktop: boolean;
     /** False for a panel that is open on the first render, which must not pull focus away from the page. */
     shouldFocusOnMount: boolean;
+    /** Identifies the content shown; a change means the content, and whatever held focus in it, was replaced. */
+    contentKey?: string;
 }
 /**
  * Hands focus into the panel when it opens and back to the control that opened it when it closes,
@@ -15,7 +17,7 @@ interface UsePanelFocusOptions {
  *
  * @returns a capture-phase focus handler to spread onto the panel element
  */
-export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }: UsePanelFocusOptions) => {
+export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey }: UsePanelFocusOptions) => {
     onFocusCapture: (event: FocusEvent<HTMLElement>) => void;
 };
 export {};

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePanelFocus.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWnD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,kEAAkE;IAClE,SAAS,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,wDAAwD,oBAAoB;4BAmDzE,UAAU,CAAC,WAAW,CAAC;CAMvD,CAAC"}
+{"version":3,"file":"usePanelFocus.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWnD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,kEAAkE;IAClE,SAAS,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6GAA6G;IAC7G,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,oEAAoE,oBAAoB;4BA6DrF,UAAU,CAAC,WAAW,CAAC;CAMvD,CAAC"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { getFocusedElement } from '../../../../utilities/__internal__/focusUtils/focus.utils.js';
 
 /** The element before the panel when it can take focus, such as `AppShell`'s scroll area. */
@@ -13,7 +13,7 @@ const focusableSiblingBefore = (panel) => {
  *
  * @returns a capture-phase focus handler to spread onto the panel element
  */
-const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) => {
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey }) => {
     const openerRef = useRef(null);
     const previousIsPresent = useRef(null);
     const previousIsDesktop = useRef(isDesktop);
@@ -61,6 +61,17 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) =
             panel.focus({ preventScroll: true });
         }
     }, [panelRef, isDesktop]);
+    // Swapping content unmounts whatever held focus, which drops it on the page. The region takes it, so Tab stays inside and
+    // closing can still hand it back. Content that focuses itself on mount (an `autoFocus` input) has done so by now and keeps it.
+    const previousContentKey = useRef(contentKey);
+    useLayoutEffect(() => {
+        if (previousContentKey.current === contentKey)
+            return;
+        previousContentKey.current = contentKey;
+        const panel = panelRef.current;
+        if (panel && isPresent && getFocusedElement() === null)
+            panel.focus({ preventScroll: true });
+    }, [panelRef, contentKey, isPresent]);
     // A panel that was open on load has no opener, so closing hands focus back to wherever it first came in from.
     const onFocusCapture = (event) => {
         const from = event.relatedTarget;

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePanelFocus.js","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"usePanelFocus.js","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

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

@@ -13,7 +13,7 @@ var useOpenOnMount = require('./hooks/useOpenOnMount.cjs');
 var PageCover_context = require('./providers/PageCover.context.cjs');
 var SidePanel_context = require('./providers/SidePanel.context.cjs');
 
-const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, className, 'data-testid': dataTestId, }) => {
+const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, contentKey, className, 'data-testid': dataTestId, }) => {
     const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'side-panel', rootName: 'side-panel' });
     const isDesktop = useBreakpoints.useBreakpoints('lg');
     const setPageCovered = React.useContext(PageCover_context.PageCoverContext);
@@ -28,7 +28,7 @@ const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children
     }, [setPageCovered, coversPage]);
     if (!canMeasureViewport)
         return null;
-    return (jsxRuntime.jsx(SidePanel_context.SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isOpen && (jsxRuntime.jsx(SidePanelRegion.SidePanelRegion, { "aria-label": ariaLabel, className: className, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
+    return (jsxRuntime.jsx(SidePanel_context.SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isOpen && (jsxRuntime.jsx(SidePanelRegion.SidePanelRegion, { "aria-label": ariaLabel, className: className, contentKey: contentKey, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
 };
 SidePanelRoot.displayName = 'SidePanel';
 /**

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":";;;;;;;;;;;;;;;AAwCA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,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,cAAA,CAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,eAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EAPL,YAAY,CAQA,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

@@ -20,13 +20,15 @@ export interface SidePanelProps {
     'aria-label': string;
     /** Compose `SidePanel.Header`, `SidePanel.Content` and `SidePanel.Footer`. */
     children: ReactNode;
+    /** Identifies the content shown; when it changes while the panel is open, the new content fades in instead of jumping into place. */
+    contentKey?: string;
     /** Extra classes merged onto the panel. */
     className?: string;
     /** Overrides the root `data-testid` (defaults to `fd-side-panel`). Descendants derive their ids from this prefix. */
     'data-testid'?: string;
 }
 declare const SidePanelRoot: {
-    ({ isOpen, onOpenChange, "aria-label": ariaLabel, children, className, "data-testid": dataTestId, }: SidePanelProps): ReactNode;
+    ({ isOpen, onOpenChange, "aria-label": ariaLabel, children, contentKey, className, "data-testid": dataTestId, }: SidePanelProps): ReactNode;
     displayName: string;
 };
 /**

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,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qHAAqH;IACrH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,aAAa;yGAOhB,cAAc,GAAG,SAAS;;CAoC5B,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,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"}

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

@@ -12,7 +12,7 @@ import { useOpenOnMount } from './hooks/useOpenOnMount.js';
 import { PageCoverContext } from './providers/PageCover.context.js';
 import { SidePanelContext } from './providers/SidePanel.context.js';
 
-const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, className, 'data-testid': dataTestId, }) => {
+const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children, contentKey, className, 'data-testid': dataTestId, }) => {
     const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'side-panel', rootName: 'side-panel' });
     const isDesktop = useBreakpoints('lg');
     const setPageCovered = useContext(PageCoverContext);
@@ -27,7 +27,7 @@ const SidePanelRoot = ({ isOpen, onOpenChange, 'aria-label': ariaLabel, children
     }, [setPageCovered, coversPage]);
     if (!canMeasureViewport)
         return null;
-    return (jsx(SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsx(TestIdProvider, { value: rootTestId, children: jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(SidePanelRegion, { "aria-label": ariaLabel, className: className, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
+    return (jsx(SidePanelContext.Provider, { value: { close: () => onOpenChange(false), label: ariaLabel }, children: jsx(TestIdProvider, { value: rootTestId, children: jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(SidePanelRegion, { "aria-label": ariaLabel, className: className, contentKey: contentKey, testId: rootTestId, isDesktop: isDesktop, shouldFocusOnMount: shouldFocusOnMount, children: children }, "side-panel")) }) }) }));
 };
 SidePanelRoot.displayName = 'SidePanel';
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AAwCA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,gBAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7D,SAAS,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,QACEA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLA,IAAC,eAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EAPL,YAAY,CAQA,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,GAAG,eAAe;AAClC,SAAS,CAAC,OAAO,GAAG,gBAAgB;AACpC,SAAS,CAAC,MAAM,GAAG,eAAe;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"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,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,gBAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7D,SAAS,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,QACEA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFA,IAAC,cAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLA,GAAA,CAAC,eAAe,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,GAAG,eAAe;AAClC,SAAS,CAAC,OAAO,GAAG,gBAAgB;AACpC,SAAS,CAAC,MAAM,GAAG,eAAe;;"}

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

@@ -138,32 +138,17 @@ const TreeViewItemContent = ({ icon: Icon, action, children, className }) => {
             if (!collectionRef.current) {
                 collectionRef.current = collection;
             }
-            const isIndeterminate = itemKey != null &&
-                selectionMode === 'multiple' &&
-                hasChildItems &&
-                ctxSelectedKeys !== 'all' &&
-                (() => {
-                    const descendants = treeView_utils.getDescendants(itemKey, collection);
-                    if (descendants.length === 0)
-                        return false;
-                    const selectedCount = descendants.filter((k) => ctxSelectedKeys.has(k)).length;
-                    // Not selected but has selected descendants, or selected but not ALL descendants are selected (stale after move)
-                    return selectedCount > 0 && (!isSelected || selectedCount < descendants.length);
-                })();
-            /* Connector lines — walk up from current item, prepending the connector for each ancestor level */
-            const connectors = [];
-            if (showConnectors && itemKey != null && level > 1) {
-                let key = itemKey;
-                for (let depth = 0; depth < level - 1; depth++) {
-                    const node = collection.getItem(key);
-                    if (!node?.parentKey)
-                        break;
-                    const siblings = [...(collection.getChildren?.(node.parentKey) ?? [])];
-                    const isLast = siblings[siblings.length - 1]?.key === key;
-                    connectors.unshift(jsxRuntime.jsx(Connector, { size: size, type: isLast ? (depth === 0 ? 'end' : 'none') : 'line' }, depth));
-                    key = node.parentKey;
-                }
-            }
+            const isIndeterminate = treeView_utils.isTreeItemIndeterminate({
+                itemKey,
+                collection,
+                selectedKeys: ctxSelectedKeys,
+                isSelected,
+                selectionMode,
+                hasChildItems,
+            });
+            const connectors = showConnectors && itemKey != null
+                ? treeView_utils.getTreeConnectors(itemKey, level, collection).map(({ depth, type }) => jsxRuntime.jsx(Connector, { size: size, type: type }, depth))
+                : [];
             const paddingLeft = showConnectors && level > 1 ? BASE_PADDING : BASE_PADDING + (level - 1) * INDENT_SIZE;
             return (jsxRuntime.jsxs("div", { className: cx.cx('flex w-full cursor-pointer items-center gap-2 rounded-sm -outline-offset-2 outline-focus-ring transition duration-100 ease-linear', size === 'sm' ? 'py-1.5 pr-2' : 'py-2 pr-2', isDropTarget && 'bg-secondary_hover outline-2', !isDropTarget && (isSelected || isIndeterminate) && 'bg-secondary hover:bg-secondary_hover', !isDropTarget && !isSelected && !isIndeterminate && 'hover:bg-primary_hover', isDisabled && 'cursor-not-allowed opacity-50', isFocusVisible && 'outline-2', className), style: { paddingLeft }, children: [connectors, hasChildItems && (jsxRuntime.jsx(reactAriaComponents.Button, { slot: "chevron", "data-testid": chevronTestId, className: "flex shrink-0 items-center justify-center outline-hidden", children: isExpanded ? jsxRuntime.jsx(uiIcons.ChevronDown, { className: "size-4 text-fg-quaternary" }) : jsxRuntime.jsx(uiIcons.ChevronRight, { className: "size-4 text-fg-quaternary" }) })), selectionMode !== 'none' && (jsxRuntime.jsx(reactAriaComponents.Checkbox, { slot: "selection", "data-testid": checkboxTestId, className: "flex shrink-0 items-center justify-center outline-hidden", children: ({ isSelected: checkSelected, isDisabled: checkDisabled, isFocusVisible: checkFocus }) => (jsxRuntime.jsx(Checkbox.CheckboxBase, { size: "sm", isSelected: checkSelected || isIndeterminate, isIndeterminate: isIndeterminate, isDisabled: checkDisabled, isFocusVisible: checkFocus })) })), jsxRuntime.jsxs("div", { className: cx.cx('flex min-w-0 flex-1 items-center', size === 'sm' ? 'gap-1.5' : 'gap-2'), children: [Icon &&
                                 (componentGuard_utils.isReactComponent(Icon) ? (jsxRuntime.jsx(Icon, { className: cx.cx('shrink-0 text-fg-quaternary', size === 'sm' ? 'size-4' : 'size-5') })) : React.isValidElement(Icon) ? (Icon) : null), jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-tertiary", children: children }), action && (jsxRuntime.jsx("span", { "data-testid": actionTestId, className: "contents", children: action })), allowsDragging && (jsxRuntime.jsx(reactAriaComponents.Button, { slot: "drag", "data-testid": dragTestId, className: cx.cx('shrink-0 cursor-grab outline-hidden', !isSelected && 'hidden'), children: jsxRuntime.jsx(uiIcons.DotsGrid, { className: "size-4 text-fg-quaternary" }) }))] })] }));