npm - carbon-react - Versions diffs - 158.34.0 → 158.35.0 - Mend

carbon-react 158.34.0 → 158.35.0

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

Files changed (39) hide show

package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions-typeahead-menu-item.component.d.ts CHANGED Viewed

@@ -1,9 +1,8 @@
 import React from "react";
 import MentionTypeaheadOption from "./mention-typeahead-option.class";
-export declare const MentionsTypeaheadMenuItem: ({ index, isSelected, namespace, onClick, onMouseEnter, option, currentQueryString, }: {
+export declare const MentionsTypeaheadMenuItem: ({ index, isSelected, onClick, onMouseEnter, option, currentQueryString, ...rest }: {
     index: number;
     isSelected: boolean;
-    namespace: string;
     onClick: () => void;
     onMouseEnter: () => void;
     option: MentionTypeaheadOption;

package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions-typeahead-menu-item.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("./mentions.style.js"),r=require("../../../../portrait/portrait.component.js");~~const~~ n=({text:t,query:r})=>{if(!r)return e.jsx("span",{children:t});const n=t.toLowerCase(),s=r.toLowerCase(),i=n.indexOf(s);if(-1===i)return e.jsx("span",{children:t});const o=t.slice(0,i),a=t.slice(i,i+r.length),c=t.slice(i+r.length);return e.jsxs("span",{className:"text",children:[o,e.jsx("strong",{children:a}),c]})},s=({index:s,isSelected:i,~~namespace:o,~~onClick:a,onMouseEnter:c,option:l,currentQueryString:u})=>{const d="item"+(i?" selected":"");return e.jsxs(t.MentionsListItem,{tabIndex:-1,className:d,ref:l.setRefElement,role:"option","aria-selected":i,id~~:`${o}-~~typeahead-item-${s}`,onMouseEnter:c,onClick:a,onKeyDown:a,"aria-label":l.name,children:[e.jsx(r.Portrait,{initials:l.initials,src:l.src,iconType:l.iconType\|\|"individual",size:"XS",shape:"circle"}),e.jsx(n,{text:l.name,query:u})]},l.id)};exports.MentionsTypeaheadMenuItem=s,exports.default=s;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("./mentions.style.js"),r=require("../../../../portrait/portrait.component.js");function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const i=({text:t,query:r})=>{if(!r)return e.jsx("span",{children:t});const n=t.toLowerCase(),i=r.toLowerCase(),o=n.indexOf(i);if(-1===o)return e.jsx("span",{children:t});const s=t.slice(0,o),c=t.slice(o,o+r.length),l=t.slice(o+r.length);return e.jsxs("span",{className:"text",children:[s,e.jsx("strong",{children:c}),l]})},o=o=>{var{index:s,isSelected:c,onClick:l,onMouseEnter:a,option:u,currentQueryString:p}=o,y=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0\|\|(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(o,["index","isSelected","onClick","onMouseEnter","option","currentQueryString"]);const f="item mentions-list-item"+(c?" selected":"");return e.jsxs(t.MentionsListItem,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),i.forEach((function(t){n(e,t,r[t])}))}return e}({tabIndex:-1,className:f,ref:u.setRefElement,role:"option","aria-selected":c,id:`typeahead-item-${s}`,onMouseEnter:a,onClick:l,onKeyDown:l,"aria-label":u.name},y),O=null!=(O={children:[e.jsx(r.Portrait,{initials:u.initials,src:u.src,iconType:u.iconType\|\|"individual",size:"XS",shape:"circle"}),e.jsx(i,{text:u.name,query:p})]})?O:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(O)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(O)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(O,e))})),b),u.id);var b,O};exports.MentionsTypeaheadMenuItem=o,exports.default=o;

package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/react/LexicalTypeaheadMenuPlugin"),r=require("lexical"),i=require("react"),o=require("react-dom"),s=require("./constants.js"),a=require("./helpers.js"),l=require("./mentions-typeahead-menu-item.component.js"),c=require("./mention-typeahead-option.class.js"),u=require("../../__nodes__/mention.node.js"),d=require("../../../../../hooks/__internal__/useLocale/useLocale.js"),p=require("./mentions.style.js");function m(e){return e&&e.__esModule?e:{default:e}}var x=m(o);const M=({namespace:o,searchOptions:m})=>{const[M]=t.useLexicalComposerContext(),[g,h]=i.useState(null),_=i.useMemo((()=>g?m.filter((e=>e.name.toLowerCase().includes(g.toLowerCase()))):[]),[g,m]),C=d.default(),T=i.useMemo((()=>_.map((e=>new c.MentionTypeaheadOption(e.id,e.name,e.initials,e.iconType,e.src))).slice(0,s.SUGGESTION_LIST_LENGTH_LIMIT)),[_]),y=i.useCallback(((e,t,n)=>{M.update((()=>{const i=u.$createMentionNode(`@${e.name}`);t&&t.replace(i);const o=i.getNextSibling();if(r.$isTextNode(o)&&o.getTextContent().startsWith(" "))o.select(1,1);else{const e=r.$createTextNode(" ");i.insertAfter(e),e.select()}n()}))}),[M]);~~return~~ i.useEffect((()=>M.registerCommand(r.KEY_BACKSPACE_COMMAND,(()=>{const e=r.$getSelection();if(!r.$isRangeSelection(e)\|\|!e.isCollapsed())return!1;const{anchor:t}=e,n=t.getNode();if(u.$isMentionNode(n)){const e=new r.TextNode(n.getTextContent());return n.replace(e),!0}return!1}),r.COMMAND_PRIORITY_LOW)),[M]),e.jsx(n.LexicalTypeaheadMenuPlugin,{onQueryChange:h,onSelectOption:y,triggerFn:e=>a.getPossibleQueryMatch(e),options:T,menuRenderFn:(t,{selectedIndex:n,selectOptionAndCleanUp:r,setHighlightedIndex:i})=>t.current&&_.length?x.default.createPortal(e.jsx(p.TypeaheadPopover,{className:"carbon-portal-mentions",id:`${o}-mentions-menu`,children:e.jsx(p.MentionsList,{"data-role":"mention-list",id:`${o}-mention-list`,role:"~~listbox~~",~~"aria-label"~~:~~C.textEditor.mentions.listAriaLabel()~~,children:T.map(((t,s)=>{var a,c;const u=null!==(c=null!==(a=t.key)&&void 0!==a?a:t.id)&&void 0!==c?c:`${o}-${s}`;return e.jsx(l.MentionsTypeaheadMenuItem,{index:s,isSelected:n===s,onClick:()=>{i(s),r(t)},onMouseEnter:()=>{i(s)},option:t,~~namespace:o,~~currentQueryString:null!=g?g:void 0},u)}))})}),~~t.current~~):null})};exports.MentionsPlugin=M,exports.default=M;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/react/LexicalTypeaheadMenuPlugin"),r=require("lexical"),i=require("react"),o=require("react-dom"),s=require("./constants.js"),l=require("./helpers.js"),a=require("./mentions-typeahead-menu-item.component.js"),u=require("./mention-typeahead-option.class.js"),c=require("../../__nodes__/mention.node.js"),d=require("../../../../../hooks/__internal__/useLocale/useLocale.js"),p=require("./mentions.style.js"),m=require("../../__providers__/plugin-provider.js");function x(e){return e&&e.__esModule?e:{default:e}}var g=x(o);const _=({namespace:o,searchOptions:x})=>{const[_]=t.useLexicalComposerContext(),[f,C]=i.useState(null),M=i.useMemo((()=>f?x.filter((e=>e.name.toLowerCase().includes(f.toLowerCase()))):[]),[f,x]),h=d.default(),v=i.useMemo((()=>M.map((e=>new u.MentionTypeaheadOption(e.id,e.name,e.initials,e.iconType,e.src))).slice(0,s.SUGGESTION_LIST_LENGTH_LIMIT)),[M]),T=i.useCallback(((e,t,n)=>{_.update((()=>{const i=c.$createMentionNode(`@${e.name}`);t&&t.replace(i);const o=i.getNextSibling();if(r.$isTextNode(o)&&o.getTextContent().startsWith(" "))o.select(1,1);else{const e=r.$createTextNode(" ");i.insertAfter(e),e.select()}n()}))}),[_]);i.useEffect((()=>_.registerCommand(r.KEY_BACKSPACE_COMMAND,(()=>{const e=r.$getSelection();if(!r.$isRangeSelection(e)\|\|!e.isCollapsed())return!1;const{anchor:t}=e,n=t.getNode();if(c.$isMentionNode(n)){const e=new r.TextNode(n.getTextContent());return n.replace(e),!0}return!1}),r.COMMAND_PRIORITY_LOW)),[_]);const{getParentRef:L}=m.usePluginContext(),j=L(),q=null==j?void 0:j.getBoundingClientRect();var y;const N=null!==(y=null==q?void 0:q.left)&&void 0!==y?y:0;var O;const b=null!==(O=null==q?void 0:q.top)&&void 0!==O?O:0;return e.jsx(n.LexicalTypeaheadMenuPlugin,{onQueryChange:C,onSelectOption:T,triggerFn:e=>l.getPossibleQueryMatch(e),options:v,parent:j,menuRenderFn:(t,{selectedIndex:n,selectOptionAndCleanUp:r,setHighlightedIndex:i})=>{const s=t.current;return s&&0!==M.length?(s.setAttribute("aria-label",h.textEditor.mentions.listAriaLabel()),g.default.createPortal(e.jsx(p.TypeaheadPopover,{className:"carbon-portal-mentions",id:`${o}-mentions-menu`,parentOffsetLeft:N,parentOffsetTop:b,children:e.jsx(p.MentionsList,{"data-role":"mention-list",id:`${o}-mention-list`,role:"group",tabIndex:0,children:v.map(((t,s)=>{var l,u;const c=null!==(u=null!==(l=t.key)&&void 0!==l?l:t.id)&&void 0!==u?u:`${o}-${s}`;return e.jsx(a.MentionsTypeaheadMenuItem,{index:s,isSelected:n===s,onClick:()=>{i(s),r(t)},onMouseEnter:()=>{i(s)},option:t,currentQueryString:null!=f?f:void 0},c)}))})}),s)):(null==s\|\|s.removeAttribute("aria-label"),null)}})};exports.MentionsPlugin=_,exports.default=_;

package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions.style.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
-export declare const TypeaheadPopover: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TypeaheadPopover: import("styled-components").StyledComponent<"div", any, {
+    parentOffsetLeft: number;
+    parentOffsetTop: number;
+}, never>;
 export declare const MentionsList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const MentionsListItem: import("styled-components").StyledComponent<"li", any, {}, never>;

package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions.style.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";function e(e){return e&&e.__esModule?e:{default:e}}var o=e(require("styled-components"));const i=o.default.div.withConfig({displayName:"mentions.style__TypeaheadPopover",componentId:"sc-~~fd1b05a2~~-0"})(["background~~:#fff~~;box-shadow:~~0px 5px 10px rgba~~(~~0,0,0,0.3~~);border-radius:~~8px~~;position:relative;width:250px;"]),t=o.default.ul.withConfig({displayName:"mentions.style__MentionsList",componentId:"sc-~~fd1b05a2~~-1"})(["padding:~~8px~~ 0;list-style:none;margin:0;border-radius:~~8px~~;max-height:200px;overflow-y:scroll;&::-webkit-scrollbar{display:none;}-ms-overflow-style:none;scrollbar-width:none;"]),n=o.default.li.withConfig({displayName:"mentions.style__MentionsListItem",componentId:"sc-~~fd1b05a2~~-2"})(['padding:~~8px~~ ~~24px~~;color~~:#0000008c~~;cursor:pointer;~~line~~-~~height:16px;~~font-~~size:15px~~;display:flex;align-content:center;flex-direction:row;flex-shrink:0;background-color~~:#fff~~;border-radius:0;border:0;&:hover{~~background~~-~~color:#eee~~;~~color:#000;~~border-radius:0;~~div[data-component="portrait"]{color:#000;[data-element="initials"],[data-component="icon"]{color:#000;~~}}}&.~~active~~{~~display~~:~~flex~~;~~width~~:~~20px;height:20px;background~~-~~size:contain~~;}~~&.selected{background:#eee;}~~.text{display:flex;~~line~~-~~height:20px~~;flex-grow:1;min-width:150px;margin-left:~~8px~~;align-items:center;~~font-size:14px;~~margin-top:-1px;white-space:pre;}div[data-component="portrait"]{~~background~~-~~color:#f2f5f6ff~~;~~color:#000000e6~~;min-width:~~24px~~;height:~~24px~~;overflow:hidden;border-radius:~~50%;~~border:~~1px~~ solid ~~#ccd6dbff~~;display:inline-block;~~font-size:13px;~~[data-element="initials"],[data-component="icon"]{color~~:#8b8b8b~~;}}']);exports.MentionsList=t,exports.MentionsListItem=n,exports.TypeaheadPopover=i;
1	+ "use strict";function o(o){return o&&o.__esModule?o:{default:o}}var e=o(require("styled-components"));const r=e.default.div.withConfig({displayName:"mentions.style__TypeaheadPopover",componentId:"sc-17cb70da-0"})(["background:var(--popover-bg-default);box-shadow:var(--global-depth-lvl1);border-radius:var(--global-radius-action-m);position:relative;top:","px;left:","px;width:250px;"],(({parentOffsetTop:o})=>-o),(({parentOffsetLeft:o})=>-o)),a=e.default.ul.withConfig({displayName:"mentions.style__MentionsList",componentId:"sc-17cb70da-1"})(["padding:var(--global-space-comp-s) 0;list-style:none;margin:0;border-radius:var(--global-radius-container-m);max-height:200px;overflow-y:scroll;&::-webkit-scrollbar{display:none;}-ms-overflow-style:none;scrollbar-width:none;"]),t=e.default.li.withConfig({displayName:"mentions.style__MentionsListItem",componentId:"sc-17cb70da-2"})(['padding:var(--global-space-comp-s) var(--global-space-comp-xl);color:var(--input-dropdown-label-default);cursor:pointer;font:var(--global-font-static-comp-regular-m);display:flex;align-content:center;flex-direction:row;flex-shrink:0;background-color:var(--popover-bg-default);border-radius:0;border:0;&:hover{color:var(--popover-label-hover);border-radius:0;}}&.selected{background:var(--popover-bg-hover);color:var(--popover-label-hover);}.text{display:flex;font:var(--global-font-static-comp-regular-m);flex-grow:1;min-width:150px;margin-left:var(--global-space-comp-xs);align-items:center;margin-top:-1px;white-space:pre;}div[data-component="portrait"]{color:var(--input-dropdown-label-default);font:var(--profile-font-initials-xs);min-width:var(--profile-size-outside-xs);height:var(--profile-size-outside-xs);overflow:hidden;border-radius:var(--global-radius-container-circle);border:var(--global-borderwidth-xs) solid var(--profile-border-default);display:inline-block;[data-element="initials"],[data-component="icon"]{color:var(--input-dropdown-label-default);}}']);exports.MentionsList=a,exports.MentionsListItem=t,exports.TypeaheadPopover=r;

package/lib/components/text-editor/text-editor.component.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@lexical/react/LexicalComposer"),t=require("@lexical/react/LexicalClickableLinkPlugin"),n=require("@lexical/react/LexicalErrorBoundary"),i=require("@lexical/react/LexicalHistoryPlugin"),a=require("@lexical/react/LexicalMarkdownShortcutPlugin"),l=require("@lexical/react/LexicalRichTextPlugin"),o=require("@lexical/react/LexicalLinkPlugin"),s=require("@lexical/react/LexicalListPlugin"),u=require("@lexical/react/LexicalOnChangePlugin"),d=require("~~lexical~~"),c=require("~~react~~"),_=require("../../__internal__/label/label.component.js"),p=require("../../hooks/__internal__/useLocale/useLocale.js"),x=require("../../__internal__/utils/logger/index.js"),g=require("./__internal__/__utils__/constants.js"),j=require("./__internal__/__plugins__/AutoLinker/auto-link.component.js"),f=require("./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js"),m=require("./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js");require("./__internal__/__plugins__/useCursorAtEnd/index.js");var v=require("./text-editor.context.js"),h=require("./text-editor.style.js"),b=require("./__internal__/__utils__/helpers.js"),y=require("../../__internal__/hint-text/hint-text.component.js"),q=require("../../__internal__/validation-message/validation-message.component.js"),w=require("../textbox/textbox.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var P=require("../../style/utils/filter-styled-system-margin-props.js"),O=require("../../__internal__/utils/helpers/tags/tags.js"),E=require("./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js"),L=require("./__internal__/__utils__/theme.js"),C=require("./__internal__/__ui__/CharacterCounter/character-counter.component.js"),T=require("./__internal__/__ui__/ContentEditor/content-editor.component.js");require("./__internal__/__ui__/LinkPreviewer/link-previewer.style.js"),require("@lexical/react/LexicalComposerContext"),require("@lexical/react/LexicalTypeaheadMenuPlugin"),require("react-dom"),require("./__internal__/__ui__/Mentions/constants.js"),require("./__internal__/__ui__/Mentions/mentions.style.js"),require("../tooltip/tooltip.component.js"),require("../portrait/portrait.style.js");var S=require("./__internal__/__ui__/Placeholder/placeholder.component.js"),k=require("./__internal__/__ui__/Toolbar/toolbar.component.js");function M(e~~){return e&&e.__esModule?e:{default:e}}var $=M(c);function F(e~~,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function H(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){F(e,r,t[r])}))}return e}let R=!1,B=!1,z=!1;const A=c.forwardRef(((~~M,F~~)=>{var A,D,I,{characterLimit:W=3e3,error:N,footer:V,header:U,inputHint:K,labelText:X,namespace:G=g.COMPONENT_PREFIX,id:J,onBlur:Q,onCancel:Y,onChange:Z,onFocus:ee,onLinkAdded:re,onSave:te,placeholder:ne,previews:ie=[],readOnly:ae=!1,required:le=!1,rows:oe,size:se="medium",warning:ue,customPlugins:de,validationMessagePositionTop:ce=!1,toolbarControls:_e}~~=M,~~pe=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0\|\|(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(M,["characterLimit","error","footer","header","inputHint","labelText","namespace","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!R&&pe.value&&(R=!0,x.default.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!B&&Y&&(B=!0,x.default.deprecate("`onCancel` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the cancel functionality.")),!z&&te&&(z=!0,x.default.deprecate("`onSave` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality."));const xe=c.useRef(null!==(I=null!==(D=pe.initialValue)&&void 0!==D?D:pe.value)&&void 0!==I?I:b.createEmpty()),ge=p.default(),[je,fe]=c.useState(void 0),me=c.useRef(null),[ve,he]=c.useState(!1);c.useImperativeHandle(F,(()=>({focus(){var e;null===(e=me.current)\|\|void 0===e\|\|e.focus()}})),[]),c.useEffect((()=>{const e=null==me?void 0:me.current,r=()=>{he(!0)},t=()=>{he(!1)};return null==e\|\|e.addEventListener("focus",r),null==e\|\|e.addEventListener("blur",t),()=>{null==e\|\|e.removeEventListener("focus",r),null==e\|\|e.removeEventListener("blur",t)}}),[me]);const be=c.useMemo((()=>({namespace:G,nodes:g.MARKDOWN_NODES,onError:e=>x.default.error(e.message),theme:L.getTheme(),editorState:xe.current,editable:!ae})),[G,ae]),ye=c.useCallback(((e,r)=>{const t=e.read((()=>d.$getRoot().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(Z){const e=b.SerializeLexical(r);null==Z\|\|Z(t,e)}if(W>0){const e=W-t.length;fe(e<0?ge.textEditor.characterLimit(Math.abs(e)):void 0)}}),[W,ge.textEditor,Z]),qe=c.useCallback((e=>{if(!e.isEditable())return;if(!Y)return;const r=e.parseEditorState(xe.current);e.setEditorState(r),Y()}),[Y]),we=c.useMemo((()=>({namespace:G,onCancel:Y?qe:void 0,onSave:te,toolbarControls:_e})),[qe,G,Y,te,_e]),Pe=ue\|\|je,Oe=()=>{switch(se){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e.jsx(h.StyledTextEditorWrapper,(Ee=H({"data-role":`${G}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)\|\|null==Q\|\|Q(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)\|\|null==ee\|\|ee(e)}},P.default(pe),O.default("text-editor",pe)),Le={children:e.jsxs(v.default.Provider,{value:{onLinkAdded:re},children:[e.jsx(_.default,{onClick:()=>{var e;return null===(e=me.current)\|\|void 0===e?void 0:e.focus()},isRequired:le,labelId:`${G}-label`,children:X}),K&&!ae&&e.jsx(y.HintText,{id:`${G}-input-hint`,marginBottom:Oe(),children:K}),e.jsx(r.LexicalComposer,{initialConfig:be,children:e.jsxs(h.StyledWrapper,{"data-role":`${G}-wrapper`,children:[ce&&e.jsxs(e.Fragment,{children:[e.jsx(q.default,{error:N,warning:Pe,validationId:`${G}-validation-message`,"data-role":`${G}-validation-message`,validationMessagePositionTop:ce}),(N\|\|Pe)&&e.jsx(w.default,{warning:!(N\|\|!Pe)})]}),e.jsxs(h.StyledEditorToolbarWrapper,{"data-role":`${G}-editor-toolbar-wrapper`,error:!!N,id:`${G}-editor-toolbar-wrapper`,children:[U&&e.jsx(h.StyledHeaderWrapper,{"data-role":`${G}-header-wrapper`,children:U}),ae?e.jsx(E.default,{"aria-label":X,initialValue:(null===(A=me.current)\|\|void 0===A?void 0:A.innerHTML)\|\|xe.current,size:se}):e.jsxs(e.Fragment,{children:[e.jsx(k.default,H({contentEditorRef:me,hasHeader:Boolean(U),size:se},we)),e.jsxs(h.StyledTextEditor,{"data-role":`${G}-editor`,error:!!N,children:[e.jsx(l.RichTextPlugin,{contentEditable:e.jsx(T.default,{id:J,ref:me,inputHint:K,isFocused:ve,namespace:G,previews:ie,rows:oe,readOnly:ae,required:le,error:!!N,warning:!!ue\|\|!!je,validationMessagePositionTop:ce,size:se}),placeholder:e.jsx(S.default,{namespace:G,text:ne}),ErrorBoundary:n.LexicalErrorBoundary}),e.jsx(s.ListPlugin,{}),e.jsx(i.HistoryPlugin,{}),e.jsx(a.MarkdownShortcutPlugin,{}),e.jsx(u.OnChangePlugin,{onChange:ye,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e.jsx(o.LinkPlugin,{validateUrl:b.validateUrl}),e.jsx(t.ClickableLinkPlugin,{newTab:!0}),e.jsx(j.default,{}),e.jsx(m.default,{})~~,$.default~~.~~Children~~.~~toArray(~~de)]})]}),V&&e.jsx(h.StyledFooterWrapper,{"data-role":`${G}-footer-wrapper`,size:se,children:V}),e.jsx(f.default,{})]}),!ce&&e.jsxs(e.Fragment,{children:[e.jsx(q.default,{error:N,warning:Pe,validationId:`${G}-validation-message`,"data-role":`${G}-validation-message`,validationMessagePositionTop:ce}),(N\|\|Pe)&&e.jsx(w.default,{warning:!(N\|\|!Pe)})]}),W>0&&!ae&&e.jsx(C.default,{isFocused:ve,maxChars:W,namespace:G,marginTop:Oe()})]})})]})},Le=null!=Le?Le:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ee,Object.getOwnPropertyDescriptors(Le)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Le)).forEach((function(e){Object.defineProperty(Ee,e,Object.getOwnPropertyDescriptor(Le,e))})),Ee));var Ee,Le}));exports.TextEditor=A,exports.default=A;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@lexical/react/LexicalComposer"),t=require("@lexical/react/LexicalClickableLinkPlugin"),n=require("@lexical/react/LexicalErrorBoundary"),i=require("@lexical/react/LexicalHistoryPlugin"),a=require("@lexical/react/LexicalMarkdownShortcutPlugin"),l=require("@lexical/react/LexicalRichTextPlugin"),o=require("@lexical/react/LexicalLinkPlugin"),s=require("@lexical/react/LexicalListPlugin"),u=require("@lexical/react/LexicalOnChangePlugin"),d=require("./__internal__/__providers__/plugin-provider.js"),c=require("lexical"),_=require("react"),p=require("../../__internal__/label/label.component.js"),x=require("../../hooks/__internal__/useLocale/useLocale.js"),g=require("../../__internal__/utils/logger/index.js"),j=require("./__internal__/__utils__/constants.js"),f=require("./__internal__/__plugins__/AutoLinker/auto-link.component.js"),m=require("./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js"),v=require("./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js");require("./__internal__/__plugins__/useCursorAtEnd/index.js");var h=require("./text-editor.context.js"),b=require("./text-editor.style.js"),y=require("./__internal__/__utils__/helpers.js"),q=require("../../__internal__/hint-text/hint-text.component.js"),P=require("../../__internal__/validation-message/validation-message.component.js"),w=require("../textbox/textbox.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var O=require("../../style/utils/filter-styled-system-margin-props.js"),E=require("../../__internal__/utils/helpers/tags/tags.js"),L=require("./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js"),C=require("./__internal__/__utils__/theme.js"),T=require("./__internal__/__ui__/CharacterCounter/character-counter.component.js"),S=require("./__internal__/__ui__/ContentEditor/content-editor.component.js");require("./__internal__/__ui__/LinkPreviewer/link-previewer.style.js"),require("@lexical/react/LexicalComposerContext"),require("@lexical/react/LexicalTypeaheadMenuPlugin"),require("react-dom"),require("./__internal__/__ui__/Mentions/constants.js"),require("./__internal__/__ui__/Mentions/mentions.style.js"),require("../tooltip/tooltip.component.js"),require("../portrait/portrait.style.js");var k=require("./__internal__/__ui__/Placeholder/placeholder.component.js"),M=require("./__internal__/__ui__/Toolbar/toolbar.component.js");function $(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function F(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){$(e,r,t[r])}))}return e}let R=!1,H=!1,B=!1;const z=_.forwardRef((($,z)=>{var A,D,I,{characterLimit:W=3e3,error:N,footer:V,header:U,inputHint:K,labelText:X,namespace:G=j.COMPONENT_PREFIX,id:J,onBlur:Q,onCancel:Y,onChange:Z,onFocus:ee,onLinkAdded:re,onSave:te,placeholder:ne,previews:ie=[],readOnly:ae=!1,required:le=!1,rows:oe,size:se="medium",warning:ue,customPlugins:de,validationMessagePositionTop:ce=!1,toolbarControls:_e}=$,pe=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0\|\|(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}($,["characterLimit","error","footer","header","inputHint","labelText","namespace","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!R&&pe.value&&(R=!0,g.default.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!H&&Y&&(H=!0,g.default.deprecate("`onCancel` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the cancel functionality.")),!B&&te&&(B=!0,g.default.deprecate("`onSave` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality."));const xe=_.useRef(null!==(I=null!==(D=pe.initialValue)&&void 0!==D?D:pe.value)&&void 0!==I?I:y.createEmpty()),ge=x.default(),[je,fe]=_.useState(void 0),me=_.useRef(null),[ve,he]=_.useState(null),[be,ye]=_.useState(!1);_.useImperativeHandle(z,(()=>({focus(){var e;null===(e=me.current)\|\|void 0===e\|\|e.focus()}})),[]),_.useEffect((()=>{const e=null==me?void 0:me.current,r=()=>{ye(!0)},t=()=>{ye(!1)};return null==e\|\|e.addEventListener("focus",r),null==e\|\|e.addEventListener("blur",t),()=>{null==e\|\|e.removeEventListener("focus",r),null==e\|\|e.removeEventListener("blur",t)}}),[me]);const qe=_.useMemo((()=>({namespace:G,nodes:j.MARKDOWN_NODES,onError:e=>g.default.error(e.message),theme:C.getTheme(),editorState:xe.current,editable:!ae})),[G,ae]),Pe=_.useCallback(((e,r)=>{const t=e.read((()=>c.$getRoot().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(Z){const e=y.SerializeLexical(r);null==Z\|\|Z(t,e)}if(W>0){const e=W-t.length;fe(e<0?ge.textEditor.characterLimit(Math.abs(e)):void 0)}}),[W,ge.textEditor,Z]),we=_.useCallback((e=>{if(!e.isEditable())return;if(!Y)return;const r=e.parseEditorState(xe.current);e.setEditorState(r),Y()}),[Y]),Oe=_.useMemo((()=>({namespace:G,onCancel:Y?we:void 0,onSave:te,toolbarControls:_e})),[we,G,Y,te,_e]),Ee=ue\|\|je,Le=()=>{switch(se){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e.jsx(b.StyledTextEditorWrapper,(Ce=F({"data-role":`${G}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)\|\|null==Q\|\|Q(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)\|\|null==ee\|\|ee(e)}},O.default(pe),E.default("text-editor",pe)),Te={children:e.jsxs(h.default.Provider,{value:{onLinkAdded:re},children:[e.jsx(p.default,{onClick:()=>{var e;return null===(e=me.current)\|\|void 0===e?void 0:e.focus()},isRequired:le,labelId:`${G}-label`,children:X}),K&&!ae&&e.jsx(q.HintText,{id:`${G}-input-hint`,marginBottom:Le(),children:K}),e.jsx(r.LexicalComposer,{initialConfig:qe,children:e.jsxs(b.StyledWrapper,{"data-role":`${G}-wrapper`,ref:he,children:[ce&&e.jsxs(e.Fragment,{children:[e.jsx(P.default,{error:N,warning:Ee,validationId:`${G}-validation-message`,"data-role":`${G}-validation-message`,validationMessagePositionTop:ce}),(N\|\|Ee)&&e.jsx(w.default,{warning:!(N\|\|!Ee)})]}),e.jsxs(b.StyledEditorToolbarWrapper,{"data-role":`${G}-editor-toolbar-wrapper`,error:!!N,id:`${G}-editor-toolbar-wrapper`,children:[U&&e.jsx(b.StyledHeaderWrapper,{"data-role":`${G}-header-wrapper`,children:U}),ae?e.jsx(L.default,{"aria-label":X,initialValue:(null===(A=me.current)\|\|void 0===A?void 0:A.innerHTML)\|\|xe.current,size:se}):e.jsxs(e.Fragment,{children:[e.jsx(M.default,F({contentEditorRef:me,hasHeader:Boolean(U),size:se},Oe)),e.jsxs(b.StyledTextEditor,{"data-role":`${G}-editor`,error:!!N,children:[e.jsx(l.RichTextPlugin,{contentEditable:e.jsx(S.default,{id:J,ref:me,inputHint:K,isFocused:be,namespace:G,previews:ie,rows:oe,readOnly:ae,required:le,error:!!N,warning:!!ue\|\|!!je,validationMessagePositionTop:ce,size:se}),placeholder:e.jsx(k.default,{namespace:G,text:ne}),ErrorBoundary:n.LexicalErrorBoundary}),e.jsx(s.ListPlugin,{}),e.jsx(i.HistoryPlugin,{}),e.jsx(a.MarkdownShortcutPlugin,{}),e.jsx(u.OnChangePlugin,{onChange:Pe,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e.jsx(o.LinkPlugin,{validateUrl:y.validateUrl}),e.jsx(t.ClickableLinkPlugin,{newTab:!0}),e.jsx(f.default,{}),e.jsx(v.default,{}),e.jsx(d.PluginProvider,{parentRef:ve,children:de})]})]}),V&&e.jsx(b.StyledFooterWrapper,{"data-role":`${G}-footer-wrapper`,size:se,children:V}),e.jsx(m.default,{})]}),!ce&&e.jsxs(e.Fragment,{children:[e.jsx(P.default,{error:N,warning:Ee,validationId:`${G}-validation-message`,"data-role":`${G}-validation-message`,validationMessagePositionTop:ce}),(N\|\|Ee)&&e.jsx(w.default,{warning:!(N\|\|!Ee)})]}),W>0&&!ae&&e.jsx(T.default,{isFocused:be,maxChars:W,namespace:G,marginTop:Le()})]})})]})},Te=null!=Te?Te:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ce,Object.getOwnPropertyDescriptors(Te)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Te)).forEach((function(e){Object.defineProperty(Ce,e,Object.getOwnPropertyDescriptor(Te,e))})),Ce));var Ce,Te}));exports.TextEditor=z,exports.default=z;

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

@@ -1,2 +1,2 @@
-declare const _default: "\n  --global-borderwidth-none: 0;\n  --global-borderwidth-xs: 1px;\n  --global-borderwidth-s: 2px;\n  --global-borderwidth-m: 3px;\n  --global-borderwidth-l: 4px;\n  --global-borderwidth-xl: 6px;\n  --global-borderwidth-xxl: 8px;\n  --global-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-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-deep: #0071c3;\n  --mode-color-colorcode-blue-muted: #e4eeff;\n  --mode-color-colorcode-teal-deep: #007C7B;\n  --mode-color-colorcode-teal-muted: #C8F5F5;\n  --mode-color-colorcode-green-deep: #00811F;\n  --mode-color-colorcode-green-muted: #D1F6D6;\n  --mode-color-colorcode-lime-deep: #627600;\n  --mode-color-colorcode-lime-muted: #e8f1d4;\n  --mode-color-colorcode-orange-deep: #d64309;\n  --mode-color-colorcode-orange-muted: #ffeaca;\n  --mode-color-colorcode-red-deep: #db004e;\n  --mode-color-colorcode-red-muted: #ffe8ea;\n  --mode-color-colorcode-pink-deep: #c72699;\n  --mode-color-colorcode-pink-muted: #fee8f5;\n  --mode-color-colorcode-purple-deep: #8f4bd7;\n  --mode-color-colorcode-purple-muted: #F3EBFE;\n  --mode-color-colorcode-slate-deep: #527386;\n  --mode-color-colorcode-slate-muted: #e4eff5;\n  --mode-color-colorcode-gray-severe: #304658;\n  --mode-color-colorcode-gray-deep: #6a7986;\n  --mode-color-colorcode-gray-muted: #e8eaec;\n  --mode-color-generic-bg-nought: #FFFFFF;\n  --mode-color-generic-bg-faint: #f4f5f6;\n  --mode-color-generic-bg-delicate: #e8eaec;\n  --mode-color-generic-bg-soft: #dde0e3;\n  --mode-color-generic-bg-moderate: #d1d6da;\n  --mode-color-generic-bg-firm: #c6ccd1;\n  --mode-color-generic-bg-harsh: #bac1c7;\n  --mode-color-generic-bg-severe: #afb7be;\n  --mode-color-generic-bg-extreme: #000000;\n  --mode-color-generic-bg-inverse-nought: #000000;\n  --mode-color-generic-bg-inverse-faint: #ffffff0d;\n  --mode-color-generic-bg-inverse-delicate: #ffffff1a;\n  --mode-color-generic-bg-inverse-soft: #ffffff26;\n  --mode-color-generic-bg-inverse-moderate: #fff3;\n  --mode-color-generic-bg-inverse-firm: #ffffff40;\n  --mode-color-generic-bg-inverse-harsh: #ffffff4d;\n  --mode-color-generic-bg-inverse-severe: #ffffff59;\n  --mode-color-generic-bg-inverse-extreme: #FFFFFF;\n  --mode-color-generic-txt-extreme: #000000;\n  --mode-color-generic-txt-severe: #000000f2;\n  --mode-color-generic-txt-moderate: #000000a6;\n  --mode-color-generic-txt-soft: #0000008c;\n  --mode-color-generic-txt-delicate: #0000006b;\n  --mode-color-generic-txt-faint: #0000004d;\n  --mode-color-generic-txt-nought: #FFFFFF;\n  --mode-color-generic-txt-inverse-extreme: #FFFFFF;\n  --mode-color-generic-txt-inverse-severe: #fffffff2;\n  --mode-color-generic-txt-inverse-moderate: #ffffffab;\n  --mode-color-generic-txt-inverse-soft: #ffffff8c;\n  --mode-color-generic-txt-inverse-delicate: #ffffff6b;\n  --mode-color-generic-txt-inverse-faint: #ffffff4d;\n  --mode-color-generic-txt-inverse-nought: #000000;\n  --mode-color-generic-fg-nought: #FFFFFF;\n  --mode-color-generic-fg-delicate: #e8eaec;\n  --mode-color-generic-fg-soft: #a3adb5;\n  --mode-color-generic-fg-moderate: #8c98a2;\n  --mode-color-generic-fg-firm: #75838f;\n  --mode-color-generic-fg-extreme: #000000;\n  --mode-color-generic-fg-inverse-nought: #000000;\n  --mode-color-generic-fg-inverse-delicate: #181818;\n  --mode-color-generic-fg-inverse-soft: #505050;\n  --mode-color-generic-fg-inverse-moderate: #616161;\n  --mode-color-generic-fg-inverse-firm: #6f6f6f;\n  --mode-color-generic-fg-inverse-extreme: #FFFFFF;\n  --mode-color-generic-surface-nought: #FFFFFF;\n  --mode-color-generic-surface-faint: #f4f5f6;\n  --mode-color-generic-surface-harsh: #475a6a;\n  --mode-color-generic-surface-severe: #304658;\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: #000000e6;\n  --mode-color-action-grayscale-default-alt: #000000ab;\n  --mode-color-action-grayscale-hover-alt: #0000001a;\n  --mode-color-action-grayscale-hover: #00000026;\n  --mode-color-action-grayscale-with-active: #FFFFFF;\n  --mode-color-action-grayscale-with-active-alt: #000000;\n  --mode-color-action-grayscale-with-default: #FFFFFF;\n  --mode-color-action-grayscale-with-hover: #000000;\n  --mode-color-action-grayscale-inverse-active: #FFFFFF;\n  --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n  --mode-color-action-grayscale-inverse-default: #ffffffe6;\n  --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n  --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n  --mode-color-action-grayscale-inverse-hover: #ffffff26;\n  --mode-color-action-grayscale-inverse-with-active: #000000;\n  --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n  --mode-color-action-grayscale-inverse-with-default: #000000;\n  --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n  --mode-color-action-nav-active: #253b4e26;\n  --mode-color-action-nav-default: #FFFFFF;\n  --mode-color-action-nav-default-alt: #f4f5f6;\n  --mode-color-action-nav-hover: #253b4e1a;\n  --mode-color-action-nav-with-active: #000000;\n  --mode-color-action-nav-with-default: #000000f2;\n  --mode-color-action-nav-with-hover: #000000;\n  --mode-color-action-nav-inverse-active: #ffffff26;\n  --mode-color-action-nav-inverse-default: #000000;\n  --mode-color-action-nav-inverse-default-alt: #0b0b0b;\n  --mode-color-action-nav-inverse-hover: #ffffff1a;\n  --mode-color-action-nav-inverse-with-active: #FFFFFF;\n  --mode-color-action-nav-inverse-with-default: #fffffff2;\n  --mode-color-action-nav-inverse-with-hover: #FFFFFF;\n  --mode-color-action-main-active: #005e14;\n  --mode-color-action-main-active-alt: #00811f4d;\n  --mode-color-action-main-default: #00811f;\n  --mode-color-action-main-default-alt: #00811fcc;\n  --mode-color-action-main-default-alt2: #007219;\n  --mode-color-action-main-default-alt3: #00811f08;\n  --mode-color-action-main-hover: #007219;\n  --mode-color-action-main-hover-alt: #00811f26;\n  --mode-color-action-main-hover-alt2: #005e14;\n  --mode-color-action-main-with-active: #FFFFFF;\n  --mode-color-action-main-with-default: #FFFFFF;\n  --mode-color-action-main-with-hover: #FFFFFF;\n  --mode-color-action-main-inverse-active: #8fff98;\n  --mode-color-action-main-inverse-active-alt: #00f1424d;\n  --mode-color-action-main-inverse-default: #00f142;\n  --mode-color-action-main-inverse-default-alt: #00f142cc;\n  --mode-color-action-main-inverse-default-alt2: #46fb5e;\n  --mode-color-action-main-inverse-default-alt3: #00f14208;\n  --mode-color-action-main-inverse-hover: #46fb5e;\n  --mode-color-action-main-inverse-hover-alt: #00f14226;\n  --mode-color-action-main-inverse-hover-alt2: #8fff98;\n  --mode-color-action-main-inverse-with-active: #000000;\n  --mode-color-action-main-inverse-with-default: #000000;\n  --mode-color-action-main-inverse-with-hover: #000000;\n  --mode-color-status-ai-default: #FFFFFF;\n  --mode-color-status-ai-default-alt: #000000;\n  --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%);\n  --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038  0%, #149197 40%, #a87cfb 90%);\n  --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);\n  --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);\n  --mode-color-status-callout-default-alt: #e0ffe2;\n  --mode-color-status-callout-hover-alt: #b7ffbd;\n  --mode-color-status-skeleton-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: #fffffff2;\n  --mode-color-status-txt-inverse-with-hover: #000000;\n  --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;\n  --mode-color-status-custom-blue-default: #0071c3;\n  --mode-color-status-custom-blue-default-alt: #f5f8ff;\n  --mode-color-status-custom-blue-hover: #0063ad;\n  --mode-color-status-custom-blue-hover-alt: #e4eeff;\n  --mode-color-status-custom-teal-default: #007C7B;\n  --mode-color-status-custom-teal-default-alt: #E8FCFC;\n  --mode-color-status-custom-teal-hover: #006D6C;\n  --mode-color-status-custom-teal-hover-alt: #C8F5F5;\n  --mode-color-status-custom-green-default: #00811F;\n  --mode-color-status-custom-green-default-alt: #EEFCEF;\n  --mode-color-status-custom-green-hover: #007219;\n  --mode-color-status-custom-green-hover-alt: #D1F6D6;\n  --mode-color-status-custom-lime-default: #627600;\n  --mode-color-status-custom-lime-default-alt: #f6f9f0;\n  --mode-color-status-custom-lime-hover: #576900;\n  --mode-color-status-custom-lime-hover-alt: #e8f1d4;\n  --mode-color-status-custom-orange-default: #d64309;\n  --mode-color-status-custom-orange-default-alt: #fff7eb;\n  --mode-color-status-custom-orange-hover: #b33400;\n  --mode-color-status-custom-orange-hover-alt: #ffeaca;\n  --mode-color-status-custom-orange-txt: #b33400;\n  --mode-color-status-custom-red-default: #db004e;\n  --mode-color-status-custom-red-default-alt: #fff5f6;\n  --mode-color-status-custom-red-hover: #c40044;\n  --mode-color-status-custom-red-hover-alt: #ffe8ea;\n  --mode-color-status-custom-pink-default: #c72699;\n  --mode-color-status-custom-pink-default-alt: #fff5fa;\n  --mode-color-status-custom-pink-hover: #b02086;\n  --mode-color-status-custom-pink-hover-alt: #fee8f5;\n  --mode-color-status-custom-purple-default: #8f4bd7;\n  --mode-color-status-custom-purple-default-alt: #f9f6ff;\n  --mode-color-status-custom-purple-hover: #803ec5;\n  --mode-color-status-custom-purple-hover-alt: #F3EBFE;\n  --mode-color-status-custom-gray-default: #6f6f6f;\n  --mode-color-status-custom-gray-default-alt: #f8f8f8;\n  --mode-color-status-custom-gray-hover: #616161;\n  --mode-color-status-custom-gray-hover-alt: #eeeeee;\n  --mode-color-status-custom-slate-default: #536574;\n  --mode-color-status-custom-slate-default-alt: #f4f5f6;\n  --mode-color-status-custom-slate-hover: #475a6a;\n  --mode-color-status-custom-slate-hover-alt: #e8eaec;\n  --mode-color-status-priority-default: #8f4bd7;\n  --mode-color-status-priority-default-alt: #f9f6ff;\n  --mode-color-status-priority-hover: #803ec5;\n  --mode-color-status-priority-hover-alt: #F3EBFE;\n  --mode-color-status-priority-inverse-default: #9463d7;\n  --mode-color-status-priority-inverse-default-alt: #10041f;\n  --mode-color-status-priority-inverse-hover: #a375dd;\n  --mode-color-status-priority-inverse-hover-alt: #220c3a;\n  --mode-color-status-inactive-default: #75838f;\n  --mode-color-status-inactive-with-default: #0000008c;\n  --mode-color-status-inactive-inverse-default: #6f6f6f;\n  --mode-color-status-inactive-inverse-with-default: #ffffff8c;\n  --mode-color-status-info-default: #0071c3;\n  --mode-color-status-info-default-alt: #f5f8ff;\n  --mode-color-status-info-hover: #0063ad;\n  --mode-color-status-info-hover-alt: #e4eeff;\n  --mode-color-status-info-inverse-default: #007fd9;\n  --mode-color-status-info-inverse-default-alt: #000b1c;\n  --mode-color-status-info-inverse-hover: #008ef4;\n  --mode-color-status-info-inverse-hover-alt: #001932;\n  --mode-color-status-negative-default: #db004e;\n  --mode-color-status-negative-default-alt: #fff5f6;\n  --mode-color-status-negative-hover: #c40044;\n  --mode-color-status-negative-hover-alt: #ffe8ea;\n  --mode-color-status-negative-inverse-default: #f50059;\n  --mode-color-status-negative-inverse-default-alt: #1e0005;\n  --mode-color-status-negative-inverse-hover: #ff3e6a;\n  --mode-color-status-negative-inverse-hover-alt: #3c000f;\n  --mode-color-status-neutral-default: #6f6f6f;\n  --mode-color-status-neutral-default-alt: #f8f8f8;\n  --mode-color-status-neutral-hover: #616161;\n  --mode-color-status-neutral-hover-alt: #eeeeee;\n  --mode-color-status-neutral-inverse-default: #7c7c7c;\n  --mode-color-status-neutral-inverse-default-alt: #0b0b0b;\n  --mode-color-status-neutral-inverse-hover: #8b8b8b;\n  --mode-color-status-neutral-inverse-hover-alt: #181818;\n  --mode-color-status-positive-default: #00811F;\n  --mode-color-status-positive-default-alt: #EEFCEF;\n  --mode-color-status-positive-hover: #007219;\n  --mode-color-status-positive-hover-alt: #D1F6D6;\n  --mode-color-status-positive-inverse-default: #019127;\n  --mode-color-status-positive-inverse-default-alt: #001001;\n  --mode-color-status-positive-inverse-hover: #007219;\n  --mode-color-status-positive-inverse-hover-alt: #001f03;\n  --badge-none: var(--mode-color-none);\n  --badge-bg-default: var(--mode-color-status-negative-default);\n  --badge-border-default: var(--mode-color-generic-bg-nought);\n  --badge-bg-alt: var(--mode-color-status-info-default);\n  --badge-label-default: var(--mode-color-generic-txt-inverse-extreme);\n  --badge-label-alt: var(--mode-color-generic-txt-inverse-extreme);\n  --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n  --badge-inverse-border-default: var(--mode-color-generic-bg-inverse-nought);\n  --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);\n  --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);\n  --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);\n  --button-none: var(--mode-color-none);\n  --button-ai-bg-active: var(--mode-color-action-ai-grad-active);\n  --button-ai-bg-hover: var(--mode-color-action-ai-grad-hover);\n  --button-ai-border-active: linear-gradient(90deg, var(--mode-color-ai-stop-1)  0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n  --button-ai-border-disabled: var(--mode-color-action-inactive-default);\n  --button-ai-border-default: linear-gradient(90deg, var(--mode-color-ai-stop-1)  0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n  --button-ai-border-hover: linear-gradient(90deg, var(--mode-color-ai-stop-1)  0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%);\n  --button-ai-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-ai-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-ai-label-default: var(--mode-color-action-grayscale-default);\n  --button-ai-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-destructive-primary-bg-disabled: var(--mode-color-action-inactive-default);\n  --button-destructive-primary-bg-default: var(--mode-color-action-danger-default);\n  --button-destructive-primary-bg-hover: var(--mode-color-action-danger-hover);\n  --button-destructive-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n  --button-destructive-primary-label-default: var(--mode-color-action-danger-with-default);\n  --button-destructive-primary-label-hover: var(--mode-color-action-danger-with-default);\n  --button-destructive-secondary-bg-hover: var(--mode-color-action-danger-hover-alt);\n  --button-destructive-secondary-border-disabled: var(--mode-color-action-inactive-default);\n  --button-destructive-secondary-border-default: var(--mode-color-action-danger-default);\n  --button-destructive-secondary-border-hover: var(--mode-color-action-danger-hover);\n  --button-destructive-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-destructive-secondary-label-default: var(--mode-color-action-danger-default);\n  --button-destructive-secondary-label-hover: var(--mode-color-action-danger-hover);\n  --button-typical-primary-bg-active: var(--mode-color-action-main-active);\n  --button-typical-primary-border-default: var(--mode-color-action-main-with-default);\n  --button-typical-primary-bg-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-primary-bg-default: var(--mode-color-action-main-default);\n  --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);\n  --button-typical-primary-label-active: var(--mode-color-action-main-with-active);\n  --button-typical-primary-label-disabled: var(--mode-color-action-inactive-txt-alt);\n  --button-typical-primary-label-default: var(--mode-color-action-main-with-default);\n  --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);\n  --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);\n  --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);\n  --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);\n  --button-typical-primary-inverse-bg-default: var(--mode-color-action-main-inverse-default);\n  --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);\n  --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);\n  --button-typical-primary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt-alt);\n  --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);\n  --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);\n  --button-typical-secondary-bg-active: var(--mode-color-action-main-active-alt);\n  --button-typical-secondary-bg-default: var(--mode-color-action-main-default-alt3);\n  --button-typical-secondary-bg-hover: var(--mode-color-action-main-hover-alt);\n  --button-typical-secondary-border-active: var(--mode-color-action-main-active);\n  --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-secondary-border-default: var(--mode-color-action-main-default-alt);\n  --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);\n  --button-typical-secondary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-typical-secondary-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-secondary-label-default: var(--mode-color-action-grayscale-default);\n  --button-typical-secondary-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-typical-secondary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n  --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);\n  --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n  --button-typical-secondary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n  --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n  --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n  --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n  --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n  --button-typical-secondary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n  --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n  --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);\n  --button-typical-tertiary-bg-default: var(--button-none);\n  --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);\n  --button-typical-tertiary-border-active: var(--mode-color-action-main-active);\n  --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-tertiary-border-default: var(--mode-color-action-main-default-alt);\n  --button-typical-tertiary-border-hover: var(--mode-color-action-main-hover);\n  --button-typical-tertiary-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-typical-tertiary-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-tertiary-label-default: var(--mode-color-action-grayscale-default);\n  --button-typical-tertiary-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-typical-tertiary-inverse-bg-active: var(--mode-color-action-main-inverse-active-alt);\n  --button-typical-tertiary-inverse-bg-default: var(--button-none);\n  --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);\n  --button-typical-tertiary-inverse-border-active: var(--mode-color-action-main-inverse-active);\n  --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);\n  --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);\n  --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);\n  --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n  --button-typical-tertiary-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n  --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n  --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);\n  --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);\n  --button-typical-subtle-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);\n  --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);\n  --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);\n  --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);\n  --button-typical-subtle-inverse-label-disabled: var(--mode-color-action-inactive-inverse-txt);\n  --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);\n  --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);\n  --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);\n  --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);\n  --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);\n  --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);\n  --button-typical-toggle-label-disabled: var(--mode-color-action-inactive-txt);\n  --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);\n  --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);\n  --button-video-primary-bg-default: var(--mode-color-action-grayscale-with-default);\n  --button-video-primary-bg-hover: var(--mode-color-action-grayscale-with-default);\n  --button-video-primary-label-default: var(--mode-color-action-grayscale-default);\n  --button-video-primary-label-hover: var(--mode-color-action-grayscale-default);\n  --button-video-secondary-bg-hover: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-border-default: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-border-hover: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-label-default: var(--mode-color-action-grayscale-with-default);\n  --button-video-secondary-label-hover: var(--mode-color-action-grayscale-default);\n  --container-action-bg-footer-activated: var(--mode-color-status-positive-default);\n  --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);\n  --container-action-border-activated: var(--mode-color-status-positive-default);\n  --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);\n  --container-action-bg-default: var(--mode-color-generic-bg-nought);\n  --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --container-action-border-active: var(--mode-color-action-grayscale-active);\n  --container-action-border-alt: var(--mode-color-generic-fg-moderate);\n  --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);\n  --container-action-border-inactive: var(--mode-color-generic-fg-firm);\n  --container-action-border-default: var(--mode-color-generic-fg-firm);\n  --container-action-icon-active: var(--mode-color-action-grayscale-active);\n  --container-action-icon-default: var(--mode-color-action-grayscale-default);\n  --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);\n  --container-action-icon-hover: var(--mode-color-action-grayscale-default);\n  --container-action-label-footer-active: var(--mode-color-action-grayscale-with-active);\n  --container-action-label-footer-activated: var(--mode-color-action-grayscale-with-active);\n  --container-action-txt-active: var(--mode-color-action-grayscale-active);\n  --container-action-txt-disabled: var(--mode-color-action-inactive-txt);\n  --container-action-txt-default: var(--mode-color-generic-txt-severe);\n  --container-action-txt-alt-default: var(--mode-color-generic-txt-moderate);\n  --container-action-txt-hover: var(--mode-color-action-grayscale-default);\n  --container-action-detailedicon-bg: var(--mode-color-status-custom-green-default);\n  --container-action-target-bg-default: var(--mode-color-status-info-default);\n  --container-scrollbar-bg-default: var(--mode-color-generic-bg-faint);\n  --container-scrollbar-fg-default: var(--mode-color-generic-fg-firm);\n  --container-scrollbar-inverse-bg-default: var(--mode-color-generic-bg-inverse-soft);\n  --container-scrollbar-inverse-fg-default: var(--mode-color-generic-fg-inverse-firm);\n  --container-standard-bg-alt: var(--mode-color-generic-bg-faint);\n  --container-standard-bg-default: var(--mode-color-generic-bg-nought);\n  --container-standard-bg-footer-default: var(--mode-color-generic-bg-faint);\n  --container-standard-border-active: var(--mode-color-action-grayscale-active);\n  --container-standard-border-ai-h: var(--mode-color-status-ai-inverse-default-horizontal);\n  --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);\n  --container-standard-border-alt: var(--mode-color-generic-fg-firm);\n  --container-standard-border-default: var(--mode-color-generic-fg-soft);\n  --container-standard-dimmer: var(--mode-color-action-inactive-mask);\n  --container-standard-icon: var(--mode-color-generic-fg-firm);\n  --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);\n  --container-standard-txt-default: var(--mode-color-generic-txt-severe);\n  --container-standard-inverse-bg-alt: var(--mode-color-generic-bg-inverse-delicate);\n  --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);\n  --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);\n  --container-standard-inverse-border-default: var(--mode-color-generic-fg-inverse-soft);\n  --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);\n  --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);\n  --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n  --container-standard-priority-bg-caution: var(--mode-color-status-warning-default);\n  --container-standard-priority-bg-negative: var(--mode-color-status-negative-default);\n  --container-standard-priority-bg-prio: var(--mode-color-status-priority-default);\n  --container-standard-priority-bg-info: var(--mode-color-status-info-default);\n  --container-standard-priority-bg-neutral: var(--mode-color-status-neutral-default);\n  --container-standard-priority-bg-positive: var(--mode-color-status-positive-default);\n  --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);\n  --container-standard-priority-inverse-bg-caution: var(--mode-color-status-warning-inverse-default);\n  --container-standard-priority-inverse-bg-negative: var(--mode-color-status-negative-inverse-default);\n  --container-standard-priority-inverse-bg-prio: var(--mode-color-status-priority-inverse-default);\n  --container-standard-priority-inverse-bg-info: var(--mode-color-status-info-inverse-default);\n  --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);\n  --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);\n  --container-quote-border: var(--mode-color-action-main-default);\n  --container-size-bubble-max-w: 600px;\n  --container-size-copilot-emptystate-illustration: 200px;\n  --container-size-copilot-emptystate-txt-max-w: 600px;\n  --container-size-copilot-overlay-max-h: 960px;\n  --container-size-dialog-max-w-s: 540px;\n  --container-size-dialog-max-w-m: 850px;\n  --container-size-dialog-max-w-l: 1080px;\n  --container-size-dialog-min-w: 288px;\n  --container-size-empty-state-primary-s: 200px;\n  --container-size-empty-state-primary-m: 240px;\n  --container-size-empty-state-primary-l: 320px;\n  --container-size-fluid-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  --container-size-sidebar-max-w-s: 760px;\n  --container-size-sidebar-max-w-m: 1000px;\n  --container-size-sidebar-min-w: 288px;\n  --focus-bg: var(--mode-color-action-focus-with-default-alt);\n  --focus-borderalt: var(--mode-color-action-focus-default);\n  --focus-border: var(--mode-color-action-focus-with-default);\n  --focus-label: var(--mode-color-action-focus-txt);\n  --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);\n  --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);\n  --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);\n  --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);\n  --dataviz-chart-line-bg-default: var(--mode-color-colorcode-green-deep);\n  --dataviz-chart-line-border: var(--mode-color-colorcode-green-deep);\n  --dataviz-chart-bar-gray-bg-alt: var(--mode-color-colorcode-gray-muted);\n  --dataviz-chart-bar-gray-bg-default: var(--mode-color-colorcode-gray-severe);\n  --dataviz-chart-bar-gray-border: var(--mode-color-colorcode-gray-severe);\n  --dataviz-chart-bar-gray-pattern: var(--mode-color-colorcode-gray-severe);\n  --dataviz-chart-bar-green-bg-alt: var(--mode-color-colorcode-green-muted);\n  --dataviz-chart-bar-green-bg-default: var(--mode-color-colorcode-green-deep);\n  --dataviz-chart-bar-green-border: var(--mode-color-colorcode-green-deep);\n  --dataviz-chart-bar-green-pattern: var(--mode-color-colorcode-green-deep);\n  --dataviz-chart-bar-orange-bg-alt: var(--mode-color-colorcode-orange-muted);\n  --dataviz-chart-bar-orange-bg-default: var(--mode-color-colorcode-orange-deep);\n  --dataviz-chart-bar-orange-border: var(--mode-color-colorcode-orange-deep);\n  --dataviz-chart-bar-orange-pattern: var(--mode-color-colorcode-orange-deep);\n  --dataviz-chart-donut-gray-bg-alt: var(--mode-color-colorcode-gray-muted);\n  --dataviz-chart-donut-gray-bg-default: var(--mode-color-colorcode-gray-severe);\n  --dataviz-chart-donut-gray-border: var(--mode-color-colorcode-gray-severe);\n  --dataviz-chart-donut-gray-pattern: var(--mode-color-colorcode-gray-severe);\n  --dataviz-chart-donut-green-bg-alt: var(--mode-color-colorcode-green-muted);\n  --dataviz-chart-donut-green-bg-default: var(--mode-color-colorcode-green-deep);\n  --dataviz-chart-donut-green-border: var(--mode-color-colorcode-green-deep);\n  --dataviz-chart-donut-green-pattern: var(--mode-color-colorcode-green-deep);\n  --dataviz-chart-donut-orange-bg-alt: var(--mode-color-colorcode-orange-muted);\n  --dataviz-chart-donut-orange-bg-default: var(--mode-color-colorcode-orange-deep);\n  --dataviz-chart-donut-orange-border: var(--mode-color-colorcode-orange-deep);\n  --dataviz-chart-donut-orange-pattern: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-label-alt: var(--mode-color-generic-txt-inverse-extreme);\n  --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);\n  --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);\n  --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);\n  --dataviz-generic-blue-border: var(--mode-color-colorcode-blue-deep);\n  --dataviz-generic-blue-pattern: var(--mode-color-colorcode-blue-deep);\n  --dataviz-generic-teal-bg-alt: var(--mode-color-colorcode-teal-deep);\n  --dataviz-generic-teal-bg-default: var(--mode-color-colorcode-teal-muted);\n  --dataviz-generic-teal-border: var(--mode-color-colorcode-teal-deep);\n  --dataviz-generic-teal-pattern: var(--mode-color-colorcode-teal-deep);\n  --dataviz-generic-green-bg-alt: var(--mode-color-colorcode-green-deep);\n  --dataviz-generic-green-bg-default: var(--mode-color-colorcode-green-muted);\n  --dataviz-generic-green-border: var(--mode-color-colorcode-green-deep);\n  --dataviz-generic-green-pattern: var(--mode-color-colorcode-green-deep);\n  --dataviz-generic-lime-bg-alt: var(--mode-color-colorcode-lime-deep);\n  --dataviz-generic-lime-bg-default: var(--mode-color-colorcode-lime-muted);\n  --dataviz-generic-lime-border: var(--mode-color-colorcode-lime-deep);\n  --dataviz-generic-lime-pattern: var(--mode-color-colorcode-lime-deep);\n  --dataviz-generic-orange-bg-alt: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-orange-bg-default: var(--mode-color-colorcode-orange-muted);\n  --dataviz-generic-orange-border: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-orange-pattern: var(--mode-color-colorcode-orange-deep);\n  --dataviz-generic-red-bg-alt: var(--mode-color-colorcode-red-deep);\n  --dataviz-generic-red-bg-default: var(--mode-color-colorcode-red-muted);\n  --dataviz-generic-red-border: var(--mode-color-colorcode-red-deep);\n  --dataviz-generic-red-pattern: var(--mode-color-colorcode-red-deep);\n  --dataviz-generic-pink-bg-alt: var(--mode-color-colorcode-pink-deep);\n  --dataviz-generic-pink-bg-default: var(--mode-color-colorcode-pink-muted);\n  --dataviz-generic-pink-border: var(--mode-color-colorcode-pink-deep);\n  --dataviz-generic-pink-pattern: var(--mode-color-colorcode-pink-deep);\n  --dataviz-generic-purple-bg-alt: var(--mode-color-colorcode-purple-deep);\n  --dataviz-generic-purple-bg-default: var(--mode-color-colorcode-purple-muted);\n  --dataviz-generic-purple-border: var(--mode-color-colorcode-purple-deep);\n  --dataviz-generic-purple-pattern: var(--mode-color-colorcode-purple-deep);\n  --dataviz-generic-gray-bg-alt: var(--mode-color-colorcode-gray-deep);\n  --dataviz-generic-gray-bg-default: var(--mode-color-colorcode-gray-muted);\n  --dataviz-generic-gray-border: var(--mode-color-colorcode-gray-deep);\n  --dataviz-generic-gray-pattern: var(--mode-color-colorcode-gray-deep);\n  --dataviz-generic-slate-bg-alt: var(--mode-color-colorcode-slate-deep);\n  --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-muted);\n  --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-deep);\n  --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-deep);\n  --input-calendar-bg-active: var(--mode-color-action-grayscale-active);\n  --input-calendar-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --input-calendar-bg-duration: var(--mode-color-action-data-entry-hover-alt);\n  --input-calendar-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n  --input-calendar-border-duration: var(--mode-color-action-grayscale-active);\n  --input-calendar-txt-active: var(--mode-color-action-grayscale-with-active);\n  --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n  --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);\n  --input-calendar-txt-duration: var(--mode-color-action-data-entry-txt);\n  --input-calendar-txt-default: var(--mode-color-action-data-entry-txt);\n  --input-calendar-txt-hover: var(--mode-color-action-grayscale-with-hover);\n  --input-calendar-txt-alt-default: var(--mode-color-action-data-entry-txt-alt);\n  --input-dropdown-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n  --input-dropdown-label-active: var(--mode-color-action-grayscale-with-active);\n  --input-dropdown-label-alt: var(--mode-color-action-data-entry-txt);\n  --input-dropdown-label-disabled: var(--mode-color-action-inactive-txt);\n  --input-dropdown-label-default: var(--mode-color-action-data-entry-txt-alt);\n  --input-dropdown-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --input-dropdown-label-subtxt: var(--mode-color-action-data-entry-txt-alt);\n  --input-labelset-label-required: var(--mode-color-action-danger-default);\n  --input-labelset-label-default: var(--mode-color-action-data-entry-txt);\n  --input-labelset-label-alt: var(--mode-color-action-data-entry-txt-alt);\n  --input-labelset-label-disabled: var(--mode-color-action-inactive-txt);\n  --input-labelset-label-read-only: var(--mode-color-action-data-entry-txt);\n  --input-labelset-inverse-label-required: var(--mode-color-action-danger-inverse-default);\n  --input-labelset-inverse-label-default: var(--mode-color-action-data-entry-inverse-txt);\n  --input-labelset-inverse-label-alt: var(--mode-color-action-data-entry-inverse-txt-alt);\n  --input-typical-bg-alt: var(--mode-color-action-data-entry-default-alt);\n  --input-typical-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --input-typical-bg-default: var(--mode-color-action-data-entry-default);\n  --input-typical-bg-hover: var(--mode-color-action-data-entry-hover-alt);\n  --input-typical-bg-read-only: var(--mode-color-action-inactive-default-alt);\n  --input-typical-border-alt: var(--mode-color-action-inactive-default);\n  --input-typical-border-default: var(--mode-color-action-data-entry-with-default);\n  --input-typical-border-disabled: var(--mode-color-action-inactive-default);\n  --input-typical-border-hover: var(--mode-color-action-data-entry-with-hover);\n  --input-typical-border-read-only: var(--mode-color-action-inactive-default);\n  --input-typical-icon-active: var(--mode-color-action-data-entry-with-active);\n  --input-typical-icon-default: var(--mode-color-action-data-entry-txt);\n  --input-typical-icon-disabled: var(--mode-color-action-inactive-icon);\n  --input-typical-icon-hover: var(--mode-color-action-data-entry-with-hover);\n  --input-typical-icon-read-only: var(--mode-color-action-inactive-icon-alt);\n  --input-typical-icon-alt-active: var(--mode-color-action-data-entry-with-active-alt);\n  --input-typical-txt-active: var(--mode-color-action-data-entry-txt);\n  --input-typical-txt-alt: var(--mode-color-action-data-entry-txt-alt);\n  --input-typical-txt-default: var(--mode-color-action-data-entry-txt);\n  --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);\n  --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);\n  --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);\n  --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);\n  --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);\n  --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);\n  --input-switch-bg-active: var(--mode-color-action-grayscale-active);\n  --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);\n  --input-switch-bg-default: var(--mode-color-action-data-entry-default);\n  --input-switch-border-active: transparent;\n  --input-switch-border-active-disabled: transparent;\n  --input-switch-border-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-border-default: var(--mode-color-action-data-entry-with-default);\n  --input-switch-fg-active: var(--mode-color-action-grayscale-with-active);\n  --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);\n  --input-switch-fg-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-fg-default: var(--mode-color-action-data-entry-with-default);\n  --input-switch-label-active: var(--mode-color-action-data-entry-txt);\n  --input-switch-label-activate-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-label-disabled: var(--mode-color-action-inactive-default);\n  --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);\n  --input-validation-border-error: var(--mode-color-status-negative-default);\n  --input-validation-bar-error: var(--mode-color-status-negative-default);\n  --input-validation-bar-warn: var(--mode-color-status-warning-default);\n  --input-validation-label-error: var(--mode-color-status-negative-default);\n  --input-validation-label-success: var(--mode-color-status-positive-default);\n  --input-validation-label-warn: var(--mode-color-status-warning-txt);\n  --input-validation-inverse-border-error: var(--mode-color-status-negative-inverse-default);\n  --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);\n  --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);\n  --input-size-generic-min-w: 288px;\n  --logo-sage-bg-default: var(--mode-color-brand-default);\n  --logo-sage-bg-alt: var(--mode-color-brand-default-alt);\n  --logo-sage-inverse-bg-default: var(--mode-color-brand-inverse-default);\n  --logo-sage-inverse-bg-alt: var(--mode-color-brand-inverse-default-alt);\n  --logo-copilot-no-bg-fg-default: var(--mode-color-brand-copilot-monochrome);\n  --logo-ai-sparkle-bg-dot: var(--mode-color-brand-copilot-with-default);\n  --logo-ai-sparkle-bg-star: var(--mode-color-brand-copilot-default);\n  --logo-ai-sparkle-outline: var(--mode-color-brand-copilot-default);\n  --logo-ai-sparkle-inverse-bg-dot: var(--mode-color-brand-copilot-inverse-with-default);\n  --logo-ai-sparkle-inverse-bg-star: var(--mode-color-brand-copilot-inverse-default);\n  --logo-ai-sparkle-inverse-outline: var(--mode-color-brand-copilot-inverse-default);\n  --link-destructive-label-default: var(--mode-color-action-danger-default-alt);\n  --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);\n  --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);\n  --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);\n  --link-typical-label-default: var(--mode-color-action-main-default-alt2);\n  --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);\n  --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);\n  --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);\n  --link-subtle-label-default: var(--mode-color-action-grayscale-default);\n  --link-subtle-label-hover: var(--mode-color-action-grayscale-active);\n  --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);\n  --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);\n  --message-none: var(--mode-color-none);\n  --message-contextual-bg: var(--mode-color-generic-bg-nought);\n  --message-contextual-icon: var(--mode-color-generic-bg-nought);\n  --message-contextual-icon-alt: var(--mode-color-status-neutral-default);\n  --message-contextual-txt: var(--mode-color-status-txt-with-hover-alt);\n  --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);\n  --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);\n  --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);\n  --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);\n  --message-contextual-callout-icon: var(--mode-color-status-txt-with-default-alt);\n  --message-contextual-error-bg-default: var(--mode-color-status-negative-default);\n  --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);\n  --message-contextual-error-border-default: var(--mode-color-status-negative-default);\n  --message-contextual-error-icon: var(--mode-color-status-negative-default);\n  --message-contextual-info-bg-default: var(--mode-color-status-info-default);\n  --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);\n  --message-contextual-info-border-default: var(--mode-color-status-info-default);\n  --message-contextual-info-icon: var(--mode-color-status-info-default);\n  --message-contextual-success-bg-default: var(--mode-color-status-positive-default);\n  --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);\n  --message-contextual-success-border-default: var(--mode-color-status-positive-default);\n  --message-contextual-success-icon: var(--mode-color-status-positive-default);\n  --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);\n  --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);\n  --message-contextual-warning-border-default: var(--mode-color-status-warning-default);\n  --message-contextual-warning-icon: var(--mode-color-status-warning-default);\n  --message-global-label-default: var(--mode-color-status-txt-with-default-alt);\n  --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);\n  --message-global-callout-bg-hover: var(--mode-color-status-callout-hover-alt);\n  --message-global-callout-icon: var(--mode-color-status-txt-with-default-alt);\n  --message-global-info-bg-default: var(--mode-color-status-info-default-alt);\n  --message-global-info-bg-hover: var(--mode-color-status-info-hover-alt);\n  --message-global-info-icon: var(--mode-color-status-info-default);\n  --message-global-warning-bg-default: var(--mode-color-status-warning-default-alt);\n  --message-global-warning-bg-hover: var(--mode-color-status-warning-hover-alt);\n  --message-global-warning-icon: var(--mode-color-status-warning-default);\n  --nav-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-leftnav-container-bg-default: var(--mode-color-generic-bg-inverse-nought);\n  --nav-leftnav-container-bg-default-alt: var(--mode-color-action-nav-inverse-default-alt);\n  --nav-leftnav-container-border-default: var(--mode-color-generic-fg-inverse-firm);\n  --nav-leftnav-item-bg-active: var(--mode-color-action-nav-inverse-active);\n  --nav-leftnav-item-bg-default: var(--mode-color-none);\n  --nav-leftnav-item-bg-hover: var(--mode-color-action-nav-inverse-hover);\n  --nav-leftnav-item-label-active: var(--mode-color-action-nav-inverse-with-active);\n  --nav-leftnav-item-label-default: var(--mode-color-action-nav-inverse-with-default);\n  --nav-leftnav-item-label-hover: var(--mode-color-action-nav-inverse-with-hover);\n  --nav-modal-container-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-modal-container-bg-default-alt: var(--mode-color-generic-surface-faint);\n  --nav-modal-container-border-default: var(--mode-color-generic-fg-firm);\n  --nav-modal-item-bg-active: var(--mode-color-action-nav-active);\n  --nav-modal-item-bg-default: var(--mode-color-none);\n  --nav-modal-item-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-modal-item-label-active: var(--mode-color-action-nav-with-active);\n  --nav-modal-item-label-default: var(--mode-color-action-nav-with-default);\n  --nav-modal-item-label-hover: var(--mode-color-action-nav-with-hover);\n  --nav-modal-headeritem-label-default: var(--mode-color-generic-txt-soft);\n  --nav-topnav-container-bg-default: var(--mode-color-generic-bg-nought);\n  --nav-topnav-container-border-default: var(--mode-color-generic-fg-firm);\n  --nav-topnav-item-bg-active: var(--mode-color-action-nav-active);\n  --nav-topnav-item-bg-default: var(--mode-color-none);\n  --nav-topnav-item-bg-hover: var(--mode-color-action-nav-hover);\n  --nav-topnav-item-label-active: var(--mode-color-action-nav-with-active);\n  --nav-topnav-item-label-default: var(--mode-color-action-nav-with-default);\n  --nav-topnav-item-label-hover: var(--mode-color-action-nav-with-hover);\n  --page-bg-default: var(--mode-color-generic-surface-nought);\n  --page-bg-alt: var(--mode-color-generic-surface-faint);\n  --page-txt-alt: var(--mode-color-generic-txt-moderate);\n  --page-txt-default: var(--mode-color-generic-txt-severe);\n  --popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);\n  --popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);\n  --popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);\n  --popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);\n  --popover-size-menu-maxwidth-m: var(--container-size-fluid-items-l);\n  --popover-size-menu-maxwidth-l: var(--container-size-fluid-items-xl);\n  --popover-bg-active: var(--mode-color-action-grayscale-active);\n  --popover-bg-active-alt: var(--mode-color-action-grayscale-hover-alt);\n  --popover-bg-default: var(--mode-color-generic-bg-nought);\n  --popover-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --popover-label-active: var(--mode-color-action-grayscale-with-active);\n  --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n  --popover-label-disabled: var(--mode-color-action-inactive-txt);\n  --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n  --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n  --profile-size-outside-xs: var(--global-size-xs);\n  --profile-size-outside-s: var(--global-size-s);\n  --profile-size-outside-m: var(--global-size-m);\n  --profile-size-outside-ml: 56px;\n  --profile-size-outside-l: var(--global-size-4-xl);\n  --profile-size-outside-xl: 104px;\n  --profile-size-outside-xxl: 128px;\n  --profile-size-inside-xs: var(--global-size-3-xs);\n  --profile-size-inside-s: var(--global-size-2-xs);\n  --profile-size-inside-m: var(--global-size-xs);\n  --profile-size-inside-ml: var(--global-size-s);\n  --profile-size-inside-l: var(--global-size-l);\n  --profile-size-inside-xl: var(--global-size-2-xl);\n  --profile-size-inside-xxl: var(--global-size-4-xl);\n  --profile-bg-alt: var(--mode-color-generic-txt-severe);\n  --profile-bg-def: var(--mode-color-generic-bg-nought);\n  --profile-border-default: var(--mode-color-generic-fg-moderate);\n  --profile-label-default: var(--mode-color-generic-txt-severe);\n  --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n  --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n  --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n  --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n  --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n  --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n  --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n  --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n  --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n  --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n  --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n  --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n  --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n  --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n  --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n  --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n  --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n  --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n  --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n  --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n  --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n  --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n  --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n  --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n  --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n  --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n  --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n  --profile-font-def-xs: var(--global-font-static-comp-regular-s);\n  --profile-font-def-s: var(--global-font-static-comp-regular-m);\n  --profile-font-def-m: var(--global-font-static-comp-regular-m);\n  --profile-font-def-ml: var(--global-font-static-comp-regular-m);\n  --profile-font-def-l: var(--global-font-static-comp-regular-l);\n  --profile-font-def-xl: var(--global-font-static-comp-regular-l);\n  --profile-font-def-xxl: var(--global-font-static-comp-regular-l);\n  --profile-font-heading-xs: var(--global-font-static-comp-medium-s);\n  --profile-font-heading-s: var(--global-font-static-comp-medium-m);\n  --profile-font-heading-m: var(--global-font-static-subheading-l);\n  --profile-font-heading-ml: var(--global-font-static-subheading-l);\n  --profile-font-heading-l: var(--global-font-static-subheading-l);\n  --profile-font-heading-xl: var(--global-font-static-heading-m);\n  --profile-font-heading-xxl: var(--global-font-static-heading-l);\n  --profile-font-fluid-initials-xs: var(--global-font-fluid-comp-placeholder-xs);\n  --profile-font-fluid-initials-s: var(--global-font-fluid-comp-placeholder-s);\n  --profile-font-fluid-initials-m: var(--global-font-fluid-comp-placeholder-m);\n  --profile-font-fluid-initials-ml: var(--global-font-fluid-comp-placeholder-ml);\n  --profile-font-fluid-initials-l: var(--global-font-fluid-comp-placeholder-l);\n  --profile-font-fluid-initials-xl: var(--global-font-fluid-comp-placeholder-xl);\n  --profile-font-fluid-initials-xxl: var(--global-font-fluid-comp-placeholder-xxl);\n  --profile-font-fluid-def-xs: var(--global-font-fluid-comp-regular-s);\n  --profile-font-fluid-def-s: var(--global-font-fluid-comp-regular-m);\n  --profile-font-fluid-def-m: var(--global-font-fluid-comp-regular-m);\n  --profile-font-fluid-def-ml: var(--global-font-fluid-comp-regular-m);\n  --profile-font-fluid-def-l: var(--global-font-fluid-comp-regular-l);\n  --profile-font-fluid-def-xl: var(--global-font-fluid-comp-regular-l);\n  --profile-font-fluid-def-xxl: var(--global-font-fluid-comp-regular-l);\n  --profile-font-fluid-heading-xs: var(--global-font-fluid-comp-medium-s);\n  --profile-font-fluid-heading-s: var(--global-font-fluid-comp-medium-m);\n  --profile-font-fluid-heading-m: var(--global-font-fluid-subheading-l);\n  --profile-font-fluid-heading-ml: var(--global-font-fluid-subheading-l);\n  --profile-font-fluid-heading-l: var(--global-font-fluid-subheading-l);\n  --profile-font-fluid-heading-xl: var(--global-font-fluid-heading-m);\n  --profile-font-fluid-heading-xxl: var(--global-font-fluid-heading-l);\n  --progress-none: var(--mode-color-none);\n  --progress-bg-default: var(--mode-color-generic-bg-delicate);\n  --progress-border-default: var(--mode-color-generic-fg-firm);\n  --progress-fg-alt: var(--mode-color-status-positive-default);\n  --progress-fg-alt2: var(--mode-color-generic-txt-soft);\n  --progress-fg-caution: var(--mode-color-status-warning-default);\n  --progress-fg-default: var(--mode-color-action-grayscale-active);\n  --progress-fg-error: var(--mode-color-status-negative-default);\n  --progress-fg-info: var(--mode-color-status-info-default);\n  --progress-label-alt: var(--mode-color-generic-txt-moderate);\n  --progress-label-default: var(--mode-color-generic-txt-severe);\n  --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);\n  --progress-inverse-label-alt: var(--mode-color-generic-txt-inverse-soft);\n  --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);\n  --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);\n  --progress-loader-fg-default: var(--mode-color-generic-fg-inverse-nought);\n  --progress-loader-fg-ai: var(--mode-color-status-ai-default-horizontal);\n  --progress-loader-fg-error: var(--mode-color-status-negative-default);\n  --progress-loader-fg-complete: var(--mode-color-status-positive-default);\n  --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);\n  --progress-loader-inverse-fg-default: var(--mode-color-generic-fg-inverse-extreme);\n  --progress-loader-inverse-fg-ai: var(--mode-color-status-ai-inverse-default-horizontal);\n  --progress-stepflow-bg-active: var(--mode-color-action-grayscale-active);\n  --progress-stepflow-bg-complete: var(--mode-color-status-positive-default);\n  --progress-stepflow-bg-default: var(--mode-color-generic-fg-nought);\n  --progress-stepflow-border-active-inner: var(--mode-color-generic-fg-nought);\n  --progress-stepflow-border-active-outer: var(--mode-color-action-grayscale-active);\n  --progress-stepflow-border-default: var(--mode-color-generic-fg-firm);\n  --progress-stepflow-label-alt: var(--mode-color-generic-txt-soft);\n  --progress-stepflow-label-default: var(--mode-color-generic-txt-severe);\n  --progress-stepindicator-bg-active: var(--mode-color-action-grayscale-active);\n  --progress-stepindicator-bg-complete: var(--mode-color-status-positive-default);\n  --progress-stepindicator-border-active-outer: var(--mode-color-action-grayscale-active);\n  --progress-stepindicator-border-default: var(--mode-color-generic-fg-firm);\n  --progress-stepindicator-border-success: var(--mode-color-status-positive-default);\n  --progress-stepindicator-label-active: var(--mode-color-action-grayscale-with-active);\n  --progress-stepindicator-label-complete: var(--mode-color-action-grayscale-with-active);\n  --progress-stepindicator-label-default: var(--mode-color-generic-txt-severe);\n  --pill-generic-none: var(--mode-color-none);\n  --pill-generic-label-default: var(--mode-color-status-txt-with-default);\n  --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);\n  --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);\n  --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);\n  --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);\n  --pill-generic-inverse-label-hover: var(--mode-color-status-txt-inverse-with-hover);\n  --pill-generic-inverse-label-alt-default: var(--mode-color-status-txt-inverse-with-default-alt);\n  --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);\n  --pill-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default);\n  --pill-swatches-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n  --pill-swatches-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n  --pill-swatches-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n  --pill-swatches-teal-border-default: var(--mode-color-status-custom-teal-default);\n  --pill-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default);\n  --pill-swatches-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n  --pill-swatches-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n  --pill-swatches-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n  --pill-swatches-lime-border-default: var(--mode-color-status-custom-lime-default);\n  --pill-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default);\n  --pill-swatches-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n  --pill-swatches-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n  --pill-swatches-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n  --pill-swatches-pink-border-default: var(--mode-color-status-custom-pink-default);\n  --pill-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default);\n  --pill-swatches-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n  --pill-swatches-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n  --pill-swatches-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n  --pill-swatches-slate-border-default: var(--mode-color-status-custom-slate-default);\n  --pill-swatches-orange-bg-default: var(--mode-color-status-warning-default);\n  --pill-swatches-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n  --pill-swatches-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n  --pill-swatches-orange-bg-hover: var(--mode-color-status-warning-hover);\n  --pill-swatches-orange-border-default: var(--mode-color-status-warning-default);\n  --pill-swatches-red-bg-default: var(--mode-color-status-negative-default);\n  --pill-swatches-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n  --pill-swatches-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n  --pill-swatches-red-bg-hover: var(--mode-color-status-negative-hover);\n  --pill-swatches-red-border-default: var(--mode-color-status-negative-default);\n  --pill-swatches-gray-bg-default: var(--mode-color-status-neutral-default);\n  --pill-swatches-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n  --pill-swatches-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n  --pill-swatches-gray-bg-hover: var(--mode-color-status-neutral-hover);\n  --pill-swatches-gray-border-default: var(--mode-color-status-neutral-default);\n  --pill-swatches-purple-bg-default: var(--mode-color-status-priority-default);\n  --pill-swatches-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n  --pill-swatches-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n  --pill-swatches-purple-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-swatches-purple-border-default: var(--mode-color-status-priority-default);\n  --pill-swatches-green-bg-default: var(--mode-color-status-positive-default);\n  --pill-swatches-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n  --pill-swatches-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n  --pill-swatches-green-bg-hover: var(--mode-color-status-positive-hover);\n  --pill-swatches-green-border-default: var(--mode-color-status-positive-default);\n  --pill-swatches-blue-bg-default: var(--mode-color-status-info-default);\n  --pill-swatches-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n  --pill-swatches-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n  --pill-swatches-blue-bg-hover: var(--mode-color-status-info-hover);\n  --pill-swatches-blue-border-default: var(--mode-color-status-info-default);\n  --pill-error-bg-default: var(--mode-color-status-negative-default);\n  --pill-error-bg-alt-default: var(--mode-color-status-negative-default-alt);\n  --pill-error-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n  --pill-error-bg-hover: var(--mode-color-status-negative-hover);\n  --pill-error-border-default: var(--mode-color-status-negative-default);\n  --pill-error-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n  --pill-error-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n  --pill-error-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n  --pill-error-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n  --pill-error-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n  --pill-priority-bg-default: var(--mode-color-status-priority-default);\n  --pill-priority-bg-alt-default: var(--mode-color-status-priority-default-alt);\n  --pill-priority-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n  --pill-priority-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-priority-border-default: var(--mode-color-status-priority-default);\n  --pill-priority-inverse-bg-default: var(--mode-color-status-priority-default);\n  --pill-priority-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n  --pill-priority-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n  --pill-priority-inverse-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-priority-inverse-border-default: var(--mode-color-status-priority-default);\n  --pill-info-bg-default: var(--mode-color-status-info-default);\n  --pill-info-bg-alt-default: var(--mode-color-status-info-default-alt);\n  --pill-info-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n  --pill-info-bg-hover: var(--mode-color-status-info-hover);\n  --pill-info-border-default: var(--mode-color-status-info-default);\n  --pill-info-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n  --pill-info-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n  --pill-info-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n  --pill-info-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n  --pill-info-inverse-border-default: var(--mode-color-status-info-inverse-default);\n  --pill-neutral-bg-default: var(--mode-color-status-neutral-default);\n  --pill-neutral-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n  --pill-neutral-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n  --pill-neutral-bg-hover: var(--mode-color-status-neutral-hover);\n  --pill-neutral-border-default: var(--mode-color-status-neutral-default);\n  --pill-neutral-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-neutral-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n  --pill-neutral-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n  --pill-neutral-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n  --pill-neutral-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-readonly-bg-default: var(--mode-color-status-inactive-default);\n  --pill-readonly-border-default: var(--mode-color-status-inactive-default);\n  --pill-readonly-label: var(--mode-color-generic-txt-soft);\n  --pill-positive-bg-default: var(--mode-color-status-positive-default);\n  --pill-positive-bg-alt-default: var(--mode-color-status-positive-default-alt);\n  --pill-positive-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n  --pill-positive-bg-hover: var(--mode-color-status-positive-hover);\n  --pill-positive-border-default: var(--mode-color-status-positive-default);\n  --pill-positive-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n  --pill-positive-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n  --pill-positive-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n  --pill-positive-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n  --pill-positive-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n  --pill-warn-bg-default: var(--mode-color-status-warning-default);\n  --pill-warn-bg-alt-default: var(--mode-color-status-warning-default-alt);\n  --pill-warn-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n  --pill-warn-bg-hover: var(--mode-color-status-warning-hover);\n  --pill-warn-border-default: var(--mode-color-status-warning-default);\n  --pill-warn-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n  --pill-warn-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n  --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n  --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n  --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n  --pill-blue-bg-default: var(--mode-color-status-info-default);\n  --pill-blue-bg-alt-default: var(--mode-color-status-info-default-alt);\n  --pill-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);\n  --pill-blue-bg-hover: var(--mode-color-status-info-hover);\n  --pill-blue-border-default: var(--mode-color-status-info-default);\n  --pill-blue-inverse-bg-default: var(--mode-color-status-info-inverse-default);\n  --pill-blue-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);\n  --pill-blue-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);\n  --pill-blue-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);\n  --pill-blue-inverse-border-default: var(--mode-color-status-info-inverse-default);\n  --pill-green-bg-default: var(--mode-color-status-positive-default);\n  --pill-green-bg-alt-default: var(--mode-color-status-positive-default-alt);\n  --pill-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);\n  --pill-green-bg-hover: var(--mode-color-status-positive-hover);\n  --pill-green-border-default: var(--mode-color-status-positive-default);\n  --pill-green-inverse-bg-default: var(--mode-color-status-positive-inverse-default);\n  --pill-green-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);\n  --pill-green-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);\n  --pill-green-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);\n  --pill-green-inverse-border-default: var(--mode-color-status-positive-inverse-default);\n  --pill-gray-bg-default: var(--mode-color-status-neutral-default);\n  --pill-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);\n  --pill-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);\n  --pill-gray-bg-hover: var(--mode-color-status-neutral-hover);\n  --pill-gray-border-default: var(--mode-color-status-neutral-default);\n  --pill-gray-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-gray-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);\n  --pill-gray-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);\n  --pill-gray-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);\n  --pill-gray-inverse-border-default: var(--mode-color-status-neutral-inverse-default);\n  --pill-lime-bg-default: var(--mode-color-status-custom-lime-default);\n  --pill-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);\n  --pill-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);\n  --pill-lime-bg-hover: var(--mode-color-status-custom-lime-hover);\n  --pill-lime-border-default: var(--mode-color-status-custom-lime-default);\n  --pill-orange-bg-default: var(--mode-color-status-warning-default);\n  --pill-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);\n  --pill-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);\n  --pill-orange-bg-hover: var(--mode-color-status-warning-hover);\n  --pill-orange-border-default: var(--mode-color-status-warning-default);\n  --pill-orange-inverse-bg-default: var(--mode-color-status-warning-inverse-default);\n  --pill-orange-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);\n  --pill-orange-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);\n  --pill-orange-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);\n  --pill-orange-inverse-border-default: var(--mode-color-status-warning-inverse-default);\n  --pill-pink-bg-default: var(--mode-color-status-custom-pink-default);\n  --pill-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);\n  --pill-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);\n  --pill-pink-bg-hover: var(--mode-color-status-custom-pink-hover);\n  --pill-pink-border-default: var(--mode-color-status-custom-pink-default);\n  --pill-purple-bg-default: var(--mode-color-status-priority-default);\n  --pill-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);\n  --pill-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);\n  --pill-purple-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-purple-border-default: var(--mode-color-status-priority-default);\n  --pill-purple-inverse-bg-default: var(--mode-color-status-priority-default);\n  --pill-purple-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);\n  --pill-purple-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);\n  --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-hover);\n  --pill-purple-inverse-border-default: var(--mode-color-status-priority-default);\n  --pill-red-bg-default: var(--mode-color-status-negative-default);\n  --pill-red-bg-alt-default: var(--mode-color-status-negative-default-alt);\n  --pill-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);\n  --pill-red-bg-hover: var(--mode-color-status-negative-hover);\n  --pill-red-border-default: var(--mode-color-status-negative-default);\n  --pill-red-inverse-bg-default: var(--mode-color-status-negative-inverse-default);\n  --pill-red-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);\n  --pill-red-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);\n  --pill-red-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);\n  --pill-red-inverse-border-default: var(--mode-color-status-negative-inverse-default);\n  --pill-slate-bg-default: var(--mode-color-status-custom-slate-default);\n  --pill-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);\n  --pill-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);\n  --pill-slate-bg-hover: var(--mode-color-status-custom-slate-hover);\n  --pill-slate-border-default: var(--mode-color-status-custom-slate-default);\n  --pill-teal-bg-default: var(--mode-color-status-custom-teal-default);\n  --pill-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);\n  --pill-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);\n  --pill-teal-bg-hover: var(--mode-color-status-custom-teal-hover);\n  --pill-teal-border-default: var(--mode-color-status-custom-teal-default);\n  --tab-bg-active: var(--mode-color-action-grayscale-with-active);\n  --tab-bg-default: var(--mode-color-none);\n  --tab-bg-hover: var(--mode-color-action-grayscale-hover-alt);\n  --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n  --tab-border-active: var(--mode-color-action-grayscale-active);\n  --tab-border-default: var(--mode-color-generic-fg-moderate);\n  --tab-border-hover: var(--mode-color-generic-fg-firm);\n  --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n  --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n  --tab-label-active: var(--mode-color-action-grayscale-active);\n  --tab-icon-active: var(--mode-color-action-grayscale-active);\n  --tab-label-default: var(--mode-color-action-grayscale-default);\n  --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n  --tab-validation-border-warning: var(--mode-color-status-warning-default);\n  --tab-validation-border-error: var(--mode-color-status-negative-default);\n  --tab-validation-icon-error: var(--mode-color-status-negative-default);\n  --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n  --tab-validation-label-error: var(--mode-color-status-negative-default);\n  --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n  --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n  --table-header-subtle-bg-default: var(--mode-color-none);\n  --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n  --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n  --table-header-harsh-bg-alt: var(--mode-color-generic-surface-severe);\n  --table-header-harsh-bg-default: var(--mode-color-generic-surface-harsh);\n  --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n  --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n  --table-row-bg-default: var(--mode-color-generic-bg-nought);\n  --table-row-bg-alt: var(--mode-color-generic-bg-delicate);\n  --table-row-bg-alt2: var(--mode-color-generic-bg-faint);\n  --table-row-bg-alt3: var(--mode-color-generic-bg-soft);\n  --table-row-bg-selected: var(--mode-color-generic-bg-soft);\n  --table-row-border-default: var(--mode-color-generic-fg-soft);\n  --table-row-label-default: var(--mode-color-generic-txt-severe);\n  --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n  --table-footer-bg-default: var(--mode-color-generic-bg-soft);\n  --table-footer-border-default: var(--mode-color-generic-fg-soft);\n  --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";
+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-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-faint: #f4f5f6;\n  --mode-color-generic-surface-harsh: #475a6a;\n  --mode-color-generic-surface-severe: #304658;\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: #000000e6;\n  --mode-color-action-grayscale-default-alt: #000000ab;\n  --mode-color-action-grayscale-hover-alt: #0000001a;\n  --mode-color-action-grayscale-hover: #00000026;\n  --mode-color-action-grayscale-with-active: #FFFFFF;\n  --mode-color-action-grayscale-with-active-alt: #000000;\n  --mode-color-action-grayscale-with-default: #FFFFFF;\n  --mode-color-action-grayscale-with-hover: #000000;\n  --mode-color-action-grayscale-inverse-active: #FFFFFF;\n  --mode-color-action-grayscale-inverse-active-alt: #ffffff26;\n  --mode-color-action-grayscale-inverse-default: #ffffffe6;\n  --mode-color-action-grayscale-inverse-default-alt: #ffffffab;\n  --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;\n  --mode-color-action-grayscale-inverse-hover: #ffffff26;\n  --mode-color-action-grayscale-inverse-with-active: #000000;\n  --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;\n  --mode-color-action-grayscale-inverse-with-default: #000000;\n  --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;\n  --mode-color-action-nav-active: #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-faint);\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-grayscale-hover-alt);\n  --popover-label-active: var(--mode-color-action-grayscale-with-active);\n  --popover-label-active-alt: var(--mode-color-action-grayscale-with-hover);\n  --popover-label-disabled: var(--mode-color-action-inactive-txt);\n  --popover-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --popover-label-default: var(--mode-color-action-grayscale-default-alt);\n  --popover-submenu-bg-default: var(--mode-color-generic-bg-faint);\n  --profile-size-outside-xs: var(--global-size-xs);\n  --profile-size-outside-s: var(--global-size-s);\n  --profile-size-outside-m: var(--global-size-m);\n  --profile-size-outside-ml: 56px;\n  --profile-size-outside-l: var(--global-size-4-xl);\n  --profile-size-outside-xl: 104px;\n  --profile-size-outside-xxl: 128px;\n  --profile-size-inside-xs: var(--global-size-3-xs);\n  --profile-size-inside-s: var(--global-size-2-xs);\n  --profile-size-inside-m: var(--global-size-xs);\n  --profile-size-inside-ml: var(--global-size-s);\n  --profile-size-inside-l: var(--global-size-l);\n  --profile-size-inside-xl: var(--global-size-2-xl);\n  --profile-size-inside-xxl: var(--global-size-4-xl);\n  --profile-bg-alt: var(--mode-color-generic-txt-severe);\n  --profile-bg-def: var(--mode-color-generic-bg-nought);\n  --profile-border-default: var(--mode-color-generic-fg-moderate);\n  --profile-label-default: var(--mode-color-generic-txt-severe);\n  --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);\n  --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);\n  --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);\n  --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);\n  --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);\n  --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);\n  --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);\n  --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);\n  --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);\n  --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);\n  --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);\n  --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);\n  --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);\n  --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);\n  --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);\n  --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);\n  --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);\n  --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);\n  --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);\n  --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);\n  --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);\n  --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);\n  --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);\n  --profile-font-initials-ml: var(--global-font-static-comp-placeholder-ml);\n  --profile-font-initials-l: var(--global-font-static-comp-placeholder-l);\n  --profile-font-initials-xl: var(--global-font-static-comp-placeholder-xl);\n  --profile-font-initials-xxl: var(--global-font-static-comp-placeholder-xxl);\n  --profile-font-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-action-grayscale-hover-alt);\n  --tab-border-active-alt: var(--mode-color-generic-fg-moderate);\n  --tab-border-active: var(--mode-color-action-grayscale-active);\n  --tab-border-default: var(--mode-color-generic-fg-moderate);\n  --tab-border-hover: var(--mode-color-generic-fg-firm);\n  --tab-icon-default: var(--mode-color-action-grayscale-default-alt);\n  --tab-icon-hover: var(--mode-color-action-grayscale-with-hover);\n  --tab-label-active: var(--mode-color-action-grayscale-active);\n  --tab-icon-active: var(--mode-color-action-grayscale-active);\n  --tab-label-default: var(--mode-color-action-grayscale-default);\n  --tab-label-hover: var(--mode-color-action-grayscale-with-hover);\n  --tab-nav-bg-default: var(--mode-color-generic-bg-nought);\n  --tab-validation-border-warning: var(--mode-color-status-warning-default);\n  --tab-validation-border-error: var(--mode-color-status-negative-default);\n  --tab-validation-icon-error: var(--mode-color-status-negative-default);\n  --tab-validation-icon-warning: var(--mode-color-status-warning-default);\n  --tab-validation-label-error: var(--mode-color-status-negative-default);\n  --tab-validation-label-warning: var(--mode-color-status-warning-txt);\n  --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);\n  --table-header-subtle-bg-default: var(--mode-color-none);\n  --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);\n  --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);\n  --table-header-harsh-bg-alt: var(--mode-color-generic-surface-severe);\n  --table-header-harsh-bg-default: var(--mode-color-generic-surface-harsh);\n  --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);\n  --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);\n  --table-row-bg-default: var(--mode-color-generic-bg-nought);\n  --table-row-bg-alt: var(--mode-color-generic-bg-delicate);\n  --table-row-bg-alt2: var(--mode-color-generic-bg-faint);\n  --table-row-bg-selected: var(--mode-color-generic-bg-soft);\n  --table-row-border-default: var(--mode-color-generic-fg-soft);\n  --table-row-label-default: var(--mode-color-generic-txt-severe);\n  --table-row-label-selected: var(--mode-color-generic-txt-extreme);\n  --table-footer-bg-default: var(--mode-color-generic-bg-soft);\n  --table-footer-border-default: var(--mode-color-generic-fg-soft);\n  --table-footer-label-default: var(--mode-color-generic-txt-severe);\n";
 export default _default;