@itcase/ui 1.8.101 → 1.8.102

package/dist/{Overlay_cjs_B2KA85nC.js → Overlay_cjs_CFD8KUWi.js}

@@ -27,12 +27,12 @@ var overlayConfig = {
     },
 };
 function Overlay(props) {
-    var className = props.className, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, isOverlay = props.isOverlay, onClick = props.onClick;
+    var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, isOverlay = props.isOverlay, onClick = props.onClick;
     var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, overlayConfig);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, blurClass = propsGenerator.blurClass, opacityClass = propsGenerator.opacityClass;
     var overlayStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), blurClass && "blur_".concat(blurClass), isOverlay && 'overlay_state_visible', fillClass && "fill_".concat(fillClass)), dataTestId: dataTestId, dataTour: dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), blurClass && "blur_".concat(blurClass), isOverlay && 'overlay_state_visible', fillClass && "fill_".concat(fillClass)), "data-test-id": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
 }
 
 exports.Overlay = Overlay;

package/dist/{Overlay_es_BvehRqIP.js → Overlay_es_RszsWopa.js}

@@ -25,12 +25,12 @@ var overlayConfig = {
     },
 };
 function Overlay(props) {
-    var className = props.className, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, isOverlay = props.isOverlay, onClick = props.onClick;
+    var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, isOverlay = props.isOverlay, onClick = props.onClick;
     var appearanceConfig = useAppearanceConfig(appearance, overlayConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, blurClass = propsGenerator.blurClass, opacityClass = propsGenerator.opacityClass;
     var overlayStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), blurClass && "blur_".concat(blurClass), isOverlay && 'overlay_state_visible', fillClass && "fill_".concat(fillClass)), dataTestId: dataTestId, dataTour: dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
+    return (jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), blurClass && "blur_".concat(blurClass), isOverlay && 'overlay_state_visible', fillClass && "fill_".concat(fillClass)), "data-test-id": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
 }
 
 export { Overlay as O, overlayAppearance as a, overlayConfig as o };

package/dist/cjs/components/Modal.js

@@ -8,7 +8,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Icon = require('../../Icon_cjs_LSfBwmrG.js');
-var Overlay = require('../../Overlay_cjs_B2KA85nC.js');
+var Overlay = require('../../Overlay_cjs_CFD8KUWi.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var _default = require('@itcase/icons/default');
 var Loader = require('../../Loader_cjs_Db9diKuF.js');
@@ -37,21 +37,21 @@ var modalAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -134,10 +134,10 @@ var getOrCreateModalElement = function (modalQuerySelector, className) {
 };
 // Modal component that is an abstraction around the portal API.
 var Modal = React.forwardRef(function Modal(props, ref) {
-    var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, title = props.title, contentClassName = props.contentClassName, _a = props.modalQuerySelector, modalQuerySelector = _a === void 0 ? '#modal-global' : _a, scroll = props.scroll, _b = props.stickyHeader, stickyHeader = _b === void 0 ? false : _b, _c = props.isCloseOnBlur, isCloseOnBlur = _c === void 0 ? true : _c, _d = props.isOpen, initialIsOpen = _d === void 0 ? false : _d, _e = props.isOverlay, isOverlay = _e === void 0 ? true : _e, _f = props.isScrollOnOpen, isScrollOnOpen = _f === void 0 ? true : _f, _g = props.isSetFocusOnOpen, isSetFocusOnOpen = _g === void 0 ? true : _g, isSkeleton = props.isSkeleton, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal, children = props.children;
+    var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, title = props.title, contentClassName = props.contentClassName, _a = props.modalQuerySelector, modalQuerySelector = _a === void 0 ? '#modal-global' : _a, _b = props.scroll, scroll = _b === void 0 ? false : _b, _c = props.stickyHeader, stickyHeader = _c === void 0 ? false : _c, _d = props.isCloseOnBlur, isCloseOnBlur = _d === void 0 ? true : _d, _e = props.isOpen, initialIsOpen = _e === void 0 ? false : _e, _f = props.isOverlay, isOverlay = _f === void 0 ? true : _f, _g = props.isScrollOnOpen, isScrollOnOpen = _g === void 0 ? true : _g, _h = props.isSetFocusOnOpen, isSetFocusOnOpen = _h === void 0 ? true : _h, isSkeleton = props.isSkeleton, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal, children = props.children;
     // Query DOM element
-    var _h = React.useState(null), modalElement = _h[0], setModalElement = _h[1];
-    var _j = React.useState(initialIsOpen), isOpen = _j[0], setIsOpen = _j[1];
+    var _j = React.useState(null), modalElement = _j[0], setModalElement = _j[1];
+    var _k = React.useState(initialIsOpen), isOpen = _k[0], setIsOpen = _k[1];
     var modalContentRef = React.useRef(null);
     // const modalOverlayRef = useRef(null)
     var addModalProps = React.useCallback(function (element) {
@@ -173,18 +173,18 @@ var Modal = React.forwardRef(function Modal(props, ref) {
             onOpenModal();
         }
         /* SHOW TARGET POPUP ABOVE OTHERS POPUPS F TARGET ALREADY OPENED
-          // If current modal is already opened
-          // Move content to end of modal root container. For order in DOM.
-          const modalContentElement = modalContentRef.current
-          if (modalContentElement) {
-            modalContentElement.parentNode.appendChild(modalContentElement)
-          }
-          // Also move overlay to end of modal root container after container
-          const modalOverlayElement = modalOverlayRef.current
-          if (modalOverlayElement) {
-            modalOverlayElement.parentNode.appendChild(modalOverlayElement)
-          }
-        */
+        // If current modal is already opened
+        // Move content to end of modal root container. For order in DOM.
+        const modalContentElement = modalContentRef.current
+        if (modalContentElement) {
+          modalContentElement.parentNode.appendChild(modalContentElement)
+        }
+        // Also move overlay to end of modal root container after container
+        const modalOverlayElement = modalOverlayRef.current
+        if (modalOverlayElement) {
+          modalOverlayElement.parentNode.appendChild(modalOverlayElement)
+        }
+      */
     }, [onOpenModal]);
     // Hide modal and unmount children content
     var closeModal = React.useCallback(function (event) {
@@ -225,7 +225,7 @@ var Modal = React.forwardRef(function Modal(props, ref) {
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', contentClassName, fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "shape_".concat(shapeClass), sizeClass && "modal_size_".concat(sizeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), scroll && !stickyHeader && "modal-scroll_".concat(scroll), stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur && closeModal, children: [(title || closeIconImage) && (jsxRuntime.jsxs("div", { className: clsx('modal__header'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIconImage && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: "".concat(closeIconAppearance, " ").concat(closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
+        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', contentClassName, fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "shape_".concat(shapeClass), sizeClass && "modal_size_".concat(sizeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), scroll && !stickyHeader && "modal-scroll_".concat(scroll), stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIconImage) && (jsxRuntime.jsxs("div", { className: clsx('modal__header'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIconImage && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: "".concat(closeIconAppearance, " ").concat(closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element

package/dist/cjs/components/Overlay.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Overlay = require('../../Overlay_cjs_B2KA85nC.js');
+var Overlay = require('../../Overlay_cjs_CFD8KUWi.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');

package/dist/components/Modal.js

@@ -6,7 +6,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { b as Title, I as Icon } from '../Icon_es_BYO1LdXJ.js';
-import { O as Overlay } from '../Overlay_es_BvehRqIP.js';
+import { O as Overlay } from '../Overlay_es_RszsWopa.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons24, icons32, icons40 } from '@itcase/icons/default';
 import { L as Loader } from '../Loader_es_AhHU-s7_.js';
@@ -35,21 +35,21 @@ var modalAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -132,10 +132,10 @@ var getOrCreateModalElement = function (modalQuerySelector, className) {
 };
 // Modal component that is an abstraction around the portal API.
 var Modal = React.forwardRef(function Modal(props, ref) {
-    var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, title = props.title, contentClassName = props.contentClassName, _a = props.modalQuerySelector, modalQuerySelector = _a === void 0 ? '#modal-global' : _a, scroll = props.scroll, _b = props.stickyHeader, stickyHeader = _b === void 0 ? false : _b, _c = props.isCloseOnBlur, isCloseOnBlur = _c === void 0 ? true : _c, _d = props.isOpen, initialIsOpen = _d === void 0 ? false : _d, _e = props.isOverlay, isOverlay = _e === void 0 ? true : _e, _f = props.isScrollOnOpen, isScrollOnOpen = _f === void 0 ? true : _f, _g = props.isSetFocusOnOpen, isSetFocusOnOpen = _g === void 0 ? true : _g, isSkeleton = props.isSkeleton, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal, children = props.children;
+    var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, title = props.title, contentClassName = props.contentClassName, _a = props.modalQuerySelector, modalQuerySelector = _a === void 0 ? '#modal-global' : _a, _b = props.scroll, scroll = _b === void 0 ? false : _b, _c = props.stickyHeader, stickyHeader = _c === void 0 ? false : _c, _d = props.isCloseOnBlur, isCloseOnBlur = _d === void 0 ? true : _d, _e = props.isOpen, initialIsOpen = _e === void 0 ? false : _e, _f = props.isOverlay, isOverlay = _f === void 0 ? true : _f, _g = props.isScrollOnOpen, isScrollOnOpen = _g === void 0 ? true : _g, _h = props.isSetFocusOnOpen, isSetFocusOnOpen = _h === void 0 ? true : _h, isSkeleton = props.isSkeleton, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal, children = props.children;
     // Query DOM element
-    var _h = useState(null), modalElement = _h[0], setModalElement = _h[1];
-    var _j = useState(initialIsOpen), isOpen = _j[0], setIsOpen = _j[1];
+    var _j = useState(null), modalElement = _j[0], setModalElement = _j[1];
+    var _k = useState(initialIsOpen), isOpen = _k[0], setIsOpen = _k[1];
     var modalContentRef = useRef(null);
     // const modalOverlayRef = useRef(null)
     var addModalProps = useCallback(function (element) {
@@ -171,18 +171,18 @@ var Modal = React.forwardRef(function Modal(props, ref) {
             onOpenModal();
         }
         /* SHOW TARGET POPUP ABOVE OTHERS POPUPS F TARGET ALREADY OPENED
-          // If current modal is already opened
-          // Move content to end of modal root container. For order in DOM.
-          const modalContentElement = modalContentRef.current
-          if (modalContentElement) {
-            modalContentElement.parentNode.appendChild(modalContentElement)
-          }
-          // Also move overlay to end of modal root container after container
-          const modalOverlayElement = modalOverlayRef.current
-          if (modalOverlayElement) {
-            modalOverlayElement.parentNode.appendChild(modalOverlayElement)
-          }
-        */
+        // If current modal is already opened
+        // Move content to end of modal root container. For order in DOM.
+        const modalContentElement = modalContentRef.current
+        if (modalContentElement) {
+          modalContentElement.parentNode.appendChild(modalContentElement)
+        }
+        // Also move overlay to end of modal root container after container
+        const modalOverlayElement = modalOverlayRef.current
+        if (modalOverlayElement) {
+          modalOverlayElement.parentNode.appendChild(modalOverlayElement)
+        }
+      */
     }, [onOpenModal]);
     // Hide modal and unmount children content
     var closeModal = useCallback(function (event) {
@@ -223,7 +223,7 @@ var Modal = React.forwardRef(function Modal(props, ref) {
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', contentClassName, fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "shape_".concat(shapeClass), sizeClass && "modal_size_".concat(sizeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), scroll && !stickyHeader && "modal-scroll_".concat(scroll), stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur && closeModal, children: [(title || closeIconImage) && (jsxs("div", { className: clsx('modal__header'), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIconImage && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: "".concat(closeIconAppearance, " ").concat(closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
+        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', contentClassName, fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), shapeClass && "shape_".concat(shapeClass), sizeClass && "modal_size_".concat(sizeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), scroll && !stickyHeader && "modal-scroll_".concat(scroll), stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIconImage) && (jsxs("div", { className: clsx('modal__header'), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIconImage && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: "".concat(closeIconAppearance, " ").concat(closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element

package/dist/components/Overlay.js

@@ -1,4 +1,4 @@
-export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay_es_BvehRqIP.js';
+export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay_es_RszsWopa.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';

package/dist/types/components/Label/Label.appearance.d.ts

@@ -1,2 +1,261 @@
-import { LabelAppearanceType } from './Label.interface';
-export declare const labelAppearance: LabelAppearanceType;
+export declare const labelAppearance: {
+    warningMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    warningPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    surfaceMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    surfacePrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        labelTextColor: string;
+    };
+    surfaceTertiary: {
+        fill: string;
+        labelTextColor: string;
+    };
+    surfaceQuaternary: {
+        fill: string;
+        labelTextColor: string;
+    };
+    successMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    successPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    secondaryMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    secondaryPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    primaryMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    primaryPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    infoMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    infoPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    infoSecondary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    errorMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    errorPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    dangerMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    dangerPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    accentMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    accentPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    accentTertiary: {
+        fill: string;
+        labelTextColor: string;
+    };
+    gradientPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    solid: {
+        borderColor: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    full: {};
+    ghost: {
+        fill: string;
+        borderColor: string;
+    };
+    sizeXXL: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: number;
+        iconAfterSize: number;
+        iconBeforeFillSize: number;
+        iconBeforeSize: number;
+    };
+    sizeXL: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: number;
+        iconAfterSize: number;
+        iconBeforeFillSize: number;
+        iconBeforeSize: number;
+    };
+    sizeL: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: number;
+        iconAfterSize: number;
+        iconBeforeFillSize: number;
+        iconBeforeSize: number;
+    };
+    sizeM: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: number;
+        iconAfterSize: number;
+        iconBeforeFillSize: number;
+        iconBeforeSize: number;
+    };
+    sizeS: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: number;
+        iconAfterSize: number;
+        iconBeforeFillSize: number;
+        iconBeforeSize: number;
+    };
+    sizeXS: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: number;
+        iconAfterSize: number;
+        iconBeforeFillSize: number;
+        iconBeforeSize: number;
+    };
+    sizeXXS: {
+        size: string;
+        labelTextSize: string;
+        iconAfterFillSize: number;
+        iconAfterSize: number;
+        iconBeforeFillSize: number;
+        iconBeforeSize: number;
+    };
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    disabledMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+    disabledPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
+};