@pantheon-systems/pds-toolkit-react 2.0.0-alpha.2 → 2.0.0-alpha.21

package/README.md

@@ -8,11 +8,11 @@ This toolkit provides assets for use within a React project and a Storybook inst
 
 ## Toolkit philosophy and scope
 
-The intent of this toolkit is to provide a React-based implementation of the Pantheon Design System (PDS) with a focus on semantics, accessibility, visual design, and user-interface design.
+The toolkit provides a React implementation of the Pantheon Design System (PDS) focused on semantics, accessibility, visual design, and user-interface design.
 
-This toolkit should not contain processes or mechanisms used for data manipulation, business logic, or similar. Therefore, processes such as form handling, routing, and language translation should be handled within the application that is consuming the toolkit.
+The toolkit does not include data manipulation, business logic, form handling, routing, or language translation. These concerns are handled by the consuming application.
 
-Each component will contain a documentation page within Storybook that provides usage notes, implementation instructions, and expected data structure for that particular component.
+Each component has a documentation page within Storybook that provides usage notes, implementation instructions, and expected data structure.
 
 ### Content within components
 

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

@@ -21,10 +21,14 @@ export interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
      * A link element using the router of your choice. Leave empty for no link.
      */
     linkContent?: ReactNode;
+    /**
+     * Avatar shape.
+     */
+    shape?: 'circle' | 'square';
     /**
      * Avatar size.
      */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'xs' | 's' | 'm' | 'l';
     /**
      * Unique ID associated with the avatar. Can be workspace ID, user ID, email, etc.
      */
@@ -33,4 +37,4 @@ export interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Avatar UI component
  */
-export declare const Avatar: ({ ariaLabel, className, hasUserFallback, imageSrc, linkContent, size, uniqueId, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ ariaLabel, className, hasUserFallback, imageSrc, linkContent, shape, size, uniqueId, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ComparisonList/ComparisonList.d.ts

@@ -9,6 +9,7 @@ export interface ListItems {
     text: string;
     type: 'included' | 'notIncluded' | 'addon';
 }
+export type ComparisonListSize = 's' | 'm';
 export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Additional class names
@@ -30,6 +31,14 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
      * Render the icon labels for screen readers.
      */
     renderTypeLabels?: boolean;
+    /**
+     * Whether to show the border on list items.
+     */
+    showBorder?: boolean;
+    /**
+     * Size variant.
+     */
+    size?: ComparisonListSize;
     /**
      * Icon labels
      */
@@ -38,5 +47,5 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * ComparisonList UI component
  */
-export declare const ComparisonList: ({ className, listItems, listLabel, moreLink, renderTypeLabels, typeLabels, ...props }: ComparisonListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComparisonList: ({ className, listItems, listLabel, moreLink, renderTypeLabels, showBorder, size, typeLabels, ...props }: ComparisonListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,58 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './drawer.css';
+export type DrawerPlacement = 'left' | 'right';
+export type DrawerSize = 's' | 'm' | 'l';
+export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * Aria label that describes the drawer. Will default to the title if not provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Main content for the drawer.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Text for close button aria-label attribute.
+     */
+    closeButtonLabel?: string;
+    /**
+     * If true, clicking outside the drawer will not close it.
+     */
+    disableOutsideClick?: boolean;
+    /**
+     * Indicates if the built-in close button will be shown.
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Is the drawer open?
+     */
+    isOpen?: boolean;
+    /**
+     * Which edge of the screen the drawer slides in from.
+     */
+    placement?: DrawerPlacement;
+    /**
+     * Function to set the drawer open state.
+     */
+    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Preset width of the drawer. Overridden by the `width` prop if provided.
+     */
+    size?: DrawerSize;
+    /**
+     * Title for the drawer. Accepts a string or ReactNode (e.g., a logo). Leave empty for no title.
+     */
+    title?: ReactNode;
+    /**
+     * Custom width for the drawer. Accepts any valid CSS value (e.g. '50vw', '800px', '40rem'). Overrides the `size` prop.
+     */
+    width?: string;
+}
+/**
+ * Drawer UI component
+ */
+export declare const Drawer: ({ ariaLabel, children, className, closeButtonLabel, disableOutsideClick, hasCloseButton, isOpen: isOpenProp, placement, setIsOpen: setIsOpenProp, size, title, width, ...props }: DrawerProps) => any;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,140 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { UseDropdownOptions } from '../../utilities/hooks/useDropdown';
+import './dropdown.css';
+export interface DropdownProps extends UseDropdownOptions {
+    /**
+     * Dropdown sub-components (Trigger, Panel, etc.).
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names for the root wrapper.
+     */
+    className?: string;
+    /**
+     * Use inline-block display instead of block.
+     * Useful when the dropdown trigger should size to its content
+     * (e.g., UserMenu, MenuButton) rather than fill the parent width.
+     */
+    inline?: boolean;
+}
+/**
+ * Root Dropdown component. Provides dropdown context to sub-components.
+ */
+export declare const Dropdown: {
+    ({ children, className, inline, ...options }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, showTriggerIcon, ...props }: DropdownTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ children, className, ...props }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, className, description, disabled, icon, index, isActive, isCritical, onClick, trailingIcon, ...props }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ children, className, ...props }: DropdownHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className, ...props }: DropdownSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    Filter: ({ className, filterIcon, label, noResultsText, onFilterChange, placeholder, showNoResults, ...props }: DropdownFilterProps) => import("react/jsx-runtime").JSX.Element;
+};
+export interface DropdownTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Trigger content (label text, icon, etc.).
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Show a directional icon on the trigger that indicates the dropdown can be expanded.
+     */
+    showTriggerIcon?: boolean;
+}
+export interface DropdownPanelProps extends ComponentPropsWithoutRef<'ul'> {
+    /**
+     * Panel content (Items, Headings, Separators, Filter, etc.).
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+export interface DropdownItemProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Item content — label text, or a link element for navigation items.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Secondary text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * Leading content — PDSIcon name, or custom ReactNode (Avatar, etc.).
+     */
+    icon?: ReactNode;
+    /**
+     * Index of this item in the list (required for keyboard navigation).
+     */
+    index: number;
+    /**
+     * Selected or current state.
+     */
+    isActive?: boolean;
+    /**
+     * Destructive action styling.
+     */
+    isCritical?: boolean;
+    /**
+     * Trailing content — check icon, lock icon, or custom ReactNode.
+     */
+    trailingIcon?: ReactNode;
+}
+export interface DropdownHeadingProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Heading text.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+export interface DropdownSeparatorProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+export type DropdownFilterIcon = 'filter' | 'none' | 'search';
+export interface DropdownFilterProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Icon to display inside the filter input.
+     */
+    filterIcon?: DropdownFilterIcon;
+    /**
+     * Label for the filter input (screen readers).
+     */
+    label?: string;
+    /**
+     * Text shown when no items match the filter.
+     */
+    noResultsText?: string;
+    /**
+     * Callback when the filter value changes.
+     */
+    onFilterChange?: (value: string) => void;
+    /**
+     * Placeholder text for the filter input.
+     */
+    placeholder?: string;
+    /**
+     * Whether to show the "no results" message.
+     */
+    showNoResults?: boolean;
+}

package/dist/components/Dropdown/DropdownSelectedIcon.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Selected-state check mark icon for dropdown items.
+ * Used alongside the pds-dropdown__selected-icon CSS class.
+ */
+export declare const DropdownSelectedIcon: ({ className, }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FileDiff/FileDiff.d.ts

@@ -23,7 +23,7 @@ export interface FileDiffProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Object with strings for tooltips and screen reader labels.
      */
-    labelStrings?: {
+    translationStrings?: {
         additions?: string;
         deletions?: string;
         linesChanged?: string;
@@ -32,4 +32,4 @@ export interface FileDiffProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * FileDiff UI component
  */
-export declare const FileDiff: ({ additions, className, componentWidth, deletions, labelStrings, ...props }: FileDiffProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileDiff: ({ additions, className, componentWidth, deletions, translationStrings, ...props }: FileDiffProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/IdentityBlock/IdentityBlock.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { AvatarProps } from '../Avatar/Avatar';
+import './identity-block.css';
+/**
+ * Prop types for IdentityBlock
+ */
+export interface IdentityBlockProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Props to pass to the Avatar component.
+     */
+    avatarProps?: AvatarProps;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * When true, only the avatar is shown (text is hidden).
+     */
+    isSidebarCollapsed?: boolean;
+    /**
+     * When true, displays a smaller avatar with only the primary text.
+     * Secondary text is not rendered even if provided.
+     */
+    isSingleLine?: boolean;
+    /**
+     * First line of text (e.g., organization name).
+     */
+    primaryText?: string;
+    /**
+     * Second line of text (e.g., user name).
+     */
+    secondaryText?: string;
+}
+/**
+ * IdentityBlock UI component
+ */
+export declare const IdentityBlock: ({ avatarProps, className, isSidebarCollapsed, isSingleLine, primaryText, secondaryText, ...props }: IdentityBlockProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -42,7 +42,7 @@ export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * The width of the modal.
      */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl';
     /**
      * Text for modal title
      */

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

@@ -58,8 +58,12 @@ export interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'con
      * The icon to use as the trigger.
      */
     triggerIcon?: 'circleInfo' | 'circleQuestion';
+    /**
+     * Size of the trigger icon. Uses PDS Icon sizing.
+     */
+    triggerIconSize?: 's' | 'm' | 'l';
 }
 /**
  * Popover UI component
  */
-export declare const Popover: ({ className, classNameContainer, closeButtonLabel, content, customTrigger, hasCloseButton, offsetValue, onClose, placement, popoverIsOpen, setPopoverIsOpen, title, triggerAccessibleText, triggerIcon, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: ({ className, classNameContainer, closeButtonLabel, content, customTrigger, hasCloseButton, offsetValue, onClose, placement, popoverIsOpen, setPopoverIsOpen, title, triggerAccessibleText, triggerIcon, triggerIconSize, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SiteDashboardHeading/SiteDashboardHeading.d.ts

@@ -36,7 +36,7 @@ export interface SiteDashboardHeadingProps extends ComponentPropsWithoutRef<'div
     /**
      * Site plan level.
      */
-    sitePlanLevel?: SitePlanLevel;
+    sitePlanLevel?: SitePlanLevel | (string & {});
     /**
      * Site type.
      */

package/dist/components/{RefreshChecker/RefreshChecker.d.ts → StatusChecker/StatusChecker.d.ts}

@@ -1,17 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
-import './refresh-checker.css';
-/**
- * Enum for RefreshChecker states
- */
-export declare enum RefreshCheckerState {
-    CHECKED = "checked",
-    DEFAULT = "default",
-    WORKING = "working"
-}
-/**
- * Prop types for RefreshChecker
- */
-interface RefreshCheckerProps extends ComponentPropsWithoutRef<'div'> {
+import './status-checker.css';
+export type StatusCheckerState = 'checked' | 'default' | 'working';
+export interface StatusCheckerProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Alignment of the component. Default is left.
      */
@@ -45,10 +35,6 @@ interface RefreshCheckerProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * State of the component
      */
-    state?: `${RefreshCheckerState}`;
+    state?: StatusCheckerState;
 }
-/**
- * RefreshChecker UI component
- */
-export declare const RefreshChecker: ({ alignment, className, componentWidth, labelStrings, lastChecked, onCheck, state, ...props }: RefreshCheckerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const StatusChecker: ({ alignment, className, componentWidth, labelStrings, lastChecked, onCheck, state, ...props }: StatusCheckerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/StatusIndicator/StatusIndicator.d.ts

@@ -13,11 +13,11 @@ export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Sets the size
      */
-    size?: 'sm' | 'md';
+    size?: 'xs' | 's';
     /**
      * Sets status type
      */
-    type: Exclude<StatusType, 'discovery'> | 'neutral' | 'new' | 'working';
+    type: StatusType | 'disabled' | 'neutral' | 'working';
 }
 /**
  * StatusIndicator UI component

package/dist/components/Table/Table.d.ts

@@ -1,27 +1,18 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './table.css';
-/**
- * Prop types for Table
- */
-interface TableProps extends ComponentPropsWithoutRef<'table'> {
-    /**
-     * Additional class names
-     */
+export interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    /** Additional class names */
     className?: string;
-    /**
-     * Table headers
-     */
+    /** Column index (0-based) to sort by on initial render. */
+    defaultSortKey?: number;
+    /** Initial sort direction when defaultSortKey is set. Defaults to 'asc'. */
+    defaultSortOrder?: 'asc' | 'desc';
+    /** Table headers */
     headers?: Array<{
         sortable?: boolean;
-        title: string;
+        title: ReactNode;
     }>;
-    /**
-     * Table row data - array of rows, where each row is an array of cell values
-     */
+    /** Table row data - array of rows, where each row is an array of cell values */
     rowData?: Array<Array<string | ReactNode>>;
 }
-/**
- * Table UI component
- */
-export declare const Table: ({ className, headers, rowData, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Table: ({ className, defaultSortKey, defaultSortOrder, headers, rowData, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/Tabs.d.ts

@@ -30,6 +30,7 @@ interface Tabs {
         type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
     };
 }
+export type TabsSize = 's' | 'm';
 interface TabsProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Sets tabset aria label
@@ -51,6 +52,10 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
      * Sets currently selected tab using a zero-based index
      */
     selectedTab?: number;
+    /**
+     * Size of the tabs.
+     */
+    size?: TabsSize;
     /**
      * Array of objects for tab data
      */
@@ -59,5 +64,5 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Tabs UI component
  */
-export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, size, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tag/Tag.d.ts

@@ -1,7 +1,8 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './tag.css';
-export declare const tagColors: string[];
+export declare const tagColors: readonly ["apollo", "iris", "hypnos", "gaia", "aether", "success", "warning", "critical", "info", "discovery", "amber", "orange", "lime", "teal", "sky", "indigo", "rose", "slate", "sand", "mint", "silver", "stone"];
 type TagColor = (typeof tagColors)[number];
+export type TagSize = 'xs' | 's' | 'm';
 interface TagProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Additional class names
@@ -23,6 +24,10 @@ interface TagProps extends ComponentPropsWithoutRef<'div'> {
      * Label for the remove button. Tag text will be appended to this label.
      */
     removeLabel?: string;
+    /**
+     * Size of the tag.
+     */
+    size?: TagSize;
     /**
      * Tag color. Will use random color if not selected.
      */
@@ -35,5 +40,5 @@ interface TagProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Tag UI component
  */
-export declare const Tag: ({ className, isRemovable, linkContent, onRemove, removeLabel, tagColor, tagLabel, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ className, isRemovable, linkContent, onRemove, removeLabel, size, tagColor, tagLabel, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 import './theme-switcher.css';
+type Theme = 'light' | 'dark' | 'system';
 /**
  * Prop types for ThemeSwitcher
  */
@@ -9,24 +10,29 @@ export interface ThemeSwitcherProps extends Omit<ComponentPropsWithoutRef<'div'>
      */
     className?: string;
     /**
-     * Callback triggered when the theme changes
+     * ID for the menu button. Must be unique if multiple ThemeSwitchers are rendered.
      */
-    onChange?: (theme: 'light' | 'dark' | 'system') => void;
-    /**
-     * The current theme
-     */
-    theme?: 'light' | 'dark' | 'system';
+    id?: string;
     /**
      * Translation strings for theme options
      */
-    translations?: {
+    labelStrings?: {
         dark: string;
         light: string;
         system: string;
         tooltip?: string;
     };
+    /**
+     * Callback triggered when the theme changes
+     */
+    onChange?: (theme: Theme) => void;
+    /**
+     * The current theme
+     */
+    theme?: Theme;
 }
 /**
  * ThemeSwitcher UI component
  */
-export declare const ThemeSwitcher: ({ className, onChange, theme, translations, ...props }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeSwitcher: ({ className, id, labelStrings, onChange, theme, ...props }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -15,6 +15,10 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
      * String or HTML content to use as the trigger instead of an icon. Leave null to use the icon.
      */
     customTrigger?: ReactNode;
+    /**
+     * When true, the tooltip will not show on focus — only on hover.
+     */
+    disableFocusTrigger?: boolean;
     /**
      * The spacing between the trigger and the tooltip in pixels. Use the default value (in most cases) when using an icon trigger.
      */
@@ -47,5 +51,5 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Tooltip UI component
  */
-export declare const Tooltip: ({ className, content, customTrigger, offsetValue, preferredPlacement, triggerAccessibleText, triggerIcon, triggerIconColor, triggerIconSize, zIndex, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ className, content, customTrigger, disableFocusTrigger, offsetValue, preferredPlacement, triggerAccessibleText, triggerIcon, triggerIconColor, triggerIconSize, zIndex, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './badge.css';
+export type BadgeColor = 'aether' | 'aether-secondary' | 'amber' | 'amber-secondary' | 'apollo' | 'apollo-secondary' | 'critical' | 'critical-secondary' | 'discovery' | 'discovery-secondary' | 'gaia' | 'gaia-secondary' | 'hypnos' | 'hypnos-secondary' | 'indigo' | 'indigo-secondary' | 'info' | 'info-secondary' | 'iris' | 'iris-secondary' | 'lime' | 'lime-secondary' | 'mint' | 'mint-secondary' | 'orange' | 'orange-secondary' | 'rose' | 'rose-secondary' | 'sand' | 'sand-secondary' | 'silver' | 'silver-secondary' | 'sky' | 'sky-secondary' | 'slate' | 'slate-secondary' | 'stone' | 'stone-secondary' | 'success' | 'success-secondary' | 'teal' | 'teal-secondary' | 'warning' | 'warning-secondary' | 'feature';
+/**
+ * Badge component props
+ */
+export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Badge color
+     */
+    color: BadgeColor;
+    /**
+     * Badge text or content.
+     */
+    label: ReactNode;
+    /**
+     * Badge size
+     */
+    size?: 'xs' | 's' | 'm';
+}
+/**
+ * Badge UI component
+ */
+export declare const Badge: ({ className, color, label, size, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/CloseButton/CloseButton.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import './close-button.css';
 /**
  * Prop types for CloseButton
@@ -13,15 +13,15 @@ export interface CloseButtonProps extends ComponentPropsWithoutRef<'button'> {
      */
     className?: string;
     /**
-     * Size of the icon.
+     * Click event callback function.
      */
-    iconSize?: 'm' | 'l' | 'xl';
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Click event callback function.
+     * Size of the icon.
      */
-    onClick?: () => void;
+    size?: 'm' | 'l' | 'xl';
 }
 /**
  * CloseButton UI component
  */
-export declare const CloseButton: ({ ariaLabel, className, iconSize, onClick, ...props }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseButton: ({ ariaLabel, className, onClick, size, ...props }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/IconButton/IconButton.d.ts

@@ -20,6 +20,10 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Show a visible border around the button.
+     */
+    hasBorder?: boolean;
     /**
      * Show tooltip on hover. If false, the title attribute will be used.
      */