@loadsmart/miranda-react 3.0.0-beta.60 → 3.0.0-beta.62

package/dist/components/Accordion/AccordionTitle.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { AccordionTitle as WCAccordionTitle } from '@loadsmart/miranda-wc';
 declare global {
@@ -12,5 +12,5 @@ declare const WiredAccordionTitle: import('@lit/react').ReactWebComponent<WCAcco
 export type AccordionTitleProps = Omit<ComponentProps<typeof WiredAccordionTitle>, 'slot'> & {
     leading?: ReactNode;
 };
-export declare const AccordionTitle: import('react').ForwardRefExoticComponent<Omit<AccordionTitleProps, "ref"> & import('react').RefAttributes<WCAccordionTitle>>;
+export declare const AccordionTitle: React.ForwardRefExoticComponent<Omit<AccordionTitleProps, "ref"> & React.RefAttributes<WCAccordionTitle>>;
 export {};

package/dist/components/Banner/BannerActionPrimary.d.ts

@@ -1,6 +1,6 @@
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { BannerActionPrimary as WCBannerActionPrimary } from '@loadsmart/miranda-wc';
-import { ComponentProps, ReactNode } from 'react';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -13,5 +13,5 @@ export type BannerActionPrimaryProps = ComponentProps<typeof WiredBannerActionPr
     leading?: ReactNode;
     trailing?: ReactNode;
 };
-export declare const BannerActionPrimary: import('react').ForwardRefExoticComponent<Omit<BannerActionPrimaryProps, "ref"> & import('react').RefAttributes<WCBannerActionPrimary>>;
+export declare const BannerActionPrimary: React.ForwardRefExoticComponent<Omit<BannerActionPrimaryProps, "ref"> & React.RefAttributes<WCBannerActionPrimary>>;
 export {};

package/dist/components/Banner/BannerActionSecondary.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { BannerActionSecondary as WCBannerActionSecondary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export type BannerActionSecondaryProps = ComponentProps<typeof WiredBannerAction
     leading?: ReactNode;
     trailing?: ReactNode;
 };
-export declare const BannerActionSecondary: import('react').ForwardRefExoticComponent<Omit<BannerActionSecondaryProps, "ref"> & import('react').RefAttributes<WCBannerActionSecondary>>;
+export declare const BannerActionSecondary: React.ForwardRefExoticComponent<Omit<BannerActionSecondaryProps, "ref"> & React.RefAttributes<WCBannerActionSecondary>>;
 export {};

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { Button as WCButton } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface ButtonProps extends ComponentProps<typeof WiredButton> {
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<WCButton>>;
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<WCButton>>;
 export default Button;

package/dist/components/Card/CardActionPrimary.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { CardActionPrimary as WCCardActionPrimary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface CardActionPrimaryProps extends ComponentProps<typeof WiredCardA
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const CardActionPrimary: import('react').ForwardRefExoticComponent<Omit<CardActionPrimaryProps, "ref"> & import('react').RefAttributes<WCCardActionPrimary>>;
+export declare const CardActionPrimary: React.ForwardRefExoticComponent<Omit<CardActionPrimaryProps, "ref"> & React.RefAttributes<WCCardActionPrimary>>;
 export {};

package/dist/components/Card/CardActionSecondary.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { CardActionSecondary as WCCardActionSecondary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface CardActionSecondaryProps extends ComponentProps<typeof WiredCar
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const CardActionSecondary: import('react').ForwardRefExoticComponent<Omit<CardActionSecondaryProps, "ref"> & import('react').RefAttributes<WCCardActionSecondary>>;
+export declare const CardActionSecondary: React.ForwardRefExoticComponent<Omit<CardActionSecondaryProps, "ref"> & React.RefAttributes<WCCardActionSecondary>>;
 export {};

package/dist/components/Card/CardActionTertiary.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { CardActionTertiary as WCCardActionTertiary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface CardActionTertiaryProps extends ComponentProps<typeof WiredCard
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const CardActionTertiary: import('react').ForwardRefExoticComponent<Omit<CardActionTertiaryProps, "ref"> & import('react').RefAttributes<WCCardActionTertiary>>;
+export declare const CardActionTertiary: React.ForwardRefExoticComponent<Omit<CardActionTertiaryProps, "ref"> & React.RefAttributes<WCCardActionTertiary>>;
 export {};

package/dist/components/Card/CardTitle.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { CardTitle as WCCardTitle } from '@loadsmart/miranda-wc';
 declare global {
@@ -12,5 +12,5 @@ declare const WiredCardTitle: import('@lit/react').ReactWebComponent<WCCardTitle
 export type CardTitleProps = Omit<ComponentProps<typeof WiredCardTitle>, 'slot'> & {
     leading?: ReactNode;
 };
-export declare const CardTitle: import('react').ForwardRefExoticComponent<Omit<CardTitleProps, "ref"> & import('react').RefAttributes<WCCardTitle>>;
+export declare const CardTitle: React.ForwardRefExoticComponent<Omit<CardTitleProps, "ref"> & React.RefAttributes<WCCardTitle>>;
 export {};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { Checkbox as WCCheckbox } from '@loadsmart/miranda-wc';
 import { EventName, WebComponentProps } from '@lit/react';
-import { ReactNode, ComponentProps } from 'react';
 import { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
@@ -15,5 +15,5 @@ declare const WiredCheckbox: import('@lit/react').ReactWebComponent<WCCheckbox,
 export type CheckboxProps = ComponentProps<typeof WiredCheckbox> & {
     leading?: ReactNode;
 };
-declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<WCCheckbox>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<WCCheckbox>>;
 export default Checkbox;

package/dist/components/Dialog/DialogActionPrimary.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { DialogActionPrimary as WCDialogActionPrimary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface DialogActionPrimaryProps extends ComponentProps<typeof WiredDia
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const DialogActionPrimary: import('react').ForwardRefExoticComponent<Omit<DialogActionPrimaryProps, "ref"> & import('react').RefAttributes<WCDialogActionPrimary>>;
+export declare const DialogActionPrimary: React.ForwardRefExoticComponent<Omit<DialogActionPrimaryProps, "ref"> & React.RefAttributes<WCDialogActionPrimary>>;
 export {};

package/dist/components/Dialog/DialogActionSecondary.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { DialogActionSecondary as WCDialogActionSecondary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface DialogActionSecondaryProps extends ComponentProps<typeof WiredD
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const DialogActionSecondary: import('react').ForwardRefExoticComponent<Omit<DialogActionSecondaryProps, "ref"> & import('react').RefAttributes<WCDialogActionSecondary>>;
+export declare const DialogActionSecondary: React.ForwardRefExoticComponent<Omit<DialogActionSecondaryProps, "ref"> & React.RefAttributes<WCDialogActionSecondary>>;
 export {};

package/dist/components/Dialog/DialogActionTertiary.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { DialogActionTertiary as WCDialogActionTertiary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface DialogActionTertiaryProps extends ComponentProps<typeof WiredDi
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const DialogActionTertiary: import('react').ForwardRefExoticComponent<Omit<DialogActionTertiaryProps, "ref"> & import('react').RefAttributes<WCDialogActionTertiary>>;
+export declare const DialogActionTertiary: React.ForwardRefExoticComponent<Omit<DialogActionTertiaryProps, "ref"> & React.RefAttributes<WCDialogActionTertiary>>;
 export {};

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

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { DrawerActionPrimary as WCDrawerActionPrimary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface DrawerActionPrimaryProps extends ComponentProps<typeof WiredDra
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const DrawerActionPrimary: import('react').ForwardRefExoticComponent<Omit<DrawerActionPrimaryProps, "ref"> & import('react').RefAttributes<WCDrawerActionPrimary>>;
+export declare const DrawerActionPrimary: React.ForwardRefExoticComponent<Omit<DrawerActionPrimaryProps, "ref"> & React.RefAttributes<WCDrawerActionPrimary>>;
 export {};

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

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { DrawerActionSecondary as WCDrawerActionSecondary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface DrawerActionSecondaryProps extends ComponentProps<typeof WiredD
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const DrawerActionSecondary: import('react').ForwardRefExoticComponent<Omit<DrawerActionSecondaryProps, "ref"> & import('react').RefAttributes<WCDrawerActionSecondary>>;
+export declare const DrawerActionSecondary: React.ForwardRefExoticComponent<Omit<DrawerActionSecondaryProps, "ref"> & React.RefAttributes<WCDrawerActionSecondary>>;
 export {};

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

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { DrawerActionTertiary as WCDrawerActionTertiary } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface DrawerActionTertiaryProps extends ComponentProps<typeof WiredDr
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const DrawerActionTertiary: import('react').ForwardRefExoticComponent<Omit<DrawerActionTertiaryProps, "ref"> & import('react').RefAttributes<WCDrawerActionTertiary>>;
+export declare const DrawerActionTertiary: React.ForwardRefExoticComponent<Omit<DrawerActionTertiaryProps, "ref"> & React.RefAttributes<WCDrawerActionTertiary>>;
 export {};

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

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { DropdownItem as WCDropdownItem } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,4 +13,4 @@ export interface DropdownItemProps extends ComponentProps<typeof WiredDropdownIt
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const DropdownItem: import('react').ForwardRefExoticComponent<Omit<DropdownItemProps, "ref"> & import('react').RefAttributes<WCDropdownItem>>;
+export declare const DropdownItem: React.ForwardRefExoticComponent<Omit<DropdownItemProps, "ref"> & React.RefAttributes<WCDropdownItem>>;

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

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { DropdownTrigger as WCDropdownTrigger } from '@loadsmart/miranda-wc';
 declare global {
@@ -12,4 +12,4 @@ export declare const WiredDropdownTrigger: import('@lit/react').ReactWebComponen
 export interface DropdownTriggerProps extends ComponentProps<typeof WiredDropdownTrigger> {
     leading?: ReactNode;
 }
-export declare const DropdownTrigger: import('react').ForwardRefExoticComponent<Omit<DropdownTriggerProps, "ref"> & import('react').RefAttributes<WCDropdownTrigger>>;
+export declare const DropdownTrigger: React.ForwardRefExoticComponent<Omit<DropdownTriggerProps, "ref"> & React.RefAttributes<WCDropdownTrigger>>;

package/dist/components/EmptyState/EmptyStateAction.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { EmptyStateAction as WCEmptyStateAction } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,5 +13,5 @@ export interface EmptyStateActionProps extends ComponentProps<typeof WiredEmptyS
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const EmptyStateAction: import('react').ForwardRefExoticComponent<Omit<EmptyStateActionProps, "ref"> & import('react').RefAttributes<WCEmptyStateAction>>;
+export declare const EmptyStateAction: React.ForwardRefExoticComponent<Omit<EmptyStateActionProps, "ref"> & React.RefAttributes<WCEmptyStateAction>>;
 export {};

package/dist/components/Field/FieldHint.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { FieldHint as WCFieldHint } from '@loadsmart/miranda-wc';
 declare global {
@@ -12,5 +12,5 @@ declare const WiredFieldHint: import('@lit/react').ReactWebComponent<WCFieldHint
 export interface FieldHintProps extends Omit<ComponentProps<typeof WiredFieldHint>, 'slot'> {
     leading?: ReactNode;
 }
-export declare const FieldHint: import('react').ForwardRefExoticComponent<Omit<FieldHintProps, "ref"> & import('react').RefAttributes<WCFieldHint>>;
+export declare const FieldHint: React.ForwardRefExoticComponent<Omit<FieldHintProps, "ref"> & React.RefAttributes<WCFieldHint>>;
 export {};

package/dist/components/LabeledValue/LabeledValue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { LabeledValue as WCLabeledValue, LabeledValueLabel as WCLabeledValueLabel, LabeledValueValue as WCLabeledValueValue } from '@loadsmart/miranda-wc';
 declare global {
@@ -18,7 +18,7 @@ export type LabeledValueProps = Omit<ComponentProps<typeof WiredLabeledValue>, '
     label?: ReactNode;
     value?: ReactNode;
 };
-export declare const LabeledValue: import('react').ForwardRefExoticComponent<Omit<LabeledValueProps, "ref"> & import('react').RefAttributes<WCLabeledValue>> & {
+export declare const LabeledValue: React.ForwardRefExoticComponent<Omit<LabeledValueProps, "ref"> & React.RefAttributes<WCLabeledValue>> & {
     Label: import('@lit/react').ReactWebComponent<WCLabeledValueLabel, {}>;
     Value: import('@lit/react').ReactWebComponent<WCLabeledValueValue, {}>;
 };

package/dist/components/Layout/Sidebar.d.ts

@@ -1,6 +1,6 @@
+import { default as React, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { Box as WCBox, Sidebar as WCSidebar } from '@loadsmart/miranda-wc';
-import { ComponentProps } from 'react';
 import { BoxProps } from './Box';
 declare global {
     namespace JSX {
@@ -12,8 +12,8 @@ declare global {
 export type SidebarSideProps = Omit<BoxProps, 'slot'>;
 export type SidebarContentProps = Omit<BoxProps, 'slot'>;
 declare const Sidebar: import('@lit/react').ReactWebComponent<WCSidebar, {}> & {
-    Side: import('react').ForwardRefExoticComponent<Omit<SidebarSideProps, "ref"> & import('react').RefAttributes<WCBox>>;
-    Content: import('react').ForwardRefExoticComponent<Omit<SidebarContentProps, "ref"> & import('react').RefAttributes<WCBox>>;
+    Side: React.ForwardRefExoticComponent<Omit<SidebarSideProps, "ref"> & React.RefAttributes<WCBox>>;
+    Content: React.ForwardRefExoticComponent<Omit<SidebarContentProps, "ref"> & React.RefAttributes<WCBox>>;
 };
 export type SidebarProps = ComponentProps<typeof Sidebar>;
 export default Sidebar;

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

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { Radio as WCRadio } from '@loadsmart/miranda-wc';
 declare global {
@@ -12,5 +12,5 @@ declare const WiredRadio: import('@lit/react').ReactWebComponent<WCRadio, {}>;
 export type RadioProps = ComponentProps<typeof WiredRadio> & {
     leading?: ReactNode;
 };
-declare const Radio: import('react').ForwardRefExoticComponent<Omit<RadioProps, "ref"> & import('react').RefAttributes<WCRadio>>;
+declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<WCRadio>>;
 export default Radio;

package/dist/components/Section/SectionTitle.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { SectionTitle as WCSectionTitle } from '@loadsmart/miranda-wc';
 declare global {
@@ -12,5 +12,5 @@ declare const WiredSectionTitle: import('@lit/react').ReactWebComponent<WCSectio
 export type SectionTitleProps = Omit<ComponentProps<typeof WiredSectionTitle>, 'slot'> & {
     leading?: ReactNode;
 };
-export declare const SectionTitle: import('react').ForwardRefExoticComponent<Omit<SectionTitleProps, "ref"> & import('react').RefAttributes<WCSectionTitle>>;
+export declare const SectionTitle: React.ForwardRefExoticComponent<Omit<SectionTitleProps, "ref"> & React.RefAttributes<WCSectionTitle>>;
 export {};

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,7 @@
-import { Select as WCSelect } from '@loadsmart/miranda-wc';
+import { default as React, ReactNode } from 'react';
+import { Select as WCSelect, SelectionType } from '@loadsmart/miranda-wc';
 import { EventName, WebComponentProps } from '@lit/react';
-import { ReactNode, ComponentProps } from 'react';
+import { SelectionProps } from 'utils/SelectionProps';
 import { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
@@ -14,18 +15,16 @@ declare const WiredSelect: import('@lit/react').ReactWebComponent<WCSelect, {
     onCollapse: EventName<CustomEvent>;
     onChange: EventName<MirandaChangeEvent<WCSelect>>;
 }>;
-export type SelectOption = {
-    value: string;
+export interface SelectOption<TValue extends string = string> {
+    value: TValue;
     label?: string;
     leading?: ReactNode;
     trailing?: ReactNode;
     disabled?: boolean;
-};
-export type SelectProps = ComponentProps<typeof WiredSelect> & {
-    options?: SelectOption[];
-};
-export declare function Select(props: SelectProps): import("react/jsx-dev-runtime").JSX.Element;
+}
+export type SelectProps<TSelectionType extends SelectionType = SelectionType, OptionValue extends string = string> = SelectionProps<typeof WiredSelect, TSelectionType, OptionValue, SelectOption<OptionValue>>;
+export declare function Select<TSelectionType extends SelectionType = SelectionType, OptionValue extends string = string>(props: SelectProps<TSelectionType, OptionValue>): React.JSX.Element;
 export declare namespace Select {
-    var Option: import("react").ForwardRefExoticComponent<Omit<import("./SelectOption").SelectOptionProps, "ref"> & import("react").RefAttributes<import("@loadsmart/miranda-wc").SelectOption>>;
+    var Option: React.ForwardRefExoticComponent<Omit<import("./SelectOption").SelectOptionProps, "ref"> & React.RefAttributes<import("@loadsmart/miranda-wc").SelectOption>>;
 }
 export {};

package/dist/components/Select/SelectOption.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { SelectOption as WCSelectOption } from '@loadsmart/miranda-wc';
 declare global {
@@ -13,4 +13,4 @@ export interface SelectOptionProps extends Omit<ComponentProps<typeof WiredSelec
     leading?: ReactNode;
     trailing?: ReactNode;
 }
-export declare const SelectOption: import('react').ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & import('react').RefAttributes<WCSelectOption>>;
+export declare const SelectOption: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<WCSelectOption>>;

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

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { default as React, ComponentProps, ReactNode } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { Tab as WCTab } from '@loadsmart/miranda-wc';
 declare global {
@@ -12,5 +12,5 @@ declare const WiredTab: import('@lit/react').ReactWebComponent<WCTab, {}>;
 export interface TabProps extends ComponentProps<typeof WiredTab> {
     leading?: ReactNode;
 }
-declare const Tab: import('react').ForwardRefExoticComponent<Omit<TabProps, "ref"> & import('react').RefAttributes<WCTab>>;
+declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<WCTab>>;
 export default Tab;

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

@@ -1,6 +1,6 @@
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { ActionableTag as WCActionableTag } from '@loadsmart/miranda-wc';
 import { EventName, WebComponentProps } from '@lit/react';
-import { ReactNode, ComponentProps } from 'react';
 import { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
@@ -16,5 +16,5 @@ declare const WiredActionableTag: import('@lit/react').ReactWebComponent<WCActio
 export type ActionableTagProps = ComponentProps<typeof WiredActionableTag> & {
     leading?: ReactNode;
 };
-declare const ActionableTag: import('react').ForwardRefExoticComponent<Omit<ActionableTagProps, "ref"> & import('react').RefAttributes<WCActionableTag>>;
+declare const ActionableTag: React.ForwardRefExoticComponent<Omit<ActionableTagProps, "ref"> & React.RefAttributes<WCActionableTag>>;
 export default ActionableTag;

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

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { Tag as WCTag } from '@loadsmart/miranda-wc';
 declare global {
@@ -12,5 +12,5 @@ declare const WiredTag: import('@lit/react').ReactWebComponent<WCTag, {}>;
 export type TagProps = ComponentProps<typeof WiredTag> & {
     leading?: ReactNode;
 };
-declare const Tag: import('react').ForwardRefExoticComponent<Omit<TagProps, "ref"> & import('react').RefAttributes<WCTag>>;
+declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps, "ref"> & React.RefAttributes<WCTag>>;
 export default Tag;

package/dist/components/TextArea/TextArea.d.ts

@@ -1,5 +1,5 @@
+import { default as React, ComponentProps } from 'react';
 import { TextArea as WCTextArea, TextAreaProps as WCTextAreaProps } from '@loadsmart/miranda-wc';
-import { ComponentProps } from 'react';
 import { EventName, WebComponentProps } from '@lit/react';
 import { MirandaChangeEvent } from '../../utils/types';
 declare global {
@@ -14,5 +14,5 @@ declare const WiredTextArea: import('@lit/react').ReactWebComponent<WCTextArea,
     onChange: EventName<MirandaChangeEvent<WCTextArea>>;
 }>;
 export type TextAreaProps = ComponentProps<typeof WiredTextArea>;
-declare function TextArea(props: TextAreaProps): import("react/jsx-dev-runtime").JSX.Element;
+declare function TextArea(props: TextAreaProps): React.JSX.Element;
 export default TextArea;

package/dist/components/TextField/TextField.d.ts

@@ -1,6 +1,6 @@
+import { default as React, ReactNode, ComponentProps, InputHTMLAttributes } from 'react';
 import { TextField as WCTextField } from '@loadsmart/miranda-wc';
 import { EventName, WebComponentProps } from '@lit/react';
-import { ReactNode, ComponentProps, InputHTMLAttributes } from 'react';
 import { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
@@ -19,5 +19,5 @@ export type TextFieldProps = Omit<ComponentProps<typeof WiredTextField>, 'value'
     leading?: ReactNode;
     trailing?: ReactNode;
 };
-declare const TextField: import('react').ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & import('react').RefAttributes<WCTextField>>;
+declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<WCTextField>>;
 export default TextField;

package/dist/components/ToggleGroup/Toggle.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentProps } from 'react';
+import { default as React, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 import { Toggle as WCToggle } from '@loadsmart/miranda-wc';
 declare global {
@@ -12,5 +12,5 @@ declare const WiredToggle: import('@lit/react').ReactWebComponent<WCToggle, {}>;
 export type ToggleProps = ComponentProps<typeof WiredToggle> & {
     leading?: ReactNode;
 };
-declare const Toggle: import('react').ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & import('react').RefAttributes<WCToggle>>;
+declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<WCToggle>>;
 export default Toggle;

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -1,6 +1,7 @@
-import { ToggleGroup as WCToggleGroup, SelectionType, SelectionValue } from '@loadsmart/miranda-wc';
+import { default as React, ReactNode } from 'react';
+import { ToggleGroup as WCToggleGroup, SelectionType } from '@loadsmart/miranda-wc';
 import { EventName, WebComponentProps } from '@lit/react';
-import { ReactNode, ComponentProps } from 'react';
+import { SelectionProps } from 'utils/SelectionProps';
 import { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
@@ -18,34 +19,9 @@ export type ToggleGroupOption<TValue extends string> = {
     leading?: ReactNode;
     disabled?: boolean;
 };
-type SingleProps<OptionValue extends string, TValue = OptionValue | null> = {
-    type?: 'single';
-    value?: TValue;
-    onChange?: OnChangeEvent<TValue>;
-};
-type SingleStrictProps<OptionValue extends string, TValue = OptionValue> = {
-    type?: 'single-strict';
-    value?: TValue;
-    onChange?: OnChangeEvent<TValue>;
-};
-type MultipleProps<OptionValue extends string, TValue = Array<OptionValue> | ReadonlyArray<OptionValue> | null> = {
-    type?: 'multiple';
-    value?: TValue;
-    onChange?: OnChangeEvent<Extract<TValue, ReadonlyArray<OptionValue>>>;
-};
-export type OnChangeEvent<T> = (event: MirandaChangeEvent<Omit<WCToggleGroup, 'value'> & {
-    value: T;
-}>) => void;
-export type ToggleGroupProps<TSelectionType extends SelectionType = SelectionType, OptionValue extends string = string, TOptions extends ReadonlyArray<ToggleGroupOption<string>> = ReadonlyArray<ToggleGroupOption<OptionValue>>> = Omit<ComponentProps<typeof WiredToggleGroup>, 'type' | 'value' | 'onChange'> & {
-    type?: TSelectionType;
-    options?: TOptions;
-} & (TSelectionType extends 'single' ? SingleProps<OptionValue> : TSelectionType extends 'single-strict' ? SingleStrictProps<OptionValue> : TSelectionType extends 'multiple' ? MultipleProps<OptionValue> : {
-    type?: TSelectionType;
-    value?: SelectionValue<OptionValue>;
-    onChange?: OnChangeEvent<OptionValue>;
-});
-declare function ToggleGroup<TSelectionType extends SelectionType = SelectionType, OptionValue extends string = string>({ options, children, onChange, ...rest }: ToggleGroupProps<TSelectionType, OptionValue>): import("react/jsx-dev-runtime").JSX.Element;
+export type ToggleGroupProps<TSelectionType extends SelectionType = SelectionType, OptionValue extends string = string> = SelectionProps<typeof WiredToggleGroup, TSelectionType, OptionValue, ToggleGroupOption<OptionValue>>;
+declare function ToggleGroup<TSelectionType extends SelectionType = SelectionType, OptionValue extends string = string>({ options, children, onChange, ...rest }: ToggleGroupProps<TSelectionType, OptionValue>): React.JSX.Element;
 declare namespace ToggleGroup {
-    var Toggle: import("react").ForwardRefExoticComponent<Omit<import("./Toggle").ToggleProps, "ref"> & import("react").RefAttributes<import("@loadsmart/miranda-wc").Toggle>>;
+    var Toggle: React.ForwardRefExoticComponent<Omit<import("./Toggle").ToggleProps, "ref"> & React.RefAttributes<import("@loadsmart/miranda-wc").Toggle>>;
 }
 export default ToggleGroup;

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

@@ -1,5 +1,5 @@
+import { default as React, ReactElement, ReactNode, ComponentProps } from 'react';
 import { Tooltip as WCTooltip, TooltipPlacement, TooltipTrigger } from '@loadsmart/miranda-wc';
-import { ReactElement, ReactNode, ComponentProps } from 'react';
 import { WebComponentProps } from '@lit/react';
 declare global {
     namespace JSX {
@@ -19,5 +19,5 @@ export type TooltipProps = ComponentProps<typeof WiredTooltip> & {
  * **Warning**: This component will throw if the provided `children` is not a single child,
  * and will not render if the children is not valid or is a fragment.
  */
-export declare function Tooltip(props: TooltipProps): import("react/jsx-dev-runtime").JSX.Element | null;
+export declare function Tooltip(props: TooltipProps): React.JSX.Element | null;
 export type { TooltipPlacement, TooltipTrigger };

package/dist/index.d.ts

@@ -80,6 +80,7 @@ export { Radio as WCRadio, RadioGroup as WCRadioGroup, } from '@loadsmart/mirand
 export type { RadioProps as WCRadioProps, RadioGroupProps as WCRadioGroupProps, RadioGroupOrientation, } from '@loadsmart/miranda-wc';
 export { Section as WCSection, SectionTitle as WCSectionTitle, } from '@loadsmart/miranda-wc';
 export type { SectionProps as WCSectionProps } from '@loadsmart/miranda-wc';
+export { Select as WCSelect, SelectOption as WCSelectOption, } from '@loadsmart/miranda-wc';
 export { SpinnerWheel as WCSpinnerWheel } from '@loadsmart/miranda-wc';
 export type { SpinnerWheelProps as WCSpinnerWheelProps } from '@loadsmart/miranda-wc';
 export { Step as WCStep, Steps as WCSteps } from '@loadsmart/miranda-wc';

package/dist/index.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { forwardRef, useState, useCallback, Children, isValidElement, cloneElement } from "react";
 import { AccordionTitle as AccordionTitle$1, AccordionContent as AccordionContent$1, Accordion as Accordion$1, Badge as Badge$1, BannerActionPrimary as BannerActionPrimary$1, BannerActions as BannerActions$1, BannerActionSecondary as BannerActionSecondary$1, BannerDescription as BannerDescription$1, BannerIcon as BannerIcon$1, BannerTitle as BannerTitle$1, Banner as Banner$1, Button as Button$1, CardTitle as CardTitle$1, CardSubtitle as CardSubtitle$1, CardBody as CardBody$1, CardDivider as CardDivider$1, CardActionPrimary as CardActionPrimary$1, CardActionSecondary as CardActionSecondary$1, CardActionTertiary as CardActionTertiary$1, CardFooter as CardFooter$1, Card as Card$1, Checkbox as Checkbox$1, DialogActionPrimary as DialogActionPrimary$1, DialogActionSecondary as DialogActionSecondary$1, DialogActionTertiary as DialogActionTertiary$1, DialogActions as DialogActions$1, DialogBody as DialogBody$1, DialogClose as DialogClose$1, DialogFooter as DialogFooter$1, DialogHeader as DialogHeader$1, Dialog as Dialog$1, Divider as Divider$1, DrawerActionPrimary as DrawerActionPrimary$1, DrawerActionSecondary as DrawerActionSecondary$1, DrawerActionTertiary as DrawerActionTertiary$1, DrawerActions as DrawerActions$1, DrawerBody as DrawerBody$1, DrawerClose as DrawerClose$1, DrawerHeader as DrawerHeader$1, Drawer as Drawer$1, DropdownItem as DropdownItem$1, DropdownMenu as DropdownMenu$1, DropdownTrigger as DropdownTrigger$1, Dropdown as Dropdown$1, EmptyStateIllustration as EmptyStateIllustration$1, EmptyStateHeader as EmptyStateHeader$1, EmptyStateMessage as EmptyStateMessage$1, EmptyStateAction as EmptyStateAction$1, EmptyState as EmptyState$1, FieldLabel as FieldLabel$1, FieldHint as FieldHint$1, Field as Field$1, HeaderActions as HeaderActions$1, HeaderContent as HeaderContent$1, HeaderTitle as HeaderTitle$1, SubHeader as SubHeader$1, BackButton, HeaderTabs as HeaderTabs$1, Header as Header$1, Icon as Icon$1, LabeledValueLabel as LabeledValueLabel$1, LabeledValueValue as LabeledValueValue$1, LabeledValue as LabeledValue$1, Box as Box$1, Group as Group$1, Stack as Stack$1, Grid as Grid$1, Sidebar as Sidebar$1, Switcher as Switcher$1, Container as Container$1, Row as Row$1, Column as Column$1, Link as Link$1, Body as Body$1, PageContent as PageContent$1, Pagination as Pagination$1, ProgressBar as ProgressBar$1, ProgressBarCountdown as ProgressBarCountdown$1, Radio as Radio$1, RadioGroup as RadioGroup$1, SectionTitle as SectionTitle$1, Section as Section$1, SelectOption as SelectOption$1, Select as Select$1, SpinnerWheel as SpinnerWheel$1, Step as Step$1, Steps as Steps$1, Switch as Switch$1, TableHead as TableHead$1, TableBody as TableBody$1, TableFoot as TableFoot$1, TableRow as TableRow$1, TableCell as TableCell$1, TableToolbar as TableToolbar$1, TableHeadCell as TableHeadCell$1, TableFeedback as TableFeedback$1, TableActions as TableActions$1, TableSelectionCell as TableSelectionCell$1, Table as Table$1, Tab as Tab$1, TabPanel as TabPanel$1, Tabs as Tabs$1, Tag as Tag$1, ActionableTag as ActionableTag$1, Text as Text$1, TextArea as TextArea$1, TextField as TextField$1, TimelineItem as TimelineItem$1, TimelineExpandableItem as TimelineExpandableItem$1, TimelineItemBody as TimelineItemBody$1, TimelineItemFooter as TimelineItemFooter$1, TimelineItemHeader as TimelineItemHeader$1, TimelineItemHeaderSubtitle as TimelineItemHeaderSubtitle$1, TimelineItemHeaderTitle as TimelineItemHeaderTitle$1, TimelineItemIcon as TimelineItemIcon$1, Timeline as Timeline$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Tooltip as Tooltip$1, LogoLoader as LogoLoader$1, DotsLoader as DotsLoader$1 } from "@loadsmart/miranda-wc";
-import { DIALOG_SIZES, DIALOG_VARIANTS, DRAWER_SIZES, EMPTY_STATE_VARIANTS, Accordion, AccordionContent, AccordionTitle, ActionableTag, Badge, Banner, BannerActionPrimary, BannerActionSecondary, BannerActions, BannerDescription, BannerIcon, BannerTitle, Box, Button, Card, CardActionPrimary, CardActionSecondary, CardActionTertiary, CardBody, CardDivider, CardFooter, CardSubtitle, CardTitle, Checkbox, Column, Container, Dialog, DialogActionPrimary, DialogActionSecondary, DialogActionTertiary, DialogActions, DialogBody, DialogClose, DialogFooter, DialogHeader, Divider, Drawer, DrawerActionPrimary, DrawerActionSecondary, DrawerActionTertiary, DrawerActions, DrawerBody, DrawerClose, DrawerHeader, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, EmptyState, EmptyStateAction, EmptyStateHeader, EmptyStateIllustration, EmptyStateMessage, Field, FieldHint, FieldLabel, Grid, Group, Header, HeaderActions, HeaderContent, HeaderTitle, Icon, LabeledValue, LabeledValueLabel, LabeledValueValue, Link, LogoLoader, PageContent, Pagination, ProgressBar, ProgressBarCountdown, Radio, RadioGroup, Row, Section, SectionTitle, Sidebar, SpinnerWheel, Stack, Step, Steps, SubHeader, Switch, Switcher, Tab, TabPanel, Table, TableActions, TableBody, TableCell, TableFeedback, TableFoot, TableHead, TableHeadCell, TableRow, TableToolbar, Tabs, Tag, Text, TextArea, TextField, Timeline, TimelineExpandableItem, TimelineItem, TimelineItemBody, TimelineItemFooter, TimelineItemHeader, TimelineItemHeaderSubtitle, TimelineItemHeaderTitle, TimelineItemIcon, Toggle, ToggleGroup, Tooltip } from "@loadsmart/miranda-wc";
+import { DIALOG_SIZES, DIALOG_VARIANTS, DRAWER_SIZES, EMPTY_STATE_VARIANTS, Accordion, AccordionContent, AccordionTitle, ActionableTag, Badge, Banner, BannerActionPrimary, BannerActionSecondary, BannerActions, BannerDescription, BannerIcon, BannerTitle, Box, Button, Card, CardActionPrimary, CardActionSecondary, CardActionTertiary, CardBody, CardDivider, CardFooter, CardSubtitle, CardTitle, Checkbox, Column, Container, Dialog, DialogActionPrimary, DialogActionSecondary, DialogActionTertiary, DialogActions, DialogBody, DialogClose, DialogFooter, DialogHeader, Divider, Drawer, DrawerActionPrimary, DrawerActionSecondary, DrawerActionTertiary, DrawerActions, DrawerBody, DrawerClose, DrawerHeader, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, EmptyState, EmptyStateAction, EmptyStateHeader, EmptyStateIllustration, EmptyStateMessage, Field, FieldHint, FieldLabel, Grid, Group, Header, HeaderActions, HeaderContent, HeaderTitle, Icon, LabeledValue, LabeledValueLabel, LabeledValueValue, Link, LogoLoader, PageContent, Pagination, ProgressBar, ProgressBarCountdown, Radio, RadioGroup, Row, Section, SectionTitle, Select, SelectOption, Sidebar, SpinnerWheel, Stack, Step, Steps, SubHeader, Switch, Switcher, Tab, TabPanel, Table, TableActions, TableBody, TableCell, TableFeedback, TableFoot, TableHead, TableHeadCell, TableRow, TableToolbar, Tabs, Tag, Text, TextArea, TextField, Timeline, TimelineExpandableItem, TimelineItem, TimelineItemBody, TimelineItemFooter, TimelineItemHeader, TimelineItemHeaderSubtitle, TimelineItemHeaderTitle, TimelineItemIcon, Toggle, ToggleGroup, Tooltip } from "@loadsmart/miranda-wc";
+import * as React from "react";
+import React__default, { forwardRef, useState, useCallback, Children, isValidElement, cloneElement } from "react";
 import { createComponent as createComponent$1 } from "@lit/react";
 import { isFragment } from "react-is";
 const createComponent = ({
@@ -26,7 +26,7 @@ const WiredAccordionTitle = createComponent({
 const AccordionTitle2 = forwardRef(
   (props, ref) => {
     const { leading, children, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(WiredAccordionTitle, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+    return /* @__PURE__ */ React__default.createElement(WiredAccordionTitle, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children);
   }
 );
 const AccordionContent2 = createComponent({
@@ -58,7 +58,7 @@ const WiredBannerActionPrimary = createComponent({
 });
 const BannerActionPrimary2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredBannerActionPrimary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredBannerActionPrimary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const BannerActions2 = createComponent({
   tagName: "m-banner-actions",
@@ -72,7 +72,7 @@ const WiredBannerActionSecondary = createComponent({
 });
 const BannerActionSecondary2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredBannerActionSecondary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredBannerActionSecondary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const BannerDescription2 = createComponent({
   tagName: "m-banner-description",
@@ -112,7 +112,7 @@ const WiredButton = createComponent({
 });
 const Button2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredButton, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredButton, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const WiredCardTitle = createComponent({
   tagName: "m-card-title",
@@ -121,7 +121,7 @@ const WiredCardTitle = createComponent({
 });
 const CardTitle2 = forwardRef(
   ({ children, leading, ...props }, ref) => {
-    return /* @__PURE__ */ React.createElement(WiredCardTitle, { ...props, slot: "title", ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+    return /* @__PURE__ */ React__default.createElement(WiredCardTitle, { ...props, slot: "title", ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children);
   }
 );
 const CardSubtitle2 = createComponent({
@@ -146,7 +146,7 @@ const WiredCardActionPrimary = createComponent({
 });
 const CardActionPrimary2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredCardActionPrimary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredCardActionPrimary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const WiredCardActionSecondary = createComponent({
   tagName: "m-card-action-secondary",
@@ -155,7 +155,7 @@ const WiredCardActionSecondary = createComponent({
 });
 const CardActionSecondary2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredCardActionSecondary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredCardActionSecondary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const WiredCardActionTertiary = createComponent({
   tagName: "m-card-action-tertiary",
@@ -164,7 +164,7 @@ const WiredCardActionTertiary = createComponent({
 });
 const CardActionTertiary2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredCardActionTertiary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredCardActionTertiary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const CardFooter2 = createComponent({
   tagName: "m-card-footer",
@@ -199,7 +199,7 @@ const WiredCheckbox = createComponent({
 });
 const Checkbox2 = forwardRef((props, ref) => {
   const { children, leading, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredCheckbox, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+  return /* @__PURE__ */ React__default.createElement(WiredCheckbox, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children);
 });
 const WiredDialogActionPrimary = createComponent({
   tagName: "m-dialog-action-primary",
@@ -208,7 +208,7 @@ const WiredDialogActionPrimary = createComponent({
 });
 const DialogActionPrimary2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredDialogActionPrimary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredDialogActionPrimary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const WiredDialogActionSecondary = createComponent({
   tagName: "m-dialog-action-secondary",
@@ -217,7 +217,7 @@ const WiredDialogActionSecondary = createComponent({
 });
 const DialogActionSecondary2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredDialogActionSecondary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredDialogActionSecondary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const WiredDialogActionTertiary = createComponent({
   tagName: "m-dialog-action-tertiary",
@@ -226,7 +226,7 @@ const WiredDialogActionTertiary = createComponent({
 });
 const DialogActionTertiary2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredDialogActionTertiary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredDialogActionTertiary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const DialogActions2 = createComponent({
   tagName: "m-dialog-actions",
@@ -290,7 +290,7 @@ const WiredDrawerActionPrimary = createComponent({
 });
 const DrawerActionPrimary2 = forwardRef(function DrawerActionPrimary22(props, ref) {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredDrawerActionPrimary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredDrawerActionPrimary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const WiredDrawerActionSecondary = createComponent({
   tagName: "m-drawer-action-secondary",
@@ -299,7 +299,7 @@ const WiredDrawerActionSecondary = createComponent({
 });
 const DrawerActionSecondary2 = forwardRef(function DrawerActionSecondary22(props, ref) {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredDrawerActionSecondary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredDrawerActionSecondary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const WiredDrawerActionTertiary = createComponent({
   tagName: "m-drawer-action-tertiary",
@@ -308,7 +308,7 @@ const WiredDrawerActionTertiary = createComponent({
 });
 const DrawerActionTertiary2 = forwardRef(function DrawerActionTertiary22(props, ref) {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredDrawerActionTertiary, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredDrawerActionTertiary, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const DrawerActions2 = createComponent({
   tagName: "m-drawer-actions",
@@ -362,7 +362,7 @@ const WiredDropdownItem = createComponent({
 const DropdownItem2 = forwardRef(
   (props, ref) => {
     const { leading, trailing, children, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(WiredDropdownItem, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+    return /* @__PURE__ */ React__default.createElement(WiredDropdownItem, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
   }
 );
 const DropdownMenu2 = createComponent({
@@ -377,7 +377,7 @@ const WiredDropdownTrigger = createComponent({
 });
 const DropdownTrigger2 = forwardRef((props, ref) => {
   const { leading, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredDropdownTrigger, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+  return /* @__PURE__ */ React__default.createElement(WiredDropdownTrigger, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children);
 });
 const Dropdown2 = createComponent({
   tagName: "m-dropdown",
@@ -415,7 +415,7 @@ const WiredEmptyStateAction = createComponent({
 });
 const EmptyStateAction2 = forwardRef((props, ref) => {
   const { leading, trailing, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredEmptyStateAction, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { slot: "trailing" }, trailing));
+  return /* @__PURE__ */ React__default.createElement(WiredEmptyStateAction, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { slot: "trailing" }, trailing));
 });
 const EmptyState2 = createComponent({
   tagName: "m-empty-state",
@@ -443,7 +443,7 @@ const WiredFieldHint = createComponent({
 });
 const FieldHint2 = forwardRef(
   ({ children, leading, ...props }, ref) => {
-    return /* @__PURE__ */ React.createElement(WiredFieldHint, { ...props, slot: "hint", ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+    return /* @__PURE__ */ React__default.createElement(WiredFieldHint, { ...props, slot: "hint", ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children);
   }
 );
 const Field2 = createComponent({
@@ -537,7 +537,7 @@ const LabeledValue2 = Object.assign(
       labelColor,
       ...rest
     } = props;
-    return /* @__PURE__ */ React.createElement(WiredLabeledValue, { ...rest, ref }, label != null && /* @__PURE__ */ React.createElement(LabeledValueLabel2, { variant: labelVariant, color: labelColor }, label), value != null && /* @__PURE__ */ React.createElement(LabeledValueValue2, { variant: valueVariant, color: valueColor }, value), children);
+    return /* @__PURE__ */ React__default.createElement(WiredLabeledValue, { ...rest, ref }, label != null && /* @__PURE__ */ React__default.createElement(LabeledValueLabel2, { variant: labelVariant, color: labelColor }, label), value != null && /* @__PURE__ */ React__default.createElement(LabeledValueValue2, { variant: valueVariant, color: valueColor }, value), children);
   }),
   {
     Label: LabeledValueLabel2,
@@ -566,12 +566,12 @@ const Grid2 = createComponent({
 });
 const SidebarSide = forwardRef(
   ({ children, ...boxProps }, ref) => {
-    return /* @__PURE__ */ React.createElement(Box2, { ...boxProps, slot: "sidebar", ref }, children);
+    return /* @__PURE__ */ React__default.createElement(Box2, { ...boxProps, slot: "sidebar", ref }, children);
   }
 );
 const SidebarContent = forwardRef(
   ({ children, ...boxProps }, ref) => {
-    return /* @__PURE__ */ React.createElement(Box2, { ...boxProps, slot: "content", ref }, children);
+    return /* @__PURE__ */ React__default.createElement(Box2, { ...boxProps, slot: "content", ref }, children);
   }
 );
 const Sidebar2 = createComponent({
@@ -658,7 +658,7 @@ const WiredRadio = createComponent({
 });
 const Radio2 = forwardRef((props, ref) => {
   const { children, leading, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredRadio, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+  return /* @__PURE__ */ React__default.createElement(WiredRadio, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children);
 });
 const RadioGroup2 = createComponent({
   tagName: "m-radio-group",
@@ -678,7 +678,7 @@ const WiredSectionTitle = createComponent({
 });
 const SectionTitle2 = forwardRef(
   ({ children, leading, ...props }, ref) => {
-    return /* @__PURE__ */ React.createElement(WiredSectionTitle, { ...props, slot: "title", ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+    return /* @__PURE__ */ React__default.createElement(WiredSectionTitle, { ...props, slot: "title", ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children);
   }
 );
 const Section2 = createComponent({
@@ -695,13 +695,13 @@ const WiredSelectOption = createComponent({
   displayName: "SelectOption"
 });
 const SLOTTED_STYLE$3 = { display: "contents" };
-const SelectOption = forwardRef(
+const SelectOption2 = forwardRef(
   (props, ref) => {
     const { leading, trailing, children, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(WiredSelectOption, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { style: SLOTTED_STYLE$3, slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React.createElement("span", { style: SLOTTED_STYLE$3, slot: "trailing" }, trailing));
+    return /* @__PURE__ */ React__default.createElement(WiredSelectOption, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { style: SLOTTED_STYLE$3, slot: "leading" }, leading), children, trailing != null && /* @__PURE__ */ React__default.createElement("span", { style: SLOTTED_STYLE$3, slot: "trailing" }, trailing));
   }
 );
-SelectOption.displayName = "SelectOption";
+SelectOption2.displayName = "SelectOption";
 const WiredSelect = createComponent({
   tagName: "m-select",
   elementClass: Select$1,
@@ -713,20 +713,27 @@ const WiredSelect = createComponent({
   displayName: "Select"
 });
 const SLOTTED_STYLE$2 = { display: "contents" };
-function Select(props) {
-  const { options, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredSelect, { ...rest }, children || (options || []).map(function renderOption(option) {
-    const {
-      label,
-      leading,
-      trailing,
-      value: optionValue,
-      ...others
-    } = option;
-    return /* @__PURE__ */ React.createElement(SelectOption, { key: optionValue, ...others, value: optionValue }, leading != null && /* @__PURE__ */ React.createElement("span", { style: SLOTTED_STYLE$2, slot: "leading" }, leading), label, trailing != null && /* @__PURE__ */ React.createElement("span", { style: SLOTTED_STYLE$2, slot: "trailing" }, trailing));
-  }));
+function Select2(props) {
+  const { options, children, onChange, ...rest } = props;
+  return /* @__PURE__ */ React__default.createElement(
+    WiredSelect,
+    {
+      onChange,
+      ...rest
+    },
+    children || options?.map(function renderOption(option) {
+      const {
+        label,
+        leading,
+        trailing,
+        value: optionValue,
+        ...others
+      } = option;
+      return /* @__PURE__ */ React__default.createElement(SelectOption2, { key: optionValue, ...others, value: optionValue }, leading != null && /* @__PURE__ */ React__default.createElement("span", { style: SLOTTED_STYLE$2, slot: "leading" }, leading), label, trailing != null && /* @__PURE__ */ React__default.createElement("span", { style: SLOTTED_STYLE$2, slot: "trailing" }, trailing));
+    })
+  );
 }
-Select.Option = SelectOption;
+Select2.Option = SelectOption2;
 const SpinnerWheel2 = createComponent({
   tagName: "m-spinner-wheel",
   elementClass: SpinnerWheel$1,
@@ -904,7 +911,7 @@ const WiredTab = createComponent({
 });
 const Tab2 = forwardRef(
   ({ children, leading, ...props }, ref) => {
-    return /* @__PURE__ */ React.createElement(WiredTab, { ...props, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+    return /* @__PURE__ */ React__default.createElement(WiredTab, { ...props, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children);
   }
 );
 const TabPanel2 = createComponent({
@@ -932,7 +939,7 @@ const WiredTag = createComponent({
 const SLOTTED_STYLE$1 = { display: "contents" };
 const Tag2 = forwardRef((props, ref) => {
   const { leading, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredTag, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { style: SLOTTED_STYLE$1, slot: "leading" }, leading), children);
+  return /* @__PURE__ */ React__default.createElement(WiredTag, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { style: SLOTTED_STYLE$1, slot: "leading" }, leading), children);
 });
 const WiredActionableTag = createComponent({
   tagName: "m-actionable-tag",
@@ -947,7 +954,7 @@ const SLOTTED_STYLE = { display: "contents" };
 const ActionableTag2 = forwardRef(
   (props, ref) => {
     const { leading, children, selectable, removable, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       WiredActionableTag,
       {
         ...rest,
@@ -955,7 +962,7 @@ const ActionableTag2 = forwardRef(
         removable: removable || Boolean(rest.onRemove),
         ref
       },
-      leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading", style: SLOTTED_STYLE }, leading),
+      leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading", style: SLOTTED_STYLE }, leading),
       children
     );
   }
@@ -975,7 +982,7 @@ const WiredTextArea = createComponent({
   displayName: "TextArea"
 });
 function TextArea2(props) {
-  return /* @__PURE__ */ React.createElement(WiredTextArea, { ...props });
+  return /* @__PURE__ */ React__default.createElement(WiredTextArea, { ...props });
 }
 const WiredTextField = createComponent({
   tagName: "m-text-field",
@@ -990,7 +997,7 @@ const WiredTextField = createComponent({
 const TextField2 = forwardRef(
   ({ leading, trailing, value, ...rest }, ref) => {
     const normalizedValue = value !== void 0 ? String(value) : "";
-    return /* @__PURE__ */ React.createElement(WiredTextField, { ...rest, value: normalizedValue, ref }, leading != null && /* @__PURE__ */ React.createElement("div", { slot: "leading" }, leading), trailing != null && /* @__PURE__ */ React.createElement("div", { slot: "trailing" }, trailing));
+    return /* @__PURE__ */ React__default.createElement(WiredTextField, { ...rest, value: normalizedValue, ref }, leading != null && /* @__PURE__ */ React__default.createElement("div", { slot: "leading" }, leading), trailing != null && /* @__PURE__ */ React__default.createElement("div", { slot: "trailing" }, trailing));
   }
 );
 const TimelineItem2 = createComponent({
@@ -1055,7 +1062,7 @@ const WiredToggle = createComponent({
 });
 const Toggle2 = forwardRef((props, ref) => {
   const { children, leading, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(WiredToggle, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+  return /* @__PURE__ */ React__default.createElement(WiredToggle, { ...rest, ref }, leading != null && /* @__PURE__ */ React__default.createElement("span", { slot: "leading" }, leading), children);
 });
 const WiredToggleGroup = createComponent({
   tagName: "m-toggle-group",
@@ -1071,15 +1078,15 @@ function ToggleGroup2({
   onChange,
   ...rest
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     WiredToggleGroup,
     {
       onChange,
       ...rest
     },
-    children ?? (options || []).map(function renderOption(option) {
+    children ?? options?.map(function renderOption(option) {
       const { label, value: optionValue, ...others } = option;
-      return /* @__PURE__ */ React.createElement(Toggle2, { key: optionValue, ...others, value: optionValue }, label);
+      return /* @__PURE__ */ React__default.createElement(Toggle2, { key: optionValue, ...others, value: optionValue }, label);
     })
   );
 }
@@ -1121,7 +1128,7 @@ function Tooltip2(props) {
       })
     ];
   })();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(WiredTooltip, { anchor: anchorId, ...rest }, message), childWithId);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(WiredTooltip, { anchor: anchorId, ...rest }, message), childWithId);
 }
 const LogoLoader2 = createComponent({
   tagName: "m-logo-loader",
@@ -1179,7 +1186,7 @@ export {
   RadioGroup2 as RadioGroup,
   Row2 as Row,
   Section2 as Section,
-  Select,
+  Select2 as Select,
   Sidebar2 as Sidebar,
   SpinnerWheel2 as SpinnerWheel,
   Stack2 as Stack,
@@ -1295,6 +1302,8 @@ export {
   Row as WCRow,
   Section as WCSection,
   SectionTitle as WCSectionTitle,
+  Select as WCSelect,
+  SelectOption as WCSelectOption,
   Sidebar as WCSidebar,
   SpinnerWheel as WCSpinnerWheel,
   Stack as WCStack,

package/dist/utils/SelectionProps.d.ts

@@ -0,0 +1,28 @@
+import { SelectionType, SelectionValue } from '@loadsmart/miranda-wc';
+import { ComponentProps, JSXElementConstructor } from 'react';
+import { MirandaChangeEvent } from './types';
+export type OnChangeEvent<TComponent extends JSXElementConstructor<any>, T> = (event: MirandaChangeEvent<Omit<TComponent, 'value'> & {
+    value: T;
+}>) => void;
+interface BaseProps<TComponent extends JSXElementConstructor<any>, TValue> {
+    type?: string;
+    value?: TValue;
+    onChange?: OnChangeEvent<TComponent, TValue>;
+}
+interface SingleProps<TComponent extends JSXElementConstructor<any>, OptionValue extends string, TValue = OptionValue | null> extends BaseProps<TComponent, TValue> {
+    type?: 'single';
+}
+interface SingleStrictProps<TComponent extends JSXElementConstructor<any>, OptionValue extends string, TValue = OptionValue> extends BaseProps<TComponent, TValue> {
+    type?: 'single-strict';
+}
+interface MultipleProps<TComponent extends JSXElementConstructor<any>, OptionValue extends string, TValue = Array<OptionValue> | ReadonlyArray<OptionValue> | null> extends BaseProps<TComponent, Extract<TValue, ReadonlyArray<OptionValue>>> {
+    type?: 'multiple';
+}
+type SelectionOption<TValue extends string = string> = {
+    value: TValue;
+};
+export type SelectionProps<TComponent extends JSXElementConstructor<any>, TSelectionType extends SelectionType = SelectionType, OptionValue extends string = string, TSelectionOption extends SelectionOption<OptionValue> = SelectionOption<OptionValue>, TOptions extends ReadonlyArray<TSelectionOption> = ReadonlyArray<TSelectionOption>> = Omit<ComponentProps<TComponent>, 'type' | 'value' | 'onChange'> & {
+    type?: TSelectionType;
+    options?: TOptions;
+} & (TSelectionType extends 'single' ? SingleProps<TComponent, OptionValue> : TSelectionType extends 'single-strict' ? SingleStrictProps<TComponent, OptionValue> : TSelectionType extends 'multiple' ? MultipleProps<TComponent, OptionValue> : BaseProps<TComponent, SelectionValue<OptionValue>>);
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/miranda-react",
-	"version": "3.0.0-beta.60",
+	"version": "3.0.0-beta.62",
 	"description": "React component library based on Miranda Web Components",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -22,16 +22,14 @@
 	"license": "UNLICENSED",
 	"devDependencies": {
 		"@loadsmart/miranda-utils": "*",
-		"@storybook/react": "^8.5.3",
-		"@storybook/react-vite": "^8.5.3",
-		"@types/react-dom": "^17.0.25",
+		"@types/react-dom": "^17.0.26",
 		"@types/react-is": "^18.3.0",
-		"@types/react": "^17.0.79",
-		"@vitejs/plugin-react": "^4.3.4",
+		"@types/react": "^17.0.85",
+		"@vitejs/plugin-react": "^4.4.1",
 		"react-dom": "^17.0.2",
 		"react": "^17.0.2",
 		"ts-loader": "^9.4.2",
-		"vite": "^6.2.3",
+		"vite": "^6.3.2",
 		"vite-plugin-dts": "^4.5.3"
 	},
 	"peerDependencies": {
@@ -43,8 +41,8 @@
 	},
 	"dependencies": {
 		"@lit/react": "^1.0.5",
-		"@loadsmart/miranda-tokens": "4.0.0-beta.60",
-		"@loadsmart/miranda-wc": "3.0.0-beta.60",
+		"@loadsmart/miranda-tokens": "4.0.0-beta.62",
+		"@loadsmart/miranda-wc": "3.0.0-beta.62",
 		"react-is": "^18.3.1"
 	},
 	"directories": {