@crewlethq/ui 0.2.0 → 0.3.0

package/dist/Disclosure-VKBJJIZ7.css

@@ -0,0 +1,176 @@
+/*
+ * The disclosure anatomy, declared once for every expander in the package.
+ *
+ * THE TRIGGER AND THE SECTION'S CONTROLS ARE SIBLINGS. A copy button nested
+ * inside the trigger would be a button inside a button, which is invalid, and
+ * worse, pressing it would collapse the very thing it just copied. The bar is
+ * what puts them side by side, and `width: auto` on the trigger is load
+ * bearing: it overrides the standalone case's `width: 100%`, which inside this
+ * row would claim the whole line and push the controls onto one of their own.
+ */
+
+.crewlet-disclosure {
+  min-width: 0;
+}
+
+.crewlet-disclosure__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-disclosure__heading {
+  margin: 0;
+  font: inherit;
+  flex: 1;
+  min-width: 0;
+}
+
+/*
+ * The expander head the dashboard draws: the caption size, the chevron a step
+ * closer to the words than the words are to each other, and the whole row on
+ * the secondary step until a pointer reaches it. `--size-row-sm` is the one
+ * addition, and it is not decoration: a 12px row with 4px of padding is a
+ * 20px target, under the 24px WCAG 2.2 accepts, so the row keeps the floor
+ * every other control in the package keeps.
+ */
+.crewlet-disclosure__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--size-row-sm);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: none;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    color var(--motion-duration-fast) var(--motion-easing-default),
+    background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-disclosure__bar > .crewlet-disclosure__trigger {
+  flex: 1;
+  width: auto;
+}
+
+/*
+ * NEUTRAL on hover, not the accent. The accent is the one colour that means
+ * "where the reader is"; spending it on every expander a pointer passes over
+ * makes it mean "under the cursor" instead.
+ */
+.crewlet-disclosure__trigger:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-hover);
+}
+
+.crewlet-disclosure__trigger:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-disclosure__trigger:disabled {
+  cursor: not-allowed;
+  /* Quieter, but still legible: a disabled row a reader cannot read is a row
+     they cannot learn is unavailable. */
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-disclosure__trigger:disabled:hover {
+  background: none;
+}
+
+/*
+ * ONE glyph, turned. Two drawings (a right chevron closed, a down one open)
+ * swap shapes at the moment of the change, so the control reads as two
+ * different controls rather than as one that moved.
+ */
+.crewlet-disclosure__chevron {
+  flex: none;
+  color: var(--color-text-tertiary);
+  transform: rotate(-90deg);
+  transition: transform var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-disclosure__trigger[aria-expanded='true'] .crewlet-disclosure__chevron {
+  transform: rotate(0deg);
+}
+
+.crewlet-disclosure__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-disclosure__title--mono {
+  font-family: var(--font-family-mono);
+  font-variant-ligatures: none;
+}
+
+/* A fact inside the button: quieter than the title it belongs to. */
+.crewlet-disclosure__meta {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-disclosure__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: none;
+}
+
+.crewlet-disclosure__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2);
+  color: var(--color-text-secondary);
+}
+
+/* ---- Sizes and variants ------------------------------------------------ */
+
+/*
+ * ONLY THE PANEL. The trigger's compact register was one size down and one gap
+ * in; both are what the standalone trigger is now set at, so a second rule
+ * restating them would be a rule that can only ever drift from the first.
+ */
+.crewlet-disclosure--compact .crewlet-disclosure__panel {
+  gap: var(--spacing-1);
+  padding: var(--spacing-1) var(--spacing-2);
+}
+
+/*
+ * An aside: what was considered, not what was decided. The rule down its edge
+ * is what lets a reader skip the block by its shape.
+ */
+.crewlet-disclosure--aside .crewlet-disclosure__trigger {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The hover step rather than the strong one. This rule is a margin down the
+ * side of an aside, not a boundary a reader has to find: at the strong step it
+ * reads as a second border inside the card it sits in.
+ */
+.crewlet-disclosure--aside .crewlet-disclosure__panel {
+  border-left: 2px solid var(--color-border-hover);
+  margin-left: var(--spacing-1);
+  padding-left: var(--spacing-3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-disclosure__trigger,
+  .crewlet-disclosure__chevron {
+    transition: none;
+  }
+}

package/dist/EmptyState/EmptyState.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+export type EmptyStateSize = 'default' | 'compact';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** A glyph, drawn large and quiet. Replaced by `illustration` when both are given. */
+    icon?: ReactNode;
+    /** A full drawing, where a glyph is too small to carry the moment: a first run. */
+    illustration?: ReactNode;
+    title: ReactNode;
+    /**
+     * WHY it is empty and what would fill it. REQUIRED, and not optional
+     * politeness: "No events" on a company that has never run and "no events"
+     * on a node whose event store could not be read are the same sentence and
+     * completely different problems, and a reader cannot tell them apart from
+     * the list. The story shows the three cases this distinguishes.
+     */
+    description: ReactNode;
+    /** What would fill it, as a control: "Create the first seat", "Connect Slack". */
+    action?: ReactNode;
+    /** `compact` is for an empty state inside a panel rather than a screen. */
+    size?: EmptyStateSize | undefined;
+    /**
+     * The heading level of the title. Taken from where the component finds
+     * itself by default; `none` renders no heading at all, for an empty state
+     * inside a section whose own heading already names it.
+     */
+    headingLevel?: HeadingLevel | 'none' | undefined;
+}
+/**
+ * Nothing here, said honestly.
+ *
+ * AN EMPTY STATE IS A SENTENCE, NOT A SHRUG. The three states it has to keep
+ * apart are "nothing has happened yet", "nothing could be read" and "this is
+ * not configured": the first is fine, the second is a fault somebody has to
+ * look at, and the third is a thing they can go and do. Rendered as the same
+ * grey "No data", they are indistinguishable, and the fault is the one that
+ * gets missed.
+ */
+export declare function EmptyState({ icon, illustration, title, description, action, size, headingLevel, className, ...rest }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/EmptyState/index.d.ts

@@ -0,0 +1,3 @@
+import './EmptyState.css';
+export { EmptyState } from './EmptyState.js';
+export type { EmptyStateProps, EmptyStateSize } from './EmptyState.js';

package/dist/EmptyState/index.js

@@ -0,0 +1,3 @@
+export { EmptyState } from '../chunk-RA2ULG6H.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/EmptyState-C6HRBGT7.css

@@ -0,0 +1,73 @@
+/*
+ * The empty state.
+ *
+ * ITS MARK IS DECORATION and takes the decoration ink, which is the one place
+ * that step is allowed: a 32px glyph a reader does not have to make out. Every
+ * word in the box is on a step that clears 4.5:1, because the sentence is the
+ * whole point of the component.
+ */
+
+.crewlet-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-8) var(--spacing-4);
+  text-align: center;
+  font-family: var(--font-family-sans);
+}
+
+.crewlet-empty-state--compact {
+  padding: var(--spacing-6) var(--spacing-4);
+}
+
+.crewlet-empty-state__mark {
+  display: inline-flex;
+  margin-bottom: var(--spacing-1);
+}
+
+/*
+ * The decoration step, and this is the one thing it is for: a 32px drawing a
+ * reader does not have to make out. It is set on the svg rather than on the
+ * wrapper so that it can never reach a word, which is the rule the package
+ * checks.
+ */
+.crewlet-empty-state__mark svg {
+  color: var(--color-text-muted);
+}
+
+/*
+ * A STEP DOWN FROM THE PAGE'S OWN INK, both of them. The engine sets the
+ * sentence at the secondary step and the line under it at the tertiary one,
+ * and the reason is that nothing is here: the box is telling a reader what is
+ * absent, so it should not out-shout the content around it that is present.
+ * Both steps clear 4.5:1 on every ground in both palettes, which is what makes
+ * quiet different from faint.
+ */
+/*
+ * The page's own leading. The box is a sentence with a sentence under it, and
+ * at the tight step the heading's line sits closer to its own descenders than
+ * to the line it introduces.
+ */
+.crewlet-empty-state__title {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-empty-state__description {
+  margin: 0;
+  /* Narrow on purpose: this is one or two sentences, and a line of it running
+     the width of a screen is a line nobody finishes. */
+  max-width: var(--size-measure-narrow);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-empty-state__action {
+  margin-top: var(--spacing-2);
+}

package/dist/EmptyValue/EmptyValue.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The mark an absent value is drawn as: an EN dash, U+2013.
+ *
+ * An en dash rather than an em dash, which this design system does not use
+ * anywhere; rather than a hyphen, which is a minus sign in a column of
+ * numbers; and rather than an empty cell, which reads as a value nobody has
+ * looked at yet.
+ */
+export declare const EMPTY_VALUE = "\u2013";
+export interface EmptyValueProps {
+    /**
+     * What the absence means, read in place of the dash. "Not reported" is the
+     * honest default: the value was asked for and nothing came back. A caller
+     * that knows better should say so, because the distinctions matter: "Not
+     * configured" is a thing somebody can fix, "Not applicable" is not a gap at
+     * all, and "Not reported yet" is a thing that may still arrive.
+     */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * A value that is not there, said once rather than drawn as a punctuation mark
+ * a screen reader reads as "dash" or skips entirely.
+ *
+ * AN ABSENT NUMBER IS A MARKED ABSENCE, NEVER A ZERO. A cost nobody measured
+ * and a cost of nothing are different facts, and a table that draws both as
+ * `0` has thrown the difference away where it can never be recovered. Every
+ * place that would have written a bare dash uses this instead, so the absence
+ * carries its own meaning and its own reading.
+ */
+export declare function EmptyValue({ label, className }: EmptyValueProps): import("react/jsx-runtime").JSX.Element;

package/dist/EmptyValue/index.d.ts

@@ -0,0 +1,3 @@
+import './EmptyValue.css';
+export { EMPTY_VALUE, EmptyValue } from './EmptyValue.js';
+export type { EmptyValueProps } from './EmptyValue.js';

package/dist/EmptyValue/index.js

@@ -0,0 +1,3 @@
+export { EMPTY_VALUE, EmptyValue } from '../chunk-EUCC37WY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/EmptyValue-4B6ODXHT.css

@@ -0,0 +1,12 @@
+/*
+ * The absent value sits on the tertiary step, quieter than the values around
+ * it in a column and still over the 4.5:1 floor. NOT the decoration step: the
+ * dash is what tells a sighted reader the value is absent, so it is a fact
+ * they have to be able to make out, not an ornament.
+ */
+
+.crewlet-empty-value {
+  color: var(--color-text-tertiary);
+  /* A dash in a numeric column lines up with the digits above it. */
+  font-variant-numeric: tabular-nums;
+}

package/dist/EntityChip/EntityChip.d.ts

@@ -0,0 +1,40 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type AvatarSizeStep } from '../Avatar/index.js';
+/**
+ * Whether the engine runs this one.
+ *
+ * `human` draws the badge with a dashed edge, which is structure and not
+ * status: a human seat is a real seat that no agent occupies. It is carried by
+ * the edge rather than by a hue, so the status hues keep meaning only what
+ * they mean.
+ */
+export type EntityChipVariant = 'agent' | 'human';
+export interface EntityChipProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Who or what this is. Drawn as initials and read as the chip's own text. */
+    name: string;
+    /** Where it goes. With neither this nor `asChild` the chip is inert text. */
+    href?: string | undefined;
+    /**
+     * Render the single child element as the chip instead of an anchor, to put
+     * this look on a router's own Link while keeping its navigation.
+     */
+    asChild?: boolean | undefined;
+    variant?: EntityChipVariant | undefined;
+    /** The badge's step. The name takes the surrounding text size either way. */
+    size?: AvatarSizeStep | undefined;
+    children?: ReactNode;
+}
+/**
+ * A name with its badge, as one thing.
+ *
+ * IT IS NOT DRAWN IN THE ACCENT, and that is the rule the component exists to
+ * hold. A seat's name is IDENTITY, and the accent means "where the reader is";
+ * a name rendered in the accent at every place it appears is identity-colouring
+ * by accident, and it leaves the one thing on the page that IS the reader's
+ * position indistinguishable from forty links that are not. The affordance is
+ * the hover and the cursor, which is what a whole-row link has anyway.
+ *
+ * The badge is DECORATIVE here: the name is printed right beside it, and a
+ * badge that was also read would make every row say the name twice.
+ */
+export declare function EntityChip({ name, href, asChild, variant, size, className, children, ...rest }: EntityChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/EntityChip/index.d.ts

@@ -0,0 +1,3 @@
+import './EntityChip.css';
+export { EntityChip } from './EntityChip.js';
+export type { EntityChipProps, EntityChipVariant } from './EntityChip.js';

package/dist/EntityChip/index.js

@@ -0,0 +1,3 @@
+export { EntityChip } from '../chunk-QYOFACSP.js';
+import '../chunk-PNFASD6F.js';
+import '../chunk-ODEQTPFM.js';

package/dist/EntityChip-LUCPZBBG.css

@@ -0,0 +1,64 @@
+/*
+ * A name with its badge, as one thing.
+ *
+ * A LINK THAT IS A ROW TAKES THE PAGE'S TEXT COLOUR, not the link colour.
+ * Otherwise every seat name in every list renders in the accent, which is
+ * identity-colouring by accident and leaves the one thing on the page that IS
+ * the reader's position looking exactly like forty links that are not. The
+ * affordance is the hover and the cursor.
+ */
+
+.crewlet-entity-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  text-decoration: none;
+}
+
+.crewlet-entity-chip__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.crewlet-entity-chip--link {
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/*
+ * TWO CARRIERS ON HOVER: the accent ink on the chip, and an underline on the
+ * NAME. The ink is the engine's, and it is the accent's own meaning, where the
+ * reader is about to be, spent for exactly as long as the pointer is there; at
+ * rest the chip stays in the page's ink, because a name rendered in the accent
+ * everywhere it appears is identity-colouring by accident and leaves the one
+ * thing on the page that IS the reader's position looking like forty links
+ * that are not. The underline is what a reader who cannot separate the two
+ * inks sees instead, and it costs the badge beside it no movement.
+ */
+.crewlet-entity-chip--link:hover,
+.crewlet-entity-chip--link:focus-visible {
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-entity-chip--link:hover .crewlet-entity-chip__name,
+.crewlet-entity-chip--link:focus-visible .crewlet-entity-chip__name {
+  text-decoration: underline;
+}
+
+.crewlet-entity-chip--link:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-entity-chip--link {
+    transition: none;
+  }
+}

package/dist/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,58 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+export interface ErrorBoundaryProps {
+    /**
+     * What the reader is looking at. A NEW VALUE IS A NEW CHANCE TO RENDER, so a
+     * route, a tab or a selected record is the right thing to pass: without one,
+     * a boundary that has caught stays caught until the page is reloaded, and
+     * going somewhere else shows the failure of the screen you left.
+     */
+    resetKey?: string | number | undefined;
+    /** Draws the failure. Without one, the boundary draws the block below. */
+    fallback?: ((error: Error, reset: () => void) => ReactNode) | undefined;
+    /**
+     * Reports the failure to wherever the application collects them.
+     *
+     * The one thing a fallback cannot do: it runs during a render, where a write
+     * to a log, a counter or a session is a side effect in the wrong phase.
+     */
+    onError?: ((error: Error, info: ErrorInfo) => void) | undefined;
+    /** The default fallback's heading. */
+    title?: string | undefined;
+    /** The default fallback's sentence. */
+    description?: string | undefined;
+    /** The default fallback's button. */
+    retryLabel?: string | undefined;
+    children?: ReactNode;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+    /** The key the current state belongs to, so a change of key is visible here. */
+    resetKey: string | number | undefined;
+}
+/**
+ * One region that throws takes itself down, and nothing else.
+ *
+ * WITHOUT ONE, A RENDER ERROR UNMOUNTS THE WHOLE APPLICATION. That is React's
+ * contract, and it is what one malformed field did to the dashboard this is
+ * ported from: a seat whose model was a per-phase mapping reached a component
+ * as an object child, and the reader was left with a blank page, no navigation
+ * and no way to learn which screen or which field. The console that has no
+ * boundary at all has the same failure waiting in it.
+ *
+ * WHERE IT GOES: around the routed screen, and only there. The shell around it
+ * is what a reader needs in order to get somewhere else, so a boundary that
+ * wraps the shell too takes the way out down with the screen.
+ *
+ * IT RESETS on a new `resetKey` and when the reader asks to try again. React
+ * reports a caught error to the console itself, so this logs nothing: a second
+ * report says the same thing twice and makes the first one harder to find.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: unknown): Partial<ErrorBoundaryState>;
+    static getDerivedStateFromProps(props: ErrorBoundaryProps, state: ErrorBoundaryState): Partial<ErrorBoundaryState> | null;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    private readonly reset;
+    render(): ReactNode;
+}
+export {};

package/dist/ErrorBoundary/index.d.ts

@@ -0,0 +1,3 @@
+import './ErrorBoundary.css';
+export { ErrorBoundary } from './ErrorBoundary.js';
+export type { ErrorBoundaryProps } from './ErrorBoundary.js';

package/dist/ErrorBoundary/index.js

@@ -0,0 +1,4 @@
+export { ErrorBoundary } from '../chunk-7EM5T4ME.js';
+import '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ErrorBoundary-ME36CQTA.css

@@ -0,0 +1,59 @@
+/*
+ * The default fallback: a quiet block on the inset surface rather than a red
+ * panel. A screen that failed to draw is not an error the reader made, and a
+ * danger frame around it says the opposite. The one danger note is the
+ * message itself, which is the part a report needs.
+ */
+
+.crewlet-error-boundary {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  /* The panel's own body inset and its lift: a fallback is still a panel of
+     the product, and one drawn without the rim read as a block of unstyled
+     text where the screen should have been. */
+  padding: var(--spacing-4);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-subtle);
+  box-shadow: var(--shadow-xs), var(--shadow-hairline);
+  max-width: var(--size-measure);
+}
+
+.crewlet-error-boundary__title {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  /* The panel title register. It was the 18px heading step, which on a block
+     that replaces one section of a screen announced itself more loudly than
+     the screen's own name. */
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--color-text-primary);
+}
+
+.crewlet-error-boundary__description {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+}
+
+/* The message wraps rather than scrolls: it is one sentence from a thrown
+   error, and a reader asked to copy it should be able to see all of it. */
+.crewlet-error-boundary__message {
+  margin: 0;
+  max-width: 100%;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-feedback-danger-line);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-feedback-danger-ink);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

package/dist/Eyebrow/Eyebrow.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+export type EyebrowVariant = 'muted' | 'accent' | 'gradient';
+export type EyebrowElement = 'span' | 'div' | 'p';
+export interface EyebrowProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to an inline span. */
+    as?: EyebrowElement | undefined;
+    variant?: EyebrowVariant | undefined;
+}
+/**
+ * Eyebrow (kicker), the small uppercase label that sits above a section title
+ * to name the section.
+ *
+ * It is set in THE micro-label register, the same one `Text variant="label"`
+ * and a table's column head take, so a kicker over a marketing band and a
+ * column head in a console read as one system rather than as two ideas of
+ * what a small uppercase label is.
+ */
+export declare const Eyebrow: ({ as: As, variant, className, children, ...rest }: EyebrowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Eyebrow/index.d.ts

@@ -0,0 +1,3 @@
+import './Eyebrow.css';
+export { Eyebrow } from './Eyebrow.js';
+export type { EyebrowProps, EyebrowVariant, EyebrowElement } from './Eyebrow.js';

package/dist/Eyebrow/index.js

@@ -0,0 +1,2 @@
+export { Eyebrow } from '../chunk-RK4XPHVG.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Eyebrow-5NREGHQH.css

@@ -0,0 +1,46 @@
+/*
+ * Eyebrow (kicker), the uppercase label that names a section.
+ *
+ * THE ONE MICRO-LABEL REGISTER, and it is the same one `Text variant="label"`
+ * and a table's column head are set in: 11px, medium, the wide track,
+ * uppercase, on the tertiary step. It used to be its own thing (monospace, one
+ * size up, semibold, the wider track), and two registers that mean "this names
+ * the block under it" is exactly how a page ends up with six tracking values
+ * for one job.
+ */
+
+.crewlet-eyebrow {
+  display: inline-block;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-eyebrow--muted {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The accent as TEXT takes the INK step, never the fill. The fill is a mark
+ * and clears 3:1; a word has to clear 4.5:1, and an 11px uppercase label is
+ * exactly where a fill-as-text fails.
+ */
+.crewlet-eyebrow--accent {
+  color: var(--color-brand-accent-ink);
+}
+
+/*
+ * A marketing hero's kicker. A gradient painted through the glyphs has no
+ * measurable contrast, so it is reserved for display type over a surface the
+ * page controls, never for a label carrying a fact on its own.
+ */
+.crewlet-eyebrow--gradient {
+  background: var(--color-brand-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}