@jenesei-software/jenesei-kit-react 1.3.40 → 2.0.1

package/build/styles/utils/constants.d.ts

@@ -0,0 +1,1797 @@
+export declare const CSS_VARS: {
+    readonly font: {
+        readonly family: "var(--font-family)";
+        readonly weight: "var(--font-weight)";
+        readonly height: "var(--font-height)";
+        readonly size: "var(--font-size)";
+        readonly sizeHeading: {
+            readonly headline: "var(--font-size-heading-headline)";
+            readonly 'sub-headline': "var(--font-size-heading-sub-headline)";
+            readonly 'title-1': "var(--font-size-heading-title-1)";
+            readonly 'title-2': "var(--font-size-heading-title-2)";
+            readonly 'title-3': "var(--font-size-heading-title-3)";
+            readonly 'title-4': "var(--font-size-heading-title-4)";
+            readonly 'title-5': "var(--font-size-heading-title-5)";
+            readonly body: "var(--font-size-heading-body)";
+            readonly callout: "var(--font-size-heading-callout)";
+            readonly footnote: "var(--font-size-heading-footnote)";
+            readonly 'caption-1': "var(--font-size-heading-caption-1)";
+            readonly 'caption-2': "var(--font-size-heading-caption-2)";
+            readonly 'controller-large': "var(--font-size-heading-controller-large)";
+            readonly 'controller-large-medium': "var(--font-size-heading-controller-large-medium)";
+            readonly 'controller-medium': "var(--font-size-heading-controller-medium)";
+            readonly 'controller-medium-small': "var(--font-size-heading-controller-medium-small)";
+            readonly 'controller-small': "var(--font-size-heading-controller-small)";
+        };
+    };
+    readonly screen: {
+        readonly breakpoint: {
+            readonly tablet: "1290px";
+            readonly mobile: "850px";
+        };
+        readonly orientation: {
+            readonly landscape: "landscape";
+            readonly portrait: "portrait";
+        };
+    };
+    readonly animation: {
+        readonly duration: "var(--duration)";
+        readonly easing: "var(--easing)";
+    };
+    readonly palette: {
+        readonly accentRedLight: "var(--accent-red-light)";
+        readonly accentOrangeLight: "var(--accent-orange-light)";
+        readonly accentYellowLight: "var(--accent-yellow-light)";
+        readonly accentGreenLight: "var(--accent-green-light)";
+        readonly accentMintLight: "var(--accent-mint-light)";
+        readonly accentTealLight: "var(--accent-teal-light)";
+        readonly accentCyanLight: "var(--accent-cyan-light)";
+        readonly accentBlueLight: "var(--accent-blue-light)";
+        readonly accentIndigoLight: "var(--accent-indigo-light)";
+        readonly accentPurpleLight: "var(--accent-purple-light)";
+        readonly accentPinkLight: "var(--accent-pink-light)";
+        readonly accentBrownLight: "var(--accent-brown-light)";
+        readonly accentGrayLight: "var(--accent-gray-light)";
+        readonly fillLight: "var(--fill-light)";
+        readonly fillPrimaryLight: "var(--fill-primary-light)";
+        readonly fillSecondaryLight: "var(--fill-secondary-light)";
+        readonly fillTertiaryLight: "var(--fill-tertiary-light)";
+        readonly fillQuaternaryLight: "var(--fill-quaternary-light)";
+        readonly fillQuinaryLight: "var(--fill-quinary-light)";
+        readonly textPrimaryLight: "var(--text-primary-light)";
+        readonly textSecondaryLight: "var(--text-secondary-light)";
+        readonly textTertiaryLight: "var(--text-tertiary-light)";
+        readonly controlMenuLight: "var(--control-menu-light)";
+        readonly controlTooltipLight: "var(--control-tooltip-light)";
+        readonly controlTransparent: "var(--control-transparent)";
+        readonly shadowGlassLight: "var(--shadow-glass-light)";
+        readonly shadowPrimaryLight: "var(--shadow-primary-light)";
+        readonly shadowSecondaryLight: "var(--shadow-secondary-light)";
+        readonly shadowTertiaryLight: "var(--shadow-tertiary-light)";
+        readonly shadowQuaternaryLight: "var(--shadow-quaternary-light)";
+        readonly shadowWindowInnerShadowLight: "var(--shadow-window-inner-shadow-light)";
+        readonly productPrimaryLight: "var(--product-primary-light)";
+        readonly productSecondaryLight: "var(--product-secondary-light)";
+        readonly productTertiaryLight: "var(--product-tertiary-light)";
+        readonly productQuaternaryLight: "var(--product-quaternary-light)";
+        readonly productQuinaryLight: "var(--product-quinary-light)";
+        readonly current: "var(--current-color)";
+        readonly inherit: "var(--inherit)";
+        readonly transparent: "var(--transparent)";
+        readonly accentRedDark: "var(--accent-red-dark)";
+        readonly accentOrangeDark: "var(--accent-orange-dark)";
+        readonly accentYellowDark: "var(--accent-yellow-dark)";
+        readonly accentGreenDark: "var(--accent-green-dark)";
+        readonly accentMintDark: "var(--accent-mint-dark)";
+        readonly accentTealDark: "var(--accent-teal-dark)";
+        readonly accentCyanDark: "var(--accent-cyan-dark)";
+        readonly accentBlueDark: "var(--accent-blue-dark)";
+        readonly accentIndigoDark: "var(--accent-indigo-dark)";
+        readonly accentPurpleDark: "var(--accent-purple-dark)";
+        readonly accentPinkDark: "var(--accent-pink-dark)";
+        readonly accentBrownDark: "var(--accent-brown-dark)";
+        readonly accentGrayDark: "var(--accent-gray-dark)";
+        readonly fillDark: "var(--fill-dark)";
+        readonly fillPrimaryDark: "var(--fill-primary-dark)";
+        readonly fillSecondaryDark: "var(--fill-secondary-dark)";
+        readonly fillTertiaryDark: "var(--fill-tertiary-dark)";
+        readonly fillQuaternaryDark: "var(--fill-quaternary-dark)";
+        readonly fillQuinaryDark: "var(--fill-quinary-dark)";
+        readonly textPrimaryDark: "var(--text-primary-dark)";
+        readonly textSecondaryDark: "var(--text-secondary-dark)";
+        readonly textTertiaryDark: "var(--text-tertiary-dark)";
+        readonly controlMenuDark: "var(--control-menu-dark)";
+        readonly controlTooltipDark: "var(--control-tooltip-dark)";
+        readonly productPrimaryDark: "var(--product-primary-dark)";
+        readonly productSecondaryDark: "var(--product-secondary-dark)";
+        readonly productTertiaryDark: "var(--product-tertiary-dark)";
+        readonly productQuaternaryDark: "var(--product-quaternary-dark)";
+        readonly productQuinaryDark: "var(--product-quinary-dark)";
+        readonly shadowGlassDark: "var(--shadow-glass-dark)";
+        readonly shadowPrimaryDark: "var(--shadow-primary-dark)";
+        readonly shadowSecondaryDark: "var(--shadow-secondary-dark)";
+        readonly shadowTertiaryDark: "var(--shadow-tertiary-dark)";
+        readonly shadowQuaternaryDark: "var(--shadow-quaternary-dark)";
+        readonly shadowWindowInnerShadowDark: "var(--shadow-window-inner-shadow-dark)";
+        readonly accentRedLightStable: "var(--accent-red-light-stable)";
+        readonly accentOrangeLightStable: "var(--accent-orange-light-stable)";
+        readonly accentYellowLightStable: "var(--accent-yellow-light-stable)";
+        readonly accentGreenLightStable: "var(--accent-green-light-stable)";
+        readonly accentMintLightStable: "var(--accent-mint-light-stable)";
+        readonly accentTealLightStable: "var(--accent-teal-light-stable)";
+        readonly accentCyanLightStable: "var(--accent-cyan-light-stable)";
+        readonly accentBlueLightStable: "var(--accent-blue-light-stable)";
+        readonly accentIndigoLightStable: "var(--accent-indigo-light-stable)";
+        readonly accentPurpleLightStable: "var(--accent-purple-light-stable)";
+        readonly accentPinkLightStable: "var(--accent-pink-light-stable)";
+        readonly accentBrownLightStable: "var(--accent-brown-light-stable)";
+        readonly accentGrayLightStable: "var(--accent-gray-light-stable)";
+        readonly fillLightStable: "var(--fill-light-stable)";
+        readonly fillPrimaryLightStable: "var(--fill-primary-light-stable)";
+        readonly fillSecondaryLightStable: "var(--fill-secondary-light-stable)";
+        readonly fillTertiaryLightStable: "var(--fill-tertiary-light-stable)";
+        readonly fillQuaternaryLightStable: "var(--fill-quaternary-light-stable)";
+        readonly fillQuinaryLightStable: "var(--fill-quinary-light-stable)";
+        readonly textPrimaryLightStable: "var(--text-primary-light-stable)";
+        readonly textSecondaryLightStable: "var(--text-secondary-light-stable)";
+        readonly textTertiaryLightStable: "var(--text-tertiary-light-stable)";
+        readonly controlMenuLightStable: "var(--control-menu-light-stable)";
+        readonly controlTooltipLightStable: "var(--control-tooltip-light-stable)";
+        readonly controlTransparentStable: "var(--control-transparent-stable)";
+        readonly shadowGlassLightStable: "var(--shadow-glass-light-stable)";
+        readonly shadowPrimaryLightStable: "var(--shadow-primary-light-stable)";
+        readonly shadowSecondaryLightStable: "var(--shadow-secondary-light-stable)";
+        readonly shadowTertiaryLightStable: "var(--shadow-tertiary-light-stable)";
+        readonly shadowQuaternaryLightStable: "var(--shadow-quaternary-light-stable)";
+        readonly shadowWindowInnerShadowLightStable: "var(--shadow-window-inner-shadow-light-stable)";
+        readonly productPrimaryLightStable: "var(--product-primary-light-stable)";
+        readonly productSecondaryLightStable: "var(--product-secondary-light-stable)";
+        readonly productTertiaryLightStable: "var(--product-tertiary-light-stable)";
+        readonly productQuaternaryLightStable: "var(--product-quaternary-light-stable)";
+        readonly productQuinaryLightStable: "var(--product-quinary-light-stable)";
+        readonly accentRedDarkStable: "var(--accent-red-dark-stable)";
+        readonly accentOrangeDarkStable: "var(--accent-orange-dark-stable)";
+        readonly accentYellowDarkStable: "var(--accent-yellow-dark-stable)";
+        readonly accentGreenDarkStable: "var(--accent-green-dark-stable)";
+        readonly accentMintDarkStable: "var(--accent-mint-dark-stable)";
+        readonly accentTealDarkStable: "var(--accent-teal-dark-stable)";
+        readonly accentCyanDarkStable: "var(--accent-cyan-dark-stable)";
+        readonly accentBlueDarkStable: "var(--accent-blue-dark-stable)";
+        readonly accentIndigoDarkStable: "var(--accent-indigo-dark-stable)";
+        readonly accentPurpleDarkStable: "var(--accent-purple-dark-stable)";
+        readonly accentPinkDarkStable: "var(--accent-pink-dark-stable)";
+        readonly accentBrownDarkStable: "var(--accent-brown-dark-stable)";
+        readonly accentGrayDarkStable: "var(--accent-gray-dark-stable)";
+        readonly fillDarkStable: "var(--fill-dark-stable)";
+        readonly fillPrimaryDarkStable: "var(--fill-primary-dark-stable)";
+        readonly fillSecondaryDarkStable: "var(--fill-secondary-dark-stable)";
+        readonly fillTertiaryDarkStable: "var(--fill-tertiary-dark-stable)";
+        readonly fillQuaternaryDarkStable: "var(--fill-quaternary-dark-stable)";
+        readonly fillQuinaryDarkStable: "var(--fill-quinary-dark-stable)";
+        readonly textPrimaryDarkStable: "var(--text-primary-dark-stable)";
+        readonly textSecondaryDarkStable: "var(--text-secondary-dark-stable)";
+        readonly textTertiaryDarkStable: "var(--text-tertiary-dark-stable)";
+        readonly controlMenuDarkStable: "var(--control-menu-dark-stable)";
+        readonly controlTooltipDarkStable: "var(--control-tooltip-dark-stable)";
+        readonly productPrimaryDarkStable: "var(--product-primary-dark-stable)";
+        readonly productSecondaryDarkStable: "var(--product-secondary-dark-stable)";
+        readonly productTertiaryDarkStable: "var(--product-tertiary-dark-stable)";
+        readonly productQuaternaryDarkStable: "var(--product-quaternary-dark-stable)";
+        readonly productQuinaryDarkStable: "var(--product-quinary-dark-stable)";
+        readonly shadowGlassDarkStable: "var(--shadow-glass-dark-stable)";
+        readonly shadowPrimaryDarkStable: "var(--shadow-primary-dark-stable)";
+        readonly shadowSecondaryDarkStable: "var(--shadow-secondary-dark-stable)";
+        readonly shadowTertiaryDarkStable: "var(--shadow-tertiary-dark-stable)";
+        readonly shadowQuaternaryDarkStable: "var(--shadow-quaternary-dark-stable)";
+        readonly shadowWindowInnerShadowDarkStable: "var(--shadow-window-inner-shadow-dark-stable)";
+    };
+    readonly size: {
+        readonly large: {
+            readonly height: "var(--size-large-height)";
+            readonly heightIcon: "var(--size-large-height-icon)";
+            readonly radius: "var(--size-large-radius)";
+            readonly padding: "var(--size-large-padding)";
+            readonly font: "var(--size-large-font)";
+        };
+        readonly largeMedium: {
+            readonly height: "var(--size-large-medium-height)";
+            readonly heightIcon: "var(--size-large-medium-height-icon)";
+            readonly radius: "var(--size-large-medium-radius)";
+            readonly padding: "var(--size-large-medium-padding)";
+            readonly font: "var(--size-large-medium-font)";
+        };
+        readonly medium: {
+            readonly height: "var(--size-medium-height)";
+            readonly heightIcon: "var(--size-medium-height-icon)";
+            readonly radius: "var(--size-medium-radius)";
+            readonly padding: "var(--size-medium-padding)";
+            readonly font: "var(--size-medium-font)";
+        };
+        readonly mediumSmall: {
+            readonly height: "var(--size-medium-small-height)";
+            readonly heightIcon: "var(--size-medium-small-height-icon)";
+            readonly radius: "var(--size-medium-small-radius)";
+            readonly padding: "var(--size-medium-small-padding)";
+            readonly font: "var(--size-medium-small-font)";
+        };
+        readonly small: {
+            readonly height: "var(--size-small-height)";
+            readonly heightIcon: "var(--size-small-height-icon)";
+            readonly radius: "var(--size-small-radius)";
+            readonly padding: "var(--size-small-padding)";
+            readonly font: "var(--size-small-font)";
+        };
+    };
+    readonly sizeValue: {
+        readonly large: {
+            readonly height: 46;
+            readonly heightIcon: 24;
+            readonly radius: 6;
+            readonly padding: 16;
+            readonly font: 20;
+        };
+        readonly largeMedium: {
+            readonly height: 42;
+            readonly heightIcon: 22;
+            readonly radius: 6;
+            readonly padding: 14;
+            readonly font: 18;
+        };
+        readonly medium: {
+            readonly height: 38;
+            readonly heightIcon: 20;
+            readonly radius: 6;
+            readonly padding: 12;
+            readonly font: 14;
+        };
+        readonly mediumSmall: {
+            readonly height: 34;
+            readonly heightIcon: 18;
+            readonly radius: 6;
+            readonly padding: 10;
+            readonly font: 14;
+        };
+        readonly small: {
+            readonly height: 30;
+            readonly heightIcon: 16;
+            readonly radius: 8;
+            readonly padding: 8;
+            readonly font: 12;
+        };
+    };
+    readonly sizeToggle: {
+        readonly large: {
+            readonly height: "var(--size-toggle-large-height)";
+            readonly width: "var(--size-toggle-large-width)";
+            readonly padding: "var(--size-toggle-large-padding)";
+            readonly thumb: "var(--size-toggle-large-thumb)";
+        };
+        readonly largeMedium: {
+            readonly height: "var(--size-toggle-large-medium-height)";
+            readonly width: "var(--size-toggle-large-medium-width)";
+            readonly padding: "var(--size-toggle-large-medium-padding)";
+            readonly thumb: "var(--size-toggle-large-medium-thumb)";
+        };
+        readonly medium: {
+            readonly height: "var(--size-toggle-medium-height)";
+            readonly width: "var(--size-toggle-medium-width)";
+            readonly padding: "var(--size-toggle-medium-padding)";
+            readonly thumb: "var(--size-toggle-medium-thumb)";
+        };
+        readonly mediumSmall: {
+            readonly height: "var(--size-toggle-medium-small-height)";
+            readonly width: "var(--size-toggle-medium-small-width)";
+            readonly padding: "var(--size-toggle-medium-small-padding)";
+            readonly thumb: "var(--size-toggle-medium-small-thumb)";
+        };
+        readonly small: {
+            readonly height: "var(--size-toggle-small-height)";
+            readonly width: "var(--size-toggle-small-width)";
+            readonly padding: "var(--size-toggle-small-padding)";
+            readonly thumb: "var(--size-toggle-small-thumb)";
+        };
+    };
+    readonly component: {
+        readonly select: {
+            readonly padding: "var(--component-select-padding)";
+            readonly height: "var(--component-select-height)";
+            readonly borderRadius: "var(--component-select-border-radius)";
+            readonly background: "var(--component-select-background)";
+            readonly borderColor: "var(--component-select-border-color)";
+            readonly borderColorSelect: "var(--component-select-border-color-select)";
+            readonly color: "var(--component-select-color)";
+            readonly backgroundChecked: "var(--component-select-background-checked)";
+            readonly borderColorChecked: "var(--component-select-border-color-checked)";
+            readonly backgroundInput: "var(--component-select-background-input)";
+            readonly borderColorInput: "var(--component-select-border-color-input)";
+            readonly colorInput: "var(--component-select-color-input)";
+            readonly backgroundOption: "var(--component-select-background-option)";
+        };
+        readonly tooltip: {
+            readonly padding: "var(--component-tooltip-padding)";
+            readonly height: "var(--component-tooltip-height)";
+        };
+        readonly popover: {
+            readonly padding: "var(--component-popover-padding)";
+            readonly borderRadius: "var(--component-popover-border-radius)";
+            readonly maxWidth: "var(--component-popover-max-width)";
+            readonly maxHeight: "var(--component-popover-max-height)";
+            readonly background: "var(--component-popover-background)";
+            readonly borderColor: "var(--component-popover-border-color)";
+            readonly color: "var(--component-popover-color)";
+            readonly boxShadow: "var(--component-popover-box-shadow)";
+        };
+        readonly error: {
+            readonly padding: "var(--component-error-padding)";
+            readonly color: "var(--component-error-color)";
+        };
+        readonly checkbox: {
+            readonly height: "var(--component-checkbox-height)";
+            readonly padding: "var(--component-checkbox-padding)";
+            readonly radius: "var(--component-checkbox-radius)";
+            readonly gap: "var(--component-checkbox-gap)";
+            readonly background: "var(--component-checkbox-background)";
+            readonly border: "var(--component-checkbox-border)";
+            readonly color: "var(--component-checkbox-color)";
+        };
+        readonly toggle: {
+            readonly height: "var(--component-toggle-height)";
+            readonly width: "var(--component-toggle-width)";
+            readonly padding: "var(--component-toggle-padding)";
+            readonly backgroundActive: "var(--component-toggle-active-background)";
+            readonly borderActive: "var(--component-toggle-active-border)";
+            readonly backgroundUnActive: "var(--component-toggle-un-active-background)";
+            readonly borderUnActive: "var(--component-toggle-un-active-border)";
+            readonly centerHeight: "var(--component-toggle-center-height)";
+            readonly centerWidth: "var(--component-toggle-center-width)";
+            readonly centerBackgroundActive: "var(--component-toggle-center-active-background)";
+            readonly centerBorderActive: "var(--component-toggle-center-active-border)";
+            readonly centerBackgroundUnActive: "var(--component-toggle-center-un-active-background)";
+            readonly centerBorderUnActive: "var(--component-toggle-center-un-active-border)";
+            readonly centerBoxShadowActive: "var(--component-toggle-center-active-box-shadow)";
+            readonly centerBoxShadowUnActive: "var(--component-toggle-center-un-active-box-shadow)";
+            readonly centerX: "var(--component-toggle-center-x)";
+        };
+        readonly button: {
+            readonly height: "var(--component-button-height)";
+            readonly padding: "var(--component-button-padding)";
+            readonly radius: "var(--component-button-radius)";
+            readonly gap: "var(--component-button-gap)";
+            readonly background: "var(--component-button-background)";
+            readonly border: "var(--component-button-border)";
+            readonly color: "var(--component-button-color)";
+            readonly iconGroupOrder: "var(--component-button-icon-group-order)";
+        };
+        readonly icon: {
+            readonly order: "var(--component-icon-order)";
+            readonly color: "var(--component-icon-color)";
+            readonly heightIcon: "var(--component-icon-height-icon)";
+            readonly turn: "var(--component-icon-turn)";
+            readonly skeletonHeightIcon: "var(--component-icon-skeleton-height-icon)";
+            readonly skeletonOrder: "var(--component-icon-skeleton-order)";
+        };
+        readonly typography: {
+            readonly letterSpacing: "var(--component-typography-letter-spacing)";
+            readonly flex: "var(--component-typography-flex)";
+            readonly cursor: "var(--component-typography-cursor)";
+            readonly overflow: "var(--component-typography-overflow)";
+            readonly line: {
+                readonly single: "var(--component-typography-line-single)";
+                readonly multiline: "var(--component-typography-line-multiline)";
+            };
+            readonly family: "var(--component-typography-family)";
+            readonly weight: "var(--component-typography-weight)";
+            readonly height: "var(--component-typography-height)";
+            readonly color: "var(--component-typography-color)";
+            readonly align: "var(--component-typography-align)";
+            readonly wrap: "var(--component-typography-wrap)";
+            readonly decoration: "var(--component-typography-decoration)";
+            readonly transform: "var(--component-typography-transform)";
+            readonly size: "var(--component-typography-size)";
+            readonly variant: "var(--component-typography-variant)";
+            readonly variantHeight: "var(--component-typography-variant-height)";
+        };
+        readonly separator: {
+            readonly width: "var(--component-separator-width)";
+            readonly height: "var(--component-separator-height)";
+            readonly maxWidth: "var(--component-separator-max-width)";
+            readonly maxHeight: "var(--component-separator-max-height)";
+            readonly background: "var(--component-separator-background)";
+            readonly radius: "var(--component-separator-radius)";
+        };
+        readonly input: {
+            readonly boxShadow: "var(--component-input-box-shadow)";
+            readonly background: "var(--component-input-background)";
+            readonly borderColor: "var(--component-input-border-color)";
+            readonly color: "var(--component-input-color)";
+            readonly placeholderColor: "var(--component-input-placeholder-color)";
+            readonly height: "var(--component-input-height)";
+            readonly padding: "var(--component-input-padding)";
+            readonly radius: "var(--component-input-radius)";
+            readonly prefixWidth: "var(--component-input-prefix-width)";
+            readonly prefixRight: "var(--component-input-prefix-right)";
+            readonly prefixLeft: "var(--component-input-prefix-left)";
+            readonly postfixWidth: "var(--component-input-postfix-width)";
+            readonly postfixRight: "var(--component-input-postfix-right)";
+            readonly postfixLeft: "var(--component-input-postfix-left)";
+        };
+        readonly textarea: {
+            readonly boxShadow: "var(--component-textarea-box-shadow)";
+            readonly background: "var(--component-textarea-background)";
+            readonly borderColor: "var(--component-textarea-border-color)";
+            readonly color: "var(--component-textarea-color)";
+            readonly placeholderColor: "var(--component-textarea-placeholder-color)";
+            readonly padding: "var(--component-textarea-padding)";
+            readonly radius: "var(--component-textarea-radius)";
+        };
+        readonly datePicker: {
+            readonly rows: "var(--component-date-picker-rows)";
+            readonly row: "var(--component-date-picker-row)";
+            readonly column: "var(--component-date-picker-column)";
+            readonly padding: "var(--component-date-picker-padding)";
+            readonly dayRadius: "var(--component-date-picker-day-radius)";
+            readonly dayBackgroundRest: "var(--component-date-picker-day-background-rest)";
+            readonly dayBackgroundHover: "var(--component-date-picker-day-background-hover)";
+            readonly dayBackgroundWeekend: "var(--component-date-picker-day-background-weekend)";
+            readonly dayBackgroundToday: "var(--component-date-picker-day-background-today)";
+            readonly dayBackgroundChoice: "var(--component-date-picker-day-background-choice)";
+            readonly dayBorderRest: "var(--component-date-picker-day-border-rest)";
+            readonly dayBorderWeekend: "var(--component-date-picker-day-border-weekend)";
+            readonly dayBorderToday: "var(--component-date-picker-day-border-today)";
+            readonly dayBorderChoice: "var(--component-date-picker-day-border-choice)";
+            readonly dayBorderHover: "var(--component-date-picker-day-border-hover)";
+            readonly dayColorRest: "var(--component-date-picker-day-color-rest)";
+            readonly dayColorHover: "var(--component-date-picker-day-color-hover)";
+            readonly dayColorWeekend: "var(--component-date-picker-day-color-weekend)";
+            readonly dayColorToday: "var(--component-date-picker-day-color-today)";
+            readonly dayColorChoice: "var(--component-date-picker-day-color-choice)";
+            readonly inputBackground: "var(--component-date-picker-input-background)";
+            readonly inputBackgroundHover: "var(--component-date-picker-input-background-hover)";
+            readonly inputSegmentBackgroundActive: "var(--component-date-picker-input-segment-background-active)";
+            readonly inputBorderColor: "var(--component-date-picker-input-border-color)";
+            readonly inputBorderColorHover: "var(--component-date-picker-input-border-color-hover)";
+            readonly inputColor: "var(--component-date-picker-input-color)";
+            readonly inputColorHover: "var(--component-date-picker-input-color-hover)";
+            readonly inputPadding: "var(--component-date-picker-input-padding)";
+            readonly inputHeight: "var(--component-date-picker-input-height)";
+            readonly inputRadius: "var(--component-date-picker-input-radius)";
+            readonly inputValueColor: "var(--component-date-picker-input-value-color)";
+            readonly inputPlaceholderColor: "var(--component-date-picker-input-placeholder-color)";
+            readonly buttonToggleRight: "var(--component-date-picker-button-toggle-right)";
+            readonly buttonClearRight: "var(--component-date-picker-button-clear-right)";
+        };
+    };
+    readonly area: {
+        readonly skeleton: {
+            readonly color: "var(--area-skeleton-color)";
+            readonly line: "var(--area-skeleton-line)";
+        };
+    };
+    readonly genre: {
+        readonly popover: {
+            readonly primary: {
+                readonly background: "var(--fill-dark)";
+                readonly color: "var(--text-primary-light)";
+                readonly border: "var(--transparent)";
+                readonly boxShadow: "var(--shadow-primary-dark)";
+            };
+            readonly secondary: {
+                readonly background: "var(--fill-light)";
+                readonly color: "var(--text-primary-dark)";
+                readonly border: "var(--transparent)";
+                readonly boxShadow: "var(--shadow-primary-light)";
+            };
+        };
+        readonly checkbox: {
+            readonly green: {
+                readonly background: {
+                    readonly index: "var(--accent-green-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly red: {
+                readonly background: {
+                    readonly index: "var(--accent-red-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly yellow: {
+                readonly background: {
+                    readonly index: "var(--accent-yellow-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly blue: {
+                readonly background: {
+                    readonly index: "var(--accent-blue-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly primary: {
+                readonly background: {
+                    readonly index: "var(--fill-primary-dark)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-light)";
+                };
+            };
+            readonly secondary: {
+                readonly background: {
+                    readonly index: "var(--fill-primary-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+            };
+            readonly product: {
+                readonly background: {
+                    readonly index: "var(--product-primary-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+        };
+        readonly button: {
+            readonly green: {
+                readonly background: {
+                    readonly index: "var(--accent-green-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly red: {
+                readonly background: {
+                    readonly index: "var(--accent-red-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly yellow: {
+                readonly background: {
+                    readonly index: "var(--accent-yellow-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly blue: {
+                readonly background: {
+                    readonly index: "var(--accent-blue-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly primary: {
+                readonly background: {
+                    readonly index: "var(--fill-primary-dark)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-light)";
+                };
+            };
+            readonly secondary: {
+                readonly background: {
+                    readonly index: "var(--fill-primary-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+            };
+            readonly product: {
+                readonly background: {
+                    readonly index: "var(--product-primary-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+        };
+        readonly toggle: {
+            readonly primary: {
+                readonly active: {
+                    readonly border: "var(--transparent)";
+                    readonly track: "var(--product-primary-light)";
+                    readonly thumb: "var(--fill-primary-dark)";
+                    readonly thumbBoxShadow: "var(--shadow-primary-light)";
+                };
+                readonly unActive: {
+                    readonly border: "var(--transparent)";
+                    readonly track: "var(--fill-primary-light)";
+                    readonly thumb: "var(--fill-primary-dark)";
+                    readonly thumbBoxShadow: "var(--shadow-primary-light)";
+                };
+            };
+        };
+        readonly input: {
+            readonly primary: {
+                readonly color: "var(--text-primary-light)";
+                readonly background: "var(--fill-primary-dark)";
+                readonly backgroundOption: "var(--fill-dark)";
+                readonly border: "var(--text-primary-light)";
+                readonly placeholder: "var(--text-secondary-light)";
+            };
+            readonly secondary: {
+                readonly color: "var(--text-primary-dark)";
+                readonly background: "var(--fill-primary-light)";
+                readonly backgroundOption: "var(--fill-light)";
+                readonly border: "var(--text-primary-dark)";
+                readonly placeholder: "var(--text-secondary-dark)";
+            };
+        };
+        readonly select: {
+            readonly primary: {
+                readonly color: {
+                    readonly index: "var(--text-primary-light)";
+                };
+                readonly background: {
+                    readonly index: "var(--fill-primary-dark)";
+                    readonly select: "var(--product-quaternary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-light)";
+                    readonly select: "var(--product-primary-light)";
+                };
+                readonly placeholder: {
+                    readonly index: "var(--text-secondary-light)";
+                };
+            };
+            readonly secondary: {
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly background: {
+                    readonly index: "var(--fill-primary-light)";
+                    readonly select: "var(--product-quaternary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-dark)";
+                    readonly select: "var(--product-primary-light)";
+                };
+                readonly placeholder: {
+                    readonly index: "var(--text-secondary-dark)";
+                };
+            };
+        };
+        readonly textarea: {
+            readonly primary: {
+                readonly color: "var(--text-primary-light)";
+                readonly background: "var(--fill-primary-dark)";
+                readonly border: "var(--text-primary-light)";
+                readonly placeholder: "var(--text-secondary-light)";
+            };
+            readonly secondary: {
+                readonly color: "var(--text-primary-dark)";
+                readonly background: "var(--fill-primary-light)";
+                readonly border: "var(--text-primary-dark)";
+                readonly placeholder: "var(--text-secondary-dark)";
+            };
+        };
+        readonly datepicker: {
+            readonly primary: {
+                readonly color: {
+                    readonly index: "var(--text-primary-light)";
+                    readonly hover: "var(--text-primary-light)";
+                    readonly weekend: "var(--text-primary-light)";
+                    readonly today: "var(--text-primary-light)";
+                    readonly choice: "var(--text-primary-dark)";
+                };
+                readonly background: {
+                    readonly index: "var(--transparent)";
+                    readonly hover: "var(--fill-quaternary-light)";
+                    readonly weekend: "var(--fill-quaternary-light)";
+                    readonly today: "var(--transparent)";
+                    readonly choice: "var(--product-primary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                    readonly hover: "var(--transparent)";
+                    readonly weekend: "var(--transparent)";
+                    readonly today: "var(--text-primary-light)";
+                    readonly choice: "var(--product-primary-light)";
+                };
+            };
+            readonly secondary: {
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                    readonly hover: "var(--text-primary-dark)";
+                    readonly weekend: "var(--text-primary-dark)";
+                    readonly today: "var(--text-primary-dark)";
+                    readonly choice: "var(--text-primary-light)";
+                };
+                readonly background: {
+                    readonly index: "var(--transparent)";
+                    readonly hover: "var(--fill-quaternary-dark)";
+                    readonly weekend: "var(--fill-quaternary-dark)";
+                    readonly today: "var(--transparent)";
+                    readonly choice: "var(--product-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                    readonly hover: "var(--transparent)";
+                    readonly weekend: "var(--transparent)";
+                    readonly today: "var(--text-primary-dark)";
+                    readonly choice: "var(--product-primary-dark)";
+                };
+            };
+        };
+    };
+};
+export declare const CSS_CLASS: {
+    /**
+     * Убирает скроллбар (Firefox + Webkit + IE)
+     * Контент остаётся скроллируемым.
+     */
+    readonly removeScrollbar: "u-remove-scrollbar";
+    /**
+     * Полностью убирает outline.
+     * Использовать аккуратно — может повлиять на accessibility.
+     */
+    readonly removeOutline: "u-remove-outline";
+    /**
+     * Включает табличные цифры (одинаковая ширина.
+     * Полезно для счётчиков, цен, таймеров.
+     */
+    readonly tabularNumbers: "u-tabular-numbers";
+    /**
+     * Добавляет контейнер для ripple-эффекта.
+     * Требует position: relative + overflow: hidden.
+     */
+    readonly isRipple: "u-is-ripple";
+    readonly transition: {
+        readonly default: "u-transition--default";
+        readonly fontSize: "u-transition--font-size";
+        readonly icon: "u-transition--icon";
+        readonly color: "u-transition--color";
+        readonly grid: "u-transition--grid";
+        readonly withoutSize: "u-transition--without-size";
+        readonly all: "u-transition--all";
+    };
+    readonly control: {
+        readonly default: "u-control--default";
+        readonly boxShadow: "u-control--boxShadow";
+        readonly boxShadowSelect: "u-control--boxShadow-select";
+        readonly boxShadowOnlyHover: "u-control--boxShadow-only-hover";
+        readonly onlyActive: "u-control--only-active";
+        readonly none: "u-control--none";
+    };
+    readonly scrollbarGutter: {
+        readonly stable: "u-scrollbar-gutter--stable";
+        readonly stableBoth: "u-scrollbar-gutter--stable-both";
+    };
+    /**
+     * Состояние disabled.
+     * Делает элемент полупрозрачным.
+     */
+    readonly isDisabled: "u-is-disabled";
+    /**
+     * Состояние hover.
+     * Добавляет transition background + outline.
+     */
+    readonly isHover: "u-is-hover";
+    readonly isError: "u-is-error";
+    readonly shadow: {
+        readonly primary: "u-shadow--primary";
+        readonly secondary: "u-shadow--secondary";
+        readonly quaternary: "u-shadow--quaternary";
+    };
+    readonly keyframe: {
+        readonly shadowPulse: "keyframe--shadow-pulse";
+        readonly backgroundMove: "keyframe--background-move";
+    };
+    readonly area: {
+        readonly preview: {
+            readonly root: "area-preview__loader";
+            readonly containerIcon: "area-preview__loader__container-icon";
+            readonly containerChildren: "area-preview__loader__container-children";
+            readonly children: "area-preview__children";
+        };
+        readonly scroll: {
+            readonly root: "area-scroll";
+            readonly horizontal: "area-scroll--horizontal";
+            readonly vertical: "area-scroll--vertical";
+            readonly isAlwaysHorizontal: "area-scroll--is-always-horizontal";
+            readonly isAlwaysVertical: "area-scroll--is-always-vertical";
+        };
+        readonly skeleton: {
+            readonly root: "area-skeleton";
+            readonly visibleFalse: "area-skeleton--visible-false";
+        };
+    };
+    readonly context: {
+        readonly app: {
+            readonly wrapper: "context-app__wrapper";
+            readonly outlet: "context-app__outlet";
+            readonly outletChildren: "context-app__outlet-children";
+            readonly outletNotification: "context-app__outlet-notification";
+            readonly outletHeader: "context-app__outlet-header";
+            readonly outletFooter: "context-app__outlet-footer";
+            readonly outletNav: "context-app__outlet-nav";
+            readonly outletLeftAside: "context-app__outlet-left-aside";
+            readonly outletRightAside: "context-app__outlet-right-aside";
+        };
+        readonly dialog: {
+            readonly layout: "context-dialog__layout";
+            readonly element: "context-dialog__element";
+        };
+        readonly sonner: {
+            readonly layout: "context-sonner__layout";
+            readonly layoutBottomCenter: "context-sonner__layout--bottom-center";
+            readonly layoutBottomLeft: "context-sonner__layout--bottom-left";
+            readonly layoutBottomRight: "context-sonner__layout--bottom-right";
+            readonly layoutTopRight: "context-sonner__layout--top-right";
+            readonly layoutTopLeft: "context-sonner__layout--top-left";
+            readonly layoutTopCenter: "context-sonner__layout--top-center";
+            readonly elementWrapper: "context-sonner__element-wrapper";
+            readonly content: "context-sonner__content";
+            readonly icon: "context-sonner__icon";
+            readonly contentTitle: "context-sonner__content-title";
+            readonly contentDescription: "context-sonner__content-description";
+            readonly buttonWrapper: "context-sonner__button-wrapper";
+        };
+    };
+    readonly component: {
+        readonly select: {
+            readonly wrapper: "component-select__wrapper";
+            readonly isCenter: "component-select--is-center";
+            readonly isShowScroll: "component-select--is-show-scroll";
+            readonly isWrapSelectOption: "component-select--is-wrap-select-option";
+            readonly isClearWhenClickSelectListOption: "component-select--is-clear-when-click-select-list-option";
+            readonly isOnlyColorInSelectListOption: "component-select--is-only-color-in-select-list-option";
+            readonly dropdownList: "component-select__dropdown__list";
+            readonly dropdownListWrapper: "component-select__dropdown__list__wrapper";
+            readonly dropdownListOption: "component-select__dropdown__list__option";
+            readonly dropdownListOptionIsChecked: "component-select__dropdown__list__option--is-checked";
+            readonly dropdownListOptionIsBorder: "component-select__dropdown__list__option--is-border";
+            readonly dropdownListOptionIsDisabled: "component-select__dropdown__list__option--is-disabled";
+            readonly dropdownListOptionIcon: "component-select__dropdown__list__option__icon";
+            readonly list: "component-select__list";
+            readonly listButton: "component-select__list__button";
+            readonly listOption: "component-select__list__option";
+            readonly listOptionIsChecked: "component-select__list__option--is-checked";
+            readonly textarea: "component-select__textarea";
+        };
+        readonly tooltip: {
+            readonly root: "component-tooltip";
+            readonly wrapper: "component-tooltip__wrapper";
+        };
+        readonly popover: {
+            readonly root: "component-popover";
+            readonly boxShadow: "component-popover--box-shadow";
+        };
+        readonly textarea: {
+            readonly root: "component-textarea";
+            readonly wrapper: "component-textarea__wrapper";
+            readonly wrapperIsZeroRadius: "component-textarea__wrapper--is-zero-radius";
+            readonly wrapperIsHidden: "component-textarea__wrapper--is-hidden";
+            readonly wrapperIsHiddenBorder: "component-textarea__wrapper--is-hidden-border";
+            readonly wrapperIsFullRadius: "component-textarea__wrapper--is-full-radius";
+            readonly wrapperIsNotResize: "component-textarea__wrapper--is-not-resize";
+        };
+        readonly input: {
+            readonly wrapper: "component-input__wrapper";
+            readonly wrapperIsWidthAsHeight: "component-input__wrapper--is-width-as-height";
+            readonly wrapperIsZeroRadius: "component-input__wrapper--is-zero-radius";
+            readonly wrapperIsHidden: "component-input__wrapper--is-hidden";
+            readonly wrapperIsHiddenBorder: "component-input__wrapper--is-hidden-border";
+            readonly wrapperIsFullRadius: "component-input__wrapper--is-full-radius";
+            readonly wrapperIsMinWidthAsContent: "component-input__wrapper--is-min-width-as-content";
+            readonly wrapperIsCenter: "component-input__wrapper--is-center";
+            readonly root: "component-input";
+            readonly hasPrefix: "component-input--has-prefix";
+            readonly hasPostfix: "component-input--has-postfix";
+            readonly prefix: "component-input__prefix";
+            readonly postfix: "component-input__postfix";
+        };
+        readonly separator: {
+            readonly root: "component-separator";
+        };
+        readonly error: {
+            readonly root: "component-error";
+            readonly sizeDefault: "component-error--size-default";
+            readonly sizeAbsolute: "component-error--size-absolute";
+        };
+        readonly typography: {
+            readonly root: "component-typography";
+            readonly lineSingle: "component-typography--line-single";
+            readonly lineMulti: "component-typography--line-multi";
+            readonly isBold: "component-typography--is-bold";
+            readonly variantCallout: "component-typography--variant-callout";
+            readonly shadowShadowPulse: "component-typography--shadow-shadowPulse";
+            readonly isHoverUnderlining: "component-typography--is-hover-underlining";
+            readonly isNoUserSelect: "component-typography--is-no-user-select";
+            readonly size: "component-typography--size";
+            readonly variant: "component-typography--variant";
+        };
+        readonly button: {
+            readonly root: "component-button";
+            readonly isHidden: "component-button--is-hidden";
+            readonly isHiddenBorder: "component-button--is-hidden-border";
+            readonly isFullRadius: "component-button--is-full-radius";
+            readonly isFullSize: "component-button--is-full-size";
+            readonly isWidthAsHeight: "component-button--is-width-as-height";
+            readonly isMinWidthAsContent: "component-button--is-min-width-as-content";
+            readonly isZeroPadding: "component-button--is-zero-padding";
+            readonly isSizeFitContent: "component-button--is-size-fit-content";
+            readonly iconGroup: "component-button__icons";
+            readonly iconGroupIsIconGroup: "component-button__icons--is-icon-group";
+            readonly isZeroRadius: "component-button--is-zero-radius";
+        };
+        readonly icon: {
+            readonly root: "component-icon";
+            readonly skeleton: "component-icon__skeleton";
+        };
+        readonly stack: {
+            readonly root: "component-stack";
+        };
+        readonly checkbox: {
+            readonly root: "component-checkbox";
+            readonly isHidden: "component-checkbox--is-hidden";
+            readonly isHiddenBorder: "component-checkbox--is-hidden-border";
+            readonly isFullRadius: "component-checkbox--is-full-radius";
+            readonly isFullSize: "component-checkbox--is-full-size";
+            readonly isWidthAsHeight: "component-checkbox--is-width-as-height";
+            readonly isMinWidthAsContent: "component-checkbox--is-min-width-as-content";
+            readonly isZeroRadius: "component-checkbox--is-zero-radius";
+            readonly isOnlyIcon: "component-checkbox--is-only-icon";
+        };
+        readonly toggle: {
+            readonly root: "component-toggle";
+            readonly active: "component-toggle--active";
+            readonly unActive: "component-toggle--un-active";
+            readonly isHidden: "component-toggle--is-hidden";
+            readonly isHiddenBorder: "component-toggle--is-hidden-border";
+            readonly isZeroRadius: "component-toggle--is-zero-radius";
+            readonly center: "component-toggle__center";
+            readonly centerActive: "component-toggle__center--active";
+            readonly centerUnActive: "component-toggle__center--un-active";
+        };
+        readonly datePicker: {
+            readonly wrapper: "component-date-picker__wrapper";
+            readonly wrapperIsMinWidth: "component-date-picker__wrapper--is-min-width";
+            readonly dropdownList: "component-date-picker__dropdown__list";
+            readonly dropdownListDays: "component-date-picker__dropdown-list__days";
+            readonly day: "component-date-picker__dropdown-list__day";
+            readonly dayIsChoice: "component-date-picker__dropdown-list__day--is-choice";
+            readonly dayIsNotCurrentMonth: "component-date-picker__dropdown-list__day--is-not-current-month";
+            readonly dayIsToday: "component-date-picker__dropdown-list__day--is-today";
+            readonly dayIsWeekend: "component-date-picker__dropdown-list__day--is-weekend";
+            readonly dayIsHidden: "component-date-picker__dropdown-list__day--is-hidden";
+            readonly dayOfWeek: "component-date-picker__dropdown-list__day-of-week";
+            readonly inputWrapper: "component-date-picker__input-wrapper";
+            readonly inputSegment: "component-date-picker__input-segment";
+            readonly inputSegmentHasValue: "component-date-picker__input-segment--has-value";
+            readonly inputSegmentIsActive: "component-date-picker__input-segment--is-active";
+            readonly listButton: "component-date-picker__list__button";
+        };
+    };
+};
+type DeepRemoveVar<T> = {
+    [K in keyof T]: T[K] extends string ? string : T[K] extends object ? DeepRemoveVar<T[K]> : T[K];
+};
+export declare const CSS_VARS_RAW: DeepRemoveVar<{
+    readonly font: {
+        readonly family: "var(--font-family)";
+        readonly weight: "var(--font-weight)";
+        readonly height: "var(--font-height)";
+        readonly size: "var(--font-size)";
+        readonly sizeHeading: {
+            readonly headline: "var(--font-size-heading-headline)";
+            readonly 'sub-headline': "var(--font-size-heading-sub-headline)";
+            readonly 'title-1': "var(--font-size-heading-title-1)";
+            readonly 'title-2': "var(--font-size-heading-title-2)";
+            readonly 'title-3': "var(--font-size-heading-title-3)";
+            readonly 'title-4': "var(--font-size-heading-title-4)";
+            readonly 'title-5': "var(--font-size-heading-title-5)";
+            readonly body: "var(--font-size-heading-body)";
+            readonly callout: "var(--font-size-heading-callout)";
+            readonly footnote: "var(--font-size-heading-footnote)";
+            readonly 'caption-1': "var(--font-size-heading-caption-1)";
+            readonly 'caption-2': "var(--font-size-heading-caption-2)";
+            readonly 'controller-large': "var(--font-size-heading-controller-large)";
+            readonly 'controller-large-medium': "var(--font-size-heading-controller-large-medium)";
+            readonly 'controller-medium': "var(--font-size-heading-controller-medium)";
+            readonly 'controller-medium-small': "var(--font-size-heading-controller-medium-small)";
+            readonly 'controller-small': "var(--font-size-heading-controller-small)";
+        };
+    };
+    readonly screen: {
+        readonly breakpoint: {
+            readonly tablet: "1290px";
+            readonly mobile: "850px";
+        };
+        readonly orientation: {
+            readonly landscape: "landscape";
+            readonly portrait: "portrait";
+        };
+    };
+    readonly animation: {
+        readonly duration: "var(--duration)";
+        readonly easing: "var(--easing)";
+    };
+    readonly palette: {
+        readonly accentRedLight: "var(--accent-red-light)";
+        readonly accentOrangeLight: "var(--accent-orange-light)";
+        readonly accentYellowLight: "var(--accent-yellow-light)";
+        readonly accentGreenLight: "var(--accent-green-light)";
+        readonly accentMintLight: "var(--accent-mint-light)";
+        readonly accentTealLight: "var(--accent-teal-light)";
+        readonly accentCyanLight: "var(--accent-cyan-light)";
+        readonly accentBlueLight: "var(--accent-blue-light)";
+        readonly accentIndigoLight: "var(--accent-indigo-light)";
+        readonly accentPurpleLight: "var(--accent-purple-light)";
+        readonly accentPinkLight: "var(--accent-pink-light)";
+        readonly accentBrownLight: "var(--accent-brown-light)";
+        readonly accentGrayLight: "var(--accent-gray-light)";
+        readonly fillLight: "var(--fill-light)";
+        readonly fillPrimaryLight: "var(--fill-primary-light)";
+        readonly fillSecondaryLight: "var(--fill-secondary-light)";
+        readonly fillTertiaryLight: "var(--fill-tertiary-light)";
+        readonly fillQuaternaryLight: "var(--fill-quaternary-light)";
+        readonly fillQuinaryLight: "var(--fill-quinary-light)";
+        readonly textPrimaryLight: "var(--text-primary-light)";
+        readonly textSecondaryLight: "var(--text-secondary-light)";
+        readonly textTertiaryLight: "var(--text-tertiary-light)";
+        readonly controlMenuLight: "var(--control-menu-light)";
+        readonly controlTooltipLight: "var(--control-tooltip-light)";
+        readonly controlTransparent: "var(--control-transparent)";
+        readonly shadowGlassLight: "var(--shadow-glass-light)";
+        readonly shadowPrimaryLight: "var(--shadow-primary-light)";
+        readonly shadowSecondaryLight: "var(--shadow-secondary-light)";
+        readonly shadowTertiaryLight: "var(--shadow-tertiary-light)";
+        readonly shadowQuaternaryLight: "var(--shadow-quaternary-light)";
+        readonly shadowWindowInnerShadowLight: "var(--shadow-window-inner-shadow-light)";
+        readonly productPrimaryLight: "var(--product-primary-light)";
+        readonly productSecondaryLight: "var(--product-secondary-light)";
+        readonly productTertiaryLight: "var(--product-tertiary-light)";
+        readonly productQuaternaryLight: "var(--product-quaternary-light)";
+        readonly productQuinaryLight: "var(--product-quinary-light)";
+        readonly current: "var(--current-color)";
+        readonly inherit: "var(--inherit)";
+        readonly transparent: "var(--transparent)";
+        readonly accentRedDark: "var(--accent-red-dark)";
+        readonly accentOrangeDark: "var(--accent-orange-dark)";
+        readonly accentYellowDark: "var(--accent-yellow-dark)";
+        readonly accentGreenDark: "var(--accent-green-dark)";
+        readonly accentMintDark: "var(--accent-mint-dark)";
+        readonly accentTealDark: "var(--accent-teal-dark)";
+        readonly accentCyanDark: "var(--accent-cyan-dark)";
+        readonly accentBlueDark: "var(--accent-blue-dark)";
+        readonly accentIndigoDark: "var(--accent-indigo-dark)";
+        readonly accentPurpleDark: "var(--accent-purple-dark)";
+        readonly accentPinkDark: "var(--accent-pink-dark)";
+        readonly accentBrownDark: "var(--accent-brown-dark)";
+        readonly accentGrayDark: "var(--accent-gray-dark)";
+        readonly fillDark: "var(--fill-dark)";
+        readonly fillPrimaryDark: "var(--fill-primary-dark)";
+        readonly fillSecondaryDark: "var(--fill-secondary-dark)";
+        readonly fillTertiaryDark: "var(--fill-tertiary-dark)";
+        readonly fillQuaternaryDark: "var(--fill-quaternary-dark)";
+        readonly fillQuinaryDark: "var(--fill-quinary-dark)";
+        readonly textPrimaryDark: "var(--text-primary-dark)";
+        readonly textSecondaryDark: "var(--text-secondary-dark)";
+        readonly textTertiaryDark: "var(--text-tertiary-dark)";
+        readonly controlMenuDark: "var(--control-menu-dark)";
+        readonly controlTooltipDark: "var(--control-tooltip-dark)";
+        readonly productPrimaryDark: "var(--product-primary-dark)";
+        readonly productSecondaryDark: "var(--product-secondary-dark)";
+        readonly productTertiaryDark: "var(--product-tertiary-dark)";
+        readonly productQuaternaryDark: "var(--product-quaternary-dark)";
+        readonly productQuinaryDark: "var(--product-quinary-dark)";
+        readonly shadowGlassDark: "var(--shadow-glass-dark)";
+        readonly shadowPrimaryDark: "var(--shadow-primary-dark)";
+        readonly shadowSecondaryDark: "var(--shadow-secondary-dark)";
+        readonly shadowTertiaryDark: "var(--shadow-tertiary-dark)";
+        readonly shadowQuaternaryDark: "var(--shadow-quaternary-dark)";
+        readonly shadowWindowInnerShadowDark: "var(--shadow-window-inner-shadow-dark)";
+        readonly accentRedLightStable: "var(--accent-red-light-stable)";
+        readonly accentOrangeLightStable: "var(--accent-orange-light-stable)";
+        readonly accentYellowLightStable: "var(--accent-yellow-light-stable)";
+        readonly accentGreenLightStable: "var(--accent-green-light-stable)";
+        readonly accentMintLightStable: "var(--accent-mint-light-stable)";
+        readonly accentTealLightStable: "var(--accent-teal-light-stable)";
+        readonly accentCyanLightStable: "var(--accent-cyan-light-stable)";
+        readonly accentBlueLightStable: "var(--accent-blue-light-stable)";
+        readonly accentIndigoLightStable: "var(--accent-indigo-light-stable)";
+        readonly accentPurpleLightStable: "var(--accent-purple-light-stable)";
+        readonly accentPinkLightStable: "var(--accent-pink-light-stable)";
+        readonly accentBrownLightStable: "var(--accent-brown-light-stable)";
+        readonly accentGrayLightStable: "var(--accent-gray-light-stable)";
+        readonly fillLightStable: "var(--fill-light-stable)";
+        readonly fillPrimaryLightStable: "var(--fill-primary-light-stable)";
+        readonly fillSecondaryLightStable: "var(--fill-secondary-light-stable)";
+        readonly fillTertiaryLightStable: "var(--fill-tertiary-light-stable)";
+        readonly fillQuaternaryLightStable: "var(--fill-quaternary-light-stable)";
+        readonly fillQuinaryLightStable: "var(--fill-quinary-light-stable)";
+        readonly textPrimaryLightStable: "var(--text-primary-light-stable)";
+        readonly textSecondaryLightStable: "var(--text-secondary-light-stable)";
+        readonly textTertiaryLightStable: "var(--text-tertiary-light-stable)";
+        readonly controlMenuLightStable: "var(--control-menu-light-stable)";
+        readonly controlTooltipLightStable: "var(--control-tooltip-light-stable)";
+        readonly controlTransparentStable: "var(--control-transparent-stable)";
+        readonly shadowGlassLightStable: "var(--shadow-glass-light-stable)";
+        readonly shadowPrimaryLightStable: "var(--shadow-primary-light-stable)";
+        readonly shadowSecondaryLightStable: "var(--shadow-secondary-light-stable)";
+        readonly shadowTertiaryLightStable: "var(--shadow-tertiary-light-stable)";
+        readonly shadowQuaternaryLightStable: "var(--shadow-quaternary-light-stable)";
+        readonly shadowWindowInnerShadowLightStable: "var(--shadow-window-inner-shadow-light-stable)";
+        readonly productPrimaryLightStable: "var(--product-primary-light-stable)";
+        readonly productSecondaryLightStable: "var(--product-secondary-light-stable)";
+        readonly productTertiaryLightStable: "var(--product-tertiary-light-stable)";
+        readonly productQuaternaryLightStable: "var(--product-quaternary-light-stable)";
+        readonly productQuinaryLightStable: "var(--product-quinary-light-stable)";
+        readonly accentRedDarkStable: "var(--accent-red-dark-stable)";
+        readonly accentOrangeDarkStable: "var(--accent-orange-dark-stable)";
+        readonly accentYellowDarkStable: "var(--accent-yellow-dark-stable)";
+        readonly accentGreenDarkStable: "var(--accent-green-dark-stable)";
+        readonly accentMintDarkStable: "var(--accent-mint-dark-stable)";
+        readonly accentTealDarkStable: "var(--accent-teal-dark-stable)";
+        readonly accentCyanDarkStable: "var(--accent-cyan-dark-stable)";
+        readonly accentBlueDarkStable: "var(--accent-blue-dark-stable)";
+        readonly accentIndigoDarkStable: "var(--accent-indigo-dark-stable)";
+        readonly accentPurpleDarkStable: "var(--accent-purple-dark-stable)";
+        readonly accentPinkDarkStable: "var(--accent-pink-dark-stable)";
+        readonly accentBrownDarkStable: "var(--accent-brown-dark-stable)";
+        readonly accentGrayDarkStable: "var(--accent-gray-dark-stable)";
+        readonly fillDarkStable: "var(--fill-dark-stable)";
+        readonly fillPrimaryDarkStable: "var(--fill-primary-dark-stable)";
+        readonly fillSecondaryDarkStable: "var(--fill-secondary-dark-stable)";
+        readonly fillTertiaryDarkStable: "var(--fill-tertiary-dark-stable)";
+        readonly fillQuaternaryDarkStable: "var(--fill-quaternary-dark-stable)";
+        readonly fillQuinaryDarkStable: "var(--fill-quinary-dark-stable)";
+        readonly textPrimaryDarkStable: "var(--text-primary-dark-stable)";
+        readonly textSecondaryDarkStable: "var(--text-secondary-dark-stable)";
+        readonly textTertiaryDarkStable: "var(--text-tertiary-dark-stable)";
+        readonly controlMenuDarkStable: "var(--control-menu-dark-stable)";
+        readonly controlTooltipDarkStable: "var(--control-tooltip-dark-stable)";
+        readonly productPrimaryDarkStable: "var(--product-primary-dark-stable)";
+        readonly productSecondaryDarkStable: "var(--product-secondary-dark-stable)";
+        readonly productTertiaryDarkStable: "var(--product-tertiary-dark-stable)";
+        readonly productQuaternaryDarkStable: "var(--product-quaternary-dark-stable)";
+        readonly productQuinaryDarkStable: "var(--product-quinary-dark-stable)";
+        readonly shadowGlassDarkStable: "var(--shadow-glass-dark-stable)";
+        readonly shadowPrimaryDarkStable: "var(--shadow-primary-dark-stable)";
+        readonly shadowSecondaryDarkStable: "var(--shadow-secondary-dark-stable)";
+        readonly shadowTertiaryDarkStable: "var(--shadow-tertiary-dark-stable)";
+        readonly shadowQuaternaryDarkStable: "var(--shadow-quaternary-dark-stable)";
+        readonly shadowWindowInnerShadowDarkStable: "var(--shadow-window-inner-shadow-dark-stable)";
+    };
+    readonly size: {
+        readonly large: {
+            readonly height: "var(--size-large-height)";
+            readonly heightIcon: "var(--size-large-height-icon)";
+            readonly radius: "var(--size-large-radius)";
+            readonly padding: "var(--size-large-padding)";
+            readonly font: "var(--size-large-font)";
+        };
+        readonly largeMedium: {
+            readonly height: "var(--size-large-medium-height)";
+            readonly heightIcon: "var(--size-large-medium-height-icon)";
+            readonly radius: "var(--size-large-medium-radius)";
+            readonly padding: "var(--size-large-medium-padding)";
+            readonly font: "var(--size-large-medium-font)";
+        };
+        readonly medium: {
+            readonly height: "var(--size-medium-height)";
+            readonly heightIcon: "var(--size-medium-height-icon)";
+            readonly radius: "var(--size-medium-radius)";
+            readonly padding: "var(--size-medium-padding)";
+            readonly font: "var(--size-medium-font)";
+        };
+        readonly mediumSmall: {
+            readonly height: "var(--size-medium-small-height)";
+            readonly heightIcon: "var(--size-medium-small-height-icon)";
+            readonly radius: "var(--size-medium-small-radius)";
+            readonly padding: "var(--size-medium-small-padding)";
+            readonly font: "var(--size-medium-small-font)";
+        };
+        readonly small: {
+            readonly height: "var(--size-small-height)";
+            readonly heightIcon: "var(--size-small-height-icon)";
+            readonly radius: "var(--size-small-radius)";
+            readonly padding: "var(--size-small-padding)";
+            readonly font: "var(--size-small-font)";
+        };
+    };
+    readonly sizeValue: {
+        readonly large: {
+            readonly height: 46;
+            readonly heightIcon: 24;
+            readonly radius: 6;
+            readonly padding: 16;
+            readonly font: 20;
+        };
+        readonly largeMedium: {
+            readonly height: 42;
+            readonly heightIcon: 22;
+            readonly radius: 6;
+            readonly padding: 14;
+            readonly font: 18;
+        };
+        readonly medium: {
+            readonly height: 38;
+            readonly heightIcon: 20;
+            readonly radius: 6;
+            readonly padding: 12;
+            readonly font: 14;
+        };
+        readonly mediumSmall: {
+            readonly height: 34;
+            readonly heightIcon: 18;
+            readonly radius: 6;
+            readonly padding: 10;
+            readonly font: 14;
+        };
+        readonly small: {
+            readonly height: 30;
+            readonly heightIcon: 16;
+            readonly radius: 8;
+            readonly padding: 8;
+            readonly font: 12;
+        };
+    };
+    readonly sizeToggle: {
+        readonly large: {
+            readonly height: "var(--size-toggle-large-height)";
+            readonly width: "var(--size-toggle-large-width)";
+            readonly padding: "var(--size-toggle-large-padding)";
+            readonly thumb: "var(--size-toggle-large-thumb)";
+        };
+        readonly largeMedium: {
+            readonly height: "var(--size-toggle-large-medium-height)";
+            readonly width: "var(--size-toggle-large-medium-width)";
+            readonly padding: "var(--size-toggle-large-medium-padding)";
+            readonly thumb: "var(--size-toggle-large-medium-thumb)";
+        };
+        readonly medium: {
+            readonly height: "var(--size-toggle-medium-height)";
+            readonly width: "var(--size-toggle-medium-width)";
+            readonly padding: "var(--size-toggle-medium-padding)";
+            readonly thumb: "var(--size-toggle-medium-thumb)";
+        };
+        readonly mediumSmall: {
+            readonly height: "var(--size-toggle-medium-small-height)";
+            readonly width: "var(--size-toggle-medium-small-width)";
+            readonly padding: "var(--size-toggle-medium-small-padding)";
+            readonly thumb: "var(--size-toggle-medium-small-thumb)";
+        };
+        readonly small: {
+            readonly height: "var(--size-toggle-small-height)";
+            readonly width: "var(--size-toggle-small-width)";
+            readonly padding: "var(--size-toggle-small-padding)";
+            readonly thumb: "var(--size-toggle-small-thumb)";
+        };
+    };
+    readonly component: {
+        readonly select: {
+            readonly padding: "var(--component-select-padding)";
+            readonly height: "var(--component-select-height)";
+            readonly borderRadius: "var(--component-select-border-radius)";
+            readonly background: "var(--component-select-background)";
+            readonly borderColor: "var(--component-select-border-color)";
+            readonly borderColorSelect: "var(--component-select-border-color-select)";
+            readonly color: "var(--component-select-color)";
+            readonly backgroundChecked: "var(--component-select-background-checked)";
+            readonly borderColorChecked: "var(--component-select-border-color-checked)";
+            readonly backgroundInput: "var(--component-select-background-input)";
+            readonly borderColorInput: "var(--component-select-border-color-input)";
+            readonly colorInput: "var(--component-select-color-input)";
+            readonly backgroundOption: "var(--component-select-background-option)";
+        };
+        readonly tooltip: {
+            readonly padding: "var(--component-tooltip-padding)";
+            readonly height: "var(--component-tooltip-height)";
+        };
+        readonly popover: {
+            readonly padding: "var(--component-popover-padding)";
+            readonly borderRadius: "var(--component-popover-border-radius)";
+            readonly maxWidth: "var(--component-popover-max-width)";
+            readonly maxHeight: "var(--component-popover-max-height)";
+            readonly background: "var(--component-popover-background)";
+            readonly borderColor: "var(--component-popover-border-color)";
+            readonly color: "var(--component-popover-color)";
+            readonly boxShadow: "var(--component-popover-box-shadow)";
+        };
+        readonly error: {
+            readonly padding: "var(--component-error-padding)";
+            readonly color: "var(--component-error-color)";
+        };
+        readonly checkbox: {
+            readonly height: "var(--component-checkbox-height)";
+            readonly padding: "var(--component-checkbox-padding)";
+            readonly radius: "var(--component-checkbox-radius)";
+            readonly gap: "var(--component-checkbox-gap)";
+            readonly background: "var(--component-checkbox-background)";
+            readonly border: "var(--component-checkbox-border)";
+            readonly color: "var(--component-checkbox-color)";
+        };
+        readonly toggle: {
+            readonly height: "var(--component-toggle-height)";
+            readonly width: "var(--component-toggle-width)";
+            readonly padding: "var(--component-toggle-padding)";
+            readonly backgroundActive: "var(--component-toggle-active-background)";
+            readonly borderActive: "var(--component-toggle-active-border)";
+            readonly backgroundUnActive: "var(--component-toggle-un-active-background)";
+            readonly borderUnActive: "var(--component-toggle-un-active-border)";
+            readonly centerHeight: "var(--component-toggle-center-height)";
+            readonly centerWidth: "var(--component-toggle-center-width)";
+            readonly centerBackgroundActive: "var(--component-toggle-center-active-background)";
+            readonly centerBorderActive: "var(--component-toggle-center-active-border)";
+            readonly centerBackgroundUnActive: "var(--component-toggle-center-un-active-background)";
+            readonly centerBorderUnActive: "var(--component-toggle-center-un-active-border)";
+            readonly centerBoxShadowActive: "var(--component-toggle-center-active-box-shadow)";
+            readonly centerBoxShadowUnActive: "var(--component-toggle-center-un-active-box-shadow)";
+            readonly centerX: "var(--component-toggle-center-x)";
+        };
+        readonly button: {
+            readonly height: "var(--component-button-height)";
+            readonly padding: "var(--component-button-padding)";
+            readonly radius: "var(--component-button-radius)";
+            readonly gap: "var(--component-button-gap)";
+            readonly background: "var(--component-button-background)";
+            readonly border: "var(--component-button-border)";
+            readonly color: "var(--component-button-color)";
+            readonly iconGroupOrder: "var(--component-button-icon-group-order)";
+        };
+        readonly icon: {
+            readonly order: "var(--component-icon-order)";
+            readonly color: "var(--component-icon-color)";
+            readonly heightIcon: "var(--component-icon-height-icon)";
+            readonly turn: "var(--component-icon-turn)";
+            readonly skeletonHeightIcon: "var(--component-icon-skeleton-height-icon)";
+            readonly skeletonOrder: "var(--component-icon-skeleton-order)";
+        };
+        readonly typography: {
+            readonly letterSpacing: "var(--component-typography-letter-spacing)";
+            readonly flex: "var(--component-typography-flex)";
+            readonly cursor: "var(--component-typography-cursor)";
+            readonly overflow: "var(--component-typography-overflow)";
+            readonly line: {
+                readonly single: "var(--component-typography-line-single)";
+                readonly multiline: "var(--component-typography-line-multiline)";
+            };
+            readonly family: "var(--component-typography-family)";
+            readonly weight: "var(--component-typography-weight)";
+            readonly height: "var(--component-typography-height)";
+            readonly color: "var(--component-typography-color)";
+            readonly align: "var(--component-typography-align)";
+            readonly wrap: "var(--component-typography-wrap)";
+            readonly decoration: "var(--component-typography-decoration)";
+            readonly transform: "var(--component-typography-transform)";
+            readonly size: "var(--component-typography-size)";
+            readonly variant: "var(--component-typography-variant)";
+            readonly variantHeight: "var(--component-typography-variant-height)";
+        };
+        readonly separator: {
+            readonly width: "var(--component-separator-width)";
+            readonly height: "var(--component-separator-height)";
+            readonly maxWidth: "var(--component-separator-max-width)";
+            readonly maxHeight: "var(--component-separator-max-height)";
+            readonly background: "var(--component-separator-background)";
+            readonly radius: "var(--component-separator-radius)";
+        };
+        readonly input: {
+            readonly boxShadow: "var(--component-input-box-shadow)";
+            readonly background: "var(--component-input-background)";
+            readonly borderColor: "var(--component-input-border-color)";
+            readonly color: "var(--component-input-color)";
+            readonly placeholderColor: "var(--component-input-placeholder-color)";
+            readonly height: "var(--component-input-height)";
+            readonly padding: "var(--component-input-padding)";
+            readonly radius: "var(--component-input-radius)";
+            readonly prefixWidth: "var(--component-input-prefix-width)";
+            readonly prefixRight: "var(--component-input-prefix-right)";
+            readonly prefixLeft: "var(--component-input-prefix-left)";
+            readonly postfixWidth: "var(--component-input-postfix-width)";
+            readonly postfixRight: "var(--component-input-postfix-right)";
+            readonly postfixLeft: "var(--component-input-postfix-left)";
+        };
+        readonly textarea: {
+            readonly boxShadow: "var(--component-textarea-box-shadow)";
+            readonly background: "var(--component-textarea-background)";
+            readonly borderColor: "var(--component-textarea-border-color)";
+            readonly color: "var(--component-textarea-color)";
+            readonly placeholderColor: "var(--component-textarea-placeholder-color)";
+            readonly padding: "var(--component-textarea-padding)";
+            readonly radius: "var(--component-textarea-radius)";
+        };
+        readonly datePicker: {
+            readonly rows: "var(--component-date-picker-rows)";
+            readonly row: "var(--component-date-picker-row)";
+            readonly column: "var(--component-date-picker-column)";
+            readonly padding: "var(--component-date-picker-padding)";
+            readonly dayRadius: "var(--component-date-picker-day-radius)";
+            readonly dayBackgroundRest: "var(--component-date-picker-day-background-rest)";
+            readonly dayBackgroundHover: "var(--component-date-picker-day-background-hover)";
+            readonly dayBackgroundWeekend: "var(--component-date-picker-day-background-weekend)";
+            readonly dayBackgroundToday: "var(--component-date-picker-day-background-today)";
+            readonly dayBackgroundChoice: "var(--component-date-picker-day-background-choice)";
+            readonly dayBorderRest: "var(--component-date-picker-day-border-rest)";
+            readonly dayBorderWeekend: "var(--component-date-picker-day-border-weekend)";
+            readonly dayBorderToday: "var(--component-date-picker-day-border-today)";
+            readonly dayBorderChoice: "var(--component-date-picker-day-border-choice)";
+            readonly dayBorderHover: "var(--component-date-picker-day-border-hover)";
+            readonly dayColorRest: "var(--component-date-picker-day-color-rest)";
+            readonly dayColorHover: "var(--component-date-picker-day-color-hover)";
+            readonly dayColorWeekend: "var(--component-date-picker-day-color-weekend)";
+            readonly dayColorToday: "var(--component-date-picker-day-color-today)";
+            readonly dayColorChoice: "var(--component-date-picker-day-color-choice)";
+            readonly inputBackground: "var(--component-date-picker-input-background)";
+            readonly inputBackgroundHover: "var(--component-date-picker-input-background-hover)";
+            readonly inputSegmentBackgroundActive: "var(--component-date-picker-input-segment-background-active)";
+            readonly inputBorderColor: "var(--component-date-picker-input-border-color)";
+            readonly inputBorderColorHover: "var(--component-date-picker-input-border-color-hover)";
+            readonly inputColor: "var(--component-date-picker-input-color)";
+            readonly inputColorHover: "var(--component-date-picker-input-color-hover)";
+            readonly inputPadding: "var(--component-date-picker-input-padding)";
+            readonly inputHeight: "var(--component-date-picker-input-height)";
+            readonly inputRadius: "var(--component-date-picker-input-radius)";
+            readonly inputValueColor: "var(--component-date-picker-input-value-color)";
+            readonly inputPlaceholderColor: "var(--component-date-picker-input-placeholder-color)";
+            readonly buttonToggleRight: "var(--component-date-picker-button-toggle-right)";
+            readonly buttonClearRight: "var(--component-date-picker-button-clear-right)";
+        };
+    };
+    readonly area: {
+        readonly skeleton: {
+            readonly color: "var(--area-skeleton-color)";
+            readonly line: "var(--area-skeleton-line)";
+        };
+    };
+    readonly genre: {
+        readonly popover: {
+            readonly primary: {
+                readonly background: "var(--fill-dark)";
+                readonly color: "var(--text-primary-light)";
+                readonly border: "var(--transparent)";
+                readonly boxShadow: "var(--shadow-primary-dark)";
+            };
+            readonly secondary: {
+                readonly background: "var(--fill-light)";
+                readonly color: "var(--text-primary-dark)";
+                readonly border: "var(--transparent)";
+                readonly boxShadow: "var(--shadow-primary-light)";
+            };
+        };
+        readonly checkbox: {
+            readonly green: {
+                readonly background: {
+                    readonly index: "var(--accent-green-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly red: {
+                readonly background: {
+                    readonly index: "var(--accent-red-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly yellow: {
+                readonly background: {
+                    readonly index: "var(--accent-yellow-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly blue: {
+                readonly background: {
+                    readonly index: "var(--accent-blue-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly primary: {
+                readonly background: {
+                    readonly index: "var(--fill-primary-dark)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-light)";
+                };
+            };
+            readonly secondary: {
+                readonly background: {
+                    readonly index: "var(--fill-primary-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+            };
+            readonly product: {
+                readonly background: {
+                    readonly index: "var(--product-primary-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+        };
+        readonly button: {
+            readonly green: {
+                readonly background: {
+                    readonly index: "var(--accent-green-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly red: {
+                readonly background: {
+                    readonly index: "var(--accent-red-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly yellow: {
+                readonly background: {
+                    readonly index: "var(--accent-yellow-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly blue: {
+                readonly background: {
+                    readonly index: "var(--accent-blue-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+            readonly primary: {
+                readonly background: {
+                    readonly index: "var(--fill-primary-dark)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-light)";
+                };
+            };
+            readonly secondary: {
+                readonly background: {
+                    readonly index: "var(--fill-primary-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+            };
+            readonly product: {
+                readonly background: {
+                    readonly index: "var(--product-primary-light)";
+                };
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                };
+            };
+        };
+        readonly toggle: {
+            readonly primary: {
+                readonly active: {
+                    readonly border: "var(--transparent)";
+                    readonly track: "var(--product-primary-light)";
+                    readonly thumb: "var(--fill-primary-dark)";
+                    readonly thumbBoxShadow: "var(--shadow-primary-light)";
+                };
+                readonly unActive: {
+                    readonly border: "var(--transparent)";
+                    readonly track: "var(--fill-primary-light)";
+                    readonly thumb: "var(--fill-primary-dark)";
+                    readonly thumbBoxShadow: "var(--shadow-primary-light)";
+                };
+            };
+        };
+        readonly input: {
+            readonly primary: {
+                readonly color: "var(--text-primary-light)";
+                readonly background: "var(--fill-primary-dark)";
+                readonly backgroundOption: "var(--fill-dark)";
+                readonly border: "var(--text-primary-light)";
+                readonly placeholder: "var(--text-secondary-light)";
+            };
+            readonly secondary: {
+                readonly color: "var(--text-primary-dark)";
+                readonly background: "var(--fill-primary-light)";
+                readonly backgroundOption: "var(--fill-light)";
+                readonly border: "var(--text-primary-dark)";
+                readonly placeholder: "var(--text-secondary-dark)";
+            };
+        };
+        readonly select: {
+            readonly primary: {
+                readonly color: {
+                    readonly index: "var(--text-primary-light)";
+                };
+                readonly background: {
+                    readonly index: "var(--fill-primary-dark)";
+                    readonly select: "var(--product-quaternary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-light)";
+                    readonly select: "var(--product-primary-light)";
+                };
+                readonly placeholder: {
+                    readonly index: "var(--text-secondary-light)";
+                };
+            };
+            readonly secondary: {
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                };
+                readonly background: {
+                    readonly index: "var(--fill-primary-light)";
+                    readonly select: "var(--product-quaternary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--text-primary-dark)";
+                    readonly select: "var(--product-primary-light)";
+                };
+                readonly placeholder: {
+                    readonly index: "var(--text-secondary-dark)";
+                };
+            };
+        };
+        readonly textarea: {
+            readonly primary: {
+                readonly color: "var(--text-primary-light)";
+                readonly background: "var(--fill-primary-dark)";
+                readonly border: "var(--text-primary-light)";
+                readonly placeholder: "var(--text-secondary-light)";
+            };
+            readonly secondary: {
+                readonly color: "var(--text-primary-dark)";
+                readonly background: "var(--fill-primary-light)";
+                readonly border: "var(--text-primary-dark)";
+                readonly placeholder: "var(--text-secondary-dark)";
+            };
+        };
+        readonly datepicker: {
+            readonly primary: {
+                readonly color: {
+                    readonly index: "var(--text-primary-light)";
+                    readonly hover: "var(--text-primary-light)";
+                    readonly weekend: "var(--text-primary-light)";
+                    readonly today: "var(--text-primary-light)";
+                    readonly choice: "var(--text-primary-dark)";
+                };
+                readonly background: {
+                    readonly index: "var(--transparent)";
+                    readonly hover: "var(--fill-quaternary-light)";
+                    readonly weekend: "var(--fill-quaternary-light)";
+                    readonly today: "var(--transparent)";
+                    readonly choice: "var(--product-primary-light)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                    readonly hover: "var(--transparent)";
+                    readonly weekend: "var(--transparent)";
+                    readonly today: "var(--text-primary-light)";
+                    readonly choice: "var(--product-primary-light)";
+                };
+            };
+            readonly secondary: {
+                readonly color: {
+                    readonly index: "var(--text-primary-dark)";
+                    readonly hover: "var(--text-primary-dark)";
+                    readonly weekend: "var(--text-primary-dark)";
+                    readonly today: "var(--text-primary-dark)";
+                    readonly choice: "var(--text-primary-light)";
+                };
+                readonly background: {
+                    readonly index: "var(--transparent)";
+                    readonly hover: "var(--fill-quaternary-dark)";
+                    readonly weekend: "var(--fill-quaternary-dark)";
+                    readonly today: "var(--transparent)";
+                    readonly choice: "var(--product-primary-dark)";
+                };
+                readonly border: {
+                    readonly index: "var(--transparent)";
+                    readonly hover: "var(--transparent)";
+                    readonly weekend: "var(--transparent)";
+                    readonly today: "var(--text-primary-dark)";
+                    readonly choice: "var(--product-primary-dark)";
+                };
+            };
+        };
+    };
+}>;
+export {};