@persona/design-system 0.1.5-pre.4

package/dist/Action-B10lxofb.d.mts

@@ -0,0 +1,35 @@
+import { n as Tooltip } from "./Tooltip-C0PS5InA.mjs";
+import { t as RequireOneOf } from "./utilities-w1K54IAy.mjs";
+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-B10lxofb.d.mts.map

package/dist/Action-uduFOh2m.d.cts

@@ -0,0 +1,35 @@
+import { n as Tooltip } from "./Tooltip-CE1oH6Iz.cjs";
+import { t as RequireOneOf } from "./utilities-C8Jf-xpi.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-uduFOh2m.d.cts.map

package/dist/Action.d.cts

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

package/dist/Action.d.mts

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

package/dist/Attribute.d.cts

@@ -0,0 +1,107 @@
+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

package/dist/Attribute.d.mts

@@ -0,0 +1,107 @@
+import { n as IconButtonProps } from "./IconButton-DsXbc3nQ.mjs";
+import { i as ParagraphSize } from "./text-BrSUs-88.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-CnXedFut.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, ComponentType, FC, PropsWithChildren, ReactNode } from "react";
+
+//#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.mts.map

package/dist/AttributeGrid.d.cts

@@ -0,0 +1,40 @@
+import { AttributeSize, TableLayoutValue } from "./Attribute.cjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Attribute/AttributeGrid.d.ts
+type AttributeGridProps = {
+  children?: ReactNode;
+  /**
+   * Sets the font size and spacing density for all child Attributes.
+   * Defaults to `'md'`.
+   */
+  size?: AttributeSize;
+} & ({
+  /**
+   * Set a fixed number of columns for the grid.
+   */
+  colCount?: number;
+  /**
+   * Display attributes in a stacked list with label first then value.
+   */
+  horizontal?: boolean;
+  table?: never;
+} | {
+  /**
+   * Display attributes in a fixed tabular layout.
+   * Set to `full-width` to expand to full width of container.
+   */
+  table?: TableLayoutValue;
+  colCount?: never;
+  horizontal?: never;
+});
+declare const AttributeGrid: ({
+  children,
+  horizontal,
+  table,
+  size,
+  ...props
+}: AttributeGridProps) => _$react_jsx_runtime0.JSX.Element;
+export = AttributeGrid;
+//# sourceMappingURL=AttributeGrid.d.cts.map

package/dist/AttributeGrid.d.mts

@@ -0,0 +1,41 @@
+import { AttributeSize, TableLayoutValue } from "./Attribute.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region components/Attribute/AttributeGrid.d.ts
+type AttributeGridProps = {
+  children?: ReactNode;
+  /**
+   * Sets the font size and spacing density for all child Attributes.
+   * Defaults to `'md'`.
+   */
+  size?: AttributeSize;
+} & ({
+  /**
+   * Set a fixed number of columns for the grid.
+   */
+  colCount?: number;
+  /**
+   * Display attributes in a stacked list with label first then value.
+   */
+  horizontal?: boolean;
+  table?: never;
+} | {
+  /**
+   * Display attributes in a fixed tabular layout.
+   * Set to `full-width` to expand to full width of container.
+   */
+  table?: TableLayoutValue;
+  colCount?: never;
+  horizontal?: never;
+});
+declare const AttributeGrid: ({
+  children,
+  horizontal,
+  table,
+  size,
+  ...props
+}: AttributeGridProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AttributeGrid as default };
+//# sourceMappingURL=AttributeGrid.d.mts.map

package/dist/Badge-BqLnhb4n.mjs

@@ -0,0 +1,34 @@
+import { n as Sticker } from "./Sticker-D6bwBTGr.mjs";
+import styled, { css } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region components/Badge/Badge.tsx
+const Badge = styled(({ variant, ...rest }) => {
+	let variantProp;
+	switch (variant) {
+		case "alert":
+			variantProp = "danger";
+			break;
+		case "active":
+			variantProp = "purple";
+			break;
+		default: variantProp = "grey";
+	}
+	return /* @__PURE__ */ jsx(Sticker, {
+		...rest,
+		variant: variantProp
+	});
+})(() => css`
+    min-width: 16px;
+    text-align: center;
+    border-radius: 100px;
+    span {
+      font-size: 10px;
+
+      /* Need to reset the visual alignment for numbers on badges here */
+      transform: none;
+    }
+  `);
+//#endregion
+export { Badge as t };
+
+//# sourceMappingURL=Badge-BqLnhb4n.mjs.map

package/dist/Badge-BqLnhb4n.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-BqLnhb4n.mjs","names":[],"sources":["../components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from 'design-system/components/Sticker';\n\nexport interface BadgeProps {\n  /**\n   * When rendered on a secondary background (e.g. inside a panel or card with\n   * a grey fill), set this to true so the component adjusts its colours\n   * appropriately for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n  /**\n   * Semantic colour variant for the badge.\n   *\n   * - `basic` – neutral grey, for informational counts or labels (default).\n   * - `active` – purple, to highlight an active or selected state.\n   * - `alert` – red/danger, to draw attention to errors or urgent counts.\n   *\n   * @defaultValue 'basic'\n   */\n  variant?: 'alert' | 'active' | 'basic';\n}\n\nexport const Badge = styled(({ variant, ...rest }: BadgeProps) => {\n  let variantProp: StickerProps['variant'];\n  switch (variant) {\n    case 'alert':\n      variantProp = 'danger';\n      break;\n    case 'active':\n      variantProp = 'purple';\n      break;\n    case 'basic':\n    default:\n      variantProp = 'grey';\n  }\n\n  return <Sticker {...rest} variant={variantProp} />;\n})<BadgeProps>(\n  () => css`\n    min-width: 16px;\n    text-align: center;\n    border-radius: 100px;\n    span {\n      font-size: 10px;\n\n      /* Need to reset the visual alignment for numbers on badges here */\n      transform: none;\n    }\n  `,\n) as StyledComponent<'span', DefaultTheme, BadgeProps, never>;\n/**\n * The type workaround above makes the correct types available for Badge.\n * Having duplicate prop names between Badge and Sticker seems to cause some oddities.\n *\n * We insist on making this a styled component so the component itself can be targeted in styles.\n * See: https://styled-components.com/docs/advanced#referring-to-other-components\n */\n\nexport default Badge;\n"],"mappings":";;;;AAuBA,MAAa,QAAQ,QAAQ,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,oBAAC,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,GAAG;;;;;;;;;;IAWV"}

package/dist/Badge-BwAZD9BH.cjs

@@ -0,0 +1,41 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_Sticker = require("./Sticker-D_dutvp_.cjs");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region components/Badge/Badge.tsx
+const Badge = (0, styled_components.default)(({ variant, ...rest }) => {
+	let variantProp;
+	switch (variant) {
+		case "alert":
+			variantProp = "danger";
+			break;
+		case "active":
+			variantProp = "purple";
+			break;
+		default: variantProp = "grey";
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
+		...rest,
+		variant: variantProp
+	});
+})(() => styled_components.css`
+    min-width: 16px;
+    text-align: center;
+    border-radius: 100px;
+    span {
+      font-size: 10px;
+
+      /* Need to reset the visual alignment for numbers on badges here */
+      transform: none;
+    }
+  `);
+//#endregion
+Object.defineProperty(exports, "Badge", {
+	enumerable: true,
+	get: function() {
+		return Badge;
+	}
+});
+
+//# sourceMappingURL=Badge-BwAZD9BH.cjs.map

package/dist/Badge-BwAZD9BH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-BwAZD9BH.cjs","names":["Sticker"],"sources":["../components/Badge/Badge.tsx"],"sourcesContent":["import styled, { css, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport Sticker, { type StickerProps } from 'design-system/components/Sticker';\n\nexport interface BadgeProps {\n  /**\n   * When rendered on a secondary background (e.g. inside a panel or card with\n   * a grey fill), set this to true so the component adjusts its colours\n   * appropriately for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n  /**\n   * Semantic colour variant for the badge.\n   *\n   * - `basic` – neutral grey, for informational counts or labels (default).\n   * - `active` – purple, to highlight an active or selected state.\n   * - `alert` – red/danger, to draw attention to errors or urgent counts.\n   *\n   * @defaultValue 'basic'\n   */\n  variant?: 'alert' | 'active' | 'basic';\n}\n\nexport const Badge = styled(({ variant, ...rest }: BadgeProps) => {\n  let variantProp: StickerProps['variant'];\n  switch (variant) {\n    case 'alert':\n      variantProp = 'danger';\n      break;\n    case 'active':\n      variantProp = 'purple';\n      break;\n    case 'basic':\n    default:\n      variantProp = 'grey';\n  }\n\n  return <Sticker {...rest} variant={variantProp} />;\n})<BadgeProps>(\n  () => css`\n    min-width: 16px;\n    text-align: center;\n    border-radius: 100px;\n    span {\n      font-size: 10px;\n\n      /* Need to reset the visual alignment for numbers on badges here */\n      transform: none;\n    }\n  `,\n) as StyledComponent<'span', DefaultTheme, BadgeProps, never>;\n/**\n * The type workaround above makes the correct types available for Badge.\n * Having duplicate prop names between Badge and Sticker seems to cause some oddities.\n *\n * We insist on making this a styled component so the component itself can be targeted in styles.\n * See: https://styled-components.com/docs/advanced#referring-to-other-components\n */\n\nexport default Badge;\n"],"mappings":";;;;;;AAuBA,MAAa,SAAA,GAAA,kBAAA,UAAgB,EAAE,SAAS,GAAG,WAAuB;CAChE,IAAI;AACJ,SAAQ,SAAR;EACE,KAAK;AACH,iBAAc;AACd;EACF,KAAK;AACH,iBAAc;AACd;EAEF,QACE,eAAc;;AAGlB,QAAO,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;EAAS,GAAI;EAAM,SAAS;EAAe,CAAA;EAClD,OACM,kBAAA,GAAG;;;;;;;;;;IAWV"}

package/dist/Badge.d.cts

@@ -0,0 +1,25 @@
+import { DefaultTheme, StyledComponent } from "styled-components";
+
+//#region components/Badge/Badge.d.ts
+interface BadgeProps {
+  /**
+   * When rendered on a secondary background (e.g. inside a panel or card with
+   * a grey fill), set this to true so the component adjusts its colours
+   * appropriately for certain variants.
+   */
+  onSecondaryBackground?: boolean;
+  /**
+   * Semantic colour variant for the badge.
+   *
+   * - `basic` – neutral grey, for informational counts or labels (default).
+   * - `active` – purple, to highlight an active or selected state.
+   * - `alert` – red/danger, to draw attention to errors or urgent counts.
+   *
+   * @defaultValue 'basic'
+   */
+  variant?: 'alert' | 'active' | 'basic';
+}
+declare const Badge: StyledComponent<"span", DefaultTheme, BadgeProps, never>;
+//#endregion
+export { Badge, Badge as default, BadgeProps };
+//# sourceMappingURL=Badge.d.cts.map

package/dist/Badge.d.mts

@@ -0,0 +1,25 @@
+import { DefaultTheme, StyledComponent } from "styled-components";
+
+//#region components/Badge/Badge.d.ts
+interface BadgeProps {
+  /**
+   * When rendered on a secondary background (e.g. inside a panel or card with
+   * a grey fill), set this to true so the component adjusts its colours
+   * appropriately for certain variants.
+   */
+  onSecondaryBackground?: boolean;
+  /**
+   * Semantic colour variant for the badge.
+   *
+   * - `basic` – neutral grey, for informational counts or labels (default).
+   * - `active` – purple, to highlight an active or selected state.
+   * - `alert` – red/danger, to draw attention to errors or urgent counts.
+   *
+   * @defaultValue 'basic'
+   */
+  variant?: 'alert' | 'active' | 'basic';
+}
+declare const Badge: StyledComponent<"span", DefaultTheme, BadgeProps, never>;
+//#endregion
+export { Badge, Badge as default, BadgeProps };
+//# sourceMappingURL=Badge.d.mts.map

package/dist/Banner.d.cts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Banner/Banner.d.ts
+interface BannerProps extends ComponentPropsWithoutRef<'div'> {
+  children: ReactNode;
+  /**
+   * Semantic colour theme for the banner background.
+   *
+   * - `informational` – purple, for general tips or announcements (default).
+   * - `success` – green, for confirmations or completed actions.
+   * - `warning` – yellow, for non-blocking cautions.
+   * - `alert` – red, for errors or destructive warnings.
+   *
+   * @defaultValue 'informational'
+   */
+  variant?: 'informational' | 'success' | 'warning' | 'alert';
+  /**
+   * Action affordance rendered to the right of the content.
+   *
+   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.
+   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).
+   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.
+   */
+  action?: string | ReactElement;
+  /**
+   * Called when the user clicks the close (×) button.
+   * When provided and `action` is absent, a close icon button is rendered automatically.
+   * When `action` is a string, clicking that string-labelled button calls this handler.
+   */
+  onClose?: VoidFunction;
+  /**
+   * When true, the content area stretches to fill the full banner width.
+   * Useful when `children` contains a layout that needs to span the entire space.
+   */
+  extendContentWidth?: boolean;
+}
+declare const Banner: ({
+  children,
+  variant,
+  action,
+  onClose,
+  extendContentWidth,
+  ...elemProps
+}: BannerProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Banner, Banner as default, BannerProps };
+//# sourceMappingURL=Banner.d.cts.map

package/dist/Banner.d.mts

@@ -0,0 +1,48 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+
+//#region components/Banner/Banner.d.ts
+interface BannerProps extends ComponentPropsWithoutRef<'div'> {
+  children: ReactNode;
+  /**
+   * Semantic colour theme for the banner background.
+   *
+   * - `informational` – purple, for general tips or announcements (default).
+   * - `success` – green, for confirmations or completed actions.
+   * - `warning` – yellow, for non-blocking cautions.
+   * - `alert` – red, for errors or destructive warnings.
+   *
+   * @defaultValue 'informational'
+   */
+  variant?: 'informational' | 'success' | 'warning' | 'alert';
+  /**
+   * Action affordance rendered to the right of the content.
+   *
+   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.
+   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).
+   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.
+   */
+  action?: string | ReactElement;
+  /**
+   * Called when the user clicks the close (×) button.
+   * When provided and `action` is absent, a close icon button is rendered automatically.
+   * When `action` is a string, clicking that string-labelled button calls this handler.
+   */
+  onClose?: VoidFunction;
+  /**
+   * When true, the content area stretches to fill the full banner width.
+   * Useful when `children` contains a layout that needs to span the entire space.
+   */
+  extendContentWidth?: boolean;
+}
+declare const Banner: ({
+  children,
+  variant,
+  action,
+  onClose,
+  extendContentWidth,
+  ...elemProps
+}: BannerProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Banner, Banner as default, BannerProps };
+//# sourceMappingURL=Banner.d.mts.map