@loadsmart/miranda-react 3.0.0-beta.70 → 3.0.0-beta.72

package/dist/index.d.ts

@@ -51,17 +51,35 @@ import { StepNavigateEventDetail } from '@loadsmart/miranda-wc';
 import { SwitchSize } from '@loadsmart/miranda-wc';
 import { TabChangeEventDetail } from '@loadsmart/miranda-wc';
 import { TabContentDirection } from '@loadsmart/miranda-wc';
+import { TableBodyV2 as TableBodyV2_2 } from '@loadsmart/miranda-wc';
 import { TableCellAlignment } from '@loadsmart/miranda-wc';
+import { TableCellV2 as TableCellV2_2 } from '@loadsmart/miranda-wc';
+import { TableCellV2Alignment } from '@loadsmart/miranda-wc';
+import { TableCellV2TextAlignment } from '@loadsmart/miranda-wc';
+import { TableExpandEventDetails } from '@loadsmart/miranda-wc/dist/components/table-v2/table.types';
+import { TableExpandEventDetailsV2 } from '@loadsmart/miranda-wc';
+import { TableFootV2 as TableFootV2_2 } from '@loadsmart/miranda-wc';
 import { TableHeadCellSortEventDetails } from '@loadsmart/miranda-wc';
+import { TableHeadCellV2 as TableHeadCellV2_2 } from '@loadsmart/miranda-wc';
+import { TableHeadCellV2SortEventDetails } from '@loadsmart/miranda-wc';
+import { TableHeadV2 as TableHeadV2_2 } from '@loadsmart/miranda-wc';
 import { TableLayout as TableLayout_2 } from '@loadsmart/miranda-wc';
 import { TableLayoutActions as TableLayoutActions_2 } from '@loadsmart/miranda-wc';
 import { TableLayoutFeedback as TableLayoutFeedback_2 } from '@loadsmart/miranda-wc';
 import { TableLayoutToolbar as TableLayoutToolbar_2 } from '@loadsmart/miranda-wc';
+import { TableRowExpandV2 as TableRowExpandV2_2 } from '@loadsmart/miranda-wc';
+import { TableRowSelectV2 as TableRowSelectV2_2 } from '@loadsmart/miranda-wc';
+import { TableRowV2 as TableRowV2_2 } from '@loadsmart/miranda-wc';
 import { TableSelectEventDetails } from '@loadsmart/miranda-wc';
 import { TableSelectEventDetails as TableSelectEventDetails_2 } from '@loadsmart/miranda-wc/dist/components/table/table.types';
+import { TableSelectEventDetails as TableSelectEventDetails_3 } from '@loadsmart/miranda-wc/dist/components/table-v2/table.types';
+import { TableSelectEventDetailsV2 } from '@loadsmart/miranda-wc';
 import { TableSelectionCell as TableSelectionCell_2 } from '@loadsmart/miranda-wc';
 import { TableSize } from '@loadsmart/miranda-wc';
 import { TableSortDirection } from '@loadsmart/miranda-wc';
+import { TableV2 as TableV2_2 } from '@loadsmart/miranda-wc';
+import { TableV2Size } from '@loadsmart/miranda-wc';
+import { TableV2SortDirection } from '@loadsmart/miranda-wc';
 import { TagSize } from '@loadsmart/miranda-wc';
 import { TagVariant } from '@loadsmart/miranda-wc';
 import { TimelineItemVariant } from '@loadsmart/miranda-wc';
@@ -886,12 +904,26 @@ export declare const TableBody: ReactWebComponent<WCTableBody, {}>;
 
 export declare type TableBodyProps = ComponentProps<typeof TableBody>;
 
+export declare const TableBodyV2: ReactWebComponent<TableBodyV2_2, {}>;
+
+export declare type TableBodyV2Props = ComponentProps<typeof TableBodyV2>;
+
 export declare const TableCell: ReactWebComponent<WCTableCell, {}>;
 
 export { TableCellAlignment }
 
 export declare type TableCellProps = ComponentProps<typeof TableCell>;
 
+export declare const TableCellV2: ReactWebComponent<TableCellV2_2, {}>;
+
+export { TableCellV2Alignment }
+
+export declare type TableCellV2Props = ComponentProps<typeof TableCellV2>;
+
+export { TableCellV2TextAlignment }
+
+export { TableExpandEventDetailsV2 }
+
 export declare const TableFeedback: ReactWebComponent<WCTableFeedback, {}>;
 
 export declare type TableFeedbackProps = ComponentProps<typeof TableFeedback>;
@@ -900,6 +932,10 @@ export declare const TableFoot: ReactWebComponent<WCTableFoot, {}>;
 
 export declare type TableFootProps = ComponentProps<typeof TableFoot>;
 
+export declare const TableFootV2: ReactWebComponent<TableFootV2_2, {}>;
+
+export declare type TableFootV2Props = ComponentProps<typeof TableFootV2>;
+
 export declare const TableHead: ReactWebComponent<WCTableHead, {}>;
 
 export declare const TableHeadCell: ReactWebComponent<WCTableHeadCell, {
@@ -910,8 +946,20 @@ export declare type TableHeadCellProps = ComponentProps<typeof TableHeadCell>;
 
 export { TableHeadCellSortEventDetails }
 
+export declare const TableHeadCellV2: ReactWebComponent<TableHeadCellV2_2, {
+onSort: EventName<CustomEvent<TableHeadCellSortEventDetails>>;
+}>;
+
+export declare type TableHeadCellV2Props = ComponentProps<typeof TableHeadCellV2>;
+
+export { TableHeadCellV2SortEventDetails }
+
 export declare type TableHeadProps = ComponentProps<typeof TableHead>;
 
+export declare const TableHeadV2: ReactWebComponent<TableHeadV2_2, {}>;
+
+export declare type TableHeadV2Props = ComponentProps<typeof TableHeadV2>;
+
 export declare const TableLayout: ReactWebComponent<TableLayout_2, {}> & {
     Toolbar: ReactWebComponent<TableLayoutToolbar_2, {}>;
     Feedback: ReactWebComponent<TableLayoutFeedback_2, {}>;
@@ -936,10 +984,32 @@ export declare type TableProps = ComponentProps<typeof Table>;
 
 export declare const TableRow: ReactWebComponent<WCTableRow, {}>;
 
+export declare const TableRowExpandV2: ReactWebComponent<TableRowExpandV2_2, {}>;
+
+export declare type TableRowExpandV2Props = ComponentProps<typeof TableRowExpandV2>;
+
+/**
+ * this component should ensure that all children include the attribute slot = "expansion"
+ * so they can be rendered in the expansion content of the table row.
+ */
+declare function TableRowExpansion(props: {
+    children: ReactNode;
+}): default_2.JSX.Element;
+
 export declare type TableRowProps = ComponentProps<typeof TableRow>;
 
+export declare const TableRowSelectV2: ReactWebComponent<TableRowSelectV2_2, {}>;
+
+export declare type TableRowSelectV2Props = ComponentProps<typeof TableRowSelectV2>;
+
+export declare const TableRowV2: ReactWebComponent<TableRowV2_2, {}>;
+
+export declare type TableRowV2Props = ComponentProps<typeof TableRowV2>;
+
 export { TableSelectEventDetails }
 
+export { TableSelectEventDetailsV2 }
+
 export declare const TableSelectionCell: ReactWebComponent<TableSelectionCell_2, {}>;
 
 export declare type TableSelectionCellProps = ComponentProps<typeof TableSelectionCell>;
@@ -952,6 +1022,30 @@ export declare const TableToolbar: ReactWebComponent<WCTableToolbar, {}>;
 
 export declare type TableToolbarProps = ComponentProps<typeof TableToolbar>;
 
+export declare const TableV2: ReactWebComponent<TableV2_2, {
+onSelect: EventName<CustomEvent<TableSelectEventDetails_3>>;
+onExpand: EventName<CustomEvent<TableExpandEventDetails>>;
+onCollapse: EventName<CustomEvent<TableExpandEventDetails>>;
+}> & {
+    Head: ReactWebComponent<TableHeadV2_2, {}>;
+    Body: ReactWebComponent<TableBodyV2_2, {}>;
+    Foot: ReactWebComponent<TableFootV2_2, {}>;
+    Row: ReactWebComponent<TableRowV2_2, {}>;
+    HeadCell: ReactWebComponent<TableHeadCellV2_2, {
+    onSort: EventName<CustomEvent<TableHeadCellSortEventDetails>>;
+    }>;
+    Cell: ReactWebComponent<TableCellV2_2, {}>;
+    RowSelect: ReactWebComponent<TableRowSelectV2_2, {}>;
+    RowExpand: ReactWebComponent<TableRowExpandV2_2, {}>;
+    RowExpansion: typeof TableRowExpansion;
+};
+
+export declare type TableV2Props = ComponentProps<typeof TableV2>;
+
+export { TableV2Size }
+
+export { TableV2SortDirection }
+
 export declare const TabPanel: ReactWebComponent<WCTabPanel, {}>;
 
 export declare type TabPanelProps = ComponentProps<typeof TabPanel>;
@@ -1498,6 +1592,14 @@ declare const WiredTooltip: ReactWebComponent<WCTooltip, {}>;
 export { }
 
 
+declare module 'react' {
+    interface CSSProperties {
+        '--m-icon-size'?: string;
+        '--m-icon-color'?: string;
+    }
+}
+
+
 declare module 'react' {
     interface CSSProperties {
         '--m-divider-margin-top'?: string;
@@ -1519,14 +1621,6 @@ declare module 'react' {
 }
 
 
-declare module 'react' {
-    interface CSSProperties {
-        '--m-icon-size'?: string;
-        '--m-icon-color'?: string;
-    }
-}
-
-
 declare module 'react' {
     interface CSSProperties {
         '--m-table-border-radius'?: string;
@@ -1546,6 +1640,18 @@ declare module 'react' {
 }
 
 
+declare module 'react' {
+    interface CSSProperties {
+        '--m-table-border-radius'?: string;
+        '--m-table-border-top-left-radius'?: string;
+        '--m-table-border-top-right-radius'?: string;
+        '--m-table-border-bottom-left-radius'?: string;
+        '--m-table-border-bottom-right-radius'?: string;
+        '--m-table-border-width'?: string;
+    }
+}
+
+
 declare module 'react' {
     interface CSSProperties {
         '--m-table-border-radius'?: string;

package/dist/index.js

@@ -1,4 +1,4 @@
-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, TableLayoutToolbar as TableLayoutToolbar$1, TableLayoutFeedback as TableLayoutFeedback$1, TableLayoutActions as TableLayoutActions$1, TableLayout as TableLayout$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 { 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$2, TableBody as TableBody$2, TableFoot as TableFoot$2, TableRow as TableRow$2, TableCell as TableCell$2, TableToolbar as TableToolbar$1, TableHeadCell as TableHeadCell$2, TableFeedback as TableFeedback$1, TableActions as TableActions$1, TableSelectionCell as TableSelectionCell$1, Table as Table$2, TableHeadV2, TableBodyV2, TableFootV2, TableRowV2, TableCellV2, TableHeadCellV2, TableRowSelectV2, TableRowExpandV2, TableV2, TableLayoutToolbar as TableLayoutToolbar$1, TableLayoutFeedback as TableLayoutFeedback$1, TableLayoutActions as TableLayoutActions$1, TableLayout as TableLayout$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, 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";
@@ -831,29 +831,29 @@ const Switch2 = createComponent({
     onChange: "change"
   }
 });
-const TableHead2 = createComponent({
+const TableHead$1 = createComponent({
   tagName: "m-table-head",
-  elementClass: TableHead$1,
+  elementClass: TableHead$2,
   displayName: "TableHead"
 });
-const TableBody2 = createComponent({
+const TableBody$1 = createComponent({
   tagName: "m-table-body",
-  elementClass: TableBody$1,
+  elementClass: TableBody$2,
   displayName: "TableBody"
 });
-const TableFoot2 = createComponent({
+const TableFoot$1 = createComponent({
   tagName: "m-table-foot",
-  elementClass: TableFoot$1,
+  elementClass: TableFoot$2,
   displayName: "TableFoot"
 });
-const TableRow2 = createComponent({
+const TableRow$1 = createComponent({
   tagName: "m-table-row",
-  elementClass: TableRow$1,
+  elementClass: TableRow$2,
   displayName: "TableRow"
 });
-const TableCell2 = createComponent({
+const TableCell$1 = createComponent({
   tagName: "m-table-cell",
-  elementClass: TableCell$1,
+  elementClass: TableCell$2,
   displayName: "TableCell"
 });
 const TableToolbar2 = createComponent({
@@ -861,9 +861,9 @@ const TableToolbar2 = createComponent({
   elementClass: TableToolbar$1,
   displayName: "TableToolbar"
 });
-const TableHeadCell2 = createComponent({
+const TableHeadCell$1 = createComponent({
   tagName: "m-table-head-cell",
-  elementClass: TableHeadCell$1,
+  elementClass: TableHeadCell$2,
   displayName: "TableHeadCell",
   events: {
     onSort: "columnsort"
@@ -884,13 +884,87 @@ const TableSelectionCell = createComponent({
   elementClass: TableSelectionCell$1,
   displayName: "TableSelectionCell"
 });
-const Table2 = createComponent({
+const Table$1 = createComponent({
   tagName: "m-table",
-  elementClass: Table$1,
+  elementClass: Table$2,
   displayName: "Table",
   events: {
     onSelect: "select"
   },
+  subComponents: {
+    Head: TableHead$1,
+    Body: TableBody$1,
+    Foot: TableFoot$1,
+    Row: TableRow$1,
+    HeadCell: TableHeadCell$1,
+    Cell: TableCell$1,
+    SelectionCell: TableSelectionCell,
+    Toolbar: TableToolbar2,
+    Feedback: TableFeedback2,
+    Actions: TableActions2
+  }
+});
+const TableHead2 = createComponent({
+  tagName: "m-table-head-v2",
+  elementClass: TableHeadV2,
+  displayName: "TableHeadV2"
+});
+const TableBody2 = createComponent({
+  tagName: "m-table-body-v2",
+  elementClass: TableBodyV2,
+  displayName: "TableBodyV2"
+});
+const TableFoot2 = createComponent({
+  tagName: "m-table-foot-v2",
+  elementClass: TableFootV2,
+  displayName: "TableFootV2"
+});
+const TableRow2 = createComponent({
+  tagName: "m-table-row-v2",
+  elementClass: TableRowV2,
+  displayName: "TableRowV2"
+});
+const TableCell2 = createComponent({
+  tagName: "m-table-cell-v2",
+  elementClass: TableCellV2,
+  displayName: "TableCellV2"
+});
+const TableHeadCell2 = createComponent({
+  tagName: "m-table-head-cell-v2",
+  elementClass: TableHeadCellV2,
+  displayName: "TableHeadCellV2",
+  events: {
+    onSort: "columnsort"
+  }
+});
+const TableRowSelect = createComponent({
+  tagName: "m-table-row-select-v2",
+  elementClass: TableRowSelectV2,
+  displayName: "TableRowSelectV2"
+});
+const TableRowExpand = createComponent({
+  tagName: "m-table-row-expand-v2",
+  elementClass: TableRowExpandV2,
+  displayName: "TableRowExpandV2"
+});
+function TableRowExpansion(props) {
+  const { children } = props;
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, React__default.Children.map(children, (child) => {
+    if (React__default.isValidElement(child)) {
+      return React__default.cloneElement(child, { slot: "expansion" });
+    }
+    return child;
+  }));
+}
+const Table2 = createComponent({
+  tagName: "m-table-v2",
+  elementClass: TableV2,
+  displayName: "TableV2",
+  events: {
+    onSelect: "select",
+    onExpand: "expand",
+    onCollapse: "collapse"
+  },
   subComponents: {
     Head: TableHead2,
     Body: TableBody2,
@@ -898,10 +972,9 @@ const Table2 = createComponent({
     Row: TableRow2,
     HeadCell: TableHeadCell2,
     Cell: TableCell2,
-    SelectionCell: TableSelectionCell,
-    Toolbar: TableToolbar2,
-    Feedback: TableFeedback2,
-    Actions: TableActions2
+    RowSelect: TableRowSelect,
+    RowExpand: TableRowExpand,
+    RowExpansion: TableRowExpansion
   }
 });
 const TableLayoutToolbar = createComponent({
@@ -1222,21 +1295,30 @@ export {
   Switcher2 as Switcher,
   Tab2 as Tab,
   TabPanel2 as TabPanel,
-  Table2 as Table,
+  Table$1 as Table,
   TableActions2 as TableActions,
-  TableBody2 as TableBody,
-  TableCell2 as TableCell,
+  TableBody$1 as TableBody,
+  TableBody2 as TableBodyV2,
+  TableCell$1 as TableCell,
+  TableCell2 as TableCellV2,
   TableFeedback2 as TableFeedback,
-  TableFoot2 as TableFoot,
-  TableHead2 as TableHead,
-  TableHeadCell2 as TableHeadCell,
+  TableFoot$1 as TableFoot,
+  TableFoot2 as TableFootV2,
+  TableHead$1 as TableHead,
+  TableHeadCell$1 as TableHeadCell,
+  TableHeadCell2 as TableHeadCellV2,
+  TableHead2 as TableHeadV2,
   TableLayout,
   TableLayoutActions,
   TableLayoutFeedback,
   TableLayoutToolbar,
-  TableRow2 as TableRow,
+  TableRow$1 as TableRow,
+  TableRowExpand as TableRowExpandV2,
+  TableRowSelect as TableRowSelectV2,
+  TableRow2 as TableRowV2,
   TableSelectionCell,
   TableToolbar2 as TableToolbar,
+  Table2 as TableV2,
   Tabs2 as Tabs,
   Tag2 as Tag,
   Text2 as Text,

package/dist/tokens.d.ts

@@ -5,6 +5,14 @@ export * from "@loadsmart/miranda-tokens/dist/themes.js";
 export { }
 
 
+declare module 'react' {
+    interface CSSProperties {
+        '--m-icon-size'?: string;
+        '--m-icon-color'?: string;
+    }
+}
+
+
 declare module 'react' {
     interface CSSProperties {
         '--m-divider-margin-top'?: string;
@@ -26,14 +34,6 @@ declare module 'react' {
 }
 
 
-declare module 'react' {
-    interface CSSProperties {
-        '--m-icon-size'?: string;
-        '--m-icon-color'?: string;
-    }
-}
-
-
 declare module 'react' {
     interface CSSProperties {
         '--m-table-border-radius'?: string;
@@ -53,6 +53,18 @@ declare module 'react' {
 }
 
 
+declare module 'react' {
+    interface CSSProperties {
+        '--m-table-border-radius'?: string;
+        '--m-table-border-top-left-radius'?: string;
+        '--m-table-border-top-right-radius'?: string;
+        '--m-table-border-bottom-left-radius'?: string;
+        '--m-table-border-bottom-right-radius'?: string;
+        '--m-table-border-width'?: string;
+    }
+}
+
+
 declare module 'react' {
     interface CSSProperties {
         '--m-table-border-radius'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/miranda-react",
-	"version": "3.0.0-beta.70",
+	"version": "3.0.0-beta.72",
 	"description": "React component library based on Miranda Web Components",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -41,8 +41,8 @@
 	},
 	"dependencies": {
 		"@lit/react": "^1.0.5",
-		"@loadsmart/miranda-tokens": "4.0.0-beta.70",
-		"@loadsmart/miranda-wc": "3.0.0-beta.70",
+		"@loadsmart/miranda-tokens": "4.0.0-beta.72",
+		"@loadsmart/miranda-wc": "3.0.0-beta.72",
 		"react-is": "^18.3.1"
 	},
 	"directories": {