newskit 4.2.0 → 5.1.0

package/cjs/theme/presets/style-presets.js

@@ -1,291 +1,39 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stylePresets = void 0;
 exports.stylePresets = {};
 //
-// Banner
-//
-exports.stylePresets.bannerInformative = {
-    base: {
-        backgroundColor: '{{colors.interfaceInformative010}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.bannerNotice = {
-    base: {
-        backgroundColor: '{{colors.interfaceNotice010}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.bannerNegative = {
-    base: {
-        backgroundColor: '{{colors.interfaceNegative010}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-//
-// Button
+// Input Field
 //
-exports.stylePresets.buttonSolidPrimary = {
-    base: {
-        backgroundColor: '{{colors.interactivePrimary030}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-};
-exports.stylePresets.buttonSolidSecondary = {
-    base: {
-        backgroundColor: '{{colors.interactiveSecondary030}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveSecondary040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveSecondary050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-};
-exports.stylePresets.buttonSolidNegative = {
-    base: {
-        backgroundColor: '{{colors.interactiveNegative030}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveNegative040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveNegative050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-        color: '{{colors.inkNegative}}',
-        iconColor: '{{colors.inkNegative}}',
-    },
-};
-exports.stylePresets.buttonSolidPositive = {
-    base: {
-        backgroundColor: '{{colors.interactivePositive030}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePositive040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePositive050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-        color: '{{colors.inkPositive}}',
-        iconColor: '{{colors.inkPositive}}',
-    },
-};
-exports.stylePresets.buttonSolidInverse = {
-    base: {
-        backgroundColor: '{{colors.interactiveInverse030}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkContrast}}',
-        iconColor: '{{colors.inkContrast}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveInverse040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveInverse050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.buttonOutlinedPrimary = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactivePrimary030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary010}}',
-        borderColor: '{{colors.interactivePrimary040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-        borderColor: '{{colors.interactivePrimary050}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-        borderStyle: 'none',
-    },
-};
-exports.stylePresets.buttonOutlinedSecondary = {
+exports.stylePresets.inputField = {
     base: {
         backgroundColor: '{{colors.transparent}}',
         borderStyle: 'solid',
-        borderColor: '{{colors.interactiveSecondary030}}',
-        borderWidth: '{{borders.borderWidth010}}',
+        borderColor: '{{colors.interactiveInput020}}',
+        borderWidth: '{{borders.borderWidthDefault}}',
         borderRadius: '{{borders.borderRadiusDefault}}',
         color: '{{colors.inkBase}}',
+        textOverflow: 'ellipsis',
+        placeholderColor: '{{colors.inkSubtle}}',
         iconColor: '{{colors.inkBase}}',
     },
-    hover: {
-        backgroundColor: '{{colors.interactiveSecondary010}}',
-        borderColor: '{{colors.interactiveSecondary040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-        borderColor: '{{colors.interactiveSecondary050}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-        borderStyle: 'none',
-    },
-};
-exports.stylePresets.buttonOutlinedNegative = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactiveNegative030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkNegative}}',
-        iconColor: '{{colors.inkNegative}}',
+    focus: {
+        borderColor: '{{colors.interactiveInput040}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
     },
     hover: {
-        backgroundColor: '{{colors.interactiveNegative010}}',
-        borderColor: '{{colors.interactiveNegative040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-        borderColor: '{{colors.interactiveNegative050}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-        borderStyle: 'none',
+        backgroundColor: '{{colors.interactiveInput010}}',
     },
-};
-exports.stylePresets.buttonOutlinedPositive = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
+    valid: {
         borderColor: '{{colors.interactivePositive030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkPositive}}',
-        iconColor: '{{colors.inkPositive}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePositive010}}',
-        borderColor: '{{colors.interactivePositive040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-        borderColor: '{{colors.interactivePositive050}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-        borderStyle: 'none',
-    },
-};
-exports.stylePresets.buttonOutlinedInverse = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactiveInverse030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
     },
-    hover: {
-        backgroundColor: '{{colors.interactiveInverse010}}',
-        borderColor: '{{colors.interactiveInverse040}}',
+    'valid:hover': {
+        borderColor: '{{colors.interactivePositive030}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
     },
-    active: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-        borderColor: '{{colors.interactiveInverse050}}',
+    'valid:focus': {
+        borderColor: '{{colors.interactiveInput040}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
     },
     disabled: {
         borderColor: '{{colors.interactiveDisabled010}}',
@@ -293,1589 +41,18 @@ exports.stylePresets.buttonOutlinedInverse = {
         iconColor: '{{colors.inkNonEssential}}',
     },
     loading: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-        borderStyle: 'none',
-    },
-};
-exports.stylePresets.buttonMinimalPrimary = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-    },
-};
-exports.stylePresets.buttonMinimalSecondary = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveSecondary010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-    },
-};
-exports.stylePresets.buttonMinimalNegative = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkNegative}}',
-        iconColor: '{{colors.inkNegative}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveNegative010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-    },
-};
-exports.stylePresets.buttonMinimalPositive = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkPositive}}',
-        iconColor: '{{colors.inkPositive}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePositive010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-    },
-};
-exports.stylePresets.buttonMinimalInverse = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveInverse010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-    },
-};
-//
-// Icon Button
-//
-exports.stylePresets.iconButtonSolidPrimary = {
-    base: {
-        backgroundColor: '{{colors.interactivePrimary030}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-        color: '{{colors.inkBrand010}}',
         iconColor: '{{colors.inkBrand010}}',
     },
-};
-exports.stylePresets.iconButtonSolidSecondary = {
-    base: {
-        backgroundColor: '{{colors.interactiveSecondary030}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveSecondary040}}',
+    invalid: {
+        borderColor: '{{colors.interactiveNegative030}}',
     },
-    active: {
-        backgroundColor: '{{colors.interactiveSecondary050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-};
-exports.stylePresets.iconButtonSolidNegative = {
-    base: {
-        backgroundColor: '{{colors.interactiveNegative030}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveNegative040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveNegative050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-        color: '{{colors.inkNegative}}',
-        iconColor: '{{colors.inkNegative}}',
-    },
-};
-exports.stylePresets.iconButtonSolidPositive = {
-    base: {
-        backgroundColor: '{{colors.interactivePositive030}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePositive040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePositive050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-        color: '{{colors.inkPositive}}',
-        iconColor: '{{colors.inkPositive}}',
-    },
-};
-exports.stylePresets.iconButtonSolidInverse = {
-    base: {
-        backgroundColor: '{{colors.interactiveInverse030}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkContrast}}',
-        iconColor: '{{colors.inkContrast}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveInverse040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveInverse050}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.iconButtonOutlinedPrimary = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactivePrimary030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary010}}',
-        borderColor: '{{colors.interactivePrimary040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-        borderColor: '{{colors.interactivePrimary050}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-        borderStyle: 'none',
-    },
-};
-exports.stylePresets.iconButtonOutlinedSecondary = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactiveSecondary030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveSecondary010}}',
-        borderColor: '{{colors.interactiveSecondary040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-        borderColor: '{{colors.interactiveSecondary050}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-        borderStyle: 'none',
-    },
-};
-exports.stylePresets.iconButtonOutlinedNegative = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactiveNegative030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkNegative}}',
-        iconColor: '{{colors.inkNegative}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveNegative010}}',
-        borderColor: '{{colors.interactiveNegative050}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-        borderColor: '{{colors.interactiveNegative030}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-        borderStyle: 'none',
-    },
-};
-exports.stylePresets.iconButtonOutlinedPositive = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactivePositive030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkPositive}}',
-        iconColor: '{{colors.inkPositive}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePositive010}}',
-        borderColor: '{{colors.interactivePositive040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-        borderColor: '{{colors.interactivePositive050}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-        borderStyle: 'none',
-    },
-};
-exports.stylePresets.iconButtonOutlinedInverse = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactiveInverse030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveInverse010}}',
-        borderColor: '{{colors.interactiveInverse040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-        borderColor: '{{colors.interactiveInverse050}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-        borderStyle: 'none',
-    },
-};
-exports.stylePresets.iconButtonMinimalPrimary = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.transparent}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-    },
-};
-exports.stylePresets.iconButtonMinimalSecondary = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveSecondary010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.transparent}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-        color: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.iconButtonMinimalNegative = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkNegative}}',
-        iconColor: '{{colors.inkNegative}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveNegative010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveNegative020}}',
-    },
-};
-exports.stylePresets.iconButtonMinimalPositive = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkPositive}}',
-        iconColor: '{{colors.inkPositive}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePositive010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactivePositive020}}',
-    },
-};
-exports.stylePresets.iconButtonMinimalInverse = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveInverse010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.transparent}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-    },
-};
-//
-// Icons
-//
-exports.stylePresets.iconSocialTwitter = {
-    base: {
-        iconColor: '{{colors.socialTwitter}}',
-    },
-};
-exports.stylePresets.iconSocialGitHub = {
-    base: {
-        iconColor: '{{colors.socialGithub}}',
-    },
-};
-exports.stylePresets.iconSocialFacebook = {
-    base: {
-        iconColor: '{{colors.socialFacebook}}',
-    },
-};
-exports.stylePresets.iconSocialInstagram = {
-    base: {
-        iconColor: '{{colors.socialInstagram}}',
-    },
-};
-exports.stylePresets.iconSocialYoutube = {
-    base: {
-        iconColor: '{{colors.socialYoutube}}',
-    },
-};
-exports.stylePresets.iconSocialWhatsApp = {
-    base: {
-        iconColor: '{{colors.socialWhatsapp}}',
-    },
-};
-exports.stylePresets.iconSocialReddit = {
-    base: {
-        iconColor: '{{colors.socialReddit}}',
-    },
-};
-exports.stylePresets.iconDefault = {
-    base: {
-        iconColor: '{{colors.inkBase}}',
-    },
-};
-//
-// Indeterminate Progress Indicator
-//
-exports.stylePresets.indeterminateProgressIndicatorPrimary = {
-    base: {
-        iconColor: '{{colors.inkBrand010}}',
-    },
-};
-exports.stylePresets.indeterminateProgressIndicatorSecondary = {
-    base: {
-        iconColor: '{{colors.inkBase}}',
-    },
-};
-exports.stylePresets.indeterminateProgressIndicatorNegative = {
-    base: {
-        iconColor: '{{colors.inkNegative}}',
-    },
-};
-exports.stylePresets.indeterminateProgressIndicatorPositive = {
-    base: {
-        iconColor: '{{colors.inkPositive}}',
-    },
-};
-exports.stylePresets.indeterminateProgressIndicatorInverse = {
-    base: {
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-//
-// Tag
-//
-exports.stylePresets.tagPrimary = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactiveSecondary030}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-    },
-    active: {
-        borderWidth: '{{borders.borderWidth010}}',
-    },
-};
-exports.stylePresets.tagPrimaryInverse = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interface010}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveInverse010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveInverse020}}',
-    },
-};
-exports.stylePresets.tab = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary010}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    selected: {
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    'selected:hover': {
-        backgroundColor: '{{colors.transparent}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.tabsBarTrack = {
-    base: {
-        backgroundColor: '{{colors.interface040}}',
-    },
-};
-exports.stylePresets.tabsBarIndicator = {
-    base: {
-        backgroundColor: '{{colors.interactivePrimary030}}',
-    },
-};
-// Input Field
-exports.stylePresets.inputField = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactiveInput020}}',
-        borderWidth: '{{borders.borderWidthDefault}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkBase}}',
-        textOverflow: 'ellipsis',
-        placeholderColor: '{{colors.inkSubtle}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-    focus: {
-        borderColor: '{{colors.interactiveInput040}}',
-        backgroundColor: '{{colors.interactiveInput010}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveInput010}}',
-    },
-    valid: {
-        borderColor: '{{colors.interactivePositive030}}',
-    },
-    'valid:hover': {
-        borderColor: '{{colors.interactivePositive030}}',
-        backgroundColor: '{{colors.interactiveInput010}}',
-    },
-    'valid:focus': {
-        borderColor: '{{colors.interactiveInput010}}',
-        backgroundColor: '{{colors.interactiveInput010}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    loading: {
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    invalid: {
-        borderColor: '{{colors.interactiveNegative030}}',
-    },
-    'invalid:focus': {
-        borderColor: '{{colors.interactiveInput010}}',
-        backgroundColor: '{{colors.interactiveInput010}}',
-    },
-    'invalid:hover': {
-        borderColor: '{{colors.interactiveNegative030}}',
-        backgroundColor: '{{colors.interactiveInput010}}',
-    },
-};
-// Assistive Text
-exports.stylePresets.assistiveText = {
-    base: {
-        color: '{{colors.inkSubtle}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-    },
-    invalid: {
-        color: '{{colors.inkNegative}}',
-    },
-    valid: {
-        color: '{{colors.inkSubtle}}',
-    },
-};
-exports.stylePresets.textField = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interface040}}',
-        borderWidth: '{{borders.borderWidthDefault}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkBase}}',
-        textOverflow: 'ellipsis',
-        placeholderColor: '{{colors.inkSubtle}}',
-    },
-    focus: {
-        backgroundColor: '{{colors.interface020}}',
-        borderColor: '{{colors.interfaceBrand010}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interface020}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-    },
-    invalid: {
-        caretColor: '{{colors.inkNegative}}',
-        borderColor: '{{colors.interactiveNegative030}}',
-    },
-    valid: {
-        caretColor: '{{colors.inkPositive}}',
-        borderColor: '{{colors.interactivePositive030}}',
-    },
-};
-exports.stylePresets.label = {
-    base: {
-        color: '{{colors.inkContrast}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-    },
-};
-// Text Input
-exports.stylePresets.textInput = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interface040}}',
-        borderWidth: '{{borders.borderWidthDefault}}',
-        borderRadius: '{{borders.borderRadiusDefault}}',
-        color: '{{colors.inkBase}}',
-        textOverflow: 'ellipsis',
-        placeholderColor: '{{colors.inkSubtle}}',
-    },
-    focus: {
-        backgroundColor: '{{colors.interface020}}',
-        borderColor: '{{colors.interfaceBrand010}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interface020}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-        color: '{{colors.inkNonEssential}}',
-    },
-    invalid: {
-        caretColor: '{{colors.inkNegative}}',
-        borderColor: '{{colors.interactiveNegative030}}',
-    },
-    valid: {
-        caretColor: '{{colors.inkPositive}}',
-        borderColor: '{{colors.interactivePositive030}}',
-    },
-};
-exports.stylePresets.textInputLabel = {
-    base: {
-        color: '{{colors.inkContrast}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.textInputAssistiveText = {
-    base: {
-        color: '{{colors.inkSubtle}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-    },
-    invalid: {
-        color: '{{colors.inkNegative}}',
-    },
-    valid: {
-        color: '{{colors.inkPositive}}',
-    },
-};
-exports.stylePresets.iconPositive = {
-    base: {
-        iconColor: '{{colors.inkPositive}}',
-    },
-};
-exports.stylePresets.iconNegative = {
-    base: {
-        iconColor: '{{colors.inkNegative}}',
-    },
-};
-//
-// Flag
-//
-exports.stylePresets.flagSolidPrimary = {
-    base: {
-        backgroundColor: '{{colors.interfaceBrand010}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.flagSolidPositive = {
-    base: {
-        backgroundColor: '{{colors.interfacePositive010}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.flagSolidNegative = {
-    base: {
-        backgroundColor: '{{colors.interfaceNegative010}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.flagSolidNotice = {
-    base: {
-        backgroundColor: '{{colors.interfaceNotice010}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.flagSolidInformative = {
-    base: {
-        backgroundColor: '{{colors.interfaceInformative010}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.flagSolidNeutral = {
-    base: {
-        backgroundColor: '{{colors.interfaceNeutral010}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.flagSolidInverse = {
-    base: {
-        backgroundColor: '{{colors.interface010}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkContrast}}',
-        iconColor: '{{colors.inkContrast}}',
-    },
-};
-exports.stylePresets.flagMinimalPrimary = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-};
-exports.stylePresets.flagMinimalPositive = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkPositive}}',
-        iconColor: '{{colors.inkPositive}}',
-    },
-};
-exports.stylePresets.flagMinimalNegative = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkNegative}}',
-        iconColor: '{{colors.inkNegative}}',
-    },
-};
-exports.stylePresets.flagMinimalNotice = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkNotice}}',
-        iconColor: '{{colors.inkNotice}}',
-    },
-};
-exports.stylePresets.flagMinimalInformative = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkInformative}}',
-        iconColor: '{{colors.inkInformative}}',
-    },
-};
-exports.stylePresets.flagMinimalNeutral = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-};
-exports.stylePresets.flagMinimalInverse = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-//
-// Link
-//
-exports.stylePresets.linkStandalone = {
-    base: {
-        color: '{{colors.interactivePrimary030}}',
-        iconColor: '{{colors.interactivePrimary030}}',
-        textDecoration: 'none',
-    },
-    hover: {
-        color: '{{colors.interactivePrimary040}}',
-        iconColor: '{{colors.interactivePrimary040}}',
-        textDecoration: 'underline',
-    },
-    active: {
-        color: '{{colors.interactivePrimary050}}',
-        iconColor: '{{colors.interactivePrimary050}}',
-        textDecoration: 'underline',
-    },
-};
-exports.stylePresets.linkStandaloneInverse = {
-    base: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'none',
-    },
-    hover: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'underline',
-    },
-    active: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'underline',
-    },
-};
-exports.stylePresets.linkInline = {
-    base: {
-        color: '{{colors.interactivePrimary030}}',
-        iconColor: '{{colors.interactivePrimary030}}',
-        textDecoration: 'underline',
-    },
-    hover: {
-        color: '{{colors.interactivePrimary040}}',
-        iconColor: '{{colors.interactivePrimary040}}',
-        textDecoration: 'underline',
-    },
-    active: {
-        color: '{{colors.interactivePrimary050}}',
-        iconColor: '{{colors.interactivePrimary050}}',
-        textDecoration: 'underline',
-    },
-    visited: {
-        color: '{{colors.interactiveVisited010}}',
-        iconColor: '{{colors.interactiveVisited010}}',
-        textDecoration: 'underline',
-    },
-    'visited:hover': {
-        color: '{{colors.interactiveVisited010}}',
-        iconColor: '{{colors.interactiveVisited010}}',
-        textDecoration: 'underline',
-    },
-};
-exports.stylePresets.linkInlineInverse = {
-    base: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'underline',
-    },
-    hover: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'underline',
-    },
-    active: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'underline',
-    },
-    visited: {
-        color: '{{colors.interactiveInverse040}}',
-        iconColor: '{{colors.interactiveInverse040}}',
-        textDecoration: 'underline',
-    },
-    'visited:hover': {
-        color: '{{colors.interactiveInverse040}}',
-        iconColor: '{{colors.interactiveInverse040}}',
-    },
-};
-//
-// Slider
-//
-exports.stylePresets.sliderTrack = {
-    base: {
-        backgroundColor: '{{colors.interface030}}',
-        borderRadius: '{{borders.borderRadiusPill}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-    },
-};
-exports.stylePresets.sliderIndicator = {
-    base: {
-        backgroundColor: '{{colors.interactivePrimary030}}',
-        borderRadius: '{{borders.borderRadiusPill}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.interface040}}',
-    },
-};
-exports.stylePresets.sliderThumb = {
-    base: {
-        boxShadow: '{{shadows.shadow010}}',
-        backgroundColor: '{{colors.interactivePrimary030}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.interactivePrimary010}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusCircle}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary040}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary050}}',
-        iconColor: '{{colors.inkSubtle}}',
-    },
-    disabled: {
-        boxShadow: 'none',
-        backgroundColor: '{{colors.interface040}}',
-        borderStyle: 'none',
-        borderColor: 'none',
-        borderWidth: 'none',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.sliderThumbLabel = {
-    base: {
-        color: '{{colors.inkBrand010}}',
-        textAlign: 'center',
-        whiteSpace: 'nowrap',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.sliderLabels = {
-    base: {
-        color: '{{colors.inkSubtle}}',
-        iconColor: '{{colors.inkSubtle}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-//
-// Volume Control
-//
-exports.stylePresets.volumeControlIndicator = {
-    base: {
-        backgroundColor: '{{colors.interactivePrimary030}}',
-        borderRadius: '{{borders.borderRadiusPill}}',
-    },
-};
-exports.stylePresets.volumeControlThumb = {
-    base: __assign({}, exports.stylePresets.sliderThumb.base),
-    hover: __assign({}, exports.stylePresets.sliderThumb.hover),
-    active: __assign({}, exports.stylePresets.sliderThumb.active),
-};
-exports.stylePresets.volumeControlTrack = {
-    base: {
-        backgroundColor: '{{colors.interface030}}',
-        borderRadius: '{{borders.borderRadiusPill}}',
-    },
-};
-//
-// Audio Player
-//
-exports.stylePresets.audioPlayerSeekBarTrack = {
-    base: {
-        backgroundColor: '{{colors.interface020}}',
-        borderRadius: '{{borders.borderRadiusPill}}',
-    },
-};
-exports.stylePresets.audioPlayerSeekBarIndicator = {
-    base: {
-        backgroundColor: '{{colors.interactivePrimary030}}',
-        borderRadius: '{{borders.borderRadiusPill}}',
-    },
-};
-exports.stylePresets.audioPlayerSeekBarBuffering = {
-    base: {
-        backgroundColor: '{{colors.interface030}}',
-        borderRadius: '{{borders.borderRadiusPill}}',
-    },
-};
-exports.stylePresets.audioPlayerThumb = {
-    base: __assign(__assign({}, exports.stylePresets.sliderThumb.base), { backgroundColor: '{{colors.interactivePrimary030}}', borderColor: '{{colors.interfaceBackground}}' }),
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary040}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary050}}',
-        iconColor: '{{colors.inkSubtle}}',
-    },
-};
-//
-// Image
-//
-exports.stylePresets.imageSharp = {
-    base: {
-        borderRadius: '{{borders.borderRadiusSharp}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interfaceSkeleton010}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.imageRoundedSmall = {
-    base: {
-        borderRadius: '{{borders.borderRadiusRounded010}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interfaceSkeleton010}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.imageRoundedMedium = {
-    base: {
-        borderRadius: '{{borders.borderRadiusRounded030}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interfaceSkeleton010}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.imageRoundedLarge = {
-    base: {
-        borderRadius: '{{borders.borderRadiusRounded050}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interfaceSkeleton010}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.imageDefault = {
-    base: {
-        borderRadius: '{{borders.borderRadiusDefault}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interfaceSkeleton010}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.imageCircle = {
-    base: {
-        borderRadius: '{{borders.borderRadiusCircle}}',
-    },
-    loading: {
-        backgroundColor: '{{colors.interfaceSkeleton010}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-//
-// TitleBar
-//
-exports.stylePresets.titleBar = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-    },
-};
-//
-// Divider
-//
-exports.stylePresets.divider = {
-    base: {
-        borderStyle: 'solid',
-        borderColor: '{{colors.interface040}}',
-        borderWidth: '{{borders.borderWidthDefault}}',
-    },
-};
-exports.stylePresets.dividerInverse = {
-    base: {
-        borderStyle: 'solid',
-        borderColor: '{{colors.whiteTint050}}',
-        borderWidth: '{{borders.borderWidthDefault}}',
-    },
-};
-//
-// Headline
-//
-exports.stylePresets.headlineKickerInteractive = {
-    base: {
-        color: '{{colors.interactivePrimary030}}',
-    },
-    hover: {
-        color: '{{colors.interactivePrimary040}}',
-        textDecoration: 'underline',
-    },
-    active: {
-        color: '{{colors.interactivePrimary050}}',
-        textDecoration: 'underline',
-    },
-    visited: {
-        color: '{{colors.interactiveVisited010}}',
-    },
-};
-exports.stylePresets.headlineHeadingInteractive = {
-    base: {
-        color: '{{colors.inkBase}}',
-    },
-    hover: {
-        color: '{{colors.interactivePrimary040}}',
-        textDecoration: 'underline',
-    },
-    active: {
-        color: '{{colors.interactivePrimary050}}',
-        textDecoration: 'underline',
-    },
-    visited: {
-        color: '{{colors.interactiveVisited010}}',
-    },
-};
-//
-// Overlay
-//
-exports.stylePresets.overlay = {
-    base: {
-        backgroundColor: '{{overlays.overlayTintBase040}}',
-    },
-};
-//
-// Overlay
-//
-exports.stylePresets.scrollOverlaysHorizontal = {
-    base: {
-        backgroundImage: '{{overlays.overlayGradientBaseHorizontal}}',
-    },
-};
-exports.stylePresets.scrollOverlaysVertical = {
-    base: {
-        backgroundImage: '{{overlays.overlayGradientBaseVertical}}',
-    },
-};
-//
-// Drawer
-//
-exports.stylePresets.drawerPanel = {
-    base: {
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        backgroundColor: '{{colors.interface010}}',
-        boxShadow: '{{shadows.shadow060}}',
-    },
-};
-// Card
-exports.stylePresets.cardContainer = {
-    base: {
-        color: '{{colors.inkBase}}',
-        backgroundColor: '{{colors.interface010}}',
-    },
-};
-// Toast
-exports.stylePresets.toastNeutral = {
-    base: {
-        backgroundColor: '{{colors.interfaceNeutral010}}',
-        borderRadius: '{{borders.borderRadiusRounded020}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.toastInformative = {
-    base: {
-        backgroundColor: '{{colors.interfaceInformative010}}',
-        borderRadius: '{{borders.borderRadiusRounded020}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.toastNotice = {
-    base: {
-        backgroundColor: '{{colors.interfaceNotice010}}',
-        borderRadius: '{{borders.borderRadiusRounded020}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.toastPositive = {
-    base: {
-        backgroundColor: '{{colors.interfacePositive010}}',
-        borderRadius: '{{borders.borderRadiusRounded020}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.toastNegative = {
-    base: {
-        backgroundColor: '{{colors.interfaceNegative010}}',
-        borderRadius: '{{borders.borderRadiusRounded020}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-};
-// StructuredList
-exports.stylePresets.structuredListItem = {
-    hover: {
-        backgroundColor: '{{colors.interactiveSecondary010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactiveSecondary020}}',
-    },
-    disabled: {
-        backgroundColor: '{{colors.transparent}}',
-    },
-};
-// Inline Message
-exports.stylePresets.inlineMessageInformative = {
-    base: {
-        backgroundColor: '{{colors.interfaceInformative020}}',
-        borderColor: '{{colors.interfaceInformative010}}',
-        borderStyle: 'solid',
-        borderRadius: '{{borders.borderRadiusRounded010}}',
-        borderWidth: '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth030}}',
-        iconColor: '{{colors.inkInformative}}',
-        color: '{{colors.inkInverse}}',
-    },
-};
-exports.stylePresets.inlineMessageNegative = {
-    base: {
-        backgroundColor: '{{colors.interfaceNegative020}}',
-        borderColor: '{{colors.interfaceNegative010}}',
-        borderStyle: 'solid',
-        borderRadius: '{{borders.borderRadiusRounded010}}',
-        borderWidth: '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth030}}',
-        iconColor: '{{colors.inkNegative}}',
-        color: '{{colors.inkBase}}',
-    },
-};
-// Menu
-exports.stylePresets.menuItemVertical = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.transparent}}',
-        borderWidth: '{{borders.borderWidth000}} {{borders.borderWidth020}} {{borders.borderWidth000}} {{borders.borderWidth000}}',
-        color: '{{colors.inkSubtle}}',
-        iconColor: '{{colors.inkSubtle}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactivePrimary010}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    active: {
-        backgroundColor: '{{colors.interactivePrimary020}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    selected: {
-        borderColor: '{{colors.interactivePrimary030}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    'selected:hover': {
-        backgroundColor: '{{colors.transparent}}',
-        borderColor: '{{colors.interactivePrimary030}}',
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.menuItemHorizontal = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.transparent}}',
-        borderWidth: '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth020}} {{borders.borderWidth000}}',
-        color: '{{colors.inkSubtle}}',
-        iconColor: '{{colors.inkSubtle}}',
-    },
-    hover: {
-        borderColor: '{{colors.interactivePrimary030}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-    active: {
-        borderColor: '{{colors.interactivePrimary040}}',
-        color: '{{colors.inkContrast}}',
-        iconColor: '{{colors.inkContrast}}',
-    },
-    selected: {
-        borderColor: '{{colors.interactivePrimary030}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-    'selected:hover': {
-        borderColor: '{{colors.interactivePrimary030}}',
-        color: '{{colors.inkBase}}',
-        iconColor: '{{colors.inkBase}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.menuItemHorizontalInverse = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderStyle: 'solid',
-        borderColor: '{{colors.transparent}}',
-        borderWidth: '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth020}} {{borders.borderWidth000}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        borderColor: '{{colors.interactiveInverse030}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    'selected:hover': {
-        borderColor: '{{colors.interactiveInverse030}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    active: {
-        borderColor: '{{colors.interactiveInverse030}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    selected: {
-        borderColor: '{{colors.interactiveInverse030}}',
-        color: '{{colors.inkInverse}}',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    disabled: {
-        color: '{{colors.interactiveInverse020}}',
-        iconColor: '{{colors.interactiveInverse020}}',
-    },
-};
-//
-// Modal
-//
-exports.stylePresets.modalPanel = {
-    base: {
-        borderRadius: '{{borders.borderRadiusSharp}}',
-        backgroundColor: '{{colors.interfaceBackground}}',
-        boxShadow: '{{shadows.shadow060}}',
-    },
-};
-//
-// Checkbox
-//
-exports.stylePresets.checkboxInput = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderColor: '{{colors.interactiveInput020}}',
-        borderWidth: '{{borders.borderWidth010}}',
-        borderRadius: '{{borders.borderRadiusRounded010}}',
-        borderStyle: 'solid',
-        iconColor: '{{colors.inkInverse}}',
-    },
-    hover: {
-        borderColor: '{{colors.interactiveInput040}}',
-    },
-    focus: {
-        borderColor: '{{colors.interactiveInput050}}',
-    },
-    'focus:hover': {
-        borderColor: '{{colors.interactiveInput050}}',
-    },
-    checked: {
-        backgroundColor: '{{colors.interactiveInput040}}',
-        borderColor: '{{colors.interactiveInput040}}',
-    },
-    'checked:hover': {
-        backgroundColor: '{{colors.interactiveInput050}}',
-        borderColor: '{{colors.interactiveInput050}}',
-    },
-    'checked:focus': {
-        backgroundColor: '{{colors.interactiveInput050}}',
-        borderColor: '{{colors.interactiveInput050}}',
-    },
-    'checked:focus:hover': {
-        backgroundColor: '{{colors.interactiveInput050}}',
-        borderColor: '{{colors.interactiveInput050}}',
-    },
-    invalid: {
-        borderColor: '{{colors.interactiveNegative040}}',
-    },
-    'invalid:focus': {
-        borderColor: '{{colors.interactiveNegative050}}',
+    'invalid:focus': {
+        borderColor: '{{colors.interactiveInput040}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
     },
     'invalid:hover': {
-        borderColor: '{{colors.interactiveNegative050}}',
-    },
-    'invalid:focus:hover': {
-        borderColor: '{{colors.interactiveNegative050}}',
-    },
-    'checked:invalid': {
-        backgroundColor: '{{colors.interactiveNegative040}}',
-        borderColor: '{{colors.interactiveNegative040}}',
-    },
-    'checked:invalid:focus': {
-        backgroundColor: '{{colors.interactiveNegative050}}',
-        borderColor: '{{colors.interactiveNegative050}}',
-    },
-    'checked:invalid:hover': {
-        backgroundColor: '{{colors.interactiveNegative050}}',
-        borderColor: '{{colors.interactiveNegative050}}',
-    },
-    'checked:invalid:focus:hover': {
-        backgroundColor: '{{colors.interactiveNegative050}}',
-        borderColor: '{{colors.interactiveNegative050}}',
-    },
-    valid: {
-        borderColor: '{{colors.interactivePositive040}}',
-    },
-    'valid:focus': {
-        borderColor: '{{colors.interactivePositive050}}',
-    },
-    'valid:hover': {
-        borderColor: '{{colors.interactivePositive050}}',
-    },
-    'valid:focus:hover': {
-        borderColor: '{{colors.interactivePositive050}}',
-    },
-    'checked:valid': {
-        backgroundColor: '{{colors.interactivePositive040}}',
-        borderColor: '{{colors.interactivePositive040}}',
-    },
-    'checked:valid:focus': {
-        backgroundColor: '{{colors.interactivePositive050}}',
-        borderColor: '{{colors.interactivePositive050}}',
-    },
-    'checked:valid:hover': {
-        backgroundColor: '{{colors.interactivePositive050}}',
-        borderColor: '{{colors.interactivePositive050}}',
-    },
-    'checked:valid:focus:hover': {
-        backgroundColor: '{{colors.interactivePositive050}}',
-        borderColor: '{{colors.interactivePositive050}}',
-    },
-    disabled: {
-        borderColor: '{{colors.interactiveDisabled010}}',
-    },
-    'checked:disabled': {
-        backgroundColor: '{{colors.interactiveDisabled010}}',
-        borderColor: '{{colors.interactiveDisabled010}}',
-        iconColor: '{{colors.inkNonEssential}}',
-    },
-};
-exports.stylePresets.checkboxFeedback = {
-    base: {
-        backgroundColor: '{{colors.transparent}}',
-        borderRadius: '{{borders.borderRadiusRounded010}}',
-    },
-    hover: {
-        backgroundColor: '{{colors.interactiveInput030}}',
-    },
-    focus: {
-        backgroundColor: '{{colors.interactiveInput030}}',
-    },
-};
-exports.stylePresets.controlLabel = {
-    base: {
-        color: '{{colors.inkBase}}',
-    },
-    disabled: {
-        color: '{{colors.inkNonEssential}}',
+        borderColor: '{{colors.interactiveNegative030}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
     },
 };
 //# sourceMappingURL=style-presets.js.map