@amboss/design-system 4.6.6-canary.0 → 4.6.6

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

@@ -0,0 +1,18 @@
+import React from "react";
+/** Edge the body is pinned to while the column slides - the panel's docked
+ *  edge (`right` for the left panel, `left` for the right panel). */
+export type PanelSlideAnchor = "left" | "right";
+export type PanelSlideBodyProps = {
+    /** Body width (px) while sliding; `null` at rest (fills the column). Comes
+     *  from {@link usePanelDockedSlide}. */
+    pinnedWidth: number | null;
+    /** The edge the panel docks against. */
+    anchor: PanelSlideAnchor;
+    children: React.ReactNode;
+};
+/**
+ * The clipped, edge-anchored body a docked side panel's content lives in so
+ * its open/close width animation reads as a drawer slide. Pair with
+ * {@link usePanelDockedSlide}, which supplies `pinnedWidth`.
+ */
+export declare const PanelSlideBody: React.FC<PanelSlideBodyProps>;

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

@@ -0,0 +1 @@
+import React from"react";import styled from"@emotion/styled";import{PAGE_BOTTOM_BAR_INSET}from"./-constants";let StyledPanelSlideClip=styled("div",{target:"e1mhh3wi0",label:"StyledPanelSlideClip"})({position:"relative",width:"100%",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,overflow:"hidden"}),StyledPanelSlideBody=styled("div",{shouldForwardProp:prop=>"pinnedWidth"!==prop&&"anchor"!==prop,target:"e1mhh3wi1",label:"StyledPanelSlideBody"})(({pinnedWidth,anchor})=>({width:"100%",height:"100%",...null!=pinnedWidth&&{position:"absolute",top:0,[anchor]:0,width:`${pinnedWidth}px`}}));export const PanelSlideBody=({pinnedWidth,anchor,children})=>React.createElement(StyledPanelSlideClip,null,React.createElement(StyledPanelSlideBody,{pinnedWidth:pinnedWidth,anchor:anchor},children));

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

@@ -1 +1 @@
-let leftPanelVariantFor=({isMobile,isLowPrio})=>isMobile?"drawer":isLowPrio?"offcanvas":"sidebar";export const DEFAULT_LAYOUT_RULES={maxDockedPanels:{xs:1,m:2,l:3},rightPanel:{priority:1,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.rightPanel.setVariant("float")}},splitview:{priority:2,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.splitview.hide()}},leftPanel:{priority:3,condition:({isLowPrio,isMobile,layout})=>{let variant=leftPanelVariantFor({isMobile,isLowPrio});variant!==layout.leftPanel.state.variant&&(layout.leftPanel.setVariant(variant),"offcanvas"===variant&&layout.leftPanel.hide())}}};
+export const DEFAULT_LAYOUT_RULES={maxDockedPanels:{xs:1,m:2,l:3},rightPanel:{priority:1,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.rightPanel.setVariant("float")}},splitview:{priority:2,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.splitview.hide()}},leftPanel:{priority:3,condition:({isLowPrio,isMobile,layout})=>{let variant=isMobile||isLowPrio?"drawer":"sidebar";variant!==layout.leftPanel.state.variant&&(layout.leftPanel.setVariant(variant),"drawer"!==variant||isMobile||layout.leftPanel.hide())}}};

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

@@ -1 +1 @@
-import{useEffect,useRef}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";import{PANEL_ORDER,Slot,TOGGLABLE_SLOTS}from"./-constants";let DEFAULT_PRIORITY={[Slot.rightPanel]:1,[Slot.splitview]:2,[Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===Slot.rightPanel?"float"!==state.rightPanel.variant:slot!==Slot.leftPanel||"sidebar"===state.leftPanel.variant),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:PANEL_ORDER.indexOf(slot)<PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};export function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=useRef(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=useBreakpoints(),{state}=layout;useEffect(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}
+import{useEffect,useRef}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";import{PANEL_ORDER,Slot,TOGGLABLE_SLOTS}from"./-constants";let DEFAULT_PRIORITY={[Slot.rightPanel]:1,[Slot.splitview]:2,[Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===Slot.rightPanel?"float"!==state.rightPanel.variant:slot!==Slot.leftPanel||"drawer"!==state.leftPanel.variant),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:PANEL_ORDER.indexOf(slot)<PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};export function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=useRef(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=useBreakpoints(),{state}=layout;useEffect(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}

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

@@ -14,12 +14,6 @@ export type PanelDockedSlideOptions = {
     /** 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;
-    /** Width the column rests at while hidden, instead of collapsing to nothing.
-     *  Set it and the column never unmounts: closing narrows it to this, opening
-     *  widens it back, so one box carries both states (a nav left bar that widens
-     *  into the panel). The column stops being collapsible - there is no zero to
-     *  collapse to - and this becomes its `minSize` while it is hidden. */
-    collapsedSize?: Size;
 };
 export type PanelDockedSlide = {
     /** Whether the panel's content should render at all (entering, open, or
@@ -32,9 +26,10 @@ export type PanelDockedSlide = {
 /**
  * Animates a docked side panel's open/close as a width slide on its
  * `react-resizable-panels` column, pushing neighbouring content smoothly
- * instead of snapping. Slot-generic - works for either side panel. Falls back to
- * an instant open/close when the panel isn't collapsible, no handle is
- * available, or reduced motion is requested. The mobile modal-drawer lifecycle lives in
+ * instead of snapping. Slot-generic - works for either side panel; render the
+ * returned state with {@link PanelSlideBody}. Falls back to an instant
+ * open/close when the panel isn't collapsible, no handle is available, or
+ * 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, lockWidthOnWindowResize, collapsedSize, }: 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}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[pinnedWidth,setPinnedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;return useDeclarePanel(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:hasCollapsedRest&&!isVisible?collapsedSize:minSize??collapsedSize,maxSize,collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted),useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,restSize=isVisible?openSize??minSize:collapsedSize,resizeToRest=attempt=>{let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return resizeToRest(0),()=>window.cancelAnimationFrame(frame)},[]),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{}setPinnedWidth(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);setPinnedWidth("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)},waitsForRelaxedMinimum="exiting"===phase&&hasCollapsedRest,waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&waitsForRelaxedMinimum){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,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/shared/mixins/index.d.ts

@@ -6,5 +6,4 @@ export { getBaseButtonStyles } from "./Button/getBaseButtonStyles";
 export { getPressedStyles } from "./Button/getPressedStyles";
 export { getPillStyles } from "./Button/getPillStyles";
 export { getFocusStyles } from "./getFocusStyles";
-export { getLeftPanelFadeStyles } from "./getLeftPanelFadeStyles";
 export { getPrimaryVariantStyles, getSecondaryVariantStyles, getTertiaryVariantStyles, } from "./Button/getVariantStyles";

package/build/esm/shared/mixins/index.js

@@ -1 +1 @@
-export{getInputTextPlaceholder}from"./TextInput/getInputTextPlaceholder";export{getInputTextStyles}from"./TextInput/getInputTextStyles";export{getDisabledStyles}from"./Button/getDisabledStyles";export{getButtonAppearanceReset}from"./Button/getButtonAppearanceReset";export{getBaseButtonStyles}from"./Button/getBaseButtonStyles";export{getPressedStyles}from"./Button/getPressedStyles";export{getPillStyles}from"./Button/getPillStyles";export{getFocusStyles}from"./getFocusStyles";export{getLeftPanelFadeStyles}from"./getLeftPanelFadeStyles";export{getPrimaryVariantStyles,getSecondaryVariantStyles,getTertiaryVariantStyles}from"./Button/getVariantStyles";
+export{getInputTextPlaceholder}from"./TextInput/getInputTextPlaceholder";export{getInputTextStyles}from"./TextInput/getInputTextStyles";export{getDisabledStyles}from"./Button/getDisabledStyles";export{getButtonAppearanceReset}from"./Button/getButtonAppearanceReset";export{getBaseButtonStyles}from"./Button/getBaseButtonStyles";export{getPressedStyles}from"./Button/getPressedStyles";export{getPillStyles}from"./Button/getPillStyles";export{getFocusStyles}from"./getFocusStyles";export{getPrimaryVariantStyles,getSecondaryVariantStyles,getTertiaryVariantStyles}from"./Button/getVariantStyles";

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,17 +307,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-dimension-legend-key-width",
-        "isUsed": true
-    },
-    {
-        "category": "size",
-        "type": "dimension",
-        "name": "dimension left-nav-bar",
-        "subitemName": "left-nav-bar width",
-        "value": "56px",
-        "original": 56,
-        "variableName": "$size-dimension-left-nav-bar-width",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -327,7 +317,7 @@
         "value": "0px",
         "original": 0,
         "variableName": "$size-letter-spacing-none",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -337,7 +327,7 @@
         "value": "0.5px",
         "original": 0.5,
         "variableName": "$size-letter-spacing-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -347,7 +337,7 @@
         "value": "1px",
         "original": 1,
         "variableName": "$size-letter-spacing-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -357,7 +347,7 @@
         "value": "10px",
         "original": 10,
         "variableName": "$size-font-xxs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -367,7 +357,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-font-xs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -377,7 +367,7 @@
         "value": "14px",
         "original": 14,
         "variableName": "$size-font-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -387,7 +377,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-font-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -397,7 +387,7 @@
         "value": "18px",
         "original": 18,
         "variableName": "$size-font-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -407,7 +397,7 @@
         "value": "20px",
         "original": 20,
         "variableName": "$size-font-xl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -417,7 +407,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-font-xxl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -427,7 +417,7 @@
         "value": "26px",
         "original": 26,
         "variableName": "$size-font-xxxl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -447,7 +437,7 @@
         "value": "2px",
         "original": 2,
         "variableName": "$size-spacing-xxxs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -527,7 +517,7 @@
         "value": "0px",
         "original": 0,
         "variableName": "$size-border-radius-none",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -537,7 +527,7 @@
         "value": "4px",
         "original": 4,
         "variableName": "$size-border-radius-xs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -547,7 +537,7 @@
         "value": "8px",
         "original": 8,
         "variableName": "$size-border-radius-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -557,7 +547,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-border-radius-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -567,7 +557,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-border-radius-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -577,7 +567,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-border-radius-xl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -587,7 +577,7 @@
         "value": "9999px",
         "original": 9999,
         "variableName": "$size-border-radius-full",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -597,7 +587,7 @@
         "value": 1.1428571429,
         "original": 1.1428571429,
         "variableName": "$size-line-height-xs",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -607,7 +597,7 @@
         "value": 1.25,
         "original": 1.25,
         "variableName": "$size-line-height-s",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -617,7 +607,7 @@
         "value": 1.3333333,
         "original": 1.3333333,
         "variableName": "$size-line-height-m",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -627,7 +617,7 @@
         "value": 1.4285714286,
         "original": 1.4285714286,
         "variableName": "$size-line-height-l",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -637,7 +627,7 @@
         "value": 1.5,
         "original": 1.5,
         "variableName": "$size-line-height-xl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -647,7 +637,7 @@
         "value": 1.625,
         "original": 1.625,
         "variableName": "$size-line-height-xxl",
-        "isUsed": true
+        "isUsed": false
     },
     {
         "category": "size",
@@ -657,6 +647,6 @@
         "value": 1.714286,
         "original": 1.714286,
         "variableName": "$size-line-height-xxxl",
-        "isUsed": true
+        "isUsed": false
     }
 ]

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

@@ -80,9 +80,6 @@ type Variables = {
             "legendKey": {
                 "width": string;
             };
-            "leftNavBar": {
-                "width": string;
-            };
         };
         "letterSpacing": {
             "none": string;
@@ -176,10 +173,6 @@ type Variables = {
                 "duration": string;
                 "timingFunction": string;
             };
-            "collapse": {
-                "duration": string;
-                "timingFunction": string;
-            };
         };
         "promptInput": {
             "focus": {