@sanity/ui 1.8.1 → 2.0.0-alpha.1

package/dist/index.js

@@ -1256,6 +1256,7 @@ const defaultOpts = {
         bg2: dark ? color.light : color.dark,
         border: dark ? color.lighter : color.darker,
         fg: dark ? color.darkest : color.lightest,
+        iconColor: dark ? color.darkest : color.lightest,
         muted: {
           fg: black
         },
@@ -1277,6 +1278,7 @@ const defaultOpts = {
       bg2: color.base,
       border: dark ? color.light : color.dark,
       fg: dark ? color.darkest : color.lightest,
+      iconColor: dark ? color.darkest : color.lightest,
       muted: {
         fg: black
       },
@@ -1307,6 +1309,7 @@ const defaultOpts = {
         bg2: dark ? color.darker : color.lighter,
         border: dark ? color.lighter : color.darker,
         fg: dark ? color.lightest : color.darkest,
+        iconColor: dark ? color.lightest : color.darkest,
         muted: {
           fg: black
         },
@@ -1328,6 +1331,7 @@ const defaultOpts = {
       bg2: dark ? color.darkest : color.lightest,
       border: dark ? color.darker : color.lighter,
       fg: dark ? color.lighter : color.darker,
+      iconColor: dark ? color.lighter : color.darker,
       muted: {
         fg: black
       },
@@ -1358,6 +1362,7 @@ const defaultOpts = {
           bg: "transparent",
           bg2: "transparent",
           fg: muted.enabled.fg,
+          iconColor: muted.enabled.fg,
           border: "transparent",
           muted: {
             fg: black
@@ -1378,6 +1383,7 @@ const defaultOpts = {
           bg: muted.enabled.bg,
           bg2: muted.enabled.bg,
           fg: muted.hovered.fg,
+          iconColor: muted.hovered.fg,
           border: "transparent",
           muted: {
             fg: black
@@ -1410,6 +1416,7 @@ const defaultOpts = {
       bg: black,
       bg2: black,
       fg: black,
+      iconColor: black,
       border: black,
       muted: {
         fg: black
@@ -1430,6 +1437,7 @@ const defaultOpts = {
   input: () => {
     return {
       bg: black,
+      bg2: black,
       fg: black,
       border: black,
       placeholder: black
@@ -2170,11 +2178,115 @@ function screen(bg, fg) {
   const hex = rgbToHex(screen$1(b, s));
   return hex;
 }
+const defaultTints = {
+  light: {
+    text_primary: "900",
+    text_secondary: "600",
+    text_inactive: "500",
+    bg_base: color$1.white,
+    bg_base_hover: "50",
+    bg_base_active: "100",
+    bg_accent: "500",
+    bg_accent_hover: "600",
+    bg_accent_active: "700",
+    bg_tint: "50",
+    icon_default: "500",
+    icon_inverted: color$1.white,
+    border_base: "100",
+    border_accent: "500",
+    border_accent_inverted: color$1.white
+  },
+  dark: {
+    text_primary: "50",
+    text_secondary: "300",
+    text_inactive: "400",
+    bg_base: color$1.black,
+    bg_base_hover: "900",
+    bg_base_active: "800",
+    bg_accent: "500",
+    bg_accent_hover: "400",
+    bg_accent_active: "300",
+    bg_tint: "900",
+    icon_default: "300",
+    icon_inverted: color$1.hues.gray[900],
+    border_base: "800",
+    border_accent: "300",
+    border_accent_inverted: color$1.hues.gray[900]
+  }
+};
+const colorTints = {
+  light: {
+    default: {
+      ...defaultTints.light,
+      bg_accent: "900",
+      bg_accent_hover: "950",
+      bg_accent_active: color$1.black,
+      border_accent: "600"
+    },
+    primary: {
+      ...defaultTints.light,
+      bg_accent: "900",
+      bg_accent_hover: "950",
+      bg_accent_active: color$1.black,
+      border_accent: "600"
+    },
+    positive: {
+      ...defaultTints.light,
+      bg_base_hover: color$1.hues.gray[50],
+      bg_base_active: "50",
+      bg_accent: "400",
+      bg_accent_hover: "500",
+      bg_accent_active: "600",
+      border_accent: "400"
+    },
+    transparent: defaultTints.light,
+    caution: defaultTints.light,
+    critical: defaultTints.light
+  },
+  dark: {
+    default: {
+      ...defaultTints.dark,
+      text_primary: color$1.white,
+      bg_accent: color$1.white,
+      bg_accent_hover: "50",
+      bg_accent_active: "100"
+    },
+    primary: {
+      ...defaultTints.dark,
+      text_primary: color$1.white,
+      bg_accent: color$1.white,
+      bg_accent_hover: "50",
+      bg_accent_active: "100"
+    },
+    positive: {
+      ...defaultTints.dark,
+      bg_base_hover: color$1.hues.gray[900],
+      bg_base_active: "900",
+      bg_accent: "400",
+      bg_accent_hover: "300",
+      bg_accent_active: "200",
+      border_accent: "400"
+    },
+    transparent: defaultTints.dark,
+    caution: defaultTints.dark,
+    critical: defaultTints.dark
+  }
+};
+const getColorValue = (tints, dark, tone, key) => {
+  const value = colorTints[dark ? "dark" : "light"][tone][key];
+  if (typeof value === "string") {
+    return tints[value];
+  }
+  return value;
+};
+const getColorHex = (tints, dark, tone, key) => {
+  return getColorValue(tints, dark, tone, key).hex;
+};
 const tones = {
   default: color$1.hues.gray,
   transparent: color$1.hues.gray,
-  primary: color$1.hues.blue,
-  positive: color$1.hues.green,
+  primary: color$1.hues.gray,
+  positive: color$1.hues.cyan,
   caution: color$1.hues.yellow,
   critical: color$1.hues.red
 };
@@ -2190,9 +2302,9 @@ const color = createColorTheme({
       const skeletonFrom2 = dark ? tints2[900].hex : tints2[100].hex;
       return {
         fg: dark ? color$1.white.hex : color$1.black.hex,
-        bg: dark ? color$1.black.hex : color$1.white.hex,
-        border: tints2[dark ? 800 : 200].hex,
-        focusRing: color$1.hues.blue[dark ? 500 : 500].hex,
+        bg: getColorHex(tones["default"], dark, "default", "bg_base"),
+        border: getColorHex(tones["default"], dark, "default", "border_base"),
+        focusRing: getColorHex(tones["positive"], dark, "positive", "border_accent"),
         shadow: {
           outline: rgba(tints2[500].hex, 0.4),
           umbra: dark ? rgba(tints2[950].hex, 0.4) : rgba(tints2[500].hex, 0.2),
@@ -2229,9 +2341,9 @@ const color = createColorTheme({
     const skeletonFrom = tints[dark ? 800 : 200].hex;
     return {
       fg: tints[dark ? 100 : 900].hex,
-      bg: tints[dark ? 950 : 50].hex,
-      border: tints[dark ? 800 : 200].hex,
-      focusRing: tints[500].hex,
+      bg: getColorHex(tints, dark, name, "bg_base"),
+      border: getColorHex(tints, dark, name, "border_base"),
+      focusRing: getColorHex(tints, dark, name, "border_accent"),
       shadow: {
         outline: rgba(tints[500].hex, 0.4),
         umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
@@ -2259,13 +2371,14 @@ const color = createColorTheme({
     let tints = tones[tone === "default" ? name : tone] || defaultTints;
     if (state === "disabled") {
       tints = defaultTints;
-      const bg2 = mix(base.bg, tints[dark ? 800 : 200].hex);
+      const bg2 = getColorHex(tones.default, dark, "default", "bg_tint");
       const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 800].hex);
       return {
         bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: mix(base.bg, tints[dark ? 800 : 200].hex),
-        fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
+        border: getColorHex(tones.default, dark, "default", "bg_base"),
+        fg: getColorHex(tones.default, dark, "default", "text_inactive"),
+        iconColor: getColorHex(tones.default, dark, "default", "border_base"),
         muted: {
           fg: mix(base.bg, tints[dark ? 950 : 50].hex)
         },
@@ -2286,13 +2399,14 @@ const color = createColorTheme({
       };
     }
     if (state === "hovered") {
-      const bg2 = mix(base.bg, tints[dark ? 300 : 600].hex);
+      const bg2 = getColorHex(tints, dark, tone, "bg_accent_hover");
       const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 800].hex);
       return {
         bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: mix(base.bg, tints[dark ? 300 : 600].hex),
-        fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
+        border: bg2,
+        fg: getColorHex(tints, dark, "default", "bg_base"),
+        iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
@@ -2313,13 +2427,14 @@ const color = createColorTheme({
       };
     }
     if (state === "pressed") {
-      const bg2 = mix(base.bg, tints[dark ? 200 : 800].hex);
-      const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 800].hex);
+      const bg2 = getColorHex(tints, dark, tone, "bg_accent_active");
+      const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 600].hex);
       return {
-        bg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: mix(base.bg, tints[dark ? 200 : 800].hex),
-        fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
+        border: bg2,
+        fg: getColorHex(tints, dark, "default", "bg_base"),
+        iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
@@ -2348,8 +2463,9 @@ const color = createColorTheme({
       return {
         bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: mix(base.bg, tints[dark ? 200 : 800].hex),
-        fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
+        border: bg2,
+        fg: getColorHex(tints, dark, "default", "bg_base"),
+        iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
@@ -2369,13 +2485,14 @@ const color = createColorTheme({
         }
       };
     }
-    const bg = mix(base.bg, tints[dark ? 400 : 500].hex);
+    const bg = getColorHex(tints, dark, tone, "bg_accent");
     const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex);
     return {
       bg,
       bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-      border: mix(base.bg, tints[dark ? 400 : 500].hex),
-      fg: mix(base.bg, dark ? color$1.black.hex : color$1.white.hex),
+      border: bg,
+      fg: getColorHex(tints, dark, "default", "bg_base"),
+      iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
       muted: {
         fg: mix(base.bg, tints[dark ? 900 : 100].hex)
       },
@@ -2414,20 +2531,21 @@ const color = createColorTheme({
       return {
         bg: bg2,
         bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: mix(bg2, tints[dark ? 950 : 50].hex),
-        fg: mix(bg2, tints[dark ? 800 : 200].hex),
+        border: getColorHex(tones.default, dark, "default", "border_base"),
+        fg: getColorHex(tones.default, dark, "default", "text_inactive"),
+        iconColor: getColorHex(tones.default, dark, "default", "border_base"),
         muted: {
-          fg: mix(bg2, tints[dark ? 900 : 100].hex)
+          fg: getColorHex(tones.default, dark, "default", "text_inactive")
         },
         accent: {
-          fg: mix(bg2, tints[dark ? 900 : 100].hex)
+          fg: getColorHex(tints, dark, tone, "text_secondary")
         },
         link: {
-          fg: mix(bg2, tints[dark ? 900 : 100].hex)
+          fg: getColorHex(tints, dark, tone, "text_secondary")
         },
         code: {
           bg: bg2,
-          fg: mix(bg2, tints[dark ? 900 : 100].hex)
+          fg: getColorHex(tints, dark, tone, "text_secondary")
         },
         skeleton: {
           from: rgba(skeletonFrom2, 0.5),
@@ -2436,15 +2554,16 @@ const color = createColorTheme({
       };
     }
     if (state === "hovered") {
-      const bg2 = mix(base.bg, tints[dark ? 950 : 50].hex);
+      const bg2 = getColorHex(tints, dark, name, "bg_base_hover");
       const skeletonFrom2 = mix(bg2, tints[dark ? 900 : 100].hex);
       return {
         bg: bg2,
         bg2: mix(bg2, tints[dark ? 950 : 50].hex),
         border: mix(bg2, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg: getColorHex(tints, dark, tone, "text_primary"),
+        iconColor: getColorHex(tints, dark, name, "icon_default"),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+          fg: getColorHex(tints, dark, tone, "text_secondary")
         },
         accent: {
           fg: mix(base.bg, color$1.hues.red[dark ? 400 : 500].hex)
@@ -2454,7 +2573,7 @@ const color = createColorTheme({
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+          fg: getColorHex(tints, dark, tone, "text_secondary")
         },
         skeleton: {
           from: skeletonFrom2,
@@ -2466,15 +2585,16 @@ const color = createColorTheme({
       if (isNeutral) {
         tints = tones.primary;
       }
-      const bg2 = mix(base.bg, tints[dark ? 900 : 100].hex);
-      const skeletonFrom2 = mix(bg2, tints[dark ? 900 : 100].hex);
+      const bg2 = getColorHex(tints, dark, name, "bg_base_active");
+      const skeletonFrom2 = mix(bg2, getColorHex(tints, dark, name, "bg_base_active"));
       return {
         bg: bg2,
         bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: mix(bg2, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        border: getColorHex(tints, dark, name, "border_base"),
+        fg: getColorHex(tints, dark, tone, "text_primary"),
+        iconColor: getColorHex(tints, dark, name, "icon_default"),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+          fg: getColorHex(tints, dark, tone, "text_secondary")
         },
         accent: {
           fg: mix(bg2, color$1.hues.red[dark ? 400 : 500].hex)
@@ -2484,7 +2604,7 @@ const color = createColorTheme({
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+          fg: getColorHex(tints, dark, tone, "text_secondary")
         },
         skeleton: {
           from: skeletonFrom2,
@@ -2501,10 +2621,11 @@ const color = createColorTheme({
       return {
         bg: bg2,
         bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: mix(bg2, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        border: getColorHex(tints, dark, name, "border_base"),
+        fg: getColorHex(tints, dark, tone, "text_primary"),
+        iconColor: getColorHex(tints, dark, name, "icon_default"),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+          fg: getColorHex(tints, dark, tone, "text_secondary")
         },
         accent: {
           fg: mix(bg2, color$1.hues.red[dark ? 400 : 500].hex)
@@ -2514,7 +2635,7 @@ const color = createColorTheme({
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+          fg: getColorHex(tints, dark, tone, "text_secondary")
         },
         skeleton: {
           from: skeletonFrom2,
@@ -2527,10 +2648,11 @@ const color = createColorTheme({
     return {
       bg,
       bg2: mix(bg, tints[dark ? 950 : 50].hex),
-      border: mix(bg, tints[dark ? 900 : 100].hex),
-      fg: mix(base.bg, tints[dark ? 300 : 700].hex),
+      border: mix(bg, getColorHex(tints, dark, name, "bg_base")),
+      fg: getColorHex(tints, dark, tone, "text_primary"),
+      iconColor: getColorHex(tints, dark, name, "icon_default"),
       muted: {
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+        fg: getColorHex(tints, dark, tone, "text_secondary")
       },
       accent: {
         fg: mix(base.bg, color$1.hues.red[dark ? 400 : 500].hex)
@@ -2540,7 +2662,7 @@ const color = createColorTheme({
       },
       code: {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+        fg: getColorHex(tints, dark, tone, "text_secondary")
       },
       skeleton: {
         from: skeletonFrom,
@@ -2581,12 +2703,11 @@ const color = createColorTheme({
     }
     if (mode === "ghost") {
       return {
-        ...solid,
+        ...muted,
         enabled: {
           ...muted.enabled,
           border: base.border
-        },
-        disabled: muted.disabled
+        }
       };
     }
     return solid;
@@ -2627,6 +2748,7 @@ const color = createColorTheme({
       bg,
       bg2: mix(bg, tints[dark ? 950 : 50].hex),
       fg: base.fg,
+      iconColor: getColorHex(tints, dark, name, "icon_default"),
       border: base.border,
       muted: {
         fg: mix(base.bg, tints[dark ? 400 : 600].hex)
@@ -2659,40 +2781,45 @@ const color = createColorTheme({
       const tints = tones.critical;
       return {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
+        bg2: getColorHex(tints, dark, "critical", "text_secondary"),
         fg: mix(base.bg, tints[dark ? 400 : 600].hex),
-        border: mix(base.bg, tints[dark ? 800 : 200].hex),
-        placeholder: mix(base.bg, tints[dark ? 600 : 400].hex)
+        border: getColorHex(tints, dark, "critical", "border_base"),
+        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
       };
     }
     if (state === "hovered") {
       return {
         bg: base.bg,
+        bg2: getColorHex(tones.default, dark, "default", "text_secondary"),
         fg: base.fg,
         border: mix(base.bg, color$1.hues.gray[dark ? 700 : 300].hex),
-        placeholder: mix(base.bg, color$1.hues.gray[dark ? 600 : 400].hex)
+        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
       };
     }
     if (state === "disabled") {
       return {
-        bg: mix(base.bg, color$1.hues.gray[dark ? 950 : 50].hex),
-        fg: mix(base.bg, color$1.hues.gray[dark ? 700 : 300].hex),
-        border: mix(base.bg, color$1.hues.gray[dark ? 900 : 100].hex),
-        placeholder: mix(base.bg, color$1.hues.gray[dark ? 800 : 200].hex)
+        bg: getColorHex(tones.default, dark, "default", "bg_tint"),
+        bg2: getColorHex(tones.default, dark, "default", "border_base"),
+        fg: getColorHex(tones.default, dark, "default", "text_secondary"),
+        border: getColorHex(tones.default, dark, "default", "border_base"),
+        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
       };
     }
     if (state === "readOnly") {
       return {
-        bg: mix(base.bg, color$1.hues.gray[dark ? 950 : 50].hex),
-        fg: mix(base.bg, color$1.hues.gray[dark ? 200 : 800].hex),
-        border: mix(base.bg, color$1.hues.gray[dark ? 800 : 200].hex),
-        placeholder: mix(base.bg, color$1.hues.gray[dark ? 600 : 400].hex)
+        bg: getColorHex(tones.default, dark, "default", "bg_tint"),
+        bg2: getColorHex(tones.default, dark, "default", "border_base"),
+        fg: getColorHex(tones.default, dark, "default", "text_secondary"),
+        border: getColorHex(tones.default, dark, "default", "border_base"),
+        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
       };
     }
     return {
       bg: base.bg,
+      bg2: getColorHex(tones.default, dark, "default", "text_secondary"),
       fg: base.fg,
       border: base.border,
-      placeholder: mix(base.bg, color$1.hues.gray[dark ? 600 : 400].hex)
+      placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
     };
   },
   selectable: _ref17 => {
@@ -2833,7 +2960,7 @@ const fonts = {
     }]
   },
   heading: {
-    family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
     weights: {
       regular: 700,
       medium: 800,
@@ -2885,7 +3012,7 @@ const fonts = {
     }]
   },
   label: {
-    family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
     weights: {
       regular: 600,
       medium: 700,
@@ -2930,7 +3057,7 @@ const fonts = {
     }]
   },
   text: {
-    family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
     weights: {
       regular: 400,
       medium: 500,
@@ -2986,17 +3113,27 @@ const studioTheme = {
     }, {
       distance: -9,
       size: 55
-    }]
+    }],
+    focusRing: {
+      offset: 1,
+      width: 1
+    }
   },
   button: {
-    textWeight: "medium"
+    textWeight: "medium",
+    focusRing: {
+      offset: -1,
+      width: 2
+    }
+  },
+  card: {
+    focusRing: {
+      offset: -1,
+      width: 1
+    }
   },
   color,
   container: [320, 640, 960, 1280, 1600, 1920],
-  focusRing: {
-    offset: 1,
-    width: 2
-  },
   fonts,
   media: [360, 600, 900, 1200, 1800, 2400],
   radius: [0, 1, 3, 6, 9, 12, 21],
@@ -3024,21 +3161,45 @@ const studioTheme = {
   space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
   input: {
     checkbox: {
-      size: 17
+      size: 17,
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
     },
     radio: {
       size: 17,
-      markSize: 9
+      markSize: 9,
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
     },
     switch: {
-      width: 33,
-      height: 17,
-      padding: 4,
+      width: 21,
+      height: 13,
+      padding: 2,
       transitionDurationMs: 150,
-      transitionTimingFunction: "ease-out"
+      transitionTimingFunction: "ease-out",
+      focusRing: {
+        offset: 1,
+        width: 1
+      }
     },
     border: {
       width: 1
+    },
+    select: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    text: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
     }
   }
   // styles: {
@@ -3841,9 +4002,11 @@ function textInputRepresentationStyle(props) {
     theme
   } = props;
   const {
-    focusRing,
     input
   } = theme.sanity;
+  const {
+    focusRing
+  } = input.text;
   const color = theme.sanity.color.input;
   return styled.css(_c$d || (_c$d = __template$D(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
@@ -3887,9 +4050,18 @@ function responsiveRadiusStyle(props) {
     media,
     radius
   } = theme.sanity;
-  return _responsive(media, props.$radius, radiusIndex => ({
-    borderRadius: rem(radius[radiusIndex])
-  }));
+  return _responsive(media, props.$radius, value => {
+    let borderRadius = 0;
+    if (typeof value === "number") {
+      borderRadius = rem(radius[value]);
+    }
+    if (value === "full") {
+      borderRadius = "9999px";
+    }
+    return {
+      borderRadius
+    };
+  });
 }
 function toBoxShadow(shadow, color) {
   return "".concat(shadow.map(rem).join(" "), " ").concat(color);
@@ -3929,7 +4101,7 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return styled.css(_c$c || (_c$c = __template$C(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$l || (_b$l = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return styled.css(_c$c || (_c$c = __template$C(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n      color: var(--card-icon-color);\n    }\n  "])), $accent && styled.css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$l || (_b$l = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
 var __freeze$B = Object.freeze;
 var __defProp$C = Object.defineProperty;
@@ -4022,7 +4194,7 @@ function avatarRootStyle(props) {
   } = props;
   const {
     focusRing
-  } = theme.sanity;
+  } = theme.sanity.avatar;
   return {
     backgroundColor: $color,
     position: "relative",
@@ -4573,8 +4745,10 @@ function _colorVarsStyle(base, color) {
     "--card-shadow-penumbra-color": base.shadow.penumbra,
     "--card-shadow-ambient-color": base.shadow.ambient,
     "--card-focus-ring-color": base.focusRing,
+    "--card-icon-color": color.iconColor,
     // Card
     "--card-bg-color": color.bg,
+    "--card-bg2-color": color.bg2,
     "--card-bg-image": checkered ? "repeating-conic-gradient(".concat(color.bg, " 0% 25%, ").concat(color.bg2 || color.bg, " 0% 50%)") : void 0,
     "--card-fg-color": color.fg,
     "--card-border-color": color.border,
@@ -4605,6 +4779,13 @@ const buttonTheme = {
     width: 1
   }
 };
+const defaultBoxShadow = "0px 2px 0px 0px rgba(112, 128, 155, 0.19);";
+function combineBoxShadow() {
+  for (var _len = arguments.length, boxShadows = new Array(_len), _key = 0; _key < _len; _key++) {
+    boxShadows[_key] = arguments[_key];
+  }
+  return boxShadows.filter(Boolean).join(",");
+}
 function buttonColorStyles(props) {
   var _a2, _b;
   const {
@@ -4613,7 +4794,8 @@ function buttonColorStyles(props) {
   } = props;
   const {
     focusRing
-  } = theme.sanity;
+  } = theme.sanity.button;
+  const shadow = props.$mode !== "bleed";
   const base = theme.sanity.color.base;
   const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default;
   const color = mode[props.$tone] || mode.default;
@@ -4627,15 +4809,19 @@ function buttonColorStyles(props) {
     boxShadow: focusRingBorderStyle(border),
     '&:disabled, &[data-disabled="true"]': _colorVarsStyle(base, color.disabled),
     "&:not([data-disabled='true'])": {
+      boxShadow: combineBoxShadow(focusRingBorderStyle(border), shadow ? defaultBoxShadow : void 0),
       "&:focus": {
         boxShadow: focusRingStyle({
           base,
-          border,
+          border: {
+            width: 2,
+            color: base.bg
+          },
           focusRing
         })
       },
       "&:focus:not(:focus-visible)": {
-        boxShadow: focusRingBorderStyle(border)
+        boxShadow: combineBoxShadow(focusRingBorderStyle(border), shadow ? defaultBoxShadow : void 0)
       },
       "@media (hover: hover)": {
         "&:hover": _colorVarsStyle(base, color.hovered),
@@ -4658,7 +4844,7 @@ const Button = react.forwardRef(function Button2(props, ref) {
   const {
     children,
     disabled,
-    fontSize,
+    fontSize = 1,
     icon,
     iconRight,
     justify: justifyProp = "center",
@@ -4678,6 +4864,7 @@ const Button = react.forwardRef(function Button2(props, ref) {
     textAlign,
     tone = "default",
     type = "button",
+    muted = false,
     ...restProps
   } = props;
   const justify = useArrayProp(justifyProp);
@@ -4720,14 +4907,14 @@ const Button = react.forwardRef(function Button2(props, ref) {
       children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
         as: "span",
         justify,
+        gap: space,
         children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
           size: fontSize,
           children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
         }), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
           flex: iconRight ? 1 : void 0,
-          marginLeft: icon ? space : void 0,
-          marginRight: iconRight ? space : void 0,
           children: /* @__PURE__ */jsxRuntime.jsx(Text, {
+            muted,
             align: textAlign,
             size: fontSize,
             textOverflow: "ellipsis",
@@ -4772,7 +4959,7 @@ function cardColorStyle(props) {
   } = props;
   const {
     focusRing
-  } = theme.sanity;
+  } = theme.sanity.card;
   const {
     base,
     card,
@@ -4857,29 +5044,44 @@ function inputElementStyles(props) {
   } = props;
   const color = theme.sanity.color.input;
   const {
-    focusRing,
     input,
     radius
   } = theme.sanity;
-  return styled.css(_b$h || (_b$h = __template$s(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 2 !important;\n        }\n      }\n    }\n\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:not([data-read-only]):disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
+  const {
+    focusRing
+  } = input.checkbox;
+  return styled.css(_b$h || (_b$h = __template$s(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 1.2 !important;\n        }\n      }\n    }\n    &:checked + span {\n      background: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    /* focus */\n    &:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    /* focus when checked - uses a different offset */\n    &:not(:disabled):focus:focus-visible&:checked + span {\n      box-shadow: ", ";\n    }\n\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked + span {\n      background-color: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    &:disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &:disabled&:checked + span {\n      background-color: ", ";\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &[data-read-only]&:checked + span {\n      background-color: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
-  }), rem(radius[2]), color.default.enabled.bg, focusRingStyle({
+  }), rem(radius[2]), color.default.enabled.bg, color.default.enabled.bg2, focusRingBorderStyle({
+    color: color.default.enabled.bg2,
+    width: input.border.width
+  }), color.default.enabled.bg, focusRingStyle({
+    focusRing
+  }), focusRingStyle({
+    focusRing: {
+      width: 1,
+      offset: 1
+    }
+  }), color.invalid.enabled.border, focusRingBorderStyle({
+    width: input.border.width,
+    color: color.invalid.enabled.bg2
+  }), color.default.disabled.fg, color.invalid.enabled.bg2, color.default.enabled.bg, focusRingStyle({
     border: {
       width: input.border.width,
-      color: color.default.enabled.border
+      color: color.invalid.readOnly.bg2
     },
-    focusRing
-  }), focusRingBorderStyle({
-    color: color.default.enabled.border,
-    width: input.border.width
-  }), color.default.readOnly.bg, focusRingBorderStyle({
-    width: input.border.width,
-    color: color.default.readOnly.border
-  }), color.default.readOnly.fg, color.default.disabled.bg, focusRingBorderStyle({
+    focusRing: {
+      width: 1,
+      offset: 1
+    }
+  }), color.default.disabled.bg, focusRingBorderStyle({
     width: input.border.width,
     color: color.default.disabled.border
-  }), color.default.disabled.fg);
+  }), color.default.disabled.fg, color.default.disabled.bg2, color.default.readOnly.bg, focusRingBorderStyle({
+    width: input.border.width,
+    color: color.default.readOnly.border
+  }), color.default.readOnly.fg, color.default.readOnly.bg2);
 }
 const Root$t = styled__default.default.div(checkboxBaseStyles);
 const Input$5 = styled__default.default.input(inputElementStyles);
@@ -4907,6 +5109,7 @@ const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
     style,
     children: [/* @__PURE__ */jsxRuntime.jsx(Input$5, {
       "data-read-only": !disabled && readOnly ? "" : void 0,
+      "data-error": customValidity ? "" : void 0,
       ...restProps,
       checked,
       disabled: disabled || readOnly,
@@ -5241,7 +5444,7 @@ var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
 }));
 var _a$o;
 function kbdStyle() {
-  return styled.css(_a$o || (_a$o = __template$o(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_a$o || (_a$o = __template$o(["\n    background: var(--card-bg2-color);\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 const Root$n = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = react.forwardRef(function KBD2(props, ref) {
@@ -5260,10 +5463,11 @@ const KBD = react.forwardRef(function KBD2(props, ref) {
     children: /* @__PURE__ */jsxRuntime.jsx(Box, {
       as: "span",
       padding,
-      children: /* @__PURE__ */jsxRuntime.jsx(Code, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Text, {
         as: "span",
         muted: true,
         size: fontSize,
+        weight: "medium",
         children
       })
     })
@@ -5873,6 +6077,20 @@ const DEFAULT_POPOVER_PADDING = 4;
 const DEFAULT_POPOVER_ARROW_WIDTH = 27;
 const DEFAULT_POPOVER_ARROW_HEIGHT = 11;
 const DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0];
+const DEFAULT_FALLBACK_PLACEMENTS$1 = {
+  top: ["bottom", "left", "right"],
+  "top-start": ["bottom-start", "left-start", "right-start"],
+  "top-end": ["bottom-end", "left-end", "right-end"],
+  bottom: ["top", "left", "right"],
+  "bottom-start": ["top-start", "left-start", "right-start"],
+  "bottom-end": ["top-end", "left-end", "right-end"],
+  left: ["right", "top", "bottom"],
+  "left-start": ["right-start", "top-start", "bottom-start"],
+  "left-end": ["right-end", "top-end", "bottom-end"],
+  right: ["left", "top", "bottom"],
+  "right-start": ["left-start", "top-start", "bottom-start"],
+  "right-end": ["left-end", "top-end", "bottom-end"]
+};
 function size(options) {
   const {
     apply,
@@ -6072,7 +6290,7 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
 }));
 PopoverCard.displayName = "PopoverCard";
 const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const theme = useTheme();
   const boundaryElementContext = useBoundaryElement();
   const {
@@ -6083,9 +6301,9 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     constrainSize = false,
     content,
     disabled,
-    fallbackPlacements,
+    fallbackPlacements = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS$1[(_a = props.placement) != null ? _a : "bottom"],
     matchReferenceWidth,
-    floatingBoundary = (_a = props.boundaryElement) != null ? _a : boundaryElementContext.element,
+    floatingBoundary = (_c = props.boundaryElement) != null ? _c : boundaryElementContext.element,
     open,
     overflow = "hidden",
     padding: paddingProp,
@@ -6093,17 +6311,17 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     portal,
     preventOverflow = true,
     radius: radiusProp = 3,
-    referenceBoundary = (_b = props.boundaryElement) != null ? _b : boundaryElementContext.element,
+    referenceBoundary = (_d = props.boundaryElement) != null ? _d : boundaryElementContext.element,
     referenceElement,
     scheme,
     shadow: shadowProp = 3,
     tone = "inherit",
     width: widthProp = "auto",
-    zOffset: zOffsetProp = (_c = theme.sanity.layer) == null ? void 0 : _c.popover.zOffset,
+    zOffset: zOffsetProp = (_e = theme.sanity.layer) == null ? void 0 : _e.popover.zOffset,
     updateRef,
     ...restProps
   } = props;
-  const boundarySize = (_d = useElementSize(boundaryElement)) == null ? void 0 : _d.border;
+  const boundarySize = (_f = useElementSize(boundaryElement)) == null ? void 0 : _f.border;
   const padding = useArrayProp(paddingProp);
   const radius = useArrayProp(radiusProp);
   const shadow = useArrayProp(shadowProp);
@@ -6222,9 +6440,9 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     placement: placementProp,
     whileElementsMounted: reactDom$1.autoUpdate
   });
-  const referenceHidden = (_e = middlewareData.hide) == null ? void 0 : _e.referenceHidden;
-  const arrowX = (_f = middlewareData.arrow) == null ? void 0 : _f.x;
-  const arrowY = (_g = middlewareData.arrow) == null ? void 0 : _g.y;
+  const referenceHidden = (_g = middlewareData.hide) == null ? void 0 : _g.referenceHidden;
+  const arrowX = (_h = middlewareData.arrow) == null ? void 0 : _h.x;
+  const arrowY = (_i = middlewareData.arrow) == null ? void 0 : _i.y;
   const setArrow = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
@@ -6311,15 +6529,17 @@ function inputElementStyle(props) {
     theme
   } = props;
   const {
-    focusRing,
     input
   } = theme.sanity;
+  const {
+    focusRing
+  } = input.radio;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return styled.css(_b$d || (_b$d = __template$k(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
+  return styled.css(_b$d || (_b$d = __template$k(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* customValidity */\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
-  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.fg, focusRingStyle({
+  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.bg2, focusRingStyle({
     border: {
       width: input.border.width,
       color: color.default.enabled.border
@@ -6328,7 +6548,10 @@ function inputElementStyle(props) {
   }), focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
-  }), color.default.readOnly.border, color.default.readOnly.bg, color.default.readOnly.fg, color.default.disabled.border, color.default.disabled.bg, color.default.disabled.fg);
+  }), color.invalid.enabled.border, focusRingBorderStyle({
+    width: input.border.width,
+    color: color.invalid.enabled.bg2
+  }), color.invalid.enabled.bg2, color.default.readOnly.border, color.default.readOnly.bg, color.default.readOnly.border, color.default.disabled.border, color.default.disabled.bg, color.default.disabled.border);
 }
 const Root$h = styled__default.default.div(radioBaseStyle);
 const Input$4 = styled__default.default.input(inputElementStyle);
@@ -6349,6 +6572,7 @@ const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
     style,
     children: [/* @__PURE__ */jsxRuntime.jsx(Input$4, {
       "data-read-only": !disabled && readOnly ? "" : void 0,
+      "data-error": customValidity ? "" : void 0,
       ...restProps,
       disabled: disabled || readOnly,
       readOnly,
@@ -6378,9 +6602,11 @@ function inputColorStyle(props) {
     theme
   } = props;
   const {
-    focusRing,
     input
   } = theme.sanity;
+  const {
+    focusRing
+  } = input.select;
   const color = theme.sanity.color.input;
   return styled.css(_c$7 || (_c$7 = __template$j(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
@@ -6530,13 +6756,15 @@ function switchRepresentationStyles(props) {
     theme
   } = props;
   const {
-    focusRing,
     input
   } = theme.sanity;
-  const color = theme.sanity.color.button.default;
-  return styled.css(_c$6 || (_c$6 = __template$i(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  const {
+    focusRing
+  } = input.switch;
+  const color = theme.sanity.color.input;
+  return styled.css(_c$6 || (_c$6 = __template$i(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: var(--card-focus-ring-color);\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: var(--card-focus-ring-color);\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.border, color.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing
-  }), color.positive.enabled.bg, color.positive.enabled.fg, color.default.hovered.bg, color.default.hovered.fg, color.positive.hovered.bg, color.positive.hovered.fg, color.default.disabled.bg, color.default.disabled.fg);
+  }), color.default.enabled.bg, color.default.hovered.border, color.default.hovered.bg, color.default.enabled.bg, color.default.disabled.border, color.default.disabled.bg, color.default.readOnly.border, color.default.readOnly.bg);
 }
 function switchTrackStyles(props) {
   const {
@@ -6562,7 +6790,7 @@ function switchThumbStyles(props) {
   const checkedOffset = trackWidth - trackPadding * 2 - size;
   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
   const checked = $indeterminate !== true && props.$checked === true;
-  return styled.css(_g || (_g = __template$i(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && styled.css(_e$2 || (_e$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_f$2 || (_f$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return styled.css(_g || (_g = __template$i(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && styled.css(_e$2 || (_e$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_f$2 || (_f$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
 const Root$e = styled__default.default.span(switchBaseStyles);
 const Input$2 = styled__default.default.input(switchInputStyles);
@@ -6846,6 +7074,20 @@ function useDelayedState(initialState) {
   }, []);
   return [state, onStateChange];
 }
+const DEFAULT_FALLBACK_PLACEMENTS = {
+  top: ["bottom", "left", "right"],
+  "top-start": ["bottom-start", "left-start", "right-start"],
+  "top-end": ["bottom-end", "left-end", "right-end"],
+  bottom: ["top", "left", "right"],
+  "bottom-start": ["top-start", "left-start", "right-start"],
+  "bottom-end": ["top-end", "left-end", "right-end"],
+  left: ["right", "top", "bottom"],
+  "left-start": ["right-start", "top-start", "bottom-start"],
+  "left-end": ["right-end", "top-end", "bottom-end"],
+  right: ["left", "top", "bottom"],
+  "right-start": ["left-start", "top-start", "bottom-start"],
+  "right-end": ["left-end", "top-end", "bottom-end"]
+};
 var __freeze$f = Object.freeze;
 var __defProp$f = Object.defineProperty;
 var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
@@ -6917,7 +7159,7 @@ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
 var _a$e;
 const Root$a = styled__default.default(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n"])));
 const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
-  var _a2, _b, _c;
+  var _a2, _b, _c, _d, _e;
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
   const {
@@ -6925,13 +7167,13 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp,
-    padding,
+    fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a2 = props.placement) != null ? _a2 : "bottom"],
+    padding = 3,
     placement: placementProp = "bottom",
     portal,
     scheme,
     shadow = 2,
-    zOffset = (_a2 = theme.sanity.layer) == null ? void 0 : _a2.tooltip.zOffset,
+    zOffset = (_c = theme.sanity.layer) == null ? void 0 : _c.tooltip.zOffset,
     delay,
     ...restProps
   } = props;
@@ -6991,8 +7233,8 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     whileElementsMounted: reactDom$1.autoUpdate
   });
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
-  const arrowX = (_b = middlewareData.arrow) == null ? void 0 : _b.x;
-  const arrowY = (_c = middlewareData.arrow) == null ? void 0 : _c.y;
+  const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
+  const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
   const arrowStyle = react.useMemo(() => {
     const style = {
       left: arrowX !== null ? arrowX : void 0,
@@ -7092,7 +7334,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
       "data-ui": "Tooltip__card",
       "data-placement": placement,
       padding,
-      radius: 2,
+      radius: 3,
       scheme,
       shadow,
       children: [content, /* @__PURE__ */jsxRuntime.jsx(TooltipArrow, {
@@ -8907,7 +9149,7 @@ const Tab = react.forwardRef(function Tab2(props, forwardedRef) {
     icon,
     id,
     focused,
-    fontSize,
+    fontSize = 1,
     label,
     onClick,
     onFocus,
@@ -8947,6 +9189,7 @@ const Tab = react.forwardRef(function Tab2(props, forwardedRef) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     padding,
+    radius: "full",
     ref: setRef,
     role: "tab",
     selected,