@lumiastream/ui 0.0.1 → 0.0.2-alpha.10

package/README.md

@@ -0,0 +1,81 @@
+# Lumia UI Kit
+
+A modern, Tailwind‑powered component library used across the Lumia Stream ecosystem. It provides production‑ready React components, design tokens, and Storybook documentation—all published as `@lumiastream/ui`.
+
+---
+
+## ✨ Features
+
+| Feature               | Details                                               |
+| --------------------- | ----------------------------------------------------- |
+| **React 18 → 19**     | Built and typed for the latest React majors.          |
+| **Tailwind CSS 4**    | Utility‑first styling with full theme access.         |
+| **TypeScript first**  | 100 % typed public API (`.d.ts` included).            |
+| **Storybook 9**       | Live docs with interactive playgrounds & a11y checks. |
+| **ESM + CJS bundles** | Works in every modern build tool.                     |
+
+---
+
+## 🔧 Installation
+
+```bash
+npm i @lumiastream/ui
+```
+
+> **Peer dependencies**
+>
+> - React ≥ 18.0 < 20 (`^18 || ^19`)
+> - Tailwind CSS is _already compiled_—you do **not** need Tailwind in the host app unless you want to extend the theme.
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+// App.tsx
+import { LSButton } from "@lumiastream/ui";
+
+export default function App() {
+	return <LSButton variant="primary" label="Click Me" />;
+}
+```
+
+---
+
+## 📚 Storybook Docs
+
+Run a fully interactive playground locally:
+
+```bash
+pnpm storybook
+open http://localhost:6006
+```
+
+The public Storybook for the latest release lives at [https://ui.lumiastream.com](https://ui.lumiastream.com).
+
+---
+
+## 🏗️ Building from source
+
+```bash
+# clone & bootstrap
+pnpm install
+
+# compile library (ESM + CJS + types) and Tailwind sheet
+pnpm build
+```
+
+Artifacts land in `dist/` and are what gets published to npm.
+
+---
+
+## 🤝 Running live
+
+1. Run `pnpm storybook` for hot‑reloading Storybook and `pnpm watch` for the library bundle.
+2. Commit with Conventional Commits (`feat:`, `fix:` …) so the release pipeline can auto‑generate changelogs.
+
+---
+
+## 🪪 License
+
+ISC © Lumia Stream LLC

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CompletionContext } from '@codemirror/autocomplete';
 
 interface LSButtonProps {
     /** Is this the principal call to action on the page? */
@@ -15,4 +16,21 @@ interface LSButtonProps {
 /** Primary UI component for user interaction */
 declare const LSButton: ({ primary, size, backgroundColor, label, ...props }: LSButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { LSButton, type LSButtonProps };
+declare function allowedVariableCompletion(context: CompletionContext, variables: {
+    label: string;
+    displayLabel: string;
+    type: string;
+    info: string;
+    shouldWrap?: boolean;
+}[]): {
+    from: number;
+    options: {
+        label: string;
+        displayLabel: string;
+        type: string;
+        info: string;
+    }[];
+    validFor: RegExp;
+} | null;
+
+export { LSButton, type LSButtonProps, allowedVariableCompletion };

package/dist/index.js

@@ -1,3 +1,28 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/tailwind.css
+styleInject('/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --spacing: 0.25rem;\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .static {\n    position: static;\n  }\n  .contents {\n    display: contents;\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-500 {\n    background-color: var(--color-gray-500);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n}\n');
+
 // src/components/LSButton/LSButton.tsx
 import { jsx } from "react/jsx-runtime";
 var LSButton = ({
@@ -15,14 +40,44 @@ var LSButton = ({
       className: [
         "bg-blue-500",
         size === "small" ? "px-3 py-1 text-sm" : size === "large" ? "px-6 py-3 text-lg" : "px-4 py-2 text-base",
-        mode
+        mode,
+        backgroundColor ? `bg-[${backgroundColor}]` : ""
       ].join(" "),
-      style: { backgroundColor },
       ...props,
       children: label
     }
   );
 };
+
+// src/utils/allowedVariableCompletion.ts
+function allowedVariableCompletion(context, variables) {
+  const before = context.state.sliceDoc(0, context.pos);
+  const after = context.state.sliceDoc(context.pos, context.pos + 2);
+  const wordMatch = /(\w*)$/.exec(before);
+  if (!wordMatch) return null;
+  const word = wordMatch[1];
+  const from = context.pos - word.length;
+  const openCount = before.match(/({+)\s*\w*$/)?.[1].length ?? 0;
+  const closeCount = after.startsWith("}}") ? 2 : after.startsWith("}") ? 1 : 0;
+  const openNeeded = Math.max(0, 2 - openCount);
+  const closeNeeded = Math.max(0, 2 - closeCount);
+  const braceWrap = (v) => `${"{".repeat(openNeeded)}${v}${"}".repeat(closeNeeded)}`;
+  const options = [
+    ...variables.map((variable) => ({
+      label: variable.shouldWrap ? braceWrap(variable.label) : variable.label,
+      displayLabel: variable.displayLabel,
+      type: variable.type,
+      info: variable.info
+    }))
+  ];
+  return {
+    from,
+    options,
+    validFor: /^[\w$]*$/
+    // keep list open while typing identifiers
+  };
+}
 export {
-  LSButton
+  LSButton,
+  allowedVariableCompletion
 };

package/package.json

@@ -1,33 +1,37 @@
 {
 	"name": "@lumiastream/ui",
-	"version": "0.0.1",
+	"version": "0.0.2-alpha.10",
 	"author": "Lumia Stream",
 	"license": "ISC",
 	"description": "Lumia UI Kit",
 	"packageManager": "pnpm@10.12.4",
 	"type": "module",
-	"main": "dist/index.mjs",
-	"module": "dist/index.mjs",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
 	"types": "dist/types/index.d.ts",
 	"files": [
 		"dist"
 	],
 	"exports": {
 		".": {
-			"import": "./dist/index.mjs"
+			"import": "./dist/index.js"
 		}
 	},
 	"scripts": {
 		"start": "storybook dev -p 6006",
-		"build": "tsup src/index.ts --dts --format esm && npx @tailwindcss/cli -i src/tailwind.css -o dist/tailwind.css --minify",
+		"build": "tsup src/index.ts",
 		"build-storybook": "storybook build",
-		"release": "changeset && changeset tag && pnpm build && pnpm publish"
+		"watch": "tsup src/index.ts --watch",
+		"release": "changeset && changeset tag && pnpm build && pnpm publish",
+		"prepublishOnly": "pnpm build"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0 || ^19.0.0",
-		"react-dom": "^18.0.0 || ^19.0.0"
+		"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+		"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+		"@codemirror/autocomplete": "^6.0.0"
 	},
 	"devDependencies": {
+		"@codemirror/autocomplete": "^6.0.0",
 		"@storybook/builder-vite": "^9.0.15",
 		"@storybook/react-vite": "^9.0.15",
 		"@tailwindcss/vite": "^4.1.11",

package/dist/index.cjs

@@ -1,55 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  LSButton: () => LSButton
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/components/LSButton/LSButton.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var LSButton = ({
-  primary = false,
-  size = "medium",
-  backgroundColor,
-  label,
-  ...props
-}) => {
-  const mode = primary ? "bg-blue-500" : "bg-gray-500";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    {
-      type: "button",
-      className: [
-        "bg-blue-500",
-        size === "small" ? "px-3 py-1 text-sm" : size === "large" ? "px-6 py-3 text-lg" : "px-4 py-2 text-base",
-        mode
-      ].join(" "),
-      style: { backgroundColor },
-      ...props,
-      children: label
-    }
-  );
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  LSButton
-});

package/dist/index.d.cts

@@ -1,18 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface LSButtonProps {
-    /** Is this the principal call to action on the page? */
-    primary?: boolean;
-    /** What background color to use */
-    backgroundColor?: string;
-    /** How large should the button be? */
-    size?: 'small' | 'medium' | 'large';
-    /** Button contents */
-    label: string;
-    /** Optional click handler */
-    onClick?: () => void;
-}
-/** Primary UI component for user interaction */
-declare const LSButton: ({ primary, size, backgroundColor, label, ...props }: LSButtonProps) => react_jsx_runtime.JSX.Element;
-
-export { LSButton, type LSButtonProps };

package/dist/index.d.mts

@@ -1,18 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface LSButtonProps {
-    /** Is this the principal call to action on the page? */
-    primary?: boolean;
-    /** What background color to use */
-    backgroundColor?: string;
-    /** How large should the button be? */
-    size?: 'small' | 'medium' | 'large';
-    /** Button contents */
-    label: string;
-    /** Optional click handler */
-    onClick?: () => void;
-}
-/** Primary UI component for user interaction */
-declare const LSButton: ({ primary, size, backgroundColor, label, ...props }: LSButtonProps) => react_jsx_runtime.JSX.Element;
-
-export { LSButton, type LSButtonProps };

package/dist/index.mjs

@@ -1,28 +0,0 @@
-// src/components/LSButton/LSButton.tsx
-import { jsx } from "react/jsx-runtime";
-var LSButton = ({
-  primary = false,
-  size = "medium",
-  backgroundColor,
-  label,
-  ...props
-}) => {
-  const mode = primary ? "bg-blue-500" : "bg-gray-500";
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: [
-        "bg-blue-500",
-        size === "small" ? "px-3 py-1 text-sm" : size === "large" ? "px-6 py-3 text-lg" : "px-4 py-2 text-base",
-        mode
-      ].join(" "),
-      style: { backgroundColor },
-      ...props,
-      children: label
-    }
-  );
-};
-export {
-  LSButton
-};

package/dist/tailwind.css

@@ -1,2 +0,0 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-500:oklch(62.3% .214 259.815);--color-gray-500:oklch(55.1% .027 264.364);--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static{position:static}.contents{display:contents}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-500{background-color:var(--color-gray-500)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}