@codenhub/styles 0.6.0 → 0.8.0

package/dist/tw/aesthetics/sketch.css

@@ -1,333 +0,0 @@
-/* Sketch: uneven elliptical corners, a solid ink edge, and a small hard shadow.
-   The handwriting face is consumer-supplied, so this file has no font asset or
-   network side effect. */
-
-/* The layer map, stated before anything uses a layer -- see `theme.css`. The
-   aesthetic's token class sits in `components`, below every utility, so a
-   consumer's own utility or unlayered CSS beats it; the solo class stays
-   unlayered, because it has to beat a foreign component's unlayered CSS. See
-   docs/internal/model.md#cascade-layers. */
-@layer theme, base, components, utilities;
-
-@layer components {
-  .sketch {
-    /* Complete radii are taken as written, without the size step or corner
-       pattern. Chips use a smaller version of the same irregular outline.
-       Surfaces use sharp, hand-drawn square contours tailored for container
-       dimensions to avoid interior padding encroachment. Knobs follow R8. */
-    --ui-corner: initial;
-    --ui-corner-surface: initial;
-    --ui-corner-tl: initial;
-    --ui-corner-tr: initial;
-    --ui-corner-br: initial;
-    --ui-corner-bl: initial;
-    --ui-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
-    --ui-radius-surface: var(--sketch-radius-surface, 80px 4px 75px 5px / 3px 70px 4px 80px);
-    --ui-radius-pill: var(--sketch-radius-pill, 20px 22px 21px 19px / 20px 22px 21px 19px);
-    --ui-radius-tight: 11px 1px 7px 2px / 2px 7px 1px 11px;
-    --ui-corner-shape: round;
-
-    --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
-    /* Controls take the theme's control border rather than the ink, which is the
-       primary colour in both themes; see `neobrutalism.css`. */
-    --ui-control-ink: var(--color-control-border);
-    --ui-rule-ink: initial;
-    --ui-border-width: 1px;
-    --ui-border-max: 100px;
-    --ui-line-style: solid;
-    --ui-rule-style: initial;
-
-    --ui-shadow-ink: 0%;
-    /* The foundation depth colour is restated so a sketch region nested inside
-       cyber does not inherit cyber's transparent depth. */
-    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
-    --ui-shadow-x: 2px;
-    --ui-shadow-y: 2px;
-    --ui-shadow-blur: 0px;
-    --ui-shadow-spread: 0px;
-    --ui-shadow-inset: ;
-    --ui-shadow-edge: initial;
-    --ui-halo-blur: initial;
-    --ui-halo-spread: initial;
-    --ui-halo-ink: initial;
-    --ui-focus-inset: initial;
-
-    --ui-active-shadow-x: initial;
-    --ui-active-shadow-y: initial;
-    --ui-active-transform: scale(0.97);
-    --ui-active-translate-x: initial;
-    --ui-active-translate-y: initial;
-    --ui-hover-transform: none;
-    --ui-clip: none;
-    --ui-clip-tight: none;
-    --ui-backdrop: none;
-    --ui-surface-image: initial;
-    --ui-surface-ground: initial;
-    --ui-surface-shadow: initial;
-    --ui-bg-alpha: 1;
-    --ui-label-weight: initial;
-    --ui-label-tracking: initial;
-    --ui-label-case: initial;
-    --ui-label-shadow: initial;
-
-    font-family: var(--font-sketch, cursive);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .sketch {
-      --ui-active-transform: none;
-    }
-  }
-
-  /* Rounded variant: bounded elliptical corners, so the top and bottom edges of
-     a wide element stay straight instead of bulging into an egg. On the region
-     with `.sketch`, or on one component inside it. Knobs follow R8. */
-  .sketch-rounded {
-    --ui-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
-    --ui-radius-surface: var(--sketch-radius-surface-rounded, 38px 16px 36px 17px / 16px 34px 17px 32px);
-    --ui-radius-pill: var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px);
-    --ui-radius-tight: 9px 3px 8px 4px / 4px 8px 3px 7px;
-  }
-
-  /* One region token gives every element the same outline, so the rotation and
-     the dashed accents are written on components, which the registry records.
-     The root is a component carrying either class, or one inside either region
-     and not inside another aesthetic nested there, which keeps its own
-     material. The list below is the one place other aesthetics are named, and
-     `registry.test.ts` fails when one is missing from it.
-
-     Rotation is by sibling position, and a field's control takes its field's
-     position instead of its own, so stacked rows alternate. It is stable for a
-     given DOM order. A knob, when set, is one outline for every position. */
-  :is(
-    .sketch,
-    .sketch-rounded,
-    :is(.sketch, .sketch-rounded)
-      :not(
-        :is(.sketch, .sketch-rounded) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber),
-        :is(.sketch, .sketch-rounded) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber) *
-      )
-  ) {
-    /* The pointed outlines: controls, fields, surfaces, and chips. */
-    &:is(.sketch, .sketch *):not(.sketch-rounded, .sketch-rounded *) {
-      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
-        &:nth-child(4n + 2) {
-          --ui-radius: var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius: var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius: var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
-        }
-      }
-
-      &:is(.ipt, .textarea, .select, .input-group) {
-        .field:nth-child(4n + 1) & {
-          --ui-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
-        }
-
-        .field:nth-child(4n + 2) & {
-          --ui-radius: var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
-        }
-
-        .field:nth-child(4n + 3) & {
-          --ui-radius: var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
-        }
-
-        .field:nth-child(4n) & {
-          --ui-radius: var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
-        }
-      }
-
-      &:is(.card, .panel, .alert, .data-table) {
-        &:nth-child(4n + 2) {
-          --ui-radius-surface: var(--sketch-radius-surface, 4px 75px 5px 80px / 75px 3px 80px 4px);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-surface: var(--sketch-radius-surface, 75px 70px 4px 5px / 4px 3px 75px 70px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-surface: var(--sketch-radius-surface, 5px 80px 75px 4px / 75px 4px 5px 70px);
-        }
-      }
-
-      &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
-        &:nth-child(4n + 2) {
-          --ui-radius-tight: 2px 8px 1px 10px / 8px 2px 10px 1px;
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-tight: 8px 2px 10px 1px / 1px 9px 2px 8px;
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-tight: 1px 10px 2px 7px / 9px 1px 8px 2px;
-        }
-      }
-    }
-
-    /* The rounded outlines, in the same four places. */
-    &:is(.sketch-rounded, .sketch-rounded *) {
-      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
-        &:nth-child(4n + 2) {
-          --ui-radius: var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius: var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius: var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
-        }
-      }
-
-      &:is(.ipt, .textarea, .select, .input-group) {
-        .field:nth-child(4n + 1) & {
-          --ui-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
-        }
-
-        .field:nth-child(4n + 2) & {
-          --ui-radius: var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
-        }
-
-        .field:nth-child(4n + 3) & {
-          --ui-radius: var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
-        }
-
-        .field:nth-child(4n) & {
-          --ui-radius: var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
-        }
-      }
-
-      &:is(.card, .panel, .alert, .data-table) {
-        &:nth-child(4n + 2) {
-          --ui-radius-surface: var(--sketch-radius-surface-rounded, 17px 36px 18px 34px / 33px 16px 32px 17px);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-surface: var(--sketch-radius-surface-rounded, 35px 18px 38px 15px / 17px 32px 16px 34px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-surface: var(--sketch-radius-surface-rounded, 18px 35px 16px 37px / 31px 17px 34px 16px);
-        }
-      }
-
-      &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
-        &:nth-child(4n + 2) {
-          --ui-radius-tight: 4px 8px 3px 9px / 8px 3px 8px 4px;
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-tight: 8px 4px 9px 3px / 3px 9px 4px 8px;
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-tight: 3px 9px 4px 8px / 9px 4px 8px 3px;
-        }
-      }
-    }
-
-    /* A pill button keeps a rounded pill in either variant, bounded to the
-       button's half-height so a wide one keeps flat top and bottom edges. */
-    &.btn.pill {
-      --ui-radius-pill: var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px);
-
-      &:nth-child(4n + 2) {
-        --ui-radius-pill: var(--sketch-radius-pill, 17px 23px 16px 24px / 21px 16px 20px 17px);
-      }
-
-      &:nth-child(4n + 3) {
-        --ui-radius-pill: var(--sketch-radius-pill, 23px 17px 24px 16px / 16px 20px 17px 21px);
-      }
-
-      &:nth-child(4n) {
-        --ui-radius-pill: var(--sketch-radius-pill, 16px 24px 17px 23px / 20px 17px 21px 16px);
-      }
-    }
-
-    /* Badges, progress bars, and switches take their chip outline where they
-       would be fully round. */
-    &:is(.badge, .progress, .switch) {
-      --ui-radius-pill: var(--ui-radius-tight);
-    }
-
-    /* Radios and the tooltip trigger stay circles, slightly uneven, so a radio
-       is never mistaken for a checkbox. */
-    &:is(.radio, .tooltip-icon) {
-      --ui-radius-pill: 48% 52% 46% 54% / 53% 46% 54% 47%;
-    }
-
-    /* The dashed accents; every other line stays solid. */
-    &:is(.sketch, .sketch *) {
-      &.checkbox {
-        --ui-line-style: dashed;
-      }
-
-      &:is(.divider, .data-table) {
-        --ui-rule-style: dashed;
-      }
-    }
-  }
-}
-
-/* Solo: the look on one unstyled element. It uses standalone fallbacks rather
-   than material tokens inherited from an aesthetic around it. */
-.sketch-solo {
-  --_sketch-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
-
-  border: 1px solid var(--_sketch-ink);
-  /* The surface shape: the element this exists for is usually a pane. An action
-     takes the control shape below. */
-  border-radius: var(--sketch-radius-surface, 80px 4px 75px 5px / 3px 70px 4px 80px);
-  /* The aesthetic's neutral depth cue, not the ink: the class casts its 2px
-     offset in the depth colour, and casting a solo pane in full ink would read
-     as a heavier, neobrutalist slab. The depth colour is a literal, for the reason
-     `.glass-solo` gives. */
-  box-shadow: 2px 2px 0 0 light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
-  font-family: var(--font-sketch, cursive);
-}
-
-/* An action takes the expressive control shape. */
-.sketch-solo:is(
-  button,
-  a[href],
-  [role="button"],
-  summary,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-) {
-  border-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
-}
-
-/* With `.sketch-rounded`, the rounded outlines, through their own knobs. */
-.sketch-solo.sketch-rounded {
-  border-radius: var(--sketch-radius-surface-rounded, 38px 16px 36px 17px / 16px 34px 17px 32px);
-}
-
-.sketch-solo.sketch-rounded:is(
-  button,
-  a[href],
-  [role="button"],
-  summary,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-) {
-  border-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
-}
-
-/* This entrypoint may be the only package stylesheet loaded, so it cannot rely
-   on theme.css's forced-colors material reset. */
-@media (forced-colors: active) {
-  .sketch-solo {
-    border-style: solid;
-  }
-}

package/dist/tw/components/button.css

@@ -1,139 +0,0 @@
-@reference "tailwindcss";
-@import "../theme.css";
-@reference "../box.css";
-
-/* A filled, edgeless, raised box you can press. `box` paints it; everything
-   here is what makes it a button rather than some other box.
-
-   The resting values are the published default: a button with no presentation
-   class is solid and edgeless, and that is a decision written on three lines
-   rather than a `var()` fallback buried in an expression. */
-@utility btn {
-  --_d-fill: 100%;
-  --_d-fg-on-fill: 100%;
-  --_d-border: 0%;
-  --_d-elevation: 1;
-
-  @apply box box-hover box-active relative inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-4 py-2 whitespace-nowrap no-underline select-none;
-
-  min-height: var(--control-height);
-  /* The vertical padding gives back the line `box` draws, so a default button
-     is exactly `--control-height` tall like `.ipt` beside it, under any
-     aesthetic's line width. At the default 16px/1.5 text the label and the
-     padding fill it; the size and padding modifiers set their own. */
-  padding-block: calc(0.5rem - var(--_width));
-  /* The surrounding font, not the user agent's smaller button one, on every
-     entry: `/components` carries no reset to say so, and a `.btn` link and a
-     `.btn` button have to print the same label. `.sm` and `.lg` set their own
-     size over this. */
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  /* The label is material, shared with `.badge`: weight, tracking, case, and a
-     text shadow, set by an aesthetic as tokens (`.chunky-tile`'s heavier,
-     tracked label), and a consumer's own `font-*`, `tracking-*`, `uppercase`, or
-     text-shadow utility still beats the aesthetic. Tracking has no fallback on
-     purpose: undefined, the declaration is invalid at computed-value time and
-     `letter-spacing` inherits, which is what it did before the slot existed.
-     Case and shadow fall back to `none`, which is what a button already does:
-     the user agent stops both inheriting into one. The shadow is written
-     without a colour, so it takes the label's own and cannot lower its
-     contrast. See docs/internal/model.md#cascade-layers. */
-  font-weight: var(--ui-label-weight, var(--font-weight-semibold));
-  letter-spacing: var(--ui-label-tracking);
-  text-transform: var(--ui-label-case, none);
-  text-shadow: var(--ui-label-shadow, none);
-
-  &.sm {
-    @apply min-h-8 px-3 py-1 text-sm;
-
-    --_scale-size: 0.75;
-  }
-
-  &.lg {
-    @apply min-h-12 px-5 py-2.5 text-[1.0625rem];
-
-    --_scale-size: 1.25;
-  }
-
-  &.icon {
-    @apply aspect-square p-2;
-
-    min-width: var(--control-height);
-  }
-
-  /* The size steps for an icon button, square at each: `.sm`'s 2rem, with the
-     padding giving back the line width the way the default button's does, and
-     `.lg`'s 3rem. Each names its width as well as its height, because WebKit
-     does not let `aspect-ratio` widen a box past its `min-width`. */
-  &.icon.sm {
-    min-width: 2rem;
-    padding: calc(0.375rem - var(--_width));
-  }
-
-  &.icon.lg {
-    min-width: 3rem;
-  }
-
-  /* Bare `sm`/`lg` are the size modifier's class names, so `p-` prefixes here.
-     `.p-xs` is the tightest step, below `.p-sm`: a chip-sized button in a
-     toolbar or a table cell.
-
-     `.icon` drops both floors -- `min-width` from its own base rule above and
-     `min-height` from `--control-height` -- at every padding tier; labeled
-     buttons keep the height floor everywhere but `.p-xs`. `.icon` is already
-     square: `aspect-square` ties its width to whatever height it lands on, so a
-     surviving height floor would keep the button bigger than its own glyph
-     however tight the padding asked to be. */
-  &.p-xs {
-    @apply px-2 py-0.5;
-
-    --_scale-pad: 0.5;
-
-    /* The one padding step that also drops the size floor for a labeled
-       button. At this tier the button is a chip in a toolbar or a table
-       cell, where `--control-height` is taller than the row it sits in;
-       every other size and padding class keeps the floor, so a plain button
-       stays a comfortable target. */
-    min-height: 0;
-
-    &.icon {
-      @apply p-0.5;
-
-      min-width: 0;
-    }
-  }
-
-  &.p-sm {
-    @apply px-2.5 py-1;
-
-    --_scale-pad: 0.75;
-
-    &.icon {
-      @apply p-1;
-
-      min-width: 0;
-      min-height: 0;
-    }
-  }
-
-  &.p-lg {
-    @apply px-6 py-3;
-
-    --_scale-pad: 1.25;
-
-    &.icon {
-      @apply p-3;
-
-      min-width: 0;
-      min-height: 0;
-    }
-  }
-
-  /* A pill normally takes the round material ahead of the box radius. Sketch
-     gives this token the button's own box outline; a bevel still cuts the full
-     radius to points under cyber. */
-  &.pill {
-    border-radius: var(--ui-radius-pill, calc(infinity * 1px));
-  }
-}

package/dist/tw/components/index.css

@@ -1,36 +0,0 @@
-/* The layer map, stated before any import uses a layer -- see `theme.css`.
-   Tailwind's utilities are imported into `utilities` the way
-   `tailwindcss/index.css` does it, so every component lands there on this
-   entrypoint and on `/native` too, exactly where `.` already puts them. Without
-   `layer(utilities)` the CLI emitted them unlayered here, and they beat every
-   consumer rule on these two entries alone. */
-@layer theme, base, components, utilities;
-
-/* The theme before `@reference "tailwindcss"`, as `native.css` has it:
-   Tailwind writes the theme's variables at the first `@theme` it meets, and
-   after the reference that is Tailwind's own reference-only one. See
-   docs/internal/model.md (Which files import the theme). */
-@import "../theme.css";
-@reference "tailwindcss";
-@import "tailwindcss/utilities.css" layer(utilities);
-/* Everything that is not `src/` -- see the note in `index.css`. Keeps a class
-   name in a docs code fence from shipping as a real rule in `dist/components.css`. */
-@import "../typography.css";
-@import "../box.css";
-@import "./button.css";
-@import "./feedback.css";
-@import "./form.css";
-@import "./loader.css";
-@import "./surface.css";
-@import "./tooltip.css";
-
-/* The composition utilities -- `box`, `box-hover`, `box-active`, `loader-mask`,
-   `text-control`, `surface`, `input-group` -- are `@utility` rules whose bodies
-   the content scan will not emit on its own. `box` and friends appear only as
-   `@utility` blocks and `@apply` targets; `text-control`, `surface` and
-   `input-group` appear only inside `:is()`/`:where()` argument lists in
-   `intent.css` and `form.css`, never as a selector of their own. Safelisting
-   all seven makes the emission deliberate; the composition-body check in
-   `exports.test.ts` fails the build if one is dropped. `text-control` and
-   `surface` are also documented as consumer-usable on their own. */
-@source inline("box box-hover box-active loader-mask text-control surface input-group unadorned text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt email password url tel search date datetime month week time icon left right textarea select checkbox radio switch alert alert-icon badge skeleton progress tooltip tooltip-bubble tooltip-icon card panel interactive flush neutral solid soft ghost edged edgeless flat raised floating loader");

package/dist/tw/components/loader.css

@@ -1,116 +0,0 @@
-@source inline("loader dots-wave dots-fade dots-queue dots-rotate dots-grow dots-grow-alternate dot-bounce bars-wave pulse-ring");
-
-/* The mask machinery, shared by the loader and by any component that shows a
-   spinner of its own. Artwork is a mask rather than an image so it takes its
-   colour from whatever paints behind it, which is the whole indicator contract:
-   an intent class recolours the loader and nothing else has to know.
-
-   Each artwork's closing `style` tag is percent-encoded. A stylesheet pasted
-   into an HTML `<style>` element ends at the first literal close tag, so one
-   left raw would silently drop every rule after it; the data URI decodes the
-   escape before the SVG is parsed, so the artwork is unchanged. The exports
-   test fails a build that ships the raw sequence. */
-@utility loader-mask {
-  mask-image: var(--loader-art);
-  -webkit-mask-image: var(--loader-art);
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-position: center;
-}
-
-/* In `utilities`, beside the loader and art utilities it defaults for -- see
-   the seams note in `form.css`. */
-@layer utilities {
-  .loader:not(
-    :where(
-      .dots-wave,
-      .dots-fade,
-      .dots-queue,
-      .dots-rotate,
-      .dots-grow,
-      .dots-grow-alternate,
-      .dot-bounce,
-      .bars-wave,
-      .pulse-ring
-    )
-  ) {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}%3C/style%3E<g class='spinner_V8m1'><circle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'></circle></g></svg>");
-  }
-}
-
-@utility dots-wave {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_8HQG{0%,57.14%{animation-timing-function:cubic-bezier(.33,.66,.66,1);transform:translate(0)}28.57%{animation-timing-function:cubic-bezier(.33,0,.66,.33);transform:translateY(-6px)}to{transform:translate(0)}}.spinner_qM83{animation:spinner_8HQG 1.05s infinite}%3C/style%3E<circle class='spinner_qM83' cx='4' cy='12' r='3'/><circle class='spinner_qM83' cx='12' cy='12' r='3' style='animation-delay:.1s'/><circle class='spinner_qM83' cx='20' cy='12' r='3' style='animation-delay:.2s'/></svg>");
-}
-
-@utility dots-fade {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.dot{animation:dot-anim 1s ease-in-out infinite;fill:currentColor}.d1{animation-delay:-0.32s}.d2{animation-delay:-0.16s}@keyframes dot-anim{0%,80%,100%{transform:scale(0.6);opacity:0.2}40%{transform:scale(1);opacity:1}}%3C/style%3E<circle class='dot d1' cx='4' cy='12' r='3' transform-origin='4px 12px'></circle><circle class='dot d2' cx='12' cy='12' r='3' transform-origin='12px 12px'></circle><circle class='dot d3' cx='20' cy='12' r='3' transform-origin='20px 12px'></circle></svg>");
-}
-
-@utility dots-queue {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}%3C/style%3E<circle class='spinner_nOfF' cx='4' cy='12' r='3'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-.5s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1.5s'/></svg>");
-}
-
-@utility dots-rotate {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_XVY9{50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}%3C/style%3E<circle cx='12' cy='12' r='3'/><g style='transform-origin:center;animation:spinner_XVY9 1s cubic-bezier(.36,.6,.31,1) infinite'><circle cx='4' cy='12' r='3'/><circle cx='20' cy='12' r='3'/></g></svg>");
-}
-
-@utility dots-grow {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_xe7Q{93.75%,to{r:3px}46.875%{r:.2px}}.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}%3C/style%3E<circle class='spinner_b2T7' cx='4' cy='12' r='3'/><circle class='spinner_b2T7' cx='12' cy='12' r='3' style='animation-delay:-.65s'/><circle class='spinner_b2T7' cx='20' cy='12' r='3' style='animation-delay:-.5s'/></svg>");
-}
-
-@utility dots-grow-alternate {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qhi1{0%,to{r:1.5px}50%{r:3px}}.spinner_I8Q1{animation:spinner_qhi1 .75s linear infinite}%3C/style%3E<circle class='spinner_I8Q1' cx='4' cy='12' r='1.5'/><circle class='spinner_I8Q1' cx='12' cy='12' r='3' style='animation-delay:-.375s'/><circle class='spinner_I8Q1' cx='20' cy='12' r='1.5'/></svg>");
-}
-
-@utility dot-bounce {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_YeBj{0%{animation-timing-function:cubic-bezier(.33,0,.66,.33);cy:5px}46.875%{cy:20px;rx:4px;ry:4px}50%{animation-timing-function:cubic-bezier(.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px}53.125%{rx:4px;ry:4px}to{cy:5px}}%3C/style%3E<circle cx='12' cy='5' style='animation:spinner_YeBj .8s infinite' r='4'/></svg>");
-}
-
-@utility bars-wave {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.bar{animation:bar-anim 1s ease-in-out infinite;fill:currentColor}.b1{animation-delay:-0.4s}.b2{animation-delay:-0.2s}@keyframes bar-anim{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}%3C/style%3E<rect class='bar b1' x='3' y='2' width='4' height='20' rx='2' transform-origin='5px 12px'></rect><rect class='bar b2' x='10' y='2' width='4' height='20' rx='2' transform-origin='12px 12px'></rect><rect class='bar b3' x='17' y='2' width='4' height='20' rx='2' transform-origin='19px 12px'></rect></svg>");
-}
-
-@utility pulse-ring {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.pulse{animation:pulse-anim 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;stroke:currentColor;transform-origin:center}.p2{animation-delay:-0.6s}@keyframes pulse-anim{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}%3C/style%3E<circle class='pulse p1' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle><circle class='pulse p2' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle></svg>");
-}
-
-/* A loader takes a colour and its own geometry, and nothing else: no fill, no
-   edge, no silhouette. `--intent-color` defaults to `currentColor` for
-   indicators, so a loader inside filled content matches the text around it and
-   `.loader.success` is green. */
-@utility loader {
-  @apply loader-mask inline-block size-7 [&.lg]:size-9 [&.sm]:size-5;
-
-  color: var(--intent-color);
-  background-color: currentColor;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .loader {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-dasharray='42 18'/></svg>");
-  }
-
-  .dots-wave,
-  .dots-fade,
-  .dots-queue,
-  .dots-rotate,
-  .dots-grow,
-  .dots-grow-alternate {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='12' r='3'/><circle cx='12' cy='12' r='3'/><circle cx='20' cy='12' r='3'/></svg>");
-  }
-
-  .dot-bounce {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='4'/></svg>");
-  }
-
-  .bars-wave {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='5' width='4' height='14' rx='2'/><rect x='10' y='5' width='4' height='14' rx='2'/><rect x='17' y='5' width='4' height='14' rx='2'/></svg>");
-  }
-
-  .pulse-ring {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='3'/></svg>");
-  }
-}