@amboss/design-system 4.5.1 → 4.6.1

package/build/esm/components/Internal/ToolbarItemCount/ToolbarItemCount.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement, ReactNode } from "react";
+type ToolbarItemCountProps = {
+    /** The count itself, e.g. `"50 items"`. */
+    children: ReactNode;
+    /** Published on the text, so a toolbar's `aria-labelledby`/`aria-describedby` can point at it. */
+    id?: string;
+    "data-e2e-test-id"?: string;
+};
+/**
+ * The live region shown by `BulkActionsToolbar` and `FilterToolbar`, so a
+ * count change announces without moving focus. `DataTableToolbar` moves it
+ * between the two rows as `isSelectable` changes, so one definition covers
+ * both instead of two copies drifting apart.
+ */
+export declare function ToolbarItemCount({ children, id, "data-e2e-test-id": dataE2eTestId, ...rest }: ToolbarItemCountProps): ReactElement;
+export {};

package/build/esm/components/Internal/ToolbarItemCount/ToolbarItemCount.js

@@ -0,0 +1 @@
+import React from"react";import{Text}from"../../Typography/Text/Text";export function ToolbarItemCount({children,id,"data-e2e-test-id":dataE2eTestId,...rest}){return React.createElement("div",{...rest,role:"status","aria-atomic":"true","data-e2e-test-id":dataE2eTestId},React.createElement(Text,{size:"s",color:"secondary",weight:"bold",id:id},children))}

package/build/esm/components/Kbd/Kbd.d.ts

@@ -0,0 +1,118 @@
+import React from "react";
+/** Every name both key maps must define, so neither can drift from the other. */
+export type KeyName = "cmd" | "meta" | "ctrl" | "alt" | "shift" | "enter" | "esc" | "backspace" | "tab" | "up" | "down" | "left" | "right" | "updown";
+export declare const MAC_OS_KEYS: {
+    cmd: {
+        label: string;
+        spokenLabel: string;
+    };
+    meta: {
+        label: string;
+        spokenLabel: string;
+    };
+    ctrl: {
+        label: string;
+        spokenLabel: string;
+    };
+    alt: {
+        label: string;
+        spokenLabel: string;
+    };
+    shift: {
+        label: string;
+        spokenLabel: string;
+    };
+    enter: {
+        label: string;
+        spokenLabel: string;
+    };
+    esc: {
+        label: string;
+    };
+    backspace: {
+        label: string;
+        spokenLabel: string;
+    };
+    tab: {
+        label: string;
+        spokenLabel: string;
+    };
+    up: {
+        label: string;
+        spokenLabel: string;
+    };
+    down: {
+        label: string;
+        spokenLabel: string;
+    };
+    left: {
+        label: string;
+        spokenLabel: string;
+    };
+    right: {
+        label: string;
+        spokenLabel: string;
+    };
+    updown: {
+        label: string;
+        spokenLabel: string;
+    };
+};
+export declare const WINDOWS_KEYS: {
+    cmd: {
+        label: string;
+    };
+    meta: {
+        label: string;
+    };
+    ctrl: {
+        label: string;
+    };
+    alt: {
+        label: string;
+    };
+    shift: {
+        label: string;
+    };
+    enter: {
+        label: string;
+    };
+    esc: {
+        label: string;
+    };
+    backspace: {
+        label: string;
+    };
+    tab: {
+        label: string;
+    };
+    up: {
+        label: string;
+        spokenLabel: string;
+    };
+    down: {
+        label: string;
+        spokenLabel: string;
+    };
+    left: {
+        label: string;
+        spokenLabel: string;
+    };
+    right: {
+        label: string;
+        spokenLabel: string;
+    };
+    updown: {
+        label: string;
+        spokenLabel: string;
+    };
+};
+export type KbdPlatform = "macOs" | "windows";
+export type KbdProps = {
+    /** Semantic key name(s) to display, e.g. `"A"` or `["shift", "cmd"]`. Recognised names (`cmd`, `ctrl`, `alt`, `shift`, `enter`, `esc`, `backspace`, `tab`, `up`, `down`, `left`, `right`, `updown`) render the symbol for the detected platform; any other value is rendered as written, with a single character uppercased. */
+    keys: string | string[];
+    /** Pins the rendered symbols to one platform instead of detecting the user's. Use for tests, stories, and shortcuts that only exist on one platform. */
+    platform?: KbdPlatform;
+    "data-e2e-test-id"?: string;
+};
+export declare function Kbd({ keys, platform, "data-e2e-test-id": dataE2eTestId, }: KbdProps): React.ReactElement;

package/build/esm/components/Kbd/Kbd.js

@@ -0,0 +1 @@
+import React from"react";import styled from"@emotion/styled";import{useIsMacOs}from"../../shared/useIsMacOs";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";export const MAC_OS_KEYS={cmd:{label:"⌘",spokenLabel:"Command"},meta:{label:"⌘",spokenLabel:"Command"},ctrl:{label:"⌃",spokenLabel:"Control"},alt:{label:"⌥",spokenLabel:"Option"},shift:{label:"⇧",spokenLabel:"Shift"},enter:{label:"↩",spokenLabel:"Enter"},esc:{label:"Esc"},backspace:{label:"⌫",spokenLabel:"Backspace"},tab:{label:"⇥",spokenLabel:"Tab"},up:{label:"↑",spokenLabel:"Up arrow"},down:{label:"↓",spokenLabel:"Down arrow"},left:{label:"←",spokenLabel:"Left arrow"},right:{label:"→",spokenLabel:"Right arrow"},updown:{label:"⇅",spokenLabel:"Up and down arrows"}};export const WINDOWS_KEYS={cmd:{label:"Ctrl"},meta:{label:"Ctrl"},ctrl:{label:"Ctrl"},alt:{label:"Alt"},shift:{label:"Shift"},enter:{label:"Enter"},esc:{label:"Esc"},backspace:{label:"Backspace"},tab:{label:"Tab"},up:{label:"↑",spokenLabel:"Up arrow"},down:{label:"↓",spokenLabel:"Down arrow"},left:{label:"←",spokenLabel:"Left arrow"},right:{label:"→",spokenLabel:"Right arrow"},updown:{label:"⇅",spokenLabel:"Up and down arrows"}};let StyledKbd=styled("kbd",{target:"e1v9oi190",label:"StyledKbd"})(({theme})=>({display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",minWidth:theme.variables.size.dimension.kbd.minWidth,padding:theme.variables.size.spacing.xxxs,border:`1px solid ${theme.values.color.kbd.border.default}`,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.kbd.background.default,color:theme.values.color.kbd.foreground.default,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.xxs,fontWeight:theme.variables.weight.normal,lineHeight:1,whiteSpace:"nowrap",cursor:"default",userSelect:"none"})),StyledKbdKeys=styled("span",{target:"e1v9oi191",label:"StyledKbdKeys"})(({theme,hasSeparators})=>({display:"inline-flex",gap:hasSeparators?theme.variables.size.spacing.xxs:theme.variables.size.spacing.zero})),toDisplayLabel=key=>1===key.length?key.toUpperCase():key,toKeyDisplay=(key,isMacOs)=>{let trimmedKey=key.trim();return(isMacOs?MAC_OS_KEYS:WINDOWS_KEYS)[trimmedKey.toLowerCase()]??{label:toDisplayLabel(trimmedKey)}};export function Kbd({keys,platform,"data-e2e-test-id":dataE2eTestId}){let detectedIsMacOs=useIsMacOs(),isMacOs=platform?"macOs"===platform:detectedIsMacOs,keyDisplays=(Array.isArray(keys)?keys:[keys]).map(key=>toKeyDisplay(key,isMacOs)),spokenKeys=keyDisplays.map(({label,spokenLabel})=>spokenLabel??label).join(" ");return React.createElement(StyledKbd,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Kbd"},React.createElement(StyledKbdKeys,{"aria-hidden":"true",hasSeparators:!isMacOs&&keyDisplays.length>1},keyDisplays.map(({label},index)=>React.createElement(React.Fragment,{key:`${label}-${index}`},index>0&&!isMacOs&&React.createElement("span",null,"+"),React.createElement("span",null,label)))),React.createElement(ScreenReaderText,{as:"span"},spokenKeys))}

package/build/esm/components/KbdGroup/KbdGroup.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export type KbdGroupProps = {
+    /** The `Kbd` elements making up the sequence, in the order they are pressed. */
+    children: React.ReactNode;
+    "data-e2e-test-id"?: string;
+};
+export declare function KbdGroup({ children, "data-e2e-test-id": dataE2eTestId, }: KbdGroupProps): React.ReactElement;

package/build/esm/components/KbdGroup/KbdGroup.js

@@ -0,0 +1 @@
+import React from"react";import styled from"@emotion/styled";let StyledKbdGroup=styled("span",{target:"e1mlf86z0",label:"StyledKbdGroup"})(({theme})=>({display:"inline-flex",alignItems:"flex-start",gap:theme.variables.size.spacing.xxs}));export function KbdGroup({children,"data-e2e-test-id":dataE2eTestId}){return React.createElement(StyledKbdGroup,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"KbdGroup"},children)}

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

@@ -289,7 +289,12 @@ 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%"`). */
+    /** 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`. */
     defaultSize?: Size;
     minSize?: Size;
     maxSize?: Size;

package/build/esm/components/Layout/Layout.js

@@ -1 +1 @@
-import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence,useLayoutReservedSlots,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext}from"./registry";import{useFloatablePortalTargets}from"./useFloatablePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.leftPanel,leftPanelWidthCssVar],[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"e19d8fc30",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=styled("div",{target:"e19d8fc31",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e19d8fc32",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"e19d8fc33",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e19d8fc34",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=(slot,declared,layoutState)=>{if(slot===Slot.content)return;let declaredSize=declared[slot]?.defaultSize;return void 0!==declaredSize?declaredSize:declared[slot]?.resizable!==!1?layoutState[slot].size:void 0},childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=useFloatablePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),reservedSlots=useLayoutReservedSlots(),hostedSlotCount=rowSlots.filter(slot=>declared[slot]||reservedSlots.includes(slot)).length,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>({id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor(slot,declared,layoutState),minSize:declared[slot]?.minSize??layoutState[slot].minSize,maxSize:declared[slot]?.maxSize??layoutState[slot].maxSize,collapsible:slot!==Slot.content&&(declared[slot]?.collapsible??!0),resizable:declared[slot]?.resizable??resizableFromState(layoutState[slot])})),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},hostedSlotCount<=1?soloHost:panelGroup,isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;
+import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence,useLayoutReservedSlots,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext}from"./registry";import{useFloatablePortalTargets}from"./useFloatablePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.leftPanel,leftPanelWidthCssVar],[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"ec2opau0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=styled("div",{target:"ec2opau1",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"ec2opau2",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"ec2opau3",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"ec2opau4",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=useFloatablePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),reservedSlots=useLayoutReservedSlots(),hostedSlotCount=rowSlots.filter(slot=>declared[slot]||reservedSlots.includes(slot)).length,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},hostedSlotCount<=1?soloHost:panelGroup,isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;

package/build/esm/components/Layout/LeftPanel/LeftPanelDocked.js

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useLayoutPortal}from"../registry";import{usePanelDockedSlide}from"../usePanelDockedSlide";import{PanelSlideBody}from"../PanelSlideBody";import{PanelContainer}from"../PanelContainer";export const LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=usePanelDockedSlide({slot:Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable});return useLayoutPortal(Slot.leftPanel,isMounted?React.createElement(PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},React.createElement(PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};
+import React from"react";import{Slot}from"../-constants";import{useLayoutPortal}from"../registry";import{usePanelDockedSlide}from"../usePanelDockedSlide";import{PanelSlideBody}from"../PanelSlideBody";import{PanelContainer}from"../PanelContainer";export const LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=usePanelDockedSlide({slot:Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0});return useLayoutPortal(Slot.leftPanel,isMounted?React.createElement(PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},React.createElement(PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};

package/build/esm/components/Layout/RightPanel/RightPanel.js

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize=378,minSize=328,maxSize="30%",collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),canRender=useCanRenderPanel();useDeclarePanel(Slot.rightPanel,{defaultSize,minSize,maxSize,collapsible,resizable,variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return(useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),canRender)?isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};
+import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize=378,minSize=328,maxSize="30%",collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),canRender=useCanRenderPanel();useDeclarePanel(Slot.rightPanel,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0,variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return(useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),canRender)?isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};

package/build/esm/components/Layout/registry.d.ts

@@ -23,6 +23,10 @@ export type PanelReg = {
     /** When `false`, the panel is fixed at `defaultSize` and can't be drag-resized
      *  (directly or via a neighbour). Defaults to resizable. */
     resizable?: boolean;
+    /** Lock this column's width when the window resizes, leaving the change to
+     *  the columns without it. Declared by the docked side panels, which are
+     *  sized for their own contents; `content` omits it and absorbs. */
+    lockWidthOnWindowResize?: boolean;
     /** Initial presentation from `RightPanel`'s `variant` prop. Read as the
      *  fallback wherever the store's variant is still unset. */
     variant?: RightPanelVariant;

package/build/esm/components/Layout/registry.js

@@ -1 +1 @@
-import{createContext,useContext,useEffect,useLayoutEffect,useRef}from"react";import{createPortal}from"react-dom";import{Slot}from"./-constants";import{useLayoutPanelsEnabled}from"./context";export const LayoutPortalContext=createContext({});export function useLayoutPortal(slot,children){let slotNode=useContext(LayoutPortalContext)[slot]??null;return slotNode?createPortal(children,slotNode):null}export const PanelRegistryContext=createContext(null);export function useDeclarePanel(slot,reg){let registry=useContext(PanelRegistryContext),declarationEnabled=!0===useLayoutPanelsEnabled()||slot===Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,variant}=reg;useLayoutEffect(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,slot,defaultSize,minSize,maxSize,collapsible,resizable,variant])}export const PanelDeclarationsContext=createContext({});export const PanelPresenceContext=createContext(null);export function usePanelPresence(slot,isPresent){let presence=useContext(PanelPresenceContext);useLayoutEffect(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}export const PanelAnimationContext=createContext(null);export function usePanelAnimationControl(){return useContext(PanelAnimationContext)}export function useRunCallbackOnValueChange(value,onChange){let prev=useRef(value);useEffect(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}export function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}
+import{createContext,useContext,useEffect,useLayoutEffect,useRef}from"react";import{createPortal}from"react-dom";import{Slot}from"./-constants";import{useLayoutPanelsEnabled}from"./context";export const LayoutPortalContext=createContext({});export function useLayoutPortal(slot,children){let slotNode=useContext(LayoutPortalContext)[slot]??null;return slotNode?createPortal(children,slotNode):null}export const PanelRegistryContext=createContext(null);export function useDeclarePanel(slot,reg){let registry=useContext(PanelRegistryContext),declarationEnabled=!0===useLayoutPanelsEnabled()||slot===Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;useLayoutEffect(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}export const PanelDeclarationsContext=createContext({});export const PanelPresenceContext=createContext(null);export function usePanelPresence(slot,isPresent){let presence=useContext(PanelPresenceContext);useLayoutEffect(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}export const PanelAnimationContext=createContext(null);export function usePanelAnimationControl(){return useContext(PanelAnimationContext)}export function useRunCallbackOnValueChange(value,onChange){let prev=useRef(value);useEffect(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}export function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}

package/build/esm/components/Layout/usePanelDockedSlide.d.ts

@@ -11,6 +11,9 @@ export type PanelDockedSlideOptions = {
      *  charge. Doesn't affect the slide - the open/close resize goes through the
      *  imperative handle, which a fixed column still honours. */
     resizable?: boolean;
+    /** Forwarded to the declaration: lock the column's width when the window
+     *  resizes. Doesn't affect the slide, which resizes the column outright. */
+    lockWidthOnWindowResize?: boolean;
 };
 export type PanelDockedSlide = {
     /** Whether the panel's content should render at all (entering, open, or
@@ -29,4 +32,4 @@ export type PanelDockedSlide = {
  * reduced motion is requested. The mobile modal-drawer lifecycle lives in
  * {@link useExitAnimation} and the Drawer's styled components.
  */
-export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, }: PanelDockedSlideOptions): PanelDockedSlide;
+export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, }: PanelDockedSlideOptions): PanelDockedSlide;

package/build/esm/components/Layout/usePanelDockedSlide.js

@@ -1 +1 @@
-import{useLayoutEffect,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence}from"./registry";import{useLayout}from"./useLayout";let parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}};export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),reducedMotion=prefersReducedMotion(window),[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[pinnedWidth,setPinnedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);return isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0)),useDeclarePanel(slot,{defaultSize:"entering"===phase&&collapsible&&!reducedMotion?0:defaultSize,minSize,maxSize,collapsible,resizable}),usePanelPresence(slot,isMounted),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setPinnedWidth(null),"exiting"===phase&&setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let targetPx=resolveSizePx(targetSize,element.closest("[data-group]")?.getBoundingClientRect().width??null);setPinnedWidth("entering"===phase?targetPx:handle.getSize().inPixels),setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return!collapsible||reducedMotion?settle(animation?.getHandle(slot)??null):waitForColumn(0),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,animation,window,theme]),{isMounted,pinnedWidth}}
+import{useLayoutEffect,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence}from"./registry";import{useLayout}from"./useLayout";let parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}};export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),reducedMotion=prefersReducedMotion(window),[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[pinnedWidth,setPinnedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);return isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0)),useDeclarePanel(slot,{defaultSize:"entering"===phase&&collapsible&&!reducedMotion?0:defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}),usePanelPresence(slot,isMounted),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setPinnedWidth(null),"exiting"===phase&&setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let targetPx=resolveSizePx(targetSize,element.closest("[data-group]")?.getBoundingClientRect().width??null);setPinnedWidth("entering"===phase?targetPx:handle.getSize().inPixels),setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return!collapsible||reducedMotion?settle(animation?.getHandle(slot)??null):waitForColumn(0),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,animation,window,theme]),{isMounted,pinnedWidth}}

package/build/esm/components/Tooltip/BaseTooltip.js

@@ -1 +1 @@
-import{useFocusVisible}from"@react-aria/interactions";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{TooltipContent}from"./TooltipContent";export function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=useMemo(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=useFocusVisible(),[isVisible,setVisible]=useState(!1),triggeredByEvent=useRef(null),isTooltipHovered=useRef(!1),isTriggerHovered=useRef(!1),hideTooltipTimeoutId=useRef(null),showTooltipTimeoutId=useRef(null),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,toggleVisibility=useCallback(status=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=useCallback(()=>{isTriggerHovered.current=!0,isTooltipHovered.current||(clearTimeout(showTooltipTimeoutId.current),showTooltipTimeoutId.current=setTimeout(()=>{isTriggerHovered.current&&(triggeredByEvent.current="hover",toggleVisibility(!0))},200))},[toggleVisibility]),handleTriggerPointerLeave=useCallback(()=>{isTriggerHovered.current=!1,clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current||"hover"!==triggeredByEvent.current||isTriggerHovered.current||toggleVisibility(!1)},200)},[toggleVisibility]),handleTriggerFocus=useCallback(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=useCallback(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=useCallback(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=useCallback(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]);useEffect(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),useEffect(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=React.createElement(TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,"aria-hidden":!0,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:subTheme,onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{isTooltipHovered.current=!1,"hover"===triggeredByEvent.current&&toggleVisibility(!1)},privateProps:privateProps});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}
+import{useFocusVisible}from"@react-aria/interactions";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{TooltipContent}from"./TooltipContent";export function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=useMemo(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=useFocusVisible(),[isVisible,setVisible]=useState(!1),triggeredByEvent=useRef(null),isTooltipHovered=useRef(!1),isTriggerHovered=useRef(!1),hideTooltipTimeoutId=useRef(null),showTooltipTimeoutId=useRef(null),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,toggleVisibility=useCallback(status=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=useCallback(()=>{isTriggerHovered.current=!0,isTooltipHovered.current||(clearTimeout(showTooltipTimeoutId.current),showTooltipTimeoutId.current=setTimeout(()=>{isTriggerHovered.current&&(triggeredByEvent.current="hover",toggleVisibility(!0))},200))},[toggleVisibility]),handleTriggerPointerLeave=useCallback(()=>{isTriggerHovered.current=!1,clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current||"hover"!==triggeredByEvent.current||isTriggerHovered.current||toggleVisibility(!1)},200)},[toggleVisibility]),handleTriggerFocus=useCallback(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=useCallback(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=useCallback(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=useCallback(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]);useEffect(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),useEffect(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=React.createElement(TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:subTheme,onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{isTooltipHovered.current=!1,"hover"===triggeredByEvent.current&&toggleVisibility(!1)},privateProps:privateProps});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}

package/build/esm/components/Tooltip/Tooltip.d.ts

@@ -3,5 +3,7 @@ import type { BaseTooltipProps } from "./BaseTooltip";
 import type { TooltipConditionalProps } from "./types";
 export type TooltipProps = Omit<BaseTooltipProps, "content" | "contentPadding" | "maxWidth" | "subTheme"> & {
     content: string;
+    /** The keyboard shortcut that triggers the same action, shown in a second column beside the content. Pass a `Kbd` for keys pressed together or a `KbdGroup` for a sequence. Hidden below the `m` breakpoint, which has no keyboard. */
+    shortcut?: React.ReactElement;
 } & TooltipConditionalProps;
-export declare function Tooltip({ content, ...rest }: TooltipProps): React.ReactElement;
+export declare function Tooltip({ content, shortcut, ...rest }: TooltipProps): React.ReactElement;

package/build/esm/components/Tooltip/Tooltip.js

@@ -1 +1 @@
-import React from"react";import{Text}from"../Typography/Text/Text";import{BaseTooltip}from"./BaseTooltip";export function Tooltip({content,...rest}){let contentElm=React.createElement(Text,{size:"s"},content);return React.createElement(BaseTooltip,{content:contentElm,subTheme:"inverted",...rest})}
+import React from"react";import styled from"@emotion/styled";import{Text}from"../Typography/Text/Text";import{mqValue}from"../../shared/mediaQueries";import{BaseTooltip}from"./BaseTooltip";let StyledTooltipRow=styled("div",{target:"erivg040",label:"StyledTooltipRow"})(({theme})=>({display:"flex",alignItems:"flex-start",gap:theme.variables.size.spacing.xxs})),StyledKbdColumn=styled("div",{target:"erivg041",label:"StyledKbdColumn"})(({theme})=>({flexShrink:0,paddingTop:theme.variables.size.spacing.xxxs,...mqValue({display:["none","flex"]})})),CustomText=styled(Text,{target:"erivg042",label:"CustomText"})({flex:"1 0 0",minWidth:0});export function Tooltip({content,shortcut,...rest}){let contentElm=shortcut?React.createElement(StyledTooltipRow,null,React.createElement(CustomText,{size:"s"},content),React.createElement(StyledKbdColumn,null,shortcut)):React.createElement(Text,{size:"s"},content);return React.createElement(BaseTooltip,{content:contentElm,subTheme:"inverted",...rest})}

package/build/esm/index.d.ts

@@ -42,6 +42,7 @@ export * from "./components/Content/DosageButton";
 export * from "./components/Content/ReferenceButton";
 export * from "./components/CountButton/CountButton";
 export * from "./components/DataTable";
+export * from "./components/DataTable/DataTableToolbar/DataTableToolbar";
 export * from "./components/Divider/Divider";
 export * from "./components/DropdownMenu/DropdownMenu";
 export * from "./components/EntityList";

package/build/esm/index.js

@@ -1 +1 @@
-import{ambossVisualConfiguration}from"./web-tokens/visualConfig";export const{dark,light}=ambossVisualConfiguration;export{default as createCache}from"@emotion/cache";export{CacheProvider,ThemeProvider}from"@emotion/react";export*from"./components/AccessCardItem/AccessCardItem";export*from"./components/AIButton/AIButton";export*from"./components/AIFloatingButton/AIFloatingButton";export*from"./components/Avatar/Avatar";export*from"./components/AvatarGroup/AvatarGroup";export*from"./components/Badge/Badge";export*from"./components/BinaryFeedback/BinaryFeedback";export*from"./components/Box/Box";export*from"./components/BulkActionsToolbar/BulkActionsToolbar";export*from"./components/Button/Button";export*from"./components/Callout/Callout";export*from"./components/Card/Card";export*from"./components/Card/CardBox/CardBox";export*from"./components/CatalogCard/CatalogCard";export*from"./components/ChatMessage";export*from"./components/ChatResponse";export*from"./components/CheckboxCard/CheckboxCard";export*from"./components/Collapsible/Collapsible";export*from"./components/ColorIndicator/ColorIndicator";export*from"./components/ColorPicker/ColorPicker";export*from"./components/Column/Columns";export*from"./components/Composite/FilterDialog/FilterDialog";export*from"./components/Container";export*from"./components/Content/ContentBadge/ContentBadge";export*from"./components/Content/ContentBox/ContentBox";export*from"./components/Content/ContentCheckbox/ContentCheckbox";export*from"./components/Content/ContentFontResizer";export*from"./components/Content/ContentHeading/ContentHeading";export*from"./components/Content/ContentLink/ContentLink";export*from"./components/Content/ContentList";export*from"./components/Content/ContentPictogramButton/ContentPictogramButton";export*from"./components/Content/ContentTable";export*from"./components/Content/ContentTableModal/ContentTableModal";export*from"./components/Content/ContentText/ContentText";export*from"./components/Content/DosageButton";export*from"./components/Content/ReferenceButton";export*from"./components/CountButton/CountButton";export*from"./components/DataTable";export*from"./components/Divider/Divider";export*from"./components/DropdownMenu/DropdownMenu";export*from"./components/EntityList";export*from"./components/EntityTree";export*from"./components/Form/Checkbox/Checkbox";export*from"./components/Form/Combobox/Combobox";export*from"./components/Form/DateInput/DateInput";export*from"./components/Form/DatePicker";export*from"./components/Form/FormFieldGroup/FormFieldGroup";export*from"./components/Form/Input";export*from"./components/Form/MaskedInput/MaskedInput";export*from"./components/Form/PasswordInput";export*from"./components/Form/Radio/Radio";export*from"./components/Form/RadioButton/RadioButton";export*from"./components/Form/RangeInput/RangeInput";export*from"./components/Form/SearchInput/SearchInput";export*from"./components/Form/SegmentedControl/SegmentedControl";export*from"./components/Form/Select";export*from"./components/Form/Textarea/Textarea";export*from"./components/Form/Toggle/Toggle";export*from"./components/Form/ToggleButton/ToggleButton";export*from"./components/Form/ToolbarToggle/ToolbarToggle";export*from"./components/Grid/Grid";export*from"./components/Icon/Icon";export*from"./components/IconTile/IconTile";export*from"./components/Image/Image";export*from"./components/Inline/Inline";export*from"./components/InlineMessage/InlineMessage";export*from"./components/InteractiveBox/InteractiveBox";export*from"./components/Layout";export*from"./components/Lightbox/Lightbox";export*from"./components/Link/Link";export*from"./components/LoadingSpinner/LoadingSpinner";export*from"./components/Logo/Logo";export*from"./components/MediaItem";export*from"./components/MediaViewerBar/MediaViewerBar";export*from"./components/MediaViewerCarousel/MediaViewerCarousel";export*from"./components/NavBar";export*from"./components/Notification/Notification";export*from"./components/Pagination/Pagination";export*from"./components/Patterns/ButtonGroup/ButtonGroup";export*from"./components/Patterns/EmptyState/EmptyState";export*from"./components/Patterns/Modal/Modal";export*from"./components/PictogramButton/PictogramButton";export*from"./components/Popover/Popover";export*from"./components/ProgressBar/ProgressBar";export*from"./components/PromptButton/PromptButton";export*from"./components/PromptButtonGroup/PromptButtonGroup";export*from"./components/PromptInput/PromptInput";export*from"./components/QBankRichText/QBankRichText";export*from"./components/RadioCard/RadioCard";export*from"./components/RangePopover/RangePopover";export*from"./components/RoundButton/RoundButton";export*from"./components/SearchResult/SearchResult";export*from"./components/SegmentedProgressBar/SegmentedProgressBar";export*from"./components/Sheet/Sheet";export*from"./components/SplashCard/SplashCard";export*from"./components/SplashCardMedia/SplashCardMedia";export*from"./components/Stack/Stack";export*from"./components/StatusIndicator/StatusIndicator";export*from"./components/SubThemeProvider/SubThemeProvider";export*from"./components/Tabs/Tabs";export*from"./components/Tag/Tag";export*from"./components/TagGroup/TagGroup";export*from"./components/Toast";export*from"./components/Toggletip/Toggletip";export*from"./components/Tooltip/Tooltip";export*from"./components/Tutorialtip/Tutorialtip";export*from"./components/Typography/Header";export*from"./components/Typography/StyledText/StyledText";export*from"./components/Typography/Text";export*from"./components/Typography/TextClamped/TextClamped";export*from"./components/UserHighlightTooltip/UserHighlightTooltip";export*from"./components/Utilities/AnimatedBorder/useAnimatedBorder";export*from"./components/Utilities/ContainerQuery/ContainerQuery";export*from"./components/Utilities/Expandable/Expandable";export*from"./components/Utilities/ScreenReaderText/ScreenReaderText";export*from"./shared/useSelectionRange";
+import{ambossVisualConfiguration}from"./web-tokens/visualConfig";export const{dark,light}=ambossVisualConfiguration;export{default as createCache}from"@emotion/cache";export{CacheProvider,ThemeProvider}from"@emotion/react";export*from"./components/AccessCardItem/AccessCardItem";export*from"./components/AIButton/AIButton";export*from"./components/AIFloatingButton/AIFloatingButton";export*from"./components/Avatar/Avatar";export*from"./components/AvatarGroup/AvatarGroup";export*from"./components/Badge/Badge";export*from"./components/BinaryFeedback/BinaryFeedback";export*from"./components/Box/Box";export*from"./components/BulkActionsToolbar/BulkActionsToolbar";export*from"./components/Button/Button";export*from"./components/Callout/Callout";export*from"./components/Card/Card";export*from"./components/Card/CardBox/CardBox";export*from"./components/CatalogCard/CatalogCard";export*from"./components/ChatMessage";export*from"./components/ChatResponse";export*from"./components/CheckboxCard/CheckboxCard";export*from"./components/Collapsible/Collapsible";export*from"./components/ColorIndicator/ColorIndicator";export*from"./components/ColorPicker/ColorPicker";export*from"./components/Column/Columns";export*from"./components/Composite/FilterDialog/FilterDialog";export*from"./components/Container";export*from"./components/Content/ContentBadge/ContentBadge";export*from"./components/Content/ContentBox/ContentBox";export*from"./components/Content/ContentCheckbox/ContentCheckbox";export*from"./components/Content/ContentFontResizer";export*from"./components/Content/ContentHeading/ContentHeading";export*from"./components/Content/ContentLink/ContentLink";export*from"./components/Content/ContentList";export*from"./components/Content/ContentPictogramButton/ContentPictogramButton";export*from"./components/Content/ContentTable";export*from"./components/Content/ContentTableModal/ContentTableModal";export*from"./components/Content/ContentText/ContentText";export*from"./components/Content/DosageButton";export*from"./components/Content/ReferenceButton";export*from"./components/CountButton/CountButton";export*from"./components/DataTable";export*from"./components/DataTable/DataTableToolbar/DataTableToolbar";export*from"./components/Divider/Divider";export*from"./components/DropdownMenu/DropdownMenu";export*from"./components/EntityList";export*from"./components/EntityTree";export*from"./components/Form/Checkbox/Checkbox";export*from"./components/Form/Combobox/Combobox";export*from"./components/Form/DateInput/DateInput";export*from"./components/Form/DatePicker";export*from"./components/Form/FormFieldGroup/FormFieldGroup";export*from"./components/Form/Input";export*from"./components/Form/MaskedInput/MaskedInput";export*from"./components/Form/PasswordInput";export*from"./components/Form/Radio/Radio";export*from"./components/Form/RadioButton/RadioButton";export*from"./components/Form/RangeInput/RangeInput";export*from"./components/Form/SearchInput/SearchInput";export*from"./components/Form/SegmentedControl/SegmentedControl";export*from"./components/Form/Select";export*from"./components/Form/Textarea/Textarea";export*from"./components/Form/Toggle/Toggle";export*from"./components/Form/ToggleButton/ToggleButton";export*from"./components/Form/ToolbarToggle/ToolbarToggle";export*from"./components/Grid/Grid";export*from"./components/Icon/Icon";export*from"./components/IconTile/IconTile";export*from"./components/Image/Image";export*from"./components/Inline/Inline";export*from"./components/InlineMessage/InlineMessage";export*from"./components/InteractiveBox/InteractiveBox";export*from"./components/Layout";export*from"./components/Lightbox/Lightbox";export*from"./components/Link/Link";export*from"./components/LoadingSpinner/LoadingSpinner";export*from"./components/Logo/Logo";export*from"./components/MediaItem";export*from"./components/MediaViewerBar/MediaViewerBar";export*from"./components/MediaViewerCarousel/MediaViewerCarousel";export*from"./components/NavBar";export*from"./components/Notification/Notification";export*from"./components/Pagination/Pagination";export*from"./components/Patterns/ButtonGroup/ButtonGroup";export*from"./components/Patterns/EmptyState/EmptyState";export*from"./components/Patterns/Modal/Modal";export*from"./components/PictogramButton/PictogramButton";export*from"./components/Popover/Popover";export*from"./components/ProgressBar/ProgressBar";export*from"./components/PromptButton/PromptButton";export*from"./components/PromptButtonGroup/PromptButtonGroup";export*from"./components/PromptInput/PromptInput";export*from"./components/QBankRichText/QBankRichText";export*from"./components/RadioCard/RadioCard";export*from"./components/RangePopover/RangePopover";export*from"./components/RoundButton/RoundButton";export*from"./components/SearchResult/SearchResult";export*from"./components/SegmentedProgressBar/SegmentedProgressBar";export*from"./components/Sheet/Sheet";export*from"./components/SplashCard/SplashCard";export*from"./components/SplashCardMedia/SplashCardMedia";export*from"./components/Stack/Stack";export*from"./components/StatusIndicator/StatusIndicator";export*from"./components/SubThemeProvider/SubThemeProvider";export*from"./components/Tabs/Tabs";export*from"./components/Tag/Tag";export*from"./components/TagGroup/TagGroup";export*from"./components/Toast";export*from"./components/Toggletip/Toggletip";export*from"./components/Tooltip/Tooltip";export*from"./components/Tutorialtip/Tutorialtip";export*from"./components/Typography/Header";export*from"./components/Typography/StyledText/StyledText";export*from"./components/Typography/Text";export*from"./components/Typography/TextClamped/TextClamped";export*from"./components/UserHighlightTooltip/UserHighlightTooltip";export*from"./components/Utilities/AnimatedBorder/useAnimatedBorder";export*from"./components/Utilities/ContainerQuery/ContainerQuery";export*from"./components/Utilities/Expandable/Expandable";export*from"./components/Utilities/ScreenReaderText/ScreenReaderText";export*from"./shared/useSelectionRange";

package/build/esm/shared/mediaQueries.d.ts

@@ -1,11 +1,11 @@
-import type { ColumnSizes, HorizontalAlignment, MQ, SpaceSizes, IconSizes, TextAlignment, VerticalAlignment, StackHorizontalAlignment, StackVerticalAlignment, Order, ColumnAlignment, Hyphens, BorderRadius, ButtonSize, LightboxVerticalAlignment } from "../types";
+import type { ColumnSizes, HorizontalAlignment, MQ, SpaceSizes, IconSizes, TextAlignment, VerticalAlignment, StackHorizontalAlignment, StackVerticalAlignment, Order, ColumnAlignment, Hyphens, BorderRadius, ButtonSize, InlineMessageSize, LightboxVerticalAlignment } from "../types";
 export type Breakpoints = [string, string, string];
 export type ContainerQueryBreakpoints = [string, string?, string?];
 type MqProp<T> = [
     T | MQ<T>,
     (Record<T extends string ? T : never, string | number> | ((value: T) => string | number))
 ];
-type MqRules = Record<string, MqProp<TextAlignment> | MqProp<SpaceSizes> | MqProp<HorizontalAlignment> | MqProp<VerticalAlignment> | MqProp<StackHorizontalAlignment> | MqProp<StackVerticalAlignment> | MqProp<LightboxVerticalAlignment> | MqProp<ColumnSizes> | MqProp<Order> | MqProp<ColumnAlignment> | MqProp<Hyphens> | MqProp<BorderRadius> | MqProp<boolean> | MqProp<IconSizes> | MqProp<ButtonSize>>;
+type MqRules = Record<string, MqProp<TextAlignment> | MqProp<SpaceSizes> | MqProp<HorizontalAlignment> | MqProp<VerticalAlignment> | MqProp<StackHorizontalAlignment> | MqProp<StackVerticalAlignment> | MqProp<LightboxVerticalAlignment> | MqProp<ColumnSizes> | MqProp<Order> | MqProp<ColumnAlignment> | MqProp<Hyphens> | MqProp<BorderRadius> | MqProp<boolean> | MqProp<IconSizes> | MqProp<ButtonSize> | MqProp<InlineMessageSize>>;
 type EmotionCssPropertyName = string;
 type EmotionCssValue = string | number;
 type EmotionCssDescription = Record<EmotionCssPropertyName, EmotionCssValue>;

package/build/esm/shared/useIsMacOs.d.ts

@@ -0,0 +1 @@
+export declare const useIsMacOs: () => boolean;

package/build/esm/shared/useIsMacOs.js

@@ -0,0 +1 @@
+import{useCallback,useSyncExternalStore}from"react";import{useWindow}from"./useWindow";let MAC_PLATFORM_PATTERN=/mac|iphone|ipad|ipod/i,readPlatform=navigator=>navigator.userAgentData?.platform||navigator.platform||navigator.userAgent,subscribeToPlatform=()=>()=>{},getServerIsMacOs=()=>!1;export const useIsMacOs=()=>{let window=useWindow();return useSyncExternalStore(subscribeToPlatform,useCallback(()=>!!window&&MAC_PLATFORM_PATTERN.test(readPlatform(window.navigator)),[window]),getServerIsMacOs)};

package/build/esm/types/index.d.ts

@@ -23,6 +23,8 @@ export declare const InputTextSizeRuntype: Union<[Literal<"s">, Literal<"m">]>;
 export type InputTextSize = Static<typeof InputTextSizeRuntype>;
 export declare const BaseTagSizeRuntype: Union<[Literal<"s">, Literal<"m">]>;
 export type BaseTagSize = Static<typeof BaseTagSizeRuntype>;
+export declare const InlineMessageSizeRuntype: Union<[Literal<"s">, Literal<"m">]>;
+export type InlineMessageSize = Static<typeof InlineMessageSizeRuntype>;
 export declare const BorderRadiusRuntype: Union<[Literal<"none">, Literal<"xs">, Literal<"s">, Literal<"m">]>;
 export type BorderRadius = Static<typeof BorderRadiusRuntype>;
 export declare const TextAlignmentRuntype: Union<[Literal<"left">, Literal<"right">, Literal<"center">]>;

package/build/esm/types/index.js

@@ -1 +1 @@
-import{Literal,Union}from"runtypes";export function asValidProps(props){return props}export const LinkTextSizeRuntype=Union(Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const TextSizeRuntype=Union(Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const InputTextSizeRuntype=Union(Literal("s"),Literal("m"));export const BaseTagSizeRuntype=Union(Literal("s"),Literal("m"));export const BorderRadiusRuntype=Union(Literal("none"),Literal("xs"),Literal("s"),Literal("m"));export const TextAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"));export const HorizontalAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"),Literal("spaceBetween"));export const VerticalAlignmentRuntype=Union(Literal("top"),Literal("bottom"),Literal("center"),Literal("stretch"));export const StackVerticalAlignmentRuntype=Union(Literal("top"),Literal("bottom"),Literal("center"),Literal("spaceBetween"));export const LightboxVerticalAlignmentRuntype=Union(Literal("top"),Literal("center"));export const StackHorizontalAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"),Literal("stretch"));export const SpaceSizesRuntype=Union(Literal("zero"),Literal("xxxs"),Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"),Literal("xl"),Literal("xxl"));export const ColumsSizesRuntype=Union(Literal(1),Literal(2),Literal(3),Literal(4),Literal(5),Literal(6),Literal(7),Literal(8),Literal(9),Literal(10),Literal(11),Literal(12),Literal("auto"),Literal("narrow"),Literal("fill"));export const ColumnAlignmentRunType=Union(Literal("auto"),Literal("start"),Literal("center"),Literal("end"));export const OrderRuntype=Union(Literal("first"),Literal("last"),Literal("unset"));export const BaseVariationsRuntype=Union(Literal("primary"),Literal("secondary"),Literal("tertiary"));export const BaseColorsRuntype=Union(BaseVariationsRuntype,Literal("accent"),Literal("onAccent"));export const AIButtonVariationsRuntype=Union(BaseVariationsRuntype,Literal("gradient"));export const PictogramVariationsRuntype=Union(Literal("secondary"),Literal("tertiary"),Literal("quaternary"));export const TextColorsRuntype=Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"));export const TextVariationsRuntype=Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"));export const TextWeightRuntype=Union(Literal("normal"),Literal("bold"),Literal("black"),Literal("inherit"));export const IconsColorsRuntime=Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand"),Literal("quaternary"),Literal("ai"));export const IconsVariationsRuntype=Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand"));export const IconSizesRuntype=Union(Literal("s"),Literal("m"),Literal("l"));export const CalloutVariationsRuntype=Union(Literal("info"),Literal("success"),Literal("error"),Literal("warning"),Literal("neutral"),Literal("ai"));export const LinkVariationsRuntype=Union(BaseVariationsRuntype);export const LinkColorsRuntype=Union(BaseColorsRuntype);export const ButtonSizeRuntype=Union(Literal("s"),Literal("m"),Literal("l"));export const RoundButtonSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const DropdownMenuSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const HyphensRuntype=Union(Literal("auto"),Literal("none"),Literal("manual"));export const OverflowWrapRuntype=Union(Literal("normal"),Literal("break-word"));export const ToggleSizeRuntype=Union(Literal("s"),Literal("m"));export const ListSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const PromptInputSizesRuntype=Union(Literal("s"),Literal("m"));export const MediaItemSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"),Literal("xl"));
+import{Literal,Union}from"runtypes";export function asValidProps(props){return props}export const LinkTextSizeRuntype=Union(Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const TextSizeRuntype=Union(Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const InputTextSizeRuntype=Union(Literal("s"),Literal("m"));export const BaseTagSizeRuntype=Union(Literal("s"),Literal("m"));export const InlineMessageSizeRuntype=Union(Literal("s"),Literal("m"));export const BorderRadiusRuntype=Union(Literal("none"),Literal("xs"),Literal("s"),Literal("m"));export const TextAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"));export const HorizontalAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"),Literal("spaceBetween"));export const VerticalAlignmentRuntype=Union(Literal("top"),Literal("bottom"),Literal("center"),Literal("stretch"));export const StackVerticalAlignmentRuntype=Union(Literal("top"),Literal("bottom"),Literal("center"),Literal("spaceBetween"));export const LightboxVerticalAlignmentRuntype=Union(Literal("top"),Literal("center"));export const StackHorizontalAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"),Literal("stretch"));export const SpaceSizesRuntype=Union(Literal("zero"),Literal("xxxs"),Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"),Literal("xl"),Literal("xxl"));export const ColumsSizesRuntype=Union(Literal(1),Literal(2),Literal(3),Literal(4),Literal(5),Literal(6),Literal(7),Literal(8),Literal(9),Literal(10),Literal(11),Literal(12),Literal("auto"),Literal("narrow"),Literal("fill"));export const ColumnAlignmentRunType=Union(Literal("auto"),Literal("start"),Literal("center"),Literal("end"));export const OrderRuntype=Union(Literal("first"),Literal("last"),Literal("unset"));export const BaseVariationsRuntype=Union(Literal("primary"),Literal("secondary"),Literal("tertiary"));export const BaseColorsRuntype=Union(BaseVariationsRuntype,Literal("accent"),Literal("onAccent"));export const AIButtonVariationsRuntype=Union(BaseVariationsRuntype,Literal("gradient"));export const PictogramVariationsRuntype=Union(Literal("secondary"),Literal("tertiary"),Literal("quaternary"));export const TextColorsRuntype=Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"));export const TextVariationsRuntype=Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"));export const TextWeightRuntype=Union(Literal("normal"),Literal("bold"),Literal("black"),Literal("inherit"));export const IconsColorsRuntime=Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand"),Literal("quaternary"),Literal("ai"));export const IconsVariationsRuntype=Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand"));export const IconSizesRuntype=Union(Literal("s"),Literal("m"),Literal("l"));export const CalloutVariationsRuntype=Union(Literal("info"),Literal("success"),Literal("error"),Literal("warning"),Literal("neutral"),Literal("ai"));export const LinkVariationsRuntype=Union(BaseVariationsRuntype);export const LinkColorsRuntype=Union(BaseColorsRuntype);export const ButtonSizeRuntype=Union(Literal("s"),Literal("m"),Literal("l"));export const RoundButtonSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const DropdownMenuSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const HyphensRuntype=Union(Literal("auto"),Literal("none"),Literal("manual"));export const OverflowWrapRuntype=Union(Literal("normal"),Literal("break-word"));export const ToggleSizeRuntype=Union(Literal("s"),Literal("m"));export const ListSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const PromptInputSizesRuntype=Union(Literal("s"),Literal("m"));export const MediaItemSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"),Literal("xl"));

package/build/esm/web-tokens/_colors.json

@@ -927,6 +927,32 @@
             "lightOriginalValue": "neutral.white"
         }
     },
+    "kbd": {
+        "color-kbd-background-default": {
+            "name": "kbd.background",
+            "subState": "default",
+            "darkValue": "#1e2125",
+            "darkOriginalValue": "night-black.dark02",
+            "lightValue": "#f5f7f9",
+            "lightOriginalValue": "gray.light04"
+        },
+        "color-kbd-foreground-default": {
+            "name": "kbd.foreground",
+            "subState": "default",
+            "darkValue": "#ffffff",
+            "darkOriginalValue": "neutral.white",
+            "lightValue": "#314554",
+            "lightOriginalValue": "gray.dark02"
+        },
+        "color-kbd-border-default": {
+            "name": "kbd.border",
+            "subState": "default",
+            "darkValue": "#5b5f67",
+            "darkOriginalValue": "night-gray.dark02",
+            "lightValue": "#a3b2bd",
+            "lightOriginalValue": "gray.light01"
+        }
+    },
     "canvas": {
         "color-canvas": {
             "name": "canvas",

package/build/esm/web-tokens/_sizes.json

@@ -89,6 +89,16 @@
         "variableName": "$size-dimension-checkbox-m",
         "isUsed": false
     },
+    {
+        "category": "size",
+        "type": "dimension",
+        "name": "dimension kbd",
+        "subitemName": "kbd minWidth",
+        "value": "16px",
+        "original": 16,
+        "variableName": "$size-dimension-kbd-min-width",
+        "isUsed": false
+    },
     {
         "category": "size",
         "type": "dimension",

package/build/esm/web-tokens/visualConfig.d.ts

@@ -18,6 +18,9 @@ type Variables = {
                 "s": string;
                 "m": string;
             };
+            "kbd": {
+                "minWidth": string;
+            };
             "radio": {
                 "s": string;
                 "m": string;
@@ -537,6 +540,17 @@ export type AmbossTheme = {
                 };
             };
         };
+        "kbd": {
+            "background": {
+                "default": string;
+            };
+            "foreground": {
+                "default": string;
+            };
+            "border": {
+                "default": string;
+            };
+        };
         "canvas": string;
         "background": {
             "primary": {
@@ -1772,6 +1786,17 @@ export type AmbossTheme = {
                         "default": string;
                     };
                 };
+                "kbd": {
+                    "background": {
+                        "default": string;
+                    };
+                    "foreground": {
+                        "default": string;
+                    };
+                    "border": {
+                        "default": string;
+                    };
+                };
             };
         };
         "success": {