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

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

@@ -14,6 +14,12 @@ 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
@@ -26,10 +32,9 @@ 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; 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
+ * 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
  * {@link useExitAnimation} and the Drawer's styled components.
  */
-export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, }: PanelDockedSlideOptions): PanelDockedSlide;
+export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, collapsedSize, }: PanelDockedSlideOptions): PanelDockedSlide;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePanelDockedSlide",{enumerable:!0,get:function(){return usePanelDockedSlide}});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),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}};function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[pinnedWidth,setPinnedWidth]=(0,_react.useState)(null),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);return isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0)),(0,_registry.useDeclarePanel)(slot,{defaultSize:"entering"===phase&&collapsible&&!reducedMotion?0:defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}),(0,_registry.usePanelPresence)(slot,isMounted),(0,_react.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}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePanelDockedSlide",{enumerable:!0,get:function(){return usePanelDockedSlide}});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),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;function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[pinnedWidth,setPinnedWidth]=(0,_react.useState)(null),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;return(0,_registry.useDeclarePanel)(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:hasCollapsedRest&&!isVisible?collapsedSize:minSize??collapsedSize,maxSize,collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),(0,_registry.usePanelPresence)(slot,hasCollapsedRest||isMounted),(0,_react.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)},[]),(0,_react.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}}

package/build/cjs/shared/mixins/getLeftPanelFadeStyles.d.ts

@@ -0,0 +1,19 @@
+import type { CSSObject, Theme } from "@emotion/react";
+type PanelContentFadeOptions = {
+    theme: Theme;
+    /** Whether the content is currently faded out. */
+    isFaded: boolean;
+};
+/**
+ * Fades a docked panel's content out across its collapse, and back in at once
+ * when it reopens - the panel covers the left bar the instant it is shown, so
+ * there is nothing to reveal on the way in.
+ *
+ * Runs on the column's own slide timing, so the two move together.
+ *
+ * Applied per part rather than to the whole panel: a control at the header's
+ * trailing edge travels down onto the left bar's own and has to stay solid the
+ * whole way, so it is left out.
+ */
+export declare function getLeftPanelFadeStyles({ theme, isFaded, }: PanelContentFadeOptions): CSSObject;
+export {};

package/build/cjs/shared/mixins/getLeftPanelFadeStyles.js

@@ -0,0 +1 @@
+"use strict";function getLeftPanelFadeStyles({theme,isFaded}){let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{opacity:isFaded?theme.variables.opacity.hidden:theme.variables.opacity.visible,transition:isFaded?`opacity ${duration} ${timingFunction}`:"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"getLeftPanelFadeStyles",{enumerable:!0,get:function(){return getLeftPanelFadeStyles}});

package/build/cjs/shared/mixins/index.d.ts

@@ -6,4 +6,5 @@ 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/cjs/shared/mixins/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getBaseButtonStyles(){return _getBaseButtonStyles.getBaseButtonStyles},get getButtonAppearanceReset(){return _getButtonAppearanceReset.getButtonAppearanceReset},get getDisabledStyles(){return _getDisabledStyles.getDisabledStyles},get getFocusStyles(){return _getFocusStyles.getFocusStyles},get getInputTextPlaceholder(){return _getInputTextPlaceholder.getInputTextPlaceholder},get getInputTextStyles(){return _getInputTextStyles.getInputTextStyles},get getPillStyles(){return _getPillStyles.getPillStyles},get getPressedStyles(){return _getPressedStyles.getPressedStyles},get getPrimaryVariantStyles(){return _getVariantStyles.getPrimaryVariantStyles},get getSecondaryVariantStyles(){return _getVariantStyles.getSecondaryVariantStyles},get getTertiaryVariantStyles(){return _getVariantStyles.getTertiaryVariantStyles}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _getInputTextPlaceholder=require("./TextInput/getInputTextPlaceholder"),_getInputTextStyles=require("./TextInput/getInputTextStyles"),_getDisabledStyles=require("./Button/getDisabledStyles"),_getButtonAppearanceReset=require("./Button/getButtonAppearanceReset"),_getBaseButtonStyles=require("./Button/getBaseButtonStyles"),_getPressedStyles=require("./Button/getPressedStyles"),_getPillStyles=require("./Button/getPillStyles"),_getFocusStyles=require("./getFocusStyles"),_getVariantStyles=require("./Button/getVariantStyles");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getBaseButtonStyles(){return _getBaseButtonStyles.getBaseButtonStyles},get getButtonAppearanceReset(){return _getButtonAppearanceReset.getButtonAppearanceReset},get getDisabledStyles(){return _getDisabledStyles.getDisabledStyles},get getFocusStyles(){return _getFocusStyles.getFocusStyles},get getInputTextPlaceholder(){return _getInputTextPlaceholder.getInputTextPlaceholder},get getInputTextStyles(){return _getInputTextStyles.getInputTextStyles},get getLeftPanelFadeStyles(){return _getLeftPanelFadeStyles.getLeftPanelFadeStyles},get getPillStyles(){return _getPillStyles.getPillStyles},get getPressedStyles(){return _getPressedStyles.getPressedStyles},get getPrimaryVariantStyles(){return _getVariantStyles.getPrimaryVariantStyles},get getSecondaryVariantStyles(){return _getVariantStyles.getSecondaryVariantStyles},get getTertiaryVariantStyles(){return _getVariantStyles.getTertiaryVariantStyles}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _getInputTextPlaceholder=require("./TextInput/getInputTextPlaceholder"),_getInputTextStyles=require("./TextInput/getInputTextStyles"),_getDisabledStyles=require("./Button/getDisabledStyles"),_getButtonAppearanceReset=require("./Button/getButtonAppearanceReset"),_getBaseButtonStyles=require("./Button/getBaseButtonStyles"),_getPressedStyles=require("./Button/getPressedStyles"),_getPillStyles=require("./Button/getPillStyles"),_getFocusStyles=require("./getFocusStyles"),_getLeftPanelFadeStyles=require("./getLeftPanelFadeStyles"),_getVariantStyles=require("./Button/getVariantStyles");

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

@@ -2198,10 +2198,26 @@
         "color-content-table-row": {
             "name": "content.table",
             "subState": "row",
-            "darkValue": "rgba(29, 102, 112, 0.2)",
-            "darkOriginalValue": "night-brand.regular-transparent01",
-            "lightValue": "rgba(10, 166, 184, 0.05)",
-            "lightOriginalValue": "brand.regular-transparent01"
+            "darkValue": "#32363e",
+            "darkOriginalValue": "night-black.light01",
+            "lightValue": "#e0e6eb",
+            "lightOriginalValue": "gray.light02"
+        },
+        "color-content-table-cell": {
+            "name": "content.table",
+            "subState": "cell",
+            "darkValue": "#5a7183",
+            "darkOriginalValue": "gray.regular",
+            "lightValue": "#bdc9d1",
+            "lightOriginalValue": "gray.light01-alt01"
+        },
+        "color-content-table-col": {
+            "name": "content.table",
+            "subState": "col",
+            "darkValue": "#24282d",
+            "darkOriginalValue": "night-black.dark01",
+            "lightValue": "#f5f7f9",
+            "lightOriginalValue": "gray.light04"
         },
         "color-content-checkbox-background": {
             "name": "content.checkbox",

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

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

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

@@ -80,6 +80,9 @@ type Variables = {
             "legendKey": {
                 "width": string;
             };
+            "leftNavBar": {
+                "width": string;
+            };
         };
         "letterSpacing": {
             "none": string;
@@ -173,6 +176,10 @@ type Variables = {
                 "duration": string;
                 "timingFunction": string;
             };
+            "collapse": {
+                "duration": string;
+                "timingFunction": string;
+            };
         };
         "promptInput": {
             "focus": {
@@ -910,7 +917,26 @@ export type AmbossTheme = {
             };
             "table": {
                 "row": {
-                    "hover": string;
+                    "background": {
+                        "hover": string;
+                    };
+                    "header": {
+                        "background": {
+                            "default": string;
+                        };
+                    };
+                };
+                "cell": {
+                    "border": {
+                        "default": string;
+                    };
+                };
+                "col": {
+                    "header": {
+                        "background": {
+                            "default": string;
+                        };
+                    };
                 };
             };
             "checkbox": {