npm - carbon-react - Versions diffs - 158.13.2 → 158.14.1 - Mend

carbon-react 158.13.2 → 158.14.1

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/file-input/__internal__/file-upload-status/file-upload-status.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import"react";import{Link as o}from"../../../link/link.component.js";import{ButtonMinor as n}from"../../../button-minor/button-minor.component.js";import i from"../../../typography/typography.style.js";import{StyledProgressBar as c,InnerBar as l}from"../../../progress-tracker/progress-tracker.style.js";import{LoaderBar as a}from"../../../loader-bar/loader-bar.component.js";import s from"../../../icon/icon.component.js";import{StyledFileUploadStatus as p,StyledFileUploadStatusRow as u,StyledFileLinkContainer as f}from"./file-upload-status.style.js";import m from"../../../../hooks/__internal__/useLocale/useLocale.js";function b(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function y(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){b(e,r,t[r])}))}return e}function d(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const g=b=>{var{status:g,filename:O,message:j,onAction:h,iconType:P="file_generic"}=b,v=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0\|\|(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(b,["status","filename","message","onAction","iconType"]);const w=m(),k=j\|\|w.fileInput.fileUploadStatus();let S,I,_=null;switch(g){case"uploading":S=w.fileInput.actions.cancel(),_=void 0===v.progress?e(a,{}):e(c,{"data-element":"progress-tracker-bar","data-role":"progress-tracker-bar",progress:v.progress,"aria-hidden":"true",children:e(l,{"data-element":"inner-bar","data-role":"inner-bar",size:"medium",progress:v.progress,error:!1})});break;case"previously":case"completed":S=w.fileInput.actions.delete(),I=d(y({},v),{icon:P});break;case"error":S=w.fileInput.actions.clear()}const x=e(n,{onClick:h,buttonType:"tertiary",children:S}),D=I?e(o,d(y({},I),{children:O})):r(t,{children:[e(s,{type:P}),e("span",{children:O})]});return r(p,{"data-role":"file-upload-status",hasError:"error"===g,children:[r(u,"previously"!==g?{children:[e(i,{as:"p",mb:0,"aria-live":"polite",children:k}),x]}:{onlyRow:!0,children:[e(f,{children:D}),x]}),"previously"!==g?e(u,{upperPadding:!0,lowerPadding:!0,children:e(f,{children:D})}):null,_]})};export{g as FileUploadStatus,g as default};
1	+ import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import"react";import{Link as o}from"../../../link/link.component.js";import{ButtonMinor as n}from"../../../button-minor/button-minor.component.js";import i from"../../../typography/typography.style.js";import{StyledProgressBar as l,InnerBar as c}from"../../../progress-tracker/progress-tracker.style.js";import{LoaderBar as a}from"../../../loader-bar/loader-bar.component.js";import s from"../../../icon/icon.component.js";import{StyledFileUploadStatus as p,StyledFileUploadStatusRow as u,StyledFileLinkContainer as f}from"./file-upload-status.style.js";import m from"../../../../hooks/__internal__/useLocale/useLocale.js";function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function b(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){d(e,r,t[r])}))}return e}function y(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const g=d=>{var{status:g,filename:O,message:j,onAction:h,iconType:w="file_generic"}=d,P=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0\|\|(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(d,["status","filename","message","onAction","iconType"]);const v=m(),k=j\|\|v.fileInput.fileUploadStatus();let S,I,_=null;switch(g){case"uploading":S=v.fileInput.actions.cancel(),_=void 0===P.progress?e(a,{}):e(l,{"data-element":"progress-tracker-bar","data-role":"progress-tracker-bar",progress:P.progress,"aria-hidden":"true",children:e(c,{"data-element":"inner-bar","data-role":"inner-bar",size:"medium",progress:P.progress,error:!1})});break;case"previously":case"completed":S=v.fileInput.actions.delete(),I=y(b({},P),{icon:w});break;case"error":S=v.fileInput.actions.clear()}const x=e(n,{onClick:h,buttonType:"tertiary",children:S}),D=I?e(o,y(b({download:Boolean("completed"===g)},I),{children:O})):r(t,{children:[e(s,{type:w}),e("span",{children:O})]});return r(p,{"data-role":"file-upload-status",hasError:"error"===g,children:[r(u,"previously"!==g?{children:[e(i,{as:"p",mb:0,"aria-live":"polite",children:k}),x]}:{onlyRow:!0,children:[e(f,{children:D}),x]}),"previously"!==g?e(u,{upperPadding:!0,lowerPadding:!0,children:e(f,{children:D})}):null,_]})};export{g as FileUploadStatus,g as default};

package/esm/components/link/link.component.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 import { IconType } from "../icon";
 import { StyledLinkProps } from "./link.style";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export interface LinkProps extends StyledLinkProps, React.AriaAttributes, TagProps {
+export interface LinkProps extends StyledLinkProps, React.AriaAttributes, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download">, TagProps {
     /** An href for an anchor tag. */
     href?: string;
     /** An icon to display next to the link. */

package/esm/components/link/link.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useState as o,useContext as i,useRef as l,useCallback as a,useMemo as s,useEffect as c}from"react";import p from"../icon/icon.component.js";import u from"../menu/__internal__/menu.context.js";import{StyledLink as d,StyledContent as b}from"./link.style.js";import f from"../../__internal__/utils/helpers/tags/tags.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";import y from"../batch-selection/__internal__/batch-selection.context.js";import k from"../../__internal__/utils/logger/index.js";function v(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function O(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){v(e,n,t[n])}))}return e}function g(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}let h=!1,j=!1,w=!1,_=!1;const P={default:!1,neutral:!1},L={default:"typical",neutral:"subtle"},D=r.forwardRef(((v,D)=>{var{children:S,onKeyDown:M,href:x,onClick:A,onMouseDown:B,icon:T,iconAlign:C="left",isSkipLink:E,disabled:I=!1,underline:N="always",ariaLabel:z,rel:K,tooltipMessage:F,tooltipPosition:$,target:R,variant:W="typical",isDarkBackground:q,inverse:G,removeAriaLabelOnIcon:H,className:J,linkSize:Q="medium"}=v,U=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0\|\|(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(v,["children","onKeyDown","href","onClick","onMouseDown","icon","iconAlign","isSkipLink","disabled","underline","ariaLabel","rel","tooltipMessage","tooltipPosition","target","variant","isDarkBackground","inverse","removeAriaLabelOnIcon","className","linkSize"]);const[V,X]=o(!1),Y=m(),{inMenu:Z}=i(u),{batchSelectionDisabled:ee}=i(y),ne=I\|\|ee,te=l(null);!h&&I&&(h=!0,k.deprecate("The 'disabled' prop in Link is deprecated and will soon be removed.")),!w&&F&&(w=!0,k.deprecate("The 'tooltipMessage' prop in Link is deprecated and will soon be removed.")),!j&&$&&(j=!0,k.deprecate("The 'tooltipPosition' prop in Link is deprecated and will soon be removed.")),!_&&q&&(_=!0,k.deprecate("The 'isDarkBackground' prop in Link is deprecated and will soon be removed. Please use 'inverse' prop instead.")),!P[W]&&L[W]&&(P[W]=!0,k.deprecate(`The value '${W}' for the variant prop is deprecated and will soon be removed. Please use value '${L[W]}' instead.`));const re=null!=G?G:q;var oe;const ie=null!==(oe=L[W])&&void 0!==oe?oe:W,le=a((e=>{te.current=e,D&&("function"!=typeof D?"object"!=typeof D\|\|(D.current=e):D(e))}),[D]),ae=a((e=>{var n,t;null===(t=te.current)\|\|void 0===t\|\|null===(n=t.focus)\|\|void 0===n\|\|n.call(t,{preventScroll:!0}),null==A\|\|A(e)}),[A]),se=(n="left")=>T&&C===n?e(p,{type:T,disabled:ne,ariaLabel:H?void 0:z,tooltipMessage:F,tooltipPosition:$}):null,ce=s((()=>{const e=U;return Object.keys(e).filter((e=>e.startsWith("aria"))).reduce(((n,t)=>(n[t]=e[t],n)),{})}),[U]),pe=g(O({onKeyDown:M,onMouseDown:B,onClick:ae,disabled:ne,target:R,ref:le,href:x,rel:K,"aria-label":z},ce),{onFocus:()=>X(!0),onBlur:()=>X(!1)}),ue={type:"button"};return c((()=>{(I\|\|!x&&!A)&&X(!1)}),[I,x,A]),e(d,g(O({isSkipLink:E,disabled:ne,underline:N,iconAlign:C,className:J,hasContent:Boolean(S),variant:ie,inverse:re,isMenuItem:Z},f("link",U),E&&{"data-element":"skip-link"}),{hasFocus:V,linkSize:Q,children:(()=>{let o="a";return A&&!x&&(o="button"),r.createElement(o,"button"===o?O({},pe,ue):g(O({},pe),{"data-role":"link-anchor"}),n(t,{children:[se(),e(b,{children:E?Y.link.skipLinkLabel():S}),se("right")]}))})()}))}));D.displayName="Link";export{D as Link,D as default};
1	+ import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useState as o,useContext as i,useRef as l,useCallback as a,useMemo as s,useEffect as c}from"react";import p from"../icon/icon.component.js";import u from"../menu/__internal__/menu.context.js";import{StyledLink as d,StyledContent as b}from"./link.style.js";import f from"../../__internal__/utils/helpers/tags/tags.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";import y from"../batch-selection/__internal__/batch-selection.context.js";import k from"../../__internal__/utils/logger/index.js";function v(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function O(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){v(e,n,t[n])}))}return e}function g(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}let h=!1,j=!1,w=!1,_=!1;const P={default:!1,neutral:!1},L={default:"typical",neutral:"subtle"},D=r.forwardRef(((v,D)=>{var{children:S,onKeyDown:M,href:x,onClick:A,onMouseDown:B,icon:T,iconAlign:C="left",isSkipLink:E,disabled:I=!1,underline:N="always",ariaLabel:z,rel:K,tooltipMessage:F,tooltipPosition:$,target:R,variant:W="typical",isDarkBackground:q,inverse:G,removeAriaLabelOnIcon:H,className:J,linkSize:Q="medium",download:U}=v,V=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0\|\|(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(v,["children","onKeyDown","href","onClick","onMouseDown","icon","iconAlign","isSkipLink","disabled","underline","ariaLabel","rel","tooltipMessage","tooltipPosition","target","variant","isDarkBackground","inverse","removeAriaLabelOnIcon","className","linkSize","download"]);const[X,Y]=o(!1),Z=m(),{inMenu:ee}=i(u),{batchSelectionDisabled:ne}=i(y),te=I\|\|ne,re=l(null);!h&&I&&(h=!0,k.deprecate("The 'disabled' prop in Link is deprecated and will soon be removed.")),!w&&F&&(w=!0,k.deprecate("The 'tooltipMessage' prop in Link is deprecated and will soon be removed.")),!j&&$&&(j=!0,k.deprecate("The 'tooltipPosition' prop in Link is deprecated and will soon be removed.")),!_&&q&&(_=!0,k.deprecate("The 'isDarkBackground' prop in Link is deprecated and will soon be removed. Please use 'inverse' prop instead.")),!P[W]&&L[W]&&(P[W]=!0,k.deprecate(`The value '${W}' for the variant prop is deprecated and will soon be removed. Please use value '${L[W]}' instead.`));const oe=null!=G?G:q;var ie;const le=null!==(ie=L[W])&&void 0!==ie?ie:W,ae=a((e=>{re.current=e,D&&("function"!=typeof D?"object"!=typeof D\|\|(D.current=e):D(e))}),[D]),se=a((e=>{var n,t;null===(t=re.current)\|\|void 0===t\|\|null===(n=t.focus)\|\|void 0===n\|\|n.call(t,{preventScroll:!0}),null==A\|\|A(e)}),[A]),ce=(n="left")=>T&&C===n?e(p,{type:T,disabled:te,ariaLabel:H?void 0:z,tooltipMessage:F,tooltipPosition:$}):null,pe=s((()=>{const e=V;return Object.keys(e).filter((e=>e.startsWith("aria"))).reduce(((n,t)=>(n[t]=e[t],n)),{})}),[V]),ue=g(O({onKeyDown:M,onMouseDown:B,onClick:se,disabled:te,target:R,ref:ae,href:x,rel:K,"aria-label":z},pe),{onFocus:()=>Y(!0),onBlur:()=>Y(!1)}),de={type:"button"};return c((()=>{(I\|\|!x&&!A)&&Y(!1)}),[I,x,A]),e(d,g(O({isSkipLink:E,disabled:te,underline:N,iconAlign:C,className:J,hasContent:Boolean(S),variant:le,inverse:oe,isMenuItem:ee},f("link",V),E&&{"data-element":"skip-link"}),{hasFocus:X,linkSize:Q,children:(()=>{let o="a";return A&&!x&&(o="button"),r.createElement(o,"button"===o?O({},ue,de):g(O({},ue),{download:U,"data-role":"link-anchor"}),n(t,{children:[ce(),e(b,{children:E?Z.link.skipLinkLabel():S}),ce("right")]}))})()}))}));D.displayName="Link";export{D as Link,D 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;