@mitcsutt/kiln-ui 0.1.0

package/dist/components/actions/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","names":["styles","SegmentedControl_module_default","IconOnlyContext","createContext","SegmentedControlItem","forwardRef","rest","iconOnly","useContext","ToggleGroup","cx","className","icon","breakpointAttrs","value","name","toAttr","attrs","base","bp","BREAKPOINTS","v","childValues","values","Children","children","isValidElement","child","SegmentedControlRoot","valueProp","invalidProp","readOnlyProp","disabledProp","idProp","describedByProp","ariaInvalid","labelledByProp","field","useResolvedField","handleBlur","useFocusLeave","onBlur","options","o","uncontrolled","setUncontrolled","useState","defaultValue","handleChange","useCallback","next","onValueChange","index","vars","size","fullWidth","mergeStyles","style","SegmentedControl","markFieldAware"],"sources":["../../../../src/components/actions/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useContext,\n  useState,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { ToggleGroup } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { BREAKPOINTS, mergeStyles, type Responsive } from '#utils/responsive'\nimport type { Size } from '#utils/tokens'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { useFocusLeave } from '#components/inputs/CheckboxGroup/choice'\nimport styles from './SegmentedControl.module.css'\n\nexport interface SegmentedControlOption {\n  value: string\n  label: string\n  icon?: ReactNode\n  disabled?: boolean\n}\n\ntype RootPrimitiveProps = Omit<\n  ComponentPropsWithoutRef<typeof ToggleGroup.Root>,\n  'type' | 'value' | 'defaultValue' | 'onValueChange' | 'children' | 'asChild'\n>\n\nexport interface SegmentedControlProps extends RootPrimitiveProps {\n  /** Segments as data. Alternatively pass `SegmentedControl.Item` children. */\n  options?: readonly SegmentedControlOption[]\n  children?: ReactNode\n  /** Controlled selected value. */\n  value?: string\n  /** Initial value when uncontrolled. Defaults to the first segment. */\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /** Control size. Responsive: `{ base: 'lg', md: 'md' }` for a bigger touch target on phones. */\n  size?: Responsive<Size>\n  /**\n   * Stretch to the container's width. Segments are always equal widths. Responsive:\n   * `{ base: true, md: false }` fills a phone screen and sits inline from `md` up.\n   */\n  fullWidth?: Responsive<boolean>\n  /** Show only icons; labels become each segment's accessible name. */\n  iconOnly?: boolean\n  /** Emits a hidden input with the selected value, for native form submission. */\n  name?: string\n  /** Critical edge + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  /** Focusable but not editable: sets `aria-readonly` and ignores selection changes. */\n  readOnly?: boolean\n}\n\nexport interface SegmentedControlItemProps extends Omit<\n  ComponentPropsWithoutRef<typeof ToggleGroup.Item>,\n  'children'\n> {\n  value: string\n  /** Visible label (or accessible name when the control is `iconOnly`). */\n  children: ReactNode\n  icon?: ReactNode\n}\n\nconst IconOnlyContext = createContext(false)\n\nconst SegmentedControlItem = forwardRef<HTMLButtonElement, SegmentedControlItemProps>(\n  function SegmentedControlItem({ icon, className, children, ...rest }, ref) {\n    const iconOnly = useContext(IconOnlyContext)\n    return (\n      <ToggleGroup.Item ref={ref} className={cx(styles.item, className)} {...rest}>\n        {icon ? (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        ) : null}\n        <span className={iconOnly ? styles.srOnly : styles.label}>{children}</span>\n      </ToggleGroup.Item>\n    )\n  },\n)\n\n/**\n * Per-breakpoint data attributes: the base value on `data-<name>`, and each explicitly\n * set larger breakpoint on `data-<name>-<bp>`. CSS applies them in mobile-first media\n * queries, so a later breakpoint overrides an earlier one.\n */\nfunction breakpointAttrs<T extends string | boolean>(\n  name: string,\n  value: Responsive<T>,\n  toAttr: (v: T) => string | undefined,\n): Record<string, string | undefined> {\n  if (typeof value !== 'object') return { [`data-${name}`]: toAttr(value) }\n  const attrs: Record<string, string | undefined> = {}\n  const base = value.base\n  attrs[`data-${name}`] = base === undefined ? undefined : toAttr(base)\n  for (const bp of BREAKPOINTS) {\n    const v = value[bp]\n    if (bp !== 'base' && v !== undefined) attrs[`data-${name}-${bp}`] = String(v)\n  }\n  return attrs\n}\n\nfunction childValues(children: ReactNode): string[] {\n  const values: string[] = []\n  Children.forEach(children, (child) => {\n    if (isValidElement<{ value?: unknown }>(child) && typeof child.props.value === 'string') {\n      values.push(child.props.value)\n    }\n  })\n  return values\n}\n\n/**\n * Single-select segmented control: pick one of 2–5 peer views or periods\n * (Month / Quarter / Year · Board / Table / Timeline). One segment is always selected —\n * clicking the current one does nothing.\n *\n * Radix ToggleGroup underneath: segments are `role=\"radio\"` inside a `radiogroup`,\n * arrow keys move focus (roving tabindex), Space/Enter selects. Give the group a name\n * with `aria-label`.\n *\n * Segments are equal widths, so the selection indicator is pure CSS — it slides by\n * index with no measuring, and renders correctly on the server.\n *\n * Field-aware: inside a `<Field>` it is labelled by the Field's label and picks up its\n * description, error, `disabled`, `readOnly` and `validating` (see `SegmentedField`).\n * `onBlur` fires once, when focus leaves the whole control.\n */\nconst SegmentedControlRoot = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      options,\n      children,\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      size = 'md',\n      fullWidth = false,\n      iconOnly = false,\n      name,\n      invalid: invalidProp,\n      readOnly: readOnlyProp,\n      disabled: disabledProp,\n      id: idProp,\n      onBlur,\n      className,\n      style,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      'aria-labelledby': labelledByProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    const handleBlur = useFocusLeave(onBlur)\n    const values = options ? options.map((o) => o.value) : childValues(children)\n    const [uncontrolled, setUncontrolled] = useState<string | undefined>(defaultValue ?? values[0])\n    const value = valueProp ?? uncontrolled\n\n    const handleChange = useCallback(\n      (next: string) => {\n        // ToggleGroup lets you deselect the pressed item; a segmented control can't.\n        if (!next || field.readOnly) return\n        if (valueProp === undefined) setUncontrolled(next)\n        onValueChange?.(next)\n      },\n      [valueProp, onValueChange, field.readOnly],\n    )\n\n    const index = value === undefined ? -1 : values.indexOf(value)\n    const vars = {\n      '--_count': Math.max(values.length, 1),\n      '--_index': Math.max(index, 0),\n    } as CSSProperties\n\n    return (\n      <IconOnlyContext.Provider value={iconOnly}>\n        <ToggleGroup.Root\n          ref={ref}\n          type=\"single\"\n          role=\"radiogroup\"\n          value={value ?? ''}\n          onValueChange={handleChange}\n          id={field.id}\n          disabled={field.disabled}\n          aria-labelledby={labelledByProp ?? (rest['aria-label'] ? undefined : field.labelId)}\n          aria-describedby={field.describedBy}\n          aria-invalid={field.invalid || undefined}\n          aria-required={field.required || undefined}\n          aria-readonly={field.readOnly || undefined}\n          aria-busy={field.busy || undefined}\n          data-invalid={field.invalid || undefined}\n          data-readonly={field.readOnly || undefined}\n          onBlur={handleBlur}\n          className={cx(styles.root, className)}\n          {...breakpointAttrs('size', size, String)}\n          {...breakpointAttrs('full-width', fullWidth, (v) => (v ? '' : undefined))}\n          data-icon-only={iconOnly || undefined}\n          style={mergeStyles(vars, style)}\n          {...rest}\n        >\n          {index >= 0 ? <span className={styles.indicator} aria-hidden=\"true\" /> : null}\n          {options\n            ? options.map((o) => (\n                <SegmentedControlItem\n                  key={o.value}\n                  value={o.value}\n                  icon={o.icon}\n                  disabled={o.disabled}\n                >\n                  {o.label}\n                </SegmentedControlItem>\n              ))\n            : children}\n          {name && value ? (\n            <input type=\"hidden\" name={name} value={value} disabled={field.disabled || undefined} />\n          ) : null}\n        </ToggleGroup.Root>\n      </IconOnlyContext.Provider>\n    )\n  },\n)\n\nexport const SegmentedControl = markFieldAware(\n  Object.assign(SegmentedControlRoot, { Item: SegmentedControlItem }),\n)\n"],"mappings":"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"}

package/dist/components/actions/SegmentedControl/SegmentedControl.module.js

@@ -0,0 +1,13 @@
+//#region src/components/actions/SegmentedControl/SegmentedControl.module.css
+var e = "kiln-SegmentedControl__root", t = "kiln-SegmentedControl__item", n = "kiln-SegmentedControl__indicator", r = "kiln-SegmentedControl__icon", i = "kiln-SegmentedControl__label", a = "kiln-SegmentedControl__srOnly", o = {
+	root: e,
+	item: t,
+	indicator: n,
+	icon: r,
+	label: i,
+	srOnly: a
+};
+//#endregion
+export { o as default, r as icon, n as indicator, t as item, i as label, e as root, a as srOnly };
+
+//# sourceMappingURL=SegmentedControl.module.js.map

package/dist/components/actions/SegmentedControl/SegmentedControl.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.module.js","names":["root","item","indicator","icon","label","srOnly","SegmentedControl_module_default"],"sources":["../../../../src/components/actions/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --segmented-radius            default var(--radius-action)\n *   --segmented-track             default var(--color-surface-sunken)\n *   --segmented-indicator         default var(--color-surface-raised)\n *   --segmented-indicator-line    default var(--color-line-strong)\n *   --segmented-indicator-shadow  default var(--shadow-active) (flat except Fiesta)\n *   --segmented-line              default var(--color-line) — the track's edge\n *\n * Invalid (inside a `<Field error>`) turns the track's edge critical — the only change.\n *\n * Geometry: every segment is 1fr of an inline grid, so the indicator is exactly\n * (track − padding) / count wide and slides by --_index × its own width. --_count and\n * --_index are written inline by the component on this element.\n */\n.root {\n  --_h: var(--control-md);\n  --_fs: var(--text-sm);\n  --_px: var(--space-4);\n  --_icon: 1.25rem;\n  --_pad: calc(var(--space-1) * 0.75);\n  --_r: var(--segmented-radius, var(--radius-action));\n\n  position: relative;\n  isolation: isolate;\n  display: inline-grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 1fr;\n  max-inline-size: 100%;\n  min-block-size: var(--_h);\n  padding: var(--_pad);\n  border: var(--border-width) solid var(--segmented-line, var(--color-line));\n  border-radius: var(--_r);\n  background: var(--segmented-track, var(--color-surface-sunken));\n  vertical-align: middle;\n}\n\n.root[data-size='sm'] {\n  --_h: var(--control-sm);\n  --_fs: var(--text-xs);\n  --_px: var(--space-3);\n  --_icon: 1rem;\n}\n.root[data-size='lg'] {\n  --_h: var(--control-lg);\n  --_fs: var(--text-md);\n  --_px: var(--space-5);\n  --_icon: 1.25rem;\n}\n\n.root[data-invalid] {\n  border-color: var(--tone-critical);\n}\n\n.root[data-readonly] .item {\n  cursor: default;\n}\n\n.root[data-full-width] {\n  display: grid;\n  inline-size: 100%;\n}\n\n/*\n * Responsive size / fullWidth: `data-size-<bp>` and `data-full-width-<bp>` are only\n * written for breakpoints the consumer set; mobile-first order lets each override the last.\n */\n@media (min-width: 40em) {\n  .root[data-size-sm='sm'] {\n    --_h: var(--control-sm);\n    --_fs: var(--text-xs);\n    --_px: var(--space-3);\n    --_icon: 1rem;\n  }\n  .root[data-size-sm='md'] {\n    --_h: var(--control-md);\n    --_fs: var(--text-sm);\n    --_px: var(--space-4);\n    --_icon: 1.25rem;\n  }\n  .root[data-size-sm='lg'] {\n    --_h: var(--control-lg);\n    --_fs: var(--text-md);\n    --_px: var(--space-5);\n    --_icon: 1.25rem;\n  }\n  .root[data-full-width-sm='true'] {\n    display: grid;\n    inline-size: 100%;\n  }\n  .root[data-full-width-sm='false'] {\n    display: inline-grid;\n    inline-size: auto;\n  }\n}\n@media (min-width: 48em) {\n  .root[data-size-md='sm'] {\n    --_h: var(--control-sm);\n    --_fs: var(--text-xs);\n    --_px: var(--space-3);\n    --_icon: 1rem;\n  }\n  .root[data-size-md='md'] {\n    --_h: var(--control-md);\n    --_fs: var(--text-sm);\n    --_px: var(--space-4);\n    --_icon: 1.25rem;\n  }\n  .root[data-size-md='lg'] {\n    --_h: var(--control-lg);\n    --_fs: var(--text-md);\n    --_px: var(--space-5);\n    --_icon: 1.25rem;\n  }\n  .root[data-full-width-md='true'] {\n    display: grid;\n    inline-size: 100%;\n  }\n  .root[data-full-width-md='false'] {\n    display: inline-grid;\n    inline-size: auto;\n  }\n}\n@media (min-width: 64em) {\n  .root[data-size-lg='sm'] {\n    --_h: var(--control-sm);\n    --_fs: var(--text-xs);\n    --_px: var(--space-3);\n    --_icon: 1rem;\n  }\n  .root[data-size-lg='md'] {\n    --_h: var(--control-md);\n    --_fs: var(--text-sm);\n    --_px: var(--space-4);\n    --_icon: 1.25rem;\n  }\n  .root[data-size-lg='lg'] {\n    --_h: var(--control-lg);\n    --_fs: var(--text-md);\n    --_px: var(--space-5);\n    --_icon: 1.25rem;\n  }\n  .root[data-full-width-lg='true'] {\n    display: grid;\n    inline-size: 100%;\n  }\n  .root[data-full-width-lg='false'] {\n    display: inline-grid;\n    inline-size: auto;\n  }\n}\n@media (min-width: 80em) {\n  .root[data-size-xl='sm'] {\n    --_h: var(--control-sm);\n    --_fs: var(--text-xs);\n    --_px: var(--space-3);\n    --_icon: 1rem;\n  }\n  .root[data-size-xl='md'] {\n    --_h: var(--control-md);\n    --_fs: var(--text-sm);\n    --_px: var(--space-4);\n    --_icon: 1.25rem;\n  }\n  .root[data-size-xl='lg'] {\n    --_h: var(--control-lg);\n    --_fs: var(--text-md);\n    --_px: var(--space-5);\n    --_icon: 1.25rem;\n  }\n  .root[data-full-width-xl='true'] {\n    display: grid;\n    inline-size: 100%;\n  }\n  .root[data-full-width-xl='false'] {\n    display: inline-grid;\n    inline-size: auto;\n  }\n}\n\n/* Icon-only segments are square at every size (after the responsive sizes so it wins). */\n.root[data-icon-only] {\n  --_px: 0px;\n}\n\n.indicator {\n  position: absolute;\n  z-index: -1;\n  inset-block: var(--_pad);\n  inset-inline-start: var(--_pad);\n  inline-size: calc((100% - 2 * var(--_pad)) / var(--_count));\n  border: var(--border-width) solid var(--segmented-indicator-line, var(--color-line-strong));\n  border-radius: max(calc(var(--_r) - var(--_pad)), 2px);\n  background: var(--segmented-indicator, var(--color-surface-raised));\n  box-shadow: var(--segmented-indicator-shadow, var(--shadow-active));\n  translate: calc(var(--_index) * 100%) 0;\n  transition: translate var(--dur-3) var(--ease-spring);\n}\n[dir='rtl'] .indicator {\n  translate: calc(var(--_index) * -100%) 0;\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.45em;\n  min-inline-size: calc(var(--_h) - 2 * var(--_pad));\n  padding-inline: var(--_px);\n  padding-block: 0;\n  border: 0;\n  border-radius: max(calc(var(--_r) - var(--_pad)), 2px);\n  background: transparent;\n  color: var(--color-ink-muted);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition: color var(--dur-2) var(--ease-out);\n}\n\n@media (hover: hover) {\n  .item:hover:not(:disabled) {\n    color: var(--color-ink);\n  }\n}\n\n.item[data-state='on'] {\n  color: var(--color-ink);\n  cursor: default;\n}\n\n.item:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 1px;\n}\n\n.item:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n.icon {\n  display: inline-flex;\n  font-size: 1.2em;\n}\n.root[data-icon-only] .icon {\n  font-size: var(--_icon);\n}\n\n.label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.srOnly {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .indicator {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/actions/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl.js';
+export type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlOption, } from './SegmentedControl.js';

package/dist/components/actions/ToggleChip/ToggleChip.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { Toggle } from 'radix-ui';
+export type ToggleChipSize = 'sm' | 'md';
+export interface ToggleChipProps extends ComponentPropsWithoutRef<typeof Toggle.Root> {
+    size?: ToggleChipSize;
+    /** A leading glyph. Keep it meaningful — one icon per row at most. */
+    icon?: ReactNode;
+    /** How many items the filter matches. Rendered in tabular figures after the label. */
+    count?: number;
+}
+/**
+ * A pressable filter chip — an on/off switch that reads as a word ("Mine", "Overdue
+ * only"). Built on Radix Toggle, so it is a real `<button aria-pressed>`; use
+ * `pressed`/`onPressedChange` (controlled) or `defaultPressed`.
+ *
+ * Pressed chips take the accent's soft fill. Where the theme has a hard press shadow
+ * (Fiesta), resting chips stand proud and pressed chips sit flat — literally pushed in.
+ */
+export declare const ToggleChip: import("react").ForwardRefExoticComponent<ToggleChipProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/actions/ToggleChip/ToggleChip.js

@@ -0,0 +1,34 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./chip.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Toggle as a } from "radix-ui";
+//#region src/components/actions/ToggleChip/ToggleChip.tsx
+var o = n(function({ size: n = "md", icon: o, count: s, className: c, children: l, type: u, ...d }, f) {
+	return /* @__PURE__ */ i(a.Root, {
+		ref: f,
+		type: u ?? "button",
+		className: e(t.chip, c),
+		"data-size": n,
+		...d,
+		children: [
+			o ? /* @__PURE__ */ r("span", {
+				className: t.icon,
+				"aria-hidden": "true",
+				children: o
+			}) : null,
+			/* @__PURE__ */ r("span", {
+				className: t.label,
+				children: l
+			}),
+			s === void 0 ? null : /* @__PURE__ */ r("span", {
+				className: t.count,
+				children: s
+			})
+		]
+	});
+});
+//#endregion
+export { o as ToggleChip };
+
+//# sourceMappingURL=ToggleChip.js.map

package/dist/components/actions/ToggleChip/ToggleChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleChip.js","names":["styles","chip_module_default","ToggleChip","forwardRef","rest","Toggle","type","cx","className","size","icon","count"],"sources":["../../../../src/components/actions/ToggleChip/ToggleChip.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { Toggle } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport styles from './chip.module.css'\n\nexport type ToggleChipSize = 'sm' | 'md'\n\nexport interface ToggleChipProps extends ComponentPropsWithoutRef<typeof Toggle.Root> {\n  size?: ToggleChipSize\n  /** A leading glyph. Keep it meaningful — one icon per row at most. */\n  icon?: ReactNode\n  /** How many items the filter matches. Rendered in tabular figures after the label. */\n  count?: number\n}\n\n/**\n * A pressable filter chip — an on/off switch that reads as a word (\"Mine\", \"Overdue\n * only\"). Built on Radix Toggle, so it is a real `<button aria-pressed>`; use\n * `pressed`/`onPressedChange` (controlled) or `defaultPressed`.\n *\n * Pressed chips take the accent's soft fill. Where the theme has a hard press shadow\n * (Fiesta), resting chips stand proud and pressed chips sit flat — literally pushed in.\n */\nexport const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(function ToggleChip(\n  { size = 'md', icon, count, className, children, type, ...rest },\n  ref,\n) {\n  return (\n    <Toggle.Root\n      ref={ref}\n      type={type ?? 'button'}\n      className={cx(styles.chip, className)}\n      data-size={size}\n      {...rest}\n    >\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.label}>{children}</span>\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </Toggle.Root>\n  )\n})\n"],"mappings":";;;;;;AAuBA,IAAaE,IAAaC,EAA+C,SACvE,EAAE,UAAO,MAAM,SAAM,UAAO,cAAW,aAAU,SAAM,GAAGC,KAC1D,GACA;CACA,OACE,kBAACC,EAAO,MAAR;EACO;EACL,MAAMC,KAAQ;EACd,WAAWC,EAAGP,EAAO,MAAMQ,CAAS;EACpC,aAAWC;EACX,GAAIL;EALN,UAAA;GAOGM,IACC,kBAAC,QAAD;IAAM,WAAWV,EAAO;IAAM,eAAY;IACvC,UAAAU;GACG,CAAA,IACJ;GACJ,kBAAC,QAAD;IAAM,WAAWV,EAAO;IAAQ;GAAe,CAAA;GAC9CW,MAAU,KAAA,IAA4D,OAAhD,kBAAC,QAAD;IAAM,WAAWX,EAAO;IAAQ,UAAAW;GAAY,CAAA;EACxD;;AAEjB,CAAC"}

package/dist/components/actions/ToggleChip/chip.module.js

@@ -0,0 +1,10 @@
+//#region src/components/actions/ToggleChip/chip.module.css
+var e = "kiln-chip__chip", t = "kiln-chip__icon", n = "kiln-chip__count", r = {
+	chip: e,
+	icon: t,
+	count: n
+};
+//#endregion
+export { e as chip, n as count, r as default, t as icon };
+
+//# sourceMappingURL=chip.module.js.map

package/dist/components/actions/ToggleChip/chip.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.module.js","names":["chip","icon","count","chip_module_default"],"sources":["../../../../src/components/actions/ToggleChip/chip.module.css"],"sourcesContent":["/*\n * The chip look, shared by ToggleChip (Radix Toggle) and ChipGroup's items (Radix\n * ToggleGroup items) — both expose `data-state=\"on|off\"`, so one module styles both.\n * Internal: import it only from those two components.\n *\n * Component tokens:\n *   --chip-radius        default var(--radius-chip)\n *   --chip-shadow        resting shadow; default var(--shadow-active) (flat except Fiesta)\n *   --chip-pressed-bg    default var(--color-accent-soft)\n *   --chip-pressed-ink   default var(--color-accent-text)\n *   --chip-pressed-line  default var(--color-accent)\n */\n.chip {\n  --_h: var(--control-sm);\n  --_px: var(--space-3);\n  --_fs: var(--text-sm);\n  --_bg: transparent;\n  --_ink: var(--color-ink-muted);\n  --_line: var(--color-line-strong);\n  --_shadow: var(--chip-shadow, var(--shadow-active));\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4em;\n  min-block-size: var(--_h);\n  padding-inline: var(--_px);\n  padding-block: 0;\n  border: var(--border-width) solid var(--_line);\n  border-radius: var(--chip-radius, var(--radius-chip));\n  background: var(--_bg);\n  color: var(--_ink);\n  box-shadow: var(--_shadow);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-2) var(--ease-spring);\n}\n\n/* Grow the hit area to a comfortable touch target without changing the visual size. */\n.chip::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block: min(0px, calc((var(--_h) - var(--control-lg)) / 2));\n}\n\n.chip[data-size='sm'] {\n  --_h: calc(var(--control-sm) * 0.8125);\n  --_px: var(--space-2);\n  --_fs: var(--text-xs);\n}\n\n@media (hover: hover) {\n  .chip:hover:not(:disabled) {\n    --_ink: var(--color-ink);\n    --_line: var(--color-ink-subtle);\n  }\n}\n\n.chip[data-state='on'] {\n  --_bg: var(--chip-pressed-bg, var(--color-accent-soft));\n  --_ink: var(--chip-pressed-ink, var(--color-accent-text));\n  --_line: var(--chip-pressed-line, var(--color-accent));\n  --_shadow: none;\n\n  translate: var(--active-shift) var(--active-shift);\n}\n@media (hover: hover) {\n  .chip[data-state='on']:hover:not(:disabled) {\n    --_ink: var(--chip-pressed-ink, var(--color-accent-text));\n    --_line: var(--chip-pressed-line, var(--color-accent));\n  }\n}\n\n/* In an invalid ChipGroup the resting chips take the critical edge; pressed ones keep theirs. */\n.chip[data-invalid]:not([data-state='on']) {\n  --_line: var(--tone-critical);\n}\n\n.chip:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.chip:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.icon {\n  display: inline-flex;\n  font-size: 1.15em;\n  margin-inline-start: -0.15em;\n}\n\n.count {\n  display: inline-grid;\n  place-items: center;\n  min-inline-size: 1.6em;\n  padding-inline: 0.35em;\n  margin-inline-end: -0.35em;\n  block-size: 1.6em;\n  border-radius: var(--chip-radius, var(--radius-chip));\n  background: var(--color-surface-sunken);\n  color: var(--color-ink-muted);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: 0.85em;\n  font-weight: var(--label-weight);\n  letter-spacing: 0;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out);\n}\n.chip[data-state='on'] .count {\n  background: var(--chip-pressed-line, var(--color-accent));\n  color: var(--color-accent-ink);\n}\n"],"mappings":""}

package/dist/components/actions/ToggleChip/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleChip } from './ToggleChip.js';
+export type { ToggleChipProps, ToggleChipSize } from './ToggleChip.js';

package/dist/components/display/Avatar/Avatar.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes } from 'react';
+import type { AvatarColor, AvatarSize } from './avatarUtils.js';
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Image URL. While loading, or if it fails, the initials fallback shows. */
+    src?: string;
+    /** Accessible name. Defaults to `name`. Pass `""` when a visible label sits beside it. */
+    alt?: string;
+    /** Person or thing. Drives the initials and the fallback colour. */
+    name: string;
+    /** Default `md`, or the enclosing `AvatarGroup`'s size. */
+    size?: AvatarSize;
+    /** Override the name-derived fallback colour (e.g. a member's assigned colour). */
+    color?: AvatarColor;
+    /** A highlight ring — marks "you" in a leaderboard or roster. */
+    ring?: boolean;
+    /**
+     * Replace the derived initials — a company's short code ("NWS"), a logo's letters. Up to three
+     * characters; three are set smaller so they fit the frame.
+     */
+    initials?: string;
+}
+/**
+ * A person or entity. Image with an initials fallback on a deterministic categorical
+ * colour. Shape comes from `--radius-avatar` (rounded square in Monograph/Ledger, round in
+ * Fiesta).
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/display/Avatar/Avatar.js

@@ -0,0 +1,39 @@
+import { cx as e } from "../../../utils/cx.js";
+import { AvatarSizeContext as t } from "./AvatarContext.js";
+import { avatarColor as n, getInitials as r } from "./avatarUtils.js";
+import i from "./Avatar.module.js";
+import { forwardRef as a, useContext as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Avatar as l } from "radix-ui";
+//#region src/components/display/Avatar/Avatar.tsx
+var u = a(function({ src: a, alt: u, name: d, size: f, color: p, ring: m = !1, initials: h, className: g, ..._ }, v) {
+	let y = o(t), b = u ?? d, x = b === "", S = h?.trim() ? h.trim().toLocaleUpperCase() : r(d), C = Array.from(S).length;
+	return /* @__PURE__ */ c(l.Root, {
+		ref: v,
+		className: e(i.avatar, g),
+		"data-size": f ?? y ?? "md",
+		"data-color": p ?? n(d),
+		"data-ring": m || void 0,
+		..._,
+		children: [a ? /* @__PURE__ */ s(l.Image, {
+			className: i.image,
+			src: a,
+			alt: b
+		}) : null, /* @__PURE__ */ s(l.Fallback, {
+			className: i.fallback,
+			role: x ? void 0 : "img",
+			"aria-label": x ? void 0 : b,
+			"aria-hidden": x || void 0,
+			delayMs: a ? 300 : void 0,
+			"data-glyphs": C > 2 ? "many" : void 0,
+			children: /* @__PURE__ */ s("span", {
+				"aria-hidden": "true",
+				children: S
+			})
+		})]
+	});
+});
+//#endregion
+export { u as Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/display/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":["Avatar","AvatarPrimitive","styles","Avatar_module_default","Avatar$1","forwardRef","rest","groupSize","useContext","AvatarSizeContext","label","alt","name","decorative","text","initials","getInitials","glyphs","Avatar","cx","className","size","color","avatarColor","ring","src"],"sources":["../../../../src/components/display/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useContext, type HTMLAttributes } from 'react'\nimport { Avatar as AvatarPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { AvatarSizeContext } from './AvatarContext'\nimport { avatarColor, getInitials } from './avatarUtils'\nimport type { AvatarColor, AvatarSize } from './avatarUtils'\nimport styles from './Avatar.module.css'\n\nexport interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Image URL. While loading, or if it fails, the initials fallback shows. */\n  src?: string\n  /** Accessible name. Defaults to `name`. Pass `\"\"` when a visible label sits beside it. */\n  alt?: string\n  /** Person or thing. Drives the initials and the fallback colour. */\n  name: string\n  /** Default `md`, or the enclosing `AvatarGroup`'s size. */\n  size?: AvatarSize\n  /** Override the name-derived fallback colour (e.g. a member's assigned colour). */\n  color?: AvatarColor\n  /** A highlight ring — marks \"you\" in a leaderboard or roster. */\n  ring?: boolean\n  /**\n   * Replace the derived initials — a company's short code (\"NWS\"), a logo's letters. Up to three\n   * characters; three are set smaller so they fit the frame.\n   */\n  initials?: string\n}\n\n/**\n * A person or entity. Image with an initials fallback on a deterministic categorical\n * colour. Shape comes from `--radius-avatar` (rounded square in Monograph/Ledger, round in\n * Fiesta).\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { src, alt, name, size, color, ring = false, initials, className, ...rest },\n  ref,\n) {\n  const groupSize = useContext(AvatarSizeContext)\n  const label = alt ?? name\n  const decorative = label === ''\n  const text = initials?.trim() ? initials.trim().toLocaleUpperCase() : getInitials(name)\n  const glyphs = Array.from(text).length\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cx(styles.avatar, className)}\n      data-size={size ?? groupSize ?? 'md'}\n      data-color={color ?? avatarColor(name)}\n      data-ring={ring || undefined}\n      {...rest}\n    >\n      {src ? <AvatarPrimitive.Image className={styles.image} src={src} alt={label} /> : null}\n      <AvatarPrimitive.Fallback\n        className={styles.fallback}\n        role={decorative ? undefined : 'img'}\n        aria-label={decorative ? undefined : label}\n        aria-hidden={decorative || undefined}\n        delayMs={src ? 300 : undefined}\n        data-glyphs={glyphs > 2 ? 'many' : undefined}\n      >\n        <span aria-hidden=\"true\">{text}</span>\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n"],"mappings":";;;;;;;;AAiCA,IAAaA,IAASK,EAAyC,SAC7D,EAAE,QAAK,QAAK,SAAM,SAAM,UAAO,UAAO,IAAO,aAAU,cAAW,GAAGC,KACrE,GACA;CACA,IAAMC,IAAYC,EAAWC,CAAiB,GACxCC,IAAQC,KAAOC,GACfC,IAAaH,MAAU,IACvBI,IAAOC,GAAU,KAAK,IAAIA,EAAS,KAAK,CAAC,CAAC,kBAAkB,IAAIC,EAAYJ,CAAI,GAChFK,IAAS,MAAM,KAAKH,CAAI,CAAC,CAAC;CAChC,OACE,kBAACb,EAAgB,MAAjB;EACO;EACL,WAAWkB,EAAGjB,EAAO,QAAQkB,CAAS;EACtC,aAAWC,KAAQd,KAAa;EAChC,cAAYe,KAASC,EAAYX,CAAI;EACrC,aAAWY,KAAQ,KAAA;EACnB,GAAIlB;EANN,UAAA,CAQGmB,IAAM,kBAACxB,EAAgB,OAAjB;GAAuB,WAAWC,EAAO;GAAY;GAAK,KAAKQ;EAAQ,CAAA,IAAI,MAClF,kBAACT,EAAgB,UAAjB;GACE,WAAWC,EAAO;GAClB,MAAMW,IAAa,KAAA,IAAY;GAC/B,cAAYA,IAAa,KAAA,IAAYH;GACrC,eAAaG,KAAc,KAAA;GAC3B,SAASY,IAAM,MAAM,KAAA;GACrB,eAAaR,IAAS,IAAI,SAAS,KAAA;GAEnC,UAAA,kBAAC,QAAD;IAAM,eAAY;IAAQ,UAAAH;GAAW,CAAA;EACb,CAAA,CACN;;AAE1B,CAAC"}

package/dist/components/display/Avatar/Avatar.module.js

@@ -0,0 +1,10 @@
+//#region src/components/display/Avatar/Avatar.module.css
+var e = "kiln-Avatar__avatar", t = "kiln-Avatar__image", n = "kiln-Avatar__fallback", r = {
+	avatar: e,
+	image: t,
+	fallback: n
+};
+//#endregion
+export { e as avatar, r as default, n as fallback, t as image };
+
+//# sourceMappingURL=Avatar.module.js.map

package/dist/components/display/Avatar/Avatar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.js","names":["avatar","image","fallback","Avatar_module_default"],"sources":["../../../../src/components/display/Avatar/Avatar.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --avatar-radius       default var(--radius-avatar)\n *   --avatar-edge         default line-strong at 70% — inner keyline (ink in Fiesta)\n *   --avatar-ring-color   default var(--color-accent) — the \"you\" ring\n *   --avatar-cutout       default var(--color-canvas) — gap between ring/stack and avatar\n */\n.avatar {\n  --_size: var(--control-md);\n  --_bg: var(--color-cat-8);\n\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  border-radius: var(--avatar-radius, var(--radius-avatar));\n  background: var(--_bg);\n  color: var(--color-cat-ink);\n  vertical-align: middle;\n  user-select: none;\n}\n\n/* Inner keyline drawn over the image, so photos and fills share one edge. */\n.avatar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 var(--border-width)\n    var(--avatar-edge, color-mix(in oklch, var(--color-line-strong) 70%, transparent));\n  pointer-events: none;\n}\n\n.avatar[data-size='xs'] {\n  --_size: var(--space-5);\n}\n.avatar[data-size='sm'] {\n  --_size: var(--control-sm);\n}\n.avatar[data-size='md'] {\n  --_size: var(--control-md);\n}\n.avatar[data-size='lg'] {\n  --_size: var(--control-lg);\n}\n.avatar[data-size='xl'] {\n  --_size: var(--space-8);\n}\n\n.avatar[data-color='1'] {\n  --_bg: var(--color-cat-1);\n}\n.avatar[data-color='2'] {\n  --_bg: var(--color-cat-2);\n}\n.avatar[data-color='3'] {\n  --_bg: var(--color-cat-3);\n}\n.avatar[data-color='4'] {\n  --_bg: var(--color-cat-4);\n}\n.avatar[data-color='5'] {\n  --_bg: var(--color-cat-5);\n}\n.avatar[data-color='6'] {\n  --_bg: var(--color-cat-6);\n}\n.avatar[data-color='7'] {\n  --_bg: var(--color-cat-7);\n}\n.avatar[data-color='8'] {\n  --_bg: var(--color-cat-8);\n}\n\n/* \"You\": a cut-out gap, then the ring. */\n.avatar[data-ring] {\n  box-shadow:\n    0 0 0 2px var(--avatar-cutout, var(--color-canvas)),\n    0 0 0 calc(2px + var(--border-width-strong) + 1px) var(--avatar-ring-color, var(--color-accent));\n}\n\n.image {\n  grid-area: 1 / 1;\n  inline-size: 100%;\n  block-size: 100%;\n  border-radius: inherit;\n  object-fit: cover;\n}\n\n.fallback {\n  grid-area: 1 / 1;\n  display: grid;\n  place-items: center;\n  inline-size: 100%;\n  block-size: 100%;\n  border-radius: inherit;\n  font-family: var(--heading-font);\n  font-weight: var(--heading-weight);\n  text-transform: var(--heading-transform);\n  font-size: calc(var(--_size) * 0.38);\n  letter-spacing: 0;\n  line-height: 1;\n}\n.avatar[data-size='xs'] .fallback {\n  font-size: calc(var(--_size) * 0.46);\n}\n/* Three-letter codes (\"NWS\", \"ACM\") shrink so they clear the frame and the keyline. */\n.fallback[data-glyphs='many'] {\n  font-size: calc(var(--_size) * 0.3);\n  letter-spacing: -0.02em;\n}\n.avatar[data-size='xs'] .fallback[data-glyphs='many'] {\n  font-size: calc(var(--_size) * 0.34);\n}\n"],"mappings":""}

package/dist/components/display/Avatar/AvatarContext.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarSize } from './avatarUtils.js';
+/** Lets `AvatarGroup` size its children without repeating the prop. */
+export declare const AvatarSizeContext: import("react").Context<AvatarSize | undefined>;

package/dist/components/display/Avatar/AvatarContext.js

@@ -0,0 +1,7 @@
+import { createContext as e } from "react";
+//#region src/components/display/Avatar/AvatarContext.ts
+var t = e(void 0);
+//#endregion
+export { t as AvatarSizeContext };
+
+//# sourceMappingURL=AvatarContext.js.map

package/dist/components/display/Avatar/AvatarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarContext.js","names":["AvatarSizeContext","createContext"],"sources":["../../../../src/components/display/Avatar/AvatarContext.ts"],"sourcesContent":["import { createContext } from 'react'\nimport type { AvatarSize } from './avatarUtils'\n\n/** Lets `AvatarGroup` size its children without repeating the prop. */\nexport const AvatarSizeContext = createContext<AvatarSize | undefined>(undefined)\n"],"mappings":";;AAIA,IAAaA,IAAoBC,EAAsC,KAAA,CAAS"}

package/dist/components/display/Avatar/avatarUtils.d.ts

@@ -0,0 +1,10 @@
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Categorical colour slot → `--color-cat-N`. */
+export type AvatarColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+/** Up to two initials: first + last word ("Ada Okafor" → "AO"), or one for a single name. */
+export declare function getInitials(name: string): string;
+/**
+ * Deterministic categorical colour for a name (FNV-1a + finaliser, case- and space-insensitive),
+ * so the same person gets the same colour on every screen and every render.
+ */
+export declare function avatarColor(name: string): AvatarColor;

package/dist/components/display/Avatar/avatarUtils.js

@@ -0,0 +1,14 @@
+//#region src/components/display/Avatar/avatarUtils.ts
+function e(e) {
+	let t = e.trim().split(/[\s-]+/u).filter(Boolean);
+	return t.length === 0 ? "" : ((Array.from(t[0] ?? "")[0] ?? "") + (t.length > 1 ? Array.from(t[t.length - 1] ?? "")[0] ?? "" : "")).toLocaleUpperCase();
+}
+function t(e) {
+	let t = e.trim().toLocaleLowerCase(), n = 2166136261;
+	for (let e = 0; e < t.length; e++) n ^= t.charCodeAt(e), n = Math.imul(n, 16777619);
+	return n ^= n >>> 16, n = Math.imul(n, 2246822507), n ^= n >>> 13, (n >>> 0) % 8 + 1;
+}
+//#endregion
+export { t as avatarColor, e as getInitials };
+
+//# sourceMappingURL=avatarUtils.js.map

package/dist/components/display/Avatar/avatarUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarUtils.js","names":["getInitials","words","name","avatarColor","key","hash","i"],"sources":["../../../../src/components/display/Avatar/avatarUtils.ts"],"sourcesContent":["export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n/** Categorical colour slot → `--color-cat-N`. */\nexport type AvatarColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8\n\n/** Up to two initials: first + last word (\"Ada Okafor\" → \"AO\"), or one for a single name. */\nexport function getInitials(name: string): string {\n  const words = name\n    .trim()\n    .split(/[\\s-]+/u)\n    .filter(Boolean)\n  if (words.length === 0) return ''\n  const first = Array.from(words[0] ?? '')[0] ?? ''\n  const last = words.length > 1 ? (Array.from(words[words.length - 1] ?? '')[0] ?? '') : ''\n  return (first + last).toLocaleUpperCase()\n}\n\n/**\n * Deterministic categorical colour for a name (FNV-1a + finaliser, case- and space-insensitive),\n * so the same person gets the same colour on every screen and every render.\n */\nexport function avatarColor(name: string): AvatarColor {\n  const key = name.trim().toLocaleLowerCase()\n  let hash = 0x811c9dc5\n  for (let i = 0; i < key.length; i++) {\n    hash ^= key.charCodeAt(i)\n    hash = Math.imul(hash, 0x01000193)\n  }\n  // FNV's low bits barely mix, and `% 8` reads only those: 8 names landed on 3 colours.\n  // A murmur3-style finaliser spreads the high bits down first.\n  hash ^= hash >>> 16\n  hash = Math.imul(hash, 0x85ebca6b)\n  hash ^= hash >>> 13\n  return (((hash >>> 0) % 8) + 1) as AvatarColor\n}\n"],"mappings":";AAKA,SAAgBA,EAAY,GAAsB;CAChD,IAAMC,IAAQC,EACX,KAAK,CAAC,CACN,MAAM,SAAS,CAAC,CAChB,OAAO,OAAO;CAIjB,OAHID,EAAM,WAAW,IAAU,OACjB,MAAM,KAAKA,EAAM,MAAM,EAAE,CAAC,CAAC,MAAM,OAClCA,EAAM,SAAS,IAAK,MAAM,KAAKA,EAAMA,EAAM,SAAS,MAAM,EAAE,CAAC,CAAC,MAAM,KAAM,IAAA,CACjE,kBAAkB;AAC1C;AAMA,SAAgBE,EAAY,GAA2B;CACrD,IAAMC,IAAMF,EAAK,KAAK,CAAC,CAAC,kBAAkB,GACtCG,IAAO;CACX,KAAK,IAAIC,IAAI,GAAGA,IAAIF,EAAI,QAAQ,KAE9B,AADA,KAAQA,EAAI,WAAWE,CAAC,GACxB,IAAO,KAAK,KAAKD,GAAM,QAAU;CAOnC,OAHA,KAAQA,MAAS,IACjB,IAAO,KAAK,KAAKA,GAAM,UAAU,GACjC,KAAQA,MAAS,KACPA,MAAS,KAAK,IAAK;AAC/B"}

package/dist/components/display/Avatar/index.d.ts

@@ -0,0 +1,5 @@
+export { Avatar } from './Avatar.js';
+export type { AvatarProps } from './Avatar.js';
+export { AvatarSizeContext } from './AvatarContext.js';
+export { getInitials, avatarColor } from './avatarUtils.js';
+export type { AvatarSize, AvatarColor } from './avatarUtils.js';

package/dist/components/display/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from 'react';
+import { type AvatarSize } from '../Avatar/index.js';
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Show at most this many avatars; the rest collapse into a "+N" count. */
+    max?: number;
+    /** Size for every avatar in the stack. Default `sm`. */
+    size?: AvatarSize;
+    /** Accessible name for the group, e.g. "Reacted: Noor, Kofi and 3 others". */
+    'aria-label'?: string;
+}
+/**
+ * An overlapping stack of `Avatar`s — who reacted, who owns a project, who's in a group.
+ *
+ * <AvatarGroup max={4} aria-label="Members"><Avatar name="Noor" />…</AvatarGroup>
+ */
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/display/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,33 @@
+import { cx as e } from "../../../utils/cx.js";
+import { AvatarSizeContext as t } from "../Avatar/AvatarContext.js";
+import n from "./AvatarGroup.module.js";
+import { Children as r, forwardRef as i, isValidElement as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/display/AvatarGroup/AvatarGroup.tsx
+var c = i(function({ max: i, size: c = "sm", className: l, children: u, ...d }, f) {
+	let p = r.toArray(u).filter(a), m = i !== void 0 && i >= 0 && p.length > i ? i : p.length, h = p.length - m;
+	return /* @__PURE__ */ o(t.Provider, {
+		value: c,
+		children: /* @__PURE__ */ s("div", {
+			ref: f,
+			role: "group",
+			className: e(n.group, l),
+			"data-size": c,
+			...d,
+			children: [p.slice(0, m), h > 0 ? /* @__PURE__ */ o("span", {
+				className: n.more,
+				"data-size": c,
+				role: "img",
+				"aria-label": `${String(h)} more`,
+				children: /* @__PURE__ */ s("span", {
+					"aria-hidden": "true",
+					children: ["+", h]
+				})
+			}) : null]
+		})
+	});
+});
+//#endregion
+export { c as AvatarGroup };
+
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/components/display/AvatarGroup/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","names":["styles","AvatarGroup_module_default","AvatarGroup","forwardRef","rest","items","Children","children","isValidElement","limit","max","overflow","AvatarSizeContext","size","cx","className"],"sources":["../../../../src/components/display/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, forwardRef, isValidElement, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { AvatarSizeContext, type AvatarSize } from '#components/display/Avatar'\nimport styles from './AvatarGroup.module.css'\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Show at most this many avatars; the rest collapse into a \"+N\" count. */\n  max?: number\n  /** Size for every avatar in the stack. Default `sm`. */\n  size?: AvatarSize\n  /** Accessible name for the group, e.g. \"Reacted: Noor, Kofi and 3 others\". */\n  'aria-label'?: string\n}\n\n/**\n * An overlapping stack of `Avatar`s — who reacted, who owns a project, who's in a group.\n *\n * <AvatarGroup max={4} aria-label=\"Members\"><Avatar name=\"Noor\" />…</AvatarGroup>\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function AvatarGroup(\n  { max, size = 'sm', className, children, ...rest },\n  ref,\n) {\n  const items = Children.toArray(children).filter(isValidElement)\n  const limit = max !== undefined && max >= 0 && items.length > max ? max : items.length\n  const overflow = items.length - limit\n  return (\n    <AvatarSizeContext.Provider value={size}>\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cx(styles.group, className)}\n        data-size={size}\n        {...rest}\n      >\n        {items.slice(0, limit)}\n        {overflow > 0 ? (\n          <span\n            className={styles.more}\n            data-size={size}\n            role=\"img\"\n            aria-label={`${String(overflow)} more`}\n          >\n            <span aria-hidden=\"true\">+{overflow}</span>\n          </span>\n        ) : null}\n      </div>\n    </AvatarSizeContext.Provider>\n  )\n})\n"],"mappings":";;;;;;AAmBA,IAAaE,IAAcC,EAA6C,SACtE,EAAE,QAAK,UAAO,MAAM,cAAW,aAAU,GAAGC,KAC5C,GACA;CACA,IAAMC,IAAQC,EAAS,QAAQC,CAAQ,CAAC,CAAC,OAAOC,CAAc,GACxDC,IAAQC,MAAQ,KAAA,KAAaA,KAAO,KAAKL,EAAM,SAASK,IAAMA,IAAML,EAAM,QAC1EM,IAAWN,EAAM,SAASI;CAChC,OACE,kBAACG,EAAkB,UAAnB;EAA4B,OAAOC;EACjC,UAAA,kBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAWC,EAAGd,EAAO,OAAOe,CAAS;GACrC,aAAWF;GACX,GAAIT;GALN,UAAA,CAOGC,EAAM,MAAM,GAAGI,CAAK,GACpBE,IAAW,IACV,kBAAC,QAAD;IACE,WAAWX,EAAO;IAClB,aAAWa;IACX,MAAK;IACL,cAAY,GAAG,OAAOF,CAAQ,EAAE;IAEhC,UAAA,kBAAC,QAAD;KAAM,eAAY;KAAlB,UAAA,CAAyB,KAAEA,CAAe;;GACtC,CAAA,IACJ,IACD;;CACqB,CAAA;AAEhC,CAAC"}

package/dist/components/display/AvatarGroup/AvatarGroup.module.js

@@ -0,0 +1,9 @@
+//#region src/components/display/AvatarGroup/AvatarGroup.module.css
+var e = "kiln-AvatarGroup__group", t = "kiln-AvatarGroup__more", n = {
+	group: e,
+	more: t
+};
+//#endregion
+export { n as default, e as group, t as more };
+
+//# sourceMappingURL=AvatarGroup.module.js.map

package/dist/components/display/AvatarGroup/AvatarGroup.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.module.js","names":["group","more","AvatarGroup_module_default"],"sources":["../../../../src/components/display/AvatarGroup/AvatarGroup.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --avatar-cutout   default var(--color-canvas) — the gap drawn around each stacked avatar\n *   --avatar-overlap  default 0.14 (0.05 at xs/sm) — fraction of an avatar hidden under\n *                     its neighbour. Each avatar also loses the 2px cutout ring drawn by the\n *                     next one, so small stacks overlap less or their initials get clipped.\n *\n * Sizes mirror Avatar's so the \"+N\" chip matches the stack.\n */\n.group {\n  --_size: var(--control-sm);\n  --_overlap: var(--avatar-overlap, 0.14);\n\n  display: inline-flex;\n  align-items: center;\n  isolation: isolate;\n  vertical-align: middle;\n}\n.group[data-size='xs'] {\n  --_size: var(--space-5);\n  --_overlap: var(--avatar-overlap, 0.05);\n}\n.group[data-size='sm'] {\n  --_size: var(--control-sm);\n  --_overlap: var(--avatar-overlap, 0.05);\n}\n.group[data-size='md'] {\n  --_size: var(--control-md);\n}\n.group[data-size='lg'] {\n  --_size: var(--control-lg);\n}\n.group[data-size='xl'] {\n  --_size: var(--space-8);\n}\n\n.group > * {\n  box-shadow: 0 0 0 2px var(--avatar-cutout, var(--color-canvas));\n}\n.group > * + * {\n  margin-inline-start: calc(var(--_size) * var(--_overlap) * -1);\n}\n\n.more {\n  --_size: var(--control-sm);\n\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  border-radius: var(--avatar-radius, var(--radius-avatar));\n  background: var(--color-surface-sunken);\n  color: var(--color-ink-muted);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-weight: var(--label-weight);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: calc(var(--_size) * 0.36);\n  line-height: 1;\n  outline: var(--border-width) solid var(--color-line);\n  outline-offset: calc(var(--border-width) * -1);\n}\n.more[data-size='xs'] {\n  --_size: var(--space-5);\n}\n.more[data-size='md'] {\n  --_size: var(--control-md);\n}\n.more[data-size='lg'] {\n  --_size: var(--control-lg);\n}\n.more[data-size='xl'] {\n  --_size: var(--space-8);\n}\n"],"mappings":""}

package/dist/components/display/AvatarGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { AvatarGroup } from './AvatarGroup.js';
+export type { AvatarGroupProps } from './AvatarGroup.js';

package/dist/components/display/Badge/Badge.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes } from 'react';
+import type { Tone } from '../../../utils/tokens.js';
+export type BadgeVariant = 'soft' | 'solid' | 'outline';
+export type BadgeSize = 'sm' | 'md';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Status colour. `neutral` for plain counts and labels. Default `neutral`. */
+    tone?: Tone;
+    /** `soft` (default) for most status; `solid` for the one that must be seen; `outline` for quiet. */
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Leading status dot in the tone colour. Decorative — the label carries the meaning. */
+    dot?: boolean;
+}
+/**
+ * A short status or count: "Live", "Over quota", "3 new", "Overdue".
+ * Metadata and categories are Tags; a Badge says what *state* something is in.
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/display/Badge/Badge.js

@@ -0,0 +1,23 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./Badge.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/display/Badge/Badge.tsx
+var a = n(function({ tone: n = "neutral", variant: a = "soft", size: o = "sm", dot: s = !1, className: c, children: l, ...u }, d) {
+	return /* @__PURE__ */ i("span", {
+		ref: d,
+		className: e(t.badge, c),
+		"data-tone": n,
+		"data-variant": a,
+		"data-size": o,
+		...u,
+		children: [s ? /* @__PURE__ */ r("span", {
+			className: t.dot,
+			"aria-hidden": "true"
+		}) : null, l]
+	});
+});
+//#endregion
+export { a as Badge };
+
+//# sourceMappingURL=Badge.js.map

package/dist/components/display/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["styles","Badge_module_default","Badge","forwardRef","rest","cx","className","tone","variant","size","dot","children"],"sources":["../../../../src/components/display/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Tone } from '#utils/tokens'\nimport styles from './Badge.module.css'\n\nexport type BadgeVariant = 'soft' | 'solid' | 'outline'\nexport type BadgeSize = 'sm' | 'md'\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Status colour. `neutral` for plain counts and labels. Default `neutral`. */\n  tone?: Tone\n  /** `soft` (default) for most status; `solid` for the one that must be seen; `outline` for quiet. */\n  variant?: BadgeVariant\n  size?: BadgeSize\n  /** Leading status dot in the tone colour. Decorative — the label carries the meaning. */\n  dot?: boolean\n}\n\n/**\n * A short status or count: \"Live\", \"Over quota\", \"3 new\", \"Overdue\".\n * Metadata and categories are Tags; a Badge says what *state* something is in.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { tone = 'neutral', variant = 'soft', size = 'sm', dot = false, className, children, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.badge, className)}\n      data-tone={tone}\n      data-variant={variant}\n      data-size={size}\n      {...rest}\n    >\n      {dot ? <span className={styles.dot} aria-hidden=\"true\" /> : null}\n      {children}\n    </span>\n  )\n})\n"],"mappings":";;;;;AAsBA,IAAaE,IAAQC,EAAwC,SAC3D,EAAE,UAAO,WAAW,aAAU,QAAQ,UAAO,MAAM,SAAM,IAAO,cAAW,aAAU,GAAGC,KACxF,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,OAAOM,CAAS;EACrC,aAAWC;EACX,gBAAcC;EACd,aAAWC;EACX,GAAIL;EANN,UAAA,CAQGM,IAAM,kBAAC,QAAD;GAAM,WAAWV,EAAO;GAAK,eAAY;EAAQ,CAAA,IAAI,MAC3DW,CACG;;AAEV,CAAC"}

package/dist/components/display/Badge/Badge.module.js

@@ -0,0 +1,9 @@
+//#region src/components/display/Badge/Badge.module.css
+var e = "kiln-Badge__badge", t = "kiln-Badge__dot", n = {
+	badge: e,
+	dot: t
+};
+//#endregion
+export { e as badge, n as default, t as dot };
+
+//# sourceMappingURL=Badge.module.js.map

package/dist/components/display/Badge/Badge.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.module.js","names":["badge","dot","Badge_module_default"],"sources":["../../../../src/components/display/Badge/Badge.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --badge-radius   default var(--radius-chip)\n *   --badge-weight   default var(--label-weight)\n */\n.badge {\n  --_c: var(--color-surface-inverse);\n  --_c-ink: var(--color-ink-inverse);\n  --_c-text: var(--color-ink-muted);\n  --_c-soft: var(--color-surface-sunken);\n  --_bg: var(--_c-soft);\n  --_ink: var(--_c-text);\n  --_border: transparent;\n  --_h: calc(var(--space-5) * 0.9);\n  --_px: var(--space-2);\n  --_fs: var(--text-xs);\n\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: 0.4em;\n  min-block-size: var(--_h);\n  padding-inline: var(--_px);\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--badge-radius, var(--radius-chip));\n  background: var(--_bg);\n  color: var(--_ink);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  font-weight: var(--badge-weight, var(--label-weight));\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  font-variant-numeric: tabular-nums lining-nums;\n  line-height: 1;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.badge[data-size='md'] {\n  --_h: calc(var(--space-5) * 1.1);\n  --_px: calc(var(--space-2) * 1.25);\n  --_fs: var(--text-sm);\n}\n\n.badge[data-tone='accent'] {\n  --_c: var(--color-accent);\n  --_c-ink: var(--color-accent-ink);\n  --_c-text: var(--color-accent-text);\n  --_c-soft: var(--color-accent-soft);\n}\n.badge[data-tone='positive'] {\n  --_c: var(--tone-positive);\n  --_c-ink: var(--tone-positive-ink);\n  --_c-text: var(--tone-positive-text);\n  --_c-soft: var(--tone-positive-soft);\n}\n.badge[data-tone='caution'] {\n  --_c: var(--tone-caution);\n  --_c-ink: var(--tone-caution-ink);\n  --_c-text: var(--tone-caution-text);\n  --_c-soft: var(--tone-caution-soft);\n}\n.badge[data-tone='critical'] {\n  --_c: var(--tone-critical);\n  --_c-ink: var(--tone-critical-ink);\n  --_c-text: var(--tone-critical-text);\n  --_c-soft: var(--tone-critical-soft);\n}\n.badge[data-tone='info'] {\n  --_c: var(--tone-info);\n  --_c-ink: var(--tone-info-ink);\n  --_c-text: var(--tone-info-text);\n  --_c-soft: var(--tone-info-soft);\n}\n\n.badge[data-variant='solid'] {\n  --_bg: var(--_c);\n  --_ink: var(--_c-ink);\n  --_border: var(--badge-solid-border, var(--_c));\n}\n.badge[data-variant='outline'] {\n  --_bg: transparent;\n  --_ink: var(--_c-text);\n  --_border: currentColor;\n}\n.badge[data-tone='neutral'][data-variant='outline'] {\n  --_border: var(--color-line-strong);\n}\n\n.dot {\n  --_dot: 0.5em;\n\n  flex: none;\n  inline-size: var(--_dot);\n  block-size: var(--_dot);\n  border-radius: 50%;\n  background: var(--_c);\n}\n.badge[data-tone='neutral'] .dot {\n  background: var(--color-ink-subtle);\n}\n.badge[data-variant='solid'] .dot {\n  background: currentColor;\n}\n"],"mappings":""}

package/dist/components/display/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge.js';

package/dist/components/display/Card/Card.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import { type Space } from '../../../utils/tokens.js';
+export type CardVariant = 'plain' | 'outline' | 'raised';
+export type CardTitleLevel = 2 | 3 | 4 | 5 | 6;
+export type CardMediaRatio = '1/1' | '4/3' | '3/2' | '16/9' | '21/9';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Edge treatment. `outline` (default) is a hairline; `plain` is a fill with no edge;
+     * `raised` stands on `--shadow-surface` (nothing extra in Monograph/Ledger, the print
+     * offset in Fiesta).
+     */
+    variant?: CardVariant;
+    /** Inner padding as a space step. Responsive. Default `5`. */
+    padding?: Responsive<Space>;
+    /** Hover/press affordance for cards that *are* the action. Implied by `asChild`. */
+    interactive?: boolean;
+    /**
+     * Render the single child element as the card — usually a link, so the whole card is
+     * one target: `<Card asChild><a href="/projects/atlas">…</a></Card>`. Don't nest other
+     * links or buttons inside a linked card.
+     */
+    asChild?: boolean;
+}
+export interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {
+    /** Crop the media to a fixed ratio (the child img/video is fitted with `cover`). */
+    ratio?: CardMediaRatio;
+    /**
+     * Sit inside the padding instead of bleeding to the edges. The corner radius is then
+     * the nested radius (outer − padding).
+     */
+    inset?: boolean;
+}
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** Heading element, to fit the page outline. Visual size doesn't change. Default `3`. */
+    level?: CardTitleLevel;
+}
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Media: import("react").ForwardRefExoticComponent<CardMediaProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<CardTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Meta: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/display/Card/Card.js

@@ -0,0 +1,78 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t, responsiveVars as n } from "../../../utils/responsive.js";
+import { space as r } from "../../../utils/tokens.js";
+import { headingTag as i } from "../../../utils/heading.js";
+import a from "./Card.module.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { Slot as c } from "radix-ui";
+//#region src/components/display/Card/Card.tsx
+var l = o(function({ variant: i = "outline", padding: o, interactive: l = !1, asChild: u = !1, className: d, style: f, ...p }, m) {
+	let h = u ? c.Root : "div";
+	return /* @__PURE__ */ s(h, {
+		ref: m,
+		className: e(a.card, d),
+		"data-kiln-component": "",
+		"data-variant": i,
+		"data-interactive": l || u || void 0,
+		style: t(n("card-padding", o, r), f),
+		...p
+	});
+}), u = o(function({ ratio: t, inset: n = !1, className: r, ...i }, o) {
+	return /* @__PURE__ */ s("div", {
+		ref: o,
+		className: e(a.media, r),
+		"data-ratio": t,
+		"data-inset": n || void 0,
+		...i
+	});
+}), d = o(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ s("div", {
+		ref: r,
+		className: e(a.header, t),
+		...n
+	});
+}), f = o(function({ level: t = 3, className: n, ...r }, o) {
+	let c = i(t);
+	return /* @__PURE__ */ s(c, {
+		ref: o,
+		className: e(a.title, n),
+		...r
+	});
+}), p = o(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ s("p", {
+		ref: r,
+		className: e(a.description, t),
+		...n
+	});
+}), m = o(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ s("div", {
+		ref: r,
+		className: e(a.body, t),
+		...n
+	});
+}), h = o(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ s("div", {
+		ref: r,
+		className: e(a.footer, t),
+		...n
+	});
+}), g = o(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ s("div", {
+		ref: r,
+		className: e(a.meta, t),
+		...n
+	});
+}), _ = Object.assign(l, {
+	Media: u,
+	Header: d,
+	Title: f,
+	Description: p,
+	Body: m,
+	Footer: h,
+	Meta: g
+});
+//#endregion
+export { _ as Card };
+
+//# sourceMappingURL=Card.js.map