@persona/design-system 0.1.8 → 0.2.0

package/skills/ui-authoring/REFERENCE.md

@@ -0,0 +1,293 @@
+# Design Tokens Reference
+
+Complete reference for `@persona/design-tokens` package.
+
+## Import
+
+```tsx
+import { Color, Spacing, Typography } from '@persona/design-tokens';
+```
+
+## Color
+
+`Color` is an enum with semantic color names organized by purpose.
+
+### Core Color Palette
+
+Each core color has shades from 50 (lightest) to 1100 (darkest):
+
+```tsx
+// Purple
+Color.CorePurple50     // #F4F5FF (lightest)
+Color.CorePurple100
+Color.CorePurple500    // Mid-range purple
+Color.CorePurple700
+Color.CorePurple1100   // #010334 (darkest)
+
+// Other core colors follow same pattern:
+// CoreRed, CoreOrange, CoreYellow, CoreGreen, CoreTeal, CoreBlue, CoreSlate
+```
+
+### Primary Colors
+
+```tsx
+Color.PrimaryBlack    // #000000
+Color.PrimaryWhite    // #FFFFFF
+Color.PrimaryPurple   // #3F48FD (brand purple)
+Color.PrimaryRed      // #F04B38
+Color.PrimaryOrange   // #F59602
+Color.PrimaryYellow   // #DFFD2F
+Color.PrimaryGreen    // #41D49D
+Color.PrimaryTeal     // #36EBFD
+Color.PrimaryBlue     // #2B7FFD
+```
+
+### Background Colors
+
+```tsx
+Color.BackgroundPrimary      // #FFFFFF (main background)
+Color.BackgroundSecondary    // #F5F5F6
+
+// Button backgrounds
+Color.BackgroundButtonDefault
+Color.BackgroundButtonDefaultHover
+Color.BackgroundButtonPrimary
+Color.BackgroundButtonPrimaryHover
+Color.BackgroundButtonDanger
+Color.BackgroundButtonDangerHover
+
+// Input backgrounds
+Color.BackgroundInputDefault
+Color.BackgroundInputActive
+Color.BackgroundInputDisabled
+
+// Label backgrounds
+Color.BackgroundLabelGrey
+Color.BackgroundLabelPurple
+Color.BackgroundLabelRed
+Color.BackgroundLabelGreen
+// ... and more label variants
+
+// Status indicator backgrounds
+Color.BackgroundStatusIndicatorSuccess
+Color.BackgroundStatusIndicatorWarning
+Color.BackgroundStatusIndicatorCritical
+Color.BackgroundStatusIndicatorFeature
+```
+
+### Text Colors
+
+```tsx
+Color.TextPrimary      // #313131 (main text)
+Color.TextSecondary    // #707070 (secondary text)
+Color.TextInverse      // #FFFFFF (text on dark backgrounds)
+Color.TextActive       // #3F48FD (active/link text)
+Color.TextDanger       // #B81F0E (error text)
+Color.TextDisabled     // #BDBDBD (disabled text)
+
+// Status indicator text colors
+Color.TextStatusIndicatorSuccess
+Color.TextStatusIndicatorWarning
+Color.TextStatusIndicatorCritical
+```
+
+### Border Colors
+
+```tsx
+Color.BorderHairline     // #F1F1F2 (subtle border)
+Color.BorderDivider      // #E2E2E3 (section divider)
+Color.BorderFocus        // #2B7FFD (focus state)
+
+// Input borders
+Color.BorderInputDefault
+Color.BorderInputHover
+Color.BorderInputActive
+Color.BorderInputWarning
+Color.BorderInputDanger
+Color.BorderInputDisabled
+
+// Icon borders
+Color.BorderIconPrimary
+Color.BorderIconSecondary
+Color.BorderIconActive
+Color.BorderIconSuccess
+Color.BorderIconWarning
+Color.BorderIconDanger
+```
+
+### Usage Example
+
+```tsx
+const StyledCard = styled.div`
+  background-color: ${Color.BackgroundPrimary};
+  border: 1px solid ${Color.BorderDivider};
+  color: ${Color.TextPrimary};
+
+  &:hover {
+    background-color: ${Color.BackgroundSecondary};
+  }
+`;
+```
+
+## Spacing
+
+`Spacing` is an enum with numeric indices 0-9:
+
+```tsx
+Spacing[0]   // "0px"
+Spacing[1]   // "4px"
+Spacing[2]   // "8px"
+Spacing[3]   // "12px"
+Spacing[4]   // "16px"
+Spacing[5]   // "24px"
+Spacing[6]   // "32px"
+Spacing[7]   // "40px"
+Spacing[8]   // "48px"
+Spacing[9]   // "56px"
+```
+
+### Common Usage
+
+- **Micro spacing** (1-2): Icon-to-text, tight groupings
+- **Small spacing** (3-4): Form field padding, button padding
+- **Medium spacing** (5): Section margins, card padding
+- **Large spacing** (6-7): Component spacing, page sections
+- **Extra large** (8-9): Hero sections, major divisions
+
+### Usage Example
+
+```tsx
+const Container = styled.div`
+  padding: ${Spacing[5]};
+  margin-bottom: ${Spacing[4]};
+  gap: ${Spacing[3]};
+`;
+```
+
+**For values >56px**: Use hardcoded pixels with a comment explaining the custom value.
+
+## Typography
+
+`Typography` provides complete type styles (font family, size, weight, line height, decoration).
+
+### Display Styles
+
+Large, prominent text for headers and hero sections:
+
+```tsx
+Typography.DisplayLarge    // 64px, bold
+Typography.DisplayMedium   // 48px, bold
+Typography.DisplaySmall    // 36px, bold
+```
+
+### Heading Styles
+
+For section headers and sub-headers:
+
+```tsx
+Typography.HeadingLarge       // 28px
+Typography.HeadingMedium      // 24px
+Typography.HeadingSmall       // 20px
+Typography.HeadingExtraSmall  // 16px
+```
+
+### Text/Paragraph Styles
+
+For body copy and UI text:
+
+```tsx
+// Large text variants
+Typography.TextLarge          // 16px, regular
+Typography.TextLargeBold      // 16px, bold
+Typography.TextLargeLight     // 16px, light
+
+// Medium text variants (most common for body)
+Typography.TextMedium         // 14px, regular
+Typography.TextMediumBold     // 14px, bold
+Typography.TextMediumLight    // 14px, light
+Typography.TextMediumLink     // 14px, regular, underlined
+
+// Small text variants
+Typography.TextSmall          // 12px, regular
+Typography.TextSmallBold      // 12px, bold
+Typography.TextSmallLink      // 12px, regular, underlined
+Typography.TextExtraSmall     // 10px
+
+// Monospace
+Typography.TextMono           // 14px, monospace
+```
+
+### Typography Usage
+
+**IMPORTANT**: Always use complete `Typography` styles. Do not use individual typography tokens like `FontSize`, `FontWeight`, or `FontFamily` directly.
+
+Each `Typography` style is a complete `PDSTypeStyle` object containing:
+
+```tsx
+type PDSTypeStyle = {
+  fontFamily: FontFamily;
+  fontWeight: FontWeight;
+  lineHeight: LineHeight;
+  fontSize: FontSize;
+  textDecoration: TextDecoration;
+};
+```
+
+**Styled components usage:**
+
+```tsx
+const Heading = styled.h1`
+  ${Typography.HeadingLarge}
+  color: ${Color.TextPrimary};
+`;
+
+const BodyText = styled.p`
+  ${Typography.TextMedium}
+  color: ${Color.TextSecondary};
+`;
+
+const SmallLabel = styled.span`
+  ${Typography.TextSmall}
+  color: ${Color.TextSecondary};
+`;
+```
+
+## Finding Colors
+
+When you need a color:
+
+1. **For semantic purposes**, use purpose-named colors:
+   - Buttons: `Color.BackgroundButtonPrimary`
+   - Text: `Color.TextPrimary`, `Color.TextSecondary`
+   - Borders: `Color.BorderDivider`, `Color.BorderInputDefault`
+
+2. **For specific shades**, use core colors with shade numbers:
+   - Light purple: `Color.CorePurple200`
+   - Mid purple: `Color.CorePurple500`
+   - Dark purple: `Color.CorePurple900`
+
+3. **If exact color doesn't exist**: Use the closest available color with a comment explaining the choice.
+
+## Token Verification
+
+To explore available tokens in your project:
+
+```bash
+# Search for color definitions
+grep -r "Color\." node_modules/@persona/design-tokens/dist/js/colors.d.ts
+
+# Check spacing values
+cat node_modules/@persona/design-tokens/dist/js/spacing.d.ts
+
+# See typography styles
+cat node_modules/@persona/design-tokens/dist/js/typography.d.ts
+```
+
+Or check programmatically:
+
+```tsx
+import * as DesignTokens from '@persona/design-tokens';
+console.log(DesignTokens.Color);
+console.log(DesignTokens.Spacing);
+console.log(DesignTokens.Typography);
+```

package/skills/ui-authoring/SKILL.md

@@ -0,0 +1,263 @@
+---
+name: ui-authoring
+description: Use when implementing UI, styling React components, working with design tokens, or making frontend changes, or when file paths include design-system/components/ or styled-components.
+metadata:
+  library: '@persona/design-system'
+  library_version: '0.2.0'
+---
+
+# UI Authoring
+
+## Design Tokens
+
+```tsx
+import { Color, Spacing, Typography } from '@persona/design-tokens';
+```
+
+- `Spacing[0–9]` = 0/4/8/12/16/24/32/40/48/56px; hardcode px with a comment for larger values.
+- Always use complete `Typography` styles (e.g. `Typography.TextMedium`), never individual font properties.
+- See [REFERENCE.md](REFERENCE.md) for the full `Color` / `Spacing` / `Typography` catalog.
+
+## Component-First — check this before creating any `styled` component
+
+| Need | Component | Import |
+|------|-----------|--------|
+| Flex column | `Stack` | `@persona/design-system/components/Stack` |
+| Flex row | `HStack` | `@persona/design-system/components/Stack` |
+| Heading text | `Heading` | `@persona/design-system/components/Text` |
+| Body text | `Paragraph` | `@persona/design-system/components/Text` |
+| Form label | `Label` | `@persona/design-system/components/Text` |
+| Button | `Button` | `@persona/design-system/components/Button` |
+| Form fields | `ConfigFormGroup` + `TextField`/`TextAreaField` | `@persona/design-system/components/ConfigFormGroup`, `FormField` |
+| Text input | `Input`, `TextArea` | `@persona/design-system/components/Input`, `TextArea` |
+| Dropdown | `Select` | `@persona/design-system/components/Select` |
+| Dynamic list | `ListBox` | `@persona/design-system/components/ListBox` |
+| Collapsible sections | `Card` + `Card.Section` | `@persona/design-system/components/CardV2` |
+| Modal | `Modal` | `@persona/design-system/components/Modal` |
+| Floating panel | `Popover` | `@persona/design-system/components/Popover` |
+| Status badge | `Sticker` | `@persona/design-system/components/Sticker` |
+| Count badge | `Badge` | `@persona/design-system/components/Badge` |
+| Tabs | `TabBar`, `Tab` | `@persona/design-system/components/TabBar` |
+| Spinner | `Spinner` | `@persona/design-system/components/Spinner` |
+| Alert / notification | `Banner` | `@persona/design-system/components/Banner` |
+| Standalone tooltip | `Tooltip` | `@persona/design-system/components/Tooltip` |
+| Tooltip on a label | `TextUnderlineTooltip` | `@persona/design-system/components/Tooltip` |
+| Page title bar | `PageHeader` | `@persona/design-system/components/PageHeader` |
+| Page shell | `Container`, `Section`, `Backdrop` | `@persona/design-system/patterns/PageLayout` |
+| Data table | `DataTable` | `@persona/design-system/components/DataTable` |
+| Table with loading/empty states | `TableLayout` + `Table` primitives | `@persona/design-system/components/Table` |
+| Editable / form table | `TableBox`, `TableBoxField` | `@persona/design-system/components/TableBox`, `FormField` |
+
+## Tooltip on Labels
+
+**Always use `TextUnderlineTooltip` — never place an info icon next to a label.**
+
+```tsx
+// ❌ Deprecated: icon trigger next to label
+<HStack spacing={Spacing[1]} align='center'>
+  <Label size='sm' color='secondary'>Review Type</Label>
+  <Tooltip iconTrigger={<HelpCircleIcon />} side='right'>…</Tooltip>
+</HStack>
+
+// ✅ Correct: dashed underline on the label itself
+import { TextUnderlineTooltip } from '@persona/design-system/components/Tooltip';
+
+<TextUnderlineTooltip tooltip='Explanation text.' side='right'>
+  <Label size='sm' color='secondary'>Review Type</Label>
+</TextUnderlineTooltip>
+```
+
+`iconTrigger` is only appropriate for standalone icon buttons with no adjacent label text.
+
+## Table Guidelines
+
+Never hand-roll `<table>`, `<thead>`, `<th>`, or `<td>`. Pick the component by use case:
+
+- **`DataTable`** (`@persona/design-system/components/DataTable`) — data views with pagination, sorting, and server-side data.
+- **`TableBox`** (`@persona/design-system/components/TableBox`) / **`TableBoxField`** (`FormField`) — small, form-adjacent tables in config editors: inline editing, row add/delete, drag-drop reorder. See [COMPONENTS.md — Editable Table (TableBox)](COMPONENTS.md#editable-table-tablebox).
+- **`TableLayout`** (`@persona/design-system/components/Table`, named export `TableLayout`) — lower-level table shell with built-in loading and empty states; use it when composing rows manually from `Table` primitives (`TableRow`, `TableCell`, `TableHeaderCell`).
+
+### DataTable
+
+- **Pagination built-in**: pass `pagination={{ clientPagination: true, pageSize: 10 }}` for client-side; server-side passes `paginationParams`.
+- **Row actions**: pass `rowActions={[{ label, onClick }]}` — never use `Popover` + custom menu items.
+- **Status cells**: use `renderCell: ({ cellValue, row }) => <Sticker ...>` in the column config.
+- **Body cell text**: use `size='md'`, not `size='sm'` (sm is for timestamps and captions only).
+
+### TableLayout loading & empty behavior
+
+```tsx
+import { TableLayout, TableHeaderCell, TableRow, TableCell } from '@persona/design-system/components/Table';
+
+<TableLayout
+  headerTR={<><TableHeaderCell>Name</TableHeaderCell><TableHeaderCell>Status</TableHeaderCell></>}
+  isLoading={isLoading}
+  isEmpty={rows.length === 0}
+  nullState={<EmptyState />}
+  showHeader   // keep header + column layout visible while empty/loading
+  stickyHeader
+>
+  {rows.map((row) => <TableRow key={row.id}>…</TableRow>)}
+</TableLayout>
+```
+
+- `isLoading` + rows (or `showHeader`): renders the table with an animated top progress bar and a white overlay — no layout shift.
+- `isLoading` + `isEmpty` **without** `showHeader`: renders only a large centered `Spinner` (`data-loading-indicator='true'`), no table at all. Pass `showHeader` to keep the table header visible during initial load.
+- `isEmpty` + not loading: renders `nullState` (below the header when `showHeader` is set).
+- Other props: `headerTR` (required, the `<th>` row contents), `size` (`'sm' | 'md'`), `containerMaxHeight`, `containerScrollsHorizontally`, `dataTest`.
+
+## Anti-Patterns
+
+```tsx
+// ❌ Never wrap text or flex layouts in styled components
+const Title = styled.span`${Typography.HeadingSmall}`;
+const Col = styled.div`display: flex; flex-direction: column; gap: ${Spacing[1]};`;
+const ModalOverlay = styled.div`position: fixed; ...`;  // use <Modal> instead
+
+// ✅ Use design system components
+<Heading size="sm">Title</Heading>
+<Stack spacing={Spacing[1]}><Label>Field</Label><Input /></Stack>
+<Modal isOpen={isOpen} onClose={onClose} title="..." footer={...}>...</Modal>
+```
+
+- `Paragraph` defaults to `color="secondary"` (grey) — use `color="primary"` for black text.
+- Field values in detail/metadata layouts: do not add `weight="bold"` unless the design explicitly calls it out.
+
+## Form Pattern
+
+```tsx
+import ConfigFormGroup from '@persona/design-system/components/ConfigFormGroup';
+import { TextField, TextAreaField } from '@persona/design-system/components/FormField';
+
+<ConfigFormGroup>
+  <TextField
+    label="Name"
+    value={config.name}
+    onChange={(e) => setConfig({ ...config, name: e.target.value })}
+    configField={true}    // helperText becomes a tooltip
+    helperText="Must be unique"
+    errorText={errors.name}
+  />
+  <TextAreaField
+    label="Description"
+    value={config.description}
+    onChange={(e) => setConfig({ ...config, description: e.target.value })}
+    configField={true}
+  />
+</ConfigFormGroup>
+```
+
+`ConfigFormGroup` provides consistent 20px spacing between fields. See [COMPONENTS.md](COMPONENTS.md) for form state hook, `ListBox`, `TableBox`, `Card`, `Modal`, `Select` patterns and full props reference.
+
+## Sticker Status Mapping
+
+| Business status | Sticker variant |
+|----------------|----------------|
+| approved / active / verified / success | `success` |
+| declined / failed / error | `danger` |
+| pending / in-review / flagged | `caution` |
+| inactive / archived / disabled | `basic` |
+
+## Icon Sizes
+
+- `@persona/icons` — 16px default; use for buttons and standalone icons.
+- `@persona/icons/12px` — use for `Sticker` icons and inline text icons.
+
+## Empty State
+
+```tsx
+<Stack align="center" spacing={Spacing[3]} style={{ padding: Spacing[6] }}>
+  <Paragraph color="secondary">No items yet.</Paragraph>
+</Stack>
+```
+
+For tables/lists, also pass `emptyText` prop where supported (e.g. `ListBox`).
+
+## Loading States
+
+```tsx
+// Inline spinner
+if (isLoading) return <Stack align="center" spacing={Spacing[3]}><Spinner srText="Loading..." /></Stack>;
+
+// Card built-in loading prop (preferred when content is inside a Card.Section)
+<Card.Section loading={isLoading}>...</Card.Section>
+```
+
+Never: `isLoading && <div>Loading...</div>` — always use `<Spinner>` or the `loading` prop.
+
+## Testing
+
+- Prefer `getByRole`, `getByLabelText`, `getByText` over `getByTestId`.
+- Use `dsRender` from `@persona/design-system/utils/testing` (wraps with ThemeProvider).
+- Use `userEvent.type()` over `fireEvent.change()`; `waitFor()` for async updates.
+
+## Storybook
+
+```tsx
+const meta: Meta<typeof MyComponent> = {
+  title: 'Components/MyComponent',
+  component: MyComponent,
+  parameters: {
+    layout: 'padded',
+    a11y: { test: 'error' },
+    design: { type: 'figma', url: 'https://figma.com/...' }
+  },
+  argTypes: { onSave: { action: 'saved' } }
+};
+export default meta;
+
+export const Default: StoryObj<typeof MyComponent> = { args: { variant: 'create' } };
+export const WithErrors: StoryObj<typeof MyComponent> = { args: { errors: { name: 'Required' } } };
+```
+
+Add `ComponentName.stories.tsx` for every new component or visual variant.
+
+## Data Visualization (Charts)
+
+Use `recharts` for all chart components. Always import colors from `ChartingColors` — never
+hardcode hex values.
+
+```tsx
+import { ChartingColors } from '@persona/design-tokens';
+
+// Sequential — 8 values; for ordered/numeric data (score bands, age ranges, percentages)
+// Use index 0 for the largest value on light backgrounds.
+ChartingColors.Sequential
+
+// Categorical — 14 values; for distinct unordered categories (status, type, country)
+// Light backgrounds only. If > 14 categories, bundle similar items or link to an export view.
+ChartingColors.Categorical
+```
+
+### Palette selection guide
+
+| Data type | Palette | Max series |
+|-----------|---------|-----------|
+| Numeric / ordered | `Sequential` | 8 |
+| Categorical / unordered | `Categorical` | 14 |
+
+### Recharts pattern
+
+```tsx
+import { ChartingColors } from '@persona/design-tokens';
+import { Cell, Pie, PieChart } from 'recharts';
+
+<PieChart>
+  <Pie data={data} dataKey="value">
+    {data.map((_, i) => (
+      <Cell key={i} fill={ChartingColors.Categorical[i % ChartingColors.Categorical.length]} />
+    ))}
+  </Pie>
+</PieChart>
+```
+
+**Anti-patterns:**
+- Hardcoding hex values instead of `ChartingColors`
+- Using `Categorical` on a dark background
+- Using `Sequential` for unordered categories
+
+## Resources
+
+- [EXAMPLES.md](EXAMPLES.md) — copy-paste patterns (Buttons, Forms, Modals, DataTable, TabBar, Tooltip, Spinner, Banner, Sticker, Stack, Text)
+- [REFERENCE.md](REFERENCE.md) — full `Color` / `Spacing` / `Typography` token catalog
+- [COMPONENTS.md](COMPONENTS.md) — props reference + patterns for `ConfigFormGroup`, `ListBox`, `TableBox`, `Card`, `Modal`, form state hook

package/dist/Action-E90Wvqmc.d.cts

@@ -1,35 +0,0 @@
-import { n as Tooltip } from "./Tooltip--eDrrk2r.cjs";
-import { t as RequireOneOf } from "./utilities-mSlaTrjB.cjs";
-import { ComponentProps, ComponentPropsWithoutRef, ReactElement } from "react";
-
-//#region types/Action.d.ts
-type Action = RequireOneOf<{
-  disabled?: boolean;
-  hidden?: boolean;
-  id?: string;
-  to?: string;
-  onClick?: (e: React.MouseEvent) => void | Promise<void>;
-}, 'to' | 'onClick'>;
-type IconAction = Action & {
-  ariaLabel: string;
-  icon: ReactElement;
-  tooltip?: ReactElement;
-  tooltipProps?: Pick<ComponentPropsWithoutRef<typeof Tooltip>, 'maxWidth' | 'side'>;
-  label?: never;
-};
-type TextAction = Action & {
-  label: string;
-  ariaLabel?: string;
-  variant?: 'basic' | 'primary' | 'danger';
-  prefixIcon?: ReactElement;
-  suffixIcon?: ReactElement;
-  tooltip?: ReactElement;
-  tooltipProps?: Pick<ComponentProps<typeof Tooltip>, 'maxWidth' | 'side'>;
-  icon?: never;
-};
-type MenuAction = Action & {
-  label: string;
-};
-//#endregion
-export { TextAction as i, IconAction as n, MenuAction as r, Action as t };
-//# sourceMappingURL=Action-E90Wvqmc.d.cts.map

package/dist/Action.d.cts

@@ -1,2 +0,0 @@
-import { i as TextAction, n as IconAction, r as MenuAction, t as Action } from "./Action-E90Wvqmc.cjs";
-export { Action, IconAction, MenuAction, TextAction };

package/dist/Attribute.d.cts

@@ -1,107 +0,0 @@
-import { n as IconButtonProps } from "./IconButton-ZcyTFjPn.cjs";
-import { i as ParagraphSize } from "./text-PmH5oc61.cjs";
-import { c as ParagraphProps, u as SpanProps } from "./Text-CrGiWG2E.cjs";
-import * as _$react from "react";
-import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren, ReactNode } from "react";
-import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Attribute/Attribute.d.ts
-type WordBreak = 'break-all' | 'break-word' | 'normal';
-type TextTransform = 'capitalize' | 'sentence';
-type TableLayoutValue = boolean | 'full-width';
-type AttributeSize = 'sm' | 'md';
-declare const AttributeContext: _$react.Context<{
-  table?: TableLayoutValue;
-  horizontal?: boolean;
-  size?: AttributeSize;
-}>;
-declare const IconButtonContainer: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, {}, never>;
-interface AttributeValueProps {
-  placeholder: ReactNode;
-  show?: boolean;
-  redacted?: boolean;
-  value?: ReactNode;
-  textTransform?: TextTransform;
-  wordBreak?: WordBreak;
-  size?: AttributeSize;
-  'aria-labelledby': string;
-  id: string;
-}
-declare const AttributeValue: ({
-  placeholder,
-  show,
-  redacted,
-  value,
-  wordBreak,
-  size,
-  id,
-  "aria-labelledby": ariaLabelledBy
-}: AttributeValueProps) => _$react_jsx_runtime0.JSX.Element;
-interface AttributeProps extends ComponentPropsWithoutRef<'div'> {
-  /**
-   * Title of the attribute. Rendered as a <dt>.
-   */
-  label: ReactNode;
-  /**
-   * Value to display. Rendered as a <dd>.
-   */
-  value?: ReactNode;
-  /**
-   * Will display a "Redacted" sticker if there is a value.
-   */
-  redacted?: boolean;
-  /**
-   * Renders toggleable eye button to the right of the label
-   */
-  toggleable?: boolean;
-  /**
-   * Text to display in presence of null value.
-   */
-  placeholder?: string;
-  /**
-   * Word break styling for value.
-   */
-  wordBreak?: WordBreak;
-  /**
-   * Render a custom label component
-   */
-  labelComponent?: FC<PropsWithChildren<{
-    id: string;
-    size?: ParagraphSize;
-  }>>;
-  /**
-   * Render a custom value component
-   */
-  valueComponent?: ComponentType<AttributeValueProps>;
-  /**
-   * Renders a HelperTooltip to display help text to the right of the label.
-   */
-  helpText?: ReactNode;
-  /**
-   * Custom adornments to display to the right of the label.
-   */
-  right?: ReactNode;
-  /**
-   * Renders attributes in a tabular layout.
-   */
-  table?: TableLayoutValue;
-}
-declare const AttributeLabel: _$styled_components0.StyledComponent<FC<PropsWithChildren<SpanProps>>, any, ParagraphProps, never>;
-declare const Attribute: ({
-  label,
-  value,
-  redacted,
-  placeholder,
-  wordBreak,
-  labelComponent: LabelComponent,
-  valueComponent: ValueComponent,
-  right,
-  helpText,
-  toggleable,
-  table,
-  ...elemProps
-}: AttributeProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { Attribute, Attribute as default, AttributeContext, AttributeLabel, AttributeProps, AttributeSize, AttributeValue, IconButtonContainer, TableLayoutValue, TextTransform, WordBreak };
-//# sourceMappingURL=Attribute.d.cts.map