@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/DateRangeInput/DateRangeInput.js

@@ -0,0 +1,108 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { DatePicker } from '../DatePicker/index.js';
+
+// The narrowest a date control stays legible at before the pair should stack.
+// The spacing scale has no single step that measures it.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const boundMinimumWidth = `calc(${semanticTokens.spacing2xl} * 6)`;
+/** A start and end date, either of which may still be empty. */
+
+/** Props for a start-to-end date range. */
+
+const emptyRange = {
+  end: '',
+  start: ''
+};
+
+/**
+ * Accepts a start and an end date. The end control refuses dates before the
+ * start, so an impossible range cannot be entered in the first place.
+ *
+ * Each bound is a `DatePicker` rather than a `DateInput`: no engine offers a
+ * range picker, and two platform pickers side by side cannot show the reader
+ * that the second is bounded by the first. Two grids of this system's own can,
+ * because the bound is passed to them as `min` and `max`.
+ */
+export function DateRangeInput({
+  defaultValue,
+  endLabel = 'End',
+  legend,
+  onValueChange,
+  startLabel = 'Start',
+  value,
+  ...props
+}) {
+  const startId = useId();
+  const endId = useId();
+  const [internalValue, setInternalValue] = useState(defaultValue ?? emptyRange);
+  const range = value ?? internalValue;
+  function update(next) {
+    if (value === undefined) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }
+  return /*#__PURE__*/_jsxs("fieldset", {
+    ...props,
+    ...{
+      className: "xng3xce xc342km x78zum5 x1a02dak xj0sio9 xtl099x x1ghz6dp x1717udv"
+    },
+    children: [/*#__PURE__*/_jsx("legend", {
+      ...{
+        className: "x1y4yzzg x13fdfvb xltg2ad x1m30uz7 xq5azjn x1ezks3f xjqbemn x1717udv"
+      },
+      children: legend
+    }), /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x78zum5 xdt5ytf x1iyjqo2 x1iwn5ga xvygzv9"
+      },
+      children: [/*#__PURE__*/_jsx("label", {
+        htmlFor: startId,
+        ...{
+          className: "x17y7oyd x13fdfvb xnlz8j1 x1di4hct x1vslzj6"
+        },
+        children: startLabel
+      }), /*#__PURE__*/_jsx(DatePicker, {
+        id: startId,
+        label: startLabel,
+        ...(range.end === '' ? {} : {
+          max: range.end
+        }),
+        onValueChange: start => {
+          update({
+            ...range,
+            start
+          });
+        },
+        value: range.start
+      })]
+    }), /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x78zum5 xdt5ytf x1iyjqo2 x1iwn5ga xvygzv9"
+      },
+      children: [/*#__PURE__*/_jsx("label", {
+        htmlFor: endId,
+        ...{
+          className: "x17y7oyd x13fdfvb xnlz8j1 x1di4hct x1vslzj6"
+        },
+        children: endLabel
+      }), /*#__PURE__*/_jsx(DatePicker, {
+        id: endId,
+        label: endLabel,
+        ...(range.start === '' ? {} : {
+          min: range.start
+        }),
+        onValueChange: end => {
+          update({
+            ...range,
+            end
+          });
+        },
+        value: range.end
+      })]
+    })]
+  });
+}

package/dist/DateRangeInput/index.d.ts

@@ -0,0 +1 @@
+export { DateRangeInput, type DateRange, type DateRangeInputProps, } from './DateRangeInput.js';

package/dist/DateRangeInput/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { DateRangeInput } from './DateRangeInput.js';

package/dist/DateTimeInput/DateTimeInput.d.ts

@@ -0,0 +1,5 @@
+import { type TemporalInputProps } from '../DateInput/index.js';
+/** Props for a datetime-local field. */
+export type DateTimeInputProps = TemporalInputProps;
+/** Accepts one local date and time, exchanged as an ISO string. */
+export declare function DateTimeInput(props: DateTimeInputProps): import("react").JSX.Element;

package/dist/DateTimeInput/DateTimeInput.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const dateTimeInputDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/DateTimeInput/DateTimeInput.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const dateTimeInputDoc = {
+  name: 'DateTimeInput',
+  description: 'Accepts one local date and time as an ISO string.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled value.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the ISO string.'
+  }, {
+    name: 'value',
+    description: 'Controls the current ISO string.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except children, className, defaultValue, onChange, type, and value'],
+  example: '<DateTimeInput onValueChange={setValue} value={value} />',
+  storyId: 'core-date-time-input--default'
+};

package/dist/DateTimeInput/DateTimeInput.js

@@ -0,0 +1,12 @@
+import { TemporalInput } from '../DateInput/index.js';
+
+/** Props for a datetime-local field. */
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Accepts one local date and time, exchanged as an ISO string. */
+export function DateTimeInput(props) {
+  return /*#__PURE__*/_jsx(TemporalInput, {
+    ...props,
+    type: "datetime-local"
+  });
+}

package/dist/DateTimeInput/index.d.ts

@@ -0,0 +1 @@
+export { DateTimeInput, type DateTimeInputProps } from './DateTimeInput.js';

package/dist/DateTimeInput/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { DateTimeInput } from './DateTimeInput.js';

package/dist/Dialog/Dialog.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Widths a dialog surface can claim. */
+export type DialogSize = 'sm' | 'md' | 'lg';
+/** Props shared by modal dialog surfaces. */
+export interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'role' | 'title'> {
+    readonly children?: ReactNode;
+    readonly description?: ReactNode;
+    readonly dismissOnOutsideClick?: boolean;
+    readonly footer?: ReactNode;
+    readonly onDismiss?: () => void;
+    readonly open: boolean;
+    readonly size?: DialogSize;
+    readonly title: ReactNode;
+}
+/** @internal Shared modal surface for Dialog and AlertDialog. */
+export declare function DialogSurface({ children, description, dismissOnOutsideClick, footer, onDismiss, open, role, size, title, ...props }: DialogProps & {
+    readonly role: 'alertdialog' | 'dialog';
+}): import("react").JSX.Element;
+/**
+ * Interrupts the page with a modal surface. Focus is trapped inside it, the
+ * page behind stops scrolling, and Escape closes it through `onDismiss`.
+ */
+export declare function Dialog(props: DialogProps): import("react").JSX.Element;

package/dist/Dialog/Dialog.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const dialogDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/Dialog/Dialog.doc.js

@@ -0,0 +1,33 @@
+import "../styles/stylex.css";
+export const dialogDoc = {
+  name: 'Dialog',
+  description: 'Interrupts the page with a focus-trapped modal surface.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the dialog body.'
+  }, {
+    name: 'description',
+    description: 'Adds a described-by summary line.'
+  }, {
+    name: 'dismissOnOutsideClick',
+    description: 'Allows a click on the scrim to close the dialog.'
+  }, {
+    name: 'footer',
+    description: 'Places actions at the end of the surface.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape or an allowed outside click.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the dialog renders.'
+  }, {
+    name: 'size',
+    description: 'Selects the maximum surface width.'
+  }, {
+    name: 'title',
+    description: 'Names the dialog for assistive technology.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, role, and title'],
+  example: '<Dialog onDismiss={close} open={open} title="Publish">...</Dialog>',
+  storyId: 'core-dialog--default'
+};

package/dist/Dialog/Dialog.js

@@ -0,0 +1,152 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { Overlay } from '../Overlay/index.js';
+
+// The scale stops at 38px, so the three surface widths are named multiples of
+// it rather than the rem literals a dialog would otherwise reach for.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const surfaceWidthSm = `calc(${semanticTokens.spacing2xl} * 10)`;
+const surfaceWidthMd = `calc(${semanticTokens.spacing2xl} * 14)`;
+const surfaceWidthLg = `calc(${semanticTokens.spacing2xl} * 20)`;
+const surfaceEnter = "xnf3w9u-B";
+const styles = {
+  surface: {
+    k44tkh: "xrnvkan",
+    kKVMdj: "x1i3b2kq x1aquc0h",
+    kyAemX: "xwm07dd",
+    kWkggS: "x40o0ze",
+    kaIpWk: "x7xrhi9",
+    kGVxlE: "x1ia5mbg",
+    kMwMTN: "x1y4yzzg",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kMv6JI: "xj0sio9",
+    kskxy: "xmz0i5r",
+    kVQacm: "xb3r6kr",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  sm: {
+    ks0D6T: "x1a578w6",
+    $$css: true
+  },
+  md: {
+    ks0D6T: "x10rvv6p",
+    $$css: true
+  },
+  lg: {
+    ks0D6T: "xhjjbxn",
+    $$css: true
+  },
+  body: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1ap6kct",
+    kAzted: "x2lwn1j",
+    kORKVm: "x1odjw0f",
+    kmVPX3: "x1cfciu7",
+    $$css: true
+  },
+  title: {
+    kMwMTN: "x1y4yzzg",
+    kMv6JI: "x13fdfvb",
+    kGuDYH: "x1fkw5ar",
+    k63SB2: "x1m30uz7",
+    kb6lSQ: "xmkh2y5",
+    kLWn49: "x1vslzj6",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  description: {
+    kMwMTN: "x17y7oyd",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xltg2ad",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  footer: {
+    kLZC3w: "x1pe616k",
+    kPef9Z: "x4tqos1",
+    kEafiO: "xlyo07a",
+    k1xSpc: "x78zum5",
+    kwnvtZ: "x1a02dak",
+    kOIVth: "x1ap6kct",
+    kjj79g: "x13a6bvl",
+    k8WAf4: "x1lr58ck",
+    kg3NbH: "x1q83fih",
+    $$css: true
+  }
+};
+
+/** Widths a dialog surface can claim. */
+
+/** Props shared by modal dialog surfaces. */
+
+/** @internal Shared modal surface for Dialog and AlertDialog. */
+export function DialogSurface({
+  children,
+  description,
+  dismissOnOutsideClick = true,
+  footer,
+  onDismiss,
+  open,
+  role,
+  size = 'md',
+  title,
+  ...props
+}) {
+  const titleId = useId();
+  const descriptionId = useId();
+  return /*#__PURE__*/_jsx(Overlay, {
+    dismissOnOutsideClick: dismissOnOutsideClick,
+    ...(onDismiss ? {
+      onDismiss
+    } : {}),
+    open: open,
+    children: /*#__PURE__*/_jsxs("div", {
+      ...props,
+      "aria-describedby": description === undefined ? undefined : descriptionId,
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      role: role,
+      ...stylex.props(styles.surface, styles[size]),
+      children: [/*#__PURE__*/_jsxs("div", {
+        ...stylex.props(styles.body, scrolling.region),
+        children: [/*#__PURE__*/_jsx("h2", {
+          id: titleId,
+          ...{
+            className: "x1y4yzzg x13fdfvb x1fkw5ar x1m30uz7 xmkh2y5 x1vslzj6 x1ghz6dp"
+          },
+          children: title
+        }), description === undefined ? null : /*#__PURE__*/_jsx("p", {
+          id: descriptionId,
+          ...{
+            className: "x17y7oyd xj0sio9 xltg2ad xgz4m7n x1ezks3f x1ghz6dp"
+          },
+          children: description
+        }), children]
+      }), footer === undefined ? null : /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x1pe616k x4tqos1 xlyo07a x78zum5 x1a02dak x1ap6kct x13a6bvl x1lr58ck x1q83fih"
+        },
+        children: footer
+      })]
+    })
+  });
+}
+
+/**
+ * Interrupts the page with a modal surface. Focus is trapped inside it, the
+ * page behind stops scrolling, and Escape closes it through `onDismiss`.
+ */
+export function Dialog(props) {
+  return /*#__PURE__*/_jsx(DialogSurface, {
+    ...props,
+    role: "dialog"
+  });
+}

package/dist/Dialog/index.d.ts

@@ -0,0 +1 @@
+export { Dialog, DialogSurface, type DialogProps, type DialogSize, } from './Dialog.js';

package/dist/Dialog/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Dialog, DialogSurface } from './Dialog.js';

package/dist/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,25 @@
+import { type ButtonHTMLAttributes, type ReactNode, type RefObject } from 'react';
+import type { Alignment, Placement } from '../hooks/useAnchoredPosition.js';
+/** Props for a menu of actions anchored to a trigger. */
+export interface DropdownMenuProps {
+    readonly alignment?: Alignment;
+    readonly anchorRef: RefObject<HTMLElement | null>;
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly onDismiss?: () => void;
+    readonly open: boolean;
+    readonly placement?: Placement;
+}
+/**
+ * Presents a list of actions beside its trigger. The menu is one tab stop:
+ * arrow keys, Home, and End move between items, and Escape closes it.
+ */
+export declare function DropdownMenu({ alignment, anchorRef, children, label, onDismiss, open, placement, }: DropdownMenuProps): import("react").JSX.Element;
+/** Props for one action inside a `DropdownMenu`. */
+export interface DropdownMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'role'> {
+    readonly description?: ReactNode;
+    readonly leading?: ReactNode;
+    readonly trailing?: ReactNode;
+}
+/** Renders one menu action with the shared leading/label/trailing rhythm. */
+export declare function DropdownMenuItem({ children, description, leading, trailing, type, ...props }: DropdownMenuItemProps): import("react").JSX.Element;

package/dist/DropdownMenu/DropdownMenu.doc.d.ts

@@ -0,0 +1,22 @@
+export declare const dropdownMenuDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};
+export declare const dropdownMenuItemDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/DropdownMenu/DropdownMenu.doc.js

@@ -0,0 +1,47 @@
+import "../styles/stylex.css";
+export const dropdownMenuDoc = {
+  name: 'DropdownMenu',
+  description: 'Presents a keyboard-navigable list of actions beside a trigger.',
+  props: [{
+    name: 'alignment',
+    description: 'Lines the menu up along the cross axis.'
+  }, {
+    name: 'anchorRef',
+    description: 'References the trigger to anchor against.'
+  }, {
+    name: 'children',
+    description: 'Supplies the menu items.'
+  }, {
+    name: 'label',
+    description: 'Names the menu for assistive technology.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape or an outside click.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the menu renders.'
+  }, {
+    name: 'placement',
+    description: 'Selects the preferred side of the trigger.'
+  }],
+  inheritedProps: ['None; DropdownMenu owns its menu element'],
+  example: '<DropdownMenu anchorRef={triggerRef} label="Actions" onDismiss={close} open={open}>...</DropdownMenu>',
+  storyId: 'core-dropdown-menu--default'
+};
+export const dropdownMenuItemDoc = {
+  name: 'DropdownMenuItem',
+  description: 'Renders one action inside a DropdownMenu.',
+  props: [{
+    name: 'description',
+    description: 'Adds secondary text under the label.'
+  }, {
+    name: 'leading',
+    description: 'Places content before the label.'
+  }, {
+    name: 'trailing',
+    description: 'Places content after the label.'
+  }],
+  inheritedProps: ['ButtonHTMLAttributes<HTMLButtonElement> except className and role'],
+  example: '<DropdownMenuItem onClick={publish}>Publish</DropdownMenuItem>',
+  storyId: 'core-dropdown-menu--default'
+};

package/dist/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,114 @@
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useRef } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { focusableElements } from '../hooks/focusableSelector.js';
+import { useListFocus } from '../hooks/useListFocus.js';
+import { Item } from '../Item/index.js';
+import { Popover } from '../Popover/index.js';
+
+// A menu stays wide enough for a two-word action plus its shortcut; the scale
+// stops at 38px, so the floor is a named multiple of it rather than a literal.
+// The bleed is added back because the list negates the popover's padding.
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const menuBleed = `calc(-1 * ${semanticTokens.spacingMd})`;
+const menuMinWidth = `calc(${semanticTokens.spacing2xl} * 5 + ${semanticTokens.spacingMd} * 2)`;
+
+// The same bookmark the sidebar draws beside the reader's page: two hairlines
+// wide, short of the row's full height so it reads as a stroke laid on the
+// row rather than as a rule dividing it.
+const markWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+const markHeight = '64%';
+/** Props for a menu of actions anchored to a trigger. */
+
+/**
+ * Presents a list of actions beside its trigger. The menu is one tab stop:
+ * arrow keys, Home, and End move between items, and Escape closes it.
+ */
+export function DropdownMenu({
+  alignment = 'start',
+  anchorRef,
+  children,
+  label,
+  onDismiss,
+  open,
+  placement = 'bottom'
+}) {
+  const menuRef = useRef(null);
+  const {
+    onKeyDown
+  } = useListFocus(menuRef, {
+    orientation: 'vertical'
+  });
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    // Waiting a frame lets the portalled surface mount before focus moves.
+    const frame = requestAnimationFrame(() => {
+      const menu = menuRef.current;
+      if (menu) {
+        focusableElements(menu)[0]?.focus({
+          preventScroll: true
+        });
+      }
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [open]);
+  return /*#__PURE__*/_jsx(Popover, {
+    alignment: alignment,
+    anchorRef: anchorRef,
+    ...(onDismiss ? {
+      onDismiss
+    } : {}),
+    open: open,
+    placement: placement,
+    role: "presentation",
+    children: /*#__PURE__*/_jsx("div", {
+      "aria-label": label,
+      onKeyDown: onKeyDown,
+      ref: menuRef,
+      role: "menu",
+      ...{
+        className: "x78zum5 xdt5ytf x17ks87g x1gans86 xaks8fo x10y07nz"
+      },
+      children: children
+    })
+  });
+}
+
+/** Props for one action inside a `DropdownMenu`. */
+
+/** Renders one menu action with the shared leading/label/trailing rhythm. */
+export function DropdownMenuItem({
+  children,
+  description,
+  leading,
+  trailing,
+  type = 'button',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("button", {
+    ...props,
+    role: "menuitem",
+    type: type,
+    ...{
+      className: "xjbqb8w xng3xce xc342km x17y7oyd x1ypdohk xj0sio9 x1ti3rys xgz4m7n x1ezks3f x10y07nz x1wkw8jr x1n2onr6 x1yc453h x1elc2ff xs2xxs2 xxjumz xh8yej3 x12ukevf x1cpjm7i x1943h6x x1yi8pbm x1knuo7r x1682cnc x1hmns74 xkjykve xttz05j xrn6485 x1ey6c16 xell8bx x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x1ipqx2d x1kz4h7b"
+    },
+    children: /*#__PURE__*/_jsx(Item, {
+      ...(description === undefined ? {} : {
+        description
+      }),
+      ...(leading === undefined ? {} : {
+        leading
+      }),
+      ...(trailing === undefined ? {} : {
+        trailing
+      }),
+      children: children
+    })
+  });
+}

package/dist/DropdownMenu/index.d.ts

@@ -0,0 +1 @@
+export { DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, } from './DropdownMenu.js';

package/dist/DropdownMenu/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { DropdownMenu, DropdownMenuItem } from './DropdownMenu.js';

package/dist/EmptyState/EmptyState.js

@@ -34,20 +34,20 @@ export function EmptyStateContent({
   return /*#__PURE__*/_jsxs("div", {
     ...{
       0: {
-        className: "x6s0dn4 x1y4yzzg x78zum5 xdt5ytf xj0sio9 xtl099x x1wib74s x2b8uid"
+        className: "x6s0dn4 x1ixvsy6 x7xrhi9 x165nt33 x1y4yzzg x78zum5 xdt5ytf xj0sio9 x1ap6kct x1inwjb7 x1imav47 x1o5p95n x2b8uid"
       },
       1: {
-        className: "x6s0dn4 x1y4yzzg x78zum5 xdt5ytf xj0sio9 x2b8uid x1ap6kct x1cfciu7"
+        className: "x6s0dn4 x1ixvsy6 x7xrhi9 x165nt33 x1y4yzzg x78zum5 xdt5ytf xj0sio9 x2b8uid x1ap6kct xdf4gn3 xff9adi x1q83fih"
       }
     }[!!(size === 'compact') << 0],
     children: [visual, /*#__PURE__*/_jsx("p", {
       ...{
-        className: "x69it5h x1fkw5ar x1sa4947 x1ghz6dp x6wfg6j"
+        className: "x1y4yzzg x13fdfvb x1fkw5ar xmkh2y5 x1vslzj6 x1m30uz7 x1ghz6dp x6wfg6j"
       },
       children: title
     }), detail ? /*#__PURE__*/_jsx("p", {
       ...{
-        className: "x1ti3rys x1ezks3f x1ghz6dp x6wfg6j"
+        className: "x1mgtvnk xj0sio9 xltg2ad xgz4m7n x1ezks3f x1ghz6dp x6wfg6j"
       },
       children: detail
     }) : null, action]

package/dist/Eyebrow/Eyebrow.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+/** Ink ranks an eyebrow can take, secondary being rule 50's own. */
+export type EyebrowTone = 'secondary' | 'muted' | 'danger';
+/** Props for a small label that names something without competing with it. */
+export interface EyebrowProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
+    readonly tone?: EyebrowTone;
+}
+/**
+ * Names a thing without competing with it: a card kicker, a rail heading, a
+ * metric label. It is a `span` rather than `Text`'s paragraph because an
+ * eyebrow is always placed inside somebody else's block.
+ */
+export declare function Eyebrow({ children, tone, ...props }: EyebrowProps): import("react").JSX.Element;

package/dist/Eyebrow/Eyebrow.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const eyebrowDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};