@dxlbnl/ui 0.1.0

package/dist/tokens/layout.css

@@ -0,0 +1,144 @@
+/* =========================================================
+   DEXTERLABS // LAYOUT HELPERS
+   Depends on: tokens.css
+   ========================================================= */
+
+/* ── Container ──────────────────────────────────────────── */
+.container {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 32px 80px;
+  container-type: inline-size;
+}
+
+.container-md {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 32px 64px;
+  container-type: inline-size;
+}
+
+.container-sm {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 0 32px 48px;
+  container-type: inline-size;
+}
+
+@media (max-width: 720px) {
+  .container,
+  .container-md,
+  .container-sm {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
+
+/* ── Rail (fixed sidebar + scrollable main) ─────────────── */
+.rail-layout {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.rail-sidebar {
+  width: 200px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--rule);
+  background: var(--bg-rail);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.rail-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px;
+  background: var(--bg);
+}
+
+@media (max-width: 720px) {
+  .rail-sidebar { display: none; }
+  .rail-main    { padding: 16px; }
+}
+
+/* ── Grids ───────────────────────────────────────────────── */
+.grid   { display: grid; gap: var(--gap, 16px); }
+.grid-1 { grid-template-columns: 1fr; }
+.grid-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-4 { grid-template-columns: repeat(4, 1fr); }
+.grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
+
+/* Card grid: 3 → 2 → 1 col via container query */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  container-type: inline-size;
+}
+
+@container (max-width: 900px) { .card-grid { grid-template-columns: 1fr 1fr; } }
+@container (max-width: 720px) { .card-grid { grid-template-columns: 1fr; } }
+
+/* Split layouts */
+.split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--gap, 32px);
+}
+
+.split-aside {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: var(--gap, 32px);
+}
+
+@container (max-width: 720px) {
+  .split,
+  .split-aside { grid-template-columns: 1fr; }
+}
+
+/* ── Flex stacks ─────────────────────────────────────────── */
+.stack    { display: flex; flex-direction: column; gap: var(--gap, 16px); }
+.stack-sm { --gap: 8px; }
+.stack-lg { --gap: 32px; }
+
+.inline    { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
+.inline-sm { --gap: 6px; }
+.inline-lg { --gap: 24px; }
+
+.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+
+/* ── Dividers ────────────────────────────────────────────── */
+.rule        { border: none; border-top: 1px solid var(--rule); margin: 0; }
+.rule-dashed { border: none; border-top: 1px dashed var(--rule); margin: 0; }
+.rule-strong { border: none; border-top: 1px solid var(--rule-strong); margin: 0; }
+
+/* ── Padding utilities ───────────────────────────────────── */
+.p-1  { padding: 8px; }
+.p-2  { padding: 16px; }
+.p-3  { padding: 24px; }
+.p-4  { padding: 32px; }
+.px-2 { padding-left: 16px; padding-right: 16px; }
+.px-4 { padding-left: 32px; padding-right: 32px; }
+.py-2 { padding-top: 16px; padding-bottom: 16px; }
+.py-5 { padding-top: 40px; padding-bottom: 40px; }
+
+/* ── Surface helpers ─────────────────────────────────────── */
+.surface-rail   { background: var(--bg-rail); }
+.surface-elev   { background: var(--bg-elev); }
+.surface-sunken { background: var(--bg-sunken); }
+
+/* ── Border helpers ──────────────────────────────────────── */
+.bordered        { border: 1px solid var(--rule); }
+.bordered-strong { border: 1px solid var(--rule-strong); }
+.bordered-amber  { border: 1px solid var(--amber); }
+
+/* ── Visibility ──────────────────────────────────────────── */
+.hidden { display: none !important; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
+
+@media (max-width: 720px)  { .hide-mobile  { display: none; } }
+@media (min-width: 721px)  { .hide-desktop { display: none; } }

package/dist/tokens/patterns.css

@@ -0,0 +1,281 @@
+/* =========================================================
+   DEXTERLABS // PATTERNS
+   Composite component patterns built on design tokens.
+   Depends on: tokens.css + layout.css
+   ========================================================= */
+
+/* ── Page hero ───────────────────────────────────────────── */
+.page-hero { padding: 48px 0 40px; }
+.page-hero.bordered { border-bottom: 1px solid var(--rule); }
+
+.page-hero .eyebrow {
+  font-family: var(--mono);
+  font-size: var(--t-micro);
+  letter-spacing: 0.12em;
+  color: var(--ink-faint);
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+
+.page-hero h1 {
+  font-weight: 500;
+  font-size: var(--t-hero);
+  line-height: 1;
+  letter-spacing: -0.03em;
+  margin: 0;
+}
+
+.page-hero h1 em { font-style: normal; color: var(--ink-faint); }
+
+.page-hero .sub {
+  margin-top: 20px;
+  font-size: var(--t-lede);
+  color: var(--ink-dim);
+  line-height: 1.55;
+  max-width: 62ch;
+}
+
+/* ── Section head ────────────────────────────────────────── */
+.section-head {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 40px 0 12px;
+  border-bottom: 1px solid var(--rule);
+}
+
+.section-head .num {
+  font-family: var(--mono);
+  font-size: var(--t-mono);
+  color: var(--ink-faint);
+  letter-spacing: 0.12em;
+}
+
+.section-head .row { display: flex; align-items: baseline; gap: 16px; }
+
+.section-head h2 {
+  font-weight: 500;
+  font-size: var(--t-h3);
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+
+.section-head .sub {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: var(--t-mono);
+  color: var(--ink-dim);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* ── Section foot ────────────────────────────────────────── */
+.section-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-family: var(--mono);
+  font-size: var(--t-mono);
+  letter-spacing: 0.06em;
+  padding-top: 16px;
+  margin-top: 20px;
+  border-top: 1px solid var(--rule);
+}
+
+.section-foot .link {
+  color: var(--amber);
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color var(--transition);
+}
+.section-foot .link:hover { color: var(--ink); }
+
+.section-foot .meta {
+  color: var(--ink-faint);
+  text-transform: uppercase;
+  font-size: var(--t-micro);
+}
+
+/* ── Stat card ───────────────────────────────────────────── */
+.stat-card {
+  border: 1px solid var(--rule);
+  background: var(--bg-rail);
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.stat-card .stat-label {
+  font-family: var(--mono);
+  font-size: var(--t-micro);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.stat-card .stat-value {
+  font-family: var(--mono);
+  font-size: 32px;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  color: var(--ink);
+}
+.stat-card .stat-value.amber  { color: var(--amber); }
+.stat-card .stat-value.ok     { color: var(--ok); }
+.stat-card .stat-value.danger { color: var(--danger); }
+
+.stat-card .stat-sub {
+  font-family: var(--mono);
+  font-size: var(--t-micro);
+  color: var(--ink-faint);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* ── Key-value list ──────────────────────────────────────── */
+.kv-list { display: flex; flex-direction: column; }
+
+.kv-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 16px;
+  padding: 6px 0;
+  border-bottom: 1px dashed var(--rule);
+  font-family: var(--mono);
+  font-size: var(--t-mono);
+}
+.kv-row:last-child { border-bottom: none; }
+
+.kv-key {
+  color: var(--ink-faint);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.kv-val { color: var(--ink); text-align: right; }
+.kv-val.amber  { color: var(--amber); }
+.kv-val.ok     { color: var(--ok); }
+.kv-val.danger { color: var(--danger); }
+.kv-val.cyan   { color: var(--cyan); }
+
+/* ── Alert ───────────────────────────────────────────────── */
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  border-left: 2px solid;
+  font-size: var(--t-body);
+  line-height: 1.5;
+}
+.alert.ok     { border-color: var(--ok);     background: color-mix(in srgb, var(--ok)     8%, transparent); }
+.alert.amber  { border-color: var(--amber);  background: color-mix(in srgb, var(--amber)  8%, transparent); }
+.alert.danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
+.alert.info   { border-color: var(--cyan);   background: color-mix(in srgb, var(--cyan)   8%, transparent); }
+
+.alert .alert-tag {
+  font-family: var(--mono);
+  font-size: var(--t-micro);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.alert.ok     .alert-tag { color: var(--ok); }
+.alert.amber  .alert-tag { color: var(--amber); }
+.alert.danger .alert-tag { color: var(--danger); }
+.alert.info   .alert-tag { color: var(--cyan); }
+
+.alert .alert-body { display: flex; flex-direction: column; gap: 2px; }
+
+.alert .alert-title {
+  font-family: var(--mono);
+  font-size: var(--t-micro);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.alert.ok     .alert-title { color: var(--ok); }
+.alert.amber  .alert-title { color: var(--amber); }
+.alert.danger .alert-title { color: var(--danger); }
+.alert.info   .alert-title { color: var(--cyan); }
+
+.alert .alert-msg { font-size: var(--t-mono); color: var(--ink-dim); line-height: 1.5; }
+
+/* ── CTA block ───────────────────────────────────────────── */
+.cta-block {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  border: 1px solid var(--amber);
+  padding: 24px 32px;
+  color: inherit;
+  transition: background var(--transition);
+  cursor: pointer;
+}
+.cta-block:hover { background: color-mix(in srgb, var(--amber) 6%, transparent); }
+
+.cta-block .cta-body { display: flex; flex-direction: column; gap: 3px; }
+
+.cta-block .cta-eyebrow {
+  font-family: var(--mono);
+  font-size: var(--t-micro);
+  letter-spacing: 0.12em;
+  color: var(--ink-faint);
+  text-transform: uppercase;
+}
+
+.cta-block .cta-name {
+  font-weight: 500;
+  font-size: var(--t-lede);
+  letter-spacing: -0.01em;
+}
+
+.cta-block .cta-desc { font-size: var(--t-mono); color: var(--ink-dim); line-height: 1.4; }
+
+.cta-block .cta-link {
+  font-family: var(--mono);
+  font-size: var(--t-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--amber);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ── Progress bar ────────────────────────────────────────── */
+.progress { display: flex; flex-direction: column; gap: 4px; width: 100%; }
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--mono);
+  font-size: var(--t-micro);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.progress-track { height: 5px; background: var(--bg-sunken); border: 1px solid var(--rule); }
+.progress-fill  { height: 100%; background: var(--ok); transition: width 0.3s; }
+.progress-fill.amber  { background: var(--amber); }
+.progress-fill.danger { background: var(--danger); }
+
+/* ── Activity row ────────────────────────────────────────── */
+.activity-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 7px 0;
+  border-bottom: 1px dashed var(--rule);
+  font-family: var(--mono);
+  font-size: var(--t-micro);
+  letter-spacing: 0.04em;
+}
+.activity-row:last-child { border-bottom: none; }
+
+.activity-time { color: var(--ink-faint); flex-shrink: 0; }
+.activity-msg  { color: var(--ink-dim); flex: 1; }

package/dist/tokens/tokens.css

@@ -0,0 +1,96 @@
+/* =========================================================
+   DEXTERLABS // DESIGN TOKENS
+   Two palettes: phosphor (dark default) + paper (light)
+   Toggle via [data-palette="paper"] on <html>
+   ========================================================= */
+
+/* ── Phosphor palette (dark default) ──────────────────── */
+:root {
+
+  /* Surfaces */
+  --bg:         #0b0d0c;   /* page background */
+  --bg-rail:    #0f1211;   /* cards, nav, sidebars */
+  --bg-elev:    #141817;   /* elevated surfaces, inline-code bg */
+  --bg-sunken:  #070908;   /* code blocks, status bar, sunken wells */
+
+  /* Ink */
+  --ink:        #d6e2dc;   /* primary text */
+  --ink-dim:    #a4b0a9;   /* secondary / muted text */
+  --ink-faint:  #7a8580;   /* metadata, tertiary, placeholders */
+
+  /* Rules */
+  --rule:        #1d2321;  /* default borders — barely visible */
+  --rule-strong: #2a3330;  /* emphasised borders */
+
+  /* Accents */
+  --amber:  #ffb347;       /* primary accent — CTAs, prices, active, LED */
+  --cyan:   #7cc7d1;       /* secondary — code functions, kind labels, LED */
+  --danger: #ff7a6b;       /* error / destructive */
+  --ok:     #8fd48a;       /* success / online status */
+
+  /* Font stacks */
+  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
+
+  /* Type scale */
+  --t-micro:    12px;
+  --t-mono:     14px;
+  --t-body:     16px;
+  --t-lede:     19px;
+  --t-h3:       24px;
+  --t-h2:       36px;
+  --t-h1:       72px;
+  --t-display:  140px;
+  --t-hero:     clamp(48px, 8vw, 112px);
+  --t-title:    clamp(36px, 5vw, 56px);
+  --t-subtitle: clamp(22px, 3.5vw, 40px);
+
+  /* Spacing — base unit 8px */
+  --u:   8px;
+  --u2:  16px;
+  --u3:  24px;
+  --u4:  32px;
+  --u5:  40px;
+  --u6:  48px;
+  --u7:  56px;
+  --u10: 80px;
+
+  /* Radius */
+  --radius:      2px;   /* buttons, pills, inline code */
+  --radius-card: 4px;   /* cards */
+
+  /* Transitions — color/background only, no transforms */
+  --transition: 0.15s;
+
+  /* Shiki syntax highlighting */
+  --shiki-foreground:              var(--ink);
+  --shiki-background:              var(--bg-sunken);
+  --shiki-token-keyword:           var(--amber);
+  --shiki-token-function:          var(--cyan);
+  --shiki-token-constant:          var(--amber);
+  --shiki-token-string:            #7ec8a0;
+  --shiki-token-string-expression: #7ec8a0;
+  --shiki-token-comment:           var(--ink-faint);
+  --shiki-token-parameter:         var(--ink-dim);
+  --shiki-token-punctuation:       var(--ink-dim);
+  --shiki-token-link:              var(--cyan);
+}
+
+/* ── Paper palette (light) ─────────────────────────────── */
+[data-palette="paper"] {
+  --bg:          #efece4;
+  --bg-rail:     #e6e2d6;
+  --bg-elev:     #f5f2ea;
+  --bg-sunken:   #dfdbce;
+  --ink:         #14110b;
+  --ink-dim:     #3f3b30;
+  --ink-faint:   #5f5a4a;
+  --rule:        #cfcabc;
+  --rule-strong: #a8a192;
+  --amber:       #a04e00;
+  --cyan:        #030304;
+  --danger:      #a83224;
+  --ok:          #356b31;
+  --shiki-token-string:            #2d7a50;
+  --shiki-token-string-expression: #2d7a50;
+}

package/dist/tokens/tokens.stories.svelte

@@ -0,0 +1,107 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import ColorSwatch from "./ColorSwatch.svelte";
+
+  const { Story } = defineMeta({
+    title: "Design Tokens/Palette",
+    parameters: { layout: "fullscreen" },
+  });
+
+  const colorGroups = [
+    { label: "Surfaces", tokens: ["--bg", "--bg-rail", "--bg-elev", "--bg-sunken"] },
+    { label: "Ink", tokens: ["--ink", "--ink-dim", "--ink-faint"] },
+    { label: "Rules", tokens: ["--rule", "--rule-strong"] },
+    { label: "Accents", tokens: ["--amber", "--cyan", "--danger", "--ok"] },
+  ];
+</script>
+
+<Story name="Color Palette"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const bgSwatch = canvas.getByTestId("--bg");
+    await expect(getComputedStyle(bgSwatch).backgroundColor.startsWith("rgb")).toBe(true);
+    const amberSwatch = canvas.getByTestId("--amber");
+    await expect(getComputedStyle(amberSwatch).backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+  }}>
+  <ColorSwatch groups={colorGroups} />
+</Story>
+
+<Story name="Typography Scale"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(getComputedStyle(canvas.getByTestId("scale-h1")).fontSize).toBe("72px");
+    await expect(getComputedStyle(canvas.getByTestId("scale-h2")).fontSize).toBe("36px");
+    await expect(getComputedStyle(canvas.getByTestId("scale-h3")).fontSize).toBe("24px");
+    await expect(getComputedStyle(canvas.getByTestId("scale-lede")).fontSize).toBe("19px");
+    await expect(getComputedStyle(canvas.getByTestId("scale-body")).fontSize).toBe("16px");
+    const mono = canvas.getByTestId("scale-mono");
+    await expect(getComputedStyle(mono).textTransform).toBe("uppercase");
+    await expect(getComputedStyle(mono).fontFamily.toLowerCase().includes("jetbrains") || getComputedStyle(mono).fontFamily.toLowerCase().includes("mono")).toBe(true);
+    const eyebrow = canvas.getByTestId("scale-eyebrow");
+    await expect(getComputedStyle(eyebrow).fontSize).toBe("12px");
+  }}>
+  <div style="padding: 24px; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; gap: 20px;">
+    <div>
+      <p class="eyebrow" style="margin-bottom: 6px; color: var(--ink-faint);">.display-heading</p>
+      <div class="display-heading" style="overflow: hidden; line-height: 1; max-height: 160px;">Dx</div>
+    </div>
+    <div>
+      <p class="eyebrow" style="margin-bottom: 6px; color: var(--ink-faint);">.hero-heading</p>
+      <div class="hero-heading" style="overflow: hidden; white-space: nowrap;">Dexterlabs</div>
+    </div>
+    <div style="border-top: 1px solid var(--rule); padding-top: 20px; display: flex; flex-direction: column; gap: 16px;">
+      <div data-testid="scale-h1" class="h1">H1 — Design System</div>
+      <div data-testid="scale-h2" class="h2">H2 — Design System</div>
+      <div data-testid="scale-h3" class="h3">H3 — Design System</div>
+    </div>
+    <div style="border-top: 1px solid var(--rule); padding-top: 20px; display: flex; flex-direction: column; gap: 12px;">
+      <p data-testid="scale-lede" class="body-lede">Lede — a brief, impactful opening sentence that draws the reader in.</p>
+      <p data-testid="scale-body" class="body-text">Body text — the quick brown fox jumps over the lazy dog.</p>
+      <div data-testid="scale-mono" class="mono-label">Status · Active · v1.0</div>
+      <p data-testid="scale-eyebrow" class="eyebrow">Category label</p>
+    </div>
+  </div>
+</Story>
+
+<Story name="Spacing Scale"
+  play={async ({ canvasElement }) => {
+    await expect(canvasElement.firstElementChild).toBeVisible();
+    const probe = document.createElement("div");
+    probe.style.width = "var(--u4)";
+    document.body.appendChild(probe);
+    const resolved = getComputedStyle(probe).width;
+    document.body.removeChild(probe);
+    await expect(resolved).toBe("32px");
+  }}>
+  <div style="padding: 24px; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; gap: 16px;">
+    <p class="eyebrow" style="color: var(--ink-faint); margin-bottom: 8px;">Spacing Scale — base unit 8px</p>
+    <div style="display: flex; flex-direction: column; gap: 12px;">
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <span class="mono-label" style="width: 60px; color: var(--ink-faint);">--u</span>
+        <div style="height: 16px; width: var(--u); background: var(--amber);"></div>
+        <span class="mono-label" style="color: var(--ink-dim);">8px</span>
+      </div>
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <span class="mono-label" style="width: 60px; color: var(--ink-faint);">--u2</span>
+        <div style="height: 16px; width: var(--u2); background: var(--amber);"></div>
+        <span class="mono-label" style="color: var(--ink-dim);">16px</span>
+      </div>
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <span class="mono-label" style="width: 60px; color: var(--ink-faint);">--u3</span>
+        <div style="height: 16px; width: var(--u3); background: var(--amber);"></div>
+        <span class="mono-label" style="color: var(--ink-dim);">24px</span>
+      </div>
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <span class="mono-label" style="width: 60px; color: var(--ink-faint);">--u4</span>
+        <div style="height: 16px; width: var(--u4); background: var(--amber);"></div>
+        <span class="mono-label" style="color: var(--ink-dim);">32px</span>
+      </div>
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <span class="mono-label" style="width: 60px; color: var(--ink-faint);">--u5</span>
+        <div style="height: 16px; width: var(--u5); background: var(--amber);"></div>
+        <span class="mono-label" style="color: var(--ink-dim);">40px</span>
+      </div>
+    </div>
+  </div>
+</Story>

package/dist/tokens/tokens.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Tokens: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tokens = InstanceType<typeof Tokens>;
+export default Tokens;