@sanity/themer 0.6.1 → 0.7.0

package/README.md

@@ -53,7 +53,7 @@ const theme = buildTheme(verdant.options)
 
 ## Studio tool
 
-`@sanity/themer/tool` adds a themer sidebar to the Studio for these themes. It lists the configured theme, the presets and your own themes, each previewed as a tiny Studio in both color schemes, and picking one applies it live to the whole Studio while you browse around — in the appearance the Studio is set to or, with the split-screen toggle in the sidebar header, twice: the Studio next to the sidebar keeps the appearance it is set to, and a copy in the opposite scheme slides in from off screen on the far side (or on top, on small screens, where the sidebar covers the Studio instead of standing next to it), through React's `ViewTransition` — which is why the tool requires React 19.3. The cards drag into any order (or move from their menu), which sticks between sessions. Your own themes are edited scheme by scheme — a light mode and a dark mode card with accent/text/background pickers and a contrast slider each, the one the Studio is showing marked as active — add one from scratch, duplicate a preset to start from it, or take the colors from an image: its palette is read on device (the image is drawn onto a canvas and its vibrant and muted colors extracted right there, nothing is uploaded), the vibrant color becomes the accent (adjusted until a button label reads on it), the muted one the text color and the light and dark muted colors tint the backgrounds, and a row of variants previews the theme built around each swatch instead — with an "I'm feeling lucky" button that picks an interesting one. Themes can be removed and restored, and a dialog shows the `buildTheme` snippet that makes the applied theme permanent:
+`@sanity/themer/tool` adds a themer sidebar to the Studio for these themes. It lists the configured theme, the presets and your own themes, each previewed as a tiny Studio in both color schemes, and picking one applies it live to the whole Studio while you browse around — in the appearance the Studio is set to or, with the split-screen toggle in the sidebar header, twice: the Studio next to the sidebar keeps the appearance it is set to, and a copy in the opposite scheme slides in from off screen on the far side (or on top, on small screens, where the sidebar covers the Studio instead of standing next to it), through React's `ViewTransition` — which is why the tool requires React 19.3. The cards drag into any order (or move from their menu), which sticks between sessions, and a theme's menu copies it as a short code to share — paste a code into the list, or add it through the paste button, to get the theme in another Studio. Your own themes are edited scheme by scheme — a light mode and a dark mode card with accent/text/background pickers and a contrast slider each, the one the Studio is showing marked as active — add one from scratch, duplicate a preset to start from it, or take the colors from an image: its palette is read on device (the image is drawn onto a canvas and its vibrant and muted colors extracted right there, nothing is uploaded), the vibrant color becomes the accent (adjusted until a button label reads on it), the muted one the text color and the light and dark muted colors tint the backgrounds, and a row of variants previews the theme built around each swatch instead — with an "I'm feeling lucky" button that picks an interesting one. Themes can be removed and restored, and a dialog shows the `buildTheme` snippet that makes the applied theme permanent:
 
 ```ts
 import {themerTool} from '@sanity/themer/tool'

package/dist/bundle.css

@@ -1 +1 @@
-._1o50s7t0{scrollbar-gutter:stable}._1aa9huua{aspect-ratio:16/9;position:relative;overflow:hidden}._1aa9huub{background:var(--_1aa9huu0);flex-direction:column;display:flex;position:absolute;inset:0}._1aa9huud{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}._1aa9huue{border-bottom:1px solid var(--_1aa9huu3);flex:none;align-items:center;gap:5px;height:18%;padding:0 5%;display:flex}._1aa9huuf{background:var(--_1aa9huu4);border-radius:2px;flex:none;width:8px;height:8px}._1aa9huug{flex:1}._1aa9huuh{background:var(--_1aa9huu5);border-radius:50%;flex:none;width:8px;height:8px}._1aa9huui{flex:1;min-height:0;display:flex}._1aa9huuj{border-right:1px solid var(--_1aa9huu3);flex-direction:column;flex:none;width:36%;display:flex}._1aa9huuk{flex:none;align-items:center;height:18%;padding:0 9%;display:flex}._1aa9huuk[data-selected=true]{background:var(--_1aa9huu6)}._1aa9huul{flex-direction:column;flex:1;min-width:0;display:flex}._1aa9huum{flex-direction:column;flex:1;gap:7px;min-height:0;padding:9% 8% 0;display:flex;overflow:hidden}._1aa9huun{flex-direction:column;flex:none;gap:3px;display:flex}._1aa9huuo{background:var(--_1aa9huu8);height:12px;box-shadow:inset 0 0 0 1px var(--_1aa9huu9);border-radius:3px}._1aa9huup{border-top:1px solid var(--_1aa9huu3);flex:none;justify-content:flex-end;align-items:center;height:20%;padding:0 8%;display:flex}._1aa9huuq{background:var(--_1aa9huu4);border-radius:3px;width:32%;height:50%}._1aa9huur{border-radius:2px;flex:none;height:4px}._1aa9huus{background:var(--_1aa9huu1)}._1aa9huut{background:var(--_1aa9huu2)}._1aa9huuu{background:var(--_1aa9huu7)}._1vdkp0v0{opacity:.6}._17s80v42{grid-template-columns:repeat(3,24px);grid-auto-rows:24px;gap:4px;display:grid}._17s80v42[data-with-image=true]{grid-template-columns:52px repeat(3,24px)}._17s80v43{object-fit:cover;width:52px;height:52px;box-shadow:inset 0 0 0 1px var(--card-border-color);border-radius:3px;grid-row:span 2;display:block}._17s80v44{box-shadow:inset 0 0 0 1px var(--card-border-color);border-radius:3px;display:block}._17s80v44[data-empty=true]{background:repeating-linear-gradient(-45deg, transparent 0 3px, var(--card-border-color) 3px 4px)}._17s80v45{scroll-snap-type:x mandatory;scrollbar-width:thin;gap:8px;margin:0 -12px;padding:0 12px;scroll-padding-left:12px;display:flex;overflow-x:auto}._17s80v46{appearance:none;box-sizing:border-box;width:calc(var(--_17s80v40) + 8px);color:inherit;font:inherit;text-align:center;cursor:pointer;scroll-snap-align:start;background:0 0;border:0;flex:none;margin:0;padding:0;display:block}._17s80v46:focus{outline:none}._17s80v47{box-sizing:border-box;width:calc(var(--_17s80v40) + 8px);height:calc(var(--_17s80v40) * 9 / 16 + 8px);border-radius:7px;padding:4px;transition:box-shadow .1s;display:block;overflow:hidden}._17s80v46:hover ._17s80v47{box-shadow:inset 0 0 0 2px var(--card-border-color)}._17s80v46[aria-pressed=true] ._17s80v47{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color)}._17s80v46:focus-visible ._17s80v47{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px}._17s80v48{width:144px;transform:scale(var(--_17s80v41));transform-origin:0 0;display:block}.os3rj0{box-sizing:border-box;border:1px solid var(--card-border-color);cursor:pointer;background:0 0;border-radius:4px;flex:none;width:33px;height:33px;padding:0}.os3rj0::-webkit-color-swatch-wrapper{padding:0}.os3rj0::-webkit-color-swatch{border:none;border-radius:3px}.os3rj0::-moz-color-swatch{border:none;border-radius:3px}.os3rj1{width:100%;accent-color:var(--card-focus-ring-color);margin:0;display:block}.os3rj2{min-width:0}._1wsn7880{position:relative}._1wsn7881{appearance:none;box-sizing:border-box;width:100%;color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:block}._1wsn7881:focus{outline:none}._1wsn7882{border-radius:10px;padding:4px;transition:box-shadow .1s;display:block}._1wsn7881:hover ._1wsn7882{box-shadow:inset 0 0 0 2px var(--card-border-color)}._1wsn7881[aria-pressed=true] ._1wsn7882{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color)}._1wsn7881:focus-visible ._1wsn7882{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px}._1wsn7883{opacity:0;transition:opacity .1s;position:absolute;top:10px;right:10px}._1wsn7880:hover ._1wsn7883,._1wsn7880:focus-within ._1wsn7883,._1wsn7883[data-visible=true]{opacity:1}._1wsn7884{display:inline-block}.bgn4np2{view-transition-name:bgn4np0;flex:none}.bgn4np2[data-overlay=true]{width:auto;position:absolute;inset:0}.bgn4np3{position:relative}.bgn4np4{container:bgn4np1/inline-size}.bgn4np5{z-index:1;cursor:col-resize;touch-action:none;width:7px;position:absolute;top:0;bottom:0;left:-3px}.bgn4np5:after{content:"";background:var(--card-focus-ring-color);opacity:0;width:3px;transition:opacity .1s;position:absolute;top:0;bottom:0;left:2px}.bgn4np5:focus{outline:none}.bgn4np5:hover:after,.bgn4np5:focus-visible:after,.bgn4np5[data-dragging=true]:after{opacity:1}.twjqgh0{grid-template-columns:1fr;gap:16px;display:grid}@container bgn4np1 (width>=260px){.twjqgh0{grid-template-columns:repeat(2,1fr)}}@container bgn4np1 (width>=480px){.twjqgh0{grid-template-columns:repeat(3,1fr)}}.c2pqej0{min-width:0}@keyframes _1yq4ar7c{0%{transform:translate(-100%)}}@keyframes _1yq4ar7d{to{transform:translate(-100%)}}@keyframes _1yq4ar7e{0%{transform:translateY(-100%)}}@keyframes _1yq4ar7f{to{transform:translateY(-100%)}}@keyframes _1yq4ar7g{0%{transform:translate(100%)}}@keyframes _1yq4ar7h{to{transform:translate(100%)}}._1yq4ar79{position:relative}._1yq4ar7a{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}._1yq4ar7b{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}::view-transition-group(._1yq4ar72){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar72){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar72){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar73){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar74){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar75){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar76){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar77){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar78){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar72){object-fit:fill;block-size:100%;inline-size:100%}::view-transition-new(._1yq4ar72){object-fit:fill;block-size:100%;inline-size:100%}::view-transition-new(._1yq4ar73){animation-name:_1yq4ar7c}::view-transition-old(._1yq4ar74){animation-name:_1yq4ar7d}::view-transition-new(._1yq4ar75){animation-name:_1yq4ar7e}::view-transition-old(._1yq4ar76){animation-name:_1yq4ar7f}::view-transition-new(._1yq4ar77){animation-name:_1yq4ar7g}::view-transition-old(._1yq4ar78){animation-name:_1yq4ar7h}::view-transition-group(bgn4np0){z-index:1}::view-transition-group(bgn4np0){animation:none}::view-transition-image-pair(bgn4np0){animation:none}::view-transition-old(bgn4np0){animation:none}::view-transition-new(bgn4np0){animation:none}@media (prefers-reduced-motion:reduce){::view-transition-group(._1yq4ar72){animation:none}::view-transition-old(._1yq4ar72){animation:none}::view-transition-new(._1yq4ar72){animation:none}::view-transition-new(._1yq4ar73){animation:none}::view-transition-old(._1yq4ar74){animation:none}::view-transition-new(._1yq4ar75){animation:none}::view-transition-old(._1yq4ar76){animation:none}::view-transition-new(._1yq4ar77){animation:none}::view-transition-old(._1yq4ar78){animation:none}:root:active-view-transition-type(_1yq4ar70)::view-transition-group(*){animation:none}:root:active-view-transition-type(_1yq4ar70)::view-transition-image-pair(*){animation:none}:root:active-view-transition-type(_1yq4ar70)::view-transition-old(*){animation:none}:root:active-view-transition-type(_1yq4ar70)::view-transition-new(*){animation:none}:root:active-view-transition-type(_1yq4ar71)::view-transition-group(*){animation:none}:root:active-view-transition-type(_1yq4ar71)::view-transition-image-pair(*){animation:none}:root:active-view-transition-type(_1yq4ar71)::view-transition-old(*){animation:none}:root:active-view-transition-type(_1yq4ar71)::view-transition-new(*){animation:none}}
+._1o50s7t0{scrollbar-gutter:stable}._1aa9huua{aspect-ratio:16/9;position:relative;overflow:hidden}._1aa9huub{background:var(--_1aa9huu0);flex-direction:column;display:flex;position:absolute;inset:0}._1aa9huud{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}._1aa9huue{border-bottom:1px solid var(--_1aa9huu3);flex:none;align-items:center;gap:5px;height:18%;padding:0 5%;display:flex}._1aa9huuf{background:var(--_1aa9huu4);border-radius:2px;flex:none;width:8px;height:8px}._1aa9huug{flex:1}._1aa9huuh{background:var(--_1aa9huu5);border-radius:50%;flex:none;width:8px;height:8px}._1aa9huui{flex:1;min-height:0;display:flex}._1aa9huuj{border-right:1px solid var(--_1aa9huu3);flex-direction:column;flex:none;width:36%;display:flex}._1aa9huuk{flex:none;align-items:center;height:18%;padding:0 9%;display:flex}._1aa9huuk[data-selected=true]{background:var(--_1aa9huu6)}._1aa9huul{flex-direction:column;flex:1;min-width:0;display:flex}._1aa9huum{flex-direction:column;flex:1;gap:7px;min-height:0;padding:9% 8% 0;display:flex;overflow:hidden}._1aa9huun{flex-direction:column;flex:none;gap:3px;display:flex}._1aa9huuo{background:var(--_1aa9huu8);height:12px;box-shadow:inset 0 0 0 1px var(--_1aa9huu9);border-radius:3px}._1aa9huup{border-top:1px solid var(--_1aa9huu3);flex:none;justify-content:flex-end;align-items:center;height:20%;padding:0 8%;display:flex}._1aa9huuq{background:var(--_1aa9huu4);border-radius:3px;width:32%;height:50%}._1aa9huur{border-radius:2px;flex:none;height:4px}._1aa9huus{background:var(--_1aa9huu1)}._1aa9huut{background:var(--_1aa9huu2)}._1aa9huuu{background:var(--_1aa9huu7)}._1vdkp0v0{opacity:.6}._17s80v42{grid-template-columns:repeat(3,24px);grid-auto-rows:24px;gap:4px;display:grid}._17s80v42[data-with-image=true]{grid-template-columns:52px repeat(3,24px)}._17s80v43{object-fit:cover;width:52px;height:52px;box-shadow:inset 0 0 0 1px var(--card-border-color);border-radius:3px;grid-row:span 2;display:block}._17s80v44{box-shadow:inset 0 0 0 1px var(--card-border-color);border-radius:3px;display:block}._17s80v44[data-empty=true]{background:repeating-linear-gradient(-45deg, transparent 0 3px, var(--card-border-color) 3px 4px)}._17s80v45{scroll-snap-type:x mandatory;scrollbar-width:thin;gap:8px;margin:0 -12px;padding:0 12px;scroll-padding-left:12px;display:flex;overflow-x:auto}._17s80v46{appearance:none;box-sizing:border-box;width:calc(var(--_17s80v40) + 8px);color:inherit;font:inherit;text-align:center;cursor:pointer;scroll-snap-align:start;background:0 0;border:0;flex:none;margin:0;padding:0;display:block}._17s80v46:focus{outline:none}._17s80v47{box-sizing:border-box;width:calc(var(--_17s80v40) + 8px);height:calc(var(--_17s80v40) * 9 / 16 + 8px);border-radius:7px;padding:4px;transition:box-shadow .1s;display:block;overflow:hidden}._17s80v46:hover ._17s80v47{box-shadow:inset 0 0 0 2px var(--card-border-color)}._17s80v46[aria-pressed=true] ._17s80v47{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color)}._17s80v46:focus-visible ._17s80v47{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px}._17s80v48{width:144px;transform:scale(var(--_17s80v41));transform-origin:0 0;display:block}.os3rj0{box-sizing:border-box;border:1px solid var(--card-border-color);cursor:pointer;background:0 0;border-radius:4px;flex:none;width:33px;height:33px;padding:0}.os3rj0::-webkit-color-swatch-wrapper{padding:0}.os3rj0::-webkit-color-swatch{border:none;border-radius:3px}.os3rj0::-moz-color-swatch{border:none;border-radius:3px}.os3rj1{width:100%;accent-color:var(--card-focus-ring-color);margin:0;display:block}.os3rj2{min-width:0}._1wsn7880{position:relative}._1wsn7881{appearance:none;box-sizing:border-box;width:100%;color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:block}._1wsn7881:focus{outline:none}._1wsn7882{border-radius:10px;padding:4px;transition:box-shadow .1s;display:block}._1wsn7881:hover ._1wsn7882{box-shadow:inset 0 0 0 2px var(--card-border-color)}._1wsn7881[aria-pressed=true] ._1wsn7882{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color)}._1wsn7881:focus-visible ._1wsn7882{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px}._1wsn7883{opacity:0;transition:opacity .1s;position:absolute;top:10px;right:10px}._1wsn7880:hover ._1wsn7883,._1wsn7880:focus-within ._1wsn7883,._1wsn7883[data-visible=true]{opacity:1}._1wsn7884{display:inline-block}.bgn4np2{view-transition-name:bgn4np0;flex:none}.bgn4np2[data-overlay=true]{width:auto;position:absolute;inset:0}.bgn4np3{position:relative}.bgn4np4{container:bgn4np1/inline-size}.bgn4np5{z-index:1;cursor:col-resize;touch-action:none;width:7px;position:absolute;top:0;bottom:0;left:-3px}.bgn4np5:after{content:"";background:var(--card-focus-ring-color);opacity:0;width:3px;transition:opacity .1s;position:absolute;top:0;bottom:0;left:2px}.bgn4np5:focus{outline:none}.bgn4np5:hover:after,.bgn4np5:focus-visible:after,.bgn4np5[data-dragging=true]:after{opacity:1}.twjqgh0{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}@container bgn4np1 (width>=260px){.twjqgh0{grid-template-columns:repeat(2,minmax(0,1fr))}}@container bgn4np1 (width>=480px){.twjqgh0{grid-template-columns:repeat(3,minmax(0,1fr))}}.c2pqej0{min-width:0}@keyframes _1yq4ar7b{0%{transform:translate(-100%)}}@keyframes _1yq4ar7c{to{transform:translate(-100%)}}@keyframes _1yq4ar7d{0%{transform:translateY(-100%)}}@keyframes _1yq4ar7e{to{transform:translateY(-100%)}}@keyframes _1yq4ar7f{0%{transform:translate(100%)}}@keyframes _1yq4ar7g{to{transform:translate(100%)}}._1yq4ar78{position:relative}._1yq4ar79{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}._1yq4ar7a{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}::view-transition-group(._1yq4ar70){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar70){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar70){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar72){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar73){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar74){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar75){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar76){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar77){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar71){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-new(._1yq4ar71){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}::view-transition-old(._1yq4ar70){object-fit:fill;block-size:100%;inline-size:100%}::view-transition-new(._1yq4ar70){object-fit:fill;block-size:100%;inline-size:100%}::view-transition-new(._1yq4ar72){animation-name:_1yq4ar7b}::view-transition-old(._1yq4ar73){animation-name:_1yq4ar7c}::view-transition-new(._1yq4ar74){animation-name:_1yq4ar7d}::view-transition-old(._1yq4ar75){animation-name:_1yq4ar7e}::view-transition-new(._1yq4ar76){animation-name:_1yq4ar7f}::view-transition-old(._1yq4ar77){animation-name:_1yq4ar7g}::view-transition-group(bgn4np0){z-index:1}::view-transition-group(bgn4np0){animation:none}::view-transition-image-pair(bgn4np0){animation:none}::view-transition-old(bgn4np0){animation:none}::view-transition-new(bgn4np0){animation:none}@media (prefers-reduced-motion:reduce){::view-transition-group(._1yq4ar70){animation:none}::view-transition-group(._1yq4ar71){animation:none}::view-transition-group(._1yq4ar72){animation:none}::view-transition-group(._1yq4ar73){animation:none}::view-transition-group(._1yq4ar74){animation:none}::view-transition-group(._1yq4ar75){animation:none}::view-transition-group(._1yq4ar76){animation:none}::view-transition-group(._1yq4ar77){animation:none}::view-transition-group(bgn4np0){animation:none}::view-transition-image-pair(._1yq4ar70){animation:none}::view-transition-image-pair(._1yq4ar71){animation:none}::view-transition-image-pair(._1yq4ar72){animation:none}::view-transition-image-pair(._1yq4ar73){animation:none}::view-transition-image-pair(._1yq4ar74){animation:none}::view-transition-image-pair(._1yq4ar75){animation:none}::view-transition-image-pair(._1yq4ar76){animation:none}::view-transition-image-pair(._1yq4ar77){animation:none}::view-transition-image-pair(bgn4np0){animation:none}::view-transition-old(._1yq4ar70){animation:none}::view-transition-old(._1yq4ar71){animation:none}::view-transition-old(._1yq4ar72){animation:none}::view-transition-old(._1yq4ar73){animation:none}::view-transition-old(._1yq4ar74){animation:none}::view-transition-old(._1yq4ar75){animation:none}::view-transition-old(._1yq4ar76){animation:none}::view-transition-old(._1yq4ar77){animation:none}::view-transition-old(bgn4np0){animation:none}::view-transition-new(._1yq4ar70){animation:none}::view-transition-new(._1yq4ar71){animation:none}::view-transition-new(._1yq4ar72){animation:none}::view-transition-new(._1yq4ar73){animation:none}::view-transition-new(._1yq4ar74){animation:none}::view-transition-new(._1yq4ar75){animation:none}::view-transition-new(._1yq4ar76){animation:none}::view-transition-new(._1yq4ar77){animation:none}::view-transition-new(bgn4np0){animation:none}}