@noxlovette/material 0.4.8 → 0.5.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from './actions/index.js';
 export * from './animation/index.js';
+export * from './attachments/index.js';
 export * from './components/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -1,4 +1,4 @@
-export * from './actions/index.js';
 export * from './animation/index.js';
+export * from './attachments/index.js';
 export * from './components/index.js';
 export * from './utils/index.js';

package/dist/styles/component.css

@@ -12,17 +12,20 @@
      * `fixed`/`absolute`/`sticky` override. Baking it into this custom class's own compiled
      * CSS rule would set `position` outside of anything twMerge can see or override. */
     @apply state-layer md-sys-state-focus-indicator disabled:bg-md-sys-color-on-surface/10 disabled:text-md-sys-color-on-surface/38 disabled:before:bg-md-sys-color-on-surface/38 inline-flex items-center justify-center select-none disabled:cursor-not-allowed;
-    transition: box-shadow var(--md-sys-motion-duration, 200ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+    transition: box-shadow var(--md-sys-motion-duration-effects-spring)
+      var(--md-sys-motion-timing-function-effects-spring);
   }
 
+  /* Shape morphs run on the fast spatial spring in both directions (press and release). */
   .md-btn-morph {
     border-radius: var(--btn-shape-override, var(--btn-shape, 9999px));
-    transition: border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+    transition: border-radius var(--md-sys-motion-duration-fast-spatial)
+      var(--md-sys-motion-timing-function-fast-spatial);
 
     &::before {
       border-radius: inherit;
-      transition: border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+      transition: border-radius var(--md-sys-motion-duration-fast-spatial)
+        var(--md-sys-motion-timing-function-fast-spatial);
     }
 
     &:active:not(:disabled) {
@@ -30,7 +33,6 @@
         --btn-pressed-shape,
         var(--btn-shape-override, var(--btn-shape, 9999px))
       ) !important;
-      transition-timing-function: var(--md-sys-motion-timing-function-emphasized-decel);
     }
   }
 
@@ -85,9 +87,10 @@
     > * {
       padding-inline: var(--btn-group-base-px, 1rem);
       transition:
-        padding-inline var(--md-sys-motion-duration-fast-spatial, 350ms)
-          var(--md-sys-motion-timing-function-fast-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.9)),
-        border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+        padding-inline var(--md-sys-motion-duration-fast-spatial)
+          var(--md-sys-motion-timing-function-fast-spatial),
+        border-radius var(--md-sys-motion-duration-fast-spatial)
+          var(--md-sys-motion-timing-function-fast-spatial);
     }
 
     > *:active:not(:disabled) {
@@ -114,11 +117,12 @@
   .md-btn-connected {
     border-radius: var(--cbg-inner, 9999px);
     transition:
-      border-radius 250ms var(--md-sys-motion-timing-function-emphasized-accel),
-      background-color var(--md-sys-motion-duration-fast, 150ms)
-        var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1)),
-      color var(--md-sys-motion-duration-fast, 150ms)
-        var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+      border-radius var(--md-sys-motion-duration-fast-spatial)
+        var(--md-sys-motion-timing-function-fast-spatial),
+      background-color var(--md-sys-motion-duration-fast-effects-spring)
+        var(--md-sys-motion-timing-function-fast-effects-spring),
+      color var(--md-sys-motion-duration-fast-effects-spring)
+        var(--md-sys-motion-timing-function-fast-effects-spring);
 
     &:only-child {
       border-radius: var(--cbg-outer, 9999px);
@@ -144,11 +148,6 @@
     &:active:not(:disabled),
     &[data-state='on'] {
       border-radius: var(--cbg-inner, 4px) !important;
-      transition-timing-function: var(--md-sys-motion-timing-function-emphasized-decel);
-    }
-
-    &:active:not(:disabled) {
-      transition-duration: 150ms;
     }
   }
 
@@ -245,8 +244,8 @@
 
   .text-link {
     @apply text-md-sys-color-primary hover:text-md-sys-color-secondary underline;
-    transition: color var(--md-sys-motion-duration, 200ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+    transition: color var(--md-sys-motion-duration-effects-spring)
+      var(--md-sys-motion-timing-function-effects-spring);
   }
 
   .text-link.md-sys-typescale-label-small {
@@ -270,7 +269,7 @@
 @utility state-layer {
   @apply before:pointer-events-none before:absolute before:inset-0 before:content-[''];
   &::before {
-    transition: background-color var(--md-sys-motion-duration-fast, 150ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+    transition: background-color var(--md-sys-motion-duration-fast-effects-spring)
+      var(--md-sys-motion-timing-function-fast-effects-spring);
   }
 }

package/dist/styles/motion.css

@@ -1,54 +1,333 @@
 @theme {
-  /* Expressive easing */
-  --md-sys-motion-timing-function-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
-  --md-sys-motion-duration-fast-spatial: 350ms;
+  /* Expressive springs — generated from src/lib/animation/spring.ts, do not edit by hand.
+     Regenerate with `bun scripts/generate-motion-springs.ts`. Each is a `linear()` sampling of a
+     real spring plus its settle time. Spatial tokens overshoot; effects tokens don't. */
+  /* @generated:springs:start */
+  --md-sys-motion-timing-function-fast-spatial: linear(
+    0,
+    0.0373,
+    0.1315,
+    0.2592,
+    0.4017,
+    0.5444,
+    0.6773,
+    0.794,
+    0.8908,
+    0.9669,
+    1.023,
+    1.061,
+    1.0835,
+    1.0935,
+    1.094,
+    1.0877,
+    1.0771,
+    1.0642,
+    1.0505,
+    1.0373,
+    1.0253,
+    1.0151,
+    1.0068,
+    1.0005,
+    0.996,
+    0.9931,
+    0.9915,
+    0.991,
+    0.9913,
+    0.9921,
+    0.9932,
+    0.9945,
+    0.9958,
+    0.997,
+    0.9981,
+    0.9989,
+    0.9996,
+    1.0002,
+    1.0005,
+    1.0007,
+    1
+  );
+  --md-sys-motion-duration-fast-spatial: 410ms;
   --md-sys-motion-easing-fast-spatial: var(--md-sys-motion-timing-function-fast-spatial)
     var(--md-sys-motion-duration-fast-spatial);
 
-  --md-sys-motion-timing-function-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
-  --md-sys-motion-duration-spatial: 500ms;
+  --md-sys-motion-timing-function-spatial: linear(
+    0,
+    0.0178,
+    0.0639,
+    0.1291,
+    0.206,
+    0.2888,
+    0.373,
+    0.4554,
+    0.5338,
+    0.6066,
+    0.6728,
+    0.732,
+    0.7841,
+    0.8294,
+    0.868,
+    0.9006,
+    0.9276,
+    0.9498,
+    0.9675,
+    0.9816,
+    0.9924,
+    1.0005,
+    1.0064,
+    1.0105,
+    1.0131,
+    1.0146,
+    1.0151,
+    1.015,
+    1.0145,
+    1.0135,
+    1.0124,
+    1.0112,
+    1.0099,
+    1.0086,
+    1.0074,
+    1.0063,
+    1.0053,
+    1.0043,
+    1.0035,
+    1.0028,
+    1.0022,
+    1.0017,
+    1.0012,
+    1.0009,
+    1.0006,
+    1.0003,
+    1.0002,
+    1,
+    1
+  );
+  --md-sys-motion-duration-spatial: 490ms;
   --md-sys-motion-easing-spatial: var(--md-sys-motion-timing-function-spatial)
     var(--md-sys-motion-duration-spatial);
 
-  --md-sys-motion-timing-function-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
-  --md-sys-motion-duration-slow-spatial: 650ms;
+  --md-sys-motion-timing-function-slow-spatial: linear(
+    0,
+    0.0095,
+    0.0354,
+    0.0736,
+    0.121,
+    0.1749,
+    0.2329,
+    0.2931,
+    0.3539,
+    0.4141,
+    0.4728,
+    0.5291,
+    0.5825,
+    0.6326,
+    0.6792,
+    0.7221,
+    0.7613,
+    0.7969,
+    0.8289,
+    0.8575,
+    0.8828,
+    0.9051,
+    0.9245,
+    0.9414,
+    0.9559,
+    0.9682,
+    0.9785,
+    0.9872,
+    0.9943,
+    1,
+    1.0046,
+    1.0081,
+    1.0108,
+    1.0127,
+    1.014,
+    1.0148,
+    1.0151,
+    1.0151,
+    1.0148,
+    1.0143,
+    1.0137,
+    1.0129,
+    1.012,
+    1.0111,
+    1.0102,
+    1.0093,
+    1.0084,
+    1.0075,
+    1.0067,
+    1.0059,
+    1.0052,
+    1.0045,
+    1.0039,
+    1.0033,
+    1.0028,
+    1.0024,
+    1.0019,
+    1.0016,
+    1.0013,
+    1.001,
+    1.0008,
+    1.0006,
+    1.0004,
+    1.0003,
+    1.0001,
+    1
+  );
+  --md-sys-motion-duration-slow-spatial: 660ms;
   --md-sys-motion-easing-slow-spatial: var(--md-sys-motion-timing-function-slow-spatial)
     var(--md-sys-motion-duration-slow-spatial);
 
-  /* Standard easing — md.sys.motion.easing.standard, cubic-bezier(0.2, 0, 0, 1) per
-     m3.material.io/styles/motion/easing-and-duration/tokens-specs. Same curve across all
-     three durations; only the duration changes per tier. */
-  --md-sys-motion-timing-function-fast: cubic-bezier(0.2, 0, 0, 1);
-  --md-sys-motion-duration-fast: 150ms;
-  --md-sys-motion-easing-fast: var(--md-sys-motion-timing-function-fast)
-    var(--md-sys-motion-duration-fast);
-
-  --md-sys-motion-timing-function: cubic-bezier(0.2, 0, 0, 1);
-  --md-sys-motion-duration: 200ms;
-  --md-sys-motion-easing: var(--md-sys-motion-timing-function) var(--md-sys-motion-duration);
+  --md-sys-motion-timing-function-fast-effects-spring: linear(
+    0,
+    0.1389,
+    0.3737,
+    0.5809,
+    0.7331,
+    0.8356,
+    0.9011,
+    0.9416,
+    0.966,
+    0.9804,
+    0.9888,
+    0.9936,
+    0.9964,
+    0.998,
+    0.9989,
+    0.9994,
+    0.9997,
+    0.9998,
+    1
+  );
+  --md-sys-motion-duration-fast-effects-spring: 190ms;
+  --md-sys-motion-easing-fast-effects-spring: var(
+      --md-sys-motion-timing-function-fast-effects-spring
+    )
+    var(--md-sys-motion-duration-fast-effects-spring);
 
-  --md-sys-motion-timing-function-slow: cubic-bezier(0.2, 0, 0, 1);
-  --md-sys-motion-duration-slow: 300ms;
-  --md-sys-motion-easing-slow: var(--md-sys-motion-timing-function-slow)
-    var(--md-sys-motion-duration-slow);
+  --md-sys-motion-timing-function-effects-spring: linear(
+    0,
+    0.0657,
+    0.2023,
+    0.354,
+    0.4947,
+    0.6144,
+    0.7111,
+    0.7866,
+    0.8442,
+    0.8873,
+    0.9191,
+    0.9423,
+    0.9591,
+    0.9711,
+    0.9797,
+    0.9858,
+    0.9901,
+    0.9931,
+    0.9952,
+    0.9967,
+    0.9977,
+    0.9984,
+    0.9989,
+    0.9993,
+    0.9995,
+    0.9996,
+    1
+  );
+  --md-sys-motion-duration-effects-spring: 270ms;
+  --md-sys-motion-easing-effects-spring: var(--md-sys-motion-timing-function-effects-spring)
+    var(--md-sys-motion-duration-effects-spring);
 
-  --md-sys-motion-timing-function-emphasized: linear(
+  --md-sys-motion-timing-function-slow-effects-spring: linear(
     0,
-    0.034 6%,
-    0.073 9%,
-    0.126 11%,
-    0.194 13%,
-    0.273 15%,
-    0.351 16%,
-    0.541 18%,
-    0.652 20%,
-    0.755 24%,
-    0.839 30%,
-    0.91 39%,
-    0.959 53%,
-    0.989 72%,
+    0.0349,
+    0.1158,
+    0.2173,
+    0.3239,
+    0.4265,
+    0.5204,
+    0.6034,
+    0.675,
+    0.7357,
+    0.7865,
+    0.8285,
+    0.8629,
+    0.8908,
+    0.9134,
+    0.9315,
+    0.946,
+    0.9576,
+    0.9667,
+    0.974,
+    0.9797,
+    0.9841,
+    0.9877,
+    0.9904,
+    0.9926,
+    0.9942,
+    0.9955,
+    0.9965,
+    0.9973,
+    0.9979,
+    0.9984,
+    0.9988,
+    0.9991,
+    0.9993,
+    0.9994,
+    0.9996,
     1
   );
-  --md-sys-motion-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
-  --md-sys-motion-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --md-sys-motion-duration-slow-effects-spring: 370ms;
+  --md-sys-motion-easing-slow-effects-spring: var(
+      --md-sys-motion-timing-function-slow-effects-spring
+    )
+    var(--md-sys-motion-duration-slow-effects-spring);
+  /* @generated:springs:end */
+}
+
+/*
+  One utility per Expressive spring, setting duration + timing function together. Pair with a
+  Tailwind transition-property utility: `transition-colors md-sys-motion-fast-effects`.
+  They set Tailwind's own --tw-duration/--tw-ease, so they win over `transition-*` regardless of
+  source order.
+
+  - spatial: position, size, shape (transform, width, top, border-radius…). Overshoots slightly.
+  - effects: color, opacity, shadow. Critically damped, never overshoots.
+  - fast-*: small parts and direct feedback (handles, indicators, hover/press); default: component
+    containers; slow-*: large or full-screen surfaces.
+*/
+@utility md-sys-motion-fast-spatial {
+  --tw-duration: var(--md-sys-motion-duration-fast-spatial);
+  --tw-ease: var(--md-sys-motion-timing-function-fast-spatial);
+  transition-duration: var(--md-sys-motion-duration-fast-spatial);
+  transition-timing-function: var(--md-sys-motion-timing-function-fast-spatial);
+}
+@utility md-sys-motion-spatial {
+  --tw-duration: var(--md-sys-motion-duration-spatial);
+  --tw-ease: var(--md-sys-motion-timing-function-spatial);
+  transition-duration: var(--md-sys-motion-duration-spatial);
+  transition-timing-function: var(--md-sys-motion-timing-function-spatial);
+}
+@utility md-sys-motion-slow-spatial {
+  --tw-duration: var(--md-sys-motion-duration-slow-spatial);
+  --tw-ease: var(--md-sys-motion-timing-function-slow-spatial);
+  transition-duration: var(--md-sys-motion-duration-slow-spatial);
+  transition-timing-function: var(--md-sys-motion-timing-function-slow-spatial);
+}
+@utility md-sys-motion-fast-effects {
+  --tw-duration: var(--md-sys-motion-duration-fast-effects-spring);
+  --tw-ease: var(--md-sys-motion-timing-function-fast-effects-spring);
+  transition-duration: var(--md-sys-motion-duration-fast-effects-spring);
+  transition-timing-function: var(--md-sys-motion-timing-function-fast-effects-spring);
+}
+@utility md-sys-motion-effects {
+  --tw-duration: var(--md-sys-motion-duration-effects-spring);
+  --tw-ease: var(--md-sys-motion-timing-function-effects-spring);
+  transition-duration: var(--md-sys-motion-duration-effects-spring);
+  transition-timing-function: var(--md-sys-motion-timing-function-effects-spring);
+}
+@utility md-sys-motion-slow-effects {
+  --tw-duration: var(--md-sys-motion-duration-slow-effects-spring);
+  --tw-ease: var(--md-sys-motion-timing-function-slow-effects-spring);
+  transition-duration: var(--md-sys-motion-duration-slow-effects-spring);
+  transition-timing-function: var(--md-sys-motion-timing-function-slow-effects-spring);
 }

package/dist/utils/Layer.svelte

@@ -1,4 +1,7 @@
 <script module lang="ts">
+  import { animate } from 'motion';
+  import { springTokens, springTransition } from '../animation/spring.js';
+
   let initialized = false;
 
   const activePointerRipples: (() => void)[] = [];
@@ -24,7 +27,6 @@
     if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return null;
 
     const size = Math.hypot(Math.max(x, width - x), Math.max(y, height - y)) * 2.5;
-    const speed = Math.max(Math.min(Math.log(size) * 50, 600), 200);
 
     const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
     gradient.id = `ripple-${Date.now()}-${Math.random().toString(36).slice(2)}`;
@@ -44,20 +46,12 @@
     const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
     circle.setAttribute('cx', `${x}`);
     circle.setAttribute('cy', `${y}`);
-    circle.setAttribute('r', '0');
+    circle.setAttribute('r', `${size / 2}`);
     circle.setAttribute('fill', `url(#${gradient.id})`);
-
-    const expand = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
-    expand.setAttribute('attributeName', 'r');
-    expand.setAttribute('from', '0');
-    expand.setAttribute('to', `${size / 2}`);
-    expand.setAttribute('dur', `${speed}ms`);
-    expand.setAttribute('fill', 'freeze');
-    expand.setAttribute('calcMode', 'spline');
-    // md.sys.motion.easing.standard: cubic-bezier(0.2, 0, 0, 1) — keep in sync with
-    // --md-sys-motion-timing-function in motion.css (SMIL keySplines can't reference CSS vars).
-    expand.setAttribute('keySplines', '0.2 0, 0 1');
-    circle.appendChild(expand);
+    // Grow by scale rather than `r`: transform runs on WAAPI, an SVG attribute would not.
+    circle.style.transformBox = 'fill-box';
+    circle.style.transformOrigin = 'center';
+    circle.style.transform = 'scale(0)';
 
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.classList.add('m3-ripple');
@@ -99,20 +93,13 @@
 
     node.appendChild(svg);
 
+    // Ripples are an effect, not layout: critically damped springs, no overshoot.
+    animate(circle, { transform: 'scale(1)' }, springTransition(springTokens.slowEffects));
+
     return () => {
-      const fade = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
-      fade.setAttribute('attributeName', 'opacity');
-      fade.setAttribute('from', '1');
-      fade.setAttribute('to', '0');
-      fade.setAttribute('dur', '800ms');
-      fade.setAttribute('fill', 'freeze');
-      fade.setAttribute('calcMode', 'spline');
-      // md.sys.motion.easing.standard: cubic-bezier(0.2, 0, 0, 1) — keep in sync with
-      // --md-sys-motion-timing-function in motion.css (SMIL keySplines can't reference CSS vars).
-      fade.setAttribute('keySplines', '0.2 0, 0 1');
-      circle.appendChild(fade);
-      fade.beginElement();
-      setTimeout(() => svg.remove(), 800);
+      animate(circle, { opacity: 0 }, springTransition(springTokens.slowEffects)).then(() =>
+        svg.remove()
+      );
     };
   };
 
@@ -199,8 +186,8 @@
 
     background-color: currentColor;
     opacity: 0;
-    transition: opacity var(--md-sys-motion-duration-fast, 150ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+    transition: opacity var(--md-sys-motion-duration-fast-effects-spring)
+      var(--md-sys-motion-timing-function-fast-effects-spring);
 
     &:not(
       :global(input:disabled + label) > .tint,

package/dist/utils/icon/LoadingIndicator.svelte

@@ -1,3 +1,61 @@
+<script module lang="ts">
+  import { animate, mix, type AnimationPlaybackControls } from 'motion';
+  import type { Attachment } from 'svelte/attachments';
+  import { springTransition } from '../../animation/spring.js';
+  import { LOADING_SHAPES } from './loadingShapes.js';
+
+  /*
+    Component-level values from the M3 loading indicator (Jetpack Compose `LoadingIndicator`, the
+    reference implementation): a new morph every 650ms on a 200 / 0.6 spring, each morph adding a
+    quarter turn, on top of a constant full turn every 4666ms. The spring is the component's own,
+    not one of the system springs in spring.ts.
+    https://m3.material.io/components/loading-indicator/specs
+  */
+  const MORPH_INTERVAL_MS = 650;
+  const MORPH_SPRING = springTransition({ stiffness: 200, dampingRatio: 0.6 });
+  const MORPH_ROTATION_DEG = 90;
+  const GLOBAL_ROTATION_S = 4.666;
+
+  /** Constant spin — a linear transform, so Motion hands it to WAAPI. */
+  const spin: Attachment<SVGGElement> = (group) => {
+    const controls = animate(
+      group,
+      { transform: ['rotate(0deg)', 'rotate(360deg)'] },
+      { duration: GLOBAL_ROTATION_S, ease: 'linear', repeat: Infinity }
+    );
+    return () => controls.stop();
+  };
+
+  /** Morphs to the next shape every interval; the spring's overshoot also swings the quarter turn. */
+  const morph: Attachment<SVGPathElement> = (path) => {
+    let index = 0;
+    let controls: AnimationPlaybackControls | undefined;
+
+    const next = () => {
+      const shape = mix(
+        LOADING_SHAPES[index % LOADING_SHAPES.length],
+        LOADING_SHAPES[(index + 1) % LOADING_SHAPES.length]
+      );
+      const turn = (index % 4) * MORPH_ROTATION_DEG;
+      controls = animate(0, 1, {
+        ...MORPH_SPRING,
+        onUpdate: (progress) => {
+          path.setAttribute('d', shape(progress));
+          path.setAttribute('transform', `rotate(${turn + progress * MORPH_ROTATION_DEG} 24 24)`);
+        }
+      });
+      index++;
+    };
+
+    next();
+    const timer = setInterval(next, MORPH_INTERVAL_MS);
+    return () => {
+      clearInterval(timer);
+      controls?.stop();
+    };
+  };
+</script>
+
 <script lang="ts">
   import type { LoadingIndicatorProps } from './types.js';
   import { loadingIndicator } from './theme.js';
@@ -14,26 +72,7 @@
 </script>
 
 <svg width={size} height={size} class={styling} viewBox="0 0 48 48">
-  <path fill="currentColor">
-    <animate
-      attributeName="d"
-      dur="5s"
-      repeatCount="indefinite"
-      calcMode="spline"
-      keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8"
-      keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1"
-      values="m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z;m39.9 24.0 -0.3 0.8 -0.4 0.8 -0.3 0.8 -0.2 1.5 0.1 0.9 0.1 0.9 -0.1 0.9 -0.2 0.8 -0.3 0.8 -0.2 0.4 -0.3 0.4 -0.5 0.7 -0.7 0.5 -0.8 0.4 -0.8 0.4 -0.8 0.4 -1.2 1.0 -0.5 0.7 -0.5 0.8 -0.6 0.6 -0.6 0.6 -0.8 0.4 -0.4 0.2 -0.5 0.1 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.9 -0.3 -0.8 -0.1 -1.6 -0.1 -0.8 0.2 -0.9 0.3 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.5 -0.1 -0.4 -0.2 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.5 -0.8 -0.5 -0.7 -1.2 -1.0 -0.7 -0.4 -0.9 -0.4 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.3 -0.4 -0.2 -0.4 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.9 0.1 -0.9 -0.2 -1.5 -0.3 -0.8 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.7 -0.0 -0.2 0.2 -0.8 0.4 -0.8 0.5 -0.7 0.6 -0.6 0.7 -0.7 0.5 -0.6 0.6 -1.3 0.3 -0.9 0.2 -0.8 0.3 -0.8 0.5 -0.7 0.5 -0.6 0.2 -0.2 0.5 -0.4 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.9 -0.0 0.8 -0.1 1.4 -0.5 0.7 -0.4 0.7 -0.5 0.7 -0.5 0.8 -0.3 0.8 -0.2 0.9 -0.1 0.0 -0.0 0.8 0.1 0.9 0.2 0.8 0.3 0.7 0.5 0.7 0.5 0.7 0.4 1.4 0.5 0.8 0.1 0.9 0.0 0.9 0.2 0.8 0.3 0.7 0.4 0.5 0.4 0.2 0.1 0.5 0.7 0.5 0.7 0.3 0.8 0.2 0.8 0.3 0.9 0.6 1.3 0.5 0.6 0.7 0.7 0.6 0.6 0.5 0.7 0.4 0.8 0.2 0.8 0.0 0.2 0.1 0.7 -0.1 0.9 z;m38.9 24.2 -0.2 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.3 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.4 1.0 -0.4 0.8 -0.4 0.8 -0.6 0.6 -0.7 0.5 0.0 0.1 -0.7 0.4 -0.8 0.3 -0.8 0.3 -0.9 0.1 -1.1 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -1.1 -0.0 -0.9 -0.1 -0.8 -0.3 -0.8 -0.3 -0.7 -0.5 -0.1 0.0 -0.6 -0.5 -0.6 -0.7 -0.4 -0.7 -0.4 -0.8 -0.4 -1.0 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -0.8 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -1.1 -0.2 -0.9 -0.0 -0.8 0.0 -0.9 0.2 -0.8 0.1 -0.1 0.3 -0.7 0.4 -0.8 0.6 -0.6 0.6 -0.6 0.9 -0.7 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.9 -0.7 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.8 -0.0 0.1 -0.0 0.9 0.0 0.8 0.2 0.8 0.3 0.8 0.4 0.9 0.7 0.6 0.5 0.7 0.4 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.4 0.6 0.5 0.9 0.7 0.6 0.6 0.6 0.7 0.4 0.7 0.3 0.7 0.0 0.1 0.2 0.8 0.1 0.9 -0.0 0.9 -0.2 0.8 -0.3 1.1 z;m39.6 24.0 -0.1 0.8 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.3 0.8 -0.4 0.7 -0.4 0.7 -0.5 0.6 -0.4 0.6 -0.6 0.6 -0.6 0.6 -0.4 0.4 -0.6 0.6 -0.4 0.5 -0.9 0.8 -0.5 0.5 -0.6 0.6 -0.4 0.4 -0.7 0.7 -0.5 0.5 -0.6 0.4 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.7 0.3 -0.8 0.3 -0.8 0.3 -0.8 0.2 -0.8 0.1 -0.8 0.1 -0.8 0.1 -0.9 0.0 -0.8 -0.0 -0.9 -0.1 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.3 -0.8 -0.4 -0.8 -0.4 -0.7 -0.5 -0.7 -0.5 -0.7 -0.5 -0.6 -0.6 -0.1 -0.1 -0.5 -0.6 -0.6 -0.7 -0.5 -0.7 -0.5 -0.8 -0.4 -0.7 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.1 -0.9 0.0 -0.8 0.0 -0.9 0.1 -0.8 0.1 -0.8 0.1 -0.8 0.3 -0.8 0.2 -0.8 0.3 -0.7 0.4 -0.8 0.3 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.5 0.6 -0.6 0.6 -0.7 0.4 -0.4 0.6 -0.6 0.5 -0.4 0.8 -0.9 0.5 -0.5 0.6 -0.6 0.4 -0.4 0.7 -0.7 0.5 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.4 0.7 -0.4 0.7 -0.3 0.8 -0.3 0.8 -0.3 0.8 -0.2 0.8 -0.1 0.8 -0.1 0.8 -0.1 0.9 -0.0 0.8 0.0 0.9 0.1 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.4 0.8 0.3 0.8 0.4 0.7 0.5 0.7 0.5 0.7 0.5 0.6 0.7 0.1 -0.0 0.5 0.6 0.6 0.7 0.5 0.7 0.5 0.8 0.4 0.7 0.3 0.8 0.4 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.1 0.9 0.0 0.8 -0.0 0.8 -0.1 0.9 z;m40.0 24.0 -0.1 0.8 -0.5 0.8 -0.6 0.8 -0.6 0.6 -0.6 0.7 -0.5 0.6 -0.7 1.2 -0.1 0.7 -0.1 0.8 -0.0 0.9 -0.1 0.9 -0.1 0.9 -0.2 0.9 -0.5 0.7 -0.0 0.0 -0.7 0.5 -0.9 0.2 -0.9 0.1 -0.9 0.1 -0.8 0.0 -0.8 0.1 -0.8 0.1 -1.2 0.7 -0.6 0.5 -0.7 0.6 -0.6 0.6 -0.8 0.6 -0.8 0.5 -0.8 0.1 -0.0 0.0 -0.8 -0.1 -0.8 -0.5 -0.8 -0.6 -0.6 -0.6 -0.7 -0.6 -0.6 -0.5 -1.2 -0.7 -0.7 -0.1 -0.8 -0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.2 -0.7 -0.5 -0.0 0.0 -0.5 -0.7 -0.2 -0.9 -0.1 -0.9 -0.1 -0.9 -0.0 -0.8 -0.1 -0.8 -0.1 -0.8 -0.7 -1.2 -0.5 -0.6 -0.6 -0.7 -0.6 -0.6 -0.6 -0.8 -0.5 -0.8 -0.1 -0.8 -0.0 -0.0 0.1 -0.8 0.5 -0.8 0.6 -0.8 0.6 -0.6 0.6 -0.7 0.5 -0.6 0.7 -1.2 0.1 -0.7 0.1 -0.8 0.0 -0.9 0.1 -0.9 0.1 -0.9 0.2 -0.9 0.5 -0.7 -0.0 -0.0 0.7 -0.5 0.9 -0.2 0.9 -0.1 0.9 -0.1 0.8 -0.0 0.8 -0.1 0.8 -0.1 1.2 -0.7 0.6 -0.5 0.7 -0.6 0.6 -0.6 0.8 -0.6 0.8 -0.5 0.8 -0.1 0.0 -0.0 0.8 0.1 0.8 0.5 0.8 0.6 0.6 0.6 0.7 0.6 0.6 0.5 1.2 0.7 0.7 0.1 0.8 0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.2 0.7 0.5 0.0 -0.0 0.5 0.7 0.2 0.9 0.1 0.9 0.1 0.9 0.0 0.8 0.1 0.8 0.1 0.8 0.7 1.2 0.5 0.6 0.6 0.7 0.6 0.6 0.6 0.8 0.5 0.8 0.1 0.8 z;m36.9 24.6 0.1 0.7 0.2 0.8 0.2 0.7 0.4 0.9 0.4 0.9 0.2 0.9 0.1 1.0 0.1 0.9 -0.1 0.9 -0.3 0.9 -0.3 0.9 -0.4 0.8 -0.5 0.8 -0.6 0.6 -0.1 0.1 -0.6 0.6 -0.8 0.5 -0.8 0.4 -0.9 0.3 -0.9 0.3 -0.9 0.1 -0.9 -0.1 -1.0 -0.1 -0.9 -0.2 -0.9 -0.4 -0.9 -0.4 -0.7 -0.2 -0.8 -0.2 -0.7 -0.1 -1.2 0.0 -0.7 0.1 -0.8 0.2 -0.7 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -1.0 0.1 -0.9 0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.5 -0.6 -0.6 -0.1 -0.1 -0.6 -0.6 -0.5 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 0.1 -0.9 0.1 -1.0 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -0.7 0.2 -0.8 0.1 -0.7 -0.0 -1.2 -0.1 -0.7 -0.2 -0.8 -0.2 -0.7 -0.4 -0.9 -0.4 -0.9 -0.2 -0.9 -0.1 -1.0 -0.1 -0.9 0.1 -0.9 0.3 -0.9 0.3 -0.9 0.4 -0.8 0.5 -0.8 0.6 -0.6 0.1 -0.1 0.6 -0.6 0.8 -0.5 0.8 -0.4 0.9 -0.3 0.9 -0.3 0.9 -0.1 0.9 0.1 1.0 0.1 0.9 0.2 0.9 0.4 0.9 0.4 0.7 0.2 0.8 0.2 0.7 0.1 1.2 -0.0 0.7 -0.1 0.8 -0.2 0.7 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 1.0 -0.1 0.9 -0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.5 0.6 0.6 0.1 0.1 0.6 0.6 0.5 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 -0.1 0.9 -0.1 1.0 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 0.7 -0.2 0.8 -0.1 0.7 z;m37.7 24.0 -0.3 0.7 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.6 -0.3 0.5 -0.4 0.6 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.3 0.4 -0.5 0.4 -0.8 0.8 -0.4 0.5 -0.4 0.3 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.6 0.4 -0.5 0.3 -0.6 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.7 0.3 -0.7 0.2 -0.7 0.3 -0.9 0.3 -0.8 0.2 -0.8 0.1 -0.9 0.1 -1.0 0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.6 -0.7 -0.6 -0.0 0.0 -0.6 -0.7 -0.6 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 -0.1 -0.9 0.0 -0.9 0.1 -1.0 0.1 -0.9 0.1 -0.8 0.2 -0.8 0.3 -0.9 0.3 -0.7 0.2 -0.7 0.3 -0.7 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.6 0.3 -0.5 0.4 -0.6 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.3 -0.4 0.5 -0.4 0.8 -0.8 0.4 -0.5 0.4 -0.3 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.6 -0.4 0.5 -0.3 0.6 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.7 -0.3 0.7 -0.2 0.7 -0.3 0.9 -0.3 0.8 -0.2 0.8 -0.1 0.9 -0.1 1.0 -0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.6 0.7 0.6 -0.0 0.0 0.6 0.7 0.6 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 0.1 0.9 -0.0 0.9 -0.1 1.0 -0.1 0.9 -0.1 0.8 -0.2 0.8 -0.3 0.9 -0.3 0.7 z;m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z"
-    />
-    <animateTransform
-      attributeName="transform"
-      attributeType="XML"
-      type="rotate"
-      dur="5s"
-      repeatCount="indefinite"
-      calcMode="spline"
-      keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8"
-      keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1"
-      values="0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24"
-    />
-  </path>
+  <g style="transform-box: view-box; transform-origin: center" {@attach spin}>
+    <path fill="currentColor" d={LOADING_SHAPES[0]} {@attach morph} />
+  </g>
 </svg>