@egov3/system-design 1.2.63 → 1.2.65

package/dist/cjs/stories/Button.stories.d.ts

@@ -23,6 +23,8 @@ export declare const Mini: Story;
 export declare const VariantDefault: Story;
 export declare const VariantTinted: Story;
 export declare const VariantSecondary: Story;
+export declare const VariantBlack: Story;
 export declare const VariantDefaultDisabled: Story;
 export declare const VariantTintedDisabled: Story;
 export declare const VariantSecondaryDisabled: Story;
+export declare const VariantBlackDisabled: Story;

package/dist/esm/components/Button/index.d.ts

@@ -6,7 +6,7 @@ export interface IButtonProps {
     className?: string;
     isRounded?: boolean;
     disabled?: boolean;
-    variant?: "default" | "tinted" | "secondary";
+    variant?: "default" | "tinted" | "secondary" | "black";
     size?: "mini" | "small" | "medium" | "large";
     style?: React.CSSProperties;
     dataTestid?: string;

package/dist/esm/components/Typography/index.d.ts

@@ -1,5 +1,5 @@
 import React, { FC, JSX } from "react";
-type TFontClass = "heading1" | "heading3" | "subtitles3" | "body1Medium" | "body1Regular" | "body2Medium" | "body2Regular" | "body3Regular" | "caption1Medium" | "caption1Regular" | "caption1Semibold" | "caption2Medium" | "caption2Regular";
+type TFontClass = "heading1" | "heading3" | "subtitles3" | "body1Medium" | "body1Regular" | "body2Medium" | "body2Regular" | "body3Regular" | "caption1Medium" | "caption1Regular" | "caption1Semibold" | "caption2Medium" | "caption2Regular" | "caption2Semibold";
 export interface ITypographyProps extends React.HTMLAttributes<HTMLElement> {
     tag: keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;
     fontClass: TFontClass;

package/dist/esm/index.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import React__default, { JSX, Dispatch, SetStateAction, HTMLInputTypeAttribute } from 'react';
 
-type TFontClass = "heading1" | "heading3" | "subtitles3" | "body1Medium" | "body1Regular" | "body2Medium" | "body2Regular" | "body3Regular" | "caption1Medium" | "caption1Regular" | "caption1Semibold" | "caption2Medium" | "caption2Regular";
+type TFontClass = "heading1" | "heading3" | "subtitles3" | "body1Medium" | "body1Regular" | "body2Medium" | "body2Regular" | "body3Regular" | "caption1Medium" | "caption1Regular" | "caption1Semibold" | "caption2Medium" | "caption2Regular" | "caption2Semibold";
 interface ITypographyProps extends React__default.HTMLAttributes<HTMLElement> {
     tag: keyof JSX.IntrinsicElements | React__default.JSXElementConstructor<any>;
     fontClass: TFontClass;
@@ -76,7 +76,7 @@ interface IButtonProps {
     className?: string;
     isRounded?: boolean;
     disabled?: boolean;
-    variant?: "default" | "tinted" | "secondary";
+    variant?: "default" | "tinted" | "secondary" | "black";
     size?: "mini" | "small" | "medium" | "large";
     style?: React__default.CSSProperties;
     dataTestid?: string;

package/dist/esm/index.js

@@ -2828,16 +2828,16 @@ var Accordion = function (_a) {
             React.createElement("svg", { "data-testid": "Accordion_DIRECTION", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
                     transform: !open ? "none" : "rotate(0.5turn)",
                 } },
-                React.createElement("path", { d: "M15.8346 7.5L10.0013 13.3333L4.16797 7.5", stroke: "#758393" }))),
+                React.createElement("path", { d: "M9.99998 15.1933L2.45746 7.65162L3.63579 6.47329L9.99998 12.8366L16.3641 6.47329L17.5425 7.65162L9.99998 15.1933Z", fill: "#758393" }))),
         React.createElement("div", { "data-testid": "Accordion_CONTENT", className: joinClasses(styles$6.accordionContent, !open && styles$6["accordionContent--hidden"]) }, children)));
 };
 
-var css_248z$7 = ".button-module_button__JyfZW {\n  border: none;\n  transition: background-color 0.2s ease;\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n.button-module_btn-default__EDl7t {\n  color: var(--default-white-color);\n  background-color: var(--default-primary-accent);\n}\n\n.button-module_btn-default--disabled__H36E7 {\n  color: var(--text-disabled-color);\n  background-color: var(--button-disabled-default-color);\n}\n\n.button-module_btn-tinted__Do6iX {\n  color: var(--text-accent);\n  background-color: var(--button-tinted-default-color);\n}\n\n.button-module_btn-tinted--disabled__XRuq- {\n  color: var(--text-disabled-accent-color);\n  background-color: var(--button-tinted-default-color);\n}\n\n.button-module_btn-secondary__LtTTr {\n  color: var(--text-primary);\n  background-color: var(--surface-surface-3-color);\n}\n\n.button-module_btn-secondary--disabled__5YS63 {\n  color: var(--text-secondary);\n  background-color: var(--surface-surface-3-color);\n}\n\n.button-module_btn-default__EDl7t:hover {\n  background-color: var(--button-primary-on-hover-color);\n}\n\n.button-module_btn-tinted__Do6iX:hover {\n  background-color: var(--button-tinted-on-hover-color);\n}\n\n.button-module_btn-secondary__LtTTr:hover {\n  background-color: var(--button-secondary-on-hover);\n}\n\n.button-module_btn--mini__a9EJm {\n  gap: 4px;\n  padding: 6px 12px;\n}\n.button-module_btn--small__xfhlR {\n  gap: 8px;\n  padding: 8px 16px;\n}\n.button-module_btn--medium__pFJSr {\n  gap: 8px;\n  padding: 8px 20px;\n}\n.button-module_btn--large__GvwY2 {\n  gap: 8px;\n  padding: 14px 24px;\n}\n\n.button-module_btn-square--mini__RWpOc {\n  border-radius: 4px;\n}\n.button-module_btn-square--small__M-WgA {\n  border-radius: 6px;\n}\n.button-module_btn-square--medium__aDBfE {\n  border-radius: 10px;\n}\n.button-module_btn-square--large__dwebF {\n  border-radius: 12px;\n}\n\n.button-module_btn-rounded--mini__bX5xJ {\n  border-radius: 32px;\n}\n.button-module_btn-rounded--small__LI-QV {\n  border-radius: 32px;\n}\n.button-module_btn-rounded--medium__TKy02 {\n  border-radius: 32px;\n}\n.button-module_btn-rounded--large__joy-r {\n  border-radius: 40px;\n}\n";
-var styles$5 = {"button":"button-module_button__JyfZW","btn-default":"button-module_btn-default__EDl7t","btn-default--disabled":"button-module_btn-default--disabled__H36E7","btn-tinted":"button-module_btn-tinted__Do6iX","btn-tinted--disabled":"button-module_btn-tinted--disabled__XRuq-","btn-secondary":"button-module_btn-secondary__LtTTr","btn-secondary--disabled":"button-module_btn-secondary--disabled__5YS63","btn--mini":"button-module_btn--mini__a9EJm","btn--small":"button-module_btn--small__xfhlR","btn--medium":"button-module_btn--medium__pFJSr","btn--large":"button-module_btn--large__GvwY2","btn-square--mini":"button-module_btn-square--mini__RWpOc","btn-square--small":"button-module_btn-square--small__M-WgA","btn-square--medium":"button-module_btn-square--medium__aDBfE","btn-square--large":"button-module_btn-square--large__dwebF","btn-rounded--mini":"button-module_btn-rounded--mini__bX5xJ","btn-rounded--small":"button-module_btn-rounded--small__LI-QV","btn-rounded--medium":"button-module_btn-rounded--medium__TKy02","btn-rounded--large":"button-module_btn-rounded--large__joy-r"};
+var css_248z$7 = ".button-module_button__JyfZW {\n  border: none;\n  transition: background-color 0.2s ease;\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n.button-module_btn-default__EDl7t {\n  color: var(--default-white-color);\n  background-color: var(--default-primary-accent);\n}\n\n.button-module_btn-default--disabled__H36E7 {\n  color: var(--text-disabled-color);\n  background-color: var(--button-disabled-default-color);\n}\n\n.button-module_btn-tinted__Do6iX {\n  color: var(--text-accent);\n  background-color: var(--button-tinted-default-color);\n}\n\n.button-module_btn-tinted--disabled__XRuq- {\n  color: var(--text-disabled-accent-color);\n  background-color: var(--button-tinted-default-color);\n}\n\n.button-module_btn-secondary__LtTTr {\n  color: var(--text-primary);\n  background-color: var(--surface-surface-3-color);\n}\n\n.button-module_btn-secondary--disabled__5YS63 {\n  color: var(--text-secondary);\n  background-color: var(--surface-surface-3-color);\n}\n\n.button-module_btn-black--disabled__M7H0K {\n  color: var(--text-disabled-color);\n  background-color: var(--button-disabled-default-color);\n}\n\n.button-module_btn-black__SFwzH {\n  color: var(--default-white-color);\n  background-color: var(--button-black-default-color);\n}\n\n.button-module_btn-default__EDl7t:hover {\n  background-color: var(--button-primary-on-hover-color);\n}\n\n.button-module_btn-tinted__Do6iX:hover {\n  background-color: var(--button-tinted-on-hover-color);\n}\n\n.button-module_btn-secondary__LtTTr:hover {\n  background-color: var(--button-secondary-on-hover);\n}\n\n.button-module_btn-black__SFwzH:hover {\n  background-color: var(--button-black-on-hover-color);\n}\n\n.button-module_btn--mini__a9EJm {\n  gap: 4px;\n  padding: 6px 12px;\n}\n.button-module_btn--small__xfhlR {\n  gap: 8px;\n  padding: 8px 16px;\n}\n.button-module_btn--medium__pFJSr {\n  gap: 8px;\n  padding: 8px 20px;\n}\n.button-module_btn--large__GvwY2 {\n  gap: 8px;\n  padding: 14px 24px;\n}\n\n.button-module_btn-square--mini__RWpOc {\n  border-radius: 4px;\n}\n.button-module_btn-square--small__M-WgA {\n  border-radius: 6px;\n}\n.button-module_btn-square--medium__aDBfE {\n  border-radius: 10px;\n}\n.button-module_btn-square--large__dwebF {\n  border-radius: 12px;\n}\n\n.button-module_btn-rounded--mini__bX5xJ {\n  border-radius: 32px;\n}\n.button-module_btn-rounded--small__LI-QV {\n  border-radius: 32px;\n}\n.button-module_btn-rounded--medium__TKy02 {\n  border-radius: 32px;\n}\n.button-module_btn-rounded--large__joy-r {\n  border-radius: 40px;\n}\n";
+var styles$5 = {"button":"button-module_button__JyfZW","btn-default":"button-module_btn-default__EDl7t","btn-default--disabled":"button-module_btn-default--disabled__H36E7","btn-tinted":"button-module_btn-tinted__Do6iX","btn-tinted--disabled":"button-module_btn-tinted--disabled__XRuq-","btn-secondary":"button-module_btn-secondary__LtTTr","btn-secondary--disabled":"button-module_btn-secondary--disabled__5YS63","btn-black--disabled":"button-module_btn-black--disabled__M7H0K","btn-black":"button-module_btn-black__SFwzH","btn--mini":"button-module_btn--mini__a9EJm","btn--small":"button-module_btn--small__xfhlR","btn--medium":"button-module_btn--medium__pFJSr","btn--large":"button-module_btn--large__GvwY2","btn-square--mini":"button-module_btn-square--mini__RWpOc","btn-square--small":"button-module_btn-square--small__M-WgA","btn-square--medium":"button-module_btn-square--medium__aDBfE","btn-square--large":"button-module_btn-square--large__dwebF","btn-rounded--mini":"button-module_btn-rounded--mini__bX5xJ","btn-rounded--small":"button-module_btn-rounded--small__LI-QV","btn-rounded--medium":"button-module_btn-rounded--medium__TKy02","btn-rounded--large":"button-module_btn-rounded--large__joy-r"};
 styleInject(css_248z$7);
 
-var css_248z$6 = "/* Headings/Heading 1 */\n.typography-module_heading1__ub7Od {\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 36px; /* 112.5% */\n  letter-spacing: -0.32px;\n}\n\n/* Headings/Heading 3 */\n.typography-module_heading3__QLNPD {\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 28px; /* 116.667% */\n  letter-spacing: -0.24px;\n}\n\n/* Subtitles/Subtitle 3 */\n.typography-module_subtitles3__QZScB {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Medium */\n.typography-module_body1Medium__INZB0 {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Regular */\n.typography-module_body1Regular__H3iQB {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 2, Medium */\n.typography-module_body2Medium__Caa0m {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px; /* 142.857% */\n}\n\n/* Body/Body 2, Regular */\n.typography-module_body2Regular__MEtzs {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n}\n\n/* Body/Body 3, Regular */\n.typography-module_body3Regular__rp6ng {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 114.286% */\n}\n\n/* Caption/Caption 1, Medium */\n.typography-module_caption1Medium__xXMm- {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 1, Regular */\n.typography-module_caption1Regular__QVGyq {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 1, Semibold */\n.typography-module_caption1Semibold__Il1Aq {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 2, Medium */\n.typography-module_caption2Medium__0Vvmy {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 120% */\n}\n\n/* Caption/Caption 2, Regular */\n.typography-module_caption2Regular__GxtiS {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 12px; /* 120% */\n}\n";
-var typography = {"heading1":"typography-module_heading1__ub7Od","heading3":"typography-module_heading3__QLNPD","subtitles3":"typography-module_subtitles3__QZScB","body1Medium":"typography-module_body1Medium__INZB0","body1Regular":"typography-module_body1Regular__H3iQB","body2Medium":"typography-module_body2Medium__Caa0m","body2Regular":"typography-module_body2Regular__MEtzs","body3Regular":"typography-module_body3Regular__rp6ng","caption1Medium":"typography-module_caption1Medium__xXMm-","caption1Regular":"typography-module_caption1Regular__QVGyq","caption1Semibold":"typography-module_caption1Semibold__Il1Aq","caption2Medium":"typography-module_caption2Medium__0Vvmy","caption2Regular":"typography-module_caption2Regular__GxtiS"};
+var css_248z$6 = "/* Headings/Heading 1 */\n.typography-module_heading1__ub7Od {\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 36px; /* 112.5% */\n  letter-spacing: -0.32px;\n}\n\n/* Headings/Heading 3 */\n.typography-module_heading3__QLNPD {\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 28px; /* 116.667% */\n  letter-spacing: -0.24px;\n}\n\n/* Subtitles/Subtitle 3 */\n.typography-module_subtitles3__QZScB {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Medium */\n.typography-module_body1Medium__INZB0 {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Regular */\n.typography-module_body1Regular__H3iQB {\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; /* 150% */\n}\n\n/* Body/Body 2, Medium */\n.typography-module_body2Medium__Caa0m {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px; /* 142.857% */\n}\n\n/* Body/Body 2, Regular */\n.typography-module_body2Regular__MEtzs {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n}\n\n/* Body/Body 3, Regular */\n.typography-module_body3Regular__rp6ng {\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 114.286% */\n}\n\n/* Caption/Caption 1, Medium */\n.typography-module_caption1Medium__xXMm- {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 1, Regular */\n.typography-module_caption1Regular__QVGyq {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 1, Semibold */\n.typography-module_caption1Semibold__Il1Aq {\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 2, Medium */\n.typography-module_caption2Medium__0Vvmy {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 120% */\n}\n\n/* Caption/Caption 2, Regular */\n.typography-module_caption2Regular__GxtiS {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 12px; /* 120% */\n}\n\n.typography-module_caption2Semibold__4ysJe {\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 12px; /* 120% */\n}\n";
+var typography = {"heading1":"typography-module_heading1__ub7Od","heading3":"typography-module_heading3__QLNPD","subtitles3":"typography-module_subtitles3__QZScB","body1Medium":"typography-module_body1Medium__INZB0","body1Regular":"typography-module_body1Regular__H3iQB","body2Medium":"typography-module_body2Medium__Caa0m","body2Regular":"typography-module_body2Regular__MEtzs","body3Regular":"typography-module_body3Regular__rp6ng","caption1Medium":"typography-module_caption1Medium__xXMm-","caption1Regular":"typography-module_caption1Regular__QVGyq","caption1Semibold":"typography-module_caption1Semibold__Il1Aq","caption2Medium":"typography-module_caption2Medium__0Vvmy","caption2Regular":"typography-module_caption2Regular__GxtiS","caption2Semibold":"typography-module_caption2Semibold__4ysJe"};
 styleInject(css_248z$6);
 
 var btnTypography = {
@@ -3014,7 +3014,7 @@ var Typography = function (_a) {
     return React.createElement(tag, __assign(__assign({}, restProps), { className: joinClasses((_b = typography[fontClass]) !== null && _b !== void 0 ? _b : "", className), style: style }), children);
 };
 
-var css_248z = ":root {\n  /* Buttons Colors */\n  --button-alternative-default-color: rgba(170, 170, 170, 0.64);\n  --button-disabled-default-color: #c5ccd3;\n  --button-primary-default: #0581da;\n  --button-primary-on-hover-color: #1a9cfa;\n  --button-secondary-default-color: #e6e9ec;\n  --button-secondary-on-hover: #c5ccd3;\n  --button-tinted-default-color: #e1f0fb;\n  --button-tinted-on-hover-color: #b2d9f5;\n\n  /* Default Colors */\n  --default-primary-accent: #0581da;\n  --default-white-color: #fff;\n  --default-black-color: #000;\n\n  /* General lightmode colors */\n  --leaf: #c1dc19;\n\n  /* Icons Colors */\n  --icon-accent-color: #0581da;\n  --icon-error-color: #f35929;\n  --icon-secondary-color: #758393;\n  --icon-success: #57bb09;\n  --icon-warning-color: #f3a229;\n\n  /* Page Color */\n  --page-color-background-gray: #f0f2f4;\n  --page-color-background-white: #fff;\n\n  /* Surface Colors */\n  --surface-surface-1: #f0f2f4;\n  --surface-surface-2: #fff;\n  --surface-surface-3-color: #e3e7eb;\n  --surface-surface-alt: rgba(240, 242, 244, 0.8);\n  --surface-surface-black-nonconvert: #000;\n  --surface-surface-black-opacity: rgba(0, 0, 0, 0.24);\n  --surface-surface-white-nonconvert: #fff;\n  --surface-surface-tinted: #e1f0fb;\n\n  /* Text Colors */\n  --text-accent: #0581da;\n  --text-disabled-accent-color: #9bcdf0;\n  --text-disabled-color: #929daa;\n  --text-primary: #000;\n  --text-secondary: #758393;\n  --text-white-nonconvert-color: #fff;\n  --text-error: #f35929;\n\n  /* Border-Stroke Colors */\n  --border-stroke-primary: #e6e9ec;\n}\n";
+var css_248z = ":root {\n  /* Buttons Colors */\n  --button-alternative-default-color: rgba(170, 170, 170, 0.64);\n  --button-disabled-default-color: #c5ccd3;\n  --button-primary-default: #0581da;\n  --button-primary-on-hover-color: #1a9cfa;\n  --button-secondary-default-color: #e6e9ec;\n  --button-secondary-on-hover: #c5ccd3;\n  --button-tinted-default-color: #e1f0fb;\n  --button-tinted-on-hover-color: #b2d9f5;\n  --button-black-default-color: #000;\n  --button-black-on-hover-color: #333;\n\n  /* Default Colors */\n  --default-primary-accent: #0581da;\n  --default-white-color: #fff;\n  --default-black-color: #000;\n\n  /* General lightmode colors */\n  --leaf: #c1dc19;\n\n  /* Icons Colors */\n  --icon-accent-color: #0581da;\n  --icon-error-color: #f35929;\n  --icon-secondary-color: #758393;\n  --icon-success: #57bb09;\n  --icon-warning-color: #f3a229;\n\n  /* Page Color */\n  --page-color-background-gray: #f0f2f4;\n  --page-color-background-white: #fff;\n\n  /* Surface Colors */\n  --surface-surface-1: #f0f2f4;\n  --surface-surface-2: #fff;\n  --surface-surface-3-color: #e3e7eb;\n  --surface-surface-alt: rgba(240, 242, 244, 0.8);\n  --surface-surface-black-nonconvert: #000;\n  --surface-surface-black-opacity: rgba(0, 0, 0, 0.24);\n  --surface-surface-white-nonconvert: #fff;\n  --surface-surface-tinted: #e1f0fb;\n\n  /* Text Colors */\n  --text-accent: #0581da;\n  --text-disabled-accent-color: #9bcdf0;\n  --text-disabled-color: #929daa;\n  --text-primary: #000;\n  --text-secondary: #758393;\n  --text-white-nonconvert-color: #fff;\n  --text-error: #f35929;\n\n  /* Border-Stroke Colors */\n  --border-stroke-primary: #e6e9ec;\n}\n";
 styleInject(css_248z);
 
 var Components = {