@sanity/themer 0.10.3 → 0.10.4

package/dist/AnimatedColorWheelIcon-CwWOVAsw.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedColorWheelIcon-CwWOVAsw.js","names":["(value) => (isSliceFilled(value, index) ? 1 : 0)","{opacity}","<motion.path d={SLICE_PATHS[index]} fill={SLICE_COLORS[index]} style={{opacity}} />","SLICE_PATHS[index]","SLICE_COLORS[index]","motion.path","{\n  busy,\n  ref,\n}: {\n  busy: boolean\n  ref: React.Ref<{spin: () => void}>\n}","(value) => wheelRotation(value)","() => ({\n      spin: () => {\n        // A run in progress plays out — hovering again does not cut it short\n        if (progress.isAnimating()) return\n\n        animate(progress, [0, 1], {duration: ANIMATION_DURATION, ease: 'linear'})\n      },\n    })","[progress]","() => {\n    if (!busy) return undefined\n\n    let looping = false\n    const raf = setTimeout(() => {\n      looping = true\n      const lap = (from: number) => {\n        animate(progress, [from, 1], {\n          duration: (1 - from) * ANIMATION_DURATION,\n          ease: 'linear',\n          onComplete: () => {\n            if (looping) lap(0)\n          },\n        })\n      }\n\n      lap(progress.get())\n    }, 160)\n\n    return () => {\n      clearTimeout(raf)\n      looping = false\n    }\n  }","[busy, progress]","() => () => progress.stop()","{rotate}","SLICE_COLORS.map((color, index) => (\n        <Slice key={color} index={index} progress={progress} />\n      ))","<path d={OUTLINE} stroke=\"currentColor\" strokeLinejoin=\"round\" strokeWidth={1.2} />","<motion.svg\n      data-sanity-icon=\"color-wheel\"\n      fill=\"none\"\n      height=\"1em\"\n      style={{rotate}}\n      viewBox=\"0 0 25 25\"\n      width=\"1em\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {SLICE_COLORS.map((color, index) => (\n        <Slice key={color} index={index} progress={progress} />\n      ))}\n      <path d={OUTLINE} stroke=\"currentColor\" strokeLinejoin=\"round\" strokeWidth={1.2} />\n    </motion.svg>","motion.svg","_c"],"sources":["../src/tool/colorWheel.ts","../src/tool/AnimatedColorWheelIcon.tsx"],"sourcesContent":["import {blue, cyan, green, magenta, orange, purple, red, yellow} from '@sanity/color'\n\n/**\n * The spokes of the color wheel icon (`ColorWheelIcon` from `@sanity/icons`)\n * cut its ring into this many slices, one of them centered on 12 o'clock\n */\nexport const SLICE_COUNT = 8\n\n/**\n * The colors the slices fill with, clockwise from 12 o'clock: the palette's\n * hues in rainbow order, like a real color swatch\n */\nexport const SLICE_COLORS: readonly string[] = [\n  red[500].hex,\n  orange[500].hex,\n  yellow[400].hex,\n  green[500].hex,\n  cyan[500].hex,\n  blue[500].hex,\n  purple[500].hex,\n  magenta[500].hex,\n]\n\n/**\n * The animation plays in acts of this length, in seconds. In the first act\n * the top half of the slices pop in, one at a time like the segments of a\n * classic spinner; in the second the wheel spins up while the bottom half pop\n * in; in the third the colors pop out again as the spin's speed carries over\n * into the clearing.\n */\nconst ACT_DURATION = 0.55\n\n/**\n * The clearing would take a whole act to come to rest, but its last slice\n * pops out as the clearing reaches that slice's leading edge — with nothing\n * left to show, the animation ends there\n */\nconst CLEARING_ACTS = 1 - Math.cbrt(1 / SLICE_COUNT)\n\nconst TOTAL_ACTS = 2 + CLEARING_ACTS\n\n/** How long the whole animation takes, in seconds */\nexport const ANIMATION_DURATION = ACT_DURATION * TOTAL_ACTS\n\nfunction actAt(progress: number): number {\n  return progress * TOTAL_ACTS\n}\n\n/**\n * How far the wheel has turned at `progress` (0–1), in degrees.\n *\n * It stands still while the top half of the slices pop in. As the 6 o'clock\n * slice pops in it starts spinning — one full turn with a cubic ease-in, from\n * rest to top speed as the bottom half pop in — and it stands still again the\n * moment it is back upright: the clearing of {@link isSliceFilled} takes off\n * at the speed the spin reached, as if the wheel kept turning and eased out\n * over a second turn, so the two read as one movement.\n */\nexport function wheelRotation(progress: number): number {\n  const spin = actAt(progress) - 1\n\n  if (spin <= 0 || spin >= 1) return 0\n\n  return 360 * spin ** 3\n}\n\n/**\n * Whether slice `index` (clockwise from 12 o'clock) shows its color at\n * `progress` (0–1). A slice pops in whole as the fill reaches its leading\n * edge, and pops out whole as the clearing does — stepped, never partial.\n *\n * The fill goes clockwise at a steady pace over the first two acts, half of\n * the slices in each. The clearing follows in the third act, the same way\n * round, on a cubic ease-out that starts at the speed the spin of\n * {@link wheelRotation} ends with: the slices at first pop out as quickly as\n * they were passing by, then ever more slowly.\n */\nexport function isSliceFilled(progress: number, index: number): boolean {\n  const act = actAt(progress)\n  const filling = (act * SLICE_COUNT) / 2\n\n  if (filling <= index) return false\n\n  const clearing = act - 2\n\n  if (clearing <= 0) return true\n\n  return (1 - (1 - clearing) ** 3) * SLICE_COUNT < index\n}\n","import {animate, motion, type MotionValue, useMotionValue, useTransform} from 'motion/react'\nimport {useEffect, useImperativeHandle} from 'react'\n\nimport {\n  isSliceFilled,\n  SLICE_COLORS,\n  SLICE_COUNT,\n  wheelRotation,\n  ANIMATION_DURATION,\n} from './colorWheel'\n\n/**\n * The geometry of `ColorWheelIcon` from `@sanity/icons`: a ring between two\n * circles around the center of a 25×25 viewBox, cut into eight slices by the\n * spokes of its outline path\n */\nconst CENTER = 12.5\nconst OUTER_RADIUS = 8\nconst INNER_RADIUS = 3.5\nconst OUTLINE =\n  'M9.43853 5.10896L11.1606 9.26642M13.8394 15.7336L15.5615 19.891M15.7336 11.1606L19.891 9.43853M9.26642 13.8394L5.10896 15.5615M5.3139 9.52342L9.23359 11.147M15.7664 13.853L19.6861 15.4766M13.853 9.23359L15.4766 5.3139M9.52342 19.6861L11.147 15.7664M20.5 12.5C20.5 16.9183 16.9183 20.5 12.5 20.5C8.08172 20.5 4.5 16.9183 4.5 12.5C4.5 8.08172 8.08172 4.5 12.5 4.5C16.9183 4.5 20.5 8.08172 20.5 12.5ZM16 12.5C16 14.433 14.433 16 12.5 16C10.567 16 9 14.433 9 12.5C9 10.567 10.567 9 12.5 9C14.433 9 16 10.567 16 12.5Z'\n\nconst SLICE_ANGLE = 360 / SLICE_COUNT\n\n/** A point on a circle around the center, at `degrees` clockwise from 3 o'clock */\nfunction point(radius: number, degrees: number): string {\n  const radians = (degrees * Math.PI) / 180\n\n  return `${CENTER + radius * Math.cos(radians)} ${CENTER + radius * Math.sin(radians)}`\n}\n\n/**\n * The part of the ring a slice colors in: between its two spokes, from the\n * inner circle out to the outer. The 12 o'clock slice is centered on 12, so\n * it starts half a slice before it.\n */\nfunction slicePath(index: number): string {\n  const start = index * SLICE_ANGLE - SLICE_ANGLE / 2 - 90\n  const end = start + SLICE_ANGLE\n\n  return [\n    `M${point(OUTER_RADIUS, start)}`,\n    `A${OUTER_RADIUS} ${OUTER_RADIUS} 0 0 1 ${point(OUTER_RADIUS, end)}`,\n    `L${point(INNER_RADIUS, end)}`,\n    `A${INNER_RADIUS} ${INNER_RADIUS} 0 0 0 ${point(INNER_RADIUS, start)}`,\n    'Z',\n  ].join('')\n}\n\nconst SLICE_PATHS = SLICE_COLORS.map((_, index) => slicePath(index))\n\n/**\n * A filled shape, not a stroked one: the icon styles of `@sanity/ui` force\n * `vector-effect: non-scaling-stroke` on every path in an icon, which fills\n * are none the wiser about\n */\nfunction Slice(props: {index: number; progress: MotionValue<number>}) {\n  const {index, progress} = props\n  const opacity = useTransform(progress, (value) => (isSliceFilled(value, index) ? 1 : 0))\n\n  return <motion.path d={SLICE_PATHS[index]} fill={SLICE_COLORS[index]} style={{opacity}} />\n}\n\n/**\n * The `ColorWheelIcon` of `@sanity/icons`, with an animation driven by\n * `progress` (0–1): the slices pop in with color one at a time, clockwise\n * from 12 o'clock like the segments of a classic spinner, the wheel spins once\n * as the 6 o'clock slice pops in, and the colors pop out the same way round,\n * carrying the spin's speed to a rest (see `colorWheel.ts`). At rest — at\n * either end — it looks exactly like the icon it stands in for. With\n * `prefers-reduced-motion: reduce` the navbar renders that icon instead of\n * this one, so nothing here moves.\n *\n * @internal\n */\nexport default function AnimatedColorWheelIcon({\n  busy,\n  ref,\n}: {\n  busy: boolean\n  ref: React.Ref<{spin: () => void}>\n}) {\n  const progress = useMotionValue(0)\n  const rotate = useTransform(progress, (value) => wheelRotation(value))\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      spin: () => {\n        // A run in progress plays out — hovering again does not cut it short\n        if (progress.isAnimating()) return\n\n        animate(progress, [0, 1], {duration: ANIMATION_DURATION, ease: 'linear'})\n      },\n    }),\n    [progress],\n  )\n\n  // Laps from wherever a hover's run has got to, so the wheel never jumps,\n  // and the lap in progress as the code arrives plays out: at rest, the wheel\n  // looks like the icon again\n  useEffect(() => {\n    if (!busy) return undefined\n\n    let looping = false\n    const raf = setTimeout(() => {\n      looping = true\n      const lap = (from: number) => {\n        animate(progress, [from, 1], {\n          duration: (1 - from) * ANIMATION_DURATION,\n          ease: 'linear',\n          onComplete: () => {\n            if (looping) lap(0)\n          },\n        })\n      }\n\n      lap(progress.get())\n    }, 160)\n\n    return () => {\n      clearTimeout(raf)\n      looping = false\n    }\n  }, [busy, progress])\n\n  useEffect(() => () => progress.stop(), [progress])\n\n  return (\n    <motion.svg\n      data-sanity-icon=\"color-wheel\"\n      fill=\"none\"\n      height=\"1em\"\n      style={{rotate}}\n      viewBox=\"0 0 25 25\"\n      width=\"1em\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {SLICE_COLORS.map((color, index) => (\n        <Slice key={color} index={index} progress={progress} />\n      ))}\n      <path d={OUTLINE} stroke=\"currentColor\" strokeLinejoin=\"round\" strokeWidth={1.2} />\n    </motion.svg>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"AnimatedColorWheelIcon-CwWOVAsw.js","names":["(value) => (isSliceFilled(value, index) ? 1 : 0)","{opacity}","<motion.path d={SLICE_PATHS[index]} fill={SLICE_COLORS[index]} style={{opacity}} />","SLICE_PATHS[index]","SLICE_COLORS[index]","motion.path","{\n  busy,\n  ref,\n}: {\n  busy: boolean\n  ref: React.Ref<{spin: () => void}>\n}","(value) => wheelRotation(value)","() => ({\n      spin: () => {\n        // A run in progress plays out — hovering again does not cut it short\n        if (progress.isAnimating()) return\n\n        animate(progress, [0, 1], {duration: ANIMATION_DURATION, ease: 'linear'})\n      },\n    })","[progress]","() => {\n    if (!busy) return undefined\n\n    let looping = false\n    const raf = setTimeout(() => {\n      looping = true\n      const lap = (from: number) => {\n        animate(progress, [from, 1], {\n          duration: (1 - from) * ANIMATION_DURATION,\n          ease: 'linear',\n          onComplete: () => {\n            if (looping) lap(0)\n          },\n        })\n      }\n\n      lap(progress.get())\n    }, 160)\n\n    return () => {\n      clearTimeout(raf)\n      looping = false\n    }\n  }","[busy, progress]","() => () => progress.stop()","{rotate}","SLICE_COLORS.map((color, index) => (\n        <Slice key={color} index={index} progress={progress} />\n      ))","<path d={OUTLINE} stroke=\"currentColor\" strokeLinejoin=\"round\" strokeWidth={1.2} />","<motion.svg\n      data-sanity-icon=\"color-wheel\"\n      fill=\"none\"\n      height=\"1em\"\n      style={{rotate}}\n      viewBox=\"0 0 25 25\"\n      width=\"1em\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {SLICE_COLORS.map((color, index) => (\n        <Slice key={color} index={index} progress={progress} />\n      ))}\n      <path d={OUTLINE} stroke=\"currentColor\" strokeLinejoin=\"round\" strokeWidth={1.2} />\n    </motion.svg>","motion.svg","_c"],"sources":["../src/tool/colorWheel.ts","../src/tool/AnimatedColorWheelIcon.tsx"],"sourcesContent":["import {blue, cyan, green, magenta, orange, purple, red, yellow} from '@sanity/color'\n\n/**\n * The spokes of the color wheel icon (`ColorWheelIcon` from `@sanity/icons`)\n * cut its ring into this many slices, one of them centered on 12 o'clock\n */\nexport const SLICE_COUNT = 8\n\n/**\n * The colors the slices fill with, clockwise from 12 o'clock: the palette's\n * hues in rainbow order, like a real color swatch\n */\nexport const SLICE_COLORS: readonly string[] = [\n  red[500].hex,\n  orange[500].hex,\n  yellow[400].hex,\n  green[500].hex,\n  cyan[500].hex,\n  blue[500].hex,\n  purple[500].hex,\n  magenta[500].hex,\n]\n\n/**\n * The animation plays in acts of this length, in seconds. In the first act\n * the top half of the slices pop in, one at a time like the segments of a\n * classic spinner; in the second the wheel spins up while the bottom half pop\n * in; in the third the colors pop out again as the spin's speed carries over\n * into the clearing.\n */\nconst ACT_DURATION = 0.55\n\n/**\n * The clearing would take a whole act to come to rest, but its last slice\n * pops out as the clearing reaches that slice's leading edge — with nothing\n * left to show, the animation ends there\n */\nconst CLEARING_ACTS = 1 - Math.cbrt(1 / SLICE_COUNT)\n\nconst TOTAL_ACTS = 2 + CLEARING_ACTS\n\n/** How long the whole animation takes, in seconds */\nexport const ANIMATION_DURATION = ACT_DURATION * TOTAL_ACTS\n\nfunction actAt(progress: number): number {\n  return progress * TOTAL_ACTS\n}\n\n/**\n * How far the wheel has turned at `progress` (0–1), in degrees.\n *\n * It stands still while the top half of the slices pop in. As the 6 o'clock\n * slice pops in it starts spinning — one full turn with a cubic ease-in, from\n * rest to top speed as the bottom half pop in — and it stands still again the\n * moment it is back upright: the clearing of {@link isSliceFilled} takes off\n * at the speed the spin reached, as if the wheel kept turning and eased out\n * over a second turn, so the two read as one movement.\n */\nexport function wheelRotation(progress: number): number {\n  const spin = actAt(progress) - 1\n\n  if (spin <= 0 || spin >= 1) return 0\n\n  return 360 * spin ** 3\n}\n\n/**\n * Whether slice `index` (clockwise from 12 o'clock) shows its color at\n * `progress` (0–1). A slice pops in whole as the fill reaches its leading\n * edge, and pops out whole as the clearing does — stepped, never partial.\n *\n * The fill goes clockwise at a steady pace over the first two acts, half of\n * the slices in each. The clearing follows in the third act, the same way\n * round, on a cubic ease-out that starts at the speed the spin of\n * {@link wheelRotation} ends with: the slices at first pop out as quickly as\n * they were passing by, then ever more slowly.\n */\nexport function isSliceFilled(progress: number, index: number): boolean {\n  const act = actAt(progress)\n  const filling = (act * SLICE_COUNT) / 2\n\n  if (filling <= index) return false\n\n  const clearing = act - 2\n\n  if (clearing <= 0) return true\n\n  return (1 - (1 - clearing) ** 3) * SLICE_COUNT < index\n}\n","import {animate, motion, type MotionValue, useMotionValue, useTransform} from 'motion/react'\nimport {useEffect, useImperativeHandle} from 'react'\n\nimport {\n  isSliceFilled,\n  SLICE_COLORS,\n  SLICE_COUNT,\n  wheelRotation,\n  ANIMATION_DURATION,\n} from './colorWheel'\n\n/**\n * The geometry of `ColorWheelIcon` from `@sanity/icons`: a ring between two\n * circles around the center of a 25×25 viewBox, cut into eight slices by the\n * spokes of its outline path\n */\nconst CENTER = 12.5\nconst OUTER_RADIUS = 8\nconst INNER_RADIUS = 3.5\nconst OUTLINE =\n  'M9.43853 5.10896L11.1606 9.26642M13.8394 15.7336L15.5615 19.891M15.7336 11.1606L19.891 9.43853M9.26642 13.8394L5.10896 15.5615M5.3139 9.52342L9.23359 11.147M15.7664 13.853L19.6861 15.4766M13.853 9.23359L15.4766 5.3139M9.52342 19.6861L11.147 15.7664M20.5 12.5C20.5 16.9183 16.9183 20.5 12.5 20.5C8.08172 20.5 4.5 16.9183 4.5 12.5C4.5 8.08172 8.08172 4.5 12.5 4.5C16.9183 4.5 20.5 8.08172 20.5 12.5ZM16 12.5C16 14.433 14.433 16 12.5 16C10.567 16 9 14.433 9 12.5C9 10.567 10.567 9 12.5 9C14.433 9 16 10.567 16 12.5Z'\n\nconst SLICE_ANGLE = 360 / SLICE_COUNT\n\n/** A point on a circle around the center, at `degrees` clockwise from 3 o'clock */\nfunction point(radius: number, degrees: number): string {\n  const radians = (degrees * Math.PI) / 180\n\n  return `${CENTER + radius * Math.cos(radians)} ${CENTER + radius * Math.sin(radians)}`\n}\n\n/**\n * The part of the ring a slice colors in: between its two spokes, from the\n * inner circle out to the outer. The 12 o'clock slice is centered on 12, so\n * it starts half a slice before it.\n */\nfunction slicePath(index: number): string {\n  const start = index * SLICE_ANGLE - SLICE_ANGLE / 2 - 90\n  const end = start + SLICE_ANGLE\n\n  return [\n    `M${point(OUTER_RADIUS, start)}`,\n    `A${OUTER_RADIUS} ${OUTER_RADIUS} 0 0 1 ${point(OUTER_RADIUS, end)}`,\n    `L${point(INNER_RADIUS, end)}`,\n    `A${INNER_RADIUS} ${INNER_RADIUS} 0 0 0 ${point(INNER_RADIUS, start)}`,\n    'Z',\n  ].join('')\n}\n\nconst SLICE_PATHS = SLICE_COLORS.map((_, index) => slicePath(index))\n\n/**\n * A filled shape, not a stroked one: the icon styles of `@sanity/ui` force\n * `vector-effect: non-scaling-stroke` on every path in an icon, which fills\n * are none the wiser about\n */\nfunction Slice(props: {index: number; progress: MotionValue<number>}) {\n  const {index, progress} = props\n  const opacity = useTransform(progress, (value) => (isSliceFilled(value, index) ? 1 : 0))\n\n  return <motion.path d={SLICE_PATHS[index]} fill={SLICE_COLORS[index]} style={{opacity}} />\n}\n\n/**\n * The `ColorWheelIcon` of `@sanity/icons`, with an animation driven by\n * `progress` (0–1): the slices pop in with color one at a time, clockwise\n * from 12 o'clock like the segments of a classic spinner, the wheel spins once\n * as the 6 o'clock slice pops in, and the colors pop out the same way round,\n * carrying the spin's speed to a rest (see `colorWheel.ts`). At rest — at\n * either end — it looks exactly like the icon it stands in for. With\n * `prefers-reduced-motion: reduce` the navbar renders that icon instead of\n * this one, so nothing here moves.\n *\n * @internal\n */\nexport default function AnimatedColorWheelIcon({\n  busy,\n  ref,\n}: {\n  busy: boolean\n  ref: React.Ref<{spin: () => void}>\n}) {\n  const progress = useMotionValue(0)\n  const rotate = useTransform(progress, (value) => wheelRotation(value))\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      spin: () => {\n        // A run in progress plays out — hovering again does not cut it short\n        if (progress.isAnimating()) return\n\n        animate(progress, [0, 1], {duration: ANIMATION_DURATION, ease: 'linear'})\n      },\n    }),\n    [progress],\n  )\n\n  // Laps from wherever a hover's run has got to, so the wheel never jumps,\n  // and the lap in progress as the code arrives plays out: at rest, the wheel\n  // looks like the icon again\n  useEffect(() => {\n    if (!busy) return undefined\n\n    let looping = false\n    const raf = setTimeout(() => {\n      looping = true\n      const lap = (from: number) => {\n        animate(progress, [from, 1], {\n          duration: (1 - from) * ANIMATION_DURATION,\n          ease: 'linear',\n          onComplete: () => {\n            if (looping) lap(0)\n          },\n        })\n      }\n\n      lap(progress.get())\n    }, 160)\n\n    return () => {\n      clearTimeout(raf)\n      looping = false\n    }\n  }, [busy, progress])\n\n  useEffect(() => () => progress.stop(), [progress])\n\n  return (\n    <motion.svg\n      data-sanity-icon=\"color-wheel\"\n      fill=\"none\"\n      height=\"1em\"\n      style={{rotate}}\n      viewBox=\"0 0 25 25\"\n      width=\"1em\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {SLICE_COLORS.map((color, index) => (\n        <Slice key={color} index={index} progress={progress} />\n      ))}\n      <path d={OUTLINE} stroke=\"currentColor\" strokeLinejoin=\"round\" strokeWidth={1.2} />\n    </motion.svg>\n  )\n}\n"],"mappings":"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"}

package/dist/{ResizableSidebar-B5Px5VCf.js → ResizableSidebar-Qo2gLzlm.js}

@@ -1,5 +1,5 @@
 import { a as DEFAULT_BACKGROUND, c as resolveThemeOptions, d as hslToHex, f as relativeLuminance, i as DEFAULT_ACCENT, l as isColor, n as buildTheme, o as SCHEMES, r as buildPalette, s as deriveTextColor, u as hexToHsl } from "./presets-CqBgS3A-.js";
-import { a as displayTitle, c as resolveThemes, l as addThemerTransitionType, n as CONFIG_TITLE, t as CONFIG_SLUG } from "./themes-sELelb-j.js";
+import { a as displayTitle, c as resolveThemes, l as addThemerTransitionType, n as CONFIG_TITLE, t as CONFIG_SLUG } from "./themes-C_-85qf1.js";
 import { c } from "react/compiler-runtime";
 import { useColorSchemeValue } from "sanity";
 import { Badge, BoundaryElementProvider, Box, Button, Card, Dialog, Flex, Layer, Stack, Text, TextInput, ThemeProvider, useMediaIndex, useRootTheme, useTheme_v2 } from "@sanity/ui";
@@ -33,7 +33,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import { Code } from "@sanity/ui/code";
 import { registerLanguage } from "react-refractor";
 import typescript from "refractor/typescript";
-var root$2 = "_1e4mp8t0";
+var root$2 = "_12pbjan0";
 const ScrollAreaInsetContext = createContext({
 	left: 0,
 	right: 0,
@@ -115,24 +115,24 @@ function ScrollAreaBleed(props) {
 		children: props.children
 	}), $[4] = props.children, $[5] = t3, $[6] = t4) : t4 = $[6], t4;
 }
-var avatar = "_1lkz59ph", body = "_1lkz59pi", button = "_1lkz59pq", colors = {
-	bg: "var(--_1lkz59p0)",
-	fg: "var(--_1lkz59p1)",
-	mutedFg: "var(--_1lkz59p2)",
-	border: "var(--_1lkz59p3)",
-	accent: "var(--_1lkz59p4)",
-	avatar: "var(--_1lkz59p5)",
-	selectedBg: "var(--_1lkz59p6)",
-	selectedFg: "var(--_1lkz59p7)",
-	inputBg: "var(--_1lkz59p8)",
-	inputBorder: "var(--_1lkz59p9)"
-}, field = "_1lkz59pn", footer = "_1lkz59pp", form = "_1lkz59pm", input = "_1lkz59po", line = {
-	fg: "_1lkz59ps _1lkz59pr",
-	muted: "_1lkz59pt _1lkz59pr",
-	selected: "_1lkz59pu _1lkz59pr"
-}, list = "_1lkz59pj", listRow = "_1lkz59pk", logo = "_1lkz59pf", navbar = "_1lkz59pe", pane = "_1lkz59pl", root$1 = "_1lkz59pa", spacer = "_1lkz59pg", studio = {
-	light: "_1lkz59pb",
-	dark: "_1lkz59pd _1lkz59pb"
+var avatar = "_125jg1hh", body = "_125jg1hi", button = "_125jg1hq", colors = {
+	bg: "var(--_125jg1h0)",
+	fg: "var(--_125jg1h1)",
+	mutedFg: "var(--_125jg1h2)",
+	border: "var(--_125jg1h3)",
+	accent: "var(--_125jg1h4)",
+	avatar: "var(--_125jg1h5)",
+	selectedBg: "var(--_125jg1h6)",
+	selectedFg: "var(--_125jg1h7)",
+	inputBg: "var(--_125jg1h8)",
+	inputBorder: "var(--_125jg1h9)"
+}, field = "_125jg1hn", footer = "_125jg1hp", form = "_125jg1hm", input = "_125jg1ho", line = {
+	fg: "_125jg1hs _125jg1hr",
+	muted: "_125jg1ht _125jg1hr",
+	selected: "_125jg1hu _125jg1hr"
+}, list = "_125jg1hj", listRow = "_125jg1hk", logo = "_125jg1hf", navbar = "_125jg1he", pane = "_125jg1hl", root$1 = "_125jg1ha", spacer = "_125jg1hg", studio = {
+	light: "_125jg1hb",
+	dark: "_125jg1hd _125jg1hb"
 };
 /** The document rows in the list pane — the widths of their title lines */
 const LIST_ROWS = [
@@ -275,7 +275,7 @@ function ThemeThumbnail(props) {
 		children: /* @__PURE__ */ jsx(ThemePreview, { options: props.options })
 	}), $[0] = props.options, $[1] = t0), t0;
 }
-var removedThumbnail = "_17dsl9w0";
+var removedThumbnail = "_14ebtty0";
 /**
 * The flow for restoring removed themes: the presets and custom themes the
 * user took out of the list, each with a button to put it back — and, for
@@ -805,7 +805,7 @@ function useImagePalette(onPalette) {
 function _temp$6(swatch) {
 	return swatch === null;
 }
-var paletteGrid = "xuno562", tile = "xuno564", variantButton = "xuno566", variantFrame = "xuno567", variantRow = "xuno565", variantScale = "var(--xuno561)", variantScaleBox = "xuno568", variantWidth = "var(--xuno560)";
+var paletteGrid = "_2cqxof2", tile = "_2cqxof4", variantButton = "_2cqxof6", variantFrame = "_2cqxof7", variantRow = "_2cqxof5", variantScale = "var(--_2cqxof1)", variantScaleBox = "_2cqxof8", variantWidth = "var(--_2cqxof0)";
 /** The swatches on display: the vibrant family over the muted one */
 const TILES = [
 	"vibrant",
@@ -897,7 +897,7 @@ function ImagePaletteSection(props) {
 			"data-with-image": imageUrl !== void 0,
 			children: [imageUrl && /* @__PURE__ */ jsx("img", {
 				alt: "",
-				className: "xuno563",
+				className: "_2cqxof3",
 				src: imageUrl
 			}), TILES.map((key) => {
 				let hex = palette[key], title = IMAGE_PALETTE_TITLES[key];
@@ -1004,7 +1004,7 @@ function ImagePaletteSection(props) {
 function _temp$5(event_0) {
 	event_0.preventDefault();
 }
-var colorRowText = "_458rep2", range = "_458rep1", swatch = "_458rep0";
+var colorRowText = "_1dxffns2", range = "_1dxffns1", swatch = "_1dxffns0";
 const SCHEME_TITLES = {
 	dark: "Dark mode",
 	light: "Light mode"
@@ -1719,7 +1719,7 @@ function PasteThemeDialog(props) {
 		children: t15
 	}), $[34] = id, $[35] = onClose, $[36] = t15, $[37] = t6, $[38] = t16) : t16 = $[38], t16;
 }
-var frame$1 = "_4rpwsi2", menuCard = "_4rpwsi4", menuSlot = "_4rpwsi3", pickButton = "_4rpwsi1", root = "_4rpwsi0";
+var frame$1 = "_1fljyi72", menuCard = "_1fljyi74", menuSlot = "_1fljyi73", pickButton = "_1fljyi71", root = "_1fljyi70";
 /**
 * Scrolls the applied theme's card into view when it is not already, as a
 * ref: the list scrolls to it as it mounts — coming back from the editor or
@@ -2072,7 +2072,7 @@ function ThemeSnippetDialog(props) {
 		children: t9
 	}), $[19] = id, $[20] = onClose, $[21] = t2, $[22] = t9, $[23] = t10) : t10 = $[23], t10;
 }
-var cardGrid = "_1vaxx8n0";
+var cardGrid = "gm65l50";
 /**
 * The flow for picking a theme: a grid of theme cards — the configured theme,
 * the presets and the user's own themes — that drag into the order the user
@@ -2275,7 +2275,7 @@ function selectDialog(snapshot) {
 function useIsTooSmallForSplitScreen() {
 	return useMediaIndex() <= 3;
 }
-var title = "_13zq9j0";
+var title = "e2uyq60";
 const VIEW_TITLES = {
 	list: "Themer",
 	edit: "Edit theme",
@@ -2407,7 +2407,7 @@ function selectView(snapshot) {
 function sameView(a, b) {
 	return a.name === b.name ? a.name !== "edit" || b.name !== "edit" || a.slug === b.slug && a.focusTitle === b.focusTitle : !1;
 }
-var content = "nzsfns3", frame = "nzsfns2", resizeHandle = "nzsfns4", sidebar = "nzsfns1";
+var content = "_1uwpnld3", frame = "_1uwpnld2", resizeHandle = "_1uwpnld4", sidebar = "_1uwpnld1";
 /** How far one arrow key press resizes the sidebar */
 const WIDTH_STORAGE_KEY = "sanityStudio:themer:width";
 function clampWidth(width) {
@@ -2523,4 +2523,4 @@ function ResizableSidebar(t0) {
 function _temp() {}
 export { ResizableSidebar as default };
 
-//# sourceMappingURL=ResizableSidebar-B5Px5VCf.js.map
+//# sourceMappingURL=ResizableSidebar-Qo2gLzlm.js.map