@tenstorrent/vesper 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tenstorrent Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,167 @@
+# Vesper
+
+React component library for the Vesper design system
+
+<br />
+
+<table><thead>
+  <tr>
+    <th align="center">🫂</th>
+    <th>✨</th>
+  </tr></thead>
+<tbody>
+<tr>
+<td>
+
+```sh
+npm install @tenstorrent/vesper
+
+# install peer deps (skip if these are already installed)
+npm install --save-peer react@^19.0.0 react-dom@^19.0.0
+```
+
+```tsx
+import "@tenstorrent/vesper/styles.css";
+
+import { Button, Typography } from "@tenstorrent/vesper";
+
+export default function App() {
+  return (
+    <div>
+      <Typography as="h1" variant="heading-2xl">
+        Inference
+      </Typography>
+      <Button>Buy Now</Button>
+    </div>
+  );
+}
+```
+
+</td>
+<td>
+
+```
+"Please follow the instructions at
+vesper.tenstorrent.com/agent-install.md
+to setup Vesper"
+```
+
+</td>
+</tr>
+</tbody>
+</table>
+
+<details>
+<summary><h3>Table of Contents</h3></summary>
+
+- [Install](#install)
+  - [Import styles](#import-styles)
+  - [Fonts](#fonts)
+    - [Using custom fonts](#using-custom-fonts)
+- [Usage](#usage)
+  - [CSS tokens](#css-tokens)
+
+</details>
+
+## Install
+
+You can install the `@tenstorrent/vesper` package from the npm registry using your package manager of choice:
+
+```sh
+yarn add @tenstorrent/vesper
+npm install @tenstorrent/vesper
+pnpm add @tenstorrent/vesper
+```
+
+Since `@tenstorrent/vesper` is a React package, you will also need to have `react@^19.0.0` and `react-dom@^19.0.0` installed, as they are peer dependencies.
+
+```sh
+# install peer deps (skip if these are already installed)
+npm install --save-peer react@^19.0.0 react-dom@^19.0.0
+```
+
+### Import styles
+
+Prior to using any components, you will need to import the library styles from `@tenstorrent/vesper/styles.css` somewhere at the top-level of your application. For example, in a `Next.js` application, you may import them in your app's root `layout.tsx` file:
+
+```tsx
+import "@tenstorrent/vesper/styles.css";
+```
+
+This makes the Vesper library's component styles and css tokens globally available in your application. For more information on usage of Vesper's css tokens, see [CSS token usage](#css-token-usage).
+
+If you are using [Tailwind](https://tailwindcss.com) to style your app, we supply a Tailwind-specific file you can import instead. This has two advantages:
+
+1. Vesper's component styles get injected into Tailwind's `components` layer, which lets Tailwind utility classes override vesper css classes.
+2. Vesper's css tokens get injected into the Tailwind `@theme` so you can use them in Tailwind utility classes, like `bg-vesper-purple-300`, for example.
+
+You should import Vesper's Tailwind styles **after** importing `tailwindcss` in your css file, like so:
+
+```css
+@import "tailwindcss";
+@import "@tenstorrent/vesper/tailwind.css";
+```
+
+If you import Vesper's Tailwind styles before importing `tailwindcss`, the order of Tailwind's internal css layers will get mangled.
+
+### Fonts
+
+Vesper components are styled using two fonts, `Inter Tight` and `IBM Plex Mono`. The fonts themselves are **not** bundled with the package, only the font stacks are. If you want Vesper's components to render in `Inter Tight` and `IBM Plex Mono`, you need to load those fonts in your app (for example with `next/font/google` if developing a `Next.js` application, a `@font-face` rule, or a `<link>` to Google Fonts). If they aren't loaded, the fallbacks in each stack are used.
+
+The easiest way to do this is to embed the corresponding Google Fonts code into the `<head>` of your html:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter+Tight:wght@100..900&display=swap"
+  rel="stylesheet"
+/>
+```
+
+### Using custom fonts
+
+To use a custom font, you can simply load your custom font into your app (using `next/font/google`, `@font-face`, `<link>`, etc.) and override vesper's font css variables with your own provided font stack. For example, if you wanted to use `Roboto` instead of `Inter Tight` for `--vesper-font-sans`, you would do this:
+
+```css
+/* somewhere in your application's css */
+:root {
+  --vesper-font-sans: "Roboto", system-ui, sans-serif;
+}
+```
+
+## Usage
+
+Once you have installed the package and imported the styles, you can start importing and using components like so:
+
+```tsx
+import { Accordion } from "@tenstorrent/vesper/accordion";
+
+<Accordion title="Click me to reveal some hidden content">
+  The hidden content
+</Accordion>;
+```
+
+### CSS tokens
+
+Importing the library's styles also exposes Vesper's underlying css tokens for usage in your application.
+
+For example, you could use them in a css file like so:
+
+```css
+color: var(--vesper-text-primary);
+border: var(--vesper-stroke-base) solid var(--vesper-border-secondary);
+background-color: var(--vesper-background-tertiary);
+```
+
+Or you can use them as inline styles in JSX:
+
+```tsx
+<div
+  style={{
+    color: "var(--vesper-text-primary)",
+    border: "var(--vesper-stroke-base) solid var(--vesper-border-secondary)",
+    backgroundColor: "var(--vesper-background-tertiary)",
+  }}
+/>
+```

package/dist/components/accordion/accordion.css

@@ -0,0 +1 @@
+.vesper-accordion{padding:var(--vesper-spacing-3);border-radius:var(--vesper-radius-1)}.vesper-accordion:hover .vesper-accordion-trigger{color:var(--vesper-text-primary)}.vesper-accordion[data-open]{background:var(--vesper-state-neutral-hover)}.vesper-accordion[data-open] .vesper-accordion-trigger{color:var(--vesper-text-primary)}.vesper-accordion[data-open] .vesper-accordion-trigger-icon{transform:rotate(90deg)}.vesper-accordion-trigger{color:var(--vesper-text-secondary);cursor:pointer;z-index:2;justify-content:space-between;align-items:center;width:100%;padding:0;display:flex;position:relative}.vesper-accordion-trigger:before{inset:calc(var(--vesper-spacing-3) * -1);border-radius:var(--vesper-radius-1);content:"";position:absolute}.vesper-accordion-trigger:focus-visible{box-shadow:none;color:var(--vesper-text-primary);outline:none}.vesper-accordion-trigger:focus-visible:before{box-shadow:var(--vesper-shadow-focus-ring)}@media (forced-colors:active){.vesper-accordion-trigger:focus-visible:before{outline:var(--vesper-stroke-strong) solid CanvasText}}.vesper-accordion-trigger-icon{width:1rem;height:1rem;transition:transform var(--vesper-transition-duration-default) ease}.vesper-accordion-panel{z-index:1;will-change:opacity;position:relative;overflow:visible}.vesper-accordion-panel[data-open]{animation:vesper-accordion-open var(--vesper-transition-duration-default) ease}.vesper-accordion-panel[data-closed]{animation:vesper-accordion-close var(--vesper-transition-duration-default) ease}.vesper-accordion-children{padding-top:var(--vesper-spacing-2);color:var(--vesper-text-secondary);white-space:pre-line}@keyframes vesper-accordion-open{0%{opacity:0;height:0}to{height:var(--collapsible-panel-height);opacity:1}}@keyframes vesper-accordion-close{0%{height:var(--collapsible-panel-height);opacity:1}50%{opacity:0}to{opacity:0;height:0}}

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps } from "react";
+export interface AccordionProps extends ComponentProps<"div"> {
+    /** Whether the accordion is open by default (uncontrolled mode). */
+    defaultOpen?: boolean;
+    /** Controls the open state of the accordion (controlled mode). */
+    open?: boolean;
+    /** Callback fired when the open state changes. Receives the new open state as an argument. */
+    onOpenChange?(open: boolean): void;
+    /** The title text displayed in the accordion trigger. */
+    title: string;
+}
+/**
+ * A collapsible content section with a trigger that toggles visibility of its children.
+ *
+ * @param {string} props.title - The title text displayed in the accordion trigger
+ * @param {boolean} [props.defaultOpen] - (optional) Whether the accordion is open by default (uncontrolled)
+ * @param {boolean} [props.open] - (optional) Controls the open state (controlled)
+ * @param {(open: boolean) => void} [props.onOpenChange] - (optional) Callback fired when the open state changes
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Accordion title="FAQ">
+ *   <p>Answer to the question goes here.</p>
+ * </Accordion>
+ *
+ * @example
+ * <Accordion title="Advanced" open={isOpen} onOpenChange={setIsOpen}>
+ *   <p>Controlled accordion content.</p>
+ * </Accordion>
+ */
+export declare function Accordion(props: AccordionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8FAA8F;IAC9F,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAsC9C"}

package/dist/components/accordion/accordion.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { CaretRight } from "../icons/icons.js";
+import { Typography } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+/**
+ * A collapsible content section with a trigger that toggles visibility of its children.
+ *
+ * @param {string} props.title - The title text displayed in the accordion trigger
+ * @param {boolean} [props.defaultOpen] - (optional) Whether the accordion is open by default (uncontrolled)
+ * @param {boolean} [props.open] - (optional) Controls the open state (controlled)
+ * @param {(open: boolean) => void} [props.onOpenChange] - (optional) Callback fired when the open state changes
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Accordion title="FAQ">
+ *   <p>Answer to the question goes here.</p>
+ * </Accordion>
+ *
+ * @example
+ * <Accordion title="Advanced" open={isOpen} onOpenChange={setIsOpen}>
+ *   <p>Controlled accordion content.</p>
+ * </Accordion>
+ */
+export function Accordion(props) {
+    const { defaultOpen, open, onOpenChange, children, title, className, ...rest } = props;
+    return (_jsxs(Collapsible.Root, { defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, className: cn("vesper-accordion", className), ...rest, children: [_jsxs(Typography, { as: Collapsible.Trigger, variant: "label-md-bold", className: "vesper-accordion-trigger", children: [_jsx("span", { children: title }), _jsx(CaretRight, { className: "vesper-accordion-trigger-icon" })] }), _jsx(Collapsible.Panel, { className: "vesper-accordion-panel", children: _jsx(Typography, { variant: "copy-sm", as: "div", className: "vesper-accordion-children", children: children }) })] }));
+}
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAahC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,WAAW,CAAC,IAAI,IACf,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,KACxC,IAAI,aAER,MAAC,UAAU,IACT,EAAE,EAAE,WAAW,CAAC,OAAO,EACvB,OAAO,EAAC,eAAe,EACvB,SAAS,EAAC,0BAA0B,aAEpC,yBAAO,KAAK,GAAQ,EACpB,KAAC,UAAU,IAAC,SAAS,EAAC,+BAA+B,GAAG,IAC7C,EACb,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAC,wBAAwB,YACnD,KAAC,UAAU,IACT,OAAO,EAAC,SAAS,EACjB,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,2BAA2B,YAEpC,QAAQ,GACE,GACK,IACH,CACpB,CAAC;AACJ,CAAC"}

package/dist/components/admonition/admonition.css

@@ -0,0 +1 @@
+.vesper-admonition{align-items:center;gap:var(--vesper-spacing-4);border-radius:var(--vesper-radius-2);display:flex}.vesper-admonition.vesper-admonition-subtle{background:var(--vesper-background-primary)}.vesper-admonition .vesper-button{align-self:flex-start}@media (forced-colors:active){.vesper-admonition:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-admonition:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-admonition-content{align-items:flex-start;gap:var(--vesper-spacing-2);flex:1;display:flex}.vesper-admonition-sm{padding:var(--vesper-spacing-2) var(--vesper-spacing-3)}.vesper-admonition-sm:has(.vesper-button){padding-right:var(--vesper-spacing-2)}.vesper-admonition-md{padding:var(--vesper-spacing-3) var(--vesper-spacing-4)}.vesper-admonition-md:has(.vesper-button){padding-right:var(--vesper-spacing-3)}.vesper-admonition-icon{flex-shrink:0;align-items:center;width:1rem;height:1.25rem;display:flex}.vesper-admonition-icon svg{width:100%;height:auto}.vesper-admonition-info{background:var(--vesper-background-info-subtle);border:var(--vesper-stroke-base) solid var(--vesper-border-info-subtle);color:var(--vesper-text-info)}.vesper-admonition-success{background:var(--vesper-background-success-subtle);border:var(--vesper-stroke-base) solid var(--vesper-border-success-subtle);color:var(--vesper-text-success)}.vesper-admonition-warning{background:var(--vesper-background-warning-subtle);border:var(--vesper-stroke-base) solid var(--vesper-border-warning-subtle);color:var(--vesper-text-warning)}.vesper-admonition-danger{background:var(--vesper-background-error-subtle);border:var(--vesper-stroke-base) solid var(--vesper-border-error-subtle);color:var(--vesper-text-error)}.vesper-admonition-secondary{background:var(--vesper-tint-contrast-200);border:var(--vesper-stroke-base) solid var(--vesper-border-secondary);color:var(--vesper-text-primary)}

package/dist/components/admonition/admonition.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentProps, ElementType } from "react";
+import { ButtonProps } from "../button/button.js";
+export declare const ADMONITION_SIZES: readonly ["sm", "md"];
+export declare const ADMONITION_VARIANTS: readonly ["info", "success", "warning", "danger", "secondary"];
+export type AdmonitionSize = (typeof ADMONITION_SIZES)[number];
+export type AdmonitionVariant = (typeof ADMONITION_VARIANTS)[number];
+export interface AdmonitionProps<C extends ElementType = "button"> extends ComponentProps<"div"> {
+    /** The size of the admonition. Affects padding and typography. @default sm */
+    size?: AdmonitionSize;
+    /** The visual variant of the admonition, which determines its color scheme and icon. @default info */
+    variant?: AdmonitionVariant;
+    /** When `true`, renders the admonition with a more subdued, subtle appearance. @default false */
+    subtle?: boolean;
+    /**
+     * Props passed to the optional call-to-action button rendered alongside the admonition content.
+     *
+     * The presence of this prop will render a small contrast-themed button to the right of the admonition content.
+     */
+    cta?: Omit<ButtonProps<C>, "size" | "variant" | "as">;
+    /** Sets the `ElementType` the cta will render as. @default button */
+    ctaAs?: C;
+}
+/**
+ * A callout component for displaying informational, success, warning, or error messages with an optional call-to-action button.
+ *
+ * @param {AdmonitionVariant} [props.variant] - (optional) The visual variant determining color and icon. @default info
+ * @param {AdmonitionSize} [props.size] - (optional) The size of the admonition. @default sm
+ * @param {boolean} [props.subtle] - (optional) Renders the admonition with a more subdued appearance
+ * @param {ButtonProps} [props.cta] - (optional) Props for an action button rendered alongside the content
+ * @param {React.ElementType} [props.ctaAs] - (optional) Element type to render for the cta. @default button
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Admonition variant="warning">
+ *   Your session will expire in 5 minutes.
+ * </Admonition>
+ *
+ * @example
+ * <Admonition
+ *   variant="danger"
+ *   size="md"
+ *   cta={{ children: "Retry", onClick: handleRetry }}
+ * >
+ *   Failed to save changes.
+ * </Admonition>
+ */
+export declare function Admonition<C extends ElementType = "button">(props: AdmonitionProps<C>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=admonition.d.ts.map

package/dist/components/admonition/admonition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"admonition.d.ts","sourceRoot":"","sources":["../../../src/components/admonition/admonition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAU,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAejE,eAAO,MAAM,gBAAgB,uBAAwB,CAAC;AAEtD,eAAO,MAAM,mBAAmB,gEAMtB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAErE,MAAM,WAAW,eAAe,CAC9B,CAAC,SAAS,WAAW,GAAG,QAAQ,CAChC,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sGAAsG;IACtG,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iGAAiG;IACjG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;IACtD,qEAAqE;IACrE,KAAK,CAAC,EAAE,CAAC,CAAC;CACX;AASD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EACzD,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,2CA8C1B"}

package/dist/components/admonition/admonition.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../button/button.js";
+import { ErrorSolid, Info, InfoSolid, SuccessSolid, WarningSolid, } from "../icons/icons.js";
+import { Typography, } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+export const ADMONITION_SIZES = ["sm", "md"];
+export const ADMONITION_VARIANTS = [
+    "info",
+    "success",
+    "warning",
+    "danger",
+    "secondary",
+];
+const ADMONITION_TYPOGRAPHY_VARIANTS = {
+    md: "copy-sm",
+    sm: "copy-xs",
+};
+/**
+ * A callout component for displaying informational, success, warning, or error messages with an optional call-to-action button.
+ *
+ * @param {AdmonitionVariant} [props.variant] - (optional) The visual variant determining color and icon. @default info
+ * @param {AdmonitionSize} [props.size] - (optional) The size of the admonition. @default sm
+ * @param {boolean} [props.subtle] - (optional) Renders the admonition with a more subdued appearance
+ * @param {ButtonProps} [props.cta] - (optional) Props for an action button rendered alongside the content
+ * @param {React.ElementType} [props.ctaAs] - (optional) Element type to render for the cta. @default button
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Admonition variant="warning">
+ *   Your session will expire in 5 minutes.
+ * </Admonition>
+ *
+ * @example
+ * <Admonition
+ *   variant="danger"
+ *   size="md"
+ *   cta={{ children: "Retry", onClick: handleRetry }}
+ * >
+ *   Failed to save changes.
+ * </Admonition>
+ */
+export function Admonition(props) {
+    const { className, size = "sm", variant = "info", ctaAs = "button", cta, children, subtle, ...rest } = props;
+    return (_jsxs("div", { className: cn("vesper-admonition", `vesper-admonition-${size}`, `vesper-admonition-${variant}`, subtle && "vesper-admonition-subtle", className), ...rest, children: [_jsxs("div", { className: "vesper-admonition-content", children: [_jsxs("span", { className: "vesper-admonition-icon", children: [variant === "danger" && _jsx(ErrorSolid, {}), variant === "info" && _jsx(InfoSolid, {}), variant === "secondary" && _jsx(Info, {}), variant === "success" && _jsx(SuccessSolid, {}), variant === "warning" && _jsx(WarningSolid, {})] }), _jsx(Typography, { as: "div", variant: ADMONITION_TYPOGRAPHY_VARIANTS[size], children: children })] }), cta && (_jsx(Button, { type: "button", ...cta, as: ctaAs, variant: "contrast", size: "sm" }))] }));
+}
+//# sourceMappingURL=admonition.js.map

package/dist/components/admonition/admonition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admonition.js","sourceRoot":"","sources":["../../../src/components/admonition/admonition.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,4BAA4B,CAAC;AACjE,OAAO,EACL,UAAU,EACV,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,YAAY,GACb,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,UAAU,GAEX,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AAEtD,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;IACR,WAAW;CACH,CAAC;AAyBX,MAAM,8BAA8B,GAEhC;IACF,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,UAAU,CACxB,KAAyB;IAEzB,MAAM,EACJ,SAAS,EACT,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,QAAQ,EAChB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,mBAAmB,EACnB,qBAAqB,IAAI,EAAE,EAC3B,qBAAqB,OAAO,EAAE,EAC9B,MAAM,IAAI,0BAA0B,EACpC,SAAS,CACV,KACG,IAAI,aAER,eAAK,SAAS,EAAC,2BAA2B,aACxC,gBAAM,SAAS,EAAC,wBAAwB,aACrC,OAAO,KAAK,QAAQ,IAAI,KAAC,UAAU,KAAG,EACtC,OAAO,KAAK,MAAM,IAAI,KAAC,SAAS,KAAG,EACnC,OAAO,KAAK,WAAW,IAAI,KAAC,IAAI,KAAG,EACnC,OAAO,KAAK,SAAS,IAAI,KAAC,YAAY,KAAG,EACzC,OAAO,KAAK,SAAS,IAAI,KAAC,YAAY,KAAG,IACrC,EACP,KAAC,UAAU,IAAC,EAAE,EAAC,KAAK,EAAC,OAAO,EAAE,8BAA8B,CAAC,IAAI,CAAC,YAC/D,QAAQ,GACE,IACT,EACL,GAAG,IAAI,CACN,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,KACR,GAAsB,EAC3B,EAAE,EAAE,KAAK,EACT,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,IAAI,GACT,CACH,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/components/avatar/avatar.css

@@ -0,0 +1 @@
+.vesper-avatar{border:var(--vesper-stroke-base) solid var(--vesper-border-inverse-strong);background:var(--vesper-stone-400);border-radius:50%;overflow:hidden}@media (forced-colors:active){.vesper-avatar:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-avatar:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-avatar-sm{width:1.5rem;height:1.5rem}.vesper-avatar-md{width:2rem;height:2rem}.vesper-avatar-lg{width:3rem;height:3rem}.vesper-avatar-image{object-fit:cover;width:100%;height:100%}

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,30 @@
+import type { ElementType } from "react";
+import type { Polymorphic } from "../../utils/polymorphic.js";
+export declare const AVATAR_SIZES: readonly ["sm", "md", "lg"];
+export type AvatarSize = (typeof AVATAR_SIZES)[number];
+export type AvatarProps<E extends ElementType = "div"> = Polymorphic<{
+    /** The size of the avatar. @default md */
+    size?: AvatarSize;
+    /** The image source URL for the avatar. When not provided, the avatar renders as an empty placeholder. */
+    src?: string;
+    /** The alt text for the avatar image. */
+    alt?: string;
+}, E, "children">;
+/**
+ * A polymorphic avatar component that displays a user image or an empty placeholder.
+ *
+ * @param {AvatarSize} [props.size] - (optional) The size of the avatar. @default md
+ * @param {string} [props.src] - (optional) The image source URL for the avatar.
+ * @param {string} [props.alt] - (optional) The alt text for the avatar image.
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Avatar src="/profile.png" alt="Jane Doe" />
+ *
+ * @example
+ * <Avatar size="lg" as="a" href="/profile/jane-doe" />
+ */
+export declare function Avatar<E extends ElementType = "div">(props: AvatarProps<E>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,eAAO,MAAM,YAAY,6BAA8B,CAAC;AAExD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CAClE;IACE,0CAA0C;IAC1C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0GAA0G;IAC1G,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,EACD,CAAC,EACD,UAAU,CACX,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,2CAiB1E"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+export const AVATAR_SIZES = ["sm", "md", "lg"];
+/**
+ * A polymorphic avatar component that displays a user image or an empty placeholder.
+ *
+ * @param {AvatarSize} [props.size] - (optional) The size of the avatar. @default md
+ * @param {string} [props.src] - (optional) The image source URL for the avatar.
+ * @param {string} [props.alt] - (optional) The alt text for the avatar image.
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Avatar src="/profile.png" alt="Jane Doe" />
+ *
+ * @example
+ * <Avatar size="lg" as="a" href="/profile/jane-doe" />
+ */
+export function Avatar(props) {
+    const { as: Component = "div", size = "md", className, src, alt = "", ...rest } = props;
+    return (_jsx(Component, { className: cn("vesper-avatar", `vesper-avatar-${size}`, className), ...rest, children: src && _jsx("img", { className: "vesper-avatar-image", src: src, alt: alt }) }));
+}
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAGhC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAiBxD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,MAAM,CAAgC,KAAqB;IACzE,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,GAAG,EACH,GAAG,GAAG,EAAE,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,iBAAiB,IAAI,EAAE,EAAE,SAAS,CAAC,KAC9D,IAAI,YAEP,GAAG,IAAI,cAAK,SAAS,EAAC,qBAAqB,EAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAI,GACzD,CACb,CAAC;AACJ,CAAC"}

package/dist/components/avatar-group/avatar-group.css

@@ -0,0 +1 @@
+.vesper-avatar-group{border-radius:2rem;display:flex}@media (forced-colors:active){.vesper-avatar-group:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-avatar-group:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-avatar-group .vesper-avatar:not(:first-child){margin-left:-.375rem}.vesper-avatar-group .vesper-avatar-md:not(:first-child){margin-left:-.625rem}.vesper-avatar-group .vesper-avatar-lg:not(:first-child){margin-left:-.875rem}.vesper-avatar-group .vesper-avatar-group-overflow{color:var(--vesper-text-inverse-primary);background:var(--vesper-background-inverse-primary);font-family:var(--vesper-font-sans);font-weight:400;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal);justify-content:center;align-items:center;display:flex}.vesper-avatar-group .vesper-avatar-sm.vesper-avatar-group-overflow{font-size:.5rem}.vesper-avatar-group .vesper-avatar-md.vesper-avatar-group-overflow{font-size:.5rem}.vesper-avatar-group .vesper-avatar-lg.vesper-avatar-group-overflow{font-size:.75rem}

package/dist/components/avatar-group/avatar-group.d.ts

@@ -0,0 +1,36 @@
+import type { ElementType } from "react";
+import { type AvatarSize } from "../avatar/avatar.js";
+import type { Polymorphic } from "../../utils/polymorphic.js";
+export type AvatarGroupProps<E extends ElementType = "div"> = Polymorphic<{
+    /** The size applied to all avatars in the group. @default md */
+    size?: AvatarSize;
+    /** The list of avatars to display. A maximum of 3 avatars are shown, with an overflow indicator for additional items. */
+    avatars: {
+        src: string | undefined;
+        alt?: string;
+    }[];
+}, E, "children">;
+/**
+ * A polymorphic component that displays a row of avatars with an overflow indicator for groups larger than three.
+ *
+ * @param {AvatarGroupProps["avatars"]} props.avatars - The list of avatars to display (max 3 shown, with overflow count)
+ * @param {AvatarSize} [props.size] - (optional) The size applied to all avatars. @default md
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <AvatarGroup
+ *   avatars={[
+ *     { src: "/avatar1.png", alt: "Alice" },
+ *     { src: "/avatar2.png", alt: "Bob" },
+ *     { src: "/avatar3.png", alt: "Charlie" },
+ *     { src: "/avatar4.png", alt: "Dana" },
+ *   ]}
+ * />
+ *
+ * @example
+ * <AvatarGroup size="lg" avatars={teamMembers} />
+ */
+export declare function AvatarGroup<E extends ElementType = "div">(props: AvatarGroupProps<E>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/components/avatar-group/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../src/components/avatar-group/avatar-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CACvE;IACE,gEAAgE;IAChE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yHAAyH;IACzH,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACtD,EACD,CAAC,EACD,UAAU,CACX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EACvD,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAwB3B"}

package/dist/components/avatar-group/avatar-group.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from "../avatar/avatar.js";
+import { cn } from "../../utils/cn.js";
+/**
+ * A polymorphic component that displays a row of avatars with an overflow indicator for groups larger than three.
+ *
+ * @param {AvatarGroupProps["avatars"]} props.avatars - The list of avatars to display (max 3 shown, with overflow count)
+ * @param {AvatarSize} [props.size] - (optional) The size applied to all avatars. @default md
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <AvatarGroup
+ *   avatars={[
+ *     { src: "/avatar1.png", alt: "Alice" },
+ *     { src: "/avatar2.png", alt: "Bob" },
+ *     { src: "/avatar3.png", alt: "Charlie" },
+ *     { src: "/avatar4.png", alt: "Dana" },
+ *   ]}
+ * />
+ *
+ * @example
+ * <AvatarGroup size="lg" avatars={teamMembers} />
+ */
+export function AvatarGroup(props) {
+    const { as: Component = "div", size = "md", avatars, className, ...rest } = props;
+    return (_jsxs(Component, { className: cn("vesper-avatar-group", className), ...rest, children: [avatars.slice(0, 3).map(({ src, alt }, index) => (_jsx(Avatar, { size: size, src: src, alt: alt }, index))), avatars.length > 3 && (_jsx("div", { className: `vesper-avatar-group-overflow vesper-avatar vesper-avatar-${size}`, children: avatars.length <= 100 ? `+${avatars.length - 3}` : "99+" }))] }));
+}
+//# sourceMappingURL=avatar-group.js.map

package/dist/components/avatar-group/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sourceRoot":"","sources":["../../../src/components/avatar-group/avatar-group.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAmB,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAchC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,WAAW,CACzB,KAA0B;IAE1B,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,IAAI,GAAG,IAAI,EACX,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAAM,IAAI,aACjE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAChD,KAAC,MAAM,IAAa,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAArC,KAAK,CAAoC,CACvD,CAAC,EACD,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,cACE,SAAS,EAAE,4DAA4D,IAAI,EAAE,YAE5E,OAAO,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,GACrD,CACP,IACS,CACb,CAAC;AACJ,CAAC"}

package/dist/components/badge/badge.css

@@ -0,0 +1 @@
+.vesper-badge{border-radius:var(--vesper-radius-4);align-items:center;width:fit-content;display:inline-flex}@media (forced-colors:active){.vesper-badge{border:var(--vesper-stroke-base) solid CanvasText}.vesper-badge:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-badge:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-badge-icon{display:flex}.vesper-badge-sm{height:1.25rem;padding:0 var(--vesper-spacing-1)}.vesper-badge-sm .vesper-badge-icon{width:.75rem;height:.75rem}.vesper-badge-md{height:1.5rem;padding:0 var(--vesper-spacing-2)}.vesper-badge-md .vesper-badge-icon{width:.875rem;height:.875rem}.vesper-badge-lg{height:1.75rem;padding:0 var(--vesper-spacing-2)}.vesper-badge-lg .vesper-badge-icon{width:.875rem;height:.875rem}.vesper-badge-text{padding:0 var(--vesper-spacing-1)}@media not (forced-colors:active){.vesper-badge-contrast{background:var(--vesper-background-inverse-primary);color:var(--vesper-text-inverse-primary)}}@media (forced-colors:active){.vesper-badge-contrast{color:canvas;forced-color-adjust:none;background:canvastext}.vesper-badge-contrast:focus-visible{outline-offset:var(--vesper-spacing-micro);outline-width:var(--vesper-stroke-base)}}.vesper-badge-contrast-subtle{background:var(--vesper-tint-neutral-300);color:var(--vesper-text-primary)}.vesper-badge-accent{background:var(--vesper-background-accent-base);color:var(--vesper-text-primary)}.vesper-badge-accent-subtle{background:var(--vesper-background-accent-subtle);color:var(--vesper-text-accent)}.vesper-badge-success{background:var(--vesper-background-success-base);color:var(--vesper-text-inverse-primary)}.vesper-badge-success-subtle{background:var(--vesper-background-success-subtle);color:var(--vesper-text-success)}.vesper-badge-warning{background:var(--vesper-background-warning-base);color:var(--vesper-text-primary)}.vesper-badge-warning-subtle{background:var(--vesper-background-warning-subtle);color:var(--vesper-text-warning)}.vesper-badge-danger{background:var(--vesper-background-error-base);color:var(--vesper-text-inverse-primary)}.vesper-badge-danger-subtle{background:var(--vesper-background-error-subtle);color:var(--vesper-text-error)}.vesper-badge-info{background:var(--vesper-background-info-base);color:var(--vesper-text-inverse-primary)}.vesper-badge-info-subtle{background:var(--vesper-background-info-subtle);color:var(--vesper-text-info)}.vesper-badge-purple{background:var(--vesper-background-brand-purple-base);color:var(--vesper-text-inverse-primary)}.vesper-badge-purple-subtle{background:var(--vesper-background-brand-purple-subtle);color:var(--vesper-text-brand-purple)}.vesper-badge-mint{background:var(--vesper-background-brand-mint-base);color:var(--vesper-text-inverse-primary)}.vesper-badge-mint-subtle{background:var(--vesper-background-brand-mint-subtle);color:var(--vesper-text-brand-mint)}.vesper-badge-pink{background:var(--vesper-background-brand-pink-base);color:var(--vesper-text-inverse-primary)}.vesper-badge-pink-subtle{background:var(--vesper-background-brand-pink-subtle);color:var(--vesper-text-brand-pink)}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,42 @@
+import type { ElementType, ReactNode } from "react";
+import type { Polymorphic } from "../../utils/polymorphic.js";
+export declare const BADGE_SIZES: readonly ["sm", "md", "lg"];
+export declare const BADGE_VARIANTS: readonly ["accent", "success", "warning", "danger", "info", "purple", "pink", "mint", "contrast"];
+export type BadgeSize = (typeof BADGE_SIZES)[number];
+export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
+export type BadgeProps<E extends ElementType = "div"> = Polymorphic<{
+    /** The size of the badge. Affects padding and typography. @default md */
+    size?: BadgeSize;
+    /** The color variant of the badge. @default accent */
+    variant?: BadgeVariant;
+    /** When true, renders the badge with a more subdued, subtle appearance. @default false */
+    subtle?: boolean;
+    /** An optional icon element rendered to the left of the badge text. */
+    icon?: ReactNode;
+}, E>;
+/**
+ * A polymorphic badge component for describing the content it sits next to (e.g. plan tier, environment, role) with color variants and optional icons.
+ *
+ * Unlike `Tag` (which categorizes content) and `Chip` (which displays on/off states), `Badges` provide contextual metadata about adjacent content.
+ *
+ * @see packages/vesper/src/components/chip/chip.tsx
+ * @see packages/vesper/src/components/tag/tag.tsx
+ *
+ * @param {BadgeSize} [props.size] - (optional) The size of the badge. @default md
+ * @param {BadgeVariant} [props.variant] - (optional) The color variant of the badge. @default accent
+ * @param {boolean} [props.subtle] - (optional) Renders the badge with a more subdued appearance. @default false
+ * @param {ReactNode} [props.icon] - (optional) An icon element rendered to the left of the badge text
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default div
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Badge variant="success">Active</Badge>
+ *
+ * @example
+ * <Badge size="sm" variant="danger" icon={<ErrorSolid />} subtle>
+ *   3 errors
+ * </Badge>
+ */
+export declare function Badge<E extends ElementType = "div">(props: BadgeProps<E>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,eAAO,MAAM,WAAW,6BAA8B,CAAC;AAEvD,eAAO,MAAM,cAAc,mGAUjB,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CACjE;IACE,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,EACD,CAAC,CACF,CAAC;AAQF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,2CAgCxE"}