@tamagui/themes 1.111.8 → 1.111.10

package/dist/esm/v3-themes.native.js

@@ -2,570 +2,528 @@ import { blue, blueDark, gray, grayDark, green, greenDark, orange, orangeDark, p
 import { createThemeBuilder } from "@tamagui/theme-builder";
 import { createTokens } from "@tamagui/web";
 var colorTokens = {
-  light: {
-    blue,
-    gray,
-    green,
-    orange,
-    pink,
-    purple,
-    red,
-    yellow
+    light: {
+      blue,
+      gray,
+      green,
+      orange,
+      pink,
+      purple,
+      red,
+      yellow
+    },
+    dark: {
+      blue: blueDark,
+      gray: grayDark,
+      green: greenDark,
+      orange: orangeDark,
+      pink: pinkDark,
+      purple: purpleDark,
+      red: redDark,
+      yellow: yellowDark
+    }
   },
-  dark: {
-    blue: blueDark,
-    gray: grayDark,
-    green: greenDark,
-    orange: orangeDark,
-    pink: pinkDark,
-    purple: purpleDark,
-    red: redDark,
-    yellow: yellowDark
-  }
-}, lightShadowColor = "rgba(0,0,0,0.04)", lightShadowColorStrong = "rgba(0,0,0,0.085)", darkShadowColor = "rgba(0,0,0,0.2)", darkShadowColorStrong = "rgba(0,0,0,0.3)", darkColors = {
-  ...colorTokens.dark.blue,
-  ...colorTokens.dark.gray,
-  ...colorTokens.dark.green,
-  ...colorTokens.dark.orange,
-  ...colorTokens.dark.pink,
-  ...colorTokens.dark.purple,
-  ...colorTokens.dark.red,
-  ...colorTokens.dark.yellow
-}, lightColors = {
-  ...colorTokens.light.blue,
-  ...colorTokens.light.gray,
-  ...colorTokens.light.green,
-  ...colorTokens.light.orange,
-  ...colorTokens.light.pink,
-  ...colorTokens.light.purple,
-  ...colorTokens.light.red,
-  ...colorTokens.light.yellow
-}, color = {
-  white0: "rgba(255,255,255,0)",
-  white075: "rgba(255,255,255,0.75)",
-  white05: "rgba(255,255,255,0.5)",
-  white025: "rgba(255,255,255,0.25)",
-  black0: "rgba(10,10,10,0)",
-  black075: "rgba(10,10,10,0.75)",
-  black05: "rgba(10,10,10,0.5)",
-  black025: "rgba(10,10,10,0.25)",
-  white1: "#fff",
-  white2: "#f8f8f8",
-  white3: "hsl(0, 0%, 96.3%)",
-  white4: "hsl(0, 0%, 94.1%)",
-  white5: "hsl(0, 0%, 92.0%)",
-  white6: "hsl(0, 0%, 90.0%)",
-  white7: "hsl(0, 0%, 88.5%)",
-  white8: "hsl(0, 0%, 81.0%)",
-  white9: "hsl(0, 0%, 56.1%)",
-  white10: "hsl(0, 0%, 50.3%)",
-  white11: "hsl(0, 0%, 42.5%)",
-  white12: "hsl(0, 0%, 9.0%)",
-  black1: "#050505",
-  black2: "#151515",
-  black3: "#191919",
-  black4: "#232323",
-  black5: "#282828",
-  black6: "#323232",
-  black7: "#424242",
-  black8: "#494949",
-  black9: "#545454",
-  black10: "#626262",
-  black11: "#a5a5a5",
-  black12: "#fff",
-  ...postfixObjKeys(lightColors, "Light"),
-  ...postfixObjKeys(darkColors, "Dark")
-}, defaultPalettes = function() {
-  var transparent = function(hsl) {
-    var opacity = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
-    return hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla(");
-  }, getColorPalette = function(colors, accentColors) {
-    var colorPalette = Object.values(colors), colorI = colorPalette.length - 4, accentPalette = Object.values(accentColors), accentBackground = accentPalette[0], accentColor = accentPalette[accentPalette.length - 1];
-    return [
-      accentBackground,
-      transparent(colorPalette[0], 0),
-      transparent(colorPalette[0], 0.25),
-      transparent(colorPalette[0], 0.5),
-      transparent(colorPalette[0], 0.75),
-      ...colorPalette,
-      transparent(colorPalette[colorI], 0.75),
-      transparent(colorPalette[colorI], 0.5),
-      transparent(colorPalette[colorI], 0.25),
-      transparent(colorPalette[colorI], 0),
-      accentColor
-    ];
-  }, brandColor = {
-    light: color.blue4Light,
-    dark: color.blue4Dark
-  }, lightPalette = [
-    brandColor.light,
-    color.white0,
-    color.white025,
-    color.white05,
-    color.white075,
-    color.white1,
-    color.white2,
-    color.white3,
-    color.white4,
-    color.white5,
-    color.white6,
-    color.white7,
-    color.white8,
-    color.white9,
-    color.white10,
-    color.white11,
-    color.white12,
-    color.black075,
-    color.black05,
-    color.black025,
-    color.black0,
-    brandColor.dark
-  ], darkPalette = [
-    brandColor.dark,
-    color.black0,
-    color.black025,
-    color.black05,
-    color.black075,
-    color.black1,
-    color.black2,
-    color.black3,
-    color.black4,
-    color.black5,
-    color.black6,
-    color.black7,
-    color.black8,
-    color.black9,
-    color.black10,
-    color.black11,
-    color.black12,
-    color.white075,
-    color.white05,
-    color.white025,
-    color.white0,
-    brandColor.light
-  ], lightColorNames = objectKeys(colorTokens.light), lightPalettes = objectFromEntries(lightColorNames.map(function(key, index) {
-    return [
-      `light_${key}`,
-      getColorPalette(colorTokens.light[key], colorTokens.light[lightColorNames[(index + 1) % lightColorNames.length]])
-    ];
-  })), darkColorNames = objectKeys(colorTokens.dark), darkPalettes = objectFromEntries(darkColorNames.map(function(key, index) {
-    return [
-      `dark_${key}`,
-      getColorPalette(colorTokens.dark[key], colorTokens.light[darkColorNames[(index + 1) % darkColorNames.length]])
-    ];
-  })), colorPalettes = {
-    ...lightPalettes,
-    ...darkPalettes
-  };
-  return {
-    light: lightPalette,
-    dark: darkPalette,
-    ...colorPalettes
-  };
-}(), getTemplates = function() {
-  var getBaseTemplates = function(scheme) {
-    var isLight = scheme === "light", bgIndex = 5, lighten = isLight ? -1 : 1, darken = -lighten, borderColor = bgIndex + 3, base = {
-      accentBackground: 0,
-      accentColor: -0,
-      background0: 1,
-      background025: 2,
-      background05: 3,
-      background075: 4,
-      color1: bgIndex,
-      color2: bgIndex + 1,
-      color3: bgIndex + 2,
-      color4: bgIndex + 3,
-      color5: bgIndex + 4,
-      color6: bgIndex + 5,
-      color7: bgIndex + 6,
-      color8: bgIndex + 7,
-      color9: bgIndex + 8,
-      color10: bgIndex + 9,
-      color11: bgIndex + 10,
-      color12: bgIndex + 11,
-      color0: -1,
-      color025: -2,
-      color05: -3,
-      color075: -4,
-      // the background, color, etc keys here work like generics - they make it so you
-      // can publish components for others to use without mandating a specific color scale
-      // the @tamagui/button Button component looks for `$background`, so you set the
-      // dark_red_Button theme to have a stronger background than the dark_red theme.
-      background: bgIndex,
-      backgroundHover: bgIndex + lighten,
-      // always lighten on hover no matter the scheme
-      backgroundPress: bgIndex + darken,
-      // always darken on press no matter the theme
-      backgroundFocus: bgIndex + darken,
-      borderColor,
-      borderColorHover: borderColor + lighten,
-      borderColorPress: borderColor + darken,
-      borderColorFocus: borderColor,
-      color: -bgIndex,
-      colorHover: -bgIndex - 1,
-      colorPress: -bgIndex,
-      colorFocus: -bgIndex - 1,
-      colorTransparent: -1,
-      placeholderColor: -bgIndex - 3,
-      outlineColor: -2
-    }, surface12 = {
-      background: base.background + 1,
-      backgroundHover: base.backgroundHover + 1,
-      backgroundPress: base.backgroundPress + 1,
-      backgroundFocus: base.backgroundFocus + 1,
-      borderColor: base.borderColor + 1,
-      borderColorHover: base.borderColorHover + 1,
-      borderColorFocus: base.borderColorFocus + 1,
-      borderColorPress: base.borderColorPress + 1
-    }, surface22 = {
-      background: base.background + 2,
-      backgroundHover: base.backgroundHover + 2,
-      backgroundPress: base.backgroundPress + 2,
-      backgroundFocus: base.backgroundFocus + 2,
-      borderColor: base.borderColor + 2,
-      borderColorHover: base.borderColorHover + 2,
-      borderColorFocus: base.borderColorFocus + 2,
-      borderColorPress: base.borderColorPress + 2
-    }, surface32 = {
-      background: base.background + 3,
-      backgroundHover: base.backgroundHover + 3,
-      backgroundPress: base.backgroundPress + 3,
-      backgroundFocus: base.backgroundFocus + 3,
-      borderColor: base.borderColor + 3,
-      borderColorHover: base.borderColorHover + 3,
-      borderColorFocus: base.borderColorFocus + 3,
-      borderColorPress: base.borderColorPress + 3
-    }, surfaceActiveBg = {
-      background: base.background + 5,
-      backgroundHover: base.background + 5,
-      backgroundPress: base.backgroundPress + 5,
-      backgroundFocus: base.backgroundFocus + 5
-    }, surfaceActive = {
-      ...surfaceActiveBg,
-      // match border to background when active
-      borderColor: surfaceActiveBg.background,
-      borderColorHover: surfaceActiveBg.backgroundHover,
-      borderColorFocus: surfaceActiveBg.backgroundFocus,
-      borderColorPress: surfaceActiveBg.backgroundPress
-    }, inverseSurface12 = {
-      color: surface12.background,
-      colorHover: surface12.backgroundHover,
-      colorPress: surface12.backgroundPress,
-      colorFocus: surface12.backgroundFocus,
-      background: base.color,
-      backgroundHover: base.colorHover,
-      backgroundPress: base.colorPress,
-      backgroundFocus: base.colorFocus,
-      borderColor: base.color - 2,
-      borderColorHover: base.color - 3,
-      borderColorFocus: base.color - 4,
-      borderColorPress: base.color - 5
-    }, inverseActive = {
-      ...inverseSurface12,
-      background: base.color - 2,
-      backgroundHover: base.colorHover - 2,
-      backgroundPress: base.colorPress - 2,
-      backgroundFocus: base.colorFocus - 2,
-      borderColor: base.color - 2 - 2,
-      borderColorHover: base.color - 3 - 2,
-      borderColorFocus: base.color - 4 - 2,
-      borderColorPress: base.color - 5 - 2
-    }, alt1 = {
-      color: base.color - 1,
-      colorHover: base.colorHover - 1,
-      colorPress: base.colorPress - 1,
-      colorFocus: base.colorFocus - 1
-    }, alt2 = {
-      color: base.color - 2,
-      colorHover: base.colorHover - 2,
-      colorPress: base.colorPress - 2,
-      colorFocus: base.colorFocus - 2
-    };
+  lightShadowColor = "rgba(0,0,0,0.04)",
+  lightShadowColorStrong = "rgba(0,0,0,0.085)",
+  darkShadowColor = "rgba(0,0,0,0.2)",
+  darkShadowColorStrong = "rgba(0,0,0,0.3)",
+  darkColors = {
+    ...colorTokens.dark.blue,
+    ...colorTokens.dark.gray,
+    ...colorTokens.dark.green,
+    ...colorTokens.dark.orange,
+    ...colorTokens.dark.pink,
+    ...colorTokens.dark.purple,
+    ...colorTokens.dark.red,
+    ...colorTokens.dark.yellow
+  },
+  lightColors = {
+    ...colorTokens.light.blue,
+    ...colorTokens.light.gray,
+    ...colorTokens.light.green,
+    ...colorTokens.light.orange,
+    ...colorTokens.light.pink,
+    ...colorTokens.light.purple,
+    ...colorTokens.light.red,
+    ...colorTokens.light.yellow
+  },
+  color = {
+    white0: "rgba(255,255,255,0)",
+    white075: "rgba(255,255,255,0.75)",
+    white05: "rgba(255,255,255,0.5)",
+    white025: "rgba(255,255,255,0.25)",
+    black0: "rgba(10,10,10,0)",
+    black075: "rgba(10,10,10,0.75)",
+    black05: "rgba(10,10,10,0.5)",
+    black025: "rgba(10,10,10,0.25)",
+    white1: "#fff",
+    white2: "#f8f8f8",
+    white3: "hsl(0, 0%, 96.3%)",
+    white4: "hsl(0, 0%, 94.1%)",
+    white5: "hsl(0, 0%, 92.0%)",
+    white6: "hsl(0, 0%, 90.0%)",
+    white7: "hsl(0, 0%, 88.5%)",
+    white8: "hsl(0, 0%, 81.0%)",
+    white9: "hsl(0, 0%, 56.1%)",
+    white10: "hsl(0, 0%, 50.3%)",
+    white11: "hsl(0, 0%, 42.5%)",
+    white12: "hsl(0, 0%, 9.0%)",
+    black1: "#050505",
+    black2: "#151515",
+    black3: "#191919",
+    black4: "#232323",
+    black5: "#282828",
+    black6: "#323232",
+    black7: "#424242",
+    black8: "#494949",
+    black9: "#545454",
+    black10: "#626262",
+    black11: "#a5a5a5",
+    black12: "#fff",
+    ...postfixObjKeys(lightColors, "Light"),
+    ...postfixObjKeys(darkColors, "Dark")
+  },
+  defaultPalettes = function () {
+    var transparent = function (hsl) {
+        var opacity = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+        return hsl.replace("%)", `%, ${opacity})`).replace("hsl(", "hsla(");
+      },
+      getColorPalette = function (colors, accentColors) {
+        var colorPalette = Object.values(colors),
+          colorI = colorPalette.length - 4,
+          accentPalette = Object.values(accentColors),
+          accentBackground = accentPalette[0],
+          accentColor = accentPalette[accentPalette.length - 1];
+        return [accentBackground, transparent(colorPalette[0], 0), transparent(colorPalette[0], 0.25), transparent(colorPalette[0], 0.5), transparent(colorPalette[0], 0.75), ...colorPalette, transparent(colorPalette[colorI], 0.75), transparent(colorPalette[colorI], 0.5), transparent(colorPalette[colorI], 0.25), transparent(colorPalette[colorI], 0), accentColor];
+      },
+      brandColor = {
+        light: color.blue4Light,
+        dark: color.blue4Dark
+      },
+      lightPalette = [brandColor.light, color.white0, color.white025, color.white05, color.white075, color.white1, color.white2, color.white3, color.white4, color.white5, color.white6, color.white7, color.white8, color.white9, color.white10, color.white11, color.white12, color.black075, color.black05, color.black025, color.black0, brandColor.dark],
+      darkPalette = [brandColor.dark, color.black0, color.black025, color.black05, color.black075, color.black1, color.black2, color.black3, color.black4, color.black5, color.black6, color.black7, color.black8, color.black9, color.black10, color.black11, color.black12, color.white075, color.white05, color.white025, color.white0, brandColor.light],
+      lightColorNames = objectKeys(colorTokens.light),
+      lightPalettes = objectFromEntries(lightColorNames.map(function (key, index) {
+        return [`light_${key}`, getColorPalette(colorTokens.light[key], colorTokens.light[lightColorNames[(index + 1) % lightColorNames.length]])];
+      })),
+      darkColorNames = objectKeys(colorTokens.dark),
+      darkPalettes = objectFromEntries(darkColorNames.map(function (key, index) {
+        return [`dark_${key}`, getColorPalette(colorTokens.dark[key], colorTokens.light[darkColorNames[(index + 1) % darkColorNames.length]])];
+      })),
+      colorPalettes = {
+        ...lightPalettes,
+        ...darkPalettes
+      };
     return {
-      base,
-      alt1,
-      alt2,
-      surface1: surface12,
-      surface2: surface22,
-      surface3: surface32,
-      inverseSurface1: inverseSurface12,
-      inverseActive,
-      surfaceActive
+      light: lightPalette,
+      dark: darkPalette,
+      ...colorPalettes
     };
-  }, lightTemplates = getBaseTemplates("light"), darkTemplates = getBaseTemplates("dark"), templates = {
-    ...objectFromEntries(objectKeys(lightTemplates).map(function(name) {
-      return [
-        `light_${name}`,
-        lightTemplates[name]
-      ];
-    })),
-    ...objectFromEntries(objectKeys(darkTemplates).map(function(name) {
-      return [
-        `dark_${name}`,
-        darkTemplates[name]
-      ];
-    }))
-  };
-  return templates;
-}, defaultTemplates = getTemplates(), shadows = {
-  light: {
-    shadowColor: lightShadowColorStrong,
-    shadowColorHover: lightShadowColorStrong,
-    shadowColorPress: lightShadowColor,
-    shadowColorFocus: lightShadowColor
+  }(),
+  getTemplates = function () {
+    var getBaseTemplates = function (scheme) {
+        var isLight = scheme === "light",
+          bgIndex = 5,
+          lighten = isLight ? -1 : 1,
+          darken = -lighten,
+          borderColor = bgIndex + 3,
+          base = {
+            accentBackground: 0,
+            accentColor: -0,
+            background0: 1,
+            background025: 2,
+            background05: 3,
+            background075: 4,
+            color1: bgIndex,
+            color2: bgIndex + 1,
+            color3: bgIndex + 2,
+            color4: bgIndex + 3,
+            color5: bgIndex + 4,
+            color6: bgIndex + 5,
+            color7: bgIndex + 6,
+            color8: bgIndex + 7,
+            color9: bgIndex + 8,
+            color10: bgIndex + 9,
+            color11: bgIndex + 10,
+            color12: bgIndex + 11,
+            color0: -1,
+            color025: -2,
+            color05: -3,
+            color075: -4,
+            // the background, color, etc keys here work like generics - they make it so you
+            // can publish components for others to use without mandating a specific color scale
+            // the @tamagui/button Button component looks for `$background`, so you set the
+            // dark_red_Button theme to have a stronger background than the dark_red theme.
+            background: bgIndex,
+            backgroundHover: bgIndex + lighten,
+            // always lighten on hover no matter the scheme
+            backgroundPress: bgIndex + darken,
+            // always darken on press no matter the theme
+            backgroundFocus: bgIndex + darken,
+            borderColor,
+            borderColorHover: borderColor + lighten,
+            borderColorPress: borderColor + darken,
+            borderColorFocus: borderColor,
+            color: -bgIndex,
+            colorHover: -bgIndex - 1,
+            colorPress: -bgIndex,
+            colorFocus: -bgIndex - 1,
+            colorTransparent: -1,
+            placeholderColor: -bgIndex - 3,
+            outlineColor: -2
+          },
+          surface12 = {
+            background: base.background + 1,
+            backgroundHover: base.backgroundHover + 1,
+            backgroundPress: base.backgroundPress + 1,
+            backgroundFocus: base.backgroundFocus + 1,
+            borderColor: base.borderColor + 1,
+            borderColorHover: base.borderColorHover + 1,
+            borderColorFocus: base.borderColorFocus + 1,
+            borderColorPress: base.borderColorPress + 1
+          },
+          surface22 = {
+            background: base.background + 2,
+            backgroundHover: base.backgroundHover + 2,
+            backgroundPress: base.backgroundPress + 2,
+            backgroundFocus: base.backgroundFocus + 2,
+            borderColor: base.borderColor + 2,
+            borderColorHover: base.borderColorHover + 2,
+            borderColorFocus: base.borderColorFocus + 2,
+            borderColorPress: base.borderColorPress + 2
+          },
+          surface32 = {
+            background: base.background + 3,
+            backgroundHover: base.backgroundHover + 3,
+            backgroundPress: base.backgroundPress + 3,
+            backgroundFocus: base.backgroundFocus + 3,
+            borderColor: base.borderColor + 3,
+            borderColorHover: base.borderColorHover + 3,
+            borderColorFocus: base.borderColorFocus + 3,
+            borderColorPress: base.borderColorPress + 3
+          },
+          surfaceActiveBg = {
+            background: base.background + 5,
+            backgroundHover: base.background + 5,
+            backgroundPress: base.backgroundPress + 5,
+            backgroundFocus: base.backgroundFocus + 5
+          },
+          surfaceActive = {
+            ...surfaceActiveBg,
+            // match border to background when active
+            borderColor: surfaceActiveBg.background,
+            borderColorHover: surfaceActiveBg.backgroundHover,
+            borderColorFocus: surfaceActiveBg.backgroundFocus,
+            borderColorPress: surfaceActiveBg.backgroundPress
+          },
+          inverseSurface12 = {
+            color: surface12.background,
+            colorHover: surface12.backgroundHover,
+            colorPress: surface12.backgroundPress,
+            colorFocus: surface12.backgroundFocus,
+            background: base.color,
+            backgroundHover: base.colorHover,
+            backgroundPress: base.colorPress,
+            backgroundFocus: base.colorFocus,
+            borderColor: base.color - 2,
+            borderColorHover: base.color - 3,
+            borderColorFocus: base.color - 4,
+            borderColorPress: base.color - 5
+          },
+          inverseActive = {
+            ...inverseSurface12,
+            background: base.color - 2,
+            backgroundHover: base.colorHover - 2,
+            backgroundPress: base.colorPress - 2,
+            backgroundFocus: base.colorFocus - 2,
+            borderColor: base.color - 2 - 2,
+            borderColorHover: base.color - 3 - 2,
+            borderColorFocus: base.color - 4 - 2,
+            borderColorPress: base.color - 5 - 2
+          },
+          alt1 = {
+            color: base.color - 1,
+            colorHover: base.colorHover - 1,
+            colorPress: base.colorPress - 1,
+            colorFocus: base.colorFocus - 1
+          },
+          alt2 = {
+            color: base.color - 2,
+            colorHover: base.colorHover - 2,
+            colorPress: base.colorPress - 2,
+            colorFocus: base.colorFocus - 2
+          };
+        return {
+          base,
+          alt1,
+          alt2,
+          surface1: surface12,
+          surface2: surface22,
+          surface3: surface32,
+          inverseSurface1: inverseSurface12,
+          inverseActive,
+          surfaceActive
+        };
+      },
+      lightTemplates = getBaseTemplates("light"),
+      darkTemplates = getBaseTemplates("dark"),
+      templates = {
+        ...objectFromEntries(objectKeys(lightTemplates).map(function (name) {
+          return [`light_${name}`, lightTemplates[name]];
+        })),
+        ...objectFromEntries(objectKeys(darkTemplates).map(function (name) {
+          return [`dark_${name}`, darkTemplates[name]];
+        }))
+      };
+    return templates;
   },
-  dark: {
-    shadowColor: darkShadowColorStrong,
-    shadowColorHover: darkShadowColorStrong,
-    shadowColorPress: darkShadowColor,
-    shadowColorFocus: darkShadowColor
-  }
-}, nonInherited = {
-  light: {
-    ...lightColors,
-    ...shadows.light
+  defaultTemplates = getTemplates(),
+  shadows = {
+    light: {
+      shadowColor: lightShadowColorStrong,
+      shadowColorHover: lightShadowColorStrong,
+      shadowColorPress: lightShadowColor,
+      shadowColorFocus: lightShadowColor
+    },
+    dark: {
+      shadowColor: darkShadowColorStrong,
+      shadowColorHover: darkShadowColorStrong,
+      shadowColorPress: darkShadowColor,
+      shadowColorFocus: darkShadowColor
+    }
   },
-  dark: {
-    ...darkColors,
-    ...shadows.dark
-  }
-}, overlayThemeDefinitions = [
-  {
+  nonInherited = {
+    light: {
+      ...lightColors,
+      ...shadows.light
+    },
+    dark: {
+      ...darkColors,
+      ...shadows.dark
+    }
+  },
+  overlayThemeDefinitions = [{
     parent: "light",
     theme: {
       background: "rgba(0,0,0,0.5)"
     }
-  },
-  {
+  }, {
     parent: "dark",
     theme: {
       background: "rgba(0,0,0,0.8)"
     }
-  }
-], inverseSurface1 = [
-  {
+  }],
+  inverseSurface1 = [{
     parent: "active",
     template: "inverseActive"
-  },
-  {
+  }, {
     parent: "",
     template: "inverseSurface1"
-  }
-], surface1 = [
-  {
+  }],
+  surface1 = [{
     parent: "active",
     template: "surfaceActive"
-  },
-  {
+  }, {
     parent: "",
     template: "surface1"
-  }
-], surface2 = [
-  {
+  }],
+  surface2 = [{
     parent: "active",
     template: "surfaceActive"
-  },
-  {
+  }, {
     parent: "",
     template: "surface2"
-  }
-], surface3 = [
-  {
+  }],
+  surface3 = [{
     parent: "active",
     template: "surfaceActive"
-  },
-  {
+  }, {
     parent: "",
     template: "surface3"
-  }
-], defaultComponentThemes = {
-  ListItem: {
-    template: "surface1"
-  },
-  SelectTrigger: surface1,
-  Card: surface1,
-  Button: surface3,
-  Checkbox: surface2,
-  Switch: surface2,
-  SwitchThumb: inverseSurface1,
-  TooltipContent: surface2,
-  Progress: {
-    template: "surface1"
-  },
-  RadioGroupItem: surface2,
-  TooltipArrow: {
-    template: "surface1"
-  },
-  SliderTrackActive: {
-    template: "surface3"
+  }],
+  defaultComponentThemes = {
+    ListItem: {
+      template: "surface1"
+    },
+    SelectTrigger: surface1,
+    Card: surface1,
+    Button: surface3,
+    Checkbox: surface2,
+    Switch: surface2,
+    SwitchThumb: inverseSurface1,
+    TooltipContent: surface2,
+    Progress: {
+      template: "surface1"
+    },
+    RadioGroupItem: surface2,
+    TooltipArrow: {
+      template: "surface1"
+    },
+    SliderTrackActive: {
+      template: "surface3"
+    },
+    SliderTrack: {
+      template: "surface1"
+    },
+    SliderThumb: inverseSurface1,
+    Tooltip: inverseSurface1,
+    ProgressIndicator: inverseSurface1,
+    SheetOverlay: overlayThemeDefinitions,
+    DialogOverlay: overlayThemeDefinitions,
+    ModalOverlay: overlayThemeDefinitions,
+    Input: surface1,
+    TextArea: surface1
   },
-  SliderTrack: {
-    template: "surface1"
-  },
-  SliderThumb: inverseSurface1,
-  Tooltip: inverseSurface1,
-  ProgressIndicator: inverseSurface1,
-  SheetOverlay: overlayThemeDefinitions,
-  DialogOverlay: overlayThemeDefinitions,
-  ModalOverlay: overlayThemeDefinitions,
-  Input: surface1,
-  TextArea: surface1
-}, defaultSubThemes = {
-  alt1: {
-    template: "alt1"
-  },
-  alt2: {
-    template: "alt2"
-  },
-  active: {
-    template: "surface3"
-  },
-  surface1: {
-    template: "surface1"
-  },
-  surface2: {
-    template: "surface2"
-  },
-  surface3: {
-    template: "surface3"
-  },
-  surface4: {
-    template: "surfaceActive"
-  }
-}, themeBuilder = createThemeBuilder().addPalettes(defaultPalettes).addTemplates(defaultTemplates).addThemes({
-  light: {
-    template: "base",
-    palette: "light",
-    nonInheritedValues: nonInherited.light
-  },
-  dark: {
-    template: "base",
-    palette: "dark",
-    nonInheritedValues: nonInherited.dark
-  }
-}).addChildThemes({
-  orange: {
-    palette: "orange",
-    template: "base"
-  },
-  yellow: {
-    palette: "yellow",
-    template: "base"
-  },
-  green: {
-    palette: "green",
-    template: "base"
+  defaultSubThemes = {
+    alt1: {
+      template: "alt1"
+    },
+    alt2: {
+      template: "alt2"
+    },
+    active: {
+      template: "surface3"
+    },
+    surface1: {
+      template: "surface1"
+    },
+    surface2: {
+      template: "surface2"
+    },
+    surface3: {
+      template: "surface3"
+    },
+    surface4: {
+      template: "surfaceActive"
+    }
   },
-  blue: {
-    palette: "blue",
-    template: "base"
+  themeBuilder = createThemeBuilder().addPalettes(defaultPalettes).addTemplates(defaultTemplates).addThemes({
+    light: {
+      template: "base",
+      palette: "light",
+      nonInheritedValues: nonInherited.light
+    },
+    dark: {
+      template: "base",
+      palette: "dark",
+      nonInheritedValues: nonInherited.dark
+    }
+  }).addChildThemes({
+    orange: {
+      palette: "orange",
+      template: "base"
+    },
+    yellow: {
+      palette: "yellow",
+      template: "base"
+    },
+    green: {
+      palette: "green",
+      template: "base"
+    },
+    blue: {
+      palette: "blue",
+      template: "base"
+    },
+    purple: {
+      palette: "purple",
+      template: "base"
+    },
+    pink: {
+      palette: "pink",
+      template: "base"
+    },
+    red: {
+      palette: "red",
+      template: "base"
+    },
+    gray: {
+      palette: "gray",
+      template: "base"
+    }
+  }).addChildThemes(defaultSubThemes).addComponentThemes(defaultComponentThemes, {
+    avoidNestingWithin: ["alt1", "alt2", "surface1", "surface2", "surface3", "surface4"]
+  }),
+  themesIn = themeBuilder.build(),
+  themes = themesIn,
+  size = {
+    $0: 0,
+    "$0.25": 2,
+    "$0.5": 4,
+    "$0.75": 8,
+    $1: 20,
+    "$1.5": 24,
+    $2: 28,
+    "$2.5": 32,
+    $3: 36,
+    "$3.5": 40,
+    $4: 44,
+    $true: 44,
+    "$4.5": 48,
+    $5: 52,
+    $6: 64,
+    $7: 74,
+    $8: 84,
+    $9: 94,
+    $10: 104,
+    $11: 124,
+    $12: 144,
+    $13: 164,
+    $14: 184,
+    $15: 204,
+    $16: 224,
+    $17: 224,
+    $18: 244,
+    $19: 264,
+    $20: 284
   },
-  purple: {
-    palette: "purple",
-    template: "base"
+  spaces = Object.entries(size).map(function (param) {
+    var [k, v] = param;
+    return [k, sizeToSpace(v)];
+  }),
+  spacesNegative = spaces.slice(1).map(function (param) {
+    var [k, v] = param;
+    return [`-${k.slice(1)}`, -v];
+  }),
+  space = {
+    ...Object.fromEntries(spaces),
+    ...Object.fromEntries(spacesNegative)
   },
-  pink: {
-    palette: "pink",
-    template: "base"
+  zIndex = {
+    0: 0,
+    1: 100,
+    2: 200,
+    3: 300,
+    4: 400,
+    5: 500
   },
-  red: {
-    palette: "red",
-    template: "base"
+  radius = {
+    0: 0,
+    1: 3,
+    2: 5,
+    3: 7,
+    4: 9,
+    true: 9,
+    5: 10,
+    6: 16,
+    7: 19,
+    8: 22,
+    9: 26,
+    10: 34,
+    11: 42,
+    12: 50
   },
-  gray: {
-    palette: "gray",
-    template: "base"
-  }
-}).addChildThemes(defaultSubThemes).addComponentThemes(defaultComponentThemes, {
-  avoidNestingWithin: [
-    "alt1",
-    "alt2",
-    "surface1",
-    "surface2",
-    "surface3",
-    "surface4"
-  ]
-}), themesIn = themeBuilder.build(), themes = themesIn, size = {
-  $0: 0,
-  "$0.25": 2,
-  "$0.5": 4,
-  "$0.75": 8,
-  $1: 20,
-  "$1.5": 24,
-  $2: 28,
-  "$2.5": 32,
-  $3: 36,
-  "$3.5": 40,
-  $4: 44,
-  $true: 44,
-  "$4.5": 48,
-  $5: 52,
-  $6: 64,
-  $7: 74,
-  $8: 84,
-  $9: 94,
-  $10: 104,
-  $11: 124,
-  $12: 144,
-  $13: 164,
-  $14: 184,
-  $15: 204,
-  $16: 224,
-  $17: 224,
-  $18: 244,
-  $19: 264,
-  $20: 284
-}, spaces = Object.entries(size).map(function(param) {
-  var [k, v] = param;
-  return [
-    k,
-    sizeToSpace(v)
-  ];
-}), spacesNegative = spaces.slice(1).map(function(param) {
-  var [k, v] = param;
-  return [
-    `-${k.slice(1)}`,
-    -v
-  ];
-}), space = {
-  ...Object.fromEntries(spaces),
-  ...Object.fromEntries(spacesNegative)
-}, zIndex = {
-  0: 0,
-  1: 100,
-  2: 200,
-  3: 300,
-  4: 400,
-  5: 500
-}, radius = {
-  0: 0,
-  1: 3,
-  2: 5,
-  3: 7,
-  4: 9,
-  true: 9,
-  5: 10,
-  6: 16,
-  7: 19,
-  8: 22,
-  9: 26,
-  10: 34,
-  11: 42,
-  12: 50
-}, tokens = createTokens({
-  color,
-  radius,
-  zIndex,
-  space,
-  size
-});
+  tokens = createTokens({
+    color,
+    radius,
+    zIndex,
+    space,
+    size
+  });
 function postfixObjKeys(obj, postfix) {
-  return Object.fromEntries(Object.entries(obj).map(function(param) {
+  return Object.fromEntries(Object.entries(obj).map(function (param) {
     var [k, v] = param;
-    return [
-      `${k}${postfix}`,
-      v
-    ];
+    return [`${k}${postfix}`, v];
   }));
 }
 function sizeToSpace(v) {
@@ -577,22 +535,5 @@ function objectFromEntries(arr) {
 function objectKeys(obj) {
   return Object.keys(obj);
 }
-export {
-  defaultComponentThemes,
-  defaultPalettes,
-  defaultSubThemes,
-  defaultTemplates,
-  objectFromEntries,
-  objectKeys,
-  postfixObjKeys,
-  radius,
-  size,
-  sizeToSpace,
-  space,
-  spaces,
-  spacesNegative,
-  themes,
-  tokens,
-  zIndex
-};
-//# sourceMappingURL=v3-themes.js.map
+export { defaultComponentThemes, defaultPalettes, defaultSubThemes, defaultTemplates, objectFromEntries, objectKeys, postfixObjKeys, radius, size, sizeToSpace, space, spaces, spacesNegative, themes, tokens, zIndex };
+//# sourceMappingURL=v3-themes.native.js.map