@bcgov/design-system-react-components 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -1,20 +1,22 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DisclosureProps, DisclosureGroupProps, DialogProps as DialogProps$1, ButtonProps as ButtonProps$1, CalendarProps, DateValue, CheckboxProps, CheckboxGroupProps as CheckboxGroupProps$1, ValidationResult, DatePickerProps as DatePickerProps$1, FormProps, HeadingProps as HeadingProps$1, LinkProps as LinkProps$1, ModalOverlayProps, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, SeparatorProps as SeparatorProps$1, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TextProps as TextProps$1, TextFieldProps as TextFieldProps$1, TimeValue, TimeFieldProps as TimeFieldProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, SwitchProps as SwitchProps$1, TooltipProps, NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components';
-export { DialogTrigger, TooltipTrigger } from 'react-aria-components';
-import { PropsWithChildren } from 'react';
+import * as react from 'react';
+import react__default, { PropsWithChildren } from 'react';
+import { DisclosureProps, DisclosureGroupProps, DialogProps as DialogProps$1, ButtonProps as ButtonProps$1, CalendarProps, DateValue, CheckboxProps, CheckboxGroupProps as CheckboxGroupProps$1, ValidationResult, DatePickerProps as DatePickerProps$1, FormProps, HeadingProps as HeadingProps$1, LinkProps as LinkProps$1, MenuItemProps as MenuItemProps$1, MenuItemRenderProps, MenuProps as MenuProps$1, Key, PopoverProps, ModalOverlayProps, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, TagProps as TagProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, SeparatorProps as SeparatorProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TextProps as TextProps$1, TextFieldProps as TextFieldProps$1, TimeValue, TimeFieldProps as TimeFieldProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, SwitchProps as SwitchProps$1, TooltipProps, NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components';
+export { DialogTrigger, MenuSection, Header as MenuSectionHeader, MenuTrigger, SubmenuTrigger, TooltipTrigger } from 'react-aria-components';
 
 interface AccordionProps extends DisclosureProps {
     label?: string;
 }
-declare function Accordion({ label, children, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare function Accordion({ label, children, ...props }: AccordionProps): react.JSX.Element;
 
 interface AccordionGroupProps extends DisclosureGroupProps {
     title?: string;
     titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
-declare function AccordionGroup({ title, titleElement, children, ...props }: AccordionGroupProps): react_jsx_runtime.JSX.Element;
+declare function AccordionGroup({ title, titleElement, children, ...props }: AccordionGroupProps): react.JSX.Element;
 
 interface AlertBannerProps extends React.PropsWithChildren {
+    size?: "small" | "medium";
+    layout?: "fixed" | "fluid";
     variant?: "info" | "success" | "warning" | "danger" | "black";
     isIconHidden?: boolean;
     isCloseable?: boolean;
@@ -22,7 +24,7 @@ interface AlertBannerProps extends React.PropsWithChildren {
     customIcon?: React.ReactNode;
     onClose?: () => void;
 }
-declare function AlertBanner({ variant, isIconHidden, isCloseable, role, onClose, children, customIcon, ...props }: AlertBannerProps): react_jsx_runtime.JSX.Element;
+declare function AlertBanner({ variant, size, layout, isIconHidden, isCloseable, role, onClose, children, customIcon, ...props }: AlertBannerProps): react.JSX.Element;
 
 interface AlertDialogProps extends DialogProps$1 {
     variant?: "info" | "confirmation" | "warning" | "error" | "destructive";
@@ -31,7 +33,7 @@ interface AlertDialogProps extends DialogProps$1 {
     isCloseable?: boolean;
     buttons?: React.ReactNode;
 }
-declare function AlertDialog({ children, variant, role, title, isCloseable, isIconHidden, buttons, ...props }: AlertDialogProps): react_jsx_runtime.JSX.Element;
+declare function AlertDialog({ children, variant, role, title, isCloseable, isIconHidden, buttons, ...props }: AlertDialogProps): react.JSX.Element;
 
 interface ButtonProps extends ButtonProps$1 {
     /**
@@ -51,16 +53,16 @@ interface ButtonProps extends ButtonProps$1 {
      */
     isIconButton?: boolean;
 }
-declare function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): react.JSX.Element;
 
 interface ButtonGroupProps extends React.PropsWithChildren {
     orientation?: "horizontal" | "vertical";
     alignment?: "start" | "center" | "end";
     ariaLabel?: string | undefined;
 }
-declare function ButtonGroup({ orientation, alignment, ariaLabel, children, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ButtonGroup({ orientation, alignment, ariaLabel, children, ...props }: ButtonGroupProps): react.JSX.Element;
 
-declare function Calendar({ visibleDuration, ...props }: CalendarProps<DateValue>): react_jsx_runtime.JSX.Element;
+declare function Calendar({ visibleDuration, ...props }: CalendarProps<DateValue>): react.JSX.Element;
 
 interface CalloutProps extends React.PropsWithChildren {
     variant?: "lightGrey" | "lightBlue" | "lightGold" | "Blue" | "Grey" | "Black";
@@ -70,9 +72,9 @@ interface CalloutProps extends React.PropsWithChildren {
     role?: React.AriaRole | undefined;
     isLeftBorderDisabled?: boolean;
 }
-declare function Callout({ variant, title, description, buttons, role, isLeftBorderDisabled, children, ...props }: CalloutProps): react_jsx_runtime.JSX.Element;
+declare function Callout({ variant, title, description, buttons, role, isLeftBorderDisabled, children, ...props }: CalloutProps): react.JSX.Element;
 
-declare function Checkbox({ value, children, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ value, children, ...props }: CheckboxProps): react.JSX.Element;
 
 interface CheckboxGroupProps extends CheckboxGroupProps$1 {
     orientation?: "horizontal" | "vertical";
@@ -82,7 +84,7 @@ interface CheckboxGroupProps extends CheckboxGroupProps$1 {
     /** `flex-wrap` style property, defaults to `nowrap` */
     flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
 }
-declare function CheckboxGroup({ orientation, label, description, errorMessage, flexWrap, children, ...props }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function CheckboxGroup({ orientation, label, description, errorMessage, flexWrap, children, ...props }: CheckboxGroupProps): react.JSX.Element;
 
 interface DatePickerProps<T extends DateValue> extends DatePickerProps$1<T> {
     size?: "small" | "medium";
@@ -94,12 +96,12 @@ interface DatePickerProps<T extends DateValue> extends DatePickerProps$1<T> {
     isBrowserLocaleUsed?: boolean;
 }
 
-declare function DatePicker<T extends DateValue>({ size, label, description, errorMessage, showFormatHelpText, isRequired, isCalendarDisabled, isBrowserLocaleUsed, ...props }: DatePickerProps<T>): react_jsx_runtime.JSX.Element;
+declare function DatePicker<T extends DateValue>({ size, label, description, errorMessage, showFormatHelpText, isRequired, isCalendarDisabled, isBrowserLocaleUsed, ...props }: DatePickerProps<T>): react.JSX.Element;
 
 interface DialogProps extends DialogProps$1 {
     isCloseable?: boolean;
 }
-declare function Dialog({ isCloseable, role, children, ...props }: DialogProps): react_jsx_runtime.JSX.Element;
+declare function Dialog({ isCloseable, role, children, ...props }: DialogProps): react.JSX.Element;
 
 interface FooterLinksProps {
     /**
@@ -117,7 +119,7 @@ interface FooterLinksProps {
  * @param {FooterLinksProps} props
  * @returns {React.ReactElement}
  */
-declare function FooterLinks({ title, links }: FooterLinksProps): react_jsx_runtime.JSX.Element;
+declare function FooterLinks({ title, links }: FooterLinksProps): react.JSX.Element;
 interface FooterProps {
     /**
      * Land acknowledgement block (defaults to Gov.bc.ca land acknowledgement)
@@ -161,9 +163,9 @@ interface FooterProps {
  * @param {FooterProps} props
  * @returns {React.ReactElement}
  */
-declare function Footer({ children, acknowledgement, logo, contact, links, copyright, hideAcknowledgement, hideLogoAndLinks, hideCopyright, }: React.PropsWithChildren<FooterProps>): react_jsx_runtime.JSX.Element;
+declare function Footer({ children, acknowledgement, logo, contact, links, copyright, hideAcknowledgement, hideLogoAndLinks, hideCopyright, }: React.PropsWithChildren<FooterProps>): react.JSX.Element;
 
-declare function Form({ ...props }: FormProps): react_jsx_runtime.JSX.Element;
+declare function Form({ ...props }: FormProps): react.JSX.Element;
 
 interface HeaderProps {
     /**
@@ -191,13 +193,13 @@ interface HeaderProps {
      */
     titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
 }
-declare function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: PropsWithChildren<HeaderProps>): react_jsx_runtime.JSX.Element;
+declare function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: PropsWithChildren<HeaderProps>): react.JSX.Element;
 
 interface HeadingProps extends HeadingProps$1 {
     color?: "primary" | "primaryInvert" | "secondary" | "secondaryInvert" | "disabled" | "danger";
     isUnstyled?: boolean;
 }
-declare function Heading({ color, isUnstyled, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare function Heading({ color, isUnstyled, ...props }: HeadingProps): react.JSX.Element;
 
 interface InlineAlertProps extends React.PropsWithChildren {
     variant?: "info" | "success" | "warning" | "danger";
@@ -210,7 +212,7 @@ interface InlineAlertProps extends React.PropsWithChildren {
     role?: React.AriaRole | undefined;
     onClose?: () => void;
 }
-declare function InlineAlert({ variant, title, description, isIconHidden, isCloseable, role, customIcon, buttons, children, onClose, ...props }: InlineAlertProps): react_jsx_runtime.JSX.Element;
+declare function InlineAlert({ variant, title, description, isIconHidden, isCloseable, role, customIcon, buttons, children, onClose, ...props }: InlineAlertProps): react.JSX.Element;
 
 interface LinkProps extends LinkProps$1 {
     children?: React.ReactNode;
@@ -223,21 +225,51 @@ interface LinkProps extends LinkProps$1 {
     iconLeft?: React.ReactElement;
     iconRight?: React.ReactElement;
 }
-declare function Link({ children, size, danger, isButton, buttonVariant, isUnstyled, iconLeft, iconRight, ariaLabel, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
+declare function Link({ children, size, danger, isButton, buttonVariant, isUnstyled, iconLeft, iconRight, ariaLabel, ...props }: LinkProps): react.JSX.Element;
+
+interface MenuItemProps extends MenuItemProps$1 {
+    label?: string;
+    description?: string;
+    size?: "small" | "medium";
+    iconLeft?: React.ReactElement;
+    children?: React.ReactNode | ((props: MenuItemRenderProps & {
+        defaultChildren: React.ReactNode;
+    }) => React.ReactNode);
+}
+declare function MenuItem({ size, label, description, iconLeft, ...props }: MenuItemProps): react.JSX.Element;
 
-declare function Modal({ children, ...props }: ModalOverlayProps): react_jsx_runtime.JSX.Element;
+interface MenuSectionProps {
+    id: Key;
+    header?: string;
+    items: MenuItemProps[];
+}
+interface MenuProps<T extends MenuItemProps> extends MenuProps$1<T> {
+    itemSize?: "small" | "medium";
+    items?: T[];
+    sections?: MenuSectionProps[];
+    placement?: PopoverProps["placement"];
+}
+declare function Menu<T extends MenuItemProps>({ itemSize, children, items, sections, placement, ...props }: MenuProps<T>): react.JSX.Element;
+
+declare function Modal({ children, ...props }: ModalOverlayProps): react.JSX.Element;
+
+interface SubheaderProps extends react__default.HTMLAttributes<HTMLElement> {
+    size?: "small" | "medium";
+    ariaLabel?: string;
+}
+declare function Subheader({ size, ariaLabel, children, ...props }: SubheaderProps): react__default.JSX.Element;
 
 interface ProgressBarProps extends ProgressBarProps$1 {
     size?: "small" | "medium" | "large";
 }
-declare function ProgressBar({ size, valueLabel, ...props }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+declare function ProgressBar({ size, valueLabel, ...props }: ProgressBarProps): react.JSX.Element;
 
 interface ProgressCircleProps extends ProgressBarProps$1 {
     size?: "small" | "medium" | "large";
 }
-declare function ProgressCircle({ size, valueLabel, ...props }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
+declare function ProgressCircle({ size, valueLabel, ...props }: ProgressCircleProps): react.JSX.Element;
 
-declare function Radio({ value, children, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+declare function Radio({ value, children, ...props }: RadioProps): react.JSX.Element;
 
 interface RadioGroupProps extends RadioGroupProps$1 {
     children?: React.ReactNode;
@@ -248,7 +280,27 @@ interface RadioGroupProps extends RadioGroupProps$1 {
     /** `flex-wrap` style property, defaults to `nowrap` */
     flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
 }
-declare function RadioGroup({ orientation, label, description, children, errorMessage, flexWrap, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ orientation, label, description, children, errorMessage, flexWrap, ...props }: RadioGroupProps): react.JSX.Element;
+
+interface TagProps extends TagProps$1 {
+    /**
+     * Icon that appears to the left of the `textValue` field
+     */
+    icon?: React.ReactNode;
+    /**
+     * Background color
+     */
+    color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
+    /**
+     * tagStyle
+     */
+    tagStyle?: "rectangular" | "circular";
+    /**
+     * size
+     */
+    size?: "xsmall" | "small" | "medium";
+}
+declare function Tag({ color, tagStyle, size, icon, id, textValue, ...props }: TagProps): react.JSX.Element;
 
 interface ListBoxItemProps extends ListBoxItemProps$1 {
     /** Text label for the option. Provide an `id` if this is not unique. */
@@ -261,6 +313,10 @@ interface ListBoxItemProps extends ListBoxItemProps$1 {
     iconLeft?: React.ReactElement;
     /** Right icon slot */
     iconRight?: React.ReactElement;
+    /** Optional color token forwarded to selected tags */
+    color?: TagProps["color"];
+    /** Optional style token forwarded to selected tags */
+    tagStyle?: TagProps["tagStyle"];
 }
 interface SelectionSectionProps {
     id: Key;
@@ -269,7 +325,7 @@ interface SelectionSectionProps {
     /** Flat list of options within the section */
     items: ListBoxItemProps[];
 }
-interface SelectProps<T extends object> extends SelectProps$1<T> {
+interface SelectProps<T extends object, M extends "single" | "multiple" = "single"> extends SelectProps$1<T, M> {
     /** Use `items` for a flat list of options */
     items?: ListBoxItemProps[];
     /** Use `sections` for a sectioned list with `items` options in each section */
@@ -284,116 +340,104 @@ interface SelectProps<T extends object> extends SelectProps$1<T> {
     description?: string;
     /** Used for data validation and error handling */
     errorMessage?: string | ((validation: ValidationResult) => string);
+    /** Overflow behaviour */
+    overflow?: "wrap" | "scroll";
 }
-/** Select displays a collapsible list of options and allows a user to select one of them. */
-declare function Select<T extends object>({ items, sections, label, description, placeholder, size, errorMessage, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+/** Select displays a collapsible list of options and allows a user to select one or more of them. */
+declare function Select<T extends object, M extends "single" | "multiple" = "single">({ items, sections, label, description, placeholder, size, errorMessage, selectionMode, overflow, ...props }: SelectProps<T, M>): react.JSX.Element;
 
 interface SeparatorProps extends SeparatorProps$1 {
     size?: "small" | "medium" | "large";
 }
-declare function Separator({ size, ...props }: SeparatorProps): react_jsx_runtime.JSX.Element;
+declare function Separator({ size, ...props }: SeparatorProps): react.JSX.Element;
 
 declare function SvgBcLogo({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgBcOutlineIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgBetaIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgCalendarIcon({ ...props }: {
     [x: string]: any;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgCheckIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgCheckCircleIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgChevronUpIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgChevronDownIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgChevronLeftIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgChevronRightIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgDashIcon$1({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgExclamationIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgExclamationCircleIcon({ id, }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgCloseIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgInfoIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgDashIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
+
+interface SvgPlaceholderIconProps {
+    /** Width and height of the placeholder icon, defaults to 20 */
+    size?: number;
+}
+declare function SvgPlaceholderIcon({ size, ...props }: SvgPlaceholderIconProps): react.JSX.Element;
 
 declare function SvgPlusIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 declare function SvgTooltipArrowUp({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 interface SvgUpRightFromSquareIconProps {
     size?: 16 | 20;
     id?: string;
 }
-declare function SvgUpRightFromSquareIcon({ size, id, }: SvgUpRightFromSquareIconProps): react_jsx_runtime.JSX.Element;
+declare function SvgUpRightFromSquareIcon({ size, id, }: SvgUpRightFromSquareIconProps): react.JSX.Element;
 
 declare function SvgReactAriaIcon({ id }: {
     id?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
-
-interface TagProps extends TagProps$1 {
-    /**
-     * Icon that appears to the left of the `textValue` field
-     */
-    icon?: React.ReactNode;
-    /**
-     * Background color
-     */
-    color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
-    /**
-     * tagStyle
-     */
-    tagStyle?: "rectangular" | "circular";
-    /**
-     * size
-     */
-    size?: "small" | "medium";
-}
-declare function Tag({ color, tagStyle, size, icon, id, textValue, }: TagProps): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 interface TagGroupProps extends TagGroupProps$1 {
     /**
@@ -409,7 +453,7 @@ interface TagGroupProps extends TagGroupProps$1 {
      */
     errorMessage?: string;
 }
-declare function TagGroup({ children, label, description, errorMessage, ...props }: TagGroupProps): react_jsx_runtime.JSX.Element;
+declare function TagGroup({ children, label, description, errorMessage, ...props }: TagGroupProps): react.JSX.Element;
 
 interface TagListProps<T> extends Pick<TagListProps$1<T>, "children" | "renderEmptyState"> {
     items: TagProps[];
@@ -418,21 +462,21 @@ interface TagListProps<T> extends Pick<TagListProps$1<T>, "children" | "renderEm
      */
     orientation?: "horizontal" | "vertical";
 }
-declare function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>): react_jsx_runtime.JSX.Element;
+declare function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>): react.JSX.Element;
 
 interface TextProps extends TextProps$1 {
     size?: "small" | "medium" | "large";
     color?: "primary" | "primaryInvert" | "secondary" | "secondaryInvert" | "disabled" | "danger";
     isUnstyled?: boolean;
 }
-declare function Text({ elementType, size, color, isUnstyled, ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare function Text({ elementType, size, color, isUnstyled, ...props }: TextProps): react.JSX.Element;
 
 interface TextAreaProps extends TextFieldProps$1 {
     label?: string;
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
 }
-declare function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
+declare function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }: TextAreaProps): react.JSX.Element;
 
 interface TextFieldProps extends TextFieldProps$1 {
     size?: "medium" | "small";
@@ -442,7 +486,7 @@ interface TextFieldProps extends TextFieldProps$1 {
     iconLeft?: React.ReactElement;
     iconRight?: React.ReactElement;
 }
-declare function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }: TextFieldProps): react.JSX.Element;
 
 interface TimeFieldProps<T extends TimeValue> extends TimeFieldProps$1<T> {
     size?: "medium" | "small";
@@ -450,26 +494,26 @@ interface TimeFieldProps<T extends TimeValue> extends TimeFieldProps$1<T> {
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
 }
-declare function TimeField<T extends TimeValue>({ size, label, description, errorMessage, isRequired, ...props }: TimeFieldProps<T>): react_jsx_runtime.JSX.Element;
+declare function TimeField<T extends TimeValue>({ size, label, description, errorMessage, isRequired, ...props }: TimeFieldProps<T>): react.JSX.Element;
 
 interface ToggleButtonProps extends ToggleButtonProps$1 {
     size?: "small" | "medium";
     isIconButton?: boolean;
 }
-declare function ToggleButton({ size, children, isIconButton, ...props }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
+declare function ToggleButton({ size, children, isIconButton, ...props }: ToggleButtonProps): react.JSX.Element;
 
 interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {
     label?: string;
     size?: "small" | "medium";
 }
-declare function ToggleButtonGroup({ label, size, children, ...props }: ToggleButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ToggleButtonGroup({ label, size, children, ...props }: ToggleButtonGroupProps): react.JSX.Element;
 
 interface SwitchProps extends SwitchProps$1 {
     labelPosition?: "left" | "right";
 }
-declare function Switch({ labelPosition, children, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ labelPosition, children, ...props }: SwitchProps): react.JSX.Element;
 
-declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip(props: TooltipProps): react.JSX.Element;
 
 interface NumberFieldProps extends NumberFieldProps$1 {
     size?: "small" | "medium";
@@ -477,6 +521,6 @@ interface NumberFieldProps extends NumberFieldProps$1 {
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
 }
-declare function NumberField({ size, label, description, errorMessage, ...props }: NumberFieldProps): react_jsx_runtime.JSX.Element;
+declare function NumberField({ size, label, description, errorMessage, ...props }: NumberFieldProps): react.JSX.Element;
 
-export { Accordion, AccordionGroup, AlertBanner, AlertDialog, Button, ButtonGroup, Calendar, Callout, Checkbox, CheckboxGroup, DatePicker, Dialog, Footer, FooterLinks, Form, Header, Heading, InlineAlert, Link, Modal, NumberField, ProgressBar, ProgressCircle, Radio, RadioGroup, Select, Separator, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCalendarIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronLeftIcon, SvgChevronRightIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon$1 as SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgDashIcon as SvgMinusIcon, SvgPlusIcon, SvgReactAriaIcon, SvgTooltipArrowUp, SvgUpRightFromSquareIcon, Switch, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Tooltip };
+export { Accordion, AccordionGroup, AlertBanner, AlertDialog, Button, ButtonGroup, Calendar, Callout, Checkbox, CheckboxGroup, DatePicker, Dialog, Footer, FooterLinks, Form, Header, Heading, InlineAlert, Link, Menu, MenuItem, Modal, NumberField, ProgressBar, ProgressCircle, Radio, RadioGroup, Select, Separator, Subheader, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCalendarIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronLeftIcon, SvgChevronRightIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon$1 as SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgDashIcon as SvgMinusIcon, SvgPlaceholderIcon, SvgPlusIcon, SvgReactAriaIcon, SvgTooltipArrowUp, SvgUpRightFromSquareIcon, Switch, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bcgov/design-system.git",
@@ -42,8 +42,10 @@
     "dist/cjs"
   ],
   "dependencies": {
-    "@bcgov/design-tokens": "3.2.0",
-    "react-aria-components": "1.16.0"
+    "@bcgov/design-tokens": "5.0.0",
+    "@react-aria/datepicker": "3.17.1",
+    "@react-aria/i18n": "3.13.1",
+    "react-aria-components": "1.17.0"
   },
   "peerDependencies": {
     "@bcgov/bc-sans": "^2.1.0",
@@ -51,48 +53,56 @@
     "react-dom": "^16.14.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@react-stately/data": "3.15.0",
-    "@rollup/plugin-commonjs": "29.0.0",
+    "@eslint/js": "10.0.1",
+    "@figma/code-connect": "1.4.8",
+    "@react-stately/data": "3.16.1",
+    "@rollup/plugin-commonjs": "29.0.3",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
-    "@storybook/addon-a11y": "10.3.3",
-    "@storybook/addon-docs": "10.3.3",
-    "@storybook/addon-links": "10.3.3",
-    "@storybook/addon-vitest": "10.3.3",
-    "@storybook/react-vite": "10.3.3",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/addon-vitest": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.1",
-    "@types/react": "19.2.7",
+    "@testing-library/react": "16.3.2",
+    "@types/node": "25.9.3",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@typescript-eslint/eslint-plugin": "8.50.1",
-    "@typescript-eslint/parser": "8.50.1",
-    "@vitejs/plugin-react": "5.1.2",
-    "@vitest/browser-playwright": "4.0.14",
-    "@vitest/coverage-v8": "4.0.14",
+    "@typescript-eslint/eslint-plugin": "8.61.0",
+    "@typescript-eslint/parser": "8.61.0",
+    "@vitejs/plugin-react": "6.0.2",
+    "@vitest/browser-playwright": "4.1.9",
+    "@vitest/coverage-v8": "4.1.9",
     "axe-playwright": "2.2.2",
-    "eslint": "9.39.2",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.3.3",
-    "globals": "16.5.0",
-    "jsdom": "27.4.0",
-    "playwright": "1.57.0",
-    "prettier": "3.8.1",
-    "rollup": "4.60.1",
+    "eslint": "10.5.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-plugin-react-refresh": "0.5.3",
+    "eslint-plugin-storybook": "10.4.6",
+    "globals": "17.6.0",
+    "jsdom": "29.1.1",
+    "playwright": "1.61.0",
+    "prettier": "3.8.4",
+    "rollup": "4.62.0",
     "rollup-plugin-dts": "6.4.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "10.3.3",
+    "storybook": "10.4.6",
     "tslib": "2.8.1",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.50.1",
-    "vite": "7.3.0",
-    "vitest": "4.0.14"
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.61.0",
+    "vite": "8.0.16",
+    "vitest": "4.1.9"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "*"
   },
+  "overrides": {
+    "eslint-plugin-react-hooks": {
+      "zod-validation-error": "^4.0.0"
+    }
+  },
   "author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
   "license": "Apache-2.0",
   "bugs": {