@wix/web5-core 1.56.0

package/dist/cjs/styles/base-utilities.css

@@ -0,0 +1,424 @@
+/*
+ * Base utility classes — shared between all client packages.
+ * All values are driven by CSS variables so clients can override via tokens.
+ *
+ * These are intentionally UNLAYERED so they can override Tailwind's preflight
+ * reset (which is also unlayered in the build output). Class selectors
+ * naturally beat element selectors via specificity.
+ *
+ * Font family is NOT declared on these utilities — it cascades from the
+ * `#root` rule below via the zero-specificity `:where()` inherit rule.
+ * See design log #086 for the rationale.
+ */
+
+/*
+ * Default font cascade — clients set `--font-sans` in their globals.css and
+ * every descendant of `#root` inherits it (including form elements and
+ * third-party widgets that would otherwise fall back to Arial / system).
+ *
+ * These rules live in `@layer base` (not unlayered) on purpose: the inherit
+ * rule must lose to Tailwind's `font-*` utilities so that `font-display`,
+ * `font-mono`, etc. still take effect on descendants. An unlayered rule would
+ * beat the layered `@layer utilities` utilities regardless of specificity,
+ * silently killing every font utility under `#root`. Base sits before
+ * utilities in Tailwind's layer order, so utilities win; non-utility elements
+ * still inherit. See design log #086.
+ */
+@layer base {
+  #root {
+    font-family: var(--font-sans);
+  }
+  :where(#root *, #root *::before, #root *::after) {
+    font-family: inherit;
+  }
+}
+
+/* All headings use the display font regardless of which heading utility class
+ * (if any) they carry. Scoped to #root with :where() so the rule has (0,0,1)
+ * specificity — beats body inheritance but loses to any class-based override.
+ * Non-overriding clients have `--font-display` aliased to `--font-sans` so
+ * this is a visual no-op for them. */
+:where(#root) :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--font-display);
+}
+
+.heading-xl {
+  font-family: var(--font-display);
+  font-size: 3rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.heading-lg {
+  font-family: var(--font-display);
+  font-size: 2.375rem;
+  line-height: 1.263;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+.heading-md {
+  font-family: var(--font-display);
+  font-size: 1.875rem;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.heading-sm {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  line-height: 1.333;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.container-padding-x {
+  padding-inline: 1.5rem;
+}
+.section-padding-y {
+  padding-block: 6rem;
+}
+.section-title-gap-xl {
+  gap: 1.5rem;
+}
+.section-title-gap-lg {
+  gap: 1.25rem;
+}
+.section-title-gap-md {
+  gap: 1.25rem;
+}
+.section-title-gap-sm {
+  gap: 1rem;
+}
+
+/* Heading with gradient */
+.heading-lg-gradient {
+  font-family: var(--font-display);
+  font-size: 60px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 75px;
+  letter-spacing: -0.36px;
+  background: linear-gradient(164.31deg, var(--heading-lg-gradient-from) 30.171%, var(--heading-lg-gradient-to) 79.043%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Heading h3 */
+.heading-h3 {
+  font-family: var(--font-display);
+  color: var(--heading-h3-color);
+  font-size: 25px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+/* Section description */
+.section-description {
+  color: var(--section-description-color);
+  font-size: var(--section-description-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--section-description-line-height);
+}
+
+/* Markdown content */
+.markdown-content {
+  color: var(--markdown-content-color);
+  font-size: 18px;
+  font-style: normal;
+  line-height: 28px;
+}
+
+.markdown-content p {
+  color: var(--markdown-content-color);
+  font-size: 18px;
+  font-style: normal;
+  line-height: 28px;
+}
+
+.markdown-content strong,
+.markdown-content p strong {
+  color: var(--markdown-content-color);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+/* Card title with gradient color */
+.card-title-gradient {
+  font-family: var(--font-display);
+  color: var(--card-title-gradient-color);
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 44px;
+}
+
+/* Callouts use the display font (e.g. Poppins in Circana) regardless of body
+ * font. Tied to the Tailwind size utilities so any element using
+ * `text-callout*` automatically picks up the display family. */
+.text-callout,
+.text-callout-block,
+.text-callout-block-lg,
+.text-callout-block-xl {
+  font-family: var(--font-display);
+}
+
+/* Body text — default paragraph style (18px/28px) */
+.body-text {
+  color: var(--body-text-color);
+  font-size: var(--body-text-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--body-text-line-height);
+}
+
+/* Body text applied to prose/markdown child paragraphs */
+.body-text-prose p {
+  color: var(--body-text-color);
+  font-size: var(--body-text-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--body-text-line-height);
+}
+
+/* Body small text — compact paragraph style (15px/24px) */
+.body-small-text {
+  color: var(--body-small-text-color);
+  font-size: var(--body-small-text-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--body-small-text-line-height);
+}
+
+/* Body small text applied to prose/markdown child paragraphs */
+.body-small-text-prose p {
+  color: var(--body-small-text-color);
+  font-size: var(--body-small-text-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--body-small-text-line-height);
+}
+
+/* Description text */
+.description-text {
+  color: var(--description-text-color);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+/* Hero content */
+.hero-content {
+  color: var(--hero-content-color);
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 26px;
+}
+
+/* Hero content prose overrides */
+.hero-content .prose,
+.hero-content .prose-slate {
+  --tw-prose-body: var(--hero-content-color);
+  --tw-prose-headings: var(--hero-content-color);
+  --tw-prose-lead: var(--hero-content-color);
+  --tw-prose-bold: var(--hero-content-color);
+  color: var(--hero-content-color);
+}
+
+.hero-content .prose p,
+.hero-content .prose-slate p {
+  color: var(--hero-content-color);
+}
+
+/* Hero button active */
+.hero-button-active {
+  color: var(--hero-button-active-color);
+}
+
+.hero-button-active span {
+  color: var(--hero-button-active-color);
+}
+
+/* Solution label */
+.solution-label {
+  color: var(--solution-label-color);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+}
+
+/* View solution link */
+.view-solution-link {
+  color: var(--view-solution-link-color);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+/* Feature heading */
+.heading-feature {
+  color: var(--heading-feature-color);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 30px;
+}
+
+/* Responsive section padding */
+.theme-section-padding-y {
+  padding-top: var(--section-padding-y-mobile);
+  padding-bottom: var(--section-padding-y-mobile);
+}
+
+/* Section container padding */
+.theme-section-container {
+  padding-left: var(--section-padding-x-mobile);
+  padding-right: var(--section-padding-x-mobile);
+}
+
+@media (min-width: 768px) {
+  .section-description {
+    font-size: var(--section-description-font-size-tablet);
+    line-height: var(--section-description-line-height-tablet);
+  }
+
+  .theme-section-padding-y {
+    padding-top: var(--section-padding-y-tablet);
+    padding-bottom: var(--section-padding-y-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  .theme-section-padding-y {
+    padding-top: var(--section-padding-y-desktop);
+    padding-bottom: var(--section-padding-y-desktop);
+  }
+
+  .theme-section-container {
+    padding-left: var(--section-padding-x-desktop);
+    padding-right: var(--section-padding-x-desktop);
+  }
+}
+
+/*
+ * Tailwind v3→v4 compatibility: restore `border-color: gray-200` default.
+ * Tailwind v4 changed the default to `currentcolor`.
+ */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  body {
+    letter-spacing: var(--tracking-normal, -0.02em);
+    color: hsl(var(--foreground));
+  }
+
+  button {
+    cursor: pointer;
+  }
+}
+
+/* Hide scrollbar while keeping scroll functionality */
+.scrollbar-hide {
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Ask-about-this context highlight styles */
+[data-context-hover],
+[data-context-selected] {
+  border-radius: 0.375rem;
+  outline: 2px solid rgb(216 180 254); /* purple-300 */
+  background-color: rgb(250 245 255 / 0.4); /* purple-50/40 */
+  transition: outline-color 150ms, background-color 150ms;
+}
+
+[data-context-selected] {
+  outline-color: rgb(192 132 252); /* purple-400 */
+  background-color: rgb(250 245 255 / 0.6); /* purple-50/60 */
+}
+
+/* Typewriter cursor blink animation */
+@keyframes blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+
+/* Restore Tailwind default animation keyframes (cleared by tw-animate-css) */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* OptimizedImage placeholder shimmer */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* Global accessible focus indicator — only visible on keyboard navigation */
+:focus-visible {
+  outline: 2px solid rgba(128, 0, 177, 0.5);
+  outline-offset: 2px;
+}
+
+
+@media (max-width: 64rem) {
+  .heading-xl {
+    font-size: 1.875rem;
+    line-height: 1.2;
+  }
+  .heading-lg {
+    font-size: 1.875rem;
+    line-height: 1.2;
+  }
+  .heading-md {
+    font-size: 1.5rem;
+    line-height: 1.2;
+  }
+  .heading-sm {
+    font-size: 1.5rem;
+    line-height: 1.333;
+  }
+  .container-padding-x {
+    padding-inline: 1.5rem;
+  }
+  .section-padding-y {
+    padding-bottom: 4rem;
+    padding-block: 4rem;
+  }
+  .section-title-gap-xl {
+    gap: 1rem;
+  }
+  .section-title-gap-lg {
+    gap: 1rem;
+  }
+  .section-title-gap-md {
+    gap: 1rem;
+  }
+  .section-title-gap-sm {
+    gap: 1rem;
+  }
+}

package/dist/cjs/styles/components.css

@@ -0,0 +1,6 @@
+@import '../components/ui/SearchSection.css';
+@import '../components/ui/PromptEntryEmptyState.css';
+@import '../components/ui/FeedbackBar.css';
+@import '../components/ui/Disclaimer.css';
+@import '../components/ui/PlacementLoader.css';
+@import '../components/placement/PlacementResponseRenderer.css';

package/dist/cjs/styles/prompt-input-tokens.css

@@ -0,0 +1,136 @@
+/*
+ * Prompt-input tokens shared by SearchSection and future external consumers.
+ */
+:root,
+:host {
+  --pi-panel-bg: transparent;
+  --pi-panel-shadow: none;
+  --pi-panel-blur: 0px;
+  --pi-panel-padding-block-start: 12px;
+  --pi-panel-padding-block-end: 24px;
+  --pi-panel-padding-y: var(--pi-panel-padding-block-start)
+    var(--pi-panel-padding-block-end);
+  --pi-panel-mobile-padding-inline: 10px;
+  --pi-panel-mobile-bg: #ffffff;
+  --pi-home-entry-content-radius: 10px 10px 0 0;
+  --pi-home-entry-content-bg: radial-gradient(
+      ellipse 76% 62% at 58% 108%,
+      rgba(249, 187, 169, 0.78) 0,
+      rgba(249, 187, 169, 0.5) 28%,
+      rgba(249, 187, 169, 0.22) 52%,
+      transparent 78%
+    ),
+    radial-gradient(
+      ellipse 54% 48% at 88% 84%,
+      rgba(214, 180, 255, 0.4) 0,
+      rgba(214, 180, 255, 0.24) 36%,
+      transparent 78%
+    ),
+    radial-gradient(
+      ellipse 46% 40% at 14% 88%,
+      rgba(214, 190, 255, 0.26) 0,
+      rgba(214, 190, 255, 0.14) 34%,
+      transparent 74%
+    ),
+    radial-gradient(
+      ellipse 34% 24% at 86% 26%,
+      rgba(227, 208, 255, 0.24) 0,
+      transparent 72%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.98),
+      rgba(255, 255, 255, 0.92)
+    );
+  --pi-home-entry-copy-gap: 1.875rem;
+  --pi-home-entry-copy-color: #2b2b2b;
+  --pi-home-entry-eyebrow-color: #2b2b2b;
+  --pi-home-entry-description-color: #2b2b2b;
+  --pi-home-entry-chip-intro-color: #2b2b2b;
+  --pi-home-entry-panel-padding: 1.25rem;
+  --pi-home-entry-panel-radius: 15px;
+  --pi-home-entry-panel-bg: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.7),
+    rgba(43, 43, 43, 0.05)
+  );
+  --pi-home-entry-panel-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --pi-home-entry-panel-blur: 20px;
+  --pi-content-max-w: 651px;
+  --pi-content-min-w: 250px;
+  --pi-stack-gap: 15px;
+  --pi-chip-gap: 10px;
+  --pi-chip-mobile-gap: 0;
+  --pi-chip-mobile-overflow-y: scroll;
+  --pi-field-min-h: 56px;
+  --pi-field-max-h: 227px;
+  --pi-field-border-width: 1px;
+  --pi-home-entry-field-radius: 10px;
+  --pi-field-radius-pill: 80px;
+  --pi-field-radius-multiline: 25px;
+  --pi-field-border: #8000b1;
+  --pi-field-bg: #ffffff;
+  --pi-field-padding-top: 12px;
+  --pi-field-padding-right: 12px;
+  --pi-field-padding-bottom: 12px;
+  --pi-field-padding-left: 24px;
+  --pi-field-padding-top-multiline: 20px;
+  --pi-field-text: #2b2b2b;
+  --pi-field-placeholder: #52575b;
+  --pi-field-caret: #2b2b2b;
+  --pi-field-font-family: Poppins, ui-sans-serif, sans-serif, system-ui;
+  --pi-field-font-size: 15px;
+  --pi-field-line-height: 32px;
+  --pi-field-line-height-multiline: 24px;
+  --pi-field-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --pi-chip-padding-y: 10px;
+  --pi-chip-padding-x: 18px;
+  --pi-chip-radius: 5px;
+  --pi-chip-border: transparent;
+  --pi-chip-bg: #ffffff;
+  --pi-chip-text: #2b2b2b;
+  --pi-chip-font-size: 14px;
+  --pi-chip-line-height: 14px;
+  --pi-chip-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --pi-chip-hover-bg: #f6f6f6;
+  --pi-chip-hover-transform: translateY(-1px);
+  --pi-submit-size: 34px;
+  --pi-submit-radius: 80px;
+  --pi-submit-bg: #e5e5e5;
+  --pi-submit-fg: #909090;
+  --pi-submit-active-bg: #2b2b2b;
+  --pi-submit-active-fg: #ffffff;
+  --pi-submit-bottom: 12px;
+  --pi-submit-icon-size: 16px;
+  --pi-collapsed-btn-min-h: 48px;
+  --pi-collapsed-btn-padding-y: 12px;
+  --pi-collapsed-btn-padding-x: 24px;
+  --pi-collapsed-btn-border: transparent;
+  --pi-collapsed-btn-radius: 999px;
+  --pi-collapsed-btn-bg: #ffffff;
+  --pi-collapsed-btn-fg: #2b2b2b;
+  --pi-collapsed-btn-shadow: 0 0 0 1px rgba(248, 168, 255, 0.04),
+    0 8px 18px -14px rgba(222, 140, 255, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  --pi-collapsed-btn-hover-shadow: 0 0 0 1px rgba(248, 168, 255, 0.08),
+    0 10px 22px -12px rgba(222, 140, 255, 0.28), 0 3px 8px 0 rgba(0, 0, 0, 0.1);
+  --pi-collapsed-btn-font-size: 14px;
+  --pi-collapsed-btn-font-weight: 400;
+  --pi-collapsed-btn-line-height: 32px;
+  --pi-collapsed-btn-inner-bg: #ffffff;
+  --pi-collapsed-btn-decoration: conic-gradient(
+    from 0deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0) 58%,
+    rgba(246, 200, 255, 0.35) 64%,
+    rgba(255, 238, 247, 0.94) 70%,
+    rgba(248, 168, 255, 1) 78%,
+    rgba(255, 184, 220, 0.98) 86%,
+    rgba(246, 200, 255, 0.45) 92%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --pi-collapsed-btn-decoration-opacity: 0.95;
+  --pi-transition-fast: 180ms ease;
+  --pi-transition-medium: 320ms ease;
+}

package/dist/cjs/styles/tailwind-theme.css

@@ -0,0 +1,138 @@
+/*
+ * Tailwind v4 theme bridge — maps CSS custom properties (from base-tokens.css)
+ * to Tailwind's theme system so utilities like `bg-primary`, `text-muted-foreground`
+ * resolve correctly.
+ *
+ * This file must be @import-ed by the consuming app's CSS entry point
+ * alongside the Tailwind directives.
+ */
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-border-subtle: var(--border-subtle);
+  --color-surface-muted: var(--surface-muted);
+  --color-surface-alt: var(--surface-alt);
+  --color-surface-card-border: var(--surface-card-border);
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  /* Semantic text colors */
+  --color-text-body: var(--body-text-color);
+  --color-text-muted: var(--text-muted);
+  --color-text-accent: var(--text-accent);
+  --color-text-accent-hover: var(--text-accent-hover);
+  --color-accent-border: var(--accent-border);
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-sticky-header: var(--shadow-sticky-header);
+
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+
+  /* Section container max-width */
+  --container-section: 1080px;
+  /* Centered max-width for shared SectionTitle (title + single-row description cap) */
+  --container-section-title: 850px;
+
+  /* Section title (shared SectionTitle) — 50/48, weight 600, centered */
+  --text-section-title: 50px;
+  --leading-section-title: 48px;
+  /* Section title on mobile (< md / 768px) — 32/44 */
+  --text-section-title-mobile: 32px;
+  --leading-section-title-mobile: 44px;
+
+  /* Search input placeholder */
+  --text-search-input-hint: 14px;
+
+  /* Table / comparison text sizes */
+  --text-table-body: 13px;
+  --text-table-label: 14px;
+  --text-table-header: 15px;
+  --text-body-sm: var(--body-small-text-font-size);
+  --text-callout: 24px;
+  --text-callout-block: 24px;
+  --text-callout-block-lg: 30px;
+  --text-callout-block-xl: 36px;
+
+  /* Table / comparison line heights */
+  --leading-table-body: 17px;
+  --leading-table-label: 17px;
+  --leading-table-header: 20px;
+  --leading-body-sm: var(--body-small-text-line-height);
+  --leading-callout: 36px;
+
+  /* Placement card body copy — short framing / conversation answers.
+     Figma 128:5257 (Web5_Proto): 20/30, medium weight body with bold
+     leading-phrase emphasis. Used by `PlacementGeneralTextSection` (the
+     placement variant of the fallback section). */
+  --text-placement-body: 20px;
+  --leading-placement-body: 30px;
+}
+
+/* Font tokens use @theme inline so utilities emit `font-family: var(--font-*)`
+   without re-declaring the variable in :root — a plain @theme value of
+   `var(--font-sans)` creates a circular self-reference and Tailwind strips
+   the declaration from the utility, leaving `.font-sans { }` empty. The
+   actual font values are defined by clients in their globals.css. */
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-serif: var(--font-serif);
+  --font-mono: var(--font-mono);
+  --font-display: var(--font-display);
+}

package/dist/cjs/test-types.d.js

@@ -0,0 +1,2 @@
+/// <reference types="@wix/jest-yoshi-preset/types" />
+//# sourceMappingURL=test-types.d.js.map

package/dist/cjs/test-types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/test-types.d.ts"],"sourcesContent":["/// <reference types=\"@wix/jest-yoshi-preset/types\" />\n"],"mappings":"AAAA","ignoreList":[]}