@veracity/vui-poc 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,584 @@
+import { ComponentProps, ReactNode, SVGProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ButtonProps, FieldErrorProps, InputProps as InputProps$1, LabelProps, LinkProps, TextFieldProps, TextProps } from "react-aria-components";
+
+//#region src/components/shared/buttonStyles.d.ts
+/**
+ * Shared style maps for `Button` and `IconButton`.
+ *
+ * Both components share the same intent / variant matrix and the same
+ * disabled treatment per variant. Only the *size* table differs (text
+ * buttons size by `h-* px-*`, icon buttons by `size-*`), so size lives
+ * in each component file.
+ */
+type ButtonIntent = "brand" | "contrast" | "success" | "danger";
+type ButtonVariant = "primary" | "secondary" | "tertiary";
+//#endregion
+//#region src/components/Button/Button.d.ts
+/**
+ * `Button` is a single styled component that renders **either** a real
+ * `<button>` (for actions) or an `<a>` (for navigation), chosen based on
+ * whether `href` is set:
+ *
+ *   <Button onPress={save}>Save</Button>           // -> <button> via react-aria-components
+ *   <Button href="/docs">Read the docs</Button>    // -> <a>      via react-aria-components
+ *
+ * This is **not** an `asChild` / generic-`as` polymorphic component. The
+ * choice is a simple discriminated union on `href`, so semantics and a11y
+ * stay correct (real `<button>` for actions, real `<a>` for navigation)
+ * and React Aria's render-prop / press / focus model still works.
+ */
+type SharedButtonProps = {
+  intent?: ButtonIntent;
+  isActive?: boolean;
+  variant?: ButtonVariant;
+  /**
+   * Visual size. Defaults to `"lg"` (40px tall) to match the Figma
+   * source-of-truth and to give a comfortable touch target out of the
+   * box. `"md"` is the right pick for dense forms / toolbars; `"sm"`
+   * for chrome inside other components; `"xl"` for landing-page CTAs.
+   * The default is intentionally not `"md"` — do not "fix" it without
+   * updating the design system.
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+  /** Static class names. The render-prop callback form (`className={(state) => ...}`)
+   * is intentionally not exposed here — use `data-*` selectors against the
+   * emitted state attributes instead, or drop down to `react-aria-components`. */
+  className?: string; /** Icon rendered before the label. Wrapped in an `aria-hidden` span. */
+  startIcon?: ReactNode; /** Icon rendered after the label. Wrapped in an `aria-hidden` span. */
+  endIcon?: ReactNode;
+};
+type VuiButtonProps = (SharedButtonProps & Omit<ButtonProps, "className"> & {
+  href?: undefined;
+}) | (SharedButtonProps & Omit<LinkProps, "className"> & {
+  href: string;
+});
+declare function Button(props: VuiButtonProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/Notification/parts.d.ts
+type NotificationIconProps = {
+  /** Override the default intent-driven icon. */children?: ReactNode;
+  className?: string;
+};
+declare function NotificationIcon({
+  children,
+  className
+}: NotificationIconProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Element used to render `Notification.Title`. Defaults to `"p"`.
+ *
+ * Notifications appear in many contexts and the right heading level is
+ * context-dependent, so the `as` prop is a narrow polymorphism: only
+ * heading-like elements are accepted.
+ *
+ * - In a toast / inline status (the default usage), keep `"p"` — the
+ *   surrounding `role="status"` / `role="alert"` already announces the
+ *   whole notification, and an extra heading would pollute the document
+ *   outline.
+ * - In a dialog or page banner where the notification *is* a section,
+ *   pass `as="h2"` / `as="h3"` so screen-reader users can navigate to it
+ *   via heading shortcuts.
+ */
+type NotificationTitleElement = "p" | "div" | "span" | "h2" | "h3" | "h4" | "h5" | "h6";
+type NotificationTitleProps = {
+  children: ReactNode;
+  className?: string; /** HTML element to render as. See {@link NotificationTitleElement}. Default: `"p"`. */
+  as?: NotificationTitleElement;
+};
+declare function NotificationTitle({
+  children,
+  className,
+  as: Component
+}: NotificationTitleProps): _$react_jsx_runtime0.JSX.Element;
+type NotificationBodyProps = {
+  children: ReactNode;
+  className?: string;
+};
+declare function NotificationBody({
+  children,
+  className
+}: NotificationBodyProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Wraps title, body, and inline actions in a vertical flex column inside the
+ * notification. Children stack top-to-bottom, growing to fill the available
+ * horizontal space without affecting the sibling `<Notification.Icon>` or
+ * `<Notification.Dismiss>` slots.
+ *
+ * The flat API renders this automatically; reach for it in the compound API
+ * whenever you need to control the title / body / actions stack.
+ */
+type NotificationContentProps = ComponentProps<"div"> & {
+  children: ReactNode;
+};
+declare function NotificationContent({
+  children,
+  className,
+  ...rest
+}: NotificationContentProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Canonical action button for a notification: a `Button` pre-styled with the
+ * notification's inverted accent (background = current intent accent, text =
+ * notification surface). Use inside `<Notification.Actions>` instead of
+ * importing `<Button>` directly so the action always tracks the host
+ * notification's intent without per-call wiring.
+ *
+ * Forwards all `Button` props. `style` is shallow-merged so consumers can
+ * still override individual CSS properties when needed.
+ */
+type NotificationActionProps = Extract<VuiButtonProps, {
+  href?: undefined;
+}>;
+declare function NotificationAction({
+  variant,
+  size: sizeProp,
+  style,
+  className,
+  ...rest
+}: NotificationActionProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Layout slot for one or more action buttons inside a notification. Renamed
+ * from `Action` to `Actions` because the slot routinely holds multiple
+ * controls (e.g. "Retry" + "Cancel").
+ *
+ * Rendered as an unstyled `<div>` — vertical spacing between this slot and
+ * the title/body is owned by the parent `<Notification>` (via its `gap-*`
+ * class). This avoids the `mt-2` / consumer-`mt-3` className collision that
+ * the previous implementation could produce.
+ */
+type NotificationActionsProps = ComponentProps<"div"> & {
+  children: ReactNode;
+};
+declare function NotificationActions({
+  children,
+  className,
+  ...rest
+}: NotificationActionsProps): _$react_jsx_runtime0.JSX.Element;
+type NotificationDismissProps = {
+  className?: string; /** Accessible label for the dismiss button. Defaults to `"Close"`. */
+  "aria-label"?: string; /** ID of the element that labels the dismiss button. */
+  "aria-labelledby"?: string;
+};
+declare function NotificationDismiss({
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}: NotificationDismissProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/Notification/helpers.d.ts
+type NotificationIntent = "info" | "success" | "warning" | "danger";
+type NotificationAlign = "top" | "center";
+/**
+ * Sizing scale.
+ *
+ * - `"md"` (default) — Figma default. Used for inline page-level notifications.
+ * - `"sm"` — compact layout for dense UIs (toasts, side panels). Reduces
+ *   padding, gap, icon size, action button size, and the dismiss icon.
+ */
+type NotificationSize = "sm" | "md";
+//#endregion
+//#region src/components/Notification/Notification.d.ts
+/**
+ * `Notification` supports **two interchangeable APIs**:
+ *
+ * 1. **Flat / convenience** — pass `title`, `body`, `action`, and toggle
+ *    `showDismissButton` for the standard layout in one element:
+ *
+ *      <Notification
+ *        intent="danger"
+ *        title="Could not save"
+ *        body="Check your connection and try again."
+ *        action={<Button size="sm">Retry</Button>}
+ *        showDismissButton
+ *      />
+ *
+ * 2. **Compound** — pass children using the named sub-components when you
+ *    need to control element order, add extra markup, or skip parts:
+ *
+ *      <Notification intent="danger">
+ *        <Notification.Icon />
+ *        <Notification.Title>Could not save</Notification.Title>
+ *        <Notification.Body>Check your connection and try again.</Notification.Body>
+ *        <Notification.Actions>
+ *          <Button size="sm">Retry</Button>
+ *        </Notification.Actions>
+ *        <Notification.Dismiss />
+ *      </Notification>
+ *
+ * Selection is purely a function of whether `children` is provided: any
+ * `children` switches to compound mode and the flat props are ignored. This
+ * avoids runtime children-shape detection — there is no "mixed" mode.
+ */
+type NotificationVariant = "inline" | "banner";
+/**
+ * ARIA role values accepted as an explicit override. When omitted, the role
+ * is derived from `intent` (`"warning"` / `"danger"` → `"alert"`, otherwise
+ * `"status"`). Use `"none"` to suppress the implicit live region entirely —
+ * e.g. when the notification sits inside a parent live region that already
+ * announces.
+ */
+type NotificationRole = "alert" | "status" | "log" | "none";
+/**
+ * Shorthand `action` value. When the prop is given this object shape instead
+ * of a `ReactNode`, the component renders a small, inverted-intent `Button`
+ * inline — matching the canonical VUI 4.x action pattern so consumers don't
+ * have to import `Button` for the common case. Pass a `ReactNode` (e.g. a
+ * fully configured `<Button>`) when you need more control.
+ */
+type NotificationActionObject = {
+  label: ReactNode;
+  onClick: () => void;
+};
+type NotificationProps = Omit<ComponentProps<"div">, "role" | "children"> & {
+  intent?: NotificationIntent; /** Vertical alignment of the icon and dismiss button relative to the body. */
+  align?: NotificationAlign;
+  /**
+   * Sizing scale.
+   *
+   * - `"md"` (default) — Figma default. Comfortable padding/gap, 24px icon,
+   *   medium action button, 16px dismiss icon.
+   * - `"sm"` — compact for dense UIs (toasts, side panels). Tighter padding
+   *   and gap, 20px icon, small action button, 12px dismiss icon.
+   *
+   * The size is propagated to all sub-components via context.
+   */
+  size?: NotificationSize;
+  /**
+   * Visual variant. `"inline"` (default) is a bordered card sized to its
+   * content (`w-fit`). `"banner"` is the full-width edge-to-edge layout
+   * used by `<BannerNotification>`.
+   */
+  variant?: NotificationVariant;
+  /**
+   * When true, `<Notification.Icon>` renders a spinner instead of the
+   * intent-derived icon. Useful for in-progress operations whose outcome
+   * will later swap the notification to `success` / `danger`.
+   */
+  isLoading?: boolean;
+  /**
+   * ARIA role override. When omitted, the role is derived from `intent`
+   * (`warning` / `danger` → `alert`, otherwise `status`). `aria-live` is
+   * intentionally not set: notifications are mounted with their final
+   * content, and `role="alert"` already announces on insertion.
+   */
+  role?: NotificationRole;
+  /**
+   * Called when `<Notification.Dismiss>` is pressed. If omitted, the
+   * notification dismisses itself by unmounting.
+   */
+  onClose?: () => void; /** Flat-API title. Equivalent to `<Notification.Title>{title}</Notification.Title>`. */
+  title?: ReactNode; /** Flat-API body. Equivalent to `<Notification.Body>{body}</Notification.Body>`. */
+  body?: ReactNode;
+  /**
+   * Alias for {@link NotificationProps.body}. Kept for parity with the
+   * historical VUI 4.x API. When both are provided, `body` wins.
+   * @deprecated Use `body` instead.
+   */
+  text?: ReactNode;
+  /**
+   * Flat-API action slot. Either a `ReactNode` forwarded as-is to
+   * `<Notification.Actions>`, or a shorthand `{ label, onClick }` object —
+   * see {@link NotificationActionObject}. Use the compound API if you need
+   * props on the actions container itself.
+   */
+  action?: ReactNode | NotificationActionObject;
+  /**
+   * Flat-API icon override. Pass a custom icon node to replace the
+   * intent-driven default, or `false` to suppress the icon entirely. Has no
+   * effect on the spinner shown when `isLoading` is true (toggle that via
+   * `isLoading` instead).
+   */
+  icon?: ReactNode | false; /** Flat-API: render a trailing dismiss button. Defaults to `false`. */
+  showDismissButton?: boolean;
+  children?: ReactNode;
+};
+declare function NotificationRoot({
+  intent,
+  align,
+  size,
+  variant,
+  isLoading,
+  role: roleProp,
+  onClose,
+  className,
+  children,
+  title,
+  body,
+  text,
+  action,
+  icon,
+  showDismissButton,
+  ...rest
+}: NotificationProps): _$react_jsx_runtime0.JSX.Element | null;
+/**
+ * Compound API. Each sub-component reads from `NotificationContext` and is
+ * meaningless outside a `<Notification>` (or `<BannerNotification>`) parent.
+ */
+declare const Notification: typeof NotificationRoot & {
+  Icon: typeof NotificationIcon;
+  Title: typeof NotificationTitle;
+  Body: typeof NotificationBody;
+  Content: typeof NotificationContent;
+  Action: typeof NotificationAction;
+  Actions: typeof NotificationActions;
+  Dismiss: typeof NotificationDismiss;
+};
+//#endregion
+//#region src/components/BannerNotification/BannerNotification.d.ts
+/**
+ * `BannerNotification` is the page-level / edge-to-edge variant of
+ * `Notification`. It is a thin wrapper that hard-codes
+ * `variant="banner"` and re-exports the same compound parts. Any prop
+ * accepted by `Notification` (other than `variant`) is forwarded.
+ *
+ *   <BannerNotification intent="warning">
+ *     <BannerNotification.Icon />
+ *     <BannerNotification.Title>Scheduled maintenance</BannerNotification.Title>
+ *     <BannerNotification.Body>The portal is offline Friday 02:00–03:00 UTC.</BannerNotification.Body>
+ *     <BannerNotification.Dismiss />
+ *   </BannerNotification>
+ */
+type BannerNotificationProps = Omit<NotificationProps, "variant">;
+declare function BannerNotificationRoot(props: BannerNotificationProps): _$react_jsx_runtime0.JSX.Element;
+declare const BannerNotification: typeof BannerNotificationRoot & {
+  Icon: typeof NotificationIcon;
+  Title: typeof NotificationTitle;
+  Body: typeof NotificationBody;
+  Content: typeof NotificationContent;
+  Actions: typeof NotificationActions;
+  Dismiss: typeof NotificationDismiss;
+};
+//#endregion
+//#region src/components/IconButton/IconButton.d.ts
+/**
+ * Icon-only counterpart to {@link Button}. Renders a `<button>` for actions
+ * and an `<a>` when `href` is set.
+ *
+ *   <IconButton aria-label="Save" icon={<SaveIcon />} onPress={save} />
+ *   <IconButton aria-label="Settings" href="/settings" icon={<SettingsIcon />} />
+ *
+ * Always provide an `aria-label` (or `aria-labelledby`) — the visible icon
+ * is decorative and `aria-hidden`, so without an explicit label the control
+ * is unnamed.
+ */
+type SharedIconButtonProps = {
+  intent?: ButtonIntent;
+  isActive?: boolean;
+  isElevated?: boolean;
+  isRound?: boolean;
+  variant?: ButtonVariant;
+  /**
+   * Visual size. Defaults to `"lg"` (40×40px) to match the Figma
+   * source-of-truth and the default `Button` size, so an icon button
+   * sits flush next to a text button without manual sizing. The
+   * default is intentionally not `"md"` — see `Button` for the
+   * rationale.
+   */
+  size?: "sm" | "md" | "lg" | "xl"; /** Static class names; render-prop callback form is not supported here. */
+  className?: string;
+  /**
+   * The icon to render. Wrapped in an `aria-hidden` span so the visible
+   * glyph is never announced — the control is named exclusively by
+   * `aria-label` / `aria-labelledby`.
+   */
+  icon: ReactNode;
+};
+type VuiIconButtonProps = (SharedIconButtonProps & Omit<ButtonProps, "className" | "children"> & {
+  href?: undefined;
+}) | (SharedIconButtonProps & Omit<LinkProps, "className" | "children"> & {
+  href: string;
+});
+declare function IconButton(props: VuiIconButtonProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/IconButton/presets.d.ts
+type OmitDistributive<T, K extends string> = T extends unknown ? Omit<T, K> : never;
+type IconPresetProps = OmitDistributive<VuiIconButtonProps, "children" | "icon">;
+type BackButtonProps = IconPresetProps;
+declare const BackButton: (props: BackButtonProps) => ReactNode;
+type DismissButtonProps = IconPresetProps;
+declare const DismissButton: (props: DismissButtonProps) => ReactNode;
+//#endregion
+//#region src/components/Input/context.d.ts
+/**
+ * Visual flavor of the field. `"brand"` is the resting state; `"success"`
+ * tints the border / message green for confirmed-valid input; `"danger"`
+ * forces the red error styling **without** setting `isInvalid`.
+ *
+ * Prefer `isInvalid` (or, on `<Input>`, `errorMessage`) for real validation
+ * — it sets `aria-invalid` and is announced to assistive tech. Reach for
+ * `intent="danger"` only when you need the red look without claiming the
+ * field is invalid (e.g. a parent-level error highlights its inputs but
+ * the inputs themselves are not individually invalid).
+ */
+type TextFieldIntent = "brand" | "success" | "danger";
+type TextFieldSize = "sm" | "md" | "lg" | "xl";
+type TextFieldContextValue = {
+  count: number;
+  intent: TextFieldIntent;
+  maxLength?: number;
+  showCount: boolean;
+  size: TextFieldSize;
+};
+//#endregion
+//#region src/components/Input/parts.d.ts
+type TextFieldLabelProps = LabelProps;
+type TextFieldInputProps = InputProps$1;
+type TextFieldDescriptionProps = Omit<TextProps, "slot">;
+type TextFieldErrorProps = FieldErrorProps;
+type TextFieldCounterProps = {
+  className?: string;
+};
+declare function TextFieldLabel({
+  className,
+  ...props
+}: TextFieldLabelProps): _$react_jsx_runtime0.JSX.Element;
+declare function TextFieldInput({
+  className,
+  ...props
+}: TextFieldInputProps): _$react_jsx_runtime0.JSX.Element;
+declare function TextFieldDescription({
+  className,
+  ...props
+}: TextFieldDescriptionProps): _$react_jsx_runtime0.JSX.Element;
+declare function TextFieldError({
+  className,
+  ...props
+}: TextFieldErrorProps): _$react_jsx_runtime0.JSX.Element;
+declare function TextFieldCounter({
+  className
+}: TextFieldCounterProps): _$react_jsx_runtime0.JSX.Element | null;
+type TextFieldIconProps = {
+  /** Where the icon sits relative to the input. Used for layout / spacing only. */position?: "start" | "end";
+  children: ReactNode;
+  className?: string;
+};
+/**
+ * Decorative icon for an input. Render *inside* `TextField.InputGroup`,
+ * either before or after `TextField.Input`.
+ */
+declare function TextFieldIcon({
+  position,
+  children,
+  className
+}: TextFieldIconProps): _$react_jsx_runtime0.JSX.Element;
+type TextFieldInputGroupProps = {
+  children: ReactNode;
+  className?: string;
+};
+/**
+ * Wrapper around `TextField.Input` that lays out adjacent
+ * `TextField.Icon` siblings in a single row.
+ */
+declare function TextFieldInputGroup({
+  children,
+  className
+}: TextFieldInputGroupProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/Input/TextField.d.ts
+/**
+ * `TextField` is the **advanced / compound** text-field API. For the
+ * common case (label + input + description/error + counter) prefer
+ * `<Input>`, which composes these parts into the standard layout for
+ * you.
+ *
+ * Reach for `TextField` directly when you need something `<Input>` can
+ * not express — e.g. icons inside the input, a non-standard label or
+ * footer layout, or extra elements interleaved with the parts.
+ */
+type VuiTextFieldProps = TextFieldProps & {
+  /**
+   * Visual flavor of the field. See {@link TextFieldIntent} for the
+   * difference between `intent="danger"` (cosmetic only) and `isInvalid`
+   * (semantic + a11y). Prefer `isInvalid` for real validation errors.
+   */
+  intent?: TextFieldIntent;
+  showCount?: boolean;
+  /**
+   * Visual size. Defaults to `"lg"` (40px tall) to align with the
+   * default `Button` size, so a text field and its submit button match
+   * heights without manual sizing. The default is intentionally not
+   * `"md"` — see `Button` for the rationale.
+   */
+  size?: TextFieldSize;
+};
+declare function TextFieldRoot({
+  className,
+  defaultValue,
+  intent,
+  maxLength,
+  onChange,
+  showCount,
+  size,
+  value,
+  ...props
+}: VuiTextFieldProps): _$react_jsx_runtime0.JSX.Element;
+declare const TextField: typeof TextFieldRoot & {
+  Counter: typeof TextFieldCounter;
+  Description: typeof TextFieldDescription;
+  Error: typeof TextFieldError;
+  Icon: typeof TextFieldIcon;
+  Input: typeof TextFieldInput;
+  InputGroup: typeof TextFieldInputGroup;
+  Label: typeof TextFieldLabel;
+};
+//#endregion
+//#region src/components/Input/Input.d.ts
+/**
+ * `Input` is the **default text-field component**. Reach for it first.
+ *
+ * It composes the `TextField` parts (`Label`, `Input`, `Description`,
+ * `Error`, `Counter`) into the standard layout and wires the standard
+ * accessibility behavior, so the common case is one element with flat
+ * props:
+ *
+ *   <Input label="Email" description="Work email only" errorMessage={err} />
+ *
+ * Drop down to `<TextField>` (the compound API) only when you need
+ * something the flat API cannot express — e.g. an icon inside the input
+ * via `<TextField.InputGroup>` + `<TextField.Icon>`, or a custom layout
+ * around the label and footer.
+ */
+type InputProps = Omit<VuiTextFieldProps, "children"> & {
+  description?: ReactNode;
+  errorMessage?: ReactNode;
+  label?: ReactNode;
+  placeholder?: string;
+};
+declare function Input({
+  description,
+  errorMessage,
+  isInvalid,
+  label,
+  placeholder,
+  showCount,
+  ...props
+}: InputProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/icons/index.d.ts
+/**
+ * Central place for all VUI icons.
+ *
+ * Conventions:
+ * - All icons accept standard SVG props so consumers can size / color via
+ *   `width`, `height`, `className`, or override `fill` / `stroke`.
+ * - Default size is `1em` so the icon scales with the surrounding text /
+ *   button by default. Components that want a fixed size pass `width` /
+ *   `height` explicitly.
+ * - Icons are purely decorative by default (`aria-hidden="true"`).
+ *   When used as the *only* content of an interactive element, the parent
+ *   is responsible for providing `aria-label`.
+ */
+type VuiIconProps = SVGProps<SVGSVGElement>;
+declare function CheckCircleIcon(props: VuiIconProps): _$react_jsx_runtime0.JSX.Element;
+declare function WarningTriangleIcon(props: VuiIconProps): _$react_jsx_runtime0.JSX.Element;
+declare function InfoCircleIcon(props: VuiIconProps): _$react_jsx_runtime0.JSX.Element;
+declare function TimesIcon(props: VuiIconProps): _$react_jsx_runtime0.JSX.Element;
+declare function ArrowLeftIcon(props: VuiIconProps): _$react_jsx_runtime0.JSX.Element;
+declare function ArrowRightIcon(props: VuiIconProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Indeterminate spinner. Animation is applied via the `vui-spin` class
+ * (defined in `styles.css`) rather than inline keyframes so callers can
+ * opt out of motion with `prefers-reduced-motion` or scope-level CSS.
+ */
+declare function SpinnerIcon(props: VuiIconProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ArrowLeftIcon, ArrowRightIcon, BackButton, type BackButtonProps, BannerNotification, type BannerNotificationProps, Button, CheckCircleIcon, DismissButton, type DismissButtonProps, IconButton, InfoCircleIcon, Input, type InputProps, Notification, type NotificationActionObject, type NotificationActionProps, type NotificationActionsProps, type NotificationAlign, type NotificationBodyProps, type NotificationContentProps, type NotificationDismissProps, type NotificationIconProps, type NotificationIntent, type NotificationProps, type NotificationRole, type NotificationTitleElement, type NotificationTitleProps, type NotificationVariant, SpinnerIcon, TextField, type TextFieldContextValue, type TextFieldCounterProps, type TextFieldDescriptionProps, type TextFieldErrorProps, type TextFieldIconProps, type TextFieldInputGroupProps, type TextFieldInputProps, type TextFieldIntent, type TextFieldLabelProps, type TextFieldSize, TimesIcon, type VuiButtonProps, type VuiIconButtonProps, VuiIconProps, type VuiTextFieldProps, WarningTriangleIcon };