npm - carbon-react - Versions diffs - 158.14.0 → 158.14.2 - Mend

carbon-react 158.14.0 → 158.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{jsx as e}from"react/jsx-runtime";import{useRef as t,useContext as r}from"react";import o from"./flat-table-checkbox.style.js";import"../../checkbox/checkbox-group/checkbox-group.component.js";import{Checkbox as n}from"../../checkbox/checkbox.component.js";import c from"../../../__internal__/utils/helpers/events/events.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import i from"../../../__internal__/utils/helpers/guid/index.js";import a from"../flat-table-row/__internal__/flat-table-row.context.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){s(e,t,r[t])}))}return e}const p=s=>{var{as:p="td",checked:f,onChange:u,selectable:m=!0,onClick:y,ariaLabelledBy:O,id:h}=s,d=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0\|\|(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(s,["as","checked","onChange","selectable","onClick","ariaLabelledBy","id"]);const g=t(null),j=t(h\|\|i()),{leftPositions:k,rightPositions:P}=r(a),x=k[j.current],_=P[j.current],v=void 0!==x\|\|void 0!==_;return e(o,(w=b({ref:g,makeCellSticky:v,className:v?"isSticky":void 0,leftPosition:x,rightPosition:_,as:p},l("flat-table-checkbox",b({"data-element":~~"flat-table-checkbox-"+("td"===p?"cell":"header")~~},d))),C=null!=(C={id:j.current,children:m&&e(n,{checked:f,onChange:u,name:"flat-table-checkbox",mb:0,ariaLabelledBy:O,onClick:~~e=>{e.stopPropagation()~~,~~null==y\|\|y(e)},~~onKeyDown:~~e=>{c.isDownKey(e)\|\|c.isUpKey(e)\|\|e.stopPropagation()~~}})})?C:{},Object.getOwnPropertyDescriptors?Object.defineProperties(w,Object.getOwnPropertyDescriptors(C)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(C)).forEach((function(e){Object.defineProperty(w,e,Object.getOwnPropertyDescriptor(C,e))})),w));var w,C};p.displayName="FlatTableCheckbox";export{p as FlatTableCheckbox,p as default};
1	+ import{jsx as e}from"react/jsx-runtime";import{useRef as t,useContext as r,useCallback as o}from"react";import n from"./flat-table-checkbox.style.js";import"../../checkbox/checkbox-group/checkbox-group.component.js";import{Checkbox as c}from"../../checkbox/checkbox.component.js";import l from"../../../__internal__/utils/helpers/events/events.js";import i from"../../../__internal__/utils/helpers/tags/tags.js";import a from"../../../__internal__/utils/helpers/guid/index.js";import s from"../flat-table-row/__internal__/flat-table-row.context.js";function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){b(e,t,r[t])}))}return e}const f=b=>{var{as:f="td",checked:u,onChange:m,selectable:y=!0,onClick:O,ariaLabelledBy:h,id:d}=b,g=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0\|\|(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(b,["as","checked","onChange","selectable","onClick","ariaLabelledBy","id"]);const j=t(null),k=t(d\|\|a()),{leftPositions:P,rightPositions:x}=r(s),_=P[k.current],v=x[k.current],w=void 0!==_\|\|void 0!==v,C="flat-table-checkbox-"+("td"===f?"cell":"header"),S=o((e=>{e.stopPropagation(),null==O\|\|O(e)}),[O]),D=o((e=>{l.isDownKey(e)\|\|l.isUpKey(e)\|\|e.stopPropagation()}),[]);return e(n,(B=p({ref:j,makeCellSticky:w,className:w?"isSticky":void 0,leftPosition:_,rightPosition:v,as:f},i("flat-table-checkbox",p({"data-element":C},g))),E=null!=(E={id:k.current,children:y&&e(c,{checked:u,onChange:m,name:"flat-table-checkbox",mb:0,ariaLabelledBy:h,onClick:S,onKeyDown:D})})?E:{},Object.getOwnPropertyDescriptors?Object.defineProperties(B,Object.getOwnPropertyDescriptors(E)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(E)).forEach((function(e){Object.defineProperty(B,e,Object.getOwnPropertyDescriptor(E,e))})),B));var B,E};f.displayName="FlatTableCheckbox";export{f as FlatTableCheckbox,f as default};

package/esm/components/flat-table/flat-table-row/flat-table-row.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useLayoutEffect as l,useMemo as a,useContext as s,useEffect as d}from"react";import c from"invariant";import f from"../../../__internal__/utils/helpers/events/events.js";import u from"./flat-table-row.style.js";import b from"../../drawer/__internal__/drawer-sidebar.context.js";import{FlatTableRowHeader as p}from"../flat-table-row-header/flat-table-row-header.component.js";import{useStrictFlatTableContext as m}from"../__internal__/strict-flat-table.context.js";import h from"../../../__internal__/utils/helpers/guid/index.js";import g from"./__internal__/flat-table-row.context.js";import w,{SubRowContext as y}from"./__internal__/sub-row-provider.js";import _ from"../__internal__/build-position-map.js";import O from"../flat-table-head/__internal__/flat-table-head.context.js";import"@atlaskit/pragmatic-drag-and-drop/element/adapter";import j from"../__internal__/sortable/use-sortable-row.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function x(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){v(e,t,r[t])}))}return e}const S=o.forwardRef(((o,v)=>{var S,{children:P,onClick:C,expandable:R,expandableArea:k="wholeRow",expanded:I=!1,highlighted:z,selected:D,subRows:E,bgColor:A,horizontalBorderColor:B,horizontalBorderSize:K="small",id:H,draggableProps:T,"data-element":F,"data-role":N}=o~~,W=~~function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0\|\|(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(o,["children","onClick","expandable","expandableArea","expanded","highlighted","selected","subRows","bgColor","horizontalBorderColor","horizontalBorderSize","id","draggableProps","data-element","data-role"]);const $=n(H?String(H):h()),[q,G]=i(I),J=n(null),L="firstColumn"===k,[M,Q]=i({}),[U,V]=i({}),[X,Y]=i(0),[Z,ee]=i(-1),[te,re]=i(-1),[oe,ne]=i(null),[ie,le]=i([]),[ae,se]=i(-1);let de={};l((()=>{var e;const t=(e,t)=>{const r=Object.keys(e),o=Object.keys(t);return r.length!==o.length\|\|r.some((r=>e[r]!==t[r]))},r=null===(e=J.current)\|\|void 0===e?void 0:e.querySelectorAll("th, td"),o=Array.from(r\|\|[]);le(o);const n=o.findIndex((e=>"flat-table-checkbox"!==e.getAttribute("data-component"))),i=o.findIndex((e=>"left"===e.getAttribute("data-sticky-align"))),l=o.findIndex((e=>"right"===e.getAttribute("data-sticky-align")));if(ee(i),re(l),-1!==n?(Y(n),ne(o[n].getAttribute("id"))):Y(0),-1!==i){const e=_(o.slice(0,Z+1),"offsetWidth");t(e,M)&&Q(e)}if(-1!==l){const e=_(o.slice(te,o.length).reverse(),"offsetWidth");t(e,U)&&V(e)}}),[P,M,Z,te,U]);const ce=a((()=>!(-1!==Z)\|\|!(-1!==te)\|\|Z<te),[Z,te]);c(ce,`Do not render a right hand side \`${p.displayName}\` before left hand side \`${p.displayName}\``);const{colorTheme:fe,size:ue,getTabStopElementId:be}=m(),{isInSidebar:pe}=s(b),{stickyOffsets:me}=s(O),he=(~~)=>G~~(~~!q);(C\|\|R)&&(de={isRowInteractive:!L,tabIndex:L?void 0:ae,onKeyDown:function(~~e){const t=f.isEnterKey(e)\|\|f.isSpaceKey(e);R&&!L&&document.activeElement===J.current&&t&&(e.preventDefault(),he()),t&&C&&C(e)},isFirstColumnInteractive:L,isExpanded:q}),d((()=>{G(I)}),[I]),d((()=>{se(be()~~===$.~~current?0:-1)}),[be]);const{isSubRow:ge,firstRowId:we,addRow:ye,removeRow:_e}=s(y);d((()=>{const e~~=$.~~current;return ye(e),()=>{_e(e)}}),[ye,_e]);const Oe=~~we===$.~~current,{isDragging:je}=j({id~~:$.~~current,index:null==T?void 0:T.index,ref:T?J:null});return e(t,{children:[r(u,(ve=x({isInSidebar:pe,expandable:R,isSubRow:ge,isFirstSubRow:Oe,"data-element":~~F\|\|~~(~~ge?"flat-table-sub-row":"flat-table-row"~~),"data-role":N,highlighted:z,selected:D,onClick:~~function(e){C&&C(e)~~,~~R&&!L&&he()},~~firstCellIndex:X,ref:e=>{"function"==typeof v?v(e):v&&(v.current=e),J.current=e},lhsRowHeaderIndex:Z,rhsRowHeaderIndex:te,colorTheme:fe,size:ue,stickyOffset:me[$.current],bgColor:A,horizontalBorderColor:B,horizontalBorderSize:K,draggable:!!T,isDragging:je,totalChildren:ie.length,id~~:$.~~current,"data-selected":D&&"wholeRow"===k,"data-highlighted":z&&"wholeRow"===k,rowHeight:null==J\|\|null===(S=J.current)\|\|void 0===S?void 0:S.offsetHeight},~~de,W~~),xe={"data-component":"flat-table-row",children:r(g.Provider,{value:{firstCellId:oe,expandable:R,leftPositions:M,rightPositions:U,firstColumnExpandable:L,onKeyDown:~~function(~~e){(f.isEnterKey(e)\|\|f.isSpaceKey(e))&&(e.preventDefault(),he())},onClick:()=>he(),highlighted:z,selected:D},children:P})},xe=null!=xe?xe:{},Object.getOwnPropertyDescriptors?Object.defineProperties(ve,Object.getOwnPropertyDescriptors(xe)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(xe)).forEach((function(e){Object.defineProperty(ve,e,Object.getOwnPropertyDescriptor(xe,e))})),ve)),q&&E&&r(w,{children:E})]});var ve,xe}));S.displayName="FlatTableRow";export{S as FlatTableRow,S as default};
1	+ import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useLayoutEffect as l,useMemo as a,useContext as s,useCallback as d,useEffect as c}from"react";import f from"invariant";import b from"../../../__internal__/utils/helpers/events/events.js";import u from"./flat-table-row.style.js";import p from"../../drawer/__internal__/drawer-sidebar.context.js";import{FlatTableRowHeader as m}from"../flat-table-row-header/flat-table-row-header.component.js";import{useStrictFlatTableContext as h}from"../__internal__/strict-flat-table.context.js";import g from"../../../__internal__/utils/helpers/guid/index.js";import w from"./__internal__/flat-table-row.context.js";import y,{SubRowContext as _}from"./__internal__/sub-row-provider.js";import O from"../__internal__/build-position-map.js";import j from"../flat-table-head/__internal__/flat-table-head.context.js";import"@atlaskit/pragmatic-drag-and-drop/element/adapter";import v from"../__internal__/sortable/use-sortable-row.js";function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function S(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){x(e,t,r[t])}))}return e}const P=o.forwardRef(((o,x)=>{var P,{children:C,onClick:R,expandable:k,expandableArea:I="wholeRow",expanded:z=!1,highlighted:D,selected:E,subRows:A,bgColor:B,horizontalBorderColor:K,horizontalBorderSize:H="small",id:T,draggableProps:F,"data-element":N,"data-role":W}=o,$=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0\|\|(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(o,["children","onClick","expandable","expandableArea","expanded","highlighted","selected","subRows","bgColor","horizontalBorderColor","horizontalBorderSize","id","draggableProps","data-element","data-role"]);const q=n(T?String(T):g()),[G,J]=i(z),L=n(null),M="firstColumn"===I,[Q,U]=i({}),[V,X]=i({}),[Y,Z]=i(0),[ee,te]=i(-1),[re,oe]=i(-1),[ne,ie]=i(null),[le,ae]=i([]),[se,de]=i(-1);let ce={};l((()=>{var e;const t=(e,t)=>{const r=Object.keys(e),o=Object.keys(t);return r.length!==o.length\|\|r.some((r=>e[r]!==t[r]))},r=null===(e=L.current)\|\|void 0===e?void 0:e.querySelectorAll("th, td"),o=Array.from(r\|\|[]);ae(o);const n=o.findIndex((e=>"flat-table-checkbox"!==e.getAttribute("data-component"))),i=o.findIndex((e=>"left"===e.getAttribute("data-sticky-align"))),l=o.findIndex((e=>"right"===e.getAttribute("data-sticky-align")));if(te(i),oe(l),-1!==n?(Z(n),ie(o[n].getAttribute("id"))):Z(0),-1!==i){const e=O(o.slice(0,ee+1),"offsetWidth");t(e,Q)&&U(e)}if(-1!==l){const e=O(o.slice(re,o.length).reverse(),"offsetWidth");t(e,V)&&X(e)}}),[C,Q,ee,re,V]);const fe=a((()=>!(-1!==ee)\|\|!(-1!==re)\|\|ee<re),[ee,re]);f(fe,`Do not render a right hand side \`${m.displayName}\` before left hand side \`${m.displayName}\``);const{colorTheme:be,size:ue,getTabStopElementId:pe}=h(),{isInSidebar:me}=s(p),{stickyOffsets:he}=s(j),ge=d((e=>{const t=b.isEnterKey(e)\|\|b.isSpaceKey(e);k&&!M&&document.activeElement===L.current&&t&&(e.preventDefault(),J((e=>!e))),t&&R&&R(e)}),[k,M,R]),we=d((e=>{R&&R(e),k&&!M&&J((e=>!e))}),[R,k,M]);(R\|\|k)&&(ce={isRowInteractive:!M,tabIndex:M?void 0:se,onKeyDown:ge,isFirstColumnInteractive:M,isExpanded:G}),c((()=>{J(z)}),[z]),c((()=>{de(pe()===q.current?0:-1)}),[pe]);const{isSubRow:ye,firstRowId:_e,addRow:Oe,removeRow:je}=s(_);c((()=>{const e=q.current;return Oe(e),()=>{je(e)}}),[Oe,je]);const ve=_e===q.current,xe=d((()=>N\|\|(ye?"flat-table-sub-row":"flat-table-row")),[N,ye]),{isDragging:Se}=v({id:q.current,index:null==F?void 0:F.index,ref:F?L:null});return e(t,{children:[r(u,(Pe=S({isInSidebar:me,expandable:k,isSubRow:ye,isFirstSubRow:ve,"data-element":xe(),"data-role":W,highlighted:D,selected:E,onClick:we,firstCellIndex:Y,ref:e=>{"function"==typeof x?x(e):x&&(x.current=e),L.current=e},lhsRowHeaderIndex:ee,rhsRowHeaderIndex:re,colorTheme:be,size:ue,stickyOffset:he[q.current],bgColor:B,horizontalBorderColor:K,horizontalBorderSize:H,draggable:!!F,isDragging:Se,totalChildren:le.length,id:q.current,"data-selected":E&&"wholeRow"===I,"data-highlighted":D&&"wholeRow"===I,rowHeight:null==L\|\|null===(P=L.current)\|\|void 0===P?void 0:P.offsetHeight},ce,$),Ce={"data-component":"flat-table-row",children:r(w.Provider,{value:{firstCellId:ne,expandable:k,leftPositions:Q,rightPositions:V,firstColumnExpandable:M,onKeyDown:e=>{(b.isEnterKey(e)\|\|b.isSpaceKey(e))&&(e.preventDefault(),J((e=>!e)))},onClick:()=>J((e=>!e)),highlighted:D,selected:E},children:C})},Ce=null!=Ce?Ce:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Pe,Object.getOwnPropertyDescriptors(Ce)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(Ce)).forEach((function(e){Object.defineProperty(Pe,e,Object.getOwnPropertyDescriptor(Ce,e))})),Pe)),G&&A&&r(y,{children:A})]});var Pe,Ce}));P.displayName="FlatTableRow";export{P as FlatTableRow,P as default};

package/esm/components/flat-table/flat-table.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as o,useContext as n,useLayoutEffect as i}from"react";import{StyledFlatTableWrapper as l,StyledTableContainer as a,StyledFlatTable as c,StyledFlatTableFooter as s}from"./flat-table.style.js";import d from"../drawer/__internal__/drawer-sidebar.context.js";import u from"../../__internal__/utils/helpers/events/events.js";import{StrictFlatTableProvider as f}from"./__internal__/strict-flat-table.context.js";import b from"./__internal__/flat-table.context.js";function h(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){h(e,t,r[t])}))}return e}function y(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const m="tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]",v=h=>{var{caption:v,children:g,hasStickyHead:O,colorTheme:w="dark",footer:S,hasStickyFooter:j=!1,height:x,isZebra:P,size:_="medium",hasMaxHeight:A=!1,hasOuterVerticalBorders:D=!0,bottomBorderRadius:H="borderRadius100",ariaDescribedby:k,minHeight:I,overflowX:B,width:E,title:K}=h,R=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0\|\|(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(h,["caption","children","hasStickyHead","colorTheme","footer","hasStickyFooter","height","isZebra","size","hasMaxHeight","hasOuterVerticalBorders","bottomBorderRadius","ariaDescribedby","minHeight","overflowX","width","title"]);const T=r(null),q=r(null),F=r(null),[z,C]=o(!1),[V,X]=o(!1),[Z,M]=o(-1),[N,U]=o(-1),W=!x&&(O\|\|j),Y={caption:v,isZebra:P,size:_,"aria-describedby":k},{isInSidebar:G}=n(d),[~~J,L~~]=o(!1);i((()=>{const e=(e,t)=>e.find(((e,r)=>{const o=Array.from(e.querySelectorAll("td, th")),n=t?o.shift():o.pop(),i=null==n?void 0:n.getAttribute("rowspan");return i&&Number(i)>=r+1}));if(T.current&&q.current){var t;const{offsetHeight:r,offsetWidth:o}=T.current,{top:n,bottom:i,right:l,left:a}=null===(t=q.current)\|\|void 0===t?void 0:t.getBoundingClientRect();C(i-n>r),X(l-a>o);const c=q.current.querySelector("tbody"),s=c?Array.from(null==c?void 0:c.querySelectorAll("tr")):[],{length:d}=s,u=e(s.slice(0,d-1).reverse(),!0),f=e(s.slice(0,d-1).reverse());u&&M(s.indexOf(u)),f&&U(s.indexOf(f))}}),[S,g,~~x,I~~]);const Q=e=>e.findIndex((e=>{const t=e.querySelectorAll("button, input, a, [tabindex]");return!(!t\|\|!Array.from(t).find((e=>e===document.activeElement)))}))~~;return e(~~l,y(p({ref:T,"data-role":"flat-table-wrapper",isInSidebar:G,hasStickyHead:O,colorTheme:w,minHeight:I,overflowY:O\|\|j?"auto":void 0,height:W&&!A?"99%":x,maxHeight:A?"100%":void 0,hasOuterVerticalBorders:D,bottomBorderRadius:H,display:"flex",flexDirection:"column",justifyContent:j\|\|x?"space-between":void 0,role:"region",overflowX:E?"hidden":void 0,width:E,hasStickyFooter:j,hasVerticalScrollbar:z,hasHorizontalScrollbar:V,footer:!!S,firstColRowSpanIndex:Z,lastColRowSpanIndex:N,onKeyDown:e=>{var t;const r=null===(t=q.current)\|\|void 0===t?void 0:t.querySelectorAll(m),o=Array.from(r\|\|[]);if(!o.length)return;const n=o.findIndex((e=>e===document.activeElement));if(J&&(O\|\|j))(u.isPageUpKey(e)\|\|u.isPageDownKey(e)\|\|u.isHomeKey(e)\|\|u.isEndKey(e))&&e.preventDefault();else if(u.isDownKey(e))if(e.preventDefault(),-1!==n&&n<o.length){var i;null===(i=o[n+1])\|\|void 0===i\|\|i.focus()}else{const e=Q(o);var l;-1!==e&&e<o.length&&(null===(l=o[e+1])\|\|void 0===l\|\|l.focus())}else if(u.isUpKey(e))if(e.preventDefault(),n>0){var a;null===(a=o[n-1])\|\|void 0===a\|\|a.focus()}else{const e=Q(o);var c;e>0&&(null===(c=o[e-1])\|\|void 0===c\|\|c.focus())}}~~},R~~),~~{"data-component":"flat-table-wrapper",title:K,children:~~[~~t(a~~,~~{ref:F~~,~~tabIndex:0,overflowX:B,width:E,"data-role":"flat-table-container",children:e(c,y(p({ref:q,"data-component":"flat-table"},Y~~),~~{children:[v?t~~(~~"caption",{children:v}):null,t~~(~~f,{value:{colorTheme:w,size:_,getTabStopElementId:~~()=>{var e;const t=Array.from((null===(e=q.current)\|\|void 0===e?void 0:e.querySelectorAll(m))\|\|[]),r=t.find((e=>"true"===e.getAttribute("data-selected")\|\|"true"===e.getAttribute("data-highlighted")))\|\|t[0];return(null==r?void 0:r.getAttribute("id"))\|\|""}},~~children:t~~(~~b.Provider,~~{~~value~~:{isInFlatTable:!0,setHasOpenDatePicker:L},children:g})})]}))}),S&&t(s,{hasStickyFooter:j,"data-role":"flat-table-footer",children:S})]}))};v.displayName="FlatTable";export{v as FlatTable,v as default};
1	+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as o,useContext as n,useLayoutEffect as i,useCallback as l,useMemo as a}from"react";import{StyledFlatTableWrapper as c,StyledTableContainer as s,StyledFlatTable as d,StyledFlatTableFooter as u}from"./flat-table.style.js";import f from"../drawer/__internal__/drawer-sidebar.context.js";import b from"../../__internal__/utils/helpers/events/events.js";import{StrictFlatTableProvider as h}from"./__internal__/strict-flat-table.context.js";import p from"./__internal__/flat-table.context.js";function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function m(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){y(e,t,r[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const g="tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]",O=y=>{var{caption:O,children:w,hasStickyHead:S,colorTheme:j="dark",footer:x,hasStickyFooter:P=!1,height:_,isZebra:A,size:D="medium",hasMaxHeight:H=!1,hasOuterVerticalBorders:k=!0,bottomBorderRadius:I="borderRadius100",ariaDescribedby:B,minHeight:E,overflowX:K,width:R,title:T}=y,q=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0\|\|(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(y,["caption","children","hasStickyHead","colorTheme","footer","hasStickyFooter","height","isZebra","size","hasMaxHeight","hasOuterVerticalBorders","bottomBorderRadius","ariaDescribedby","minHeight","overflowX","width","title"]);const F=r(null),z=r(null),C=r(null),[V,X]=o(!1),[Z,M]=o(!1),[N,U]=o(-1),[W,Y]=o(-1),G=!_&&(S\|\|P),J={caption:O,isZebra:A,size:D,"aria-describedby":B},{isInSidebar:L}=n(f),[Q,$]=o(!1);i((()=>{const e=(e,t)=>e.find(((e,r)=>{const o=Array.from(e.querySelectorAll("td, th")),n=t?o.shift():o.pop(),i=null==n?void 0:n.getAttribute("rowspan");return i&&Number(i)>=r+1}));if(F.current&&z.current){var t;const{offsetHeight:r,offsetWidth:o}=F.current,{top:n,bottom:i,right:l,left:a}=null===(t=z.current)\|\|void 0===t?void 0:t.getBoundingClientRect();X(i-n>r),M(l-a>o);const c=z.current.querySelector("tbody"),s=c?Array.from(null==c?void 0:c.querySelectorAll("tr")):[],{length:d}=s,u=e(s.slice(0,d-1).reverse(),!0),f=e(s.slice(0,d-1).reverse());u&&U(s.indexOf(u)),f&&Y(s.indexOf(f))}}),[x,_,E]);const ee=e=>e.findIndex((e=>{const t=e.querySelectorAll("button, input, a, [tabindex]");return!(!t\|\|!Array.from(t).find((e=>e===document.activeElement)))})),te=l((e=>{var t;const r=null===(t=z.current)\|\|void 0===t?void 0:t.querySelectorAll(g),o=Array.from(r\|\|[]);if(!o.length)return;const n=o.findIndex((e=>e===document.activeElement));if(Q&&(S\|\|P))(b.isPageUpKey(e)\|\|b.isPageDownKey(e)\|\|b.isHomeKey(e)\|\|b.isEndKey(e))&&e.preventDefault();else if(b.isDownKey(e))if(e.preventDefault(),-1!==n&&n<o.length){var i;null===(i=o[n+1])\|\|void 0===i\|\|i.focus()}else{const e=ee(o);var l;-1!==e&&e<o.length&&(null===(l=o[e+1])\|\|void 0===l\|\|l.focus())}else if(b.isUpKey(e))if(e.preventDefault(),n>0){var a;null===(a=o[n-1])\|\|void 0===a\|\|a.focus()}else{const e=ee(o);var c;e>0&&(null===(c=o[e-1])\|\|void 0===c\|\|c.focus())}}),[Q,P,S]),re=l((()=>{var e;const t=Array.from((null===(e=z.current)\|\|void 0===e?void 0:e.querySelectorAll(g))\|\|[]),r=t.find((e=>"true"===e.getAttribute("data-selected")\|\|"true"===e.getAttribute("data-highlighted")))\|\|t[0];return(null==r?void 0:r.getAttribute("id"))\|\|""}),[]),oe=a((()=>({colorTheme:j,size:D,getTabStopElementId:re})),[j,D,re]),ne=a((()=>({isInFlatTable:!0,setHasOpenDatePicker:$})),[$]);return e(c,v(m({ref:F,"data-role":"flat-table-wrapper",isInSidebar:L,hasStickyHead:S,colorTheme:j,minHeight:E,overflowY:S\|\|P?"auto":void 0,height:G&&!H?"99%":_,maxHeight:H?"100%":void 0,hasOuterVerticalBorders:k,bottomBorderRadius:I,display:"flex",flexDirection:"column",justifyContent:P\|\|_?"space-between":void 0,role:"region",overflowX:R?"hidden":void 0,width:R,hasStickyFooter:P,hasVerticalScrollbar:V,hasHorizontalScrollbar:Z,footer:!!x,firstColRowSpanIndex:N,lastColRowSpanIndex:W,onKeyDown:te},q),{"data-component":"flat-table-wrapper",title:T,children:[t(s,{ref:C,tabIndex:0,overflowX:K,width:R,"data-role":"flat-table-container",children:e(d,v(m({ref:z,"data-component":"flat-table"},J),{children:[O?t("caption",{children:O}):null,t(h,{value:oe,children:t(p.Provider,{value:ne,children:w})})]}))}),x&&t(u,{hasStickyFooter:P,"data-role":"flat-table-footer",children:x})]}))};O.displayName="FlatTable";export{O as FlatTable,O as default};

package/esm/components/menu/__internal__/submenu/submenu.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useContext as i,useMemo as u,useCallback as a,useEffect as l}from"react";import s from"../../menu-item/menu-item.style.js";import{StyledSubmenuWrapper as c,StyledSubmenu as m}from"./submenu.style.js";import p from"../../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as d}from"../strict-menu.context.js";import{characterNavigation as f}from"../keyboard-navigation/index.js";import y from"./submenu.context.js";import b from"../../../../__internal__/utils/helpers/guid/index.js";import{BLOCK_INDEX_SELECTOR as v,SCROLLABLE_BLOCK as h,SCROLLABLE_BLOCK_PARENT as g,ALL_CHILDREN_SELECTOR as O}from"../locators.js";import{useStableCallback as w}from"../../../../hooks/__internal__/useStableCallback/useStableCallback.js";import S from"../../../navigation-bar/__internal__/fixed-navigation-bar.context.js";import{defaultFocusableSelectors as j}from"../../../../__internal__/focus-trap/focus-trap-utils.js";function x(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){x(e,t,n[t])}))}return e}function P(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const _=n.forwardRef(((n,x)=>{var{children:_,className:T,title:k,icon:A,submenuDirection:I="right",onKeyDown:K,variant:C="default",showDropdownArrow:F=!0,clickToOpen:M,href:E,maxWidth:W,asPassiveItem:q,onSubmenuOpen:R,onSubmenuClose:V,onClick:H,submenuMaxWidth:L,submenuMinWidth:N}=n~~,B=~~function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0\|\|(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[$,U]=r(null),z=o(b()),{inFullscreenView:G,openSubmenuId:J,setOpenSubmenuId:Q,menuType:X}=d(),[Y,Z]=r(!1),[ee,te]=r(null),[ne,re]=r([]),[oe,ie]=r(""),[ue,ae]=r(!1),[le,se]=r(!1),ce=ne.length,{submenuMaxHeight:me}=i(S),pe=w(R),de=u((()=>{const e=null~~==$?~~void 0~~:$.~~querySelectorAll(v);if(e&&Y&&ce){const t=Array.from(e),n=null~~==$?~~void 0~~:$.~~querySelector(`[data-component='${h}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${g}']`))?r+1:r}return-1}),[Y,ce,$]),fe=o(null),ye=a((()=>{fe.current=setTimeout((()=>{ie("")}),1500)}),[]),be=a((()=>{fe.current&&clearTimeout(fe.current),ye()}),[ye]);l((()=>()=>{fe.current&&clearTimeout(fe.current)}),[]);const ve=a((()=>{Z(!0),Q(z.current)}),[Q]),he=o();l((()=>{Y~~&&$&&~~(()=>{var e;const t=Array.from(~~(null==$?void 0:$.~~querySelectorAll("~~ul:not(~~[data-component='~~submenu~~'])"))\|\|[])~~;if(~~0~~===~~t.length)~~return~~;const n=Array.from(~~(null==$?void 0:$.~~querySelectorAll("[data-component='~~menu-item~~']"))\|\|[]).~~pop~~();~~he.current=n;~~const r=t.~~pop()~~,o=~~Boolean~~((null==r\|\|null===(e=r.parentElement)\|\|void 0===e?void 0:e.dataset.component)===h),i=Array.from(~~(null==r?void 0:r~~.querySelectorAll("[data-component='menu-item']"))\|\|[]).~~pop()~~;let u=!1;i&&r&&(u=i.getBoundingClientRect().bottom<r.getBoundingClientRect().bottom);const a=!!i&&i===n;ae(a),se(a&&!o\|\|a&&o&&!u)})()}),[Y~~,$,~~ce]),l((()=>{Y&&pe&&pe()}),[Y,pe]);const ge=a((()=>{Z(!1),te(null),V&&V(),ie("")}),[V]);l((()=>{J&&J!==z.current&&ge()}),[J,ge]);const Oe=a((e=>ne.findIndex((t=>t===e))),[ne]),we=a((e=>{const t=p.isEnterKey(e)\|\|p.isSpaceKey(e);if(!t&&!p.isDownKey(e)\|\|Y\|\|(e.preventDefault(),ve()),Y){const n=Oe(ee);let r=n;if(ee\|\|((t&&!E\|\|p.isSpaceKey(e)&&E)&&(e.preventDefault(),ge()),p.isShiftKey(e)&&p.isTabKey(e)&&ge()),p.isDownKey(e)&&(e.preventDefault(),r<ce-1&&(r+=1)),p.isUpKey(e)&&(e.preventDefault(),ae(!1),r>0&&(r-=1)),p.isEscKey(e))return null==K\|\|K(e),void ge();p.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),p.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ce-1),1===e.key.length?(e.stopPropagation(),fe.current?be():ye(),ie(`${oe}${e.key.toLowerCase()}`)):ie(""),p.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")\|\|"input-icon-toggle"===e.getAttribute("data-element"))))\|\|p.isEnterKey(e)&&setTimeout((()=>ge()),0),r!==n&&te(ne[r])}}),[ne,Y,E,ce,ee,Oe,ve,ge,K,oe,be~~,ye~~]);return l((()=>{if(~~$&&_~~){const e=null~~==$?~~void 0~~:$.~~querySelectorAll(O);e&&re(Array.from(e).filter((e=>e.querySelector(j))).map((e=>e.getAttribute("id"))))}}),[_,Y,$]),l((()=>{const e=null~~==$?~~void 0~~:$.~~querySelectorAll(O);if(e&&""!==oe){const t=Array.from(e),n=f(oe,t);n&&te(n.id)}}),[$,oe,ne]),e(c,G?{"data-component":"submenu-wrapper",inFullscreenView:G,asPassiveItem:q,menuType:X,children:[t(s,P(D({},B),{onClick:q?void 0:H,className:T,menuType:X,ref:x,href:E,menuItemVariant:C,inFullscreenView:G,asDiv:q,children:k})),t(m,{"data-component":"submenu",variant:C,menuType:X,inFullscreenView:G,ref:U,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:le,children:t(y.Provider,{value:{handleKeyDown:we,blockIndex:de,updateFocusId:te},children:_})})]}:{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:M?void 0:()=>ve(),onMouseLeave:()=>ge(),isSubmenuOpen:Y,ref:U,children:[t(s,P(D({},B),{className:T,menuType:X,ref:x,icon:A,tabIndex:-1,menuItemVariant:C,isOpen:Y,hasSubmenu:!0,showDropdownArrow:F,onKeyDown:we,onClick:e=>{ve(),H&&H(e)},clickToOpen:M,href:E,maxWidth:W,"aria-expanded":Y,"data-role":"submenu-parent-item",children:k})),Y&&t(m,{"data-component":"submenu",submenuDirection:I,variant:C,menuType:X,role:0===de?"presentation":"list",maxHeight:me,applyFocusRadiusStyling:ue,applyFocusRadiusStylingToLastItem:le,submenuMaxWidth:L,submenuMinWidth:N,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)\|\|ge()},children:t(y.Provider,{value:{submenuFocusId:ee,handleKeyDown:we,blockIndex:de,updateFocusId:te,submenuHasMaxWidth:!!L},children:_})})]})}));_.displayName="submenu";export{_ as default};
1	+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useContext as i,useMemo as u,useCallback as l,useEffect as a}from"react";import s from"../../menu-item/menu-item.style.js";import{StyledSubmenuWrapper as c,StyledSubmenu as m}from"./submenu.style.js";import p from"../../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as d}from"../strict-menu.context.js";import{characterNavigation as f}from"../keyboard-navigation/index.js";import b from"./submenu.context.js";import y from"../../../../__internal__/utils/helpers/guid/index.js";import{BLOCK_INDEX_SELECTOR as h,SCROLLABLE_BLOCK as v,SCROLLABLE_BLOCK_PARENT as g,ALL_CHILDREN_SELECTOR as O}from"../locators.js";import{useStableCallback as w}from"../../../../hooks/__internal__/useStableCallback/useStableCallback.js";import S from"../../../navigation-bar/__internal__/fixed-navigation-bar.context.js";import{defaultFocusableSelectors as j}from"../../../../__internal__/focus-trap/focus-trap-utils.js";function x(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){x(e,t,n[t])}))}return e}function P(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const A=n.forwardRef(((n,x)=>{var{children:A,className:_,title:T,icon:k,submenuDirection:I="right",onKeyDown:K,variant:C="default",showDropdownArrow:E=!0,clickToOpen:F,href:M,maxWidth:q,asPassiveItem:W,onSubmenuOpen:R,onSubmenuClose:V,onClick:H,submenuMaxWidth:L,submenuMinWidth:N}=n,$=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0\|\|(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[B,U]=r(null),z=o(y()),{inFullscreenView:G,openSubmenuId:J,setOpenSubmenuId:Q,menuType:X}=d(),[Y,Z]=r(!1),[ee,te]=r(null),[ne,re]=r([]),[oe,ie]=r(""),[ue,le]=r(!1),[ae,se]=r(!1),ce=ne.length,{submenuMaxHeight:me}=i(S),pe=w(R),de=u((()=>{const e=null==B?void 0:B.querySelectorAll(h);if(e&&Y&&ce){const t=Array.from(e),n=null==B?void 0:B.querySelector(`[data-component='${v}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${g}']`))?r+1:r}return-1}),[Y,ce,B]),fe=o(null),be=l((()=>{fe.current=setTimeout((()=>{ie("")}),1500)}),[]),ye=l((()=>{fe.current&&clearTimeout(fe.current),be()}),[be]);a((()=>()=>{fe.current&&clearTimeout(fe.current)}),[]);const he=l((()=>{Z(!0),Q(z.current)}),[Q]),ve=o();a((()=>{Y&&B&&(()=>{var e;if(!B)return;const t=Array.from(B.querySelectorAll("[data-component='menu-item']")\|\|[]),n=t.length>0?t[t.length-1]:null;ve.current=null!=n?n:void 0,B.querySelectorAll("[data-last-visible-menu-item]").forEach((e=>e.removeAttribute("data-last-visible-menu-item"))),n&&n.setAttribute("data-last-visible-menu-item","true");const r=Array.from(B.querySelectorAll("ul:not([data-component='submenu'])")\|\|[]);if(0===r.length)return le(!1),void se(!1);const o=r[r.length-1],i=(null==o\|\|null===(e=o.parentElement)\|\|void 0===e?void 0:e.dataset.component)===v,u=Array.from(o.querySelectorAll("[data-component='menu-item']")\|\|[]),l=u.length>0?u[u.length-1]:null;let a=!1;l&&o&&(a=l.getBoundingClientRect().bottom<o.getBoundingClientRect().bottom);const s=!!l&&!!n&&l===n;le(s),se(s&&!i\|\|s&&i&&!a)})()}),[Y,B,ce]),a((()=>{Y&&pe&&pe()}),[Y,pe]);const ge=l((()=>{Z(!1),te(null),V&&V(),ie("")}),[V]);a((()=>{J&&J!==z.current&&ge()}),[J,ge]);const Oe=l((e=>ne.findIndex((t=>t===e))),[ne]),we=l((e=>{const t=p.isEnterKey(e)\|\|p.isSpaceKey(e);if(!t&&!p.isDownKey(e)\|\|Y\|\|(e.preventDefault(),he()),Y){const n=Oe(ee);let r=n;if(ee\|\|((t&&!M\|\|p.isSpaceKey(e)&&M)&&(e.preventDefault(),ge()),p.isShiftKey(e)&&p.isTabKey(e)&&ge()),p.isDownKey(e)&&(e.preventDefault(),r<ce-1&&(r+=1)),p.isUpKey(e)&&(e.preventDefault(),le(!1),r>0&&(r-=1)),p.isEscKey(e))return null==K\|\|K(e),void ge();p.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),p.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ce-1),1===e.key.length?(e.stopPropagation(),fe.current?ye():be(),ie(`${oe}${e.key.toLowerCase()}`)):ie(""),p.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")\|\|"input-icon-toggle"===e.getAttribute("data-element"))))\|\|p.isEnterKey(e)&&setTimeout((()=>ge()),0),r!==n&&te(ne[r])}}),[ne,Y,M,ce,ee,Oe,he,ge,K,oe,ye,be]);return a((()=>{if(B&&A){const e=null==B?void 0:B.querySelectorAll(O);e&&re(Array.from(e).filter((e=>e.querySelector(j))).map((e=>e.getAttribute("id"))))}}),[A,Y,B]),a((()=>{const e=null==B?void 0:B.querySelectorAll(O);if(e&&""!==oe){const t=Array.from(e),n=f(oe,t);n&&te(n.id)}}),[B,oe,ne]),e(c,G?{"data-component":"submenu-wrapper",inFullscreenView:G,asPassiveItem:W,menuType:X,children:[t(s,P(D({},$),{onClick:W?void 0:H,className:_,menuType:X,ref:x,href:M,menuItemVariant:C,inFullscreenView:G,asDiv:W,children:T})),t(m,{"data-component":"submenu",variant:C,menuType:X,inFullscreenView:G,ref:U,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:ae,children:t(b.Provider,{value:{handleKeyDown:we,blockIndex:de,updateFocusId:te},children:A})})]}:{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:F?void 0:()=>he(),onMouseLeave:()=>ge(),isSubmenuOpen:Y,ref:U,children:[t(s,P(D({},$),{className:_,menuType:X,ref:x,icon:k,tabIndex:-1,menuItemVariant:C,isOpen:Y,hasSubmenu:!0,showDropdownArrow:E,onKeyDown:we,onClick:e=>{he(),H&&H(e)},clickToOpen:F,href:M,maxWidth:q,"aria-expanded":Y,"data-role":"submenu-parent-item",children:T})),Y&&t(m,{"data-component":"submenu",submenuDirection:I,variant:C,menuType:X,role:0===de?"presentation":"list",maxHeight:me,applyFocusRadiusStyling:ue,applyFocusRadiusStylingToLastItem:ae,submenuMaxWidth:L,submenuMinWidth:N,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)\|\|ge()},children:t(b.Provider,{value:{submenuFocusId:ee,handleKeyDown:we,blockIndex:de,updateFocusId:te,submenuHasMaxWidth:!!L},children:A})})]})}));A.displayName="submenu";export{A as default};

package/esm/components/menu/__internal__/submenu/submenu.style.js CHANGED Viewed

	@@ -1 +1 @@
1	- import t,{css as e}from"styled-components";import o from"../../scrollable-block/scrollable-block.style.js";import r from"../../../../style/themes/apply-base-theme.js";import{StyledLink as i}from"../../../link/link.style.js";import{StyledMenuItem as a}from"../../menu.style.js";import d from"../../../box/box.style.js";import s from"../../menu-item/menu-item.style.js";import n from"../../../icon/icon.style.js";import u from"../../menu.config.js";import{StyledSegmentChildren as l}from"../../menu-segment-title/menu-segment-title.style.js";const m=t.div.attrs(r).withConfig({displayName:"submenu.style__StyledSubmenuWrapper",componentId:"sc-~~57ceb950~~-0"})(["position:relative;width:fit-content;max-width:inherit;height:inherit;"," ",""],(({isSubmenuOpen:t,theme:o})=>t&&e(["z-index:",";"],o.zIndex.popover)),(({inFullscreenView:t,menuType:o,asPassiveItem:r})=>e([""," ",""],t&&e(["width:100%;",""],r&&o&&e(["","{outline:none;color:",";}"],s,u[o].title)),!t&&e(["display:flex;"])))),b=t.ul.withConfig({displayName:"submenu.style__StyledSubmenu",componentId:"sc-~~57ceb950~~-1"})(["",""],(({menuType:t,submenuDirection:r,variant:m,inFullscreenView:b,maxHeight:p,applyFocusRadiusStyling:h,applyFocusRadiusStylingToLastItem:c,submenuMaxWidth:g,submenuMinWidth:f})=>e([""," "," "," display:block;list-style:none;margin:0;padding:0;",":after,",":hover:after{display:none;}","{display:flex;align-items:center;white-space:nowrap;"," "," "," a{text-decoration:none;}> ",'{width:16px;height:16px;margin-right:5px;}}[data-component="icon"]{line-height:20px;&:before{line-height:unset;}span{vertical-align:middle;svg{height:16px;width:16px;}}}&:before{background-color:transparent;border-radius:0 0 4px 4px;content:"";height:5px;position:absolute;top:-5px;width:100%;}',""],!b&&t&&e(["box-shadow:var(--boxShadow100);position:absolute;top:100%;background-color:",";min-width:",";"," a,button,"," a,"," button{width:100%;}"],"default"===m?u[t].submenuItemBackground:u[t].background,null!=f?f:"100%",g&&e(["width:max-content;max-width:",";li{max-width:",";}&&&{a,button,"," a,"," button{white-space:normal;height:auto;}}"],g,g,i,i),i,i),b&&e(["min-width:100%;","{width:100%;}"],a),!b&&e(["border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);overflow-y:auto;"," ","~~:last-child~~ a,",":last-~~child button,","~~:last-~~child~~ > span~~,",":last-child~~ > div{border-bottom-~~left~~-radius:var(--~~borderRadius100~~);border-bottom-right-radius:var(--~~borderRadius100~~);~~}& "," > ",":last~~-of-~~type a,"," > ","~~:last-of-~~type button,~~"," ~~> "~~,~~":last-of-type~~ > span~~,","~~ ~~> ",":last-of-type >~~ div{border-bottom-~~right~~-radius:var(--~~borderRadius000~~);border-bottom-~~left~~-radius:var(--~~borderRadius000~~);:focus{border-bottom-right-radius:~~","~~;border-bottom-left-radius:~~","~~;}}&&&& ","{","{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";",":last-child ",",",":last-child a,",":last-child button{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";}}}"],p&&`max-height: ${p};`,a,a,~~a,a,l,a,l,a,l,a,l,a,c?"var(--borderRadius100)":"var(--borderRadius000)",c?"var(--borderRadius100)":"var(--borderRadius000)",~~o,d,h?"var(--borderRadius100)":"var(--borderRadius000)",a,i,a,a,c?"var(--borderRadius100)":"var(--borderRadius000)"),s,s,s,b&&e(["white-space:normal;height:auto;"]),g&&e(["height:auto;min-height:40px;"]),!b&&t&&e(["background-color:",";> a:focus,> button:focus{background-color:",";}> a,> button{padding:11px 16px 12px;}"],u[t].submenuItemBackground,u[t].submenuItemBackground),n,"left"===r&&e(["right:0;"]))));export{b as StyledSubmenu,m as StyledSubmenuWrapper};
1	+ import t,{css as e}from"styled-components";import o from"../../scrollable-block/scrollable-block.style.js";import r from"../../../../style/themes/apply-base-theme.js";import{StyledLink as i}from"../../../link/link.style.js";import{StyledMenuItem as a}from"../../menu.style.js";import d from"../../../box/box.style.js";import s from"../../menu-item/menu-item.style.js";import n from"../../../icon/icon.style.js";import u from"../../menu.config.js";import{StyledSegmentChildren as m}from"../../menu-segment-title/menu-segment-title.style.js";const b=t.div.attrs(r).withConfig({displayName:"submenu.style__StyledSubmenuWrapper",componentId:"sc-49c71dfb-0"})(["position:relative;width:fit-content;max-width:inherit;height:inherit;"," ",""],(({isSubmenuOpen:t,theme:o})=>t&&e(["z-index:",";"],o.zIndex.popover)),(({inFullscreenView:t,menuType:o,asPassiveItem:r})=>e([""," ",""],t&&e(["width:100%;",""],r&&o&&e(["","{outline:none;color:",";}"],s,u[o].title)),!t&&e(["display:flex;"])))),l=t.ul.withConfig({displayName:"submenu.style__StyledSubmenu",componentId:"sc-49c71dfb-1"})(["",""],(({menuType:t,submenuDirection:r,variant:b,inFullscreenView:l,maxHeight:p,applyFocusRadiusStyling:h,applyFocusRadiusStylingToLastItem:c,submenuMaxWidth:g,submenuMinWidth:f})=>e([""," "," "," display:block;list-style:none;margin:0;padding:0;",":after,",":hover:after{display:none;}","{display:flex;align-items:center;white-space:nowrap;"," "," "," a{text-decoration:none;}> ",'{width:16px;height:16px;margin-right:5px;}}[data-component="icon"]{line-height:20px;&:before{line-height:unset;}span{vertical-align:middle;svg{height:16px;width:16px;}}}&:before{background-color:transparent;border-radius:0 0 4px 4px;content:"";height:5px;position:absolute;top:-5px;width:100%;}',""],!l&&t&&e(["box-shadow:var(--boxShadow100);position:absolute;top:100%;background-color:",";min-width:",";"," a,button,"," a,"," button{width:100%;}"],"default"===b?u[t].submenuItemBackground:u[t].background,null!=f?f:"100%",g&&e(["width:max-content;max-width:",";li{max-width:",";}&&&{a,button,"," a,"," button{white-space:normal;height:auto;}}"],g,g,i,i),i,i),l&&e(["min-width:100%;","{width:100%;}"],a),!l&&e(["border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);overflow-y:auto;"," & "," > ",":last-of-type:not([data-last-visible-menu-item='true']){a,button,> span,> div{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);:focus{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);}}}[data-last-visible-menu-item=\"true\"]{a,button,> span,> div{border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);:focus{border-bottom-right-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);}}}&&&& ","{","{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";",":last-child ",",",":last-child a,",":last-child button{border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:",";}}}"],p&&`max-height: ${p};`,m,a,o,d,h?"var(--borderRadius100)":"var(--borderRadius000)",a,i,a,a,c?"var(--borderRadius100)":"var(--borderRadius000)"),s,s,s,l&&e(["white-space:normal;height:auto;"]),g&&e(["height:auto;min-height:40px;"]),!l&&t&&e(["background-color:",";> a:focus,> button:focus{background-color:",";}> a,> button{padding:11px 16px 12px;}"],u[t].submenuItemBackground,u[t].submenuItemBackground),n,"left"===r&&e(["right:0;"]))));export{l as StyledSubmenu,b as StyledSubmenuWrapper};

package/esm/components/tokens-wrapper/__internal__/static-tokens/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-declare const _default: "\n  --global-borderwidth-none: 0;\n  --global-borderwidth-xs: 1px;\n  --global-borderwidth-s: 2px;\n  --global-borderwidth-m: 3px;\n  --global-borderwidth-l: 4px;\n  --global-borderwidth-xl: 6px;\n  --global-borderwidth-xxl: 8px;\n  --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n  --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;\n  --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;\n  --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n  --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;\n  --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n  --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n  --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n  --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n  --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n  --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n  --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-comp-icon-s: 20px sage-icons;\n  --global-font-fluid-comp-icon-m: 20px sage-icons;\n  --global-font-fluid-comp-icon-l: 20px sage-icons;\n  --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;\n  --global-font-static-heading-s: 500 21px/1.25 Sage UI;\n  --global-font-static-heading-m: 700 24px/1.25 Sage UI;\n  --global-font-static-heading-l: 700 30px/1.25 Sage UI;\n  --global-font-static-subheading-m: 500 16px/1.25 Sage UI;\n  --global-font-static-subheading-l: 500 18px/1.25 Sage UI;\n  --global-font-static-section-heading-s: 700 16px/1.25 Sage UI;\n  --global-font-static-section-heading-m: 700 21px/1.25 Sage UI;\n  --global-font-static-body-regular-s: 400 14px/1.5 Sage UI;\n  --global-font-static-body-regular-m: 400 14px/1.5 Sage UI;\n  --global-font-static-body-regular-l: 400 16px/1.5 Sage UI;\n  --global-font-static-body-medium-s: 500 14px/1.5 Sage UI;\n  --global-font-static-body-medium-m: 500 14px/1.5 Sage UI;\n  --global-font-static-body-medium-l: 500 16px/1.5 Sage UI;\n  --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;\n  --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;\n  --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;\n  --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;\n  --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;\n  --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;\n  --global-font-static-comp-icon-s: 20px sage-icons;\n  --global-font-static-comp-icon-m: 20px sage-icons;\n  --global-font-static-comp-icon-l: 20px sage-icons;\n  --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;\n  --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;\n  --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;\n  --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;\n  --global-modifier-button-active: 0.30;\n  --global-modifier-button-active-alt: 0.15;\n  --global-modifier-button-hover: 0.15;\n  --global-modifier-button-hover-alt: 0.10;\n  --global-modifier-input-disabled-fg: 0.3;\n  --global-modifier-input-disabled-bg: 0.05;\n  --global-radius-none: 0;\n  --global-radius-container3xs: 1px;\n  --global-radius-container2xs: 2px;\n  --global-radius-container-xs: 4px;\n  --global-radius-container-s: 6px;\n  --global-radius-container-m: 8px;\n  --global-radius-container-l: 16px;\n  --global-radius-container-xl: 24px;\n  --global-radius-container2xl: 32px;\n  --global-radius-container3xl: 40px;\n  --global-radius-container4xl: 80px;\n  --global-radius-container-circle: 999px;\n  --global-radius-action2xs: 1px;\n  --global-radius-action-xs: 2px;\n  --global-radius-action-s: 4px;\n  --global-radius-action-m: 8px;\n  --global-radius-action-l: 16px;\n  --global-radius-action-xl: 20px;\n  --global-radius-action2xl: 24px;\n  --global-radius-action-circle: 999px;\n  --global-depth-none: dropShadow 0 0 0 0 rgba(0,0,0,0);\n  --global-depth-lvl1: dropShadow 0 1px 2px 0 #0000001A, dropShadow 2px 2px 10px 0 #00000033;\n  --global-depth-lvl2: dropShadow 0 2px 3px 0 #0000001A, dropShadow 6px 6px 30px 0 #00000026;\n  --global-depth-lvl3: dropShadow 0 3px 4px 0 #0000001A, dropShadow 10px 10px 60px 0 #0000001A;\n  --global-depth-sticky-b: dropShadow 0 -1px 2px 0 #0000001A, dropShadow 2px -2px 10px 0 #00000033;\n  --global-depth-sticky-l: dropShadow -2px 0 2px 0 #0000001A, dropShadow -5px 0 5px 0 #0000001A;\n  --global-depth-sticky-r: dropShadow 2px 0 2px 0 #0000001A, dropShadow 5px 0 5px 0 #0000001A;\n  --global-size-none: 0px;\n  --global-size6xs: 2px;\n  --global-size5xs: 4px;\n  --global-size4xs: 8px;\n  --global-size3xs: 16px;\n  --global-size2xs: 20px;\n  --global-size-xs: 24px;\n  --global-size-s: 32px;\n  --global-size-m: 40px;\n  --global-size-l: 48px;\n  --global-size-xl: 56px;\n  --global-size2xl: 64px;\n  --global-size3xl: 72px;\n  --global-size4xl: 80px;\n  --global-space-none: 0px;\n  --global-space-layout3xs: 8px;\n  --global-space-layout2xs: 16px;\n  --global-space-layout-xs: 24px;\n  --global-space-layout-s: 32px;\n  --global-space-layout-m: 40px;\n  --global-space-layout-l: 48px;\n  --global-space-layout-xl: 56px;\n  --global-space-layout2xl: 64px;\n  --global-space-layout3xl: 72px;\n  --global-space-layout4xl: 80px;\n  --global-space-comp2xs: 2px;\n  --global-space-comp-xs: 4px;\n  --global-space-comp-s: 8px;\n  --global-space-comp-m: 12px;\n  --global-space-comp-l: 16px;\n  --global-space-comp-xl: 24px;\n  --global-space-comp2xl: 32px;\n  --mode-color-none: #fff0;\n  --mode-color-ai-stop1: #13a038;\n  --mode-color-ai-stop2: #149197;\n  --mode-color-ai-stop3: #a87cfb;\n  --mode-color-ai-alt-stop1: #00d639;\n  --mode-color-ai-alt-stop2: #00d6de;\n  --mode-color-ai-alt-stop3: #9d60ff;\n  --mode-color-brand-default: #000000;\n  --mode-color-brand-default-alt: #000000;\n  --mode-color-brand-with-default-alt: #FFFFFF;\n  --mode-color-brand-inverse-default: #00d639;\n  --mode-color-brand-inverse-default-alt: #FFFFFF;\n  --mode-color-brand-inverse-with-default-alt: #000000;\n  --mode-color-brand-copilot-default: #000000;\n  --mode-color-brand-copilot-monochrome: #000000;\n  --mode-color-brand-copilot-with-default: #00d639;\n  --mode-color-brand-copilot-inverse-default: #FFFFFF;\n  --mode-color-brand-copilot-inverse-monochrome: #FFFFFF;\n  --mode-color-brand-copilot-inverse-with-default: #00d639;\n  --mode-color-colorcode-blue-deep: #0071c3;\n  --mode-color-colorcode-blue-muted: #e4eeff;\n  --mode-color-colorcode-teal-deep: #007C7B;\n  --mode-color-colorcode-teal-muted: #C8F5F5;\n  --mode-color-colorcode-green-deep: #00811F;\n  --mode-color-colorcode-green-muted: #D1F6D6;\n  --mode-color-colorcode-lime-deep: #627600;\n  --mode-color-colorcode-lime-muted: #e8f1d4;\n  --mode-color-colorcode-orange-deep: #d64309;\n  --mode-color-colorcode-orange-muted: #ffeaca;\n  --mode-color-colorcode-red-deep: #db004e;\n  --mode-color-colorcode-red-muted: #ffe8ea;\n  --mode-color-colorcode-pink-deep: #c72699;\n  --mode-color-colorcode-pink-muted: #fee8f5;\n  --mode-color-colorcode-purple-deep: #8f4bd7;\n  --mode-color-colorcode-purple-muted: #F3EBFE;\n  --mode-color-colorcode-slate-deep: #527386;\n  --mode-color-colorcode-slate-muted: #e4eff5;\n  --mode-color-colorcode-gray-deep: #6f6f6f;\n  --mode-color-colorcode-gray-muted: #eeeeee;\n  --mode-color-generic-bg-nought: #FFFFFF;\n  --mode-color-generic-bg-faint: #0000000a;\n  --mode-color-generic-bg-delicate: #00000014;\n  --mode-color-generic-bg-soft: #0000001e;\n  --mode-color-generic-bg-moderate: #00000029;\n  --mode-color-generic-bg-firm: #0000003d;\n  --mode-color-generic-bg-harsh: #00000052;\n  --mode-color-generic-bg-severe: #0006;\n  --mode-color-generic-bg-extreme: #000000;\n  --mode-color-generic-bg-inverse-nought: #000000;\n  --mode-color-generic-bg-inverse-faint: #ffffff0a;\n  --mode-color-generic-bg-inverse-delicate: #ffffff14;\n  --mode-color-generic-bg-inverse-soft: #ffffff1e;\n  --mode-color-generic-bg-inverse-moderate: #ffffff29;\n  --mode-color-generic-bg-inverse-firm: #ffffff3d;\n  --mode-color-generic-bg-inverse-harsh: #ffffff52;\n  --mode-color-generic-bg-inverse-severe: #fff6;\n  --mode-color-generic-bg-inverse-extreme: #FFFFFF;\n  --mode-color-generic-txt-extreme: #000000;\n  --mode-color-generic-txt-severe: #000000f2;\n  --mode-color-generic-txt-moderate: #000000a6;\n  --mode-color-generic-txt-soft: #0000008c;\n  --mode-color-generic-txt-delicate: #0000006b;\n  --mode-color-generic-txt-faint: #0000004d;\n  --mode-color-generic-txt-nought: #FFFFFF;\n  --mode-color-generic-txt-inverse-extreme: #FFFFFF;\n  --mode-color-generic-txt-inverse-severe: #fffffff2;\n  --mode-color-generic-txt-inverse-moderate: #ffffffab;\n  --mode-color-generic-txt-inverse-soft: #ffffff8c;\n  --mode-color-generic-txt-inverse-delicate: #ffffff6b;\n  --mode-color-generic-txt-inverse-faint: #ffffff4d;\n  --mode-color-generic-txt-inverse-nought: #000000;\n  --mode-color-generic-fg-nought: #FFFFFF;\n  --mode-color-generic-fg-delicate: #eeeeee;\n  --mode-color-generic-fg-soft: #a0a0a0;\n  --mode-color-generic-fg-moderate: #8b8b8b;\n  --mode-color-generic-fg-firm: #7c7c7c;\n  --mode-color-generic-fg-extreme: #000000;\n  --mode-color-generic-fg-inverse-nought: #000000;\n  --mode-color-generic-fg-inverse-delicate: #181818;\n  --mode-color-generic-fg-inverse-soft: #505050;\n  --mode-color-generic-fg-inverse-moderate: #616161;\n  --mode-color-generic-fg-inverse-firm: #6f6f6f;\n  --mode-color-generic-fg-inverse-extreme: #FFFFFF;\n  --mode-color-generic-surface-nought: #FFFFFF;\n  --mode-color-generic-surface-faint: #f4f4f4;\n  --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);\n  --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);\n  --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%);\n  --mode-color-action-ai-active-stop1: #13a03826;\n  --mode-color-action-ai-active-stop2: #14919726;\n  --mode-color-action-ai-active-stop3: #a87cfb26;\n  --mode-color-action-ai-hover-stop1: #13a03814;\n  --mode-color-action-ai-hover-stop2: #14919714;\n  --mode-color-action-ai-hover-stop3: #a87cfb14;\n  --mode-color-action-danger-active: #a30037;\n  --mode-color-action-danger-default: #db004e;\n  --mode-color-action-danger-default-alt: #c40044;\n  --mode-color-action-danger-hover: #c40044;\n  --mode-color-action-danger-hover-alt: #db004e26;\n  --mode-color-action-danger-hover-alt2: #a30037;\n  --mode-color-action-danger-with-active: #FFFFFF;\n  --mode-color-action-danger-with-default: #FFFFFF;\n  --mode-color-action-danger-inverse-active: #ff728d;\n  --mode-color-action-danger-inverse-default: #f50059;\n  --mode-color-action-danger-inverse-default-alt: #ff3e6a;\n  --mode-color-action-danger-inverse-hover: #ff3e6a;\n  --mode-color-action-danger-inverse-hover-alt: #f5005926;\n  --mode-color-action-danger-inverse-hover-alt2: #ff728d;\n  --mode-color-action-danger-inverse-with-active: #000000;\n  --mode-color-action-danger-inverse-with-default: #000000;\n  --mode-color-action-data-entry-default: #FFFFFF;\n  --mode-color-action-data-entry-with-active: #000000;\n  --mode-color-action-data-entry-with-active-alt: #FFFFFF;\n  --mode-color-action-data-entry-with-hover: #000000;\n  --mode-color-action-data-entry-hover-alt: #0000001a;\n  --mode-color-action-data-entry-with-default: #7c7c7c;\n  --mode-color-action-data-entry-default-alt: #f4f9fc;\n  --mode-color-action-data-entry-txt: #000000f2;\n  --mode-color-action-data-entry-txt-alt: #0000008c;\n  --mode-color-action-data-entry-inverse-default: #000000;\n  --mode-color-action-data-entry-inverse-with-default: #6f6f6f;\n  --mode-color-action-data-entry-inverse-txt: #fffffff2;\n  --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c;\n  --mode-color-action-focus-default: #000000;\n  --mode-color-action-focus-txt: #000000;\n  --mode-color-action-focus-with-default: #FFB500;\n  --mode-color-action-focus-with-default-alt: #ffd274;\n  --mode-color-action-focus-inverse-default: #FFB500;\n  --mode-color-action-focus-inverse-txt: #FFFFFF;\n  --mode-color-action-focus-inverse-with-default: #000000;\n  --mode-color-action-focus-inverse-with-default-alt: #885e00;\n  --mode-color-action-inactive-default: #0000004d;\n  --mode-color-action-inactive-mask: #0006;\n  --mode-color-action-inactive-default-alt: #eeeeee;\n  --mode-color-action-inactive-txt: #0000006b;\n  --mode-color-action-inactive-txt-alt: #FFFFFF;\n  --mode-color-action-inactive-icon: #0000006b;\n  --mode-color-action-inactive-icon-alt: #0000008c;\n  --mode-color-action-inactive-inverse-default: #ffffff4d;\n  --mode-color-action-inactive-inverse-txt: #ffffff6b;\n  --mode-color-action-inactive-inverse-txt-alt: #000000;\n  --mode-color-action-grayscale-active: #000000;\n  --mode-color-action-grayscale-active-alt: #00000026;\n  --mode-color-action-grayscale-default: #000000e6;\n  --mode-color-action-grayscale-default-alt: #000000ab;\n  --mode-color-action-grayscale-hover-alt: #0000001a;\n  --mode-color-action-grayscale-hover: #00000026;\n  --mode-color-action-grayscale-with-active: #FFFFFF;\n  --mode-color-action-grayscale-with-active-alt: #000000;\n  --mode-color-action-grayscale-with-default: #FFFFFF;\n  --mode-color-action-grayscale-with-hover: #000000;\n  --mode-color-action-grayscale-inverse-active: #FFFFFF;\n  --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n  --mode-color-action-grayscale-inverse-default: #ffffffe6;\n  --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n  --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n  --mode-color-action-grayscale-inverse-hover: #ffffff26;\n  --mode-color-action-grayscale-inverse-with-active: #000000;\n  --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n  --mode-color-action-grayscale-inverse-with-default: #000000;\n  --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n  --mode-color-action-nav-active: #00000026;\n  --mode-color-action-nav-default: #FFFFFF;\n  --mode-color-action-nav-default-alt: #f8f8f8;\n  --mode-color-action-nav-hover: #0000001a;\n  --mode-color-action-nav-with-active: #000000;\n  --mode-color-action-nav-with-default: #000000f2;\n  --mode-color-action-nav-with-hover: #000000;\n  --mode-color-action-nav-inverse-active: #ffffff26;\n  --mode-color-action-nav-inverse-default: #000000;\n  --mode-color-action-nav-inverse-default-alt: #0b0b0b;\n  --mode-color-action-nav-inverse-hover: #ffffff1a;\n  --mode-color-action-nav-inverse-with-active: #FFFFFF;\n  --mode-color-action-nav-inverse-with-default: #fffffff2;\n  --mode-color-action-nav-inverse-with-hover: #FFFFFF;\n  --mode-color-action-main-active: #005e14;\n  --mode-color-action-main-active-alt: #00811f4d;\n  --mode-color-action-main-default: #00811f;\n  --mode-color-action-main-default-alt: #00811fcc;\n  --mode-color-action-main-default-alt2: #007219;\n  --mode-color-action-main-default-alt3: #00811f08;\n  --mode-color-action-main-hover: #007219;\n  --mode-color-action-main-hover-alt: #00811f26;\n  --mode-color-action-main-hover-alt2: #005e14;\n  --mode-color-action-main-with-active: #FFFFFF;\n  --mode-color-action-main-with-default: #FFFFFF;\n  --mode-color-action-main-with-hover: #FFFFFF;\n  --mode-color-action-main-inverse-active: #8fff98;\n  --mode-color-action-main-inverse-active-alt: #00f1424d;\n  --mode-color-action-main-inverse-default: #00f142;\n  --mode-color-action-main-inverse-default-alt: #00f142cc;\n  --mode-color-action-main-inverse-default-alt2: #46fb5e;\n  --mode-color-action-main-inverse-default-alt3: #00f14208;\n  --mode-color-action-main-inverse-hover: #46fb5e;\n  --mode-color-action-main-inverse-hover-alt: #00f14226;\n  --mode-color-action-main-inverse-hover-alt2: #8fff98;\n  --mode-color-action-main-inverse-with-active: #000000;\n  --mode-color-action-main-inverse-with-default: #000000;\n  --mode-color-action-main-inverse-with-hover: #000000;\n  --mode-color-status-ai-default: #FFFFFF;\n  --mode-color-status-ai-default-alt: #000000;\n  --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%);\n  --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038  0%, #149197 40%, #a87cfb 90%);\n  --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);\n  --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);\n  --mode-color-status-callout-default-alt: #e0ffe2;\n  --mode-color-status-callout-hover-alt: #b7ffbd;\n  --mode-color-status-skeleton-stop1: #747474cc;\n  --mode-color-status-skeleton-stop2: #7474740a;\n  --mode-color-status-warning-default: #d64309;\n  --mode-color-status-warning-default-alt: #fff7eb;\n  --mode-color-status-warning-hover: #b33400;\n  --mode-color-status-warning-hover-alt: #ffeaca;\n  --mode-color-status-warning-txt: #b33400;\n  --mode-color-status-warning-inverse-default: #e24300;\n  --mode-color-status-warning-inverse-default-alt: #1d0300;\n  --mode-color-status-warning-inverse-hover: #e5631c;\n  --mode-color-status-warning-inverse-hover-alt: #360900;\n  --mode-color-status-warning-inverse-txt: #e5631c;\n  --mode-color-status-txt-with-default: #FFFFFF;\n  --mode-color-status-txt-with-default-alt: #000000f2;\n  --mode-color-status-txt-with-hover: #FFFFFF;\n  --mode-color-status-txt-with-hover-alt: #000000;\n  --mode-color-status-txt-loading: #747474;\n  --mode-color-status-txt-inverse-with-default: #000000;\n  --mode-color-status-txt-inverse-with-default-alt: #fffffff2;\n  --mode-color-status-txt-inverse-with-hover: #000000;\n  --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;\n  --mode-color-status-custom-blue-default: #0071c3;\n  --mode-color-status-custom-blue-default-alt: #f5f8ff;\n  --mode-color-status-custom-blue-hover: #0063ad;\n  --mode-color-status-custom-blue-hover-alt: #e4eeff;\n  --mode-color-status-custom-teal-default: #007C7B;\n  --mode-color-status-custom-teal-default-alt: #E8FCFC;\n  --mode-color-status-custom-teal-hover: #006D6C;\n  --mode-color-status-custom-teal-hover-alt: #C8F5F5;\n  --mode-color-status-custom-green-default: #00811F;\n  --mode-color-status-custom-green-default-alt: #EEFCEF;\n  --mode-color-status-custom-green-hover: #007219;\n  --mode-color-status-custom-green-hover-alt: #D1F6D6;\n  --mode-color-status-custom-lime-default: #627600;\n  --mode-color-status-custom-lime-default-alt: #f6f9f0;\n  --mode-color-status-custom-lime-hover: #576900;\n  --mode-color-status-custom-lime-hover-alt: #e8f1d4;\n  --mode-color-status-custom-orange-default: #d64309;\n  --mode-color-status-custom-orange-default-alt: #fff7eb;\n  --mode-color-status-custom-orange-hover: #b33400;\n  --mode-color-status-custom-orange-hover-alt: #ffeaca;\n  --mode-color-status-custom-orange-txt: #b33400;\n  --mode-color-status-custom-red-default: #db004e;\n  --mode-color-status-custom-red-default-alt: #fff5f6;\n  --mode-color-status-custom-red-hover: #c40044;\n  --mode-color-status-custom-red-hover-alt: #ffe8ea;\n  --mode-color-status-custom-pink-default: #c72699;\n  --mode-color-status-custom-pink-default-alt: #fff5fa;\n  --mode-color-status-custom-pink-hover: #b02086;\n  --mode-color-status-custom-pink-hover-alt: #fee8f5;\n  --mode-color-status-custom-purple-default: #8f4bd7;\n  --mode-color-status-custom-purple-default-alt: #f9f6ff;\n  --mode-color-status-custom-purple-hover: #803ec5;\n  --mode-color-status-custom-purple-hover-alt: #F3EBFE;\n  --mode-color-status-custom-gray-default: #6f6f6f;\n  --mode-color-status-custom-gray-default-alt: #f8f8f8;\n  --mode-color-status-custom-gray-hover: #616161;\n  --mode-color-status-custom-gray-hover-alt: #eeeeee;\n  --mode-color-status-custom-slate-default: #527386;\n  --mode-color-status-custom-slate-default-alt: #f4f9fc;\n  --mode-color-status-custom-slate-hover: #486576;\n  --mode-color-status-custom-slate-hover-alt: #e4eff5;\n  --mode-color-status-priority-default: #8f4bd7;\n  --mode-color-status-priority-default-alt: #f9f6ff;\n  --mode-color-status-priority-hover: #803ec5;\n  --mode-color-status-priority-hover-alt: #F3EBFE;\n  --mode-color-status-priority-inverse-default: #9463d7;\n  --mode-color-status-priority-inverse-default-alt: #10041f;\n  --mode-color-status-priority-inverse-hover: #a375dd;\n  --mode-color-status-priority-inverse-hover-alt: #220c3a;\n  --mode-color-status-inactive-default: #7c7c7c;\n  --mode-color-status-inactive-with-default: #0000008c;\n  --mode-color-status-inactive-inverse-default: #6f6f6f;\n  --mode-color-status-inactive-inverse-with-default: #ffffff8c;\n  --mode-color-status-info-default: #0071c3;\n  --mode-color-status-info-default-alt: #f5f8ff;\n  --mode-color-status-info-hover: #0063ad;\n  --mode-color-status-info-hover-alt: #e4eeff;\n  --mode-color-status-info-inverse-default: #007fd9;\n  --mode-color-status-info-inverse-default-alt: #000b1c;\n  --mode-color-status-info-inverse-hover: #008ef4;\n  --mode-color-status-info-inverse-hover-alt: #001932;\n  --mode-color-status-negative-default: #db004e;\n  --mode-color-status-negative-default-alt: #fff5f6;\n  --mode-color-status-negative-hover: #c40044;\n  --mode-color-status-negative-hover-alt: #ffe8ea;\n  --mode-color-status-negative-inverse-default: #f50059;\n  --mode-color-status-negative-inverse-default-alt: #1e0005;\n  --mode-color-status-negative-inverse-hover: #ff3e6a;\n  --mode-color-status-negative-inverse-hover-alt: #3c000f;\n  --mode-color-status-neutral-default: #6f6f6f;\n  --mode-color-status-neutral-default-alt: #f8f8f8;\n  --mode-color-status-neutral-hover: #616161;\n  --mode-color-status-neutral-hover-alt: #eeeeee;\n  --mode-color-status-neutral-inverse-default: #7c7c7c;\n  --mode-color-status-neutral-inverse-default-alt: #0b0b0b;\n  --mode-color-status-neutral-inverse-hover: #8b8b8b;\n  --mode-color-status-neutral-inverse-hover-alt: #181818;\n  --mode-color-status-positive-default: #00811F;\n  --mode-color-status-positive-default-alt: #EEFCEF;\n  --mode-color-status-positive-hover: #007219;\n  --mode-color-status-positive-hover-alt: #D1F6D6;\n  --mode-color-status-positive-inverse-default: #019127;\n  --mode-color-status-positive-inverse-default-alt: #001001;\n  --mode-color-status-positive-inverse-hover: #007219;\n  --mode-color-status-positive-inverse-hover-alt: #001f03;\n  --badge-none: var(--mode-color-none);\n  --badge-border-default: var(--mode-color-generic-txt-nought);\n  --badge-bg-default: var(--mode-color-status-negative-default);\n  --badge-bg-alt: var(--mode-color-status-info-default);\n  --badge-label-default: var(--mode-color-generic-txt-nought);\n  --badge-label-alt: var(--mode-color-generic-txt-nought);\n  --badge-inverse-border-default: var(--mode-color-generic-txt-extreme);\n  --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n  --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);\n  --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);\n  --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);\n  --button-none: var(--mode-color-none);\n  --button-ai-bg-active: var(--mode-color-action-ai-grad-active);\n  --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover);\n  --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1)  0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n  --button-ai-border-disabled: var(--mode-color-action-inactive-default);\n  --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1)  0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n  --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1)  0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n  --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-ai-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-ai-label-default: var(--mode-color-action-grayscale-default);\n  --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default);\n  --button-destructive-primary-bg-default: var(--mode-color-action-danger-default);\n  --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover);\n  --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n  --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default);\n  --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default);\n  --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt);\n  --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default);\n  --button-destructive-secondary-border-default: var(--mode-color-action-danger-default);\n  --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover);\n  --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-destructive-secondary-label-default: var(--mode-color-action-danger-default);\n  --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover);\n  --button-typical-primary-bg-active: var(--mode-color-action-main-active);\n  --button-typical-primary-border-default: var(--mode-color-action-main-with-default);\n  --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-primary-bg-default: var(--mode-color-action-main-default);\n  --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);\n  --button-typical-primary-label-active: var(--mode-color-action-main-with-active);\n  --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n  --button-typical-primary-label-default: var(--mode-color-action-main-with-default);\n  --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);\n  --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);\n  --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);\n  --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);\n  --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default);\n  --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);\n  --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);\n  --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt);\n  --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);\n  --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);\n  --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt);\n  --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3);\n  --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt);\n  --button-typical-secondary-border-active: var(--mode-color-action-main-active);\n  --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt);\n  --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);\n  --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default);\n  --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n  --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);\n  --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n  --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n  --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n  --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n  --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n  --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n  --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n  --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n  --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);\n  --button-typical-tertiary-bg-default: var(--button-none);\n  --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);\n  --button-typical-tertiary-border-active: var(--mode-color-action-main-active);\n  --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt);\n  --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover);\n  --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default);\n  --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n  --button-typical-tertiary-inverse-bg-default: var(--button-none);\n  --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n  --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n  --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n  --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n  --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n  --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n  --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n  --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n  --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);\n  --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);\n  --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);\n  --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);\n  --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n  --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n  --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n  --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);\n  --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);\n  --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);\n  --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);\n  --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);\n  --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);\n  --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default);\n  --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default);\n  --button-video-primary-label-default: var(--mode-color-action-grayscale-default);\n  --button-video-primary-label-hover: var(--mode-color-action-grayscale-default);\n  --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default);\n  --container-action-bg-footer-activated: var(--mode-color-status-positive-default);\n  --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);\n  --container-action-border-activated: var(--mode-color-status-positive-default);\n  --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);\n  --container-action-bg-default: var(--mode-color-generic-bg-nought);\n  --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --container-action-border-active: var(--mode-color-action-grayscale-active);\n  --container-action-border-alt: var(--mode-color-generic-fg-moderate);\n  --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);\n  --container-action-border-inactive: var(--mode-color-generic-fg-firm);\n  --container-action-border-default: var(--mode-color-generic-fg-firm);\n  --container-action-icon-active: var(--mode-color-action-grayscale-active);\n  --container-action-icon-default: var(--mode-color-action-grayscale-default);\n  --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);\n  --container-action-icon-hover: var(--mode-color-action-grayscale-default);\n  --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active);\n  --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active);\n  --container-action-txt-active: var(--mode-color-action-grayscale-active);\n  --container-action-txt-disabled: var(--mode-color-action-inactive-txt);\n  --container-action-txt-default: var(--mode-color-generic-txt-severe);\n  --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate);\n  --container-action-txt-hover: var(--mode-color-action-grayscale-default);\n  --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default);\n  --container-action-target-bg-default: var(--mode-color-status-info-default);\n  --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint);\n  --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm);\n  --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft);\n  --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm);\n  --container-standard-bg-alt: var(--mode-color-generic-bg-faint);\n  --container-standard-bg-default: var(--mode-color-generic-bg-nought);\n  --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint);\n  --container-standard-border-active: var(--mode-color-action-grayscale-active);\n  --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal);\n  --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);\n  --container-standard-border-alt: var(--mode-color-generic-fg-firm);\n  --container-standard-border-default: var(--mode-color-generic-fg-soft);\n  --container-standard-dimmer: var(--mode-color-action-inactive-mask);\n  --container-standard-icon: var(--mode-color-generic-fg-firm);\n  --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);\n  --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n  --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);\n  --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);\n  --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft);\n  --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);\n  --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);\n  --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n  --container-standard-priority-bg-caution: var(--mode-color-status-warning-default);\n  --container-standard-priority-bg-negative: var(--mode-color-status-negative-default);\n  --container-standard-priority-bg-prio: var(--mode-color-status-priority-default);\n  --container-standard-priority-bg-info: var(--mode-color-status-info-default);\n  --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default);\n  --container-standard-priority-bg-positive: var(--mode-color-status-positive-default);\n  --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n  --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default);\n  --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default);\n  --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default);\n  --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default);\n  --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);\n  --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);\n  --container-quote-border: var(--mode-color-action-main-default);\n  --container-size-bubble-max-w: 600px;\n  --container-size-copilot-emptystate-illustration: 200px;\n  --container-size-copilot-emptystate-txt-max-w: 600px;\n  --container-size-copilot-overlay-max-h: 960px;\n  --container-size-dialog-max-ws: 540px;\n  --container-size-dialog-max-wm: 850px;\n  --container-size-dialog-max-wl: 1080px;\n  --container-size-dialog-min-w: 288px;\n  --container-size-empty-state-primary-s: 200px;\n  --container-size-empty-state-primary-m: 240px;\n  --container-size-empty-state-primary-l: 320px;\n  --container-size-fluid-items2xs: 80px;\n  --container-size-fluid-items-xs: 128px;\n  --container-size-fluid-items-s: 160px;\n  --container-size-fluid-items-m: 200px;\n  --container-size-fluid-items-l: 240px;\n  --container-size-fluid-items-xl: 288px;\n  --container-size-fluid-items2xl: 320px;\n  --container-size-fluid-items3xl: 560px;\n  --container-size-fluid-items4xl: 760px;\n  --container-size-sidebar-max-ws: 760px;\n  --container-size-sidebar-max-wm: 1000px;\n  --container-size-sidebar-min-w: 288px;\n  --focus-bg: var(--mode-color-action-focus-with-default-alt);\n  --focus-borderalt: var(--mode-color-action-focus-default);\n  --focus-border: var(--mode-color-action-focus-with-default);\n  --focus-label: var(--mode-color-action-focus-txt);\n  --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);\n  --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);\n  --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);\n  --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);\n  --dataviz-generic-label-alt: var(--mode-color-generic-txt-nought);\n  --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);\n  --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);\n  --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);\n  --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);\n  --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-deep);\n  --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-deep);\n  --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-muted);\n  --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-deep);\n  --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-deep);\n  --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-deep);\n  --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-muted);\n  --dataviz-generic-green-border: var(--mode-color-colorcode-green-deep);\n  --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-deep);\n  --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-deep);\n  --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-muted);\n  --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-deep);\n  --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-deep);\n  --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-muted);\n  --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-deep);\n  --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-muted);\n  --dataviz-generic-red-border: var(--mode-color-colorcode-red-deep);\n  --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-deep);\n  --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-deep);\n  --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-muted);\n  --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-deep);\n  --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-deep);\n  --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-deep);\n  --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-muted);\n  --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-deep);\n  --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-deep);\n  --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-deep);\n  --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-muted);\n  --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-deep);\n  --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-deep);\n  --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-deep);\n  --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-muted);\n  --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-deep);\n  --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-deep);\n  --input-calendar-bg-active: var(--mode-color-action-grayscale-active);\n  --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt);\n  --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n  --input-calendar-border-duration: var(--mode-color-action-grayscale-active);\n  --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active);\n  --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n  --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);\n  --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt);\n  --input-calendar-txt-default: var(--mode-color-action-data-entry-txt);\n  --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover);\n  --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt);\n  --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n  --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active);\n  --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt);\n  --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt);\n  --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt);\n  --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt);\n  --input-labelset-label-required: var(--mode-color-action-danger-default);\n  --input-labelset-label-default: var(--mode-color-action-data-entry-txt);\n  --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt);\n  --input-labelset-label-disabled: var(--mode-color-action-inactive-txt);\n  --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt);\n  --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default);\n  --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt);\n  --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt);\n  --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt);\n  --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --input-typical-bg-default: var(--mode-color-action-data-entry-default);\n  --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n  --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt);\n  --input-typical-border-alt: var(--mode-color-action-inactive-default);\n  --input-typical-border-default: var(--mode-color-action-data-entry-with-default);\n  --input-typical-border-disabled: var(--mode-color-action-inactive-default);\n  --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover);\n  --input-typical-border-read-only: var(--mode-color-action-inactive-default);\n  --input-typical-icon-active: var(--mode-color-action-data-entry-with-active);\n  --input-typical-icon-default: var(--mode-color-action-data-entry-txt);\n  --input-typical-icon-disabled: var(--mode-color-action-inactive-icon);\n  --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover);\n  --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt);\n  --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt);\n  --input-typical-txt-active: var(--mode-color-action-data-entry-txt);\n  --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n  --input-typical-txt-default: var(--mode-color-action-data-entry-txt);\n  --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);\n  --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);\n  --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);\n  --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);\n  --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);\n  --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);\n  --input-switch-bg-active: var(--mode-color-action-grayscale-active);\n  --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --input-switch-bg-default: var(--mode-color-action-data-entry-default);\n  --input-switch-border-active: transparent;\n  --input-switch-border-active-disabled: transparent;\n  --input-switch-border-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-border-default: var(--mode-color-action-data-entry-with-default);\n  --input-switch-fg-active: var(--mode-color-action-grayscale-with-active);\n  --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);\n  --input-switch-fg-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-fg-default: var(--mode-color-action-data-entry-with-default);\n  --input-switch-label-active: var(--mode-color-action-data-entry-txt);\n  --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-label-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);\n  --input-validation-border-error: var(--mode-color-status-negative-default);\n  --input-validation-bar-error: var(--mode-color-status-negative-default);\n  --input-validation-bar-warn: var(--mode-color-status-warning-default);\n  --input-validation-label-error: var(--mode-color-status-negative-default);\n  --input-validation-label-success: var(--mode-color-status-positive-default);\n  --input-validation-label-warn: var(--mode-color-status-warning-txt);\n  --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default);\n  --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);\n  --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);\n  --input-size-generic-min-w: 288px;\n  --logo-sage-bg-default: var(--mode-color-brand-default);\n  --logo-sage-bg-alt: var(--mode-color-brand-default-alt);\n  --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default);\n  --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt);\n  --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome);\n  --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default);\n  --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default);\n  --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default);\n  --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default);\n  --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default);\n  --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default);\n  --link-destructive-label-default: var(--mode-color-action-danger-default-alt);\n  --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);\n  --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);\n  --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);\n  --link-typical-label-default: var(--mode-color-action-main-default-alt2);\n  --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);\n  --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);\n  --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);\n  --link-subtle-label-default: var(--mode-color-action-grayscale-default);\n  --link-subtle-label-hover: var(--mode-color-action-grayscale-active);\n  --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);\n  --message-none: var(--mode-color-none);\n  --message-contextual-bg: var(--mode-color-generic-bg-nought);\n  --message-contextual-icon: var(--mode-color-generic-bg-nought);\n  --message-contextual-icon-alt: var(--mode-color-status-neutral-default);\n  --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt);\n  --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);\n  --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);\n  --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);\n  --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);\n  --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt);\n  --message-contextual-error-bg-default: var(--mode-color-status-negative-default);\n  --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);\n  --message-contextual-error-border-default: var(--mode-color-status-negative-default);\n  --message-contextual-error-icon: var(--mode-color-status-negative-default);\n  --message-contextual-info-bg-default: var(--mode-color-status-info-default);\n  --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);\n  --message-contextual-info-border-default: var(--mode-color-status-info-default);\n  --message-contextual-info-icon: var(--mode-color-status-info-default);\n  --message-contextual-success-bg-default: var(--mode-color-status-positive-default);\n  --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);\n  --message-contextual-success-border-default: var(--mode-color-status-positive-default);\n  --message-contextual-success-icon: var(--mode-color-status-positive-default);\n  --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);\n  --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);\n  --message-contextual-warning-border-default: var(--mode-color-status-warning-default);\n  --message-contextual-warning-icon: var(--mode-color-status-warning-default);\n  --message-global-label-default: var(--mode-color-status-txt-with-default-alt);\n  --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);\n  --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt);\n  --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt);\n  --message-global-info-bg-default: var(--mode-color-status-info-default-alt);\n  --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt);\n  --message-global-info-icon: var(--mode-color-status-info-default);\n  --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt);\n  --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt);\n  --message-global-warning-icon: var(--mode-color-status-warning-default);\n  --nav-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-leftnav-container-bg-default: var(--mode-color-generic-bg-inverse-nought);\n  --nav-leftnav-container-bg-default-alt: var(--mode-color-action-nav-inverse-default-alt);\n  --nav-leftnav-container-border-default: var(--mode-color-generic-fg-inverse-firm);\n  --nav-leftnav-item-bg-active: var(--mode-color-action-nav-inverse-active);\n  --nav-leftnav-item-bg-default: var(--mode-color-none);\n  --nav-leftnav-item-bg-hover: var(--mode-color-action-nav-inverse-hover);\n  --nav-leftnav-item-label-active: var(--mode-color-action-nav-inverse-with-active);\n  --nav-leftnav-item-label-default: var(--mode-color-action-nav-inverse-with-default);\n  --nav-leftnav-item-label-hover: var(--mode-color-action-nav-inverse-with-hover);\n  --nav-modal-container-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-modal-container-bg-default-alt: var(--mode-color-generic-surface-faint);\n  --nav-modal-container-border-default: var(--mode-color-generic-fg-firm);\n  --nav-modal-item-bg-active: var(--mode-color-action-nav-active);\n  --nav-modal-item-bg-default: var(--mode-color-none);\n  --nav-modal-item-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-modal-item-label-active: var(--mode-color-action-nav-with-active);\n  --nav-modal-item-label-default: var(--mode-color-action-nav-with-default);\n  --nav-modal-item-label-hover: var(--mode-color-action-nav-with-hover);\n  --nav-modal-headeritem-label-default: var(--mode-color-generic-txt-soft);\n  --nav-topnav-container-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-topnav-container-border-default: var(--mode-color-generic-fg-firm);\n  --nav-topnav-item-bg-active: var(--mode-color-action-nav-active);\n  --nav-topnav-item-bg-default: var(--mode-color-none);\n  --nav-topnav-item-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-topnav-item-label-active: var(--mode-color-action-nav-with-active);\n  --nav-topnav-item-label-default: var(--mode-color-action-nav-with-default);\n  --nav-topnav-item-label-hover: var(--mode-color-action-nav-with-hover);\n  --page-bg-default: var(--mode-color-generic-surface-nought);\n  --page-bg-alt: var(--mode-color-generic-surface-faint);\n  --page-txt-alt: var(--mode-color-generic-txt-moderate);\n  --page-txt-default: var(--mode-color-generic-txt-severe);\n  --popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);\n  --popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);\n  --popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);\n  --popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);\n  --popover-size-menu-maxwidth-m: var(--container-size-fluid-items-l);\n  --popover-size-menu-maxwidth-l: var(--container-size-fluid-items-xl);\n  --popover-bg-active: var(--mode-color-action-grayscale-active);\n  --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt);\n  --popover-bg-default: var(--mode-color-generic-bg-nought);\n  --popover-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --popover-label-active: var(--mode-color-action-grayscale-with-active);\n  --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n  --popover-label-disabled: var(--mode-color-action-inactive-txt);\n  --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n  --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n  --profile-size-outside-xs: var(--global-size-xs);\n  --profile-size-outside-s: var(--global-size-s);\n  --profile-size-outside-m: var(--global-size-m);\n  --profile-size-outside-ml: 56px;\n  --profile-size-outside-l: var(--global-size-4-xl);\n  --profile-size-outside-xl: 104px;\n  --profile-size-outside-xxl: 128px;\n  --profile-size-inside-xs: var(--global-size-3-xs);\n  --profile-size-inside-s: var(--global-size-2-xs);\n  --profile-size-inside-m: var(--global-size-xs);\n  --profile-size-inside-ml: var(--global-size-s);\n  --profile-size-inside-l: var(--global-size-l);\n  --profile-size-inside-xl: var(--global-size-2-xl);\n  --profile-size-inside-xxl: var(--global-size-4-xl);\n  --profile-bg-alt: var(--mode-color-generic-txt-severe);\n  --profile-bg-def: var(--mode-color-generic-bg-nought);\n  --profile-border-default: var(--mode-color-generic-fg-moderate);\n  --profile-label-default: var(--mode-color-generic-txt-severe);\n  --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n  --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n  --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n  --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n  --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n  --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n  --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n  --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n  --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n  --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n  --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n  --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n  --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n  --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n  --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n  --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n  --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n  --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n  --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n  --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n  --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n  --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n  --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n  --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n  --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n  --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n  --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n  --profile-font-def-xs: var(--global-font-static-comp-regular-s);\n  --profile-font-def-s: var(--global-font-static-comp-regular-m);\n  --profile-font-def-m: var(--global-font-static-comp-regular-m);\n  --profile-font-def-ml: var(--global-font-static-comp-regular-m);\n  --profile-font-def-l: var(--global-font-static-comp-regular-l);\n  --profile-font-def-xl: var(--global-font-static-comp-regular-l);\n  --profile-font-def-xxl: var(--global-font-static-comp-regular-l);\n  --profile-font-heading-xs: var(--global-font-static-comp-medium-s);\n  --profile-font-heading-s: var(--global-font-static-comp-medium-m);\n  --profile-font-heading-m: var(--global-font-static-subheading-l);\n  --profile-font-heading-ml: var(--global-font-static-subheading-l);\n  --profile-font-heading-l: var(--global-font-static-subheading-l);\n  --profile-font-heading-xl: var(--global-font-static-heading-m);\n  --profile-font-heading-xxl: var(--global-font-static-heading-l);\n  --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs);\n  --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s);\n  --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m);\n  --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml);\n  --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l);\n  --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl);\n  --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl);\n  --profile-font-fluid-def-xs: var(--global-font-fluid-comp-regular-s);\n  --profile-font-fluid-def-s: var(--global-font-fluid-comp-regular-m);\n  --profile-font-fluid-def-m: var(--global-font-fluid-comp-regular-m);\n  --profile-font-fluid-def-ml: var(--global-font-fluid-comp-regular-m);\n  --profile-font-fluid-def-l: var(--global-font-fluid-comp-regular-l);\n  --profile-font-fluid-def-xl: var(--global-font-fluid-comp-regular-l);\n  --profile-font-fluid-def-xxl: var(--global-font-fluid-comp-regular-l);\n  --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s);\n  --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m);\n  --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l);\n  --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l);\n  --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l);\n  --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m);\n  --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l);\n  --progress-none: var(--mode-color-none);\n  --progress-bg-default: var(--mode-color-generic-bg-delicate);\n  --progress-border-default: var(--mode-color-generic-fg-firm);\n  --progress-fg-alt: var(--mode-color-status-positive-default);\n  --progress-fg-alt2: var(--mode-color-generic-txt-soft);\n  --progress-fg-caution: var(--mode-color-status-warning-default);\n  --progress-fg-default: var(--mode-color-action-grayscale-active);\n  --progress-fg-error: var(--mode-color-status-negative-default);\n  --progress-fg-info: var(--mode-color-status-info-default);\n  --progress-label-alt: var(--mode-color-generic-txt-moderate);\n  --progress-label-default: var(--mode-color-generic-txt-severe);\n  --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);\n  --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft);\n  --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);\n  --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);\n  --progress-loader-fg-default: var(--mode-color-generic-fg-extreme);\n  --progress-loader-fg-ai: var(--mode-color-status-ai-default-horizontal);\n  --progress-loader-fg-error: var(--mode-color-status-negative-default);\n  --progress-loader-fg-complete: var(--mode-color-status-positive-default);\n  --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);\n  --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-inverse-extreme);\n  --progress-loader-inverse-fg-ai: var(--mode-color-status-ai-inverse-default-horizontal);\n  --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active);\n  --progress-stepflow-bg-complete: var(--mode-color-status-positive-default);\n  --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought);\n  --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought);\n  --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active);\n  --progress-stepflow-border-default: var(--mode-color-generic-fg-firm);\n  --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft);\n  --progress-stepflow-label-default: var(--mode-color-generic-txt-severe);\n  --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active);\n  --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default);\n  --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active);\n  --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm);\n  --progress-stepindicator-border-success: var(--mode-color-status-positive-default);\n  --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active);\n  --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active);\n  --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe);\n  --pill-generic-none: var(--mode-color-none);\n  --pill-generic-label-default: var(--mode-color-status-txt-with-default);\n  --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);\n  --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);\n  --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);\n  --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);\n  --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover);\n  --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt);\n  --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);\n  --pill-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default);\n  --pill-swatches-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n  --pill-swatches-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n  --pill-swatches-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n  --pill-swatches-teal-border-default: var(--mode-color-status-custom-teal-default);\n  --pill-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default);\n  --pill-swatches-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n  --pill-swatches-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n  --pill-swatches-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n  --pill-swatches-lime-border-default: var(--mode-color-status-custom-lime-default);\n  --pill-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default);\n  --pill-swatches-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n  --pill-swatches-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n  --pill-swatches-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n  --pill-swatches-pink-border-default: var(--mode-color-status-custom-pink-default);\n  --pill-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default);\n  --pill-swatches-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n  --pill-swatches-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n  --pill-swatches-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n  --pill-swatches-slate-border-default: var(--mode-color-status-custom-slate-default);\n  --pill-swatches-orange-bg-default: var(--mode-color-status-warning-default);\n  --pill-swatches-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n  --pill-swatches-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n  --pill-swatches-orange-bg-hover: var(--mode-color-status-warning-hover);\n  --pill-swatches-orange-border-default: var(--mode-color-status-warning-default);\n  --pill-swatches-red-bg-default: var(--mode-color-status-negative-default);\n  --pill-swatches-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n  --pill-swatches-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n  --pill-swatches-red-bg-hover: var(--mode-color-status-negative-hover);\n  --pill-swatches-red-border-default: var(--mode-color-status-negative-default);\n  --pill-swatches-gray-bg-default: var(--mode-color-status-neutral-default);\n  --pill-swatches-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n  --pill-swatches-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n  --pill-swatches-gray-bg-hover: var(--mode-color-status-neutral-hover);\n  --pill-swatches-gray-border-default: var(--mode-color-status-neutral-default);\n  --pill-swatches-purple-bg-default: var(--mode-color-status-priority-default);\n  --pill-swatches-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n  --pill-swatches-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n  --pill-swatches-purple-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-swatches-purple-border-default: var(--mode-color-status-priority-default);\n  --pill-swatches-green-bg-default: var(--mode-color-status-positive-default);\n  --pill-swatches-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n  --pill-swatches-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n  --pill-swatches-green-bg-hover: var(--mode-color-status-positive-hover);\n  --pill-swatches-green-border-default: var(--mode-color-status-positive-default);\n  --pill-swatches-blue-bg-default: var(--mode-color-status-info-default);\n  --pill-swatches-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n  --pill-swatches-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n  --pill-swatches-blue-bg-hover: var(--mode-color-status-info-hover);\n  --pill-swatches-blue-border-default: var(--mode-color-status-info-default);\n  --pill-error-bg-default: var(--mode-color-status-negative-default);\n  --pill-error-bg-alt-default: var(--mode-color-status-negative-default-alt);\n  --pill-error-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n  --pill-error-bg-hover: var(--mode-color-status-negative-hover);\n  --pill-error-border-default: var(--mode-color-status-negative-default);\n  --pill-error-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n  --pill-error-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n  --pill-error-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n  --pill-error-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n  --pill-error-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n  --pill-priority-bg-default: var(--mode-color-status-priority-default);\n  --pill-priority-bg-alt-default: var(--mode-color-status-priority-default-alt);\n  --pill-priority-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n  --pill-priority-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-priority-border-default: var(--mode-color-status-priority-default);\n  --pill-priority-inverse-bg-default: var(--mode-color-status-priority-default);\n  --pill-priority-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n  --pill-priority-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n  --pill-priority-inverse-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-priority-inverse-border-default: var(--mode-color-status-priority-default);\n  --pill-info-bg-default: var(--mode-color-status-info-default);\n  --pill-info-bg-alt-default: var(--mode-color-status-info-default-alt);\n  --pill-info-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n  --pill-info-bg-hover: var(--mode-color-status-info-hover);\n  --pill-info-border-default: var(--mode-color-status-info-default);\n  --pill-info-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n  --pill-info-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n  --pill-info-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n  --pill-info-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n  --pill-info-inverse-border-default: var(--mode-color-status-info-inverse-default);\n  --pill-neutral-bg-default: var(--mode-color-status-neutral-default);\n  --pill-neutral-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n  --pill-neutral-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n  --pill-neutral-bg-hover: var(--mode-color-status-neutral-hover);\n  --pill-neutral-border-default: var(--mode-color-status-neutral-default);\n  --pill-neutral-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-neutral-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n  --pill-neutral-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n  --pill-neutral-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n  --pill-neutral-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-readonly-bg-default: var(--mode-color-status-inactive-default);\n  --pill-readonly-border-default: var(--mode-color-status-inactive-default);\n  --pill-readonly-label: var(--mode-color-generic-txt-soft);\n  --pill-positive-bg-default: var(--mode-color-status-positive-default);\n  --pill-positive-bg-alt-default: var(--mode-color-status-positive-default-alt);\n  --pill-positive-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n  --pill-positive-bg-hover: var(--mode-color-status-positive-hover);\n  --pill-positive-border-default: var(--mode-color-status-positive-default);\n  --pill-positive-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n  --pill-positive-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n  --pill-positive-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n  --pill-positive-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n  --pill-positive-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n  --pill-warn-bg-default: var(--mode-color-status-warning-default);\n  --pill-warn-bg-alt-default: var(--mode-color-status-warning-default-alt);\n  --pill-warn-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n  --pill-warn-bg-hover: var(--mode-color-status-warning-hover);\n  --pill-warn-border-default: var(--mode-color-status-warning-default);\n  --pill-warn-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n  --pill-warn-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n  --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n  --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n  --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n  --tab-bg-active: var(--mode-color-action-grayscale-with-active);\n  --tab-bg-default: var(--mode-color-none);\n  --tab-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n  --tab-border-active: var(--mode-color-action-grayscale-active);\n  --tab-border-default: var(--mode-color-generic-fg-moderate);\n  --tab-border-hover: var(--mode-color-generic-fg-firm);\n  --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n  --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n  --tab-label-active: var(--mode-color-action-grayscale-active);\n  --tab-icon-active: var(--mode-color-action-grayscale-active);\n  --tab-label-default: var(--mode-color-action-grayscale-default);\n  --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n  --tab-validation-border-warning: var(--mode-color-status-warning-default);\n  --tab-validation-border-error: var(--mode-color-status-negative-default);\n  --tab-validation-icon-error: var(--mode-color-status-negative-default);\n  --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n  --tab-validation-label-error: var(--mode-color-status-negative-default);\n  --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n  --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n  --table-header-subtle-bg-default: var(--mode-color-none);\n  --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n  --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n  --table-header-harsh-bg-alt: var(--mode-color-action-grayscale-default);\n  --table-header-harsh-bg-default: var(--mode-color-action-grayscale-default-alt);\n  --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n  --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n  --table-row-bg-default: var(--mode-color-generic-bg-nought);\n  --table-row-bg-alt: var(--mode-color-generic-bg-faint);\n  --table-row-bg-alt2: var(--mode-color-generic-bg-soft);\n  --table-row-bg-alt3: var(--mode-color-generic-bg-faint);\n  --table-row-bg-selected: var(--mode-color-generic-bg-moderate);\n  --table-row-border-default: var(--mode-color-generic-fg-soft);\n  --table-row-label-default: var(--mode-color-generic-txt-severe);\n  --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n  --table-footer-bg-default: var(--mode-color-generic-bg-moderate);\n  --table-footer-border-default: var(--mode-color-generic-fg-moderate);\n  --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";
+declare const _default: "\n  --global-borderwidth-none: 0;\n  --global-borderwidth-xs: 1px;\n  --global-borderwidth-s: 2px;\n  --global-borderwidth-m: 3px;\n  --global-borderwidth-l: 4px;\n  --global-borderwidth-xl: 6px;\n  --global-borderwidth-xxl: 8px;\n  --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n  --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;\n  --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;\n  --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n  --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;\n  --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;\n  --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;\n  --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n  --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n  --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n  --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;\n  --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-comp-icon-s: 20px sage-icons;\n  --global-font-fluid-comp-icon-m: 20px sage-icons;\n  --global-font-fluid-comp-icon-l: 20px sage-icons;\n  --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;\n  --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;\n  --global-font-static-heading-s: 500 21px/1.25 Sage UI;\n  --global-font-static-heading-m: 700 24px/1.25 Sage UI;\n  --global-font-static-heading-l: 700 30px/1.25 Sage UI;\n  --global-font-static-subheading-m: 500 16px/1.25 Sage UI;\n  --global-font-static-subheading-l: 500 18px/1.25 Sage UI;\n  --global-font-static-section-heading-s: 700 16px/1.25 Sage UI;\n  --global-font-static-section-heading-m: 700 21px/1.25 Sage UI;\n  --global-font-static-body-regular-s: 400 14px/1.5 Sage UI;\n  --global-font-static-body-regular-m: 400 14px/1.5 Sage UI;\n  --global-font-static-body-regular-l: 400 16px/1.5 Sage UI;\n  --global-font-static-body-medium-s: 500 14px/1.5 Sage UI;\n  --global-font-static-body-medium-m: 500 14px/1.5 Sage UI;\n  --global-font-static-body-medium-l: 500 16px/1.5 Sage UI;\n  --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;\n  --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;\n  --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;\n  --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;\n  --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;\n  --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;\n  --global-font-static-comp-icon-s: 20px sage-icons;\n  --global-font-static-comp-icon-m: 20px sage-icons;\n  --global-font-static-comp-icon-l: 20px sage-icons;\n  --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;\n  --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;\n  --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;\n  --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;\n  --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;\n  --global-modifier-button-active: 0.30;\n  --global-modifier-button-active-alt: 0.15;\n  --global-modifier-button-hover: 0.15;\n  --global-modifier-button-hover-alt: 0.10;\n  --global-modifier-input-disabled-fg: 0.3;\n  --global-modifier-input-disabled-bg: 0.05;\n  --global-radius-none: 0;\n  --global-radius-container3xs: 1px;\n  --global-radius-container2xs: 2px;\n  --global-radius-container-xs: 4px;\n  --global-radius-container-s: 6px;\n  --global-radius-container-m: 8px;\n  --global-radius-container-l: 16px;\n  --global-radius-container-xl: 24px;\n  --global-radius-container2xl: 32px;\n  --global-radius-container3xl: 40px;\n  --global-radius-container4xl: 80px;\n  --global-radius-container-circle: 999px;\n  --global-radius-action2xs: 1px;\n  --global-radius-action-xs: 2px;\n  --global-radius-action-s: 4px;\n  --global-radius-action-m: 8px;\n  --global-radius-action-l: 16px;\n  --global-radius-action-xl: 20px;\n  --global-radius-action2xl: 24px;\n  --global-radius-action-circle: 999px;\n  --global-depth-none: dropShadow 0 0 0 0 rgba(0,0,0,0);\n  --global-depth-lvl1: dropShadow 0 1px 2px 0 #0000001A, dropShadow 2px 2px 10px 0 #00000033;\n  --global-depth-lvl2: dropShadow 0 2px 3px 0 #0000001A, dropShadow 6px 6px 30px 0 #00000026;\n  --global-depth-lvl3: dropShadow 0 3px 4px 0 #0000001A, dropShadow 10px 10px 60px 0 #0000001A;\n  --global-depth-sticky-b: dropShadow 0 -1px 2px 0 #0000001A, dropShadow 2px -2px 10px 0 #00000033;\n  --global-depth-sticky-l: dropShadow -2px 0 2px 0 #0000001A, dropShadow -5px 0 5px 0 #0000001A;\n  --global-depth-sticky-r: dropShadow 2px 0 2px 0 #0000001A, dropShadow 5px 0 5px 0 #0000001A;\n  --global-size-none: 0px;\n  --global-size6xs: 2px;\n  --global-size5xs: 4px;\n  --global-size4xs: 8px;\n  --global-size3xs: 16px;\n  --global-size2xs: 20px;\n  --global-size-xs: 24px;\n  --global-size-s: 32px;\n  --global-size-m: 40px;\n  --global-size-l: 48px;\n  --global-size-xl: 56px;\n  --global-size2xl: 64px;\n  --global-size3xl: 72px;\n  --global-size4xl: 80px;\n  --global-space-none: 0px;\n  --global-space-layout3xs: 8px;\n  --global-space-layout2xs: 16px;\n  --global-space-layout-xs: 24px;\n  --global-space-layout-s: 32px;\n  --global-space-layout-m: 40px;\n  --global-space-layout-l: 48px;\n  --global-space-layout-xl: 56px;\n  --global-space-layout2xl: 64px;\n  --global-space-layout3xl: 72px;\n  --global-space-layout4xl: 80px;\n  --global-space-comp2xs: 2px;\n  --global-space-comp-xs: 4px;\n  --global-space-comp-s: 8px;\n  --global-space-comp-m: 12px;\n  --global-space-comp-l: 16px;\n  --global-space-comp-xl: 24px;\n  --global-space-comp2xl: 32px;\n  --mode-color-none: #fff0;\n  --mode-color-ai-stop1: #13a038;\n  --mode-color-ai-stop2: #149197;\n  --mode-color-ai-stop3: #a87cfb;\n  --mode-color-ai-alt-stop1: #00d639;\n  --mode-color-ai-alt-stop2: #00d6de;\n  --mode-color-ai-alt-stop3: #9d60ff;\n  --mode-color-brand-default: #000000;\n  --mode-color-brand-default-alt: #000000;\n  --mode-color-brand-with-default-alt: #FFFFFF;\n  --mode-color-brand-inverse-default: #00d639;\n  --mode-color-brand-inverse-default-alt: #FFFFFF;\n  --mode-color-brand-inverse-with-default-alt: #000000;\n  --mode-color-brand-copilot-default: #000000;\n  --mode-color-brand-copilot-monochrome: #000000;\n  --mode-color-brand-copilot-with-default: #00d639;\n  --mode-color-brand-copilot-inverse-default: #FFFFFF;\n  --mode-color-brand-copilot-inverse-monochrome: #FFFFFF;\n  --mode-color-brand-copilot-inverse-with-default: #00d639;\n  --mode-color-colorcode-blue-deep: #0071c3;\n  --mode-color-colorcode-blue-muted: #e4eeff;\n  --mode-color-colorcode-teal-deep: #007C7B;\n  --mode-color-colorcode-teal-muted: #C8F5F5;\n  --mode-color-colorcode-green-deep: #00811F;\n  --mode-color-colorcode-green-muted: #D1F6D6;\n  --mode-color-colorcode-lime-deep: #627600;\n  --mode-color-colorcode-lime-muted: #e8f1d4;\n  --mode-color-colorcode-orange-deep: #d64309;\n  --mode-color-colorcode-orange-muted: #ffeaca;\n  --mode-color-colorcode-red-deep: #db004e;\n  --mode-color-colorcode-red-muted: #ffe8ea;\n  --mode-color-colorcode-pink-deep: #c72699;\n  --mode-color-colorcode-pink-muted: #fee8f5;\n  --mode-color-colorcode-purple-deep: #8f4bd7;\n  --mode-color-colorcode-purple-muted: #F3EBFE;\n  --mode-color-colorcode-slate-deep: #527386;\n  --mode-color-colorcode-slate-muted: #e4eff5;\n  --mode-color-colorcode-gray-deep: #6f6f6f;\n  --mode-color-colorcode-gray-muted: #eeeeee;\n  --mode-color-generic-bg-nought: #FFFFFF;\n  --mode-color-generic-bg-faint: #f4f5f6;\n  --mode-color-generic-bg-delicate: #e8eaec;\n  --mode-color-generic-bg-soft: #dde0e3;\n  --mode-color-generic-bg-moderate: #d1d6da;\n  --mode-color-generic-bg-firm: #c6ccd1;\n  --mode-color-generic-bg-harsh: #bac1c7;\n  --mode-color-generic-bg-severe: #afb7be;\n  --mode-color-generic-bg-extreme: #000000;\n  --mode-color-generic-bg-inverse-nought: #000000;\n  --mode-color-generic-bg-inverse-faint: #ffffff0d;\n  --mode-color-generic-bg-inverse-delicate: #ffffff1a;\n  --mode-color-generic-bg-inverse-soft: #ffffff26;\n  --mode-color-generic-bg-inverse-moderate: #fff3;\n  --mode-color-generic-bg-inverse-firm: #ffffff40;\n  --mode-color-generic-bg-inverse-harsh: #ffffff4d;\n  --mode-color-generic-bg-inverse-severe: #ffffff59;\n  --mode-color-generic-bg-inverse-extreme: #FFFFFF;\n  --mode-color-generic-txt-extreme: #000000;\n  --mode-color-generic-txt-severe: #000000f2;\n  --mode-color-generic-txt-moderate: #000000a6;\n  --mode-color-generic-txt-soft: #0000008c;\n  --mode-color-generic-txt-delicate: #0000006b;\n  --mode-color-generic-txt-faint: #0000004d;\n  --mode-color-generic-txt-nought: #FFFFFF;\n  --mode-color-generic-txt-inverse-extreme: #FFFFFF;\n  --mode-color-generic-txt-inverse-severe: #fffffff2;\n  --mode-color-generic-txt-inverse-moderate: #ffffffab;\n  --mode-color-generic-txt-inverse-soft: #ffffff8c;\n  --mode-color-generic-txt-inverse-delicate: #ffffff6b;\n  --mode-color-generic-txt-inverse-faint: #ffffff4d;\n  --mode-color-generic-txt-inverse-faint-copy: #ffffff4d;\n  --mode-color-generic-txt-inverse-nought: #000000;\n  --mode-color-generic-fg-nought: #FFFFFF;\n  --mode-color-generic-fg-delicate: #e8eaec;\n  --mode-color-generic-fg-soft: #a3adb5;\n  --mode-color-generic-fg-moderate: #8c98a2;\n  --mode-color-generic-fg-firm: #75838f;\n  --mode-color-generic-fg-extreme: #000000;\n  --mode-color-generic-fg-inverse-nought: #000000;\n  --mode-color-generic-fg-inverse-delicate: #181818;\n  --mode-color-generic-fg-inverse-soft: #505050;\n  --mode-color-generic-fg-inverse-moderate: #616161;\n  --mode-color-generic-fg-inverse-firm: #6f6f6f;\n  --mode-color-generic-fg-inverse-extreme: #FFFFFF;\n  --mode-color-generic-surface-nought: #FFFFFF;\n  --mode-color-generic-surface-faint: #f4f5f6;\n  --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);\n  --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);\n  --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%);\n  --mode-color-action-ai-active-stop1: #13a03826;\n  --mode-color-action-ai-active-stop2: #14919726;\n  --mode-color-action-ai-active-stop3: #a87cfb26;\n  --mode-color-action-ai-hover-stop1: #13a03814;\n  --mode-color-action-ai-hover-stop2: #14919714;\n  --mode-color-action-ai-hover-stop3: #a87cfb14;\n  --mode-color-action-danger-active: #a30037;\n  --mode-color-action-danger-default: #db004e;\n  --mode-color-action-danger-default-alt: #c40044;\n  --mode-color-action-danger-hover: #c40044;\n  --mode-color-action-danger-hover-alt: #db004e26;\n  --mode-color-action-danger-hover-alt2: #a30037;\n  --mode-color-action-danger-with-active: #FFFFFF;\n  --mode-color-action-danger-with-default: #FFFFFF;\n  --mode-color-action-danger-inverse-active: #ff728d;\n  --mode-color-action-danger-inverse-default: #f50059;\n  --mode-color-action-danger-inverse-default-alt: #ff3e6a;\n  --mode-color-action-danger-inverse-hover: #ff3e6a;\n  --mode-color-action-danger-inverse-hover-alt: #f5005926;\n  --mode-color-action-danger-inverse-hover-alt2: #ff728d;\n  --mode-color-action-danger-inverse-with-active: #000000;\n  --mode-color-action-danger-inverse-with-default: #000000;\n  --mode-color-action-data-entry-default: #FFFFFF;\n  --mode-color-action-data-entry-with-active: #000000;\n  --mode-color-action-data-entry-with-active-alt: #FFFFFF;\n  --mode-color-action-data-entry-with-hover: #000000;\n  --mode-color-action-data-entry-hover-alt: #f4f5f6;\n  --mode-color-action-data-entry-with-default: #75838f;\n  --mode-color-action-data-entry-default-alt: #e8eaec;\n  --mode-color-action-data-entry-txt: #000000f2;\n  --mode-color-action-data-entry-txt-alt: #0000008c;\n  --mode-color-action-data-entry-inverse-default: #000000;\n  --mode-color-action-data-entry-inverse-with-default: #a3adb5;\n  --mode-color-action-data-entry-inverse-txt: #fffffff2;\n  --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c;\n  --mode-color-action-focus-default: #000000;\n  --mode-color-action-focus-txt: #000000;\n  --mode-color-action-focus-with-default: #FFB500;\n  --mode-color-action-focus-with-default-alt: #ffd274;\n  --mode-color-action-focus-inverse-default: #FFB500;\n  --mode-color-action-focus-inverse-txt: #FFFFFF;\n  --mode-color-action-focus-inverse-with-default: #000000;\n  --mode-color-action-focus-inverse-with-default-alt: #885e00;\n  --mode-color-action-inactive-default: #0000004d;\n  --mode-color-action-inactive-mask: #0006;\n  --mode-color-action-inactive-default-alt: #eeeeee;\n  --mode-color-action-inactive-txt: #0000006b;\n  --mode-color-action-inactive-txt-alt: #FFFFFF;\n  --mode-color-action-inactive-icon: #0000006b;\n  --mode-color-action-inactive-icon-alt: #0000008c;\n  --mode-color-action-inactive-inverse-default: #ffffff4d;\n  --mode-color-action-inactive-inverse-txt: #ffffff6b;\n  --mode-color-action-inactive-inverse-txt-alt: #000000;\n  --mode-color-action-grayscale-active: #000000;\n  --mode-color-action-grayscale-active-alt: #00000026;\n  --mode-color-action-grayscale-default: #000000e6;\n  --mode-color-action-grayscale-default-alt: #000000ab;\n  --mode-color-action-grayscale-hover-alt: #0000001a;\n  --mode-color-action-grayscale-hover: #00000026;\n  --mode-color-action-grayscale-with-active: #FFFFFF;\n  --mode-color-action-grayscale-with-active-alt: #000000;\n  --mode-color-action-grayscale-with-default: #FFFFFF;\n  --mode-color-action-grayscale-with-hover: #000000;\n  --mode-color-action-grayscale-inverse-active: #FFFFFF;\n  --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n  --mode-color-action-grayscale-inverse-default: #ffffffe6;\n  --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n  --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n  --mode-color-action-grayscale-inverse-hover: #ffffff26;\n  --mode-color-action-grayscale-inverse-with-active: #000000;\n  --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n  --mode-color-action-grayscale-inverse-with-default: #000000;\n  --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n  --mode-color-action-nav-active: #253b4e26;\n  --mode-color-action-nav-default: #FFFFFF;\n  --mode-color-action-nav-default-alt: #f4f5f6;\n  --mode-color-action-nav-hover: #253b4e1a;\n  --mode-color-action-nav-with-active: #000000;\n  --mode-color-action-nav-with-default: #000000f2;\n  --mode-color-action-nav-with-hover: #000000;\n  --mode-color-action-nav-inverse-active: #ffffff26;\n  --mode-color-action-nav-inverse-default: #000000;\n  --mode-color-action-nav-inverse-default-alt: #0b0b0b;\n  --mode-color-action-nav-inverse-hover: #ffffff1a;\n  --mode-color-action-nav-inverse-with-active: #FFFFFF;\n  --mode-color-action-nav-inverse-with-default: #fffffff2;\n  --mode-color-action-nav-inverse-with-hover: #FFFFFF;\n  --mode-color-action-main-active: #005e14;\n  --mode-color-action-main-active-alt: #00811f4d;\n  --mode-color-action-main-default: #00811f;\n  --mode-color-action-main-default-alt: #00811fcc;\n  --mode-color-action-main-default-alt2: #007219;\n  --mode-color-action-main-default-alt3: #00811f08;\n  --mode-color-action-main-hover: #007219;\n  --mode-color-action-main-hover-alt: #00811f26;\n  --mode-color-action-main-hover-alt2: #005e14;\n  --mode-color-action-main-with-active: #FFFFFF;\n  --mode-color-action-main-with-default: #FFFFFF;\n  --mode-color-action-main-with-hover: #FFFFFF;\n  --mode-color-action-main-inverse-active: #8fff98;\n  --mode-color-action-main-inverse-active-alt: #00f1424d;\n  --mode-color-action-main-inverse-default: #00f142;\n  --mode-color-action-main-inverse-default-alt: #00f142cc;\n  --mode-color-action-main-inverse-default-alt2: #46fb5e;\n  --mode-color-action-main-inverse-default-alt3: #00f14208;\n  --mode-color-action-main-inverse-hover: #46fb5e;\n  --mode-color-action-main-inverse-hover-alt: #00f14226;\n  --mode-color-action-main-inverse-hover-alt2: #8fff98;\n  --mode-color-action-main-inverse-with-active: #000000;\n  --mode-color-action-main-inverse-with-default: #000000;\n  --mode-color-action-main-inverse-with-hover: #000000;\n  --mode-color-status-ai-default: #FFFFFF;\n  --mode-color-status-ai-default-alt: #000000;\n  --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%);\n  --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038  0%, #149197 40%, #a87cfb 90%);\n  --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);\n  --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);\n  --mode-color-status-callout-default-alt: #e0ffe2;\n  --mode-color-status-callout-hover-alt: #b7ffbd;\n  --mode-color-status-skeleton-stop1: #75838f;\n  --mode-color-status-skeleton-stop2: #d1d6da;\n  --mode-color-status-warning-default: #d64309;\n  --mode-color-status-warning-default-alt: #fff7eb;\n  --mode-color-status-warning-hover: #b33400;\n  --mode-color-status-warning-hover-alt: #ffeaca;\n  --mode-color-status-warning-txt: #b33400;\n  --mode-color-status-warning-inverse-default: #e24300;\n  --mode-color-status-warning-inverse-default-alt: #1d0300;\n  --mode-color-status-warning-inverse-hover: #e5631c;\n  --mode-color-status-warning-inverse-hover-alt: #360900;\n  --mode-color-status-warning-inverse-txt: #e5631c;\n  --mode-color-status-txt-with-default: #FFFFFF;\n  --mode-color-status-txt-with-default-alt: #000000f2;\n  --mode-color-status-txt-with-hover: #FFFFFF;\n  --mode-color-status-txt-with-hover-alt: #000000;\n  --mode-color-status-txt-loading: #747474;\n  --mode-color-status-txt-inverse-with-default: #000000;\n  --mode-color-status-txt-inverse-with-default-alt: #fffffff2;\n  --mode-color-status-txt-inverse-with-hover: #000000;\n  --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;\n  --mode-color-status-custom-blue-default: #0071c3;\n  --mode-color-status-custom-blue-default-alt: #f5f8ff;\n  --mode-color-status-custom-blue-hover: #0063ad;\n  --mode-color-status-custom-blue-hover-alt: #e4eeff;\n  --mode-color-status-custom-teal-default: #007C7B;\n  --mode-color-status-custom-teal-default-alt: #E8FCFC;\n  --mode-color-status-custom-teal-hover: #006D6C;\n  --mode-color-status-custom-teal-hover-alt: #C8F5F5;\n  --mode-color-status-custom-green-default: #00811F;\n  --mode-color-status-custom-green-default-alt: #EEFCEF;\n  --mode-color-status-custom-green-hover: #007219;\n  --mode-color-status-custom-green-hover-alt: #D1F6D6;\n  --mode-color-status-custom-lime-default: #627600;\n  --mode-color-status-custom-lime-default-alt: #f6f9f0;\n  --mode-color-status-custom-lime-hover: #576900;\n  --mode-color-status-custom-lime-hover-alt: #e8f1d4;\n  --mode-color-status-custom-orange-default: #d64309;\n  --mode-color-status-custom-orange-default-alt: #fff7eb;\n  --mode-color-status-custom-orange-hover: #b33400;\n  --mode-color-status-custom-orange-hover-alt: #ffeaca;\n  --mode-color-status-custom-orange-txt: #b33400;\n  --mode-color-status-custom-red-default: #db004e;\n  --mode-color-status-custom-red-default-alt: #fff5f6;\n  --mode-color-status-custom-red-hover: #c40044;\n  --mode-color-status-custom-red-hover-alt: #ffe8ea;\n  --mode-color-status-custom-pink-default: #c72699;\n  --mode-color-status-custom-pink-default-alt: #fff5fa;\n  --mode-color-status-custom-pink-hover: #b02086;\n  --mode-color-status-custom-pink-hover-alt: #fee8f5;\n  --mode-color-status-custom-purple-default: #8f4bd7;\n  --mode-color-status-custom-purple-default-alt: #f9f6ff;\n  --mode-color-status-custom-purple-hover: #803ec5;\n  --mode-color-status-custom-purple-hover-alt: #F3EBFE;\n  --mode-color-status-custom-gray-default: #6f6f6f;\n  --mode-color-status-custom-gray-default-alt: #f8f8f8;\n  --mode-color-status-custom-gray-hover: #616161;\n  --mode-color-status-custom-gray-hover-alt: #eeeeee;\n  --mode-color-status-custom-slate-default: #536574;\n  --mode-color-status-custom-slate-default-alt: #f4f5f6;\n  --mode-color-status-custom-slate-hover: #475a6a;\n  --mode-color-status-custom-slate-hover-alt: #e8eaec;\n  --mode-color-status-priority-default: #8f4bd7;\n  --mode-color-status-priority-default-alt: #f9f6ff;\n  --mode-color-status-priority-hover: #803ec5;\n  --mode-color-status-priority-hover-alt: #F3EBFE;\n  --mode-color-status-priority-inverse-default: #9463d7;\n  --mode-color-status-priority-inverse-default-alt: #10041f;\n  --mode-color-status-priority-inverse-hover: #a375dd;\n  --mode-color-status-priority-inverse-hover-alt: #220c3a;\n  --mode-color-status-inactive-default: #75838f;\n  --mode-color-status-inactive-with-default: #0000008c;\n  --mode-color-status-inactive-inverse-default: #6f6f6f;\n  --mode-color-status-inactive-inverse-with-default: #ffffff8c;\n  --mode-color-status-info-default: #0071c3;\n  --mode-color-status-info-default-alt: #f5f8ff;\n  --mode-color-status-info-hover: #0063ad;\n  --mode-color-status-info-hover-alt: #e4eeff;\n  --mode-color-status-info-inverse-default: #007fd9;\n  --mode-color-status-info-inverse-default-alt: #000b1c;\n  --mode-color-status-info-inverse-hover: #008ef4;\n  --mode-color-status-info-inverse-hover-alt: #001932;\n  --mode-color-status-negative-default: #db004e;\n  --mode-color-status-negative-default-alt: #fff5f6;\n  --mode-color-status-negative-hover: #c40044;\n  --mode-color-status-negative-hover-alt: #ffe8ea;\n  --mode-color-status-negative-inverse-default: #f50059;\n  --mode-color-status-negative-inverse-default-alt: #1e0005;\n  --mode-color-status-negative-inverse-hover: #ff3e6a;\n  --mode-color-status-negative-inverse-hover-alt: #3c000f;\n  --mode-color-status-neutral-default: #6f6f6f;\n  --mode-color-status-neutral-default-alt: #f8f8f8;\n  --mode-color-status-neutral-hover: #616161;\n  --mode-color-status-neutral-hover-alt: #eeeeee;\n  --mode-color-status-neutral-inverse-default: #7c7c7c;\n  --mode-color-status-neutral-inverse-default-alt: #0b0b0b;\n  --mode-color-status-neutral-inverse-hover: #8b8b8b;\n  --mode-color-status-neutral-inverse-hover-alt: #181818;\n  --mode-color-status-positive-default: #00811F;\n  --mode-color-status-positive-default-alt: #EEFCEF;\n  --mode-color-status-positive-hover: #007219;\n  --mode-color-status-positive-hover-alt: #D1F6D6;\n  --mode-color-status-positive-inverse-default: #019127;\n  --mode-color-status-positive-inverse-default-alt: #001001;\n  --mode-color-status-positive-inverse-hover: #007219;\n  --mode-color-status-positive-inverse-hover-alt: #001f03;\n  --badge-none: var(--mode-color-none);\n  --badge-bg-default: var(--mode-color-status-negative-default);\n  --badge-border-default: var(--mode-color-generic-bg-nought);\n  --badge-bg-alt: var(--mode-color-status-info-default);\n  --badge-label-default: var(--mode-color-generic-txt-inverse-extreme);\n  --badge-label-alt: var(--mode-color-generic-txt-inverse-extreme);\n  --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n  --badge-inverse-border-default: var(--mode-color-generic-bg-inverse-nought);\n  --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);\n  --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);\n  --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);\n  --button-none: var(--mode-color-none);\n  --button-ai-bg-active: var(--mode-color-action-ai-grad-active);\n  --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover);\n  --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1)  0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n  --button-ai-border-disabled: var(--mode-color-action-inactive-default);\n  --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1)  0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n  --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1)  0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n  --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-ai-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-ai-label-default: var(--mode-color-action-grayscale-default);\n  --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default);\n  --button-destructive-primary-bg-default: var(--mode-color-action-danger-default);\n  --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover);\n  --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n  --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default);\n  --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default);\n  --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt);\n  --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default);\n  --button-destructive-secondary-border-default: var(--mode-color-action-danger-default);\n  --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover);\n  --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-destructive-secondary-label-default: var(--mode-color-action-danger-default);\n  --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover);\n  --button-typical-primary-bg-active: var(--mode-color-action-main-active);\n  --button-typical-primary-border-default: var(--mode-color-action-main-with-default);\n  --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-primary-bg-default: var(--mode-color-action-main-default);\n  --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);\n  --button-typical-primary-label-active: var(--mode-color-action-main-with-active);\n  --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n  --button-typical-primary-label-default: var(--mode-color-action-main-with-default);\n  --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);\n  --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);\n  --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);\n  --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);\n  --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default);\n  --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);\n  --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);\n  --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt);\n  --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);\n  --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);\n  --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt);\n  --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3);\n  --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt);\n  --button-typical-secondary-border-active: var(--mode-color-action-main-active);\n  --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt);\n  --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);\n  --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default);\n  --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n  --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);\n  --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n  --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n  --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n  --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n  --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n  --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n  --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n  --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n  --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);\n  --button-typical-tertiary-bg-default: var(--button-none);\n  --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);\n  --button-typical-tertiary-border-active: var(--mode-color-action-main-active);\n  --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt);\n  --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover);\n  --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default);\n  --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n  --button-typical-tertiary-inverse-bg-default: var(--button-none);\n  --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n  --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n  --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n  --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n  --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n  --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n  --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n  --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n  --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);\n  --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);\n  --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);\n  --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);\n  --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n  --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n  --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n  --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);\n  --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);\n  --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);\n  --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);\n  --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);\n  --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);\n  --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default);\n  --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default);\n  --button-video-primary-label-default: var(--mode-color-action-grayscale-default);\n  --button-video-primary-label-hover: var(--mode-color-action-grayscale-default);\n  --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default);\n  --container-action-bg-footer-activated: var(--mode-color-status-positive-default);\n  --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);\n  --container-action-border-activated: var(--mode-color-status-positive-default);\n  --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);\n  --container-action-bg-default: var(--mode-color-generic-bg-nought);\n  --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --container-action-border-active: var(--mode-color-action-grayscale-active);\n  --container-action-border-alt: var(--mode-color-generic-fg-moderate);\n  --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);\n  --container-action-border-inactive: var(--mode-color-generic-fg-firm);\n  --container-action-border-default: var(--mode-color-generic-fg-firm);\n  --container-action-icon-active: var(--mode-color-action-grayscale-active);\n  --container-action-icon-default: var(--mode-color-action-grayscale-default);\n  --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);\n  --container-action-icon-hover: var(--mode-color-action-grayscale-default);\n  --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active);\n  --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active);\n  --container-action-txt-active: var(--mode-color-action-grayscale-active);\n  --container-action-txt-disabled: var(--mode-color-action-inactive-txt);\n  --container-action-txt-default: var(--mode-color-generic-txt-severe);\n  --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate);\n  --container-action-txt-hover: var(--mode-color-action-grayscale-default);\n  --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default);\n  --container-action-target-bg-default: var(--mode-color-status-info-default);\n  --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint);\n  --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm);\n  --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft);\n  --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm);\n  --container-standard-bg-alt: var(--mode-color-generic-bg-faint);\n  --container-standard-bg-default: var(--mode-color-generic-bg-nought);\n  --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint);\n  --container-standard-border-active: var(--mode-color-action-grayscale-active);\n  --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal);\n  --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);\n  --container-standard-border-alt: var(--mode-color-generic-fg-firm);\n  --container-standard-border-default: var(--mode-color-generic-fg-soft);\n  --container-standard-dimmer: var(--mode-color-action-inactive-mask);\n  --container-standard-icon: var(--mode-color-generic-fg-firm);\n  --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);\n  --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n  --container-standard-inverse-bg-alt: var(--mode-color-generic-bg-inverse-delicate);\n  --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);\n  --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);\n  --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft);\n  --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);\n  --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);\n  --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n  --container-standard-priority-bg-caution: var(--mode-color-status-warning-default);\n  --container-standard-priority-bg-negative: var(--mode-color-status-negative-default);\n  --container-standard-priority-bg-prio: var(--mode-color-status-priority-default);\n  --container-standard-priority-bg-info: var(--mode-color-status-info-default);\n  --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default);\n  --container-standard-priority-bg-positive: var(--mode-color-status-positive-default);\n  --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n  --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default);\n  --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default);\n  --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default);\n  --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default);\n  --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);\n  --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);\n  --container-quote-border: var(--mode-color-action-main-default);\n  --container-size-bubble-max-w: 600px;\n  --container-size-copilot-emptystate-illustration: 200px;\n  --container-size-copilot-emptystate-txt-max-w: 600px;\n  --container-size-copilot-overlay-max-h: 960px;\n  --container-size-dialog-max-ws: 540px;\n  --container-size-dialog-max-wm: 850px;\n  --container-size-dialog-max-wl: 1080px;\n  --container-size-dialog-min-w: 288px;\n  --container-size-empty-state-primary-s: 200px;\n  --container-size-empty-state-primary-m: 240px;\n  --container-size-empty-state-primary-l: 320px;\n  --container-size-fluid-items2xs: 80px;\n  --container-size-fluid-items-xs: 128px;\n  --container-size-fluid-items-s: 160px;\n  --container-size-fluid-items-m: 200px;\n  --container-size-fluid-items-l: 240px;\n  --container-size-fluid-items-xl: 288px;\n  --container-size-fluid-items2xl: 320px;\n  --container-size-fluid-items3xl: 560px;\n  --container-size-fluid-items4xl: 760px;\n  --container-size-sidebar-max-ws: 760px;\n  --container-size-sidebar-max-wm: 1000px;\n  --container-size-sidebar-min-w: 288px;\n  --focus-bg: var(--mode-color-action-focus-with-default-alt);\n  --focus-borderalt: var(--mode-color-action-focus-default);\n  --focus-border: var(--mode-color-action-focus-with-default);\n  --focus-label: var(--mode-color-action-focus-txt);\n  --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);\n  --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);\n  --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);\n  --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);\n  --dataviz-generic-label-alt: var(--mode-color-generic-txt-inverse-extreme);\n  --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);\n  --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);\n  --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);\n  --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);\n  --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-deep);\n  --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-deep);\n  --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-muted);\n  --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-deep);\n  --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-deep);\n  --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-deep);\n  --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-muted);\n  --dataviz-generic-green-border: var(--mode-color-colorcode-green-deep);\n  --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-deep);\n  --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-deep);\n  --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-muted);\n  --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-deep);\n  --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-deep);\n  --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-muted);\n  --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-deep);\n  --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-muted);\n  --dataviz-generic-red-border: var(--mode-color-colorcode-red-deep);\n  --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-deep);\n  --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-deep);\n  --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-muted);\n  --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-deep);\n  --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-deep);\n  --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-deep);\n  --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-muted);\n  --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-deep);\n  --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-deep);\n  --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-deep);\n  --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-muted);\n  --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-deep);\n  --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-deep);\n  --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-deep);\n  --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-muted);\n  --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-deep);\n  --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-deep);\n  --input-calendar-bg-active: var(--mode-color-action-grayscale-active);\n  --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt);\n  --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n  --input-calendar-border-duration: var(--mode-color-action-grayscale-active);\n  --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active);\n  --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n  --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);\n  --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt);\n  --input-calendar-txt-default: var(--mode-color-action-data-entry-txt);\n  --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover);\n  --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt);\n  --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n  --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active);\n  --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt);\n  --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt);\n  --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt);\n  --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt);\n  --input-labelset-label-required: var(--mode-color-action-danger-default);\n  --input-labelset-label-default: var(--mode-color-action-data-entry-txt);\n  --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt);\n  --input-labelset-label-disabled: var(--mode-color-action-inactive-txt);\n  --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt);\n  --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default);\n  --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt);\n  --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt);\n  --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt);\n  --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --input-typical-bg-default: var(--mode-color-action-data-entry-default);\n  --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n  --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt);\n  --input-typical-border-alt: var(--mode-color-action-inactive-default);\n  --input-typical-border-default: var(--mode-color-action-data-entry-with-default);\n  --input-typical-border-disabled: var(--mode-color-action-inactive-default);\n  --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover);\n  --input-typical-border-read-only: var(--mode-color-action-inactive-default);\n  --input-typical-icon-active: var(--mode-color-action-data-entry-with-active);\n  --input-typical-icon-default: var(--mode-color-action-data-entry-txt);\n  --input-typical-icon-disabled: var(--mode-color-action-inactive-icon);\n  --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover);\n  --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt);\n  --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt);\n  --input-typical-txt-active: var(--mode-color-action-data-entry-txt);\n  --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n  --input-typical-txt-default: var(--mode-color-action-data-entry-txt);\n  --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);\n  --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);\n  --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);\n  --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);\n  --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);\n  --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);\n  --input-switch-bg-active: var(--mode-color-action-grayscale-active);\n  --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --input-switch-bg-default: var(--mode-color-action-data-entry-default);\n  --input-switch-border-active: transparent;\n  --input-switch-border-active-disabled: transparent;\n  --input-switch-border-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-border-default: var(--mode-color-action-data-entry-with-default);\n  --input-switch-fg-active: var(--mode-color-action-grayscale-with-active);\n  --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);\n  --input-switch-fg-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-fg-default: var(--mode-color-action-data-entry-with-default);\n  --input-switch-label-active: var(--mode-color-action-data-entry-txt);\n  --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-label-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);\n  --input-validation-border-error: var(--mode-color-status-negative-default);\n  --input-validation-bar-error: var(--mode-color-status-negative-default);\n  --input-validation-bar-warn: var(--mode-color-status-warning-default);\n  --input-validation-label-error: var(--mode-color-status-negative-default);\n  --input-validation-label-success: var(--mode-color-status-positive-default);\n  --input-validation-label-warn: var(--mode-color-status-warning-txt);\n  --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default);\n  --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);\n  --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);\n  --input-size-generic-min-w: 288px;\n  --logo-sage-bg-default: var(--mode-color-brand-default);\n  --logo-sage-bg-alt: var(--mode-color-brand-default-alt);\n  --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default);\n  --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt);\n  --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome);\n  --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default);\n  --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default);\n  --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default);\n  --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default);\n  --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default);\n  --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default);\n  --link-destructive-label-default: var(--mode-color-action-danger-default-alt);\n  --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);\n  --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);\n  --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);\n  --link-typical-label-default: var(--mode-color-action-main-default-alt2);\n  --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);\n  --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);\n  --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);\n  --link-subtle-label-default: var(--mode-color-action-grayscale-default);\n  --link-subtle-label-hover: var(--mode-color-action-grayscale-active);\n  --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);\n  --message-none: var(--mode-color-none);\n  --message-contextual-bg: var(--mode-color-generic-bg-nought);\n  --message-contextual-icon: var(--mode-color-generic-bg-nought);\n  --message-contextual-icon-alt: var(--mode-color-status-neutral-default);\n  --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt);\n  --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);\n  --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);\n  --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);\n  --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);\n  --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt);\n  --message-contextual-error-bg-default: var(--mode-color-status-negative-default);\n  --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);\n  --message-contextual-error-border-default: var(--mode-color-status-negative-default);\n  --message-contextual-error-icon: var(--mode-color-status-negative-default);\n  --message-contextual-info-bg-default: var(--mode-color-status-info-default);\n  --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);\n  --message-contextual-info-border-default: var(--mode-color-status-info-default);\n  --message-contextual-info-icon: var(--mode-color-status-info-default);\n  --message-contextual-success-bg-default: var(--mode-color-status-positive-default);\n  --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);\n  --message-contextual-success-border-default: var(--mode-color-status-positive-default);\n  --message-contextual-success-icon: var(--mode-color-status-positive-default);\n  --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);\n  --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);\n  --message-contextual-warning-border-default: var(--mode-color-status-warning-default);\n  --message-contextual-warning-icon: var(--mode-color-status-warning-default);\n  --message-global-label-default: var(--mode-color-status-txt-with-default-alt);\n  --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);\n  --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt);\n  --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt);\n  --message-global-info-bg-default: var(--mode-color-status-info-default-alt);\n  --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt);\n  --message-global-info-icon: var(--mode-color-status-info-default);\n  --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt);\n  --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt);\n  --message-global-warning-icon: var(--mode-color-status-warning-default);\n  --nav-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-leftnav-container-bg-default: var(--mode-color-generic-bg-inverse-nought);\n  --nav-leftnav-container-bg-default-alt: var(--mode-color-action-nav-inverse-default-alt);\n  --nav-leftnav-container-border-default: var(--mode-color-generic-fg-inverse-firm);\n  --nav-leftnav-item-bg-active: var(--mode-color-action-nav-inverse-active);\n  --nav-leftnav-item-bg-default: var(--mode-color-none);\n  --nav-leftnav-item-bg-hover: var(--mode-color-action-nav-inverse-hover);\n  --nav-leftnav-item-label-active: var(--mode-color-action-nav-inverse-with-active);\n  --nav-leftnav-item-label-default: var(--mode-color-action-nav-inverse-with-default);\n  --nav-leftnav-item-label-hover: var(--mode-color-action-nav-inverse-with-hover);\n  --nav-modal-container-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-modal-container-bg-default-alt: var(--mode-color-generic-surface-faint);\n  --nav-modal-container-border-default: var(--mode-color-generic-fg-firm);\n  --nav-modal-item-bg-active: var(--mode-color-action-nav-active);\n  --nav-modal-item-bg-default: var(--mode-color-none);\n  --nav-modal-item-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-modal-item-label-active: var(--mode-color-action-nav-with-active);\n  --nav-modal-item-label-default: var(--mode-color-action-nav-with-default);\n  --nav-modal-item-label-hover: var(--mode-color-action-nav-with-hover);\n  --nav-modal-headeritem-label-default: var(--mode-color-generic-txt-soft);\n  --nav-topnav-container-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-topnav-container-border-default: var(--mode-color-generic-fg-firm);\n  --nav-topnav-item-bg-active: var(--mode-color-action-nav-active);\n  --nav-topnav-item-bg-default: var(--mode-color-none);\n  --nav-topnav-item-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-topnav-item-label-active: var(--mode-color-action-nav-with-active);\n  --nav-topnav-item-label-default: var(--mode-color-action-nav-with-default);\n  --nav-topnav-item-label-hover: var(--mode-color-action-nav-with-hover);\n  --page-bg-default: var(--mode-color-generic-surface-nought);\n  --page-bg-alt: var(--mode-color-generic-surface-faint);\n  --page-txt-alt: var(--mode-color-generic-txt-moderate);\n  --page-txt-default: var(--mode-color-generic-txt-severe);\n  --popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);\n  --popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);\n  --popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);\n  --popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);\n  --popover-size-menu-maxwidth-m: var(--container-size-fluid-items-l);\n  --popover-size-menu-maxwidth-l: var(--container-size-fluid-items-xl);\n  --popover-bg-active: var(--mode-color-action-grayscale-active);\n  --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt);\n  --popover-bg-default: var(--mode-color-generic-bg-nought);\n  --popover-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --popover-label-active: var(--mode-color-action-grayscale-with-active);\n  --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n  --popover-label-disabled: var(--mode-color-action-inactive-txt);\n  --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n  --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n  --profile-size-outside-xs: var(--global-size-xs);\n  --profile-size-outside-s: var(--global-size-s);\n  --profile-size-outside-m: var(--global-size-m);\n  --profile-size-outside-ml: 56px;\n  --profile-size-outside-l: var(--global-size-4-xl);\n  --profile-size-outside-xl: 104px;\n  --profile-size-outside-xxl: 128px;\n  --profile-size-inside-xs: var(--global-size-3-xs);\n  --profile-size-inside-s: var(--global-size-2-xs);\n  --profile-size-inside-m: var(--global-size-xs);\n  --profile-size-inside-ml: var(--global-size-s);\n  --profile-size-inside-l: var(--global-size-l);\n  --profile-size-inside-xl: var(--global-size-2-xl);\n  --profile-size-inside-xxl: var(--global-size-4-xl);\n  --profile-bg-alt: var(--mode-color-generic-txt-severe);\n  --profile-bg-def: var(--mode-color-generic-bg-nought);\n  --profile-border-default: var(--mode-color-generic-fg-moderate);\n  --profile-label-default: var(--mode-color-generic-txt-severe);\n  --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n  --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n  --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n  --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n  --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n  --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n  --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n  --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n  --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n  --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n  --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n  --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n  --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n  --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n  --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n  --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n  --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n  --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n  --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n  --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n  --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n  --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n  --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n  --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n  --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n  --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n  --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n  --profile-font-def-xs: var(--global-font-static-comp-regular-s);\n  --profile-font-def-s: var(--global-font-static-comp-regular-m);\n  --profile-font-def-m: var(--global-font-static-comp-regular-m);\n  --profile-font-def-ml: var(--global-font-static-comp-regular-m);\n  --profile-font-def-l: var(--global-font-static-comp-regular-l);\n  --profile-font-def-xl: var(--global-font-static-comp-regular-l);\n  --profile-font-def-xxl: var(--global-font-static-comp-regular-l);\n  --profile-font-heading-xs: var(--global-font-static-comp-medium-s);\n  --profile-font-heading-s: var(--global-font-static-comp-medium-m);\n  --profile-font-heading-m: var(--global-font-static-subheading-l);\n  --profile-font-heading-ml: var(--global-font-static-subheading-l);\n  --profile-font-heading-l: var(--global-font-static-subheading-l);\n  --profile-font-heading-xl: var(--global-font-static-heading-m);\n  --profile-font-heading-xxl: var(--global-font-static-heading-l);\n  --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs);\n  --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s);\n  --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m);\n  --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml);\n  --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l);\n  --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl);\n  --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl);\n  --profile-font-fluid-def-xs: var(--global-font-fluid-comp-regular-s);\n  --profile-font-fluid-def-s: var(--global-font-fluid-comp-regular-m);\n  --profile-font-fluid-def-m: var(--global-font-fluid-comp-regular-m);\n  --profile-font-fluid-def-ml: var(--global-font-fluid-comp-regular-m);\n  --profile-font-fluid-def-l: var(--global-font-fluid-comp-regular-l);\n  --profile-font-fluid-def-xl: var(--global-font-fluid-comp-regular-l);\n  --profile-font-fluid-def-xxl: var(--global-font-fluid-comp-regular-l);\n  --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s);\n  --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m);\n  --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l);\n  --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l);\n  --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l);\n  --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m);\n  --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l);\n  --progress-none: var(--mode-color-none);\n  --progress-bg-default: var(--mode-color-generic-bg-delicate);\n  --progress-border-default: var(--mode-color-generic-fg-firm);\n  --progress-fg-alt: var(--mode-color-status-positive-default);\n  --progress-fg-alt2: var(--mode-color-generic-txt-soft);\n  --progress-fg-caution: var(--mode-color-status-warning-default);\n  --progress-fg-default: var(--mode-color-action-grayscale-active);\n  --progress-fg-error: var(--mode-color-status-negative-default);\n  --progress-fg-info: var(--mode-color-status-info-default);\n  --progress-label-alt: var(--mode-color-generic-txt-moderate);\n  --progress-label-default: var(--mode-color-generic-txt-severe);\n  --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);\n  --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft);\n  --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);\n  --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);\n  --progress-loader-fg-default: var(--mode-color-generic-fg-inverse-nought);\n  --progress-loader-fg-ai: var(--mode-color-status-ai-default-horizontal);\n  --progress-loader-fg-error: var(--mode-color-status-negative-default);\n  --progress-loader-fg-complete: var(--mode-color-status-positive-default);\n  --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);\n  --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-inverse-extreme);\n  --progress-loader-inverse-fg-ai: var(--mode-color-status-ai-inverse-default-horizontal);\n  --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active);\n  --progress-stepflow-bg-complete: var(--mode-color-status-positive-default);\n  --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought);\n  --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought);\n  --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active);\n  --progress-stepflow-border-default: var(--mode-color-generic-fg-firm);\n  --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft);\n  --progress-stepflow-label-default: var(--mode-color-generic-txt-severe);\n  --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active);\n  --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default);\n  --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active);\n  --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm);\n  --progress-stepindicator-border-success: var(--mode-color-status-positive-default);\n  --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active);\n  --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active);\n  --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe);\n  --pill-generic-none: var(--mode-color-none);\n  --pill-generic-label-default: var(--mode-color-status-txt-with-default);\n  --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);\n  --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);\n  --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);\n  --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);\n  --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover);\n  --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt);\n  --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);\n  --pill-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default);\n  --pill-swatches-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n  --pill-swatches-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n  --pill-swatches-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n  --pill-swatches-teal-border-default: var(--mode-color-status-custom-teal-default);\n  --pill-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default);\n  --pill-swatches-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n  --pill-swatches-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n  --pill-swatches-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n  --pill-swatches-lime-border-default: var(--mode-color-status-custom-lime-default);\n  --pill-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default);\n  --pill-swatches-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n  --pill-swatches-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n  --pill-swatches-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n  --pill-swatches-pink-border-default: var(--mode-color-status-custom-pink-default);\n  --pill-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default);\n  --pill-swatches-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n  --pill-swatches-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n  --pill-swatches-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n  --pill-swatches-slate-border-default: var(--mode-color-status-custom-slate-default);\n  --pill-swatches-orange-bg-default: var(--mode-color-status-warning-default);\n  --pill-swatches-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n  --pill-swatches-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n  --pill-swatches-orange-bg-hover: var(--mode-color-status-warning-hover);\n  --pill-swatches-orange-border-default: var(--mode-color-status-warning-default);\n  --pill-swatches-red-bg-default: var(--mode-color-status-negative-default);\n  --pill-swatches-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n  --pill-swatches-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n  --pill-swatches-red-bg-hover: var(--mode-color-status-negative-hover);\n  --pill-swatches-red-border-default: var(--mode-color-status-negative-default);\n  --pill-swatches-gray-bg-default: var(--mode-color-status-neutral-default);\n  --pill-swatches-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n  --pill-swatches-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n  --pill-swatches-gray-bg-hover: var(--mode-color-status-neutral-hover);\n  --pill-swatches-gray-border-default: var(--mode-color-status-neutral-default);\n  --pill-swatches-purple-bg-default: var(--mode-color-status-priority-default);\n  --pill-swatches-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n  --pill-swatches-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n  --pill-swatches-purple-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-swatches-purple-border-default: var(--mode-color-status-priority-default);\n  --pill-swatches-green-bg-default: var(--mode-color-status-positive-default);\n  --pill-swatches-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n  --pill-swatches-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n  --pill-swatches-green-bg-hover: var(--mode-color-status-positive-hover);\n  --pill-swatches-green-border-default: var(--mode-color-status-positive-default);\n  --pill-swatches-blue-bg-default: var(--mode-color-status-info-default);\n  --pill-swatches-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n  --pill-swatches-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n  --pill-swatches-blue-bg-hover: var(--mode-color-status-info-hover);\n  --pill-swatches-blue-border-default: var(--mode-color-status-info-default);\n  --pill-error-bg-default: var(--mode-color-status-negative-default);\n  --pill-error-bg-alt-default: var(--mode-color-status-negative-default-alt);\n  --pill-error-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n  --pill-error-bg-hover: var(--mode-color-status-negative-hover);\n  --pill-error-border-default: var(--mode-color-status-negative-default);\n  --pill-error-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n  --pill-error-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n  --pill-error-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n  --pill-error-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n  --pill-error-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n  --pill-priority-bg-default: var(--mode-color-status-priority-default);\n  --pill-priority-bg-alt-default: var(--mode-color-status-priority-default-alt);\n  --pill-priority-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n  --pill-priority-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-priority-border-default: var(--mode-color-status-priority-default);\n  --pill-priority-inverse-bg-default: var(--mode-color-status-priority-default);\n  --pill-priority-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n  --pill-priority-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n  --pill-priority-inverse-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-priority-inverse-border-default: var(--mode-color-status-priority-default);\n  --pill-info-bg-default: var(--mode-color-status-info-default);\n  --pill-info-bg-alt-default: var(--mode-color-status-info-default-alt);\n  --pill-info-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n  --pill-info-bg-hover: var(--mode-color-status-info-hover);\n  --pill-info-border-default: var(--mode-color-status-info-default);\n  --pill-info-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n  --pill-info-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n  --pill-info-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n  --pill-info-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n  --pill-info-inverse-border-default: var(--mode-color-status-info-inverse-default);\n  --pill-neutral-bg-default: var(--mode-color-status-neutral-default);\n  --pill-neutral-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n  --pill-neutral-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n  --pill-neutral-bg-hover: var(--mode-color-status-neutral-hover);\n  --pill-neutral-border-default: var(--mode-color-status-neutral-default);\n  --pill-neutral-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-neutral-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n  --pill-neutral-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n  --pill-neutral-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n  --pill-neutral-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-readonly-bg-default: var(--mode-color-status-inactive-default);\n  --pill-readonly-border-default: var(--mode-color-status-inactive-default);\n  --pill-readonly-label: var(--mode-color-generic-txt-soft);\n  --pill-positive-bg-default: var(--mode-color-status-positive-default);\n  --pill-positive-bg-alt-default: var(--mode-color-status-positive-default-alt);\n  --pill-positive-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n  --pill-positive-bg-hover: var(--mode-color-status-positive-hover);\n  --pill-positive-border-default: var(--mode-color-status-positive-default);\n  --pill-positive-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n  --pill-positive-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n  --pill-positive-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n  --pill-positive-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n  --pill-positive-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n  --pill-warn-bg-default: var(--mode-color-status-warning-default);\n  --pill-warn-bg-alt-default: var(--mode-color-status-warning-default-alt);\n  --pill-warn-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n  --pill-warn-bg-hover: var(--mode-color-status-warning-hover);\n  --pill-warn-border-default: var(--mode-color-status-warning-default);\n  --pill-warn-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n  --pill-warn-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n  --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n  --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n  --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n  --pill-blue-bg-default: var(--mode-color-status-info-default);\n  --pill-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n  --pill-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n  --pill-blue-bg-hover: var(--mode-color-status-info-hover);\n  --pill-blue-border-default: var(--mode-color-status-info-default);\n  --pill-blue-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n  --pill-blue-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n  --pill-blue-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n  --pill-blue-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n  --pill-blue-inverse-border-default: var(--mode-color-status-info-inverse-default);\n  --pill-green-bg-default: var(--mode-color-status-positive-default);\n  --pill-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n  --pill-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n  --pill-green-bg-hover: var(--mode-color-status-positive-hover);\n  --pill-green-border-default: var(--mode-color-status-positive-default);\n  --pill-green-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n  --pill-green-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n  --pill-green-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n  --pill-green-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n  --pill-green-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n  --pill-gray-bg-default: var(--mode-color-status-neutral-default);\n  --pill-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n  --pill-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n  --pill-gray-bg-hover: var(--mode-color-status-neutral-hover);\n  --pill-gray-border-default: var(--mode-color-status-neutral-default);\n  --pill-gray-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-gray-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n  --pill-gray-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n  --pill-gray-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n  --pill-gray-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-lime-bg-default: var(--mode-color-status-custom-lime-default);\n  --pill-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n  --pill-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n  --pill-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n  --pill-lime-border-default: var(--mode-color-status-custom-lime-default);\n  --pill-orange-bg-default: var(--mode-color-status-warning-default);\n  --pill-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n  --pill-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n  --pill-orange-bg-hover: var(--mode-color-status-warning-hover);\n  --pill-orange-border-default: var(--mode-color-status-warning-default);\n  --pill-orange-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n  --pill-orange-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n  --pill-orange-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n  --pill-orange-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n  --pill-orange-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n  --pill-pink-bg-default: var(--mode-color-status-custom-pink-default);\n  --pill-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n  --pill-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n  --pill-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n  --pill-pink-border-default: var(--mode-color-status-custom-pink-default);\n  --pill-purple-bg-default: var(--mode-color-status-priority-default);\n  --pill-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n  --pill-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n  --pill-purple-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-purple-border-default: var(--mode-color-status-priority-default);\n  --pill-purple-inverse-bg-default: var(--mode-color-status-priority-default);\n  --pill-purple-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n  --pill-purple-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n  --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-purple-inverse-border-default: var(--mode-color-status-priority-default);\n  --pill-red-bg-default: var(--mode-color-status-negative-default);\n  --pill-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n  --pill-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n  --pill-red-bg-hover: var(--mode-color-status-negative-hover);\n  --pill-red-border-default: var(--mode-color-status-negative-default);\n  --pill-red-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n  --pill-red-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n  --pill-red-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n  --pill-red-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n  --pill-red-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n  --pill-slate-bg-default: var(--mode-color-status-custom-slate-default);\n  --pill-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n  --pill-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n  --pill-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n  --pill-slate-border-default: var(--mode-color-status-custom-slate-default);\n  --pill-teal-bg-default: var(--mode-color-status-custom-teal-default);\n  --pill-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n  --pill-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n  --pill-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n  --pill-teal-border-default: var(--mode-color-status-custom-teal-default);\n  --tab-bg-active: var(--mode-color-action-grayscale-with-active);\n  --tab-bg-default: var(--mode-color-none);\n  --tab-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n  --tab-border-active: var(--mode-color-action-grayscale-active);\n  --tab-border-default: var(--mode-color-generic-fg-moderate);\n  --tab-border-hover: var(--mode-color-generic-fg-firm);\n  --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n  --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n  --tab-label-active: var(--mode-color-action-grayscale-active);\n  --tab-icon-active: var(--mode-color-action-grayscale-active);\n  --tab-label-default: var(--mode-color-action-grayscale-default);\n  --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n  --tab-validation-border-warning: var(--mode-color-status-warning-default);\n  --tab-validation-border-error: var(--mode-color-status-negative-default);\n  --tab-validation-icon-error: var(--mode-color-status-negative-default);\n  --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n  --tab-validation-label-error: var(--mode-color-status-negative-default);\n  --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n  --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n  --table-header-subtle-bg-default: var(--mode-color-none);\n  --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n  --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n  --table-header-harsh-bg-alt: var(--mode-color-action-grayscale-default);\n  --table-header-harsh-bg-default: var(--mode-color-action-grayscale-default-alt);\n  --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n  --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n  --table-row-bg-default: var(--mode-color-generic-bg-nought);\n  --table-row-bg-alt: var(--mode-color-generic-bg-delicate);\n  --table-row-bg-alt2: var(--mode-color-generic-bg-faint);\n  --table-row-bg-alt3: var(--mode-color-generic-bg-soft);\n  --table-row-bg-selected: var(--mode-color-generic-bg-soft);\n  --table-row-border-default: var(--mode-color-generic-fg-soft);\n  --table-row-label-default: var(--mode-color-generic-txt-severe);\n  --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n  --table-footer-bg-default: var(--mode-color-generic-bg-soft);\n  --table-footer-border-default: var(--mode-color-generic-fg-soft);\n  --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";
 export default _default;