@amboss/design-system 4.9.4-canary.2 → 4.9.4

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

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};
+import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};

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

@@ -7,4 +7,3 @@ export { useAutoScrollToBottom } from "./useAutoScrollToBottom";
 export { createLayoutStore } from "./store";
 export { createInitialState, layoutReducer } from "./reducer";
 export * from "./-types";
-export type { LayoutBottomBarProps } from "./BottomBar/LayoutBottomBar";

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

@@ -2,16 +2,13 @@ import { type ReactNode } from "react";
 import type { PanelImperativeHandle } from "react-resizable-panels";
 import type { RightPanelVariant, Size, SlotKey } from "./-types";
 export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
-type LayoutPortalTargets = PortalTargets & {
-    root?: HTMLElement | null;
-};
-export declare const LayoutPortalContext: React.Context<LayoutPortalTargets>;
+export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", HTMLElement | null>>>;
 /**
  * Portal `children` into the host DOM node registered for `slot`. Returns the
  * portal (or `null` if the host isn't mounted yet). Call unconditionally -
  * gate content by passing `null` as `children`, not by skipping the call.
  */
-export declare function useLayoutPortal(slot: SlotKey | "root", children: ReactNode): ReactNode;
+export declare function useLayoutPortal(slot: SlotKey, children: ReactNode): ReactNode;
 /**
  * Panel descriptor a marker contributes. The Group renders one resizable Panel
  * per *declared* panel that is currently shown - regardless of nesting depth.
@@ -23,8 +20,8 @@ export type PanelReg = {
     minSize?: Size;
     maxSize?: Size;
     collapsible?: boolean;
-    /** When `false`, user input can't resize the panel (directly or via a
-     *  neighbour). Container resizing still applies. Defaults to resizable. */
+    /** 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
@@ -92,4 +89,3 @@ export declare function usePanelAnimationControl(): PanelAnimationControl | null
 export declare function useRunCallbackOnValueChange<T>(value: T, onChange?: (value: T) => void): void;
 /** Fire `onChange(visible)` when `visible` transitions (not on initial mount). */
 export declare function useVisibleChange(visible: boolean, onChange?: (visible: boolean) => void): void;
-export {};

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

@@ -1 +1 @@
-import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{usePanelAnimations}from"./usePanelAnimations";import{useBreakpoints}from"../../shared/useBreakpoints";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{PanelDeclarationsContext}from"./registry";import{DEFAULT_LEFT_PANEL_VARIANT}from"./-constants";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store,{isMobile}=useBreakpoints(),animations=usePanelAnimations(),mobileStack=useContext(MobileSplitStackContext),presentationFor=slot=>state[slot].visible&&("splitview"===slot&&isMobile?mobileStack?.isSplitPresent:declared[slot])?"content"===slot?isMobile&&mobileStack?.isSplitPresent&&state.splitview.visible?"hidden":"column":"splitview"===slot?"column":"leftPanel"===slot?(state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT)==="sidebar"?"column":"overlay":isMobile||(state.rightPanel.variant??declared.rightPanel?.variant)==="float"?"overlay":"column":"hidden";return{state,leftPanel:{presentation:presentationFor("leftPanel"),animation:animations.leftPanel??null,state:{...state.leftPanel,variant:state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{presentation:presentationFor("rightPanel"),animation:animations.rightPanel??null,state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{presentation:presentationFor("content"),animation:animations.content??null,state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{presentation:presentationFor("splitview"),animation:animations.splitview??null,state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}
+import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{PanelDeclarationsContext}from"./registry";import{DEFAULT_LEFT_PANEL_VARIANT}from"./-constants";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}

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

@@ -1 +1 @@
-import{useLayoutEffect,useMemo,useRef,useState}from"react";import{flushSync}from"react-dom";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{parseDurationMs}from"../../shared/parseDurationMs";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{usePanelAnimationsStore}from"./usePanelAnimations";import{useLayout}from"./useLayout";let 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}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize,phase})=>void 0===collapsedSize?minSize:isVisible&&"idle"===phase?minSize??collapsedSize:collapsedSize;export const getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),rowKey=usePanelRow(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[fixedWidth,setFixedWidth]=useState(null),animations=usePanelAnimationsStore(),panelSlideAnimation=useMemo(()=>{let timing=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open;return{property:"flex-grow",duration:reducedMotion?0:parseDurationMs(timing.duration),easing:timing.timingFunction}},[theme,hasCollapsedRest,reducedMotion]);useLayoutEffect(()=>{animations?.set(slot,"idle"===phase||reducedMotion||!collapsible&&!hasCollapsedRest?null:panelSlideAnimation)},[animations,slot,phase,panelSlideAnimation,reducedMotion,collapsible,hasCollapsedRest]),useLayoutEffect(()=>()=>animations?.set(slot,null),[animations,slot]);let[prevVisible,setPrevVisible]=useState(isVisible),declaredMountSize=useRef(hasCollapsedRest&&!isVisible?collapsedSize:state.size??defaultSize),chosenOpenSize=useRef(state.size??defaultSize),needsRestCorrection=useRef(!1);isVisible!==prevVisible&&(chosenOpenSize.current=state.size??defaultSize,needsRestCorrection.current=!0,hasCollapsedRest&&setFixedWidth(resolveSizePx(state.size??defaultSize,null)),setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:hasCollapsedRest?declaredMountSize.current:mountDefaultSizeFor({defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize,phase}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable:(!hasCollapsedRest||!!isVisible&&"idle"===phase)&&resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted),useLayoutEffect(()=>{if(!hasCollapsedRest||"idle"!==phase||!needsRestCorrection.current)return;let restSize=isVisible?chosenOpenSize.current:collapsedSize,cancelled=!1;return animation?.setResizeSuppressed(slot,!0),Promise.resolve().then(()=>{if(cancelled)return;let handle=animation?.getHandle(slot);try{handle&&isHandleReady(handle)&&void 0!==restSize&&flushSync(()=>handle.resize(restSize))}finally{needsRestCorrection.current=!1,animation?.setResizeSuppressed(slot,!1)}}),()=>{cancelled=!0,animation?.setResizeSuppressed(slot,!1)}},[phase,hasCollapsedRest,isVisible,collapsedSize,animation,slot]);let latestRest=useRef({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let durationMs=panelSlideAnimation.duration,setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`${panelSlideAnimation.property} ${panelSlideAnimation.duration}ms ${panelSlideAnimation.easing}`):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&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase||hasCollapsedRest?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest)return void Promise.resolve().then(()=>waitForColumn(attempt+1));let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;if(handle&&element&&isHandleReady(handle)){if(hasCollapsedRest){let startSize="entering"===phase?collapsedSize:chosenOpenSize.current;void 0!==startSize&&flushSync(()=>handle.resize(startSize))}runSlide(handle,element);return}if("exiting"===phase||!animation||attempt>=30)return void settle(handle);frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme,panelSlideAnimation]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}
+import{useLayoutEffect,useRef,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{parseDurationMs}from"../../shared/parseDurationMs";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{useLayout}from"./useLayout";let 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}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize})=>void 0===collapsedSize?minSize:isVisible?minSize??collapsedSize:collapsedSize;export const getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),rowKey=usePanelRow(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[fixedWidth,setFixedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted);let latestRest=useRef({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=hasCollapsedRest?theme.variables.animation.navSlide.collapse: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&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));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||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}

package/build/esm/components/VirtualScrollList/VirtualScrollList.js

@@ -1 +1 @@
-import styled from"@emotion/styled";import React,{useRef,useReducer,useLayoutEffect,useEffect}from"react";import{VirtualScrollReducer}from"./VirtualScrollListReducer";let StyledContainer=styled("div",{target:"eyhrtu0",label:"StyledContainer"})(({maxHeight})=>({overflow:"auto",width:"100%",height:"100%",maxHeight})),StyledScrollableContent=styled("div",{target:"eyhrtu1",label:"StyledScrollableContent"})(({maxContentHeight})=>({overflow:"hidden",boxSizing:"border-box",height:maxContentHeight}));export function VirtualScrollList({id,maxHeight,itemHeight,itemAmount,emptyState=()=>null,itemInView,itemTemplate,containerStyle,"data-e2e-test-id":dataE2eTestId,onContentHeightChange,role,...ariaAttributes}){let scrollableContainerRef=useRef(null),viewportRef=useRef(null),adjustedForReflow=useRef(!1),[{scrolledItemCount=0,amountOfItemsInView=0,scrolledInPx,maxContentHeight=maxHeight,recommendedScrollPosition},dispatch]=useReducer(VirtualScrollReducer,{});useLayoutEffect(()=>{dispatch({type:"reset",itemHeight,maxHeight,overscan:10});let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=0)},[itemHeight,itemAmount,maxHeight]),useEffect(()=>{let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&dispatch({type:"recommendScrollPosition",scrollTop:scrollableContainer.scrollTop,itemToBeInView:itemInView})},[itemInView]),useEffect(()=>{if(null==recommendedScrollPosition)return;let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=recommendedScrollPosition)},[recommendedScrollPosition]),useLayoutEffect(()=>{viewportRef.current&&dispatch({type:"updateViewport",viewportNode:viewportRef.current,itemAmount})},[itemAmount,scrolledItemCount,amountOfItemsInView]),useEffect(()=>{onContentHeightChange?.()},[maxContentHeight,onContentHeightChange]);let itemCountToBeRendered=Math.min(Math.max(0,itemAmount-scrolledItemCount),amountOfItemsInView);return maxContentHeight>maxHeight&&!adjustedForReflow.current&&viewportRef.current&&(setTimeout(()=>{let viewportNode=viewportRef.current;viewportNode&&dispatch({type:"updateViewport",viewportNode,itemAmount})}),adjustedForReflow.current=!0),React.createElement(StyledContainer,{ref:scrollableContainerRef,maxHeight:maxHeight,style:{maxHeight,...containerStyle},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"VirtualScrollList",onScroll:e=>{dispatch({type:"scroll",scrollTop:e.currentTarget.scrollTop})}},0===itemAmount?emptyState():React.createElement(StyledScrollableContent,{maxContentHeight:maxContentHeight},React.createElement("div",{ref:viewportRef,style:{transform:`translateY(${scrolledInPx}px`},role:role,id:id,...ariaAttributes},!!itemCountToBeRendered&&Array(itemCountToBeRendered).fill(0).map((_,index)=>itemTemplate(scrolledItemCount+index)))))}
+import styled from"@emotion/styled";import React,{useRef,useReducer,useLayoutEffect,useEffect}from"react";import{VirtualScrollReducer}from"./VirtualScrollListReducer";let StyledContainer=styled("div",{target:"eawkr7u0",label:"StyledContainer"})(({maxHeight})=>({overflow:"auto",width:"100%",height:"100%",maxHeight})),StyledScrollableContent=styled("div",{target:"eawkr7u1",label:"StyledScrollableContent"})(({maxContentHeight})=>({overflow:"hidden",boxSizing:"border-box",height:maxContentHeight})),measureViewport=node=>({height:node.getBoundingClientRect().height,items:Array.from(node.children,child=>({offsetTop:child.offsetTop,height:child.getBoundingClientRect().height}))});export function VirtualScrollList({id,maxHeight,itemHeight,itemAmount,emptyState=()=>null,itemInView,itemTemplate,containerStyle,"data-e2e-test-id":dataE2eTestId,onContentHeightChange,role,...ariaAttributes}){let scrollableContainerRef=useRef(null),viewportRef=useRef(null),adjustedForReflow=useRef(!1),[{scrolledItemCount=0,amountOfItemsInView=0,scrolledInPx,maxContentHeight=maxHeight,recommendedScrollPosition},dispatch]=useReducer(VirtualScrollReducer,{});useLayoutEffect(()=>{dispatch({type:"reset",itemHeight,maxHeight,overscan:10});let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=0)},[itemHeight,itemAmount,maxHeight]),useEffect(()=>{let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&dispatch({type:"recommendScrollPosition",scrollTop:scrollableContainer.scrollTop,itemToBeInView:itemInView})},[itemInView]),useEffect(()=>{if(null==recommendedScrollPosition)return;let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=recommendedScrollPosition)},[recommendedScrollPosition]),useLayoutEffect(()=>{viewportRef.current&&dispatch({type:"updateViewport",measurements:measureViewport(viewportRef.current),itemAmount})},[itemAmount,scrolledItemCount,amountOfItemsInView]),useEffect(()=>{onContentHeightChange?.()},[maxContentHeight,onContentHeightChange]);let itemCountToBeRendered=Math.min(Math.max(0,itemAmount-scrolledItemCount),amountOfItemsInView);return maxContentHeight>maxHeight&&!adjustedForReflow.current&&viewportRef.current&&(setTimeout(()=>{let viewportNode=viewportRef.current;viewportNode&&dispatch({type:"updateViewport",measurements:measureViewport(viewportNode),itemAmount})}),adjustedForReflow.current=!0),React.createElement(StyledContainer,{ref:scrollableContainerRef,maxHeight:maxHeight,style:{maxHeight,...containerStyle},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"VirtualScrollList",onScroll:e=>{dispatch({type:"scroll",scrollTop:e.currentTarget.scrollTop})}},0===itemAmount?emptyState():React.createElement(StyledScrollableContent,{maxContentHeight:maxContentHeight},React.createElement("div",{ref:viewportRef,style:{transform:`translateY(${scrolledInPx}px`},role:role,id:id,...ariaAttributes},!!itemCountToBeRendered&&Array(itemCountToBeRendered).fill(0).map((_,index)=>itemTemplate(scrolledItemCount+index)))))}

package/build/esm/components/VirtualScrollList/VirtualScrollListReducer.d.ts

@@ -2,6 +2,13 @@ type Offset = {
     amount: number;
     isInterpolated: boolean;
 };
+export type ViewportMeasurements = {
+    readonly height: number;
+    readonly items: readonly {
+        readonly offsetTop: number;
+        readonly height: number;
+    }[];
+};
 type State = {
     avgItemHeight?: number;
     overscan?: number;
@@ -20,7 +27,7 @@ type Action = {
     scrollTop: number;
 } | {
     type: "updateViewport";
-    viewportNode: HTMLDivElement;
+    measurements: ViewportMeasurements;
     itemAmount: number;
 } | {
     type: "reset";

package/build/esm/components/VirtualScrollList/VirtualScrollListReducer.js

@@ -1 +1 @@
-let findClosestOffsetIndex=(arr,val)=>{let start=0,end=arr.length-1,mid=Math.floor((start+end)/2);for(;start<=end&&arr[mid=Math.floor((start+end)/2)].amount!==val;)val<arr[mid].amount?end=mid-1:start=mid+1;return mid},getMaxHeight=(maxAmountOfItems,offsets,lastItemHeight)=>{let amountOfOffsets=Math.min(offsets.length,maxAmountOfItems);return(offsets[amountOfOffsets-1]?.amount||0)+(lastItemHeight??0)},reduceScroll=(prevState,scrollTop)=>{let{topOffsets=[],overscan:tolerance=0}=prevState,scrolledItemCount=Math.max(0,findClosestOffsetIndex(topOffsets,scrollTop)-tolerance/2),scrolledInPx=topOffsets[scrolledItemCount]?.amount||0;return{...prevState,scrolledItemCount,scrolledInPx}},reduceUpdateViewport=(prevState,viewportNode,itemAmount)=>{let{topOffsets=[],scrolledInPx=0,scrolledItemCount=0,avgItemHeight=0,lastItemHeight,maxHeight=0,overscan:tolerance=0}=prevState,newTopOffsets=[...topOffsets],updatedLastItemHeight=lastItemHeight;Array.from(viewportNode.children).forEach((child,i)=>{newTopOffsets[i+scrolledItemCount]={amount:scrolledInPx+child.offsetTop,isInterpolated:!1},i+scrolledItemCount!==itemAmount-1||lastItemHeight||(updatedLastItemHeight=child.getBoundingClientRect().height)});let newAvgItemHeight=Math.max(avgItemHeight,viewportNode.getBoundingClientRect().height/(viewportNode.childElementCount||1));for(let i=0;i<itemAmount;i+=1)(!newTopOffsets[i]||newTopOffsets[i].isInterpolated)&&(newTopOffsets[i]={amount:newTopOffsets[i-1].amount+newAvgItemHeight,isInterpolated:!0});let maxContentHeight=getMaxHeight(itemAmount,newTopOffsets,updatedLastItemHeight);return{...prevState,lastItemHeight:updatedLastItemHeight,avgItemHeight:newAvgItemHeight,topOffsets:newTopOffsets,amountOfItemsInView:Math.round(maxHeight/newAvgItemHeight)+tolerance,maxContentHeight}},reduceReset=(prevState,itemHeight,maxHeight,overscan)=>({...prevState,lastItemHeight:null,topOffsets:[{amount:0,isInterpolated:!1}],scrolledInPx:0,scrolledItemCount:0,maxHeight,avgItemHeight:itemHeight,overscan}),reduceRecommendScrollPosition=(prevState,scrollTop,itemToBeInView)=>{let{topOffsets,maxHeight}=prevState;if(!topOffsets||void 0===maxHeight)return prevState;let bottomOfTarget=topOffsets[itemToBeInView+1]?.amount,topOfTarget=topOffsets[itemToBeInView]?.amount,recommendedScrollPosition=null;return topOfTarget<scrollTop&&(recommendedScrollPosition=topOfTarget),bottomOfTarget>=scrollTop+maxHeight&&(recommendedScrollPosition=bottomOfTarget-maxHeight),itemToBeInView===topOffsets.length-1&&(recommendedScrollPosition=topOffsets[itemToBeInView].amount),{...prevState,recommendedScrollPosition}};export const VirtualScrollReducer=(prevState,action)=>{switch(action.type){case"reset":return reduceReset(prevState,action.itemHeight,action.maxHeight,action.overscan);case"scroll":return reduceScroll(prevState,action.scrollTop);case"updateViewport":return reduceUpdateViewport(prevState,action.viewportNode,action.itemAmount);case"recommendScrollPosition":return reduceRecommendScrollPosition(prevState,action.scrollTop,action.itemToBeInView);default:throw Error()}};
+let findClosestOffsetIndex=(arr,val)=>{let start=0,end=arr.length-1,mid=Math.floor((start+end)/2);for(;start<=end&&arr[mid=Math.floor((start+end)/2)].amount!==val;)val<arr[mid].amount?end=mid-1:start=mid+1;return mid},getMaxHeight=(maxAmountOfItems,offsets,lastItemHeight)=>{let amountOfOffsets=Math.min(offsets.length,maxAmountOfItems);return(offsets[amountOfOffsets-1]?.amount||0)+(lastItemHeight??0)},reduceScroll=(prevState,scrollTop)=>{let{topOffsets=[],overscan:tolerance=0}=prevState,scrolledItemCount=Math.max(0,findClosestOffsetIndex(topOffsets,scrollTop)-tolerance/2),scrolledInPx=topOffsets[scrolledItemCount]?.amount||0;return{...prevState,scrolledItemCount,scrolledInPx}},reduceUpdateViewport=({prevState,measurements,itemAmount})=>{let{topOffsets=[],scrolledInPx=0,scrolledItemCount=0,avgItemHeight=0,lastItemHeight,maxHeight=0,overscan:tolerance=0}=prevState,newTopOffsets=[...topOffsets],updatedLastItemHeight=lastItemHeight;measurements.items.forEach((child,i)=>{newTopOffsets[i+scrolledItemCount]={amount:scrolledInPx+child.offsetTop,isInterpolated:!1},i+scrolledItemCount!==itemAmount-1||lastItemHeight||(updatedLastItemHeight=child.height)});let newAvgItemHeight=Math.max(avgItemHeight,measurements.height/(measurements.items.length||1));for(let i=0;i<itemAmount;i+=1)(!newTopOffsets[i]||newTopOffsets[i].isInterpolated)&&(newTopOffsets[i]={amount:newTopOffsets[i-1].amount+newAvgItemHeight,isInterpolated:!0});let maxContentHeight=getMaxHeight(itemAmount,newTopOffsets,updatedLastItemHeight);return{...prevState,lastItemHeight:updatedLastItemHeight,avgItemHeight:newAvgItemHeight,topOffsets:newTopOffsets,amountOfItemsInView:Math.round(maxHeight/newAvgItemHeight)+tolerance,maxContentHeight}},reduceReset=(prevState,itemHeight,maxHeight,overscan)=>({...prevState,lastItemHeight:null,topOffsets:[{amount:0,isInterpolated:!1}],scrolledInPx:0,scrolledItemCount:0,maxHeight,avgItemHeight:itemHeight,overscan}),reduceRecommendScrollPosition=(prevState,scrollTop,itemToBeInView)=>{let{topOffsets,maxHeight}=prevState;if(!topOffsets||void 0===maxHeight)return prevState;let bottomOfTarget=topOffsets[itemToBeInView+1]?.amount,topOfTarget=topOffsets[itemToBeInView]?.amount,recommendedScrollPosition=null;return topOfTarget<scrollTop&&(recommendedScrollPosition=topOfTarget),bottomOfTarget>=scrollTop+maxHeight&&(recommendedScrollPosition=bottomOfTarget-maxHeight),itemToBeInView===topOffsets.length-1&&(recommendedScrollPosition=topOffsets[itemToBeInView].amount),{...prevState,recommendedScrollPosition}};export const VirtualScrollReducer=(prevState,action)=>{switch(action.type){case"reset":return reduceReset(prevState,action.itemHeight,action.maxHeight,action.overscan);case"scroll":return reduceScroll(prevState,action.scrollTop);case"updateViewport":return reduceUpdateViewport({prevState,measurements:action.measurements,itemAmount:action.itemAmount});case"recommendScrollPosition":return reduceRecommendScrollPosition(prevState,action.scrollTop,action.itemToBeInView);default:throw Error()}};

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

@@ -1,6 +1,6 @@
 import React from "react";
 /**
-  This wrapper is added to handle onPostDeactivate from react-focus-trap. onPostDeactivate is fired before component unmounts. Often, onPostDeactivate is used to close the popup element (see BasePopover and Sheet). We are overriding it here to fire only when component recieves an outside click or esc key event so that popover and sheet can close correctly.
+  Wraps focus-trap-react. It fires onPostDeactivate only on an outside click or Escape, not on unmount, and it pauses the trap while an aria-modal="true" dialog outside every wrapped trap holds focus or takes a pointer press.
 */
 type FocusTrapWrapperProps = {
     active?: boolean;

package/build/esm/shared/FocusTrapWrapper.js

@@ -1 +1 @@
-import React,{useContext,useEffect,useRef}from"react";import FocusTrap from"focus-trap-react";import{FloatingPositionedContext}from"../components/Tooltip/FloatingPositionedContext";export const FocusTrapWrapper=({active,focusTrapOptions,children})=>{let isClickedOutside=useRef(!1),isEscaped=useRef(!1),isPositioned=useContext(FloatingPositionedContext),{onPostDeactivate,clickOutsideDeactivates,escapeDeactivates,...rest}=focusTrapOptions,onPostDeactivateRef=useRef(onPostDeactivate),clickOutsideDeactivatesRef=useRef(clickOutsideDeactivates),escapeDeactivatesRef=useRef(escapeDeactivates);return useEffect(()=>{onPostDeactivateRef.current=onPostDeactivate},[onPostDeactivate]),useEffect(()=>{clickOutsideDeactivatesRef.current=clickOutsideDeactivates},[clickOutsideDeactivates]),useEffect(()=>{escapeDeactivatesRef.current=escapeDeactivates},[escapeDeactivates]),React.createElement(FocusTrap,{active:active&&isPositioned,focusTrapOptions:{...rest,clickOutsideDeactivates:evt=>{let cb=clickOutsideDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isClickedOutside.current=!0),shouldDeactivate},escapeDeactivates:evt=>{let cb=escapeDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isEscaped.current=!0),shouldDeactivate},onPostDeactivate:()=>{(isClickedOutside.current||isEscaped.current)&&onPostDeactivateRef.current?.(),isEscaped.current=!1,isClickedOutside.current=!1}}},children)};
+import React,{Children,cloneElement,useCallback,useContext,useEffect,useLayoutEffect,useRef,useState}from"react";import{flushSync}from"react-dom";import FocusTrap from"focus-trap-react";import{FloatingPositionedContext}from"../components/Tooltip/FloatingPositionedContext";import{useWindow}from"./useWindow";let isReact19OrLater=parseInt(React.version,10)>=19,getElementRef=element=>isReact19OrLater?element.props.ref:element.ref,focusTrapContainers=new Set,isInsideFocusTrap=element=>Array.from(focusTrapContainers).some(container=>container.contains(element)),findForeignModalDialog=(target,container)=>{if(!container||!(target instanceof Element))return null;let dialog=target.closest('[aria-modal="true"]');return!dialog||dialog.contains(container)||isInsideFocusTrap(dialog)?null:dialog},isDisplayed=dialog=>!!dialog?.isConnected&&("function"!=typeof dialog?.checkVisibility||dialog.checkVisibility());export const FocusTrapWrapper=({active,focusTrapOptions,children})=>{let isClickedOutside=useRef(!1),isEscaped=useRef(!1),isPositioned=useContext(FloatingPositionedContext),containerRef=useRef(null),foreignModalDialog=useRef(null),[isYieldingToForeignModal,setIsYieldingToForeignModal]=useState(!1),isPauseRendered=useRef(!1),win=useWindow();useLayoutEffect(()=>{isPauseRendered.current=isYieldingToForeignModal},[isYieldingToForeignModal]);let{onPostDeactivate,clickOutsideDeactivates,escapeDeactivates,...rest}=focusTrapOptions,onPostDeactivateRef=useRef(onPostDeactivate),clickOutsideDeactivatesRef=useRef(clickOutsideDeactivates),escapeDeactivatesRef=useRef(escapeDeactivates);useEffect(()=>{onPostDeactivateRef.current=onPostDeactivate},[onPostDeactivate]),useEffect(()=>{clickOutsideDeactivatesRef.current=clickOutsideDeactivates},[clickOutsideDeactivates]),useEffect(()=>{escapeDeactivatesRef.current=escapeDeactivates},[escapeDeactivates]);let isTrapActive=!1!==active&&isPositioned;useEffect(()=>{if(!isTrapActive){foreignModalDialog.current=null,setIsYieldingToForeignModal(!1);return}let yieldToForeignModal=dialog=>{foreignModalDialog.current=dialog,flushSync(()=>setIsYieldingToForeignModal(!0))},handleFocusIn=evt=>{let container=containerRef.current,dialog=findForeignModalDialog(evt.target,container);if(dialog){yieldToForeignModal(dialog),isPauseRendered.current||evt.stopPropagation();return}foreignModalDialog.current&&(evt.target instanceof Node&&container?.contains(evt.target)||!isDisplayed(foreignModalDialog.current))&&(foreignModalDialog.current=null,setIsYieldingToForeignModal(!1))},handlePointerDown=evt=>{let dialog=findForeignModalDialog(evt.target,containerRef.current);dialog&&yieldToForeignModal(dialog)};return win.addEventListener("focusin",handleFocusIn,!0),win.addEventListener("pointerdown",handlePointerDown,!0),()=>{win.removeEventListener("focusin",handleFocusIn,!0),win.removeEventListener("pointerdown",handlePointerDown,!0)}},[isTrapActive,win]);let child=Children.only(children),childRef=getElementRef(child),setContainer=useCallback(element=>{containerRef.current&&focusTrapContainers.delete(containerRef.current),element&&focusTrapContainers.add(element),containerRef.current=element,"function"==typeof childRef?childRef(element):childRef&&(childRef.current=element)},[childRef]);return React.createElement(FocusTrap,{active:isTrapActive,paused:isYieldingToForeignModal,focusTrapOptions:{...rest,clickOutsideDeactivates:evt=>{let cb=clickOutsideDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isClickedOutside.current=!0),shouldDeactivate},escapeDeactivates:evt=>{let cb=escapeDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isEscaped.current=!0),shouldDeactivate},onPostDeactivate:()=>{(isClickedOutside.current||isEscaped.current)&&onPostDeactivateRef.current?.(),isEscaped.current=!1,isClickedOutside.current=!1}}},cloneElement(child,{ref:setContainer}))};

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

@@ -37,7 +37,7 @@
         "value": "1024px",
         "original": 1024,
         "variableName": "$size-dimension-content-max-width",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -47,7 +47,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-divider-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -57,7 +57,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-divider-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -67,7 +67,7 @@
         "value": "32px",
         "original": 32,
         "variableName": "$size-dimension-divider-xl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -77,7 +77,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-checkbox-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -87,7 +87,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-checkbox-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -97,7 +97,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-kbd-min-width",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -107,7 +107,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-radio-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -117,7 +117,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-radio-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -127,7 +127,7 @@
         "value": "6px",
         "original": 6,
         "variableName": "$size-dimension-radio-point-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -137,7 +137,7 @@
         "value": "10px",
         "original": 10,
         "variableName": "$size-dimension-radio-point-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -147,7 +147,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-toggle-height-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -157,7 +157,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-toggle-height-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -167,7 +167,7 @@
         "value": "28px",
         "original": 28,
         "variableName": "$size-dimension-toggle-width-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -177,7 +177,7 @@
         "value": "40px",
         "original": 40,
         "variableName": "$size-dimension-toggle-width-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -187,7 +187,7 @@
         "value": "36px",
         "original": 36,
         "variableName": "$size-dimension-textarea-min-height-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -197,7 +197,7 @@
         "value": "8px",
         "original": 8,
         "variableName": "$size-dimension-toggle-point-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -207,7 +207,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-toggle-point-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -217,7 +217,7 @@
         "value": "32px",
         "original": 32,
         "variableName": "$size-dimension-toggle-button-height-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -227,7 +227,7 @@
         "value": "120px",
         "original": 120,
         "variableName": "$size-dimension-dropdown-menu-width",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -237,7 +237,7 @@
         "value": "320px",
         "original": 320,
         "variableName": "$size-dimension-prompt-button-group-popover-min-width",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -247,7 +247,7 @@
         "value": "560px",
         "original": 560,
         "variableName": "$size-dimension-modal-width-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -257,7 +257,7 @@
         "value": "720px",
         "original": 720,
         "variableName": "$size-dimension-modal-width-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -267,7 +267,7 @@
         "value": "800px",
         "original": 800,
         "variableName": "$size-dimension-modal-max-height-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -277,7 +277,7 @@
         "value": "40px",
         "original": 40,
         "variableName": "$size-dimension-modal-margin-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -287,7 +287,7 @@
         "value": "1280px",
         "original": 1280,
         "variableName": "$size-dimension-modal-full-screen-content-width",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -297,7 +297,7 @@
         "value": "1px",
         "original": 1,
         "variableName": "$size-dimension-media-viewer-bar-separator-width",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -307,7 +307,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-dimension-legend-key-width",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -317,7 +317,7 @@
         "value": "56px",
         "original": 56,
         "variableName": "$size-dimension-left-nav-bar-width",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -327,7 +327,7 @@
         "value": "0px",
         "original": 0,
         "variableName": "$size-letter-spacing-none",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -337,7 +337,7 @@
         "value": "0.5px",
         "original": 0.5,
         "variableName": "$size-letter-spacing-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -347,7 +347,7 @@
         "value": "1px",
         "original": 1,
         "variableName": "$size-letter-spacing-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -357,7 +357,7 @@
         "value": "10px",
         "original": 10,
         "variableName": "$size-font-xxs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -367,7 +367,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-font-xs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -377,7 +377,7 @@
         "value": "14px",
         "original": 14,
         "variableName": "$size-font-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -387,7 +387,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-font-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -397,7 +397,7 @@
         "value": "18px",
         "original": 18,
         "variableName": "$size-font-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -407,7 +407,7 @@
         "value": "20px",
         "original": 20,
         "variableName": "$size-font-xl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -417,7 +417,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-font-xxl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -427,7 +427,7 @@
         "value": "26px",
         "original": 26,
         "variableName": "$size-font-xxxl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -447,7 +447,7 @@
         "value": "2px",
         "original": 2,
         "variableName": "$size-spacing-xxxs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -527,7 +527,7 @@
         "value": "0px",
         "original": 0,
         "variableName": "$size-border-radius-none",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -537,7 +537,7 @@
         "value": "4px",
         "original": 4,
         "variableName": "$size-border-radius-xs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -547,7 +547,7 @@
         "value": "8px",
         "original": 8,
         "variableName": "$size-border-radius-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -557,7 +557,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-border-radius-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -567,7 +567,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-border-radius-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -577,7 +577,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-border-radius-xl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -587,7 +587,7 @@
         "value": "9999px",
         "original": 9999,
         "variableName": "$size-border-radius-full",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -597,7 +597,7 @@
         "value": 1.1428571429,
         "original": 1.1428571429,
         "variableName": "$size-line-height-xs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -607,7 +607,7 @@
         "value": 1.25,
         "original": 1.25,
         "variableName": "$size-line-height-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -617,7 +617,7 @@
         "value": 1.3333333,
         "original": 1.3333333,
         "variableName": "$size-line-height-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -627,7 +627,7 @@
         "value": 1.4285714286,
         "original": 1.4285714286,
         "variableName": "$size-line-height-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -637,7 +637,7 @@
         "value": 1.5,
         "original": 1.5,
         "variableName": "$size-line-height-xl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -647,7 +647,7 @@
         "value": 1.625,
         "original": 1.625,
         "variableName": "$size-line-height-xxl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -657,6 +657,6 @@
         "value": 1.714286,
         "original": 1.714286,
         "variableName": "$size-line-height-xxxl",
-        "isUsed": true
+        "isUsed": false
     }
 ]