se-design 1.0.3 → 1.0.8-5.dev.0

package/dist/components/InputWithIcon/index.d.ts

@@ -7,18 +7,26 @@ export interface InputIconProps {
     onClick?: () => void;
     position: 'left' | 'right';
     style?: React.CSSProperties;
+    /**
+     * Accessible name for the icon when it is interactive (onClick provided).
+     * Required for a11y when the icon has its own onClick.
+     */
+    ariaLabel?: string;
 }
 export interface InputWithIconProps {
     disabled?: boolean;
     error?: boolean;
     errorMessage?: string;
+    id?: string;
     inputStyle?: React.CSSProperties;
     label?: string;
     leftIcon?: InputIconProps;
     maxLength?: number | undefined;
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
     onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     placeholder?: string;
+    readOnly?: boolean;
     rightIcon?: InputIconProps;
     style?: React.CSSProperties;
     tag?: string;
@@ -26,5 +34,31 @@ export interface InputWithIconProps {
     value: string;
     className?: string;
     automationId?: string;
+    /**
+     * Accessible name when no visible label exists.
+     * Prefer a visible label prop instead where possible.
+     */
+    ariaLabel?: string;
+    /**
+     * ID(s) of external visible element(s) that label this input.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID(s) of element(s) that describe this input (hints, notes, constraints).
+     * Announced by screen readers after the label and value, giving extra context.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Set to "dialog" when this input opens a date picker or other dialog.
+     */
+    ariaHasPopup?: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /**
+     * Additional props spread directly onto the inner <input> element.
+     */
+    inputProps?: Record<string, any>;
+    /**
+     * Ref forwarded to the inner <input> element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare function InputWithIcon({ disabled, error, errorMessage, inputStyle, label, leftIcon, maxLength, onChange, onClick, placeholder, rightIcon, style, tag, type, value, className, automationId }: InputWithIconProps): React.JSX.Element;
+export declare function InputWithIcon({ disabled, error, errorMessage, id, inputStyle, label, leftIcon, maxLength, onChange, onClick, onKeyDown, placeholder, readOnly, rightIcon, style, tag, type, value, className, automationId, ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaHasPopup, inputProps, inputRef }: InputWithIconProps): React.JSX.Element;

package/dist/components/KebabMenu/index.d.ts

@@ -5,5 +5,6 @@ export interface KebabMenuProps {
     automationId?: string;
     menuItems: MenuItemProps[];
     variant?: 'primary' | 'secondary' | '';
+    ariaLabel?: string;
 }
 export declare const KebabMenu: FC<KebabMenuProps>;

package/dist/components/LabelChip/index.d.ts

@@ -15,6 +15,9 @@ type LabelChipProps = {
     disabled?: boolean;
     iconColor?: string;
     automationId?: string;
+    id?: string;
+    ariaPressed?: boolean;
+    ariaLabel?: string;
 };
 export declare const LabelChip: FC<LabelChipProps>;
 export {};

package/dist/components/Link/index.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+/**
+ * Allows native anchor attributes (aria-*, data-*, etc.) to be passed through,
+ * but keeps our own href/onClick/aria-label/aria-labelledby/aria-describedby typing.
+ */
+type NativeAnchorProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'onClick' | 'target' | 'rel' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'>;
+export interface LinkProps extends NativeAnchorProps {
+    /**
+     * URL to navigate to (required for actual links)
+     */
+    href: string;
+    /**
+     * Link text content (string only). Ignored when children are provided.
+     */
+    label?: string;
+    /**
+     * Rich content to render inside the link. Takes precedence over label.
+     */
+    children?: React.ReactNode;
+    /**
+     * If true, automatically adds target="_blank" and rel="noopener noreferrer"
+     * Also appends " (opens in a new tab)" to aria-label for screen readers
+     */
+    external?: boolean;
+    /**
+     * Accessible name for the link. Use when link text is generic or unclear.
+     * Prefer ariaLabelledBy when a visible label exists.
+     */
+    ariaLabel?: string;
+    /**
+     * ID(s) of element(s) that label this link.
+     * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID(s) of element(s) that describe this link.
+     * Provides additional context announced after the accessible name.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Click handler (e.g., for analytics tracking)
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Automation ID for testing
+     */
+    automationId?: string;
+    /**
+     * Override target (if you need something other than "_blank" for external links).
+     * Note: If external={true} and target is provided, the provided target will be used.
+     */
+    target?: string;
+    /**
+     * Override rel (if you need something other than "noopener noreferrer" for external links).
+     * Note: If external={true} and rel is provided, the provided rel will be used.
+     */
+    rel?: string;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/MenuItem/index.d.ts

@@ -1,6 +1,12 @@
-import { default as React, FC } from 'react';
+import { default as React } from 'react';
 export type MenuItemProps = {
-    label: string;
+    /**
+     * Stable unique identifier for the menu item.
+     * Recommended for roving focus + React keys, especially when the list can be filtered/reordered.
+     */
+    id?: string;
+    type?: 'item' | 'header' | 'separator';
+    label?: string;
     tag?: string;
     isDisabled?: boolean;
     isActive?: boolean;
@@ -10,5 +16,9 @@ export type MenuItemProps = {
     showCheckMarkForSelected?: boolean;
     automationId?: string;
     renderJSX?: (item: MenuItemProps) => React.ReactNode;
+    tabIndex?: number;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    onFocus?: () => void;
+    ariaLabel?: string;
 };
-export declare const MenuItem: FC<MenuItemProps>;
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/MenuList/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { default as React } from 'react';
 import { MenuItemProps } from '../MenuItem';
 export type MenuListProps = {
     items: MenuItemProps[];
@@ -7,5 +7,6 @@ export type MenuListProps = {
     searchPlaceholder?: string;
     searchBy?: string;
     searchResultEmptyMessage?: string;
+    className?: string;
 };
-export declare const MenuList: FC<MenuListProps>;
+export declare const MenuList: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/MessageBar/index.d.ts

@@ -1,7 +1,10 @@
 import { FC } from 'react';
+import { IconProps } from '../Icon';
+import { ButtonProps } from '../Button';
+export type MessageBarType = 'info' | 'alert' | 'nudge';
 export interface MessageBarProps {
     messageBarCtnClassName?: string;
-    messageBarType: 'info' | 'alert' | 'nudge';
+    messageBarType: MessageBarType;
     message: string;
     hasCloseIcon?: boolean;
     hasButton?: boolean;
@@ -9,6 +12,22 @@ export interface MessageBarProps {
     buttonOnClick?: () => void;
     handleClose?: () => void;
     automationId?: string;
+    /**
+     * Override the leading icon. Merged on top of the variant default
+     * (name + fill color derived from `messageBarType`).
+     * Pass `null` to suppress the leading icon entirely.
+     */
+    iconProps?: Partial<IconProps> | null;
+    /**
+     * Override props for the CTA button. Spread after the variant defaults
+     * (label/onClick/className/type/size), so any field can be replaced —
+     * including `iconProps` to add an icon to the button.
+     */
+    buttonProps?: Partial<ButtonProps>;
+    /**
+     * Accessible name for the close icon. Defaults to "Close message".
+     */
+    closeButtonAriaLabel?: string;
 }
 export declare const MessageBar: FC<MessageBarProps>;
 export default MessageBar;

package/dist/components/Modal/index.d.ts

@@ -2,6 +2,8 @@ import { default as React, FC } from 'react';
 import { ButtonProps } from '../Button';
 export interface ModalProps {
     title?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
     content: string | React.ReactNode;
     successButtonProps?: ButtonProps;
     cancelButtonProps?: ButtonProps;
@@ -12,5 +14,6 @@ export interface ModalProps {
     width?: string;
     height?: string;
     automationId?: string;
+    customModalClassName?: string;
 }
 export declare const Modal: FC<ModalProps>;

package/dist/components/NavigationBar/TabButton.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface TabButtonProps {
+    id: string;
+    label: string;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    panelId?: string;
+    tabIndex: number;
+    className?: string;
+    automationId?: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onFocus: () => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Internal TabButton component for NavigationBar.
+ * Uses Button (unstyled) internally for consistent activation handling.
+ * Supports forwardRef for focus management (roving tabindex).
+ */
+export declare const TabButton: React.ForwardRefExoticComponent<TabButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NavigationBar/index.d.ts

@@ -1,14 +1,21 @@
 import { FC, ReactNode } from 'react';
-interface NavigationItemProps {
+export interface NavigationItemProps {
     label: string;
     id: string;
     disabled?: boolean;
+    panelHasFocusableContent?: boolean;
     renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;
 }
 interface NavigationBarProps {
     defaultActiveNavigationItem?: string;
     navigationItems: NavigationItemProps[];
+    isCompactView?: boolean;
     onNavigationItemChange?: (navigationItemId: string) => void;
+    keyboardActivationMode?: 'automatic' | 'manual';
+    orientation?: 'horizontal' | 'vertical';
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    idBase?: string;
 }
 export declare const NavigationBar: FC<NavigationBarProps>;
 export {};

package/dist/components/OTPInput/index.d.ts

@@ -11,5 +11,6 @@ export interface OTPInputProps {
     errorMessage?: string;
     validateOnBlur?: boolean;
     onValidate?: (value: string) => boolean | string;
+    id?: string;
 }
 export declare const OTPInput: FC<OTPInputProps>;

package/dist/components/OnboardingTour/index.d.ts

@@ -0,0 +1,35 @@
+import { default as React, FC } from 'react';
+export interface TourStep {
+    targetElementSelector: string;
+    targetElementContainerSelector?: string;
+    targetElementGap?: {
+        horizontal: number;
+        vertical: number;
+    };
+    tooltipPosition?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom';
+    content: {
+        title?: string;
+        description?: string;
+        illustration?: any;
+    };
+    tourMixPanelHandler?: (data: {
+        user_path: string;
+        action_type: string;
+    }) => void;
+}
+export interface OnboardingTourProps {
+    steps: TourStep[];
+    screenBaseElementSelector: string;
+    handleCloseProductTour: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+    tourType?: string;
+    highlightBorderRadius?: number;
+    automationId?: string;
+    labels?: {
+        next: string;
+        gotIt: string;
+        finish: string;
+        skip: string;
+        stepInfo: string;
+    };
+}
+export declare const OnboardingTour: FC<OnboardingTourProps>;

package/dist/components/Pagination/index.d.ts

@@ -4,6 +4,8 @@ interface PaginationProps {
     itemsPerPage: number;
     totalItems: number;
     onPageChange: (page: number) => void;
+    mobileView?: boolean;
+    ariaLabel?: string;
 }
 export declare const Pagination: React.FC<PaginationProps>;
 export {};

package/dist/components/Paywall/index.d.ts

@@ -0,0 +1,47 @@
+import { default as React, FC, ReactNode } from 'react';
+/** Variant: with bullet points list, or description only */
+export type PaywallVariant = 'with-points' | 'description-only';
+/** Size: small (656×384) or large (768×500) – sets modal dimensions and media panel proportion */
+export type PaywallSize = 'sm' | 'lg';
+/** Feature list item: plain string (uses default/list icon) or object with text, optional per-item icon, and optional link/action */
+export type PaywallFeatureItem = string | {
+    text: string;
+    icon?: ReactNode;
+    /** If provided, the feature text becomes a hyperlink navigating to this URL */
+    href?: string;
+    /** If true, opens the href in a new tab (only applicable when href is set) */
+    external?: boolean;
+    /** Click handler — use with href for analytics, or alone for SPA actions */
+    onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+};
+export interface PaywallProps {
+    isOpen: boolean;
+    onClose: () => void;
+    trigger?: ReactNode;
+    modalWidth?: string;
+    modalHeight?: string;
+    variant: PaywallVariant;
+    size?: PaywallSize;
+    availabilityLabel?: string;
+    availabilityBadgeText?: string;
+    title: string;
+    description: string;
+    learnMoreLinkText?: string;
+    learnMoreHref?: string;
+    onLearnMoreClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    featureListDesc?: string;
+    featuresList?: PaywallFeatureItem[];
+    featureItemIcon?: ReactNode;
+    mediaContent?: ReactNode;
+    laterButtonText: string;
+    purchaseButtonText: string;
+    onLaterClick?: () => void;
+    onPurchaseClick?: () => void;
+    className?: string;
+    modalContentClassName?: string;
+    automationId?: string;
+    id?: string;
+}
+/** Paywall – always shown in a modal. Pass isOpen/onClose and optionally a trigger. */
+export declare const Paywall: FC<PaywallProps>;
+export default Paywall;

package/dist/components/PhoneInput/index.d.ts

@@ -10,5 +10,32 @@ export interface PhoneInputProps {
     };
     label?: string;
     automationId?: string;
+    /**
+     * Accessible label for the entire phone input group (role="group").
+     * Provides context for screen readers (e.g., "Two-step verification phone number for signer 1").
+     */
+    ariaLabel?: string;
+    /**
+     * ID(s) of element(s) that label the group (highest precedence over ariaLabel).
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID(s) of element(s) providing additional description for the phone number input.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Override aria-label for the phone number input specifically.
+     * Defaults to the visible label text or 'Phone number'.
+     */
+    phoneNumberAriaLabel?: string;
+    /**
+     * Override aria-label for the country code combobox button.
+     * Defaults to "Select country code. Current: {name} {dial_code}".
+     */
+    countryCodeAriaLabel?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
 }
 export declare const PhoneInput: React.FC<PhoneInputProps>;

package/dist/components/Popover/index.d.ts

@@ -1,17 +1,24 @@
 import { default as React, ReactNode } from 'react';
 export interface PopoverHandle {
-    togglePopover: () => void;
+    togglePopover: (focusFirst?: boolean | 'last') => void;
+    /** Focus the popover source/trigger element. */
+    focusTrigger: () => void;
+    /** The wrapper element that acts as the popover trigger. Stable DOM node with tabIndex=0. */
+    element: HTMLElement | null;
 }
 export interface PopoverProps {
     className?: string;
     automationId?: string;
     popoverContentAutomationId?: string;
     renderPopoverContents: (props: {
-        closePopoverCb: () => void;
+        closePopoverCb: (options?: {
+            returnFocus?: boolean;
+            returnFocusTo?: HTMLElement | React.RefObject<HTMLElement>;
+        }) => void;
     }) => ReactNode;
     renderPopoverSrcElement: (props: {
         displayPopover: boolean;
-        togglePopover: () => void;
+        togglePopover: (focusFirst?: boolean | 'last') => void;
     }) => ReactNode;
     position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
     onPopoverToggle?: (displayPopover: boolean) => void;
@@ -21,8 +28,13 @@ export interface PopoverProps {
     isWithPortal?: boolean;
     noBorder?: boolean;
     ariaLabel?: string;
+    ariaLabelledBy?: string;
     sourceRole?: 'button' | 'combobox';
+    popupType?: 'menu' | 'listbox' | 'dialog' | 'true';
     popoverContentStyleProperty?: React.CSSProperties;
     disableClickToggle?: boolean;
+    disableAutoClose?: boolean;
+    /** Focus the first focusable element when the popover opens via isPopoverOpen (external state). */
+    focusFirstOnOpen?: boolean;
 }
 export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;

package/dist/components/Radio/index.d.ts

@@ -12,6 +12,12 @@ export interface RadioProps {
     radioLabelClassName?: string;
     radioContainerClassName?: string;
     automationId?: string;
-    hasBorder?: boolean;
+    withBorder?: boolean;
+    bgColor?: string;
+    content?: () => React.ReactNode;
+    /**
+     * ID of the element controlled by this radio (e.g. an expandable content region).
+     */
+    ariaControls?: string;
 }
 export declare function Radio(props: RadioProps): React.JSX.Element;

package/dist/components/RadioGroup/index.d.ts

@@ -6,5 +6,23 @@ export interface RadioGroupProps {
     value?: string;
     direction?: 'row' | 'column';
     automationId?: string;
+    withBorder?: boolean;
+    /**
+     * Accessible name for the radio group.
+     * Applied to the fieldset element.
+     * Prefer ariaLabelledBy when a visible label exists.
+     */
+    ariaLabel?: string;
+    /**
+     * ID(s) of element(s) that label this radio group.
+     * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Shared name attribute for all radio inputs in the group.
+     * Enables arrow-key navigation between options.
+     * Must be unique per RadioGroup instance on the page.
+     */
+    name: string;
 }
 export declare function RadioGroup(props: RadioGroupProps): React.JSX.Element;

package/dist/components/ShimmerLoader/index.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 export interface ShimmerElement {
-    type: 'text' | 'rect' | 'circle' | 'avatar' | 'image' | 'button';
+    type: 'text' | 'rect' | 'rect-sm' | 'circle' | 'avatar' | 'image' | 'button';
     width: number | string;
     height: number | string;
     borderRadius?: number | string;
@@ -14,8 +14,10 @@ export interface ShimmerContainer {
     gap?: number | string;
     padding?: string;
     margin?: string;
+    alignItems?: string;
+    flex?: number | string;
     className?: string;
-    children: ShimmerElement[];
+    children: (ShimmerElement | ShimmerContainer)[];
 }
 export type ShimmerStructure = (ShimmerElement | ShimmerContainer)[];
 export interface ShimmerLoaderProps {

package/dist/components/SidebarOverlay/index.d.ts

@@ -1,4 +1,5 @@
 import { default as React, FC } from 'react';
+type SidebarOverlayA11yRole = 'dialog' | 'complementary';
 export interface SidebarOverlayProps {
     content: React.ReactNode;
     className?: string;
@@ -6,14 +7,49 @@ export interface SidebarOverlayProps {
     style?: React.CSSProperties;
     noShadow?: boolean;
     automationId?: string;
+    id?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'static' | '';
     isOpen?: boolean;
     displayCloseSidebar?: boolean;
     closeSidebarIcon?: string;
+    /**
+     * Accessible label for the close button. Defaults to 'Close sidebar'.
+     */
+    closeAriaLabel?: string;
     onClose?: () => void;
     onSidebarUnmount?: () => void;
     onPathChange?: (route: string) => void;
     currentPath?: string;
     animateSidebar?: boolean;
+    /**
+     * Accessibility role that determines the full behavior bundle.
+     * - 'dialog': modal drawer (focus trap, scroll lock, aria-modal, Escape closes)
+     * - 'complementary': persistent side panel (no trap, no forced focus, no scroll lock)
+     * If not provided, derives from position: fixed|absolute → 'dialog', static|relative|'' → 'complementary'
+     */
+    a11yRole?: SidebarOverlayA11yRole;
+    /**
+     * Accessible name when no visible label exists.
+     * Prefer ariaLabelledBy when a visible title exists inside the sidebar.
+     */
+    ariaLabel?: string;
+    /**
+     * ID(s) of visible element(s) that label this sidebar.
+     * Preferred over ariaLabel when a visible title exists (keeps SR and visual text in sync).
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID(s) of element(s) that describe this sidebar (additional context).
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Explicit element to restore focus to when the sidebar closes.
+     * Overrides automatic trigger capture from document.activeElement.
+     * Use when the opener element is known (e.g. a ref on the toggle button).
+     * In complementary mode: seeds the trigger ref directly.
+     * In dialog mode: passed through to useFocusTrap.
+     */
+    returnFocusRef?: React.RefObject<HTMLElement | null>;
 }
 export declare const SidebarOverlay: FC<SidebarOverlayProps>;
+export {};

package/dist/components/SkipLinksBar/index.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface SkipLink {
+    id: string;
+    label: string;
+}
+export interface SkipLinksBarProps {
+    skipLinks: SkipLink[];
+    className?: string;
+}
+export declare const SkipLinksBar: React.FC<SkipLinksBarProps>;
+export default SkipLinksBar;

package/dist/components/SnackBar/index.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { IconProps } from '../Icon';
 export type SnackbarPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
 export type SnackbarVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
 export type SnackbarAction = {
@@ -41,12 +42,14 @@ export interface SnackbarProps {
     showProgress?: boolean;
     /** Progress value (0-100) */
     progress?: number;
-    /** Custom icon name */
-    icon?: string;
+    /** Icon props object (name, fill, stroke, rotation, size, etc.) */
+    iconProps?: Omit<IconProps, 'className'>;
     /** List of items to display in expandable section */
     items?: SnackbarItem[];
     /** Whether items list is expanded by default */
     defaultExpanded?: boolean;
+    /** Compact mode - renders a simple inline notification with just icon and title */
+    compact?: boolean;
     /** Automation ID for testing */
     automationId?: string;
 }

package/dist/components/Spinner/index.d.ts

@@ -1,2 +1,14 @@
 import { FC } from 'react';
-export declare const Spinner: FC;
+export type SpinnerProps = {
+    /**
+     * Size of the spinner
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the spinner should be hidden from screen readers
+     * @default true (spinners are typically decorative)
+     */
+    ariaHidden?: boolean;
+};
+export declare const Spinner: FC<SpinnerProps>;

package/dist/components/TableLayout/index.d.ts

@@ -25,5 +25,23 @@ export interface TableLayoutProps {
     onSortUiUpdate: (newSortData: any) => void;
     onRowClick: (rowData: any) => void;
     tableId: string;
+    /**
+     * ID of element that describes the table (e.g., sort instructions for screen readers)
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Accessible name for the table element
+     */
+    ariaLabel?: string;
+    /**
+     * Announced to screen readers when loading begins.
+     * Pass a translated string from the consumer (e.g. "Loading documents").
+     */
+    loadingAnnouncement?: string;
+    /**
+     * Announced to screen readers when loading completes.
+     * Pass a translated string from the consumer (e.g. "Documents loaded").
+     */
+    loadedAnnouncement?: string;
 }
 export declare const TableLayout: FC<TableLayoutProps>;