@amboss/design-system 4.9.4 → 4.10.0

package/build/cjs/components/CheckboxCard/CheckboxCard.d.ts

@@ -15,4 +15,4 @@ export declare const CheckboxCard: React.ForwardRefExoticComponent<{
     renderContent?: (params: {
         isSelected: boolean;
     }) => React.ReactNode;
-} & Omit<CheckboxProps, "errorMessages" | "hint" | "hideLabel" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<CheckboxProps, "errorMessages" | "hideLabel" | "hint" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/Content/ContentCheckbox/ContentCheckbox.d.ts

@@ -16,4 +16,4 @@ export declare const ContentCheckbox: React.ForwardRefExoticComponent<{
     /** Adds extra spacing around the checkbox to accomodate a label with larger line height */
     isSpacedOut?: boolean;
     "data-e2e-test-id"?: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/Content/ContentCitation/ContentCitation.d.ts

@@ -20,7 +20,7 @@ export type ContentCitationProps = {
  */
 export declare function ContentCitation({ children, color, isSpacedOut, as, "data-e2e-test-id": dataE2eTestId, }: ContentCitationProps): React.ReactElement;
 export declare namespace ContentCitation {
-    var Title: typeof ContentCitationTitle;
-    var Link: typeof ContentCitationLink;
-    var LookupLink: typeof ContentCitationLookupLink;
+    export { ContentCitationTitle as Title };
+    export { ContentCitationLink as Link };
+    export { ContentCitationLookupLink as LookupLink };
 }

package/build/cjs/components/Content/ContentFontResizer/FontSizeOffsetContext.d.ts

@@ -1,2 +1,2 @@
 export type FontSizeOffset = number;
-export declare const FontSizeOffsetContext: React.Context<number>;
+export declare const FontSizeOffsetContext: import("react").Context<number>;

package/build/cjs/components/Content/ContentText/ContentText.d.ts

@@ -7,6 +7,6 @@ export type ContentTextProps = TypographyTextProps & {
     /** Provides additional line-height */
     isSpacedOut?: boolean;
 };
-export declare const ContentTextContext: React.Context<Pick<ContentTextProps, "color" | "size" | "weight" | "isSpacedOut"> | null>;
+export declare const ContentTextContext: React.Context<Pick<ContentTextProps, "color" | "isSpacedOut" | "size" | "weight"> | null>;
 export declare const CONTENT_TEXT_LINE_HEIGHT_OFFSET = 0.14;
 export declare function ContentText({ size, color, weight, isSpacedOut, children, ...rest }: ContentTextProps): React.ReactElement;

package/build/cjs/components/Content/DosageButton/DosageButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 export type DosageButtonProps = React.ComponentPropsWithRef<"button">;
 export declare const DosageButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+    ref?: React.RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/build/cjs/components/DataTable/DataTable.d.ts

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from "react";
 import type { MQ } from "../../types";
 import type { DataTableColumn, DataTableColumnOrGroup, DataTableRow, DataTableRowProps, DataTableSlotProps } from "./types";
+import { defaultSortCompareFn } from "./useDataTableSort";
 import { DataTableToolbar } from "./DataTableToolbar/DataTableToolbar";
 type DataTablePropsBase = {
     /** Screen reader text for table caption */
@@ -143,7 +144,7 @@ export type DataTableProps = DataTablePropsBase & (DataTableSelectableProps | Da
 export declare function BaseDataTable({ caption, columns, rows, footer, currentlySortedByColumn, isFirstColumnSticky, isLastColumnSticky, "data-e2e-test-id": dataE2eTestId, isLoading, loadingStateScreenReaderText, isEmpty, slotProps, children, emptyTableContentHeight, layout, width, bodyCellVerticalPadding, emptyCellContent, maxHeight, isSelectable, selectedRowIds, allRowsSelected, selectAllRowsCheckboxAriaLabel, getRowProps, onRowSelectionChange, onAllRowsSelectionChange, isExpandable, expandedRowIds: expandedRowIdsProp, onRowExpansionChange, expandRowAriaLabel, collapseRowAriaLabel, onSort, ...ariaAttributes }: DataTableProps): ReactElement;
 export declare function DataTable({ children, ...rest }: DataTableProps): ReactElement;
 export declare namespace DataTable {
-    var sortCompareFn: (a: DataTableRow, b: DataTableRow, columnName: DataTableColumn["name"], desiredSortDirection: DataTableColumn["sortDirection"]) => number;
-    var Toolbar: typeof DataTableToolbar;
+    export { defaultSortCompareFn as sortCompareFn };
+    export { DataTableToolbar as Toolbar };
 }
 export {};

package/build/cjs/components/DataTable/TableCell.d.ts

@@ -17,5 +17,5 @@ declare const TableCell: import("@emotion/styled").StyledComponent<{
     isTableScrolledToLeft: boolean;
     isTableScrolledToRight: boolean;
     sticky?: "left" | "right" | false;
-} & Pick<DataTableRowProps, "isActive">, React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+} & Pick<DataTableRowProps, "isActive">, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
 export default TableCell;

package/build/cjs/components/DataTable/internal/tablePrimitives.d.ts

@@ -10,14 +10,14 @@ type StyledTrProps = {
 export declare const StyledTr: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & StyledTrProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+} & StyledTrProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
 type StyledTextProps = {
     alignColumn?: DataTableColumn["align"];
 };
 export declare const StyledText: import("@emotion/styled").StyledComponent<Omit<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & import("../../Typography/Text/Text").BaseTextProps & React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement> & {
+} & import("../../Typography/Text/Text").BaseTextProps & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement> & {
     theme?: import("@emotion/react").Theme;
 } & StyledTextProps, {}, {}>;
 export declare const StyledTd: import("@emotion/styled").StyledComponent<{
@@ -30,7 +30,7 @@ export declare const StyledTd: import("@emotion/styled").StyledComponent<{
     isTableScrolledToLeft: boolean;
     isTableScrolledToRight: boolean;
     sticky?: "left" | "right" | false;
-} & Pick<import("../types").DataTableRowProps, "isActive"> & React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & {
+} & Pick<import("../types").DataTableRowProps, "isActive"> & import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & {
     theme?: import("@emotion/react").Theme;
 } & {
     bodyCellVerticalPadding?: DataTableProps["bodyCellVerticalPadding"];

package/build/cjs/components/EntityList/styled-components.d.ts

@@ -3,38 +3,38 @@ import type { EntityListItemProps, EntityListItemWrapperProps } from "./types";
 import type { ListSize } from "../../types";
 export declare const getOffsetMqStyle: (cssProp: string, { theme, size, }: {
     theme: Theme;
-} & Partial<EntityListItemWrapperProps>) => Record<string, (string | number) | {
+} & Partial<EntityListItemWrapperProps>) => Record<string, {
     [x: string]: string | number;
-}>;
+} | (string | number)>;
 export declare const StyledList: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
 } & {
     size: ListSize;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledEntityItem: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledShowMore: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledWrapperOffset: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
 } & {
     size: ListSize;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledEntityListItemWrapper: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
 } & {
     size: ListSize;
-} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: Theme;
 } & EntityListItemWrapperProps, {}, {}>;
 export declare const StyledEntityListItemButton: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
-} & Partial<EntityListItemProps>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Partial<EntityListItemProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/cjs/components/Form/Checkbox/Checkbox.d.ts

@@ -35,11 +35,11 @@ export declare const CheckboxRaw: React.ForwardRefExoticComponent<{
     label?: string | React.ReactElement;
     indeterminate?: boolean;
     size?: CheckboxSizes;
-} & Omit<FormFieldProps, "label" | "hideLabel"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+} & Omit<FormFieldProps, "hideLabel" | "label"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     labelSize?: CheckboxSizes;
 } & React.RefAttributes<HTMLInputElement>>;
 export declare const Checkbox: React.ForwardRefExoticComponent<{
     label?: string | React.ReactElement;
     indeterminate?: boolean;
     size?: CheckboxSizes;
-} & Omit<FormFieldProps, "label" | "hideLabel"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<FormFieldProps, "hideLabel" | "label"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/Form/Combobox/StyledSelectComponents.d.ts

@@ -1,7 +1,7 @@
 export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 type StyledOptionProps = {
     active: boolean;
     preSelected: boolean;
@@ -10,13 +10,13 @@ type StyledOptionProps = {
 export declare const StyledOption: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & StyledOptionProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & StyledOptionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledFakeInputWrap: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledDropdown: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/build/cjs/components/Form/DatePicker/DatePicker.d.ts

@@ -27,7 +27,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<{
             formatAriaLabel: (monthName: string, year: number) => string;
         };
     };
-} & import("../FormField/FormField").FormFieldProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
+} & import("../FormField/FormField").FormFieldProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
     value?: string;
     hasError?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/Form/MaskedInput/MaskedInput.d.ts

@@ -20,4 +20,4 @@ export declare const MaskedInput: React.ForwardRefExoticComponent<{
     maskOptions: FactoryArg;
     onAccept?: (value: string, unmaskedValue: string, typedValue: string) => void;
     onComplete?: (value: string, unmaskedValue: string, typedValue: string) => void;
-} & Omit<InputProps, "type" | "onChange" | "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<InputProps, "onChange" | "size" | "type"> & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/Form/Radio/Radio.d.ts

@@ -18,7 +18,7 @@ export declare const RadioRaw: React.ForwardRefExoticComponent<{
     /** Display hint below the label specific for the radio */
     labelHint?: string | React.ReactElement;
     size?: RadioSizes;
-} & Omit<FormFieldProps, "label" | "labelHint" | "hideLabel"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+} & Omit<FormFieldProps, "hideLabel" | "label" | "labelHint"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     labelSize?: RadioSizes;
 } & React.RefAttributes<HTMLInputElement>>;
 export declare const Radio: React.ForwardRefExoticComponent<{
@@ -26,5 +26,5 @@ export declare const Radio: React.ForwardRefExoticComponent<{
     /** Display hint below the label specific for the radio */
     labelHint?: string | React.ReactElement;
     size?: RadioSizes;
-} & Omit<FormFieldProps, "label" | "labelHint" | "hideLabel"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<FormFieldProps, "hideLabel" | "label" | "labelHint"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/build/cjs/components/Form/RangeInput/RangeInput.d.ts

@@ -9,4 +9,4 @@ export declare const RangeInput: React.ForwardRefExoticComponent<{
     /** The step size for each change in the range input's value. */
     hasError?: boolean;
     onSlideStart?: (e: React.FormEvent<HTMLInputElement>) => void;
-} & FormFieldProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
+} & FormFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/Form/Textarea/Textarea.d.ts

@@ -14,12 +14,12 @@ export declare const TextareaRaw: React.ForwardRefExoticComponent<{
      */
     hasError?: boolean;
     resize?: "none" | "horizontal" | "vertical" | "both";
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+} & TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 export declare const Textarea: React.ForwardRefExoticComponent<FormFieldProps & {
     /**
      * Set to true to toggle error state
      */
     hasError?: boolean;
     resize?: "none" | "horizontal" | "vertical" | "both";
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+} & TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/build/cjs/components/Form/Toggle/Toggle.d.ts

@@ -9,7 +9,7 @@ type ToggleRawProps = {
 export declare const ToggleRaw: React.ForwardRefExoticComponent<{
     size?: ToggleSize;
     isHighlighted?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & React.RefAttributes<HTMLInputElement>>;
 export type ToggleProps = ToggleRawProps & {
     /** Controls label alignment with respect to toggle */
     alignLabel?: "before" | "after";
@@ -20,11 +20,11 @@ export type ToggleProps = ToggleRawProps & {
 export declare const Toggle: React.ForwardRefExoticComponent<{
     size?: ToggleSize;
     isHighlighted?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     /** Controls label alignment with respect to toggle */
     alignLabel?: "before" | "after";
     /** Display hint below the label specific for the toggle */
     labelHint?: string | React.ReactElement;
     alignItems?: InlineProps["alignItems"];
-} & Omit<FormFieldProps, "labelHint" | "hideLabel"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<FormFieldProps, "hideLabel" | "labelHint"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/build/cjs/components/Form/ToggleButton/ToggleButton.d.ts

@@ -7,4 +7,4 @@ export type ToggleButtonProps = {
 export declare const ToggleButton: React.ForwardRefExoticComponent<{
     label: string;
     subLabel?: string;
-} & Omit<FormFieldProps, "label" | "labelHint" | "errorMessages" | "hint" | "hideLabel"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<FormFieldProps, "errorMessages" | "hideLabel" | "hint" | "label" | "labelHint"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/Grid/Grid.d.ts

@@ -32,5 +32,5 @@ export type GridProps = {
 } & HTMLAttributes<HTMLDivElement>;
 export declare function Grid({ columnGap, rowGap, "data-e2e-test-id": dataE2eTestId, children, ...rest }: GridProps): React.ReactElement;
 export declare namespace Grid {
-    var Item: typeof GridItem;
+    export { GridItem as Item };
 }

package/build/cjs/components/Internal/Drawer/Drawer.js

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Drawer",{enumerable:!0,get:function(){return Drawer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react1=require("@emotion/react"),_useOutsideClickDeactivatesWithinPortal=require("../../../shared/useOutsideClickDeactivatesWithinPortal"),_useDocument=require("../../../shared/useDocument"),_focusableSelector=require("../../../shared/focusableSelector"),_Portal=require("../../Portal/Portal"),_FocusTrapWrapper=require("../../../shared/FocusTrapWrapper"),_DialogContext=require("../../Patterns/Dialog/DialogContext"),_Backdrop=require("../../Utilities/Backdrop/Backdrop"),_useExitAnimation=require("./useExitAnimation"),StyledViewportLayer=(0,_styled.default)("div",{target:"e11o9pe90",label:"StyledViewportLayer"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=(0,_react1.keyframes)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Drawer",{enumerable:!0,get:function(){return Drawer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react1=require("@emotion/react"),_useOutsideClickDeactivatesWithinPortal=require("../../../shared/useOutsideClickDeactivatesWithinPortal"),_useDocument=require("../../../shared/useDocument"),_focusableSelector=require("../../../shared/focusableSelector"),_Portal=require("../../Portal/Portal"),_FocusTrapWrapper=require("../../../shared/FocusTrapWrapper"),_DialogContext=require("../../Patterns/Dialog/DialogContext"),_Backdrop=require("../../Utilities/Backdrop/Backdrop"),_useExitAnimation=require("../../../shared/useExitAnimation"),StyledViewportLayer=(0,_styled.default)("div",{target:"e1h3k5750",label:"StyledViewportLayer"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=(0,_react1.keyframes)`
       from { opacity: ${hidden}; }
       to { opacity: ${visible}; }
     `,fadeOut=(0,_react1.keyframes)`
       from { opacity: ${visible}; }
       to { opacity: ${hidden}; }
-    `,{duration,timingFunction}=theme.variables.animation.modalBackdrop.open;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",animation:`${isLeaving?fadeOut:fadeIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledContent=(0,_styled.default)("div",{target:"e11o9pe91",label:"StyledContent"})(({theme,positionX,positionY,isLeaving})=>{let restX=positionX?"0%":"-50%",restY=positionY?"0%":"-50%",{x:fromX,y:fromY}="left"===positionX?{x:"-100%",y:restY}:"right"===positionX?{x:"100%",y:restY}:"top"===positionY?{x:restX,y:"-100%"}:"bottom"===positionY?{x:restX,y:"100%"}:{x:restX,y:restY},resting=`translate(${restX}, ${restY})`,offscreen=`translate(${fromX}, ${fromY})`,slideIn=(0,_react1.keyframes)`
+    `,{duration,timingFunction}=theme.variables.animation.modalBackdrop.open;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",animation:`${isLeaving?fadeOut:fadeIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledContent=(0,_styled.default)("div",{target:"e1h3k5751",label:"StyledContent"})(({theme,positionX,positionY,isLeaving})=>{let restX=positionX?"0%":"-50%",restY=positionY?"0%":"-50%",{x:fromX,y:fromY}="left"===positionX?{x:"-100%",y:restY}:"right"===positionX?{x:"100%",y:restY}:"top"===positionY?{x:restX,y:"-100%"}:"bottom"===positionY?{x:restX,y:"100%"}:{x:restX,y:restY},resting=`translate(${restX}, ${restY})`,offscreen=`translate(${fromX}, ${fromY})`,slideIn=(0,_react1.keyframes)`
       from { transform: ${offscreen}; }
       to { transform: ${resting}; }
     `,slideOut=(0,_react1.keyframes)`
       from { transform: ${resting}; }
       to { transform: ${offscreen}; }
-    `,{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"fixed",...{..."left"===positionX&&{left:0},..."right"===positionX&&{right:0},...!positionX&&{left:"50%"},..."top"===positionY&&{top:0},..."bottom"===positionY&&{bottom:0},...!positionY&&{top:"50%"}},transform:resting,willChange:"transform",animation:`${isLeaving?slideOut:slideIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdrop=(0,_styled.default)(_Backdrop.Backdrop,{target:"e11o9pe92",label:"StyledBackdrop"})({pointerEvents:"none"});function getFocusTarget(container,document){return container?.querySelector(_focusableSelector.FOCUSABLE_SELECTOR)??container??document.body}function Drawer({backdropRef,portalContainer,initialFocus,isDismissible=!0,isVisible=!0,onUnmount,hasBackdrop=!0,positionX,positionY,children,handleClose,privateProps:{skipPortal}={skipPortal:!1},...rest}){let portalContainerElement=(0,_Portal.usePortalContainerElement)(portalContainer),contentRef=(0,_react.useRef)(null),document=(0,_useDocument.useDocument)(),{isMounted,isLeaving,onAnimationEnd}=(0,_useExitAnimation.useExitAnimation)(isVisible),wasMounted=(0,_react.useRef)(isMounted);(0,_react.useEffect)(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]);let layerRef=(0,_react.useRef)(null),setLayerNode=(0,_react.useCallback)(node=>{layerRef.current=node,backdropRef&&(backdropRef.current=node)},[backdropRef]),handleClickOutsideDeactivates=(0,_useOutsideClickDeactivatesWithinPortal.useOutsideClickDeactivatesWithinPortal)({portalContainerElement,outerRef:layerRef,isDismissible});if(!isMounted)return null;let content=_react.default.createElement(StyledViewportLayer,{ref:setLayerNode,"data-ds-id":"Drawer",isLeaving:isLeaving},hasBackdrop&&_react.default.createElement(StyledBackdrop,{"data-ds-id":"DrawerBackdrop"}),_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>{var container;return container=contentRef.current,"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(container,document)},fallbackFocus:()=>getFocusTarget(contentRef.current,document),onPostDeactivate:()=>handleClose?.()}},_react.default.createElement(StyledContent,{...rest,ref:contentRef,positionX:positionX,positionY:positionY,isLeaving:isLeaving,onAnimationEnd:onAnimationEnd,role:"dialog","aria-modal":"true"},children)));return skipPortal?content:_react.default.createElement(_DialogContext.DialogContext.Provider,{value:!0},_react.default.createElement(_Portal.Portal,{portalContainer:portalContainer},content))}
+    `,{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"fixed",...{..."left"===positionX&&{left:0},..."right"===positionX&&{right:0},...!positionX&&{left:"50%"},..."top"===positionY&&{top:0},..."bottom"===positionY&&{bottom:0},...!positionY&&{top:"50%"}},transform:resting,willChange:"transform",animation:`${isLeaving?slideOut:slideIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdrop=(0,_styled.default)(_Backdrop.Backdrop,{target:"e1h3k5752",label:"StyledBackdrop"})({pointerEvents:"none"});function getFocusTarget(container,document){return container?.querySelector(_focusableSelector.FOCUSABLE_SELECTOR)??container??document.body}function Drawer({backdropRef,portalContainer,initialFocus,isDismissible=!0,isVisible=!0,onUnmount,hasBackdrop=!0,positionX,positionY,children,handleClose,privateProps:{skipPortal}={skipPortal:!1},...rest}){let portalContainerElement=(0,_Portal.usePortalContainerElement)(portalContainer),contentRef=(0,_react.useRef)(null),document=(0,_useDocument.useDocument)(),{isMounted,isLeaving,onAnimationEnd}=(0,_useExitAnimation.useExitAnimation)(isVisible),wasMounted=(0,_react.useRef)(isMounted);(0,_react.useEffect)(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]);let layerRef=(0,_react.useRef)(null),setLayerNode=(0,_react.useCallback)(node=>{layerRef.current=node,backdropRef&&(backdropRef.current=node)},[backdropRef]),handleClickOutsideDeactivates=(0,_useOutsideClickDeactivatesWithinPortal.useOutsideClickDeactivatesWithinPortal)({portalContainerElement,outerRef:layerRef,isDismissible});if(!isMounted)return null;let content=_react.default.createElement(StyledViewportLayer,{ref:setLayerNode,"data-ds-id":"Drawer",isLeaving:isLeaving},hasBackdrop&&_react.default.createElement(StyledBackdrop,{"data-ds-id":"DrawerBackdrop"}),_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>{var container;return container=contentRef.current,"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(container,document)},fallbackFocus:()=>getFocusTarget(contentRef.current,document),onPostDeactivate:()=>handleClose?.()}},_react.default.createElement(StyledContent,{...rest,ref:contentRef,positionX:positionX,positionY:positionY,isLeaving:isLeaving,onAnimationEnd:onAnimationEnd,role:"dialog","aria-modal":"true"},children)));return skipPortal?content:_react.default.createElement(_DialogContext.DialogContext.Provider,{value:!0},_react.default.createElement(_Portal.Portal,{portalContainer:portalContainer},content))}

package/build/cjs/components/Internal/LayoutFloat/LayoutFloat.d.ts

@@ -13,4 +13,16 @@ export type LayoutFloatProps = {
     hostRef: (el: HTMLDivElement | null) => void;
     "data-e2e-test-id"?: string;
 };
-export declare const LayoutFloat: React.MemoExoticComponent<({ width, height, hostRef, "data-e2e-test-id": dataE2eTestId, }: LayoutFloatProps) => React.ReactElement>;
+/**
+ * The floating shell hosting a layout panel's content while its variant is
+ * `"float"`. Pins to the bottom-right viewport corner via the internal
+ * `Float` positioner, then becomes freely draggable by its header across the
+ * viewport (clamped to `spacing.m` from the edges, matching `Float`'s inset).
+ * The header carries the `useMove` handle; this float owns the drag geometry
+ * and publishes its move handlers via `useLayoutFloatDrag` for the header to drive.
+ * Purely presentational otherwise: the content arrives by the panel's persistent
+ * host node being appended into `hostRef`'s element.
+ */
+declare const LayoutFloatBase: ({ width, height, hostRef, "data-e2e-test-id": dataE2eTestId, }: LayoutFloatProps) => React.ReactElement;
+export declare const LayoutFloat: React.MemoExoticComponent<typeof LayoutFloatBase>;
+export {};

package/build/cjs/components/Internal/LayoutFloat/useLayoutFloatDrag.d.ts

@@ -10,7 +10,7 @@ export type LayoutFloatDragContextValue = {
     /** Publish/clear the handlers - for the float. */
     setHandlers: (handlers: LayoutFloatDragHandlers) => void;
 };
-export declare const LayoutFloatDragContext: React.Context<LayoutFloatDragContextValue>;
+export declare const LayoutFloatDragContext: import("react").Context<LayoutFloatDragContextValue>;
 /** Read the float-drag channel. Outside a `LayoutFloatDragProvider` the handlers are
  *  `null` and the setter a no-op, so consumers need no existence checks. */
 export declare const useLayoutFloatDrag: () => LayoutFloatDragContextValue;

package/build/cjs/components/Internal/Panel/Panel.d.ts

@@ -3,6 +3,8 @@ import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanel
 /** A size: plain number = pixels; unitless string = percentage ("10%"). */
 type Size = number | string;
 export type PanelItem = {
+    /** Leave a transparent spacing token before this panel's column. */
+    gapBefore?: boolean;
     /** Stable id — used by react-resizable-panels to track the panel and persist
      *  its size, and passed back to `onResize`/`onCollapse`. */
     id: string;
@@ -15,9 +17,9 @@ export type PanelItem = {
     maxSize?: Size;
     /** Allow drag-to-collapse; collapsing fires `onCollapse(id)`. */
     collapsible?: boolean;
-    /** When `false`, this panel is fixed: it can't be resized directly or by a
-     *  neighbour. Separators beside it stay usable as long as a resizable panel
-     *  remains on each of their sides - the drag just passes this panel by. */
+    /** When `false`, user input can't resize this panel directly or through a
+     *  neighbour. Container resizing still applies. Separators stay usable if a
+     *  resizable panel remains on each side - the drag passes this panel by. */
     resizable?: boolean;
     /** Hold this panel's width when the window (or the containing group) is
      *  resized, rather than its share of the group - so the change lands on the

package/build/cjs/components/Internal/Panel/Panel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Panel(){return Panel},get groupResizeBehaviorFor(){return groupResizeBehaviorFor}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_reactresizablepanels=require("react-resizable-panels"),CustomGroup=(0,_styled.default)(_reactresizablepanels.Group,{target:"ervy0ss0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"ervy0ss1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize,groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size",canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=(0,_reactresizablepanels.useDefaultLayout)({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return _react.default.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return _react.default.createElement(_react.default.Fragment,{key:item.id},index>0&&_react.default.createElement(_reactresizablepanels.Separator,{disabled:isSeparatorDisabled}),_react.default.createElement(_reactresizablepanels.Panel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Panel(){return Panel},get groupResizeBehaviorFor(){return groupResizeBehaviorFor}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_reactresizablepanels=require("react-resizable-panels"),CustomGroup=(0,_styled.default)(_reactresizablepanels.Group,{target:"e1qc2hi70",label:"CustomGroup"})({height:"100%",width:"100%"}),CustomSeparator=(0,_styled.default)(_reactresizablepanels.Separator,{target:"e1qc2hi71",label:"CustomSeparator"})(({theme})=>({flexShrink:0,width:theme.variables.size.spacing.xxs})),StyledPanelChild=(0,_styled.default)("div",{target:"e1qc2hi72",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize,groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size",canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=(0,_reactresizablepanels.useDefaultLayout)({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return _react.default.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index}),SeparatorComponent=item.gapBefore?CustomSeparator:_reactresizablepanels.Separator;return _react.default.createElement(_react.default.Fragment,{key:item.id},index>0&&_react.default.createElement(SeparatorComponent,{disabled:isSeparatorDisabled}),_react.default.createElement(_reactresizablepanels.Panel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}

package/build/cjs/components/Internal/PanelHeader/PanelHeader.d.ts

@@ -22,7 +22,7 @@ export type PanelHeaderProps = {
     leftSlot?: React.ReactNode;
     /** Title block (icon + heading), rendered after `leftSlot`. */
     title?: PanelHeaderTitle;
-    /** Rendered at the header end, aligned to the top of multi-line content. */
+    /** Rendered at the header end, vertically centered. */
     rightSlot?: React.ReactNode;
     /** Fade the leading group out. `rightSlot` is left solid: it is the control
      *  that travels down onto the left bar's own and has to survive the dissolve. */

package/build/cjs/components/Internal/PanelHeader/PanelHeader.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_constants=require("../../Layout/-constants"),_mixins=require("../../../shared/mixins"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header"),StyledHeaderSurface=(0,_styled.default)("div",{target:"e13e79rk0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"e13e79rk1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"e13e79rk2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledSlotContent=(0,_styled.default)("div",{target:"e13e79rk3",label:"StyledSlotContent"})({width:"max-content"}),StyledLeadingContent=(0,_styled.default)("div",{target:"e13e79rk4",label:"StyledLeadingContent"})(({theme,hasTitleInset})=>({paddingLeft:hasTitleInset?theme.variables.size.spacing.xxs:0})),StyledTrailingGroup=(0,_styled.default)("div",{target:"e13e79rk5",label:"StyledTrailingGroup"})({alignSelf:"flex-start",flexShrink:0});function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary",hasTitle=title&&!1!==title.isVisible,hasIcon=hasTitle&&void 0!==title.icon;return _react.default.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Box.Box,{vSpace:_constants.LEFT_BAR_BUTTON_INSET.vSpace,lSpace:hasIcon?"xs":"s",rSpace:_constants.LEFT_BAR_BUTTON_INSET.hSpace},_react.default.createElement(StyledHeaderRow,null,_react.default.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},_react.default.createElement(StyledLeadingContent,{hasTitleInset:!!(hasTitle&&!hasIcon)},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},leftSlot&&_react.default.createElement(StyledSlotContent,null,leftSlot),hasTitle&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{as:title.as,color:colorTitleItems},title.label)))))),_react.default.createElement(StyledTrailingGroup,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_constants=require("../../Layout/-constants"),_mixins=require("../../../shared/mixins"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header"),StyledHeaderSurface=(0,_styled.default)("div",{target:"e1fxsx1e0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"e1fxsx1e1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"e1fxsx1e2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledSlotContent=(0,_styled.default)("div",{target:"e1fxsx1e3",label:"StyledSlotContent"})({width:"max-content"}),StyledLeadingContent=(0,_styled.default)("div",{target:"e1fxsx1e4",label:"StyledLeadingContent"})(({theme,hasTitleInset})=>({paddingLeft:hasTitleInset?theme.variables.size.spacing.xxs:0})),StyledTrailingGroup=(0,_styled.default)("div",{target:"e1fxsx1e5",label:"StyledTrailingGroup"})({flexShrink:0});function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary",hasTitle=title&&!1!==title.isVisible,hasIcon=hasTitle&&void 0!==title.icon;return _react.default.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Box.Box,{vSpace:_constants.LEFT_BAR_BUTTON_INSET.vSpace,lSpace:hasIcon?"xs":"s",rSpace:_constants.LEFT_BAR_BUTTON_INSET.hSpace},_react.default.createElement(StyledHeaderRow,null,_react.default.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},_react.default.createElement(StyledLeadingContent,{hasTitleInset:!!(hasTitle&&!hasIcon)},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},leftSlot&&_react.default.createElement(StyledSlotContent,null,leftSlot),hasTitle&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{as:title.as,color:colorTitleItems},title.label)))))),_react.default.createElement(StyledTrailingGroup,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))))}

package/build/cjs/components/Internal/Sandwich/useSandwichContext.d.ts

@@ -16,6 +16,6 @@ export type SandwichContextValue = SandwichEdges & {
     /** Static host below the scroll body - `Sandwich.Footer` portals into it. */
     footerSlotNode: HTMLElement | null;
 };
-export declare const SandwichProvider: React.Provider<SandwichContextValue | null>;
+export declare const SandwichProvider: import("react").Provider<SandwichContextValue | null>;
 /** Read the Sandwich context, or throw if used outside `<Sandwich>`. */
 export declare function useSandwichContext(): SandwichContextValue;

package/build/cjs/components/Layout/-constants.d.ts

@@ -82,6 +82,16 @@ export declare const RIGHT_PANEL_BOTTOM_BAR_INSET: string;
 export declare const PANEL_WIDTH_VAR: {
     readonly leftPanel: "--ds-layout-leftPanel-width";
     readonly content: "--ds-layout-content-width";
+    readonly splitview: "--ds-layout-splitview-width";
     readonly rightPanel: "--ds-layout-rightPanel-width";
 };
+/** Live start of each column relative to the Layout root. */
+export declare const PANEL_START_VAR: {
+    readonly leftPanel: "--ds-layout-leftPanel-start";
+    readonly content: "--ds-layout-content-start";
+    readonly splitview: "--ds-layout-splitview-start";
+    readonly rightPanel: "--ds-layout-rightPanel-start";
+};
+/** Set once column geometry is available to align the bottom bar. */
+export declare const LAYOUT_REGIONS_READY_VAR: "--ds-layout-regions-ready";
 export {};

package/build/cjs/components/Layout/-constants.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BOTTOM_BAR_HEIGHT_VAR(){return BOTTOM_BAR_HEIGHT_VAR},get DEFAULT_LEFT_PANEL_VARIANT(){return DEFAULT_LEFT_PANEL_VARIANT},get LEFT_BAR_BUTTON_INSET(){return LEFT_BAR_BUTTON_INSET},get PAGE_BOTTOM_BAR_INSET(){return PAGE_BOTTOM_BAR_INSET},get PANELS(){return PANELS},get PANEL_ORDER(){return PANEL_ORDER},get PANEL_WIDTH_VAR(){return PANEL_WIDTH_VAR},get RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR(){return RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR},get RIGHT_PANEL_BOTTOM_BAR_INSET(){return RIGHT_PANEL_BOTTOM_BAR_INSET},get SIDE_PANELS(){return SIDE_PANELS},get SPLIT_MAX_WIDTH_VAR(){return SPLIT_MAX_WIDTH_VAR},get SUBNAV_OFFSET_VAR(){return SUBNAV_OFFSET_VAR},get Slot(){return Slot},get TOGGLABLE_SLOTS(){return TOGGLABLE_SLOTS}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _layoutvars=require("../../web-tokens/layout-vars"),Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"},SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel],PANELS=[Slot.content,Slot.splitview],PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel],DEFAULT_LEFT_PANEL_VARIANT="sidebar",LEFT_BAR_BUTTON_INSET={hSpace:"s",vSpace:"xs"},TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content),SUBNAV_OFFSET_VAR=_layoutvars.LAYOUT_VARS.subnavOffset,SPLIT_MAX_WIDTH_VAR=_layoutvars.LAYOUT_VARS.splitMaxWidth,BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.bottomBarHeight,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.rightPanelBottomBarHeight,PAGE_BOTTOM_BAR_INSET=`var(${BOTTOM_BAR_HEIGHT_VAR}, 0px)`,RIGHT_PANEL_BOTTOM_BAR_INSET=`var(${RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}, ${PAGE_BOTTOM_BAR_INSET})`,PANEL_WIDTH_VAR={leftPanel:_layoutvars.LAYOUT_VARS.leftPanelWidth,content:_layoutvars.LAYOUT_VARS.contentWidth,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelWidth};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BOTTOM_BAR_HEIGHT_VAR(){return BOTTOM_BAR_HEIGHT_VAR},get DEFAULT_LEFT_PANEL_VARIANT(){return DEFAULT_LEFT_PANEL_VARIANT},get LAYOUT_REGIONS_READY_VAR(){return LAYOUT_REGIONS_READY_VAR},get LEFT_BAR_BUTTON_INSET(){return LEFT_BAR_BUTTON_INSET},get PAGE_BOTTOM_BAR_INSET(){return PAGE_BOTTOM_BAR_INSET},get PANELS(){return PANELS},get PANEL_ORDER(){return PANEL_ORDER},get PANEL_START_VAR(){return PANEL_START_VAR},get PANEL_WIDTH_VAR(){return PANEL_WIDTH_VAR},get RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR(){return RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR},get RIGHT_PANEL_BOTTOM_BAR_INSET(){return RIGHT_PANEL_BOTTOM_BAR_INSET},get SIDE_PANELS(){return SIDE_PANELS},get SPLIT_MAX_WIDTH_VAR(){return SPLIT_MAX_WIDTH_VAR},get SUBNAV_OFFSET_VAR(){return SUBNAV_OFFSET_VAR},get Slot(){return Slot},get TOGGLABLE_SLOTS(){return TOGGLABLE_SLOTS}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _layoutvars=require("../../web-tokens/layout-vars"),Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"},SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel],PANELS=[Slot.content,Slot.splitview],PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel],DEFAULT_LEFT_PANEL_VARIANT="sidebar",LEFT_BAR_BUTTON_INSET={hSpace:"s",vSpace:"xs"},TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content),SUBNAV_OFFSET_VAR=_layoutvars.LAYOUT_VARS.subnavOffset,SPLIT_MAX_WIDTH_VAR=_layoutvars.LAYOUT_VARS.splitMaxWidth,BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.bottomBarHeight,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.rightPanelBottomBarHeight,PAGE_BOTTOM_BAR_INSET=`var(${BOTTOM_BAR_HEIGHT_VAR}, 0px)`,RIGHT_PANEL_BOTTOM_BAR_INSET=`var(${RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}, ${PAGE_BOTTOM_BAR_INSET})`,PANEL_WIDTH_VAR={leftPanel:_layoutvars.LAYOUT_VARS.leftPanelWidth,content:_layoutvars.LAYOUT_VARS.contentWidth,splitview:_layoutvars.LAYOUT_VARS.splitviewWidth,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelWidth},PANEL_START_VAR={leftPanel:_layoutvars.LAYOUT_VARS.leftPanelStart,content:_layoutvars.LAYOUT_VARS.contentStart,splitview:_layoutvars.LAYOUT_VARS.splitviewStart,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelStart},LAYOUT_REGIONS_READY_VAR=_layoutvars.LAYOUT_VARS.regionsReady;

package/build/cjs/components/Layout/-types.d.ts

@@ -1,4 +1,5 @@
 import type React from "react";
+import type { ConditionalAccessibleName } from "../../types/a11y";
 import type { PanelKey, SidePanelKey, SlotKey } from "./-constants";
 import type { PanelHeaderTitle } from "../Internal/PanelHeader/PanelHeader";
 import type { SandwichSeparator } from "../Internal/Sandwich/-types";
@@ -69,10 +70,21 @@ export type RightPanelState = SidePanelStateBase & {
 };
 /** Either side panel, for code that handles both. */
 export type SidePanelState = LeftPanelState | RightPanelState;
+export type RegionPresentation = "column" | "overlay" | "hidden";
+export type PanelAnimation = Readonly<{
+    property: "flex-grow";
+    /** Applied transition duration in milliseconds. */
+    duration: number;
+    easing: string;
+}>;
 /** Actions every slot handle exposes, whatever its state shape. No `resize`:
  *  sizes are declarative (`defaultSize` on the panel, then drag), and the
  *  content/split pair is CSS-split, so an imperative size wouldn't hold. */
 export type PanelHandleActions = {
+    /** Whether the region occupies a footer-aligned column, an overlay, or neither. */
+    readonly presentation: RegionPresentation;
+    /** Parameters of the width transition currently applied by Layout. */
+    readonly animation: PanelAnimation | null;
     /** Whether the slot is currently shown. */
     isVisible: boolean;
     /** Show the slot. */
@@ -265,18 +277,15 @@ export type SidePanelProps = ForwardedScrollProps & {
     /** Accessible name; when set, the panel renders as a `region` landmark. */
     "aria-label"?: string;
     collapsible?: boolean;
-    /** Number = pixels, unitless string = percent (e.g. `"30%"`).
-     *
-     *  Either unit sets the column's starting width only: a docked side panel
-     *  then keeps that width when the window resizes, and `Layout.Content` grows
-     *  and shrinks around it. Drag-resizing is a separate story - see
-     *  `resizable`. */
+    /** Number or `"320px"` = pixels; `"30%"` or `"30"` = percentage.
+     *  Pixel sizes keep their width when the container resizes. Percentage sizes
+     *  follow the container, subject to the panel's min/max constraints.
+     *  Independent of whether the user may resize the panel. */
     defaultSize?: Size;
-    /** Desktop only: allow drag-resizing the panel's column. Overrides the
-     *  provider config's `resizable`. When `false`, the column is fixed at
-     *  `defaultSize` - neighbours can't resize it either, though they stay
-     *  resizable against each other. Showing and hiding the panel still works. No
-     *  effect on the mobile drawer/sheet. */
+    /** Desktop only: allow the user to resize the column by pointer or keyboard.
+     *  Overrides the provider config's `resizable`. When `false`, dragging a
+     *  neighbour cannot resize this panel either. Percentage widths still follow
+     *  the container; showing and hiding still works. No effect on mobile. */
     resizable?: boolean;
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
@@ -310,6 +319,9 @@ export type ContentProps = {
  * (default: the `xxl` breakpoint) and centred once past it.
  */
 export type SplitProps = ForwardedScrollProps & {
+    /** Panel surface. Defaults to primary.
+     *  TODO: Move background ownership to the client-rendered content. */
+    background?: "primary" | "transparent";
     /** Panel content in source order. `<Layout.SplitHeader />` /
      *  `<Layout.SplitFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -321,6 +333,8 @@ export type SplitProps = ForwardedScrollProps & {
 };
 /** Props of the internal mobile presentation of `Layout.Split`. */
 export type MobileSplitViewProps = ForwardedScrollProps & {
+    /** Surface forwarded from Layout.Split. */
+    background?: SplitProps["background"];
     children: React.ReactNode;
     /** Accessible name; when set, the view renders as a `region` landmark. */
     "aria-label"?: string;
@@ -452,6 +466,8 @@ export type SplitHeaderProps = PanelSlotHeaderProps & {
 };
 export type SplitFooterProps = PanelSlotFooterProps;
 export type PanelContainerProps = ForwardedScrollProps & {
+    /** Panel surface. Defaults to primary. */
+    background?: SplitProps["background"];
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;
@@ -481,3 +497,11 @@ export type RightPanelProps = SidePanelProps & {
      *  floating panel isn't part of the resizable row. */
     collapsible?: boolean;
 };
+export type LayoutBottomBarProps = ConditionalAccessibleName & {
+    /** Layout.BottomBarItem declarations for the page's actions. */
+    children: React.ReactNode;
+    /** Background of each section; gaps stay transparent. Defaults to transparent. */
+    background?: "primary" | "secondary" | "transparent";
+    /** Identifier applied to the action group. */
+    "data-e2e-test-id"?: string;
+};

package/build/cjs/components/Layout/BottomBar/BottomBarItem/LayoutBottomBarItem.d.ts

@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from "react";
+import type { SlotKey } from "../../-types";
+export type LayoutBottomBarFallback = "hide" | "remaining" | "full";
+export type LayoutBottomBarItemProps = {
+    /** Layout region whose column the item follows. */
+    region: SlotKey;
+    /** Bounds for column actions. Defaults to panel. Available lets content and
+     *  split actions occupy their outer margins up to the side panels, keeping gaps.
+     *  The child controls whether it fills these bounds; fallback is unchanged. */
+    boundary?: "panel" | "available";
+    /** Placement when the region has no column. Defaults to hiding the item. */
+    fallback?: LayoutBottomBarFallback;
+    /** Actions supplied and styled by the consumer. */
+    children: ReactNode;
+    /** Identifier applied to the item's action container. */
+    "data-e2e-test-id"?: string;
+};
+export declare const LayoutBottomBarItem: FC<LayoutBottomBarItemProps>;

package/build/cjs/components/Layout/BottomBar/BottomBarItem/LayoutBottomBarItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutBottomBarItem",{enumerable:!0,get:function(){return LayoutBottomBarItem}});const LayoutBottomBarItem=()=>null;