@telefonica/mistica 15.16.3 → 15.17.0

package/dist/theme-context.css.d.ts

@@ -0,0 +1,432 @@
+export declare const themeVarsContract: {
+    colors: {
+        appBarBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainer: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerBrand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerBrandHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerBrandPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerBrandOverInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerAlternative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBrand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBrandSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundSkeleton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundSkeletonInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        navigationBarBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundAlternative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBrandTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBrandBottom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        skeletonWave: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        coverBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        coverBackgroundPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonDangerBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonDangerBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonDangerBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkDangerBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkDangerBackgroundInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkDangerBackgroundInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkBackgroundInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackgroundInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackgroundInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBorderSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBorderInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBorderInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBackgroundInverseHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBackgroundInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonPrimaryInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonPrimaryInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonSecondarySelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonSecondaryInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonSecondaryInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLink: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLinkInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLinkDanger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLinkSnackbar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textActivated: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textBrand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        control: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        controlActivated: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        controlInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        controlActivatedInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        controlError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        barTrack: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        loadingBar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        loadingBarBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        toggleAndroidInactive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        toggleAndroidBackgroundActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        iosControlKnob: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        divider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dividerInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        navigationBarDivider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        badge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        feedbackErrorBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        feedbackInfoBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        brandHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        inverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralMedium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralMediumInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralLowAlternative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textPrimaryInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textSecondaryInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textErrorInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        promo: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        successLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warningLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        errorLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        promoLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        brandLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        successHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warningHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        errorHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        promoHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        successHighInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warningHighInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        errorHighInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        promoHighInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textNavigationBarPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textNavigationBarSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textNavigationSearchBarHint: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textNavigationSearchBarText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textAppBar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textAppBarSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        customTabsBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextPromo: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextInactive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextWarning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundPromo: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundInactive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundWarning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        cardContentOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    rawColors: {
+        appBarBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainer: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerBrand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerBrandHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerBrandPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerBrandOverInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundContainerAlternative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBrand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBrandSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundSkeleton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundSkeletonInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        navigationBarBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundAlternative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBrandTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBrandBottom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        skeletonWave: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        coverBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        coverBackgroundPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonDangerBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonDangerBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonDangerBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkDangerBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkDangerBackgroundInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkDangerBackgroundInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonLinkBackgroundInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackgroundInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonPrimaryBackgroundInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBorderSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBackgroundHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBackgroundSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBorderInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBorderInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBackgroundInverseHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonSecondaryBackgroundInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonPrimaryInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonPrimaryInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonSecondarySelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonSecondaryInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textButtonSecondaryInverseSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLink: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLinkInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLinkDanger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLinkSnackbar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textActivated: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textBrand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        control: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        controlActivated: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        controlInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        controlActivatedInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        controlError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        barTrack: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        loadingBar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        loadingBarBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        toggleAndroidInactive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        toggleAndroidBackgroundActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        iosControlKnob: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        divider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dividerInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        navigationBarDivider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        badge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        feedbackErrorBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        feedbackInfoBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        brandHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        inverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralMedium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralMediumInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutralLowAlternative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textPrimaryInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textSecondaryInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textErrorInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        promo: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        successLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warningLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        errorLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        promoLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        brandLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        successHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warningHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        errorHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        promoHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        successHighInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warningHighInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        errorHighInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        promoHighInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textNavigationBarPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textNavigationBarSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textNavigationSearchBarHint: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textNavigationSearchBarText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textAppBar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textAppBarSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        customTabsBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextPromo: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextInactive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextWarning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagTextError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundPromo: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundInactive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundWarning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tagBackgroundError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        cardContentOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderRadii: {
+        button: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        input: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        container: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        legacyDisplay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        popup: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        checkbox: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        indicator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        sheet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        bar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        avatar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        mediaSmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    textPresets: {
+        cardTitle: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        button: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        link: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        title1: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        title2: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        indicator: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tabsLabel: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        navigationBar: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text1: {
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text2: {
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text3: {
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text4: {
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text5: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text6: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text7: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text8: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text9: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text10: {
+            weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+};
+export declare const textPresetResponsiveVarsContract: {
+    cardTitle: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    button: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    link: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    title1: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    title2: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    indicator: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    tabsLabel: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    navigationBar: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text1: {
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text2: {
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text3: {
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text4: {
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text5: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text6: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text7: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text8: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text9: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    text10: {
+        weight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+export declare const themeVars: string;

package/dist/theme-context.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return t;
+    }
+});
+const t = "";

package/dist-es/box.js

@@ -50,14 +50,14 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as n } from "react/jsx-runtime";
-import * as p from "react";
-import v from "classnames";
-import { sprinkles as z } from "./sprinkles.css-mistica.js";
-import { getPrefixedDataAttributes as A } from "./utils/dom.js";
-const C = /*#__PURE__*/ p.forwardRef((param, S)=>{
-    let { className: i, children: f, width: l, padding: a = 0, paddingX: b = a, paddingY: m = a, paddingTop: e = m, paddingBottom: o = m, paddingLeft: r = b, paddingRight: t = b, role: x, dataAttributes: y, "aria-label": j, "aria-hidden": u } = param;
-    const k = {
+import { jsx as p } from "react/jsx-runtime";
+import * as v from "react";
+import z from "classnames";
+import { sprinkles as A } from "./sprinkles.css-mistica.js";
+import { getPrefixedDataAttributes as C } from "./utils/dom.js";
+const D = /*#__PURE__*/ v.forwardRef((param, k)=>{
+    let { className: i, children: f, width: l, padding: a = 0, paddingX: b = a, paddingY: m = a, paddingTop: e = m, paddingBottom: o = m, paddingLeft: r = b, paddingRight: t = b, role: x, id: y, dataAttributes: j, "aria-label": u, "aria-hidden": S } = param;
+    const n = {
         paddingTop: e,
         paddingBottom: o,
         paddingLeft: r,
@@ -65,7 +65,7 @@ const C = /*#__PURE__*/ p.forwardRef((param, S)=>{
     };
     let c = {}, s = "";
     try {
-        s = z(k);
+        s = A(n);
     } catch (e1) {
         c = {
             paddingTop: typeof e == "object" ? e.mobile : e,
@@ -74,17 +74,18 @@ const C = /*#__PURE__*/ p.forwardRef((param, S)=>{
             paddingRight: typeof t == "object" ? t.mobile : t
         };
     }
-    return /* @__PURE__ */ n("div", _object_spread_props(_object_spread({}, A(y)), {
+    return /* @__PURE__ */ p("div", _object_spread_props(_object_spread({}, C(j)), {
         role: x,
-        "aria-label": j,
-        "aria-hidden": u,
-        ref: S,
-        className: v(i, s),
+        "aria-label": u,
+        "aria-hidden": S,
+        ref: k,
+        className: z(i, s),
         style: _object_spread({}, l !== void 0 ? {
             width: l,
             boxSizing: "border-box"
         } : {}, s ? {} : c),
+        id: y,
         children: f
     }));
-}), q = C;
-export { q as default };
+}), w = D;
+export { w as default };