@loadsmart/miranda-react 4.0.0-alpha.6 → 4.0.0-alpha.8

package/CHANGELOG.md

@@ -0,0 +1 @@
+Please check our [releases](https://github.com/loadsmart/miranda-wc/releases?q=miranda-react) page for the complete CHANGELOG.

package/dist/index.d.ts

@@ -44,9 +44,14 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactWebComponent } from '@lit/react';
 import { RefAttributes } from 'react';
+import { SelectionProps } from 'utils/SelectionProps';
 import { SelectionType } from '@loadsmart/miranda-wc';
 import { SelectionValue } from '@loadsmart/miranda-wc';
 import { SideNavigationTrigger as SideNavigationTrigger_2 } from '@loadsmart/miranda-wc';
+import { Skeleton as Skeleton_2 } from '@loadsmart/miranda-wc';
+import { SkeletonAvatar as SkeletonAvatar_2 } from '@loadsmart/miranda-wc';
+import { SkeletonTag as SkeletonTag_2 } from '@loadsmart/miranda-wc';
+import { SkeletonText as SkeletonText_2 } from '@loadsmart/miranda-wc';
 import { StepChangeEventDetail } from '@loadsmart/miranda-wc';
 import { StepNavigateEventDetail } from '@loadsmart/miranda-wc';
 import { SwitchSize } from '@loadsmart/miranda-wc';
@@ -338,11 +343,6 @@ export declare type BannerProps = ComponentProps<typeof Banner>;
 
 export { BannerVariant }
 
-declare interface BaseProps<TValue> {
-    	type?: SelectionType;
-    	value?: TValue;
-}
-
 export declare const Box: ReactWebComponent<WCBox, {}>;
 
 export declare type BoxProps = ComponentProps<typeof Box>;
@@ -734,12 +734,6 @@ export declare type LogoLoaderProps = ComponentProps<typeof LogoLoader>;
  */
 export declare type MirandaChangeEvent<T = Element> = ChangeEvent<T> & Event;
 
-/**
- * This is a patch type to make our components compatible to React's
- * synthetic event types.
- */
-declare type MirandaChangeEvent_2<T = Element> = ChangeEvent<T> & Event;
-
 export declare const Page: ReactWebComponent<WCPage, {}> & {
     Content: ReactWebComponent<WCPageContent, {}> & {
         Body: ReactWebComponent<WCBody, {}>;
@@ -823,43 +817,6 @@ export declare namespace Select {
     var Option: default_2.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & default_2.RefAttributes<WCSelectOption>>;
 }
 
-declare type SelectionChangeEventHandler<TComponent, T> = (
-	event: MirandaChangeEvent_2<Omit<TComponent, 'value'> & { value: T }>,
-) => void;
-
-declare type SelectionOption<TValue extends string = string> = {
-    	value: TValue;
-};
-
-declare type SelectionProps<
-	TComponent,
-	TProps extends BaseProps<SelectionValue<string>>,
-	TSelectionType extends SelectionType = SelectionType,
-	OptionValue extends string = string,
-	TSelectionOption extends SelectionOption<OptionValue> = SelectionOption<OptionValue>,
-	TOptions extends ReadonlyArray<TSelectionOption> = ReadonlyArray<TSelectionOption>,
-> = Omit<TProps, 'type' | 'value' | 'options' | 'onChange'> & {
-    	type?: TSelectionType;
-    	value?: TSelectionType extends 'single'
-    		? TOptions[number]['value'] | null
-    		: TSelectionType extends 'single-strict'
-    		? TOptions[number]['value']
-    		: TSelectionType extends 'multiple'
-    		? ReadonlyArray<TOptions[number]['value']> | null
-    		: SelectionValue<TOptions[number]['value']>; // Infer value type from options
-    	options?: TOptions;
-    	onChange?: SelectionChangeEventHandler<
-    		TComponent,
-    		TSelectionType extends 'single'
-    			? TOptions[number]['value'] | null
-    			: TSelectionType extends 'single-strict'
-    			? TOptions[number]['value']
-    			: TSelectionType extends 'multiple'
-    			? Array<TOptions[number]['value']> | null
-    			: SelectionValue<TOptions[number]['value']>
-    	>;
-};
-
 export { SelectionType }
 
 export { SelectionValue }
@@ -947,6 +904,26 @@ export declare const SideNavigationTrigger: ReactWebComponent<SideNavigationTrig
 
 export declare type SideNavigationTriggerProps = ComponentProps<typeof SideNavigationTrigger>;
 
+export declare const Skeleton: ReactWebComponent<Skeleton_2, {}> & {
+    Text: ReactWebComponent<SkeletonText_2, {}>;
+    Tag: ReactWebComponent<SkeletonTag_2, {}>;
+    Avatar: ReactWebComponent<SkeletonAvatar_2, {}>;
+};
+
+export declare const SkeletonAvatar: ReactWebComponent<SkeletonAvatar_2, {}>;
+
+export declare type SkeletonAvatarProps = ComponentProps<typeof SkeletonAvatar>;
+
+export declare type SkeletonProps = ComponentProps<typeof Skeleton>;
+
+export declare const SkeletonTag: ReactWebComponent<SkeletonTag_2, {}>;
+
+export declare type SkeletonTagProps = ComponentProps<typeof SkeletonTag>;
+
+export declare const SkeletonText: ReactWebComponent<SkeletonText_2, {}>;
+
+export declare type SkeletonTextProps = ComponentProps<typeof SkeletonText>;
+
 export declare const SpinnerWheel: ReactWebComponent<WCSpinnerWheel, {}>;
 
 export declare type SpinnerWheelProps = ComponentProps<typeof SpinnerWheel>;
@@ -1801,17 +1778,20 @@ declare module 'react' {
 
 declare module 'react' {
     interface CSSProperties {
-        '--m-divider-margin-top'?: string;
-        '--m-divider-margin-bottom'?: string;
-        '--m-divider-margin-y'?: string;
+        '--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;
     }
 }
 
 
 declare module 'react' {
     interface CSSProperties {
-        '--m-text-display'?: string;
-        '--m-text-max-width'?: string;
+        '--m-divider-margin-top'?: string;
+        '--m-divider-margin-bottom'?: string;
+        '--m-divider-margin-y'?: string;
     }
 }
 
@@ -1823,18 +1803,14 @@ declare module 'react' {
         '--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;
-        '--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-text-display'?: string;
+        '--m-text-max-width'?: string;
     }
 }
 
@@ -1846,5 +1822,6 @@ declare module 'react' {
         '--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;
     }
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { AccordionTitle as AccordionTitle$1, AccordionContent as AccordionContent$1, Accordion as Accordion$1, Avatar as Avatar$1, BackButton as BackButton$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, DropdownDivider as DropdownDivider$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, 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, Page as Page$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, SideNavigationBody as SideNavigationBody$1, SideNavigationDivider as SideNavigationDivider$1, SideNavigationFooter as SideNavigationFooter$1, SideNavigationHeader as SideNavigationHeader$1, SideNavigationItem as SideNavigationItem$1, SideNavigationSubNav as SideNavigationSubNav$1, SideNavigationSubNavContent as SideNavigationSubNavContent$1, SideNavigationSubNavItem as SideNavigationSubNavItem$1, SideNavigationSubNavTitle as SideNavigationSubNavTitle$1, SideNavigationTrigger as SideNavigationTrigger$1, SideNavigation as SideNavigation$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, TagRemove as TagRemove$1, TagExpand as TagExpand$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, 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, TopNavigationItem as TopNavigationItem$1, TopNavigation as TopNavigation$1, LogoLoader as LogoLoader$1, DotsLoader as DotsLoader$1, FileItem, FilePicker as FilePicker$1 } from "@loadsmart/miranda-wc";
+import { AccordionTitle as AccordionTitle$1, AccordionContent as AccordionContent$1, Accordion as Accordion$1, Avatar as Avatar$1, BackButton as BackButton$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, DropdownDivider as DropdownDivider$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, 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, Page as Page$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, SideNavigationBody as SideNavigationBody$1, SideNavigationDivider as SideNavigationDivider$1, SideNavigationFooter as SideNavigationFooter$1, SideNavigationHeader as SideNavigationHeader$1, SideNavigationItem as SideNavigationItem$1, SideNavigationSubNav as SideNavigationSubNav$1, SideNavigationSubNavContent as SideNavigationSubNavContent$1, SideNavigationSubNavItem as SideNavigationSubNavItem$1, SideNavigationSubNavTitle as SideNavigationSubNavTitle$1, SideNavigationTrigger as SideNavigationTrigger$1, SideNavigation as SideNavigation$1, SkeletonText as SkeletonText$1, SkeletonTag as SkeletonTag$1, SkeletonAvatar as SkeletonAvatar$1, Skeleton as Skeleton$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, TagRemove as TagRemove$1, TagExpand as TagExpand$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, 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, TopNavigationItem as TopNavigationItem$1, TopNavigation as TopNavigation$1, LogoLoader as LogoLoader$1, DotsLoader as DotsLoader$1, FileItem, FilePicker as FilePicker$1 } from "@loadsmart/miranda-wc";
 import { DIALOG_SIZES, DIALOG_VARIANTS, DRAWER_SIZES, EMPTY_STATE_VARIANTS, Accordion, AccordionContent, AccordionTitle, ActionableTag, Avatar, BackButton, Badge, Banner, BannerActionPrimary, BannerActionSecondary, BannerActions, BannerDescription, BannerIcon, BannerTitle, Body, Box, Button, Card, CardActionPrimary, CardActionSecondary, CardActionTertiary, CardBody, CardDivider, CardFooter, CardSubtitle, CardTitle, CaretButton, Checkbox, CloseButton, 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, FilePicker, Grid, Group, Header, HeaderActions, HeaderContent, HeaderTitle, Icon, Label, LabeledValue, LabeledValueLabel, LabeledValueValue, Link, LogoLoader, Page, PageContent, Pagination, ProgressBar, ProgressBarCountdown, Radio, RadioGroup, Row, Section, SectionTitle, Select, SelectOption, SideNavigation, SideNavigationBody, SideNavigationDivider, SideNavigationFooter, SideNavigationHeader, SideNavigationItem, SideNavigationSubNav, SideNavigationSubNavContent, SideNavigationSubNavItem, SideNavigationSubNavTitle, Sidebar, SpinnerWheel, Stack, Step, Steps, SubHeader, Switch, Switcher, Tab, TabPanel, Table, TableActions, TableBody, TableCell, TableFeedback, TableFoot, TableHead, TableHeadCell, TableRow, TableToolbar, TableV2 as TableV22, Tabs, Tag, Text, TextArea, TextField, Timeline, 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,6 +831,34 @@ const SideNavigation2 = createComponent({
     Trigger: SideNavigationTrigger
   }
 });
+const SkeletonTextComponent = createComponent({
+  tagName: "m-skeleton-text",
+  elementClass: SkeletonText$1,
+  displayName: "Skeleton.Text"
+});
+const SkeletonText = SkeletonTextComponent;
+const SkeletonTagComponent = createComponent({
+  tagName: "m-skeleton-tag",
+  elementClass: SkeletonTag$1,
+  displayName: "Skeleton.Tag"
+});
+const SkeletonTag = SkeletonTagComponent;
+const SkeletonAvatarComponent = createComponent({
+  tagName: "m-skeleton-avatar",
+  elementClass: SkeletonAvatar$1,
+  displayName: "Skeleton.Avatar"
+});
+const SkeletonAvatar = SkeletonAvatarComponent;
+const Skeleton = createComponent({
+  tagName: "m-skeleton",
+  elementClass: Skeleton$1,
+  displayName: "Skeleton",
+  subComponents: {
+    Text: SkeletonText,
+    Tag: SkeletonTag,
+    Avatar: SkeletonAvatar
+  }
+});
 const SpinnerWheel2 = createComponent({
   tagName: "m-spinner-wheel",
   elementClass: SpinnerWheel$1,
@@ -1445,6 +1473,10 @@ export {
   SideNavigationSubNavTitle2 as SideNavigationSubNavTitle,
   SideNavigationTrigger,
   Sidebar2 as Sidebar,
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonTag,
+  SkeletonText,
   SpinnerWheel2 as SpinnerWheel,
   Stack2 as Stack,
   Step2 as Step,

package/dist/tokens.d.ts

@@ -27,17 +27,20 @@ declare module 'react' {
 
 declare module 'react' {
     interface CSSProperties {
-        '--m-divider-margin-top'?: string;
-        '--m-divider-margin-bottom'?: string;
-        '--m-divider-margin-y'?: string;
+        '--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;
     }
 }
 
 
 declare module 'react' {
     interface CSSProperties {
-        '--m-text-display'?: string;
-        '--m-text-max-width'?: string;
+        '--m-divider-margin-top'?: string;
+        '--m-divider-margin-bottom'?: string;
+        '--m-divider-margin-y'?: string;
     }
 }
 
@@ -49,18 +52,14 @@ declare module 'react' {
         '--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;
-        '--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-text-display'?: string;
+        '--m-text-max-width'?: string;
     }
 }
 
@@ -72,5 +71,6 @@ declare module 'react' {
         '--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;
     }
 }

package/package.json

@@ -1,67 +1,68 @@
 {
-	"name": "@loadsmart/miranda-react",
-	"version": "4.0.0-alpha.6",
-	"description": "React component library based on Miranda Web Components",
-	"main": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"type": "module",
-	"files": [
-		"dist"
-	],
-	"scripts": {
-		"build-docs": "storybook build -o ./docs",
-		"dev": "storybook dev -p 7007",
-		"test": "cypress run --component --browser chrome",
-		"cypress": "cypress open --component --browser chrome",
-		"build": "vite build",
-		"prePublishOnly": "npm run build",
-		"release": "semantic-release",
-		"typecheck": "tsc --noEmit",
-		"figma:create": "dotenvx run -- figma connect create --outDir src/components",
-		"figma:parse": "dotenvx run -- figma connect parse",
-		"figma:publish": "dotenvx run -- figma connect publish",
-		"figma:unpublish": "dotenvx run -- figma connect unpublish",
-		"figma:build-icons": "tsx ./src/scripts/build-icons-figma-connect.ts"
-	},
-	"author": "Loadsmart",
-	"license": "UNLICENSED",
-	"devDependencies": {
-		"@figma/code-connect": "^1.3.6",
-		"@loadsmart/miranda-utils": "*",
-		"@types/node": "^22.15.23",
-		"@types/react": "^17.0.85",
-		"@types/react-dom": "^17.0.26",
-		"@types/react-is": "^18.3.0",
-		"@vitejs/plugin-react": "^4.4.1",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"ts-loader": "^9.4.2",
-		"tsx": "^4.19.4",
-		"vite": "^6.3.2",
-		"vite-plugin-dts": "^4.5.3"
-	},
-	"peerDependencies": {
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"dependencies": {
-		"@lit/react": "^1.0.5",
-		"@loadsmart/miranda-tokens": "5.0.0-alpha.6",
-		"@loadsmart/miranda-wc": "4.0.0-alpha.6",
-		"react-is": "^18.3.1"
-	},
-	"directories": {
-		"test": "tests"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/loadsmart/miranda-wc.git"
-	},
-	"bugs": {
-		"url": "https://github.com/loadsmart/miranda-wc/issues"
-	},
-	"homepage": "https://github.com/loadsmart/miranda-wc#readme"
-}
+  "name": "@loadsmart/miranda-react",
+  "version": "4.0.0-alpha.8",
+  "description": "React component library based on Miranda Web Components",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build-docs": "storybook build -o ./docs",
+    "dev": "storybook dev -p 7007",
+    "test": "cypress run --component --browser chrome",
+    "cypress": "cypress open --component --browser chrome",
+    "build": "vite build",
+    "release": "semantic-release",
+    "typecheck": "tsc --noEmit",
+    "figma:create": "dotenvx run -- figma connect create --outDir src/components",
+    "figma:parse": "dotenvx run -- figma connect parse",
+    "figma:publish": "dotenvx run -- figma connect publish",
+    "figma:unpublish": "dotenvx run -- figma connect unpublish",
+    "figma:build-icons": "tsx ./src/scripts/build-icons-figma-connect.ts"
+  },
+  "author": "Loadsmart",
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@figma/code-connect": "^1.3.6",
+    "@loadsmart/miranda-utils": "0.0.0",
+    "@types/node": "^24.1.0",
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-is": "^18.3.1",
+    "@vitejs/plugin-react": "^4.4.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "ts-loader": "^9.4.2",
+    "tsx": "^4.19.4",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.2",
+    "vite-plugin-dts": "^4.5.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lit/react": "^1.0.5",
+    "@loadsmart/miranda-tokens": "5.0.0-alpha.8",
+    "@loadsmart/miranda-wc": "4.0.0-alpha.8",
+    "react-is": "^18.3.1"
+  },
+  "directories": {
+    "test": "tests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/loadsmart/miranda-wc.git"
+  },
+  "bugs": {
+    "url": "https://github.com/loadsmart/miranda-wc/issues"
+  },
+  "homepage": "https://github.com/loadsmart/miranda-wc#readme",
+  "stableVersion": "0.0.0"
+}