carbon-react 158.41.0 → 158.41.2

package/esm/__internal__/popover/popover.component.d.ts

@@ -27,9 +27,13 @@ export interface PopoverProps {
      */
     reference: RefObject<HTMLElement>;
     /**
-     * Determines if the popover is currently open/visible or not. Defaults to true.
+     * Whether the Popover is open, determines if autoUpdate runs in useFloating.
      */
     isOpen?: boolean;
+    /**
+     * Applies display: none to the content wrapper.
+     */
+    hide?: boolean;
     /**
      * Whether to update the position of the floating element on every animation frame if required. This is optimized for performance but can still be costly. Use with caution!
      * [https://floating-ui.com/docs/autoUpdate#animationframe](https://floating-ui.com/docs/autoUpdate#animationframe)

package/esm/__internal__/popover/popover.component.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import r,{useContext as o,useRef as t}from"react";import{createPortal as n}from"react-dom";import{flip as l}from"@floating-ui/dom";import i from"../../hooks/__internal__/useFloating/useFloating.js";import{StyledPopoverContent as a,StyledBackdrop as c}from"./popover.style.js";import s from"../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js";import m from"../modal/modal.context.js";import p from"../../hooks/__internal__/useIsBrowser/index.js";function d(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function f(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){d(e,r,o[r])}))}return e}const u=[l({fallbackStrategy:"initialPlacement"})],b=({children:o,placement:n,reference:l,middleware:s=u,disableBackgroundUI:m,isOpen:p=!0,animationFrame:d,popoverStrategy:f="absolute",childRefOverride:b})=>{const y=b||r.Children.only(o).ref,O=t(null),g=y||O;let j;return j=y?o:r.cloneElement(o,{ref:g}),i({isOpen:p,reference:l,floating:g,placement:n,middleware:s,animationFrame:d,strategy:f}),e(a,{isOpen:p,children:m?e(c,{"data-role":"popup-backdrop",children:j}):j})},y=r=>{var t,{disablePortal:l}=r,i=function(e,r){if(null==e)return{};var o,t,n=function(e,r){if(null==e)return{};var o,t,n={},l=Object.keys(e);for(t=0;t<l.length;t++)o=l[t],r.indexOf(o)>=0||(n[o]=e[o]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)o=l[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}(r,["disablePortal"]);const{isBrowser:a}=p(),{isInModal:c}=o(m),d=null===(t=i.reference.current)||void 0===t?void 0:t.closest("[role='dialog']");return l?e(b,f({},i)):a?n(e(s,{className:"carbon-portal-scoped-tokens-provider",children:e(b,f({},i))}),c&&d?d:document.body):null};export{y as default};
+import{jsx as e}from"react/jsx-runtime";import r,{useContext as o,useRef as t}from"react";import{createPortal as n}from"react-dom";import{flip as l}from"@floating-ui/dom";import i from"../../hooks/__internal__/useFloating/useFloating.js";import{StyledPopoverContent as a,StyledBackdrop as c}from"./popover.style.js";import s from"../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js";import m from"../modal/modal.context.js";import p from"../../hooks/__internal__/useIsBrowser/index.js";function d(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function f(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){d(e,r,o[r])}))}return e}const u=[l({fallbackStrategy:"initialPlacement"})],b=({children:o,placement:n,reference:l,middleware:s=u,disableBackgroundUI:m,isOpen:p=!0,hide:d,animationFrame:f,popoverStrategy:b="absolute",childRefOverride:y})=>{const g=y||r.Children.only(o).ref,O=t(null),j=g||O;let v;return v=g?o:r.cloneElement(o,{ref:j}),i({isOpen:p,reference:l,floating:j,placement:n,middleware:s,animationFrame:f,strategy:b}),e(a,{hide:d,children:m?e(c,{"data-role":"popup-backdrop",children:v}):v})},y=r=>{var t,{disablePortal:l}=r,i=function(e,r){if(null==e)return{};var o,t,n=function(e,r){if(null==e)return{};var o,t,n={},l=Object.keys(e);for(t=0;t<l.length;t++)o=l[t],r.indexOf(o)>=0||(n[o]=e[o]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)o=l[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}(r,["disablePortal"]);const{isBrowser:a}=p(),{isInModal:c}=o(m),d=null===(t=i.reference.current)||void 0===t?void 0:t.closest("[role='dialog']");return l?e(b,f({},i)):a?n(e(s,{className:"carbon-portal-scoped-tokens-provider",children:e(b,f({},i))}),c&&d?d:document.body):null};export{y as default};

package/esm/__internal__/popover/popover.style.d.ts

@@ -2,7 +2,7 @@ export declare const StyledBackdrop: import("styled-components").StyledComponent
     theme: object;
 }, "theme">;
 type StyledPopoverContentProps = {
-    isOpen?: boolean;
+    hide?: boolean;
 };
 export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", any, StyledPopoverContentProps, never>;
 export {};

package/esm/__internal__/popover/popover.style.js

@@ -1 +1 @@
-import e from"styled-components";import o from"../../style/themes/apply-base-theme.js";const t=e.div.attrs(o).withConfig({displayName:"popover.style__StyledBackdrop",componentId:"sc-914db531-0"})(["bottom:0;left:0;position:fixed;right:0;top:0;z-index:var( --adaptiveSidebarModalBackdrop,"," );background:transparent;"],(({theme:e})=>e.zIndex.popover)),p=e.div.withConfig({displayName:"popover.style__StyledPopoverContent",componentId:"sc-914db531-1"})(["",""],(({isOpen:e})=>!e&&"display: none;"));export{t as StyledBackdrop,p as StyledPopoverContent};
+import e from"styled-components";import o from"../../style/themes/apply-base-theme.js";const t=e.div.attrs(o).withConfig({displayName:"popover.style__StyledBackdrop",componentId:"sc-fb4df9e5-0"})(["bottom:0;left:0;position:fixed;right:0;top:0;z-index:var( --adaptiveSidebarModalBackdrop,"," );background:transparent;"],(({theme:e})=>e.zIndex.popover)),p=e.div.withConfig({displayName:"popover.style__StyledPopoverContent",componentId:"sc-fb4df9e5-1"})(["",""],(({hide:e})=>e&&"display: none;"));export{t as StyledBackdrop,p as StyledPopoverContent};

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import r,{forwardRef as o,useRef as n,useContext as i,useImperativeHandle as l}from"react";import{offset as a,flip as s}from"@floating-ui/dom";import u from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import c from"../split-button/__internal__/split-button.context.js";import{StyledMultiActionButton as p,StyledButtonChildrenContainer as d}from"./multi-action-button.style.js";import f from"../button/button.component.js";import m from"../../__internal__/popover/popover.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import b from"../../style/utils/filter-styled-system-margin-props.js";import y from"../../style/utils/filter-out-styled-system-spacing-props.js";import g from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import j from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import O from"../flat-table/__internal__/flat-table.context.js";import h from"../../__internal__/utils/helpers/guid/index.js";function _(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function w(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),o.forEach((function(e){_(t,e,r[e])}))}return t}function v(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const P=o(((o,_)=>{var{align:P="left",position:x="left",disabled:k,buttonType:S,size:B,children:C,text:D,subtext:T,width:A,onClick:z,"data-element":E,"data-role":F}=o,I=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(o,["align","position","disabled","buttonType","size","children","text","subtext","width","onClick","data-element","data-role"]);const M=n(null),{isInFlatTable:K}=i(O),L=n(h());l(_,(()=>({focusMainButton(){var t;null===(t=M.current)||void 0===t||t.focus({preventScroll:!0})}})),[]);const{showAdditionalButtons:N,showButtons:U,hideButtons:V,buttonNode:q,handleToggleButtonKeyDown:G,wrapperProps:H,contextValue:J}=g(M),Q=u(V);return j((()=>V())),t(p,v(w({ref:q,"data-component":"multi-action-button","data-element":E,"data-role":F,displayed:N,width:A},b(I)),{children:[e(f,v(w({"aria-expanded":N,"aria-controls":L.current,"data-element":"toggle-button",ref:M,iconPosition:"after",iconType:"dropdown",disabled:k,buttonType:S,size:B,subtext:T,onKeyDown:G,onClick:t=>{null==z||z(t),N?V():U(),Q()}},y(I)),{children:D}),"toggle-button"),e(m,{disableBackgroundUI:K&&N,disablePortal:!0,placement:"left"===x?"bottom-start":"bottom-end",reference:q,popoverStrategy:"fixed",middleware:[a(6),s({fallbackStrategy:"initialPlacement"})],children:e(d,v(w({id:L.current},H),{align:P,hidden:!N,children:e(c.Provider,{value:J,children:r.Children.map(C,(t=>e("li",{children:t})))})}))})]}))}));export{P as MultiActionButton,P as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import r,{forwardRef as o,useRef as n,useContext as i,useImperativeHandle as l,useMemo as s}from"react";import{offset as a,flip as c}from"@floating-ui/dom";import u from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import p from"../split-button/__internal__/split-button.context.js";import{StyledMultiActionButton as d,StyledButtonChildrenContainer as f}from"./multi-action-button.style.js";import m from"../button/button.component.js";import b from"../../__internal__/popover/popover.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import y from"../../style/utils/filter-styled-system-margin-props.js";import g from"../../style/utils/filter-out-styled-system-spacing-props.js";import j from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import O from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import h from"../flat-table/__internal__/flat-table.context.js";import _ from"../../__internal__/utils/helpers/guid/index.js";function w(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function v(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),o.forEach((function(e){w(t,e,r[e])}))}return t}function P(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const x=o(((o,w)=>{var{align:x="left",position:k="left",disabled:S,buttonType:B,size:C,children:D,text:T,subtext:A,width:z,onClick:E,"data-element":F,"data-role":I}=o,M=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(o,["align","position","disabled","buttonType","size","children","text","subtext","width","onClick","data-element","data-role"]);const K=n(null),{isInFlatTable:L}=i(h),N=n(_());l(w,(()=>({focusMainButton(){var t;null===(t=K.current)||void 0===t||t.focus({preventScroll:!0})}})),[]);const{showAdditionalButtons:U,showButtons:V,hideButtons:q,buttonNode:G,handleToggleButtonKeyDown:H,wrapperProps:J,contextValue:Q}=j(K),R=u(q);O((()=>q()));const W=s((()=>[a(6),c({fallbackStrategy:"initialPlacement"})]),[]);return t(d,P(v({ref:G,"data-component":"multi-action-button","data-element":F,"data-role":I,displayed:U,width:z},y(M)),{children:[e(m,P(v({"aria-expanded":U,"aria-controls":N.current,"data-element":"toggle-button",ref:K,iconPosition:"after",iconType:"dropdown",disabled:S,buttonType:B,size:C,subtext:A,onKeyDown:H,onClick:t=>{null==E||E(t),U?q():V(),R()}},g(M)),{children:T}),"toggle-button"),e(b,{isOpen:U,disableBackgroundUI:L&&U,disablePortal:!0,placement:"left"===k?"bottom-start":"bottom-end",reference:G,popoverStrategy:"fixed",middleware:W,children:e(f,P(v({id:N.current},J),{align:x,hidden:!U,children:e(p.Provider,{value:Q,children:r.Children.map(D,(t=>e("li",{children:t})))})}))})]}))}));export{x as MultiActionButton,x as default};

package/esm/components/select/__internal__/select-list/select-list.component.d.ts

@@ -42,8 +42,9 @@ export interface SelectListProps {
     listPlacement?: ListPlacement;
     /** Use the opposite list placement if the set placement does not fit */
     flipEnabled?: boolean;
-    /** @private @ignore
-     * Hides the list (with CSS display: none) if not set
+    /**
+     * @private @ignore
+     * Flag to determine if the list is open.
      */
     isOpen?: boolean;
     /** array of selected values, if rendered as part of a MultiSelect */

package/esm/components/select/__internal__/select-list/select-list.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import l,{useState as n,useRef as r,useEffect as o,useMemo as i,useCallback as s,useLayoutEffect as a}from"react";import{offset as c,size as u,flip as d}from"@floating-ui/dom";import{useVirtualizer as p,defaultRangeExtractor as m}from"@tanstack/react-virtual";import f from"lodash/findLastIndex";import v from"lodash/debounce";import b from"../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import y from"../../../../hooks/__internal__/useModalManager/useModalManager.js";import{StyledSelectListTable as h,StyledSelectListTableHeader as g,StyledSelectListTableBody as O,StyledSelectListContainer as x,StyledScrollableContainer as j,StyledSelectList as w,StyledSelectLoaderContainer as E}from"./select-list.style.js";import S from"../../../../__internal__/popover/popover.component.js";import k from"../../option-row/option-row.component.js";import P from"../utils/get-next-child-by-text.js";import L from"../utils/get-next-index-by-key.js";import T from"../utils/is-navigation-key.js";import C from"../list-action-button/list-action-button.component.js";import{Loader as V}from"../../../loader/loader.component.js";import I from"../../option/option.component.js";import _ from"./select-list.context.js";function B(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function A(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},n=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),n.forEach((function(t){B(e,t,l[t])}))}return e}function H(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 l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const M={behavior:"auto",align:"end"},D=l.forwardRef(((B,D)=>{var{listMaxHeight:W=180,listActionButton:z,id:K,labelId:R,children:$,onSelect:F,onSelectListClose:N,filterText:U,anchorElement:Y,highlightedValue:q,onListAction:G,isLoading:J,onListScrollBottom:Q,multiColumn:X,tableHeader:Z,listPlacement:ee="bottom",flipEnabled:te=!0,isOpen:le,multiselectValues:ne,enableVirtualScroll:re,virtualScrollOverscan:oe=5,listWidth:ie}=B,se=function(e,t){if(null==e)return{};var l,n,r=function(e,t){if(null==e)return{};var l,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}(B,["listMaxHeight","listActionButton","id","labelId","children","onSelect","onSelectListClose","filterText","anchorElement","highlightedValue","onListAction","isLoading","onListScrollBottom","multiColumn","tableHeader","listPlacement","flipEnabled","isOpen","multiselectValues","enableVirtualScroll","virtualScrollOverscan","listWidth"]);const[ae,ce]=n(-1),[ue,de]=n(0),pe=r(""),me=r(null),fe=r(null),ve=r(null),be=r(null),{blockScroll:ye,allowScroll:he}=b(),ge=r(0),Oe=re?oe:l.Children.count($),xe=p({count:l.Children.toArray($).filter((e=>Boolean(e))).length,getScrollElement:()=>le?D.current:null,estimateSize:()=>40,overscan:Oe,paddingStart:X?48:0,scrollPaddingEnd:ge.current,rangeExtractor:e=>{const t=m(e);return-1===ae||t.includes(ae)||t.push(ae),t}});o((()=>{if(!le)return;const e=ae>-1?ae:0;xe.scrollToIndex(e,M)}),[ae,le,xe]);const je=xe.getVirtualItems(),we=i((()=>l.Children.toArray($)),[$]),Ee=s((e=>we.findIndex((t=>{return t.props.value&&"object"==typeof e?(n=t.props.value,r=e,Object.keys(n).every((e=>n[e]===r[e]))):l.isValidElement(t)&&t.props.value===e;var n,r}))),[we]);if(0===je.length){const e=q?Ee(q):ae;e>-1&&je.push({index:e})}const Se=xe.getTotalSize(),ke=0===Se?1:Se;o((()=>(le&&ye(),()=>{le&&he()})),[he,ye,le]),a((()=>{X&&de(fe.current?fe.current.offsetWidth-fe.current.clientWidth:0)}),[X]);const Pe=i((()=>({current:Y||null})),[Y]),Le=s((e=>{var t,l,n;F({id:null!==(t=e.id)&&void 0!==t?t:"",text:null!==(l=e.text)&&void 0!==l?l:"",value:null!==(n=e.value)&&void 0!==n?n:"",selectionType:"click",selectionConfirmed:!0})}),[F]),Te=r(Array.from({length:l.Children.count($)})),Ce=i((()=>we.filter((e=>l.isValidElement(e)&&(e.type===I||e.type===k)))),[we]),{measureElement:Ve}=xe,Ie=je.filter((e=>void 0!==e)).map((({index:e,start:t})=>{const n=we[e],r=Ce.indexOf(n),o=r>-1,i={index:e,onSelect:Le,hidden:J&&1===we.length,style:{transform:`translateY(${t}px)`},"aria-setsize":o?Ce.length:void 0,"aria-posinset":o?r+1:void 0,ref:t=>{le&&Ve(t),Te.current[e]=t},"data-index":e};return void 0!==n?l.cloneElement(n,i):null})).filter((e=>null!==e)),_e=f(we,(e=>l.isValidElement(e)&&(e.type===I||e.type===k))),Be=s(((e,t)=>{if(-1===_e)return-1;let n=L(e,t,_e,J);const r=we[n];return(l.isValidElement(r)&&r.type!==I&&r.type!==k||r.props.disabled)&&(n=Be(e,n)),n}),[we,_e,J]),Ae=s((e=>{var t;let l=ae;q&&(l=Ee(q));const n=Be(e,l);if(-1===n||l===n)return;const{text:r,value:o}=we[n].props;F({id:null===(t=Te.current[n])||void 0===t?void 0:t.id,text:null!=r?r:"",value:null!=o?o:"",selectionType:"navigationKey",selectionConfirmed:!1})}),[we,ae,Ee,Be,q,F]),He=s(((e,t)=>{var l;t?N():(e.preventDefault(),null===(l=be.current)||void 0===l||l.focus())}),[N]),Me=s((()=>{Y&&Y.getElementsByTagName("input")[0].focus()}),[Y]),De=s((e=>{if(!le)return;const{key:t}=e,n=document.activeElement===be.current;if("Tab"===t&&z)He(e,n);else if("Tab"===t)N();else if("Enter"!==t||n)T(t)&&(Me(),Ae(t));else{var r;e.preventDefault();const t=we[ae];if(!l.isValidElement(t))return N(),void F({id:"",text:"",value:"",selectionType:"enterKey",selectionConfirmed:!1});if(t.props.disabled)return;const{text:n,value:o}=t.props;F({id:null===(r=Te.current[ae])||void 0===r?void 0:r.id,text:null!=n?n:"",value:null!=o?o:"",selectionType:"enterKey",selectionConfirmed:!0})}}),[we,z,He,N,ae,F,Ae,Me,le]),We=s((e=>{"Escape"===e.key&&N()}),[N]);y({open:!!le,closeModal:We,modalRef:me,triggerRefocusOnClose:!1}),o((()=>{const e=D.current,t=v((e=>{const t=e.target;le&&t.scrollHeight-t.scrollTop===t.clientHeight&&(null==Q||Q())}),300);return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[le,D,Q]),o((()=>(window.addEventListener("keydown",De),function(){window.removeEventListener("keydown",De)})),[De,D]),o((()=>{U&&U!==pe.current?(pe.current=U,ce((e=>{const t=P(U,we,e);if(!t)return-1;const l=Ee(t.props.value);return xe.scrollToIndex(l,M),l}))):pe.current=U||""}),[we,U,Ee,xe]),o((()=>{if(!(q&&0!==Object.keys(q).length||le))return void ce(-1);const e=Ee(q);-1!==e&&ce(e)}),[Ee,q,le]),o((()=>{J&&ae===_e&&_e>-1&&xe.scrollToIndex(_e,H(A({},M),{align:"start"}))}),[$,ae,J,_e,D,xe]);const ze=i((()=>[c(3),u({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${null!=ie?ie:e.reference.width}px`})}}),...te?[d({fallbackStrategy:"initialPlacement"})]:[]]),[ie,te]),Ke=J?t(E,{children:t(V,{"data-role":"select-list-loader"})},"loader"):void 0;let Re=Ie;const $e={role:"listbox",id:K,"aria-labelledby":R,"aria-multiselectable":!!ne||void 0};return a((()=>{var e,t;z&&le&&(ge.current=(null===(t=be.current)||void 0===t||null===(e=t.parentElement)||void 0===e?void 0:e.offsetHeight)||0)}),[z,le]),X&&(Re=e(h,{children:[t(g,{scrollbarWidth:ue,children:Z}),t(O,H(A({},$e),{"aria-labelledby":R,ref:fe,listHeight:ke-48,children:Ie}))]})),t(_.Provider,{value:{currentOptionsListIndex:ae,multiselectValues:ne},children:t(S,{placement:ee,disablePortal:!0,reference:Pe,middleware:ze,isOpen:le,disableBackgroundUI:!0,animationFrame:!0,children:e(x,H(A({ref:ve,"data-element":"select-list-wrapper","data-role":"select-list-wrapper",isLoading:J},se),{children:[e(j,{ref:D,maxHeight:W,"data-component":"select-list-scrollable-container","data-element":"select-list-scrollable-container","data-role":"select-list-scrollable-container",hasActionButton:!!z,children:[t(w,H(A({as:X?"div":"ul","data-element":"select-list"},X?{}:$e),{ref:me,tabIndex:-1,listHeight:X?void 0:ke,children:Re})),Ke]}),z&&t(C,{ref:be,listActionButton:z,onListAction:G})]}))})})}));export{D as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import l,{useState as n,useRef as r,useEffect as o,useMemo as i,useCallback as s,useLayoutEffect as a}from"react";import{offset as c,size as u,flip as d}from"@floating-ui/dom";import{useVirtualizer as p,defaultRangeExtractor as m}from"@tanstack/react-virtual";import f from"lodash/findLastIndex";import v from"lodash/debounce";import b from"../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import h from"../../../../hooks/__internal__/useModalManager/useModalManager.js";import{StyledSelectListTable as y,StyledSelectListTableHeader as g,StyledSelectListTableBody as O,StyledSelectListContainer as x,StyledScrollableContainer as j,StyledSelectList as w,StyledSelectLoaderContainer as E}from"./select-list.style.js";import S from"../../../../__internal__/popover/popover.component.js";import k from"../../option-row/option-row.component.js";import P from"../utils/get-next-child-by-text.js";import L from"../utils/get-next-index-by-key.js";import T from"../utils/is-navigation-key.js";import C from"../list-action-button/list-action-button.component.js";import{Loader as V}from"../../../loader/loader.component.js";import I from"../../option/option.component.js";import _ from"./select-list.context.js";function B(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function A(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},n=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),n.forEach((function(t){B(e,t,l[t])}))}return e}function H(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 l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const M={behavior:"auto",align:"end"},D=l.forwardRef(((B,D)=>{var{listMaxHeight:W=180,listActionButton:z,id:K,labelId:R,children:$,onSelect:F,onSelectListClose:N,filterText:U,anchorElement:Y,highlightedValue:q,onListAction:G,isLoading:J,onListScrollBottom:Q,multiColumn:X,tableHeader:Z,listPlacement:ee="bottom",flipEnabled:te=!0,isOpen:le,multiselectValues:ne,enableVirtualScroll:re,virtualScrollOverscan:oe=5,listWidth:ie}=B,se=function(e,t){if(null==e)return{};var l,n,r=function(e,t){if(null==e)return{};var l,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}(B,["listMaxHeight","listActionButton","id","labelId","children","onSelect","onSelectListClose","filterText","anchorElement","highlightedValue","onListAction","isLoading","onListScrollBottom","multiColumn","tableHeader","listPlacement","flipEnabled","isOpen","multiselectValues","enableVirtualScroll","virtualScrollOverscan","listWidth"]);const[ae,ce]=n(-1),[ue,de]=n(0),pe=r(""),me=r(null),fe=r(null),ve=r(null),be=r(null),{blockScroll:he,allowScroll:ye}=b(),ge=r(0),Oe=re?oe:l.Children.count($),xe=p({count:l.Children.toArray($).filter((e=>Boolean(e))).length,getScrollElement:()=>le?D.current:null,estimateSize:()=>40,overscan:Oe,paddingStart:X?48:0,scrollPaddingEnd:ge.current,rangeExtractor:e=>{const t=m(e);return-1===ae||t.includes(ae)||t.push(ae),t}});o((()=>{if(!le)return;const e=ae>-1?ae:0;xe.scrollToIndex(e,M)}),[ae,le,xe]);const je=xe.getVirtualItems(),we=i((()=>l.Children.toArray($)),[$]),Ee=s((e=>we.findIndex((t=>{return t.props.value&&"object"==typeof e?(n=t.props.value,r=e,Object.keys(n).every((e=>n[e]===r[e]))):l.isValidElement(t)&&t.props.value===e;var n,r}))),[we]);if(0===je.length){const e=q?Ee(q):ae;e>-1&&je.push({index:e})}const Se=xe.getTotalSize(),ke=0===Se?1:Se;o((()=>(le&&he(),()=>{le&&ye()})),[ye,he,le]),a((()=>{X&&de(fe.current?fe.current.offsetWidth-fe.current.clientWidth:0)}),[X]);const Pe=i((()=>({current:Y||null})),[Y]),Le=s((e=>{var t,l,n;F({id:null!==(t=e.id)&&void 0!==t?t:"",text:null!==(l=e.text)&&void 0!==l?l:"",value:null!==(n=e.value)&&void 0!==n?n:"",selectionType:"click",selectionConfirmed:!0})}),[F]),Te=r(Array.from({length:l.Children.count($)})),Ce=i((()=>we.filter((e=>l.isValidElement(e)&&(e.type===I||e.type===k)))),[we]),{measureElement:Ve}=xe,Ie=je.filter((e=>void 0!==e)).map((({index:e,start:t})=>{const n=we[e],r=Ce.indexOf(n),o=r>-1,i={index:e,onSelect:Le,hidden:J&&1===we.length,style:{transform:`translateY(${t}px)`},"aria-setsize":o?Ce.length:void 0,"aria-posinset":o?r+1:void 0,ref:t=>{le&&Ve(t),Te.current[e]=t},"data-index":e};return void 0!==n?l.cloneElement(n,i):null})).filter((e=>null!==e)),_e=f(we,(e=>l.isValidElement(e)&&(e.type===I||e.type===k))),Be=s(((e,t)=>{if(-1===_e)return-1;let n=L(e,t,_e,J);const r=we[n];return(l.isValidElement(r)&&r.type!==I&&r.type!==k||r.props.disabled)&&(n=Be(e,n)),n}),[we,_e,J]),Ae=s((e=>{var t;let l=ae;q&&(l=Ee(q));const n=Be(e,l);if(-1===n||l===n)return;const{text:r,value:o}=we[n].props;F({id:null===(t=Te.current[n])||void 0===t?void 0:t.id,text:null!=r?r:"",value:null!=o?o:"",selectionType:"navigationKey",selectionConfirmed:!1})}),[we,ae,Ee,Be,q,F]),He=s(((e,t)=>{var l;t?N():(e.preventDefault(),null===(l=be.current)||void 0===l||l.focus())}),[N]),Me=s((()=>{Y&&Y.getElementsByTagName("input")[0].focus()}),[Y]),De=s((e=>{if(!le)return;const{key:t}=e,n=document.activeElement===be.current;if("Tab"===t&&z)He(e,n);else if("Tab"===t)N();else if("Enter"!==t||n)T(t)&&(Me(),Ae(t));else{var r;e.preventDefault();const t=we[ae];if(!l.isValidElement(t))return N(),void F({id:"",text:"",value:"",selectionType:"enterKey",selectionConfirmed:!1});if(t.props.disabled)return;const{text:n,value:o}=t.props;F({id:null===(r=Te.current[ae])||void 0===r?void 0:r.id,text:null!=n?n:"",value:null!=o?o:"",selectionType:"enterKey",selectionConfirmed:!0})}}),[we,z,He,N,ae,F,Ae,Me,le]),We=s((e=>{"Escape"===e.key&&N()}),[N]);h({open:!!le,closeModal:We,modalRef:me,triggerRefocusOnClose:!1}),o((()=>{const e=D.current,t=v((e=>{const t=e.target;le&&t.scrollHeight-t.scrollTop===t.clientHeight&&(null==Q||Q())}),300);return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[le,D,Q]),o((()=>(window.addEventListener("keydown",De),function(){window.removeEventListener("keydown",De)})),[De,D]),o((()=>{U&&U!==pe.current?(pe.current=U,ce((e=>{const t=P(U,we,e);if(!t)return-1;const l=Ee(t.props.value);return xe.scrollToIndex(l,M),l}))):pe.current=U||""}),[we,U,Ee,xe]),o((()=>{if(!(q&&0!==Object.keys(q).length||le))return void ce(-1);const e=Ee(q);-1!==e&&ce(e)}),[Ee,q,le]),o((()=>{J&&ae===_e&&_e>-1&&xe.scrollToIndex(_e,H(A({},M),{align:"start"}))}),[$,ae,J,_e,D,xe]);const ze=i((()=>[c(3),u({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${null!=ie?ie:e.reference.width}px`})}}),...te?[d({fallbackStrategy:"initialPlacement"})]:[]]),[ie,te]),Ke=J?t(E,{children:t(V,{"data-role":"select-list-loader"})},"loader"):void 0;let Re=Ie;const $e={role:"listbox",id:K,"aria-labelledby":R,"aria-multiselectable":!!ne||void 0};return a((()=>{var e,t;z&&le&&(ge.current=(null===(t=be.current)||void 0===t||null===(e=t.parentElement)||void 0===e?void 0:e.offsetHeight)||0)}),[z,le]),X&&(Re=e(y,{children:[t(g,{scrollbarWidth:ue,children:Z}),t(O,H(A({},$e),{"aria-labelledby":R,ref:fe,listHeight:ke-48,children:Ie}))]})),t(_.Provider,{value:{currentOptionsListIndex:ae,multiselectValues:ne},children:t(S,{placement:ee,disablePortal:!0,reference:Pe,middleware:ze,isOpen:le,hide:!le,disableBackgroundUI:!0,animationFrame:!0,children:e(x,H(A({ref:ve,"data-element":"select-list-wrapper","data-role":"select-list-wrapper",isLoading:J},se),{children:[e(j,{ref:D,maxHeight:W,"data-component":"select-list-scrollable-container","data-element":"select-list-scrollable-container","data-role":"select-list-scrollable-container",hasActionButton:!!z,children:[t(w,H(A({as:X?"div":"ul","data-element":"select-list"},X?{}:$e),{ref:me,tabIndex:-1,listHeight:X?void 0:ke,children:Re})),Ke]}),z&&t(C,{ref:be,listActionButton:z,onListAction:G})]}))})})}));export{D as default};

package/esm/components/split-button/split-button.component.js

@@ -1 +1 @@
-import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import r,{forwardRef as n,useContext as i,useRef as l,useImperativeHandle as s,useEffect as a}from"react";import{ThemeContext as c}from"styled-components";import{offset as p,flip as u}from"@floating-ui/dom";import d from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import m from"../icon/icon.component.js";import b from"../button/button.component.js";import f from"./split-button.style.js";import y from"./split-button-toggle.style.js";import g from"./split-button-children.style.js";import h from"../../__internal__/utils/helpers/guid/index.js";import j from"../../__internal__/popover/popover.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import _ from"../../style/utils/filter-styled-system-margin-props.js";import O from"../../style/utils/filter-out-styled-system-spacing-props.js";import"../../style/themes/sage/index.js";import v from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import w from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import P from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import k from"./__internal__/split-button.context.js";import x from"../../hooks/__internal__/useLocale/useLocale.js";import T from"../flat-table/__internal__/flat-table.context.js";function B(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function C(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),r.forEach((function(e){B(t,e,o[e])}))}return t}function S(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e.push.apply(e,o)}return e}(Object(e)).forEach((function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(e,o))})),t}const L=n(((n,B)=>{var{align:L="left",position:D="right",buttonType:E="secondary",children:A,disabled:z=!1,iconPosition:M="before",iconType:W,onClick:F,size:I="medium",subtext:K,text:H,"data-element":N,"data-role":U,"aria-label":V,isWhite:q=!1}=n,G=function(t,e){if(null==t)return{};var o,r,n=function(t,e){if(null==t)return{};var o,r,n={},i=Object.keys(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||(n[o]=t[o]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(n[o]=t[o])}return n}(n,["align","position","buttonType","children","disabled","iconPosition","iconType","onClick","size","subtext","text","data-element","data-role","aria-label","isWhite"]);const J=x(),Q=i(c)||v,R=l(h()),X=l(h()),Y=l(null),Z=l(null),{isInFlatTable:$}=i(T),tt="secondary"===E&&q;s(B,(()=>({focusMainButton(){var t;null===(t=Y.current)||void 0===t||t.focus()},focusToggleButton(){var t;null===(t=Z.current)||void 0===t||t.focus()}})),[]);const{showAdditionalButtons:et,showButtons:ot,hideButtons:rt,buttonNode:nt,handleToggleButtonKeyDown:it,wrapperProps:lt,contextValue:st}=w(Z,.75);a((()=>{if(!$)return;const t=t=>{t.target instanceof HTMLElement&&"popup-backdrop"===t.target.dataset.role&&et&&rt()};return document.addEventListener("click",t),()=>{document.removeEventListener("click",t)}}),[rt,$,et]);return P((()=>rt())),t(f,S(C({"data-component":"split-button","data-element":N,"data-role":U,onClick:d(rt),ref:nt},_(G)),{children:[t(e,{children:[o(b,S(C({"data-element":"main-button",id:R.current,ref:Y,isWhite:tt,subtext:K,size:I,iconType:W,disabled:z,buttonType:E,iconPosition:M,onClick:t=>{null==F||F(t),et&&rt()}},O(G)),{children:H}),"main-button"),o(y,{"aria-expanded":et,"aria-controls":X.current,"aria-label":V||J.splitButton.ariaLabel(),"data-element":"toggle-button",type:"button",ref:Z,isWhite:tt,disabled:z,displayed:et,buttonType:E,size:I,onKeyDown:it,onClick:()=>{et?rt():ot()},children:o(m,{type:"dropdown",color:{primary:Q.colors.white,secondary:Q.colors.primary}[E],bg:"transparent",disabled:z})},"toggle-button")]}),o(j,{disableBackgroundUI:$&&et,disablePortal:!0,placement:"left"===D?"bottom-start":"bottom-end",popoverStrategy:"fixed",reference:nt,middleware:[p(6),u({fallbackStrategy:"initialPlacement"})],children:o(g,S(C({id:X.current},lt),{align:L,hidden:!et,children:o(k.Provider,{value:st,children:r.Children.map(A,(t=>o("li",{children:t})))})}))})]}))}));export{L as SplitButton,L as default};
+import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import r,{forwardRef as n,useContext as i,useRef as l,useImperativeHandle as s,useEffect as a,useMemo as c}from"react";import{ThemeContext as p}from"styled-components";import{offset as u,flip as d}from"@floating-ui/dom";import m from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import b from"../icon/icon.component.js";import f from"../button/button.component.js";import y from"./split-button.style.js";import g from"./split-button-toggle.style.js";import h from"./split-button-children.style.js";import j from"../../__internal__/utils/helpers/guid/index.js";import _ from"../../__internal__/popover/popover.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import O from"../../style/utils/filter-styled-system-margin-props.js";import v from"../../style/utils/filter-out-styled-system-spacing-props.js";import"../../style/themes/sage/index.js";import w from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import P from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import k from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import x from"./__internal__/split-button.context.js";import T from"../../hooks/__internal__/useLocale/useLocale.js";import B from"../flat-table/__internal__/flat-table.context.js";function C(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function S(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),r.forEach((function(e){C(t,e,o[e])}))}return t}function L(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e.push.apply(e,o)}return e}(Object(e)).forEach((function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(e,o))})),t}const D=n(((n,C)=>{var{align:D="left",position:E="right",buttonType:A="secondary",children:z,disabled:M=!1,iconPosition:W="before",iconType:F,onClick:I,size:K="medium",subtext:H,text:N,"data-element":U,"data-role":V,"aria-label":q,isWhite:G=!1}=n,J=function(t,e){if(null==t)return{};var o,r,n=function(t,e){if(null==t)return{};var o,r,n={},i=Object.keys(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||(n[o]=t[o]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(n[o]=t[o])}return n}(n,["align","position","buttonType","children","disabled","iconPosition","iconType","onClick","size","subtext","text","data-element","data-role","aria-label","isWhite"]);const Q=T(),R=i(p)||w,X=l(j()),Y=l(j()),Z=l(null),$=l(null),{isInFlatTable:tt}=i(B),et="secondary"===A&&G;s(C,(()=>({focusMainButton(){var t;null===(t=Z.current)||void 0===t||t.focus()},focusToggleButton(){var t;null===(t=$.current)||void 0===t||t.focus()}})),[]);const{showAdditionalButtons:ot,showButtons:rt,hideButtons:nt,buttonNode:it,handleToggleButtonKeyDown:lt,wrapperProps:st,contextValue:at}=P($,.75);a((()=>{if(!tt)return;const t=t=>{t.target instanceof HTMLElement&&"popup-backdrop"===t.target.dataset.role&&ot&&nt()};return document.addEventListener("click",t),()=>{document.removeEventListener("click",t)}}),[nt,tt,ot]);k((()=>nt()));const ct=c((()=>[u(6),d({fallbackStrategy:"initialPlacement"})]),[]);return t(y,L(S({"data-component":"split-button","data-element":U,"data-role":V,onClick:m(nt),ref:it},O(J)),{children:[t(e,{children:[o(f,L(S({"data-element":"main-button",id:X.current,ref:Z,isWhite:et,subtext:H,size:K,iconType:F,disabled:M,buttonType:A,iconPosition:W,onClick:t=>{null==I||I(t),ot&&nt()}},v(J)),{children:N}),"main-button"),o(g,{"aria-expanded":ot,"aria-controls":Y.current,"aria-label":q||Q.splitButton.ariaLabel(),"data-element":"toggle-button",type:"button",ref:$,isWhite:et,disabled:M,displayed:ot,buttonType:A,size:K,onKeyDown:lt,onClick:()=>{ot?nt():rt()},children:o(b,{type:"dropdown",color:{primary:R.colors.white,secondary:R.colors.primary}[A],bg:"transparent",disabled:M})},"toggle-button")]}),o(_,{isOpen:ot,disableBackgroundUI:tt&&ot,disablePortal:!0,placement:"left"===E?"bottom-start":"bottom-end",popoverStrategy:"fixed",reference:it,middleware:ct,children:o(h,L(S({"data-role":"split-button-children-container",id:Y.current},st),{align:D,hidden:!ot,children:o(x.Provider,{value:at,children:r.Children.map(z,(t=>o("li",{children:t})))})}))})]}))}));export{D as SplitButton,D as default};

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

@@ -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-breakpoint-xs: 320px;\n  --global-breakpoint-s: 600px;\n  --global-breakpoint-m: 960px;\n  --global-breakpoint-l: 1260px;\n  --global-breakpoint-xl: 1600px;\n  --global-breakpoint-xxl: 1920px;\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-container-3-xs: 1px;\n  --global-radius-container-2-xs: 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-container-2-xl: 32px;\n  --global-radius-container-3-xl: 40px;\n  --global-radius-container-4-xl: 80px;\n  --global-radius-container-circle: 999px;\n  --global-radius-action-2-xs: 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-action-2-xl: 24px;\n  --global-radius-action-circle: 999px;\n  --global-depth-none: 0 0 0 0 rgba(0,0,0,0);\n  --global-depth-lvl0: 0 0 1px 1px #0000001A, 1px 2px 2px 0 #00000033;\n  --global-depth-lvl1: 0 1px 2px 0 #0000001A, 2px 2px 10px 0 #00000033;\n  --global-depth-lvl2: 0 2px 3px 0 #0000001A, 6px 6px 30px 0 #00000026;\n  --global-depth-lvl3: 0 3px 4px 0 #0000001A, 10px 10px 60px 0 #0000001A;\n  --global-depth-sticky-b: 0 -1px 2px 0 #0000001A, 2px -2px 10px 0 #00000033;\n  --global-depth-sticky-l: -2px 0 2px 0 #0000001A, -5px 0 5px 0 #0000001A;\n  --global-depth-sticky-r: 2px 0 2px 0 #0000001A, 5px 0 5px 0 #0000001A;\n  --global-size-none: 0px;\n  --global-size-6-xs: 2px;\n  --global-size-5-xs: 4px;\n  --global-size-4-xs: 8px;\n  --global-size-3-xs: 16px;\n  --global-size-2-xs: 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-size-2-xl: 64px;\n  --global-size-3-xl: 72px;\n  --global-size-4-xl: 80px;\n  --global-space-none: 0px;\n  --global-space-layout-3-xs: 8px;\n  --global-space-layout-2-xs: 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-layout-2-xl: 64px;\n  --global-space-layout-3-xl: 72px;\n  --global-space-layout-4-xl: 80px;\n  --global-space-comp-2-xs: 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-comp-2-xl: 32px;\n  --mode-color-none: #fff0;\n  --mode-color-ai-stop-1: #13a038;\n  --mode-color-ai-stop-2: #149197;\n  --mode-color-ai-stop-3: #a87cfb;\n  --mode-color-ai-alt-stop-1: #00d639;\n  --mode-color-ai-alt-stop-2: #00d6de;\n  --mode-color-ai-alt-stop-3: #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-intense: #00528f;\n  --mode-color-colorcode-blue-harsh: #0071c3;\n  --mode-color-colorcode-blue-soft: #008ef4;\n  --mode-color-colorcode-blue-faint: #e4eeff;\n  --mode-color-colorcode-teal-intense: #005A59;\n  --mode-color-colorcode-teal-harsh: #007C7B;\n  --mode-color-colorcode-teal-soft: #009B99;\n  --mode-color-colorcode-teal-faint: #C8F5F5;\n  --mode-color-colorcode-green-intense: #005e14;\n  --mode-color-colorcode-green-harsh: #00811F;\n  --mode-color-colorcode-green-soft: #1BA12B;\n  --mode-color-colorcode-green-faint: #D1F6D6;\n  --mode-color-colorcode-lime-intense: #475600;\n  --mode-color-colorcode-lime-harsh: #627600;\n  --mode-color-colorcode-lime-soft: #7d9428;\n  --mode-color-colorcode-lime-faint: #e8f1d4;\n  --mode-color-colorcode-orange-intense: #952a00;\n  --mode-color-colorcode-orange-harsh: #d64309;\n  --mode-color-colorcode-orange-soft: #e5631c;\n  --mode-color-colorcode-orange-faint: #ffeaca;\n  --mode-color-colorcode-red-intense: #a30037;\n  --mode-color-colorcode-red-harsh: #db004e;\n  --mode-color-colorcode-red-soft: #ff3e6a;\n  --mode-color-colorcode-red-faint: #ffe8ea;\n  --mode-color-colorcode-pink-intense: #921a6e;\n  --mode-color-colorcode-pink-harsh: #c72699;\n  --mode-color-colorcode-pink-soft: #E84DB5;\n  --mode-color-colorcode-pink-faint: #fee8f5;\n  --mode-color-colorcode-purple-intense: #6a32a6;\n  --mode-color-colorcode-purple-harsh: #8f4bd7;\n  --mode-color-colorcode-purple-soft: #a375dd;\n  --mode-color-colorcode-purple-faint: #F3EBFE;\n  --mode-color-colorcode-slate-intense: #304658;\n  --mode-color-colorcode-slate-harsh: #5e6f7d;\n  --mode-color-colorcode-slate-soft: #8c98a2;\n  --mode-color-colorcode-slate-faint: #e4eff5;\n  --mode-color-colorcode-gray-intense: #505050;\n  --mode-color-colorcode-gray-harsh: #6f6f6f;\n  --mode-color-colorcode-gray-soft: #8b8b8b;\n  --mode-color-colorcode-gray-faint: #eeeeee;\n  --mode-color-colorcode-yellow-intense: #885e00;\n  --mode-color-colorcode-yellow-harsh: #9f7000;\n  --mode-color-colorcode-yellow-soft: #ffca35;\n  --mode-color-colorcode-yellow-faint: #ffedb8;\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-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-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-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-fg-nought: #FFFFFF;\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-inverse-nought: #000000;\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-surface-nought: #FFFFFF;\n  --mode-color-generic-surface-trace: #f4f5f6;\n  --mode-color-generic-surface-faint: #e8eaec;\n  --mode-color-generic-surface-harsh: #475a6a;\n  --mode-color-generic-surface-severe: #304658;\n  --mode-color-generic-surface-acute: #253b4e;\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-stop-1: #13a03826;\n  --mode-color-action-ai-active-stop-2: #14919726;\n  --mode-color-action-ai-active-stop-3: #a87cfb26;\n  --mode-color-action-ai-hover-stop-1: #13a03814;\n  --mode-color-action-ai-hover-stop-2: #14919714;\n  --mode-color-action-ai-hover-stop-3: #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: #000000eb;\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: #ffffffeb;\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: #005e14;\n  --mode-color-action-nav-default: #FFFFFF;\n  --mode-color-action-nav-default-alt: #f4f5f6;\n  --mode-color-action-nav-child: #FFFFFF;\n  --mode-color-action-nav-child-alt: #e8eaec;\n  --mode-color-action-nav-hover: #007219;\n  --mode-color-action-nav-with-active: #FFFFFF;\n  --mode-color-action-nav-with-default: #000000f2;\n  --mode-color-action-nav-with-hover: #FFFFFF;\n  --mode-color-action-nav-inverse-active: #005e14;\n  --mode-color-action-nav-inverse-default: #000000;\n  --mode-color-action-nav-inverse-default-alt: #181818;\n  --mode-color-action-nav-inverse-child: #505050;\n  --mode-color-action-nav-inverse-child-alt: #616161;\n  --mode-color-action-nav-inverse-hover: #007219;\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-stop-1: #75838f;\n  --mode-color-status-skeleton-stop-2: #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: #FFFFFF;\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-fluid-items-2-xs: 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-items-2-xl: 320px;\n  --container-size-fluid-items-3-xl: 560px;\n  --container-size-fluid-items-4-xl: 760px;\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-chart-bar-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint);\n  --dataviz-chart-bar-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-bar-fuchsia-border: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-bar-fuchsia-pattern: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-bar-red-bg-alt: var(--mode-color-colorcode-red-faint);\n  --dataviz-chart-bar-red-bg-default: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-bar-red-border: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-bar-red-pattern: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-bar-pink-bg-alt: var(--mode-color-colorcode-red-faint);\n  --dataviz-chart-bar-pink-bg-default: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-bar-pink-border: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-bar-pink-pattern: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-bar-orange-bg-alt: var(--mode-color-colorcode-orange-faint);\n  --dataviz-chart-bar-orange-bg-default: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-bar-orange-border: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-bar-orange-pattern: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-bar-gold-bg-alt: var(--mode-color-colorcode-yellow-faint);\n  --dataviz-chart-bar-gold-bg-default: var(--mode-color-colorcode-yellow-soft);\n  --dataviz-chart-bar-gold-border: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-bar-gold-pattern: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-bar-lime-bg-alt: var(--mode-color-colorcode-lime-faint);\n  --dataviz-chart-bar-lime-bg-default: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-bar-lime-border: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-bar-lime-pattern: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-bar-green-bg-alt: var(--mode-color-colorcode-green-faint);\n  --dataviz-chart-bar-green-bg-default: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-bar-green-border: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-bar-green-pattern: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-bar-teal-bg-alt: var(--mode-color-colorcode-teal-faint);\n  --dataviz-chart-bar-teal-bg-default: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-bar-teal-border: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-bar-teal-pattern: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-bar-blue-bg-alt: var(--mode-color-colorcode-blue-faint);\n  --dataviz-chart-bar-blue-bg-default: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-bar-blue-border: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-bar-blue-pattern: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-bar-navy-bg-alt: var(--mode-color-colorcode-blue-faint);\n  --dataviz-chart-bar-navy-bg-default: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-bar-navy-border: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-bar-navy-pattern: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-bar-purple-bg-alt: var(--mode-color-colorcode-purple-faint);\n  --dataviz-chart-bar-purple-bg-default: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-bar-purple-border: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-bar-purple-pattern: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-bar-slate-bg-alt: var(--mode-color-colorcode-slate-faint);\n  --dataviz-chart-bar-slate-bg-default: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-bar-slate-border: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-bar-slate-pattern: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-donut-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint);\n  --dataviz-chart-donut-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-donut-fuchsia-border: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-donut-fuchsia-pattern: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-donut-red-bg-alt: var(--mode-color-colorcode-red-faint);\n  --dataviz-chart-donut-red-bg-default: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-donut-red-border: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-donut-red-pattern: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-donut-pink-bg-alt: var(--mode-color-colorcode-red-faint);\n  --dataviz-chart-donut-pink-bg-default: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-donut-pink-border: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-donut-pink-pattern: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-donut-orange-bg-alt: var(--mode-color-colorcode-orange-faint);\n  --dataviz-chart-donut-orange-bg-default: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-donut-orange-border: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-donut-orange-pattern: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-donut-gold-bg-alt: var(--mode-color-colorcode-yellow-faint);\n  --dataviz-chart-donut-gold-bg-default: var(--mode-color-colorcode-yellow-soft);\n  --dataviz-chart-donut-gold-border: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-donut-gold-pattern: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-donut-lime-bg-alt: var(--mode-color-colorcode-lime-faint);\n  --dataviz-chart-donut-lime-bg-default: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-donut-lime-border: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-donut-lime-pattern: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-donut-green-bg-alt: var(--mode-color-colorcode-green-faint);\n  --dataviz-chart-donut-green-bg-default: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-donut-green-border: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-donut-green-pattern: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-donut-teal-bg-alt: var(--mode-color-colorcode-teal-faint);\n  --dataviz-chart-donut-teal-bg-default: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-donut-teal-border: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-donut-teal-pattern: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-donut-blue-bg-alt: var(--mode-color-colorcode-blue-faint);\n  --dataviz-chart-donut-blue-bg-default: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-donut-blue-border: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-donut-blue-pattern: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-donut-navy-bg-alt: var(--mode-color-colorcode-blue-faint);\n  --dataviz-chart-donut-navy-bg-default: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-donut-navy-border: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-donut-navy-pattern: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-donut-purple-bg-alt: var(--mode-color-colorcode-purple-faint);\n  --dataviz-chart-donut-purple-bg-default: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-donut-purple-border: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-donut-purple-pattern: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-donut-slate-bg-alt: var(--mode-color-colorcode-slate-faint);\n  --dataviz-chart-donut-slate-bg-default: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-donut-slate-border: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-donut-slate-pattern: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-line-fuchsia: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-line-red: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-line-pink: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-line-orange: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-line-gold: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-line-lime: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-line-green: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-line-teal: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-line-blue: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-line-navy: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-line-purple: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-line-slate: var(--mode-color-colorcode-slate-intense);\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-pending-bg-default: var(--mode-color-generic-bg-nought);\n  --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-harsh);\n  --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-faint);\n  --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-harsh);\n  --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-harsh);\n  --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-harsh);\n  --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-faint);\n  --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-harsh);\n  --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-harsh);\n  --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-harsh);\n  --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-faint);\n  --dataviz-generic-green-border: var(--mode-color-colorcode-green-harsh);\n  --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-harsh);\n  --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-faint);\n  --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-faint);\n  --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-harsh);\n  --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-faint);\n  --dataviz-generic-red-border: var(--mode-color-colorcode-red-harsh);\n  --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-harsh);\n  --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-harsh);\n  --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-faint);\n  --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-harsh);\n  --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-harsh);\n  --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-harsh);\n  --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-faint);\n  --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-harsh);\n  --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-harsh);\n  --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-harsh);\n  --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-faint);\n  --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-harsh);\n  --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-harsh);\n  --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-harsh);\n  --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-faint);\n  --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-harsh);\n  --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-harsh);\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  --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-primary-bg-active: var(--mode-color-action-nav-active);\n  --nav-primary-bg-default: var(--mode-color-generic-bg-inverse-nought);\n  --nav-primary-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-primary-bg-child: var(--mode-color-action-nav-inverse-child);\n  --nav-primary-bg-child-alt: var(--mode-color-action-nav-inverse-child-alt);\n  --nav-primary-bg-selected: var(--mode-color-generic-fg-soft);\n  --nav-primary-border-default: var(--mode-color-generic-fg-inverse-soft);\n  --nav-primary-divider: var(--mode-color-generic-fg-inverse-firm);\n  --nav-primary-label-active: var(--mode-color-action-nav-with-active);\n  --nav-primary-label-default: var(--mode-color-action-nav-inverse-with-default);\n  --nav-primary-label-default-alt: var(--mode-color-generic-txt-inverse-moderate);\n  --nav-primary-label-hover: var(--mode-color-action-nav-with-hover);\n  --nav-secondary-bg-active: var(--mode-color-action-nav-active);\n  --nav-secondary-bg-default: var(--mode-color-action-nav-inverse-default-alt);\n  --nav-secondary-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-secondary-bg-selected: var(--mode-color-generic-fg-soft);\n  --nav-secondary-label-active: var(--mode-color-action-nav-with-active);\n  --nav-secondary-label-default: var(--mode-color-action-nav-inverse-with-default);\n  --nav-secondary-label-default-alt: var(--mode-color-generic-txt-inverse-moderate);\n  --nav-secondary-label-hover: var(--mode-color-action-nav-with-hover);\n  --nav-tertiary-bg-active: var(--mode-color-action-nav-active);\n  --nav-tertiary-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-tertiary-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-tertiary-bg-child: var(--mode-color-action-nav-child);\n  --nav-tertiary-bg-child-alt: var(--mode-color-action-nav-child-alt);\n  --nav-tertiary-bg-selected: var(--mode-color-generic-fg-firm);\n  --nav-tertiary-border-default: var(--mode-color-generic-fg-soft);\n  --nav-tertiary-divider: var(--mode-color-generic-bg-soft);\n  --nav-tertiary-label-active: var(--mode-color-action-nav-with-active);\n  --nav-tertiary-label-default: var(--mode-color-action-nav-with-default);\n  --nav-tertiary-label-default-alt: var(--mode-color-generic-txt-moderate);\n  --nav-tertiary-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-trace);\n  --page-txt-alt: var(--mode-color-generic-txt-moderate);\n  --page-txt-default: var(--mode-color-generic-txt-severe);\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-data-entry-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-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-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-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-nought);\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-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-generic-bg-delicate);\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-surface-trace);\n  --table-header-subtle-bg-default: var(--mode-color-none);\n  --table-header-subtle-bg-hover: var(--mode-color-generic-surface-faint);\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-subtle-label-hover: var(--mode-color-generic-txt-extreme);\n  --table-header-harsh-bg-alt: var(--mode-color-generic-surface-severe);\n  --table-header-harsh-bg-default: var(--mode-color-generic-surface-harsh);\n  --table-header-harsh-bg-hover: var(--mode-color-generic-surface-acute);\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-header-harsh-label-hover: var(--mode-color-generic-txt-inverse-extreme);\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-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\n  --carbon-zindex-small-overlay: 10;\n  --carbon-zindex-overlay: 1000;\n  --carbon-zindex-nav: 2998;\n  --carbon-zindex-global-nav: 2999;\n  --carbon-zindex-modal: 3000;\n  --carbon-zindex-header: 4000;\n  --carbon-zindex-full-screen-modal: 5000;\n  --carbon-zindex-popover: 6000;\n  --carbon-zindex-notification: 7000;\n  --carbon-zindex-above-all: 9999;\n\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-breakpoint-xs: 320px;\n  --global-breakpoint-s: 600px;\n  --global-breakpoint-m: 960px;\n  --global-breakpoint-l: 1260px;\n  --global-breakpoint-xl: 1600px;\n  --global-breakpoint-xxl: 1920px;\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-container-3-xs: 1px;\n  --global-radius-container-2-xs: 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-container-2-xl: 32px;\n  --global-radius-container-3-xl: 40px;\n  --global-radius-container-4-xl: 80px;\n  --global-radius-container-circle: 999px;\n  --global-radius-action-2-xs: 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-action-2-xl: 24px;\n  --global-radius-action-circle: 999px;\n  --global-depth-none: 0 0 0 0 rgba(0,0,0,0);\n  --global-depth-lvl0: 0 0 1px 1px #0000001A, 1px 2px 2px 0 #00000033;\n  --global-depth-lvl1: 0 1px 2px 0 #0000001A, 2px 2px 10px 0 #00000033;\n  --global-depth-lvl2: 0 2px 3px 0 #0000001A, 6px 6px 30px 0 #00000026;\n  --global-depth-lvl3: 0 3px 4px 0 #0000001A, 10px 10px 60px 0 #0000001A;\n  --global-depth-sticky-b: 0 -1px 2px 0 #0000001A, 2px -2px 10px 0 #00000033;\n  --global-depth-sticky-l: -2px 0 2px 0 #0000001A, -5px 0 5px 0 #0000001A;\n  --global-depth-sticky-r: 2px 0 2px 0 #0000001A, 5px 0 5px 0 #0000001A;\n  --global-size-none: 0px;\n  --global-size-6-xs: 2px;\n  --global-size-5-xs: 4px;\n  --global-size-4-xs: 8px;\n  --global-size-3-xs: 16px;\n  --global-size-2-xs: 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-size-2-xl: 64px;\n  --global-size-3-xl: 72px;\n  --global-size-4-xl: 80px;\n  --global-space-none: 0px;\n  --global-space-layout-3-xs: 8px;\n  --global-space-layout-2-xs: 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-layout-2-xl: 64px;\n  --global-space-layout-3-xl: 72px;\n  --global-space-layout-4-xl: 80px;\n  --global-space-comp-2-xs: 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-comp-2-xl: 32px;\n  --mode-color-none: #fff0;\n  --mode-color-ai-stop-1: #13a038;\n  --mode-color-ai-stop-2: #149197;\n  --mode-color-ai-stop-3: #a87cfb;\n  --mode-color-ai-alt-stop-1: #00d639;\n  --mode-color-ai-alt-stop-2: #00d6de;\n  --mode-color-ai-alt-stop-3: #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-intense: #00528f;\n  --mode-color-colorcode-blue-harsh: #0071c3;\n  --mode-color-colorcode-blue-soft: #008ef4;\n  --mode-color-colorcode-blue-faint: #e4eeff;\n  --mode-color-colorcode-teal-intense: #005A59;\n  --mode-color-colorcode-teal-harsh: #007C7B;\n  --mode-color-colorcode-teal-soft: #009B99;\n  --mode-color-colorcode-teal-faint: #C8F5F5;\n  --mode-color-colorcode-green-intense: #005e14;\n  --mode-color-colorcode-green-harsh: #00811F;\n  --mode-color-colorcode-green-soft: #1BA12B;\n  --mode-color-colorcode-green-faint: #D1F6D6;\n  --mode-color-colorcode-lime-intense: #475600;\n  --mode-color-colorcode-lime-harsh: #627600;\n  --mode-color-colorcode-lime-soft: #7d9428;\n  --mode-color-colorcode-lime-faint: #e8f1d4;\n  --mode-color-colorcode-orange-intense: #952a00;\n  --mode-color-colorcode-orange-harsh: #d64309;\n  --mode-color-colorcode-orange-soft: #e5631c;\n  --mode-color-colorcode-orange-faint: #ffeaca;\n  --mode-color-colorcode-red-intense: #a30037;\n  --mode-color-colorcode-red-harsh: #db004e;\n  --mode-color-colorcode-red-soft: #ff3e6a;\n  --mode-color-colorcode-red-faint: #ffe8ea;\n  --mode-color-colorcode-pink-intense: #921a6e;\n  --mode-color-colorcode-pink-harsh: #c72699;\n  --mode-color-colorcode-pink-soft: #E84DB5;\n  --mode-color-colorcode-pink-faint: #fee8f5;\n  --mode-color-colorcode-purple-intense: #6a32a6;\n  --mode-color-colorcode-purple-harsh: #8f4bd7;\n  --mode-color-colorcode-purple-soft: #a375dd;\n  --mode-color-colorcode-purple-faint: #F3EBFE;\n  --mode-color-colorcode-slate-intense: #304658;\n  --mode-color-colorcode-slate-harsh: #5e6f7d;\n  --mode-color-colorcode-slate-soft: #8c98a2;\n  --mode-color-colorcode-slate-faint: #e4eff5;\n  --mode-color-colorcode-gray-intense: #505050;\n  --mode-color-colorcode-gray-harsh: #6f6f6f;\n  --mode-color-colorcode-gray-soft: #8b8b8b;\n  --mode-color-colorcode-gray-faint: #eeeeee;\n  --mode-color-colorcode-yellow-intense: #885e00;\n  --mode-color-colorcode-yellow-harsh: #9f7000;\n  --mode-color-colorcode-yellow-soft: #ffca35;\n  --mode-color-colorcode-yellow-faint: #ffedb8;\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-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-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-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-fg-nought: #FFFFFF;\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-inverse-nought: #000000;\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-surface-nought: #FFFFFF;\n  --mode-color-generic-surface-trace: #f4f5f6;\n  --mode-color-generic-surface-faint: #e8eaec;\n  --mode-color-generic-surface-harsh: #475a6a;\n  --mode-color-generic-surface-severe: #304658;\n  --mode-color-generic-surface-acute: #253b4e;\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-stop-1: #13a03826;\n  --mode-color-action-ai-active-stop-2: #14919726;\n  --mode-color-action-ai-active-stop-3: #a87cfb26;\n  --mode-color-action-ai-hover-stop-1: #13a03814;\n  --mode-color-action-ai-hover-stop-2: #14919714;\n  --mode-color-action-ai-hover-stop-3: #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: #000000eb;\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: #ffffffeb;\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: #005e14;\n  --mode-color-action-nav-default: #FFFFFF;\n  --mode-color-action-nav-default-alt: #f4f5f6;\n  --mode-color-action-nav-child: #FFFFFF;\n  --mode-color-action-nav-child-alt: #e8eaec;\n  --mode-color-action-nav-hover: #007219;\n  --mode-color-action-nav-with-active: #FFFFFF;\n  --mode-color-action-nav-with-default: #000000f2;\n  --mode-color-action-nav-with-hover: #FFFFFF;\n  --mode-color-action-nav-inverse-active: #005e14;\n  --mode-color-action-nav-inverse-default: #000000;\n  --mode-color-action-nav-inverse-default-alt: #181818;\n  --mode-color-action-nav-inverse-child: #505050;\n  --mode-color-action-nav-inverse-child-alt: #616161;\n  --mode-color-action-nav-inverse-hover: #007219;\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-stop-1: #75838f;\n  --mode-color-status-skeleton-stop-2: #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: #FFFFFF;\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-generic-bg-delicate);\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-generic-bg-delicate);\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-generic-bg-delicate);\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-txt-alt: var(--mode-color-generic-txt-moderate);\n  --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n  --container-standard-icon: 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-inverse-icon: 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-fluid-items-2-xs: 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-items-2-xl: 320px;\n  --container-size-fluid-items-3-xl: 560px;\n  --container-size-fluid-items-4-xl: 760px;\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  --focus-shadow-default: 0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border);\n  --focus-shadow-inset: inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt);\n  --dataviz-chart-bar-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint);\n  --dataviz-chart-bar-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-bar-fuchsia-border: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-bar-fuchsia-pattern: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-bar-red-bg-alt: var(--mode-color-colorcode-red-faint);\n  --dataviz-chart-bar-red-bg-default: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-bar-red-border: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-bar-red-pattern: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-bar-pink-bg-alt: var(--mode-color-colorcode-red-faint);\n  --dataviz-chart-bar-pink-bg-default: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-bar-pink-border: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-bar-pink-pattern: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-bar-orange-bg-alt: var(--mode-color-colorcode-orange-faint);\n  --dataviz-chart-bar-orange-bg-default: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-bar-orange-border: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-bar-orange-pattern: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-bar-gold-bg-alt: var(--mode-color-colorcode-yellow-faint);\n  --dataviz-chart-bar-gold-bg-default: var(--mode-color-colorcode-yellow-soft);\n  --dataviz-chart-bar-gold-border: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-bar-gold-pattern: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-bar-lime-bg-alt: var(--mode-color-colorcode-lime-faint);\n  --dataviz-chart-bar-lime-bg-default: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-bar-lime-border: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-bar-lime-pattern: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-bar-green-bg-alt: var(--mode-color-colorcode-green-faint);\n  --dataviz-chart-bar-green-bg-default: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-bar-green-border: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-bar-green-pattern: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-bar-teal-bg-alt: var(--mode-color-colorcode-teal-faint);\n  --dataviz-chart-bar-teal-bg-default: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-bar-teal-border: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-bar-teal-pattern: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-bar-blue-bg-alt: var(--mode-color-colorcode-blue-faint);\n  --dataviz-chart-bar-blue-bg-default: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-bar-blue-border: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-bar-blue-pattern: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-bar-navy-bg-alt: var(--mode-color-colorcode-blue-faint);\n  --dataviz-chart-bar-navy-bg-default: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-bar-navy-border: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-bar-navy-pattern: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-bar-purple-bg-alt: var(--mode-color-colorcode-purple-faint);\n  --dataviz-chart-bar-purple-bg-default: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-bar-purple-border: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-bar-purple-pattern: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-bar-slate-bg-alt: var(--mode-color-colorcode-slate-faint);\n  --dataviz-chart-bar-slate-bg-default: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-bar-slate-border: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-bar-slate-pattern: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-donut-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint);\n  --dataviz-chart-donut-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-donut-fuchsia-border: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-donut-fuchsia-pattern: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-donut-red-bg-alt: var(--mode-color-colorcode-red-faint);\n  --dataviz-chart-donut-red-bg-default: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-donut-red-border: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-donut-red-pattern: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-donut-pink-bg-alt: var(--mode-color-colorcode-red-faint);\n  --dataviz-chart-donut-pink-bg-default: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-donut-pink-border: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-donut-pink-pattern: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-donut-orange-bg-alt: var(--mode-color-colorcode-orange-faint);\n  --dataviz-chart-donut-orange-bg-default: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-donut-orange-border: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-donut-orange-pattern: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-donut-gold-bg-alt: var(--mode-color-colorcode-yellow-faint);\n  --dataviz-chart-donut-gold-bg-default: var(--mode-color-colorcode-yellow-soft);\n  --dataviz-chart-donut-gold-border: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-donut-gold-pattern: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-donut-lime-bg-alt: var(--mode-color-colorcode-lime-faint);\n  --dataviz-chart-donut-lime-bg-default: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-donut-lime-border: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-donut-lime-pattern: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-donut-green-bg-alt: var(--mode-color-colorcode-green-faint);\n  --dataviz-chart-donut-green-bg-default: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-donut-green-border: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-donut-green-pattern: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-donut-teal-bg-alt: var(--mode-color-colorcode-teal-faint);\n  --dataviz-chart-donut-teal-bg-default: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-donut-teal-border: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-donut-teal-pattern: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-donut-blue-bg-alt: var(--mode-color-colorcode-blue-faint);\n  --dataviz-chart-donut-blue-bg-default: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-donut-blue-border: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-donut-blue-pattern: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-donut-navy-bg-alt: var(--mode-color-colorcode-blue-faint);\n  --dataviz-chart-donut-navy-bg-default: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-donut-navy-border: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-donut-navy-pattern: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-donut-purple-bg-alt: var(--mode-color-colorcode-purple-faint);\n  --dataviz-chart-donut-purple-bg-default: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-donut-purple-border: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-donut-purple-pattern: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-donut-slate-bg-alt: var(--mode-color-colorcode-slate-faint);\n  --dataviz-chart-donut-slate-bg-default: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-donut-slate-border: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-donut-slate-pattern: var(--mode-color-colorcode-slate-intense);\n  --dataviz-chart-line-fuchsia: var(--mode-color-colorcode-pink-intense);\n  --dataviz-chart-line-red: var(--mode-color-colorcode-red-intense);\n  --dataviz-chart-line-pink: var(--mode-color-colorcode-red-soft);\n  --dataviz-chart-line-orange: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-chart-line-gold: var(--mode-color-colorcode-yellow-harsh);\n  --dataviz-chart-line-lime: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-chart-line-green: var(--mode-color-colorcode-green-harsh);\n  --dataviz-chart-line-teal: var(--mode-color-colorcode-teal-soft);\n  --dataviz-chart-line-blue: var(--mode-color-colorcode-blue-soft);\n  --dataviz-chart-line-navy: var(--mode-color-colorcode-blue-intense);\n  --dataviz-chart-line-purple: var(--mode-color-colorcode-purple-intense);\n  --dataviz-chart-line-slate: var(--mode-color-colorcode-slate-intense);\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-pending-bg-default: var(--mode-color-generic-bg-nought);\n  --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-harsh);\n  --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-faint);\n  --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-harsh);\n  --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-harsh);\n  --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-harsh);\n  --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-faint);\n  --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-harsh);\n  --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-harsh);\n  --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-harsh);\n  --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-faint);\n  --dataviz-generic-green-border: var(--mode-color-colorcode-green-harsh);\n  --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-harsh);\n  --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-faint);\n  --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-harsh);\n  --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-faint);\n  --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-harsh);\n  --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-harsh);\n  --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-faint);\n  --dataviz-generic-red-border: var(--mode-color-colorcode-red-harsh);\n  --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-harsh);\n  --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-harsh);\n  --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-faint);\n  --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-harsh);\n  --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-harsh);\n  --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-harsh);\n  --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-faint);\n  --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-harsh);\n  --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-harsh);\n  --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-harsh);\n  --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-faint);\n  --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-harsh);\n  --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-harsh);\n  --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-harsh);\n  --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-faint);\n  --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-harsh);\n  --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-harsh);\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  --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-primary-bg-active: var(--mode-color-action-nav-active);\n  --nav-primary-bg-default: var(--mode-color-generic-bg-inverse-nought);\n  --nav-primary-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-primary-bg-child: var(--mode-color-action-nav-inverse-child);\n  --nav-primary-bg-child-alt: var(--mode-color-action-nav-inverse-child-alt);\n  --nav-primary-bg-selected: var(--mode-color-generic-fg-soft);\n  --nav-primary-border-default: var(--mode-color-generic-fg-inverse-soft);\n  --nav-primary-divider: var(--mode-color-generic-fg-inverse-firm);\n  --nav-primary-label-active: var(--mode-color-action-nav-with-active);\n  --nav-primary-label-default: var(--mode-color-action-nav-inverse-with-default);\n  --nav-primary-label-default-alt: var(--mode-color-generic-txt-inverse-moderate);\n  --nav-primary-label-hover: var(--mode-color-action-nav-with-hover);\n  --nav-secondary-bg-active: var(--mode-color-action-nav-active);\n  --nav-secondary-bg-default: var(--mode-color-action-nav-inverse-default-alt);\n  --nav-secondary-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-secondary-bg-selected: var(--mode-color-generic-fg-soft);\n  --nav-secondary-label-active: var(--mode-color-action-nav-with-active);\n  --nav-secondary-label-default: var(--mode-color-action-nav-inverse-with-default);\n  --nav-secondary-label-default-alt: var(--mode-color-generic-txt-inverse-moderate);\n  --nav-secondary-label-hover: var(--mode-color-action-nav-with-hover);\n  --nav-tertiary-bg-active: var(--mode-color-action-nav-active);\n  --nav-tertiary-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-tertiary-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-tertiary-bg-child: var(--mode-color-action-nav-child);\n  --nav-tertiary-bg-child-alt: var(--mode-color-action-nav-child-alt);\n  --nav-tertiary-bg-selected: var(--mode-color-generic-fg-firm);\n  --nav-tertiary-border-default: var(--mode-color-generic-fg-soft);\n  --nav-tertiary-divider: var(--mode-color-generic-bg-soft);\n  --nav-tertiary-label-active: var(--mode-color-action-nav-with-active);\n  --nav-tertiary-label-default: var(--mode-color-action-nav-with-default);\n  --nav-tertiary-label-default-alt: var(--mode-color-generic-txt-moderate);\n  --nav-tertiary-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-trace);\n  --page-txt-alt: var(--mode-color-generic-txt-moderate);\n  --page-txt-default: var(--mode-color-generic-txt-severe);\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-data-entry-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-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-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-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-nought);\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-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-generic-bg-delicate);\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-surface-trace);\n  --table-header-subtle-bg-default: var(--mode-color-none);\n  --table-header-subtle-bg-hover: var(--mode-color-generic-surface-faint);\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-subtle-label-hover: var(--mode-color-generic-txt-extreme);\n  --table-header-harsh-bg-alt: var(--mode-color-generic-surface-severe);\n  --table-header-harsh-bg-default: var(--mode-color-generic-surface-harsh);\n  --table-header-harsh-bg-hover: var(--mode-color-generic-surface-acute);\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-header-harsh-label-hover: var(--mode-color-generic-txt-inverse-extreme);\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-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\n  --carbon-zindex-small-overlay: 10;\n  --carbon-zindex-overlay: 1000;\n  --carbon-zindex-nav: 2998;\n  --carbon-zindex-global-nav: 2999;\n  --carbon-zindex-modal: 3000;\n  --carbon-zindex-header: 4000;\n  --carbon-zindex-full-screen-modal: 5000;\n  --carbon-zindex-popover: 6000;\n  --carbon-zindex-notification: 7000;\n  --carbon-zindex-above-all: 9999;\n\n";
 export default _default;