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

package/dist/index.js

@@ -1,1237 +1,1336 @@
-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, 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, 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 } from '@loadsmart/miranda-wc';
-export { DIALOG_SIZES, DIALOG_VARIANTS, DRAWER_SIZES, EMPTY_STATE_VARIANTS, Accordion as WCAccordion, AccordionContent as WCAccordionContent, AccordionTitle as WCAccordionTitle, ActionableTag as WCActionableTag, Badge as WCBadge, Banner as WCBanner, BannerActionPrimary as WCBannerActionPrimary, BannerActionSecondary as WCBannerActionSecondary, BannerActions as WCBannerActions, BannerDescription as WCBannerDescription, BannerIcon as WCBannerIcon, BannerTitle as WCBannerTitle, Box as WCBox, Button as WCButton, Card as WCCard, CardActionPrimary as WCCardActionPrimary, CardActionSecondary as WCCardActionSecondary, CardActionTertiary as WCCardActionTertiary, CardBody as WCCardBody, CardDivider as WCCardDivider, CardFooter as WCCardFooter, CardSubtitle as WCCardSubtitle, CardTitle as WCCardTitle, Checkbox as WCCheckbox, Column as WCColumn, Container as WCContainer, Dialog as WCDialog, DialogActionPrimary as WCDialogActionPrimary, DialogActionSecondary as WCDialogActionSecondary, DialogActionTertiary as WCDialogActionTertiary, DialogActions as WCDialogActions, DialogBody as WCDialogBody, DialogClose as WCDialogClose, DialogFooter as WCDialogFooter, DialogHeader as WCDialogHeader, Divider as WCDivider, Drawer as WCDrawer, DrawerActionPrimary as WCDrawerActionPrimary, DrawerActionSecondary as WCDrawerActionSecondary, DrawerActionTertiary as WCDrawerActionTertiary, DrawerActions as WCDrawerActions, DrawerBody as WCDrawerBody, DrawerClose as WCDrawerClose, DrawerHeader as WCDrawerHeader, Dropdown as WCDropdown, DropdownItem as WCDropdownItem, DropdownMenu as WCDropdownMenu, DropdownTrigger as WCDropdownTrigger, EmptyState as WCEmptyState, EmptyStateAction as WCEmptyStateAction, EmptyStateHeader as WCEmptyStateHeader, EmptyStateIllustration as WCEmptyStateIllustration, EmptyStateMessage as WCEmptyStateMessage, Field as WCField, FieldHint as WCFieldHint, FieldLabel as WCFieldLabel, Grid as WCGrid, Group as WCGroup, Header as WCHeader, HeaderActions as WCHeaderActions, HeaderContent as WCHeaderContent, HeaderTitle as WCHeaderTitle, Icon as WCIcon, LabeledValue as WCLabeledValue, LabeledValueLabel as WCLabeledValueLabel, LabeledValueValue as WCLabeledValueValue, Link as WCLink, LogoLoader as WCLogoLoader, PageContent as WCPageContent, Pagination as WCPagination, ProgressBar as WCProgressBar, ProgressBarCountdown as WCProgressBarCountdown, Radio as WCRadio, RadioGroup as WCRadioGroup, Row as WCRow, Section as WCSection, SectionTitle as WCSectionTitle, Sidebar as WCSidebar, SpinnerWheel as WCSpinnerWheel, Stack as WCStack, Step as WCStep, Steps as WCSteps, SubHeader as WCSubHeader, Switch as WCSwitch, Switcher as WCSwitcher, Tab as WCTab, TabPanel as WCTabPanel, Table as WCTable, TableActions as WCTableActions, TableBody as WCTableBody, TableCell as WCTableCell, TableFeedback as WCTableFeedback, TableFoot as WCTableFoot, TableHead as WCTableHead, TableHeadCell as WCTableHeadCell, TableRow as WCTableRow, TableToolbar as WCTableToolbar, Tabs as WCTabs, Tag as WCTag, Text as WCText, TextArea as WCTextArea, TextField as WCTextField, Timeline as WCTimeline, TimelineExpandableItem as WCTimelineExpandableItem, TimelineItem as WCTimelineItem, TimelineItemBody as WCTimelineItemBody, TimelineItemFooter as WCTimelineItemFooter, TimelineItemHeader as WCTimelineItemHeader, TimelineItemHeaderSubtitle as WCTimelineItemHeaderSubtitle, TimelineItemHeaderTitle as WCTimelineItemHeaderTitle, TimelineItemIcon as WCTimelineItemIcon, Toggle as WCToggle, ToggleGroup as WCToggleGroup, Tooltip as WCTooltip } from '@loadsmart/miranda-wc';
-import * as React from 'react';
-import { forwardRef, useState, useCallback } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
+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 { createComponent as createComponent$1 } from "@lit/react";
+import { isFragment } from "react-is";
+const createComponent = ({
+  subComponents,
+  ...options
+}) => {
+  const ReactComponent = createComponent$1({
+    react: React,
+    ...options
+  });
+  const ComponentWithSubComponents = ReactComponent;
+  if (subComponents) {
+    Object.assign(ComponentWithSubComponents, subComponents);
   }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-var e = new Set(["children", "localName", "ref", "style", "className"]),
-  n = new WeakMap(),
-  t = function t(e, _t, o, l, a) {
-    var s = a == null ? void 0 : a[_t];
-    void 0 === s ? (e[_t] = o, null == o && _t in HTMLElement.prototype && e.removeAttribute(_t)) : o !== l && function (e, t, o) {
-      var l = n.get(e);
-      void 0 === l && n.set(e, l = new Map());
-      var a = l.get(t);
-      void 0 !== o ? void 0 === a ? (l.set(t, a = {
-        handleEvent: o
-      }), e.addEventListener(t, a)) : a.handleEvent = o : void 0 !== a && (l["delete"](t), e.removeEventListener(t, a));
-    }(e, s, o);
-  },
-  o = function o(_ref) {
-    var n = _ref.react,
-      o = _ref.tagName,
-      l = _ref.elementClass,
-      a = _ref.events,
-      s = _ref.displayName;
-    var c = new Set(Object.keys(a != null ? a : {})),
-      r = n.forwardRef(function (s, r) {
-        var i = n.useRef(new Map()),
-          d = n.useRef(null),
-          f = {},
-          u = {};
-        for (var _i = 0, _Object$entries = Object.entries(s); _i < _Object$entries.length; _i++) {
-          var _Object$entries$_i = _Object$entries[_i],
-            _n = _Object$entries$_i[0],
-            _t2 = _Object$entries$_i[1];
-          e.has(_n) ? f["className" === _n ? "class" : _n] = _t2 : c.has(_n) || _n in l.prototype ? u[_n] = _t2 : f[_n] = _t2;
-        }
-        return n.useLayoutEffect(function () {
-          if (null === d.current) return;
-          var e = new Map();
-          for (var _n2 in u) t(d.current, _n2, s[_n2], i.current.get(_n2), a), i.current["delete"](_n2), e.set(_n2, s[_n2]);
-          for (var _iterator = _createForOfIteratorHelperLoose(i.current), _step; !(_step = _iterator()).done;) {
-            var _step$value = _step.value,
-              _e = _step$value[0],
-              _n3 = _step$value[1];
-            t(d.current, _e, void 0, _n3, a);
-          }
-          i.current = e;
-        }), n.useLayoutEffect(function () {
-          var _d$current;
-          (_d$current = d.current) == null || _d$current.removeAttribute("defer-hydration");
-        }, []), f.suppressHydrationWarning = !0, n.createElement(o, _extends({}, f, {
-          ref: n.useCallback(function (e) {
-            d.current = e, "function" == typeof r ? r(e) : null !== r && (r.current = e);
-          }, [r])
-        }));
-      });
-    return r.displayName = s != null ? s : l.name, r;
-  };
-
-const createComponent = ({ subComponents, ...options }) => {
-    const ReactComponent = o({
-        react: React,
-        ...options,
-    });
-    const ComponentWithSubComponents = ReactComponent;
-    if (subComponents) {
-        Object.assign(ComponentWithSubComponents, subComponents);
-    }
-    return ComponentWithSubComponents;
+  return ComponentWithSubComponents;
 };
-
 const WiredAccordionTitle = createComponent({
-    tagName: 'm-accordion-title',
-    elementClass: AccordionTitle$1,
-    displayName: 'AccordionTitle',
+  tagName: "m-accordion-title",
+  elementClass: AccordionTitle$1,
+  displayName: "AccordionTitle"
 });
-const AccordionTitle = forwardRef((props, ref) => {
+const AccordionTitle2 = forwardRef(
+  (props, ref) => {
     const { leading, children, ...rest } = props;
-    return (jsxs(WiredAccordionTitle, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
-});
-
-const AccordionContent = createComponent({
-    tagName: 'm-accordion-content',
-    elementClass: AccordionContent$1,
-    displayName: 'AccordionContent',
-});
-
-const Accordion = createComponent({
-    tagName: 'm-accordion',
-    elementClass: Accordion$1,
-    displayName: 'Accordion',
-    events: {
-        onToggle: 'toggle',
-    },
-    subComponents: {
-        Title: AccordionTitle,
-        Content: AccordionContent,
-    },
+    return /* @__PURE__ */ React.createElement(WiredAccordionTitle, { ...rest, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+  }
+);
+const AccordionContent2 = createComponent({
+  tagName: "m-accordion-content",
+  elementClass: AccordionContent$1,
+  displayName: "AccordionContent"
+});
+const Accordion2 = createComponent({
+  tagName: "m-accordion",
+  elementClass: Accordion$1,
+  displayName: "Accordion",
+  events: {
+    onToggle: "toggle"
+  },
+  subComponents: {
+    Title: AccordionTitle2,
+    Content: AccordionContent2
+  }
 });
-
-const Badge = createComponent({
-    tagName: 'm-badge',
-    elementClass: Badge$1,
-    displayName: 'Badge',
+const Badge2 = createComponent({
+  tagName: "m-badge",
+  elementClass: Badge$1,
+  displayName: "Badge"
 });
-
 const WiredBannerActionPrimary = createComponent({
-    tagName: 'm-banner-action-primary',
-    elementClass: BannerActionPrimary$1,
-    displayName: 'BannerActionPrimary',
+  tagName: "m-banner-action-primary",
+  elementClass: BannerActionPrimary$1,
+  displayName: "BannerActionPrimary"
 });
-const BannerActionPrimary = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredBannerActionPrimary, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
+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));
 });
-
-const BannerActions = createComponent({
-    tagName: 'm-banner-actions',
-    elementClass: BannerActions$1,
-    displayName: 'BannerActions',
+const BannerActions2 = createComponent({
+  tagName: "m-banner-actions",
+  elementClass: BannerActions$1,
+  displayName: "BannerActions"
 });
-
 const WiredBannerActionSecondary = createComponent({
-    tagName: 'm-banner-action-secondary',
-    elementClass: BannerActionSecondary$1,
-    displayName: 'BannerActionSecondary',
-});
-const BannerActionSecondary = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredBannerActionSecondary, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
-});
-
-const BannerDescription = createComponent({
-    tagName: 'm-banner-description',
-    elementClass: BannerDescription$1,
-    displayName: 'BannerDescription',
-});
-
-const BannerIcon = createComponent({
-    tagName: 'm-banner-icon',
-    elementClass: BannerIcon$1,
-    displayName: 'BannerIcon',
-});
-
-const BannerTitle = createComponent({
-    tagName: 'm-banner-title',
-    elementClass: BannerTitle$1,
-    displayName: 'BannerTitle',
-});
-
-const Banner = createComponent({
-    tagName: 'm-banner',
-    elementClass: Banner$1,
-    events: {
-        onDismiss: 'dismiss',
-    },
-    displayName: 'Banner',
-    subComponents: {
-        ActionPrimary: BannerActionPrimary,
-        Actions: BannerActions,
-        ActionSecondary: BannerActionSecondary,
-        Description: BannerDescription,
-        Icon: BannerIcon,
-        Title: BannerTitle,
-    },
+  tagName: "m-banner-action-secondary",
+  elementClass: BannerActionSecondary$1,
+  displayName: "BannerActionSecondary"
+});
+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));
+});
+const BannerDescription2 = createComponent({
+  tagName: "m-banner-description",
+  elementClass: BannerDescription$1,
+  displayName: "BannerDescription"
+});
+const BannerIcon2 = createComponent({
+  tagName: "m-banner-icon",
+  elementClass: BannerIcon$1,
+  displayName: "BannerIcon"
+});
+const BannerTitle2 = createComponent({
+  tagName: "m-banner-title",
+  elementClass: BannerTitle$1,
+  displayName: "BannerTitle"
+});
+const Banner2 = createComponent({
+  tagName: "m-banner",
+  elementClass: Banner$1,
+  events: {
+    onDismiss: "dismiss"
+  },
+  displayName: "Banner",
+  subComponents: {
+    ActionPrimary: BannerActionPrimary2,
+    Actions: BannerActions2,
+    ActionSecondary: BannerActionSecondary2,
+    Description: BannerDescription2,
+    Icon: BannerIcon2,
+    Title: BannerTitle2
+  }
 });
-
 const WiredButton = createComponent({
-    tagName: 'm-button',
-    elementClass: Button$1,
-    displayName: 'Button',
+  tagName: "m-button",
+  elementClass: Button$1,
+  displayName: "Button"
 });
-const Button = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredButton, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
+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));
 });
-
 const WiredCardTitle = createComponent({
-    tagName: 'm-card-title',
-    elementClass: CardTitle$1,
-    displayName: 'CardTitle',
-});
-const CardTitle = forwardRef(({ children, leading, ...props }, ref) => {
-    return (jsxs(WiredCardTitle, { ...props, slot: "title", ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
-});
-
-const CardSubtitle = createComponent({
-    tagName: 'm-card-subtitle',
-    elementClass: CardSubtitle$1,
-    displayName: 'CardSubtitle',
-});
-
-const CardBody = createComponent({
-    tagName: 'm-card-body',
-    elementClass: CardBody$1,
-    displayName: 'CardBody',
-});
-
-const CardDivider = createComponent({
-    tagName: 'm-card-divider',
-    elementClass: CardDivider$1,
-    displayName: 'CardDivider',
-});
-
+  tagName: "m-card-title",
+  elementClass: CardTitle$1,
+  displayName: "CardTitle"
+});
+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);
+  }
+);
+const CardSubtitle2 = createComponent({
+  tagName: "m-card-subtitle",
+  elementClass: CardSubtitle$1,
+  displayName: "CardSubtitle"
+});
+const CardBody2 = createComponent({
+  tagName: "m-card-body",
+  elementClass: CardBody$1,
+  displayName: "CardBody"
+});
+const CardDivider2 = createComponent({
+  tagName: "m-card-divider",
+  elementClass: CardDivider$1,
+  displayName: "CardDivider"
+});
 const WiredCardActionPrimary = createComponent({
-    tagName: 'm-card-action-primary',
-    elementClass: CardActionPrimary$1,
-    displayName: 'CardActionPrimary',
+  tagName: "m-card-action-primary",
+  elementClass: CardActionPrimary$1,
+  displayName: "CardActionPrimary"
 });
-const CardActionPrimary = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredCardActionPrimary, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
+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));
 });
-
 const WiredCardActionSecondary = createComponent({
-    tagName: 'm-card-action-secondary',
-    elementClass: CardActionSecondary$1,
-    displayName: 'CardActionSecondary',
+  tagName: "m-card-action-secondary",
+  elementClass: CardActionSecondary$1,
+  displayName: "CardActionSecondary"
 });
-const CardActionSecondary = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredCardActionSecondary, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
+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));
 });
-
 const WiredCardActionTertiary = createComponent({
-    tagName: 'm-card-action-tertiary',
-    elementClass: CardActionTertiary$1,
-    displayName: 'CardActionTertiary',
-});
-const CardActionTertiary = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredCardActionTertiary, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
-});
-
-const CardFooter = createComponent({
-    tagName: 'm-card-footer',
-    elementClass: CardFooter$1,
-    displayName: 'CardFooter',
-});
-
-const Card = createComponent({
-    tagName: 'm-card',
-    elementClass: Card$1,
-    displayName: 'Card',
-    events: {
-        onToggle: 'toggle',
-    },
-    subComponents: {
-        Title: CardTitle,
-        Subtitle: CardSubtitle,
-        Body: CardBody,
-        Divider: CardDivider,
-        ActionPrimary: CardActionPrimary,
-        ActionSecondary: CardActionSecondary,
-        ActionTertiary: CardActionTertiary,
-        Footer: CardFooter,
-    },
+  tagName: "m-card-action-tertiary",
+  elementClass: CardActionTertiary$1,
+  displayName: "CardActionTertiary"
+});
+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));
+});
+const CardFooter2 = createComponent({
+  tagName: "m-card-footer",
+  elementClass: CardFooter$1,
+  displayName: "CardFooter"
+});
+const Card2 = createComponent({
+  tagName: "m-card",
+  elementClass: Card$1,
+  displayName: "Card",
+  events: {
+    onToggle: "toggle"
+  },
+  subComponents: {
+    Title: CardTitle2,
+    Subtitle: CardSubtitle2,
+    Body: CardBody2,
+    Divider: CardDivider2,
+    ActionPrimary: CardActionPrimary2,
+    ActionSecondary: CardActionSecondary2,
+    ActionTertiary: CardActionTertiary2,
+    Footer: CardFooter2
+  }
 });
-
 const WiredCheckbox = createComponent({
-    tagName: 'm-checkbox',
-    elementClass: Checkbox$1,
-    events: {
-        onChange: 'change',
-    },
-    displayName: 'Checkbox',
+  tagName: "m-checkbox",
+  elementClass: Checkbox$1,
+  events: {
+    onChange: "change"
+  },
+  displayName: "Checkbox"
 });
-const Checkbox = forwardRef((props, ref) => {
-    const { children, leading, ...rest } = props;
-    return (jsxs(WiredCheckbox, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
+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);
 });
-
 const WiredDialogActionPrimary = createComponent({
-    tagName: 'm-dialog-action-primary',
-    elementClass: DialogActionPrimary$1,
-    displayName: 'DialogActionPrimary',
+  tagName: "m-dialog-action-primary",
+  elementClass: DialogActionPrimary$1,
+  displayName: "DialogActionPrimary"
 });
-const DialogActionPrimary = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredDialogActionPrimary, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
+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));
 });
-
 const WiredDialogActionSecondary = createComponent({
-    tagName: 'm-dialog-action-secondary',
-    elementClass: DialogActionSecondary$1,
-    displayName: 'DialogActionSecondary',
+  tagName: "m-dialog-action-secondary",
+  elementClass: DialogActionSecondary$1,
+  displayName: "DialogActionSecondary"
 });
-const DialogActionSecondary = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredDialogActionSecondary, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
+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));
 });
-
 const WiredDialogActionTertiary = createComponent({
-    tagName: 'm-dialog-action-tertiary',
-    elementClass: DialogActionTertiary$1,
-    displayName: 'DialogActionTertiary',
-});
-const DialogActionTertiary = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredDialogActionTertiary, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
-});
-
-const DialogActions = createComponent({
-    tagName: 'm-dialog-actions',
-    elementClass: DialogActions$1,
-    displayName: 'DialogActions',
-});
-
-const DialogBody = createComponent({
-    tagName: 'm-dialog-body',
-    elementClass: DialogBody$1,
-    displayName: 'DialogBody',
-});
-
-const DialogClose = createComponent({
-    tagName: 'm-dialog-close',
-    elementClass: DialogClose$1,
-    events: {
-        onClose: 'm-close',
-    },
-    displayName: 'DialogClose',
-});
-
-const DialogFooter = createComponent({
-    tagName: 'm-dialog-footer',
-    elementClass: DialogFooter$1,
-    displayName: 'DialogFooter',
-});
-
-const DialogHeader = createComponent({
-    tagName: 'm-dialog-header',
-    elementClass: DialogHeader$1,
-    displayName: 'DialogHeader',
-});
-
-const Dialog = createComponent({
-    tagName: 'm-dialog',
-    elementClass: Dialog$1,
-    events: {
-        onClose: 'close',
-        onOpening: 'opening',
-        onOpened: 'opened',
-        onClosing: 'closing',
-        onClosed: 'closed',
-    },
-    displayName: 'Dialog',
-    subComponents: {
-        ActionPrimary: DialogActionPrimary,
-        ActionSecondary: DialogActionSecondary,
-        ActionTertiary: DialogActionTertiary,
-        Actions: DialogActions,
-        Body: DialogBody,
-        Close: DialogClose,
-        Footer: DialogFooter,
-        Header: DialogHeader,
-    },
+  tagName: "m-dialog-action-tertiary",
+  elementClass: DialogActionTertiary$1,
+  displayName: "DialogActionTertiary"
+});
+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));
+});
+const DialogActions2 = createComponent({
+  tagName: "m-dialog-actions",
+  elementClass: DialogActions$1,
+  displayName: "DialogActions"
+});
+const DialogBody2 = createComponent({
+  tagName: "m-dialog-body",
+  elementClass: DialogBody$1,
+  displayName: "DialogBody"
+});
+const DialogClose2 = createComponent({
+  tagName: "m-dialog-close",
+  elementClass: DialogClose$1,
+  events: {
+    onClose: "m-close"
+  },
+  displayName: "DialogClose"
+});
+const DialogFooter2 = createComponent({
+  tagName: "m-dialog-footer",
+  elementClass: DialogFooter$1,
+  displayName: "DialogFooter"
+});
+const DialogHeader2 = createComponent({
+  tagName: "m-dialog-header",
+  elementClass: DialogHeader$1,
+  displayName: "DialogHeader"
+});
+const Dialog2 = createComponent({
+  tagName: "m-dialog",
+  elementClass: Dialog$1,
+  events: {
+    onClose: "close",
+    onOpening: "opening",
+    onOpened: "opened",
+    onClosing: "closing",
+    onClosed: "closed"
+  },
+  displayName: "Dialog",
+  subComponents: {
+    ActionPrimary: DialogActionPrimary2,
+    ActionSecondary: DialogActionSecondary2,
+    ActionTertiary: DialogActionTertiary2,
+    Actions: DialogActions2,
+    Body: DialogBody2,
+    Close: DialogClose2,
+    Footer: DialogFooter2,
+    Header: DialogHeader2
+  }
 });
-
-const Divider = createComponent({
-    tagName: 'm-divider',
-    elementClass: Divider$1,
-    displayName: 'Divider',
+const Divider2 = createComponent({
+  tagName: "m-divider",
+  elementClass: Divider$1,
+  displayName: "Divider"
 });
-
 const WiredDrawerActionPrimary = createComponent({
-    tagName: 'm-drawer-action-primary',
-    elementClass: DrawerActionPrimary$1,
-    displayName: 'DrawerActionPrimary',
+  tagName: "m-drawer-action-primary",
+  elementClass: DrawerActionPrimary$1,
+  displayName: "DrawerActionPrimary"
+});
+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));
 });
-function DrawerActionPrimary(props) {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredDrawerActionPrimary, { ...rest, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
-}
-
 const WiredDrawerActionSecondary = createComponent({
-    tagName: 'm-drawer-action-secondary',
-    elementClass: DrawerActionSecondary$1,
-    displayName: 'DrawerActionSecondary',
+  tagName: "m-drawer-action-secondary",
+  elementClass: DrawerActionSecondary$1,
+  displayName: "DrawerActionSecondary"
 });
-function DrawerActionSecondary(props) {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredDrawerActionSecondary, { ...rest, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
-}
-
-const WiredDrawerActionTertiary = createComponent({
-    tagName: 'm-drawer-action-tertiary',
-    elementClass: DrawerActionTertiary$1,
-    displayName: 'DrawerActionTertiary',
+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));
 });
-function DrawerActionTertiary(props) {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredDrawerActionTertiary, { ...rest, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
-}
-
-const DrawerActions = createComponent({
-    tagName: 'm-drawer-actions',
-    elementClass: DrawerActions$1,
-    displayName: 'DrawerActions',
-});
-
-const DrawerBody = createComponent({
-    tagName: 'm-drawer-body',
-    elementClass: DrawerBody$1,
-    displayName: 'DrawerBody',
-});
-
-const DrawerClose = createComponent({
-    tagName: 'm-drawer-close',
-    elementClass: DrawerClose$1,
-    events: {
-        onClose: 'm-close',
-    },
-    displayName: 'DrawerClose',
-});
-
-const DrawerHeader = createComponent({
-    tagName: 'm-drawer-header',
-    elementClass: DrawerHeader$1,
-    displayName: 'DrawerHeader',
-});
-
-const Drawer = createComponent({
-    tagName: 'm-drawer',
-    elementClass: Drawer$1,
-    events: {
-        onClose: 'close',
-        onOpening: 'opening',
-        onOpened: 'opened',
-        onClosing: 'closing',
-        onClosed: 'closed',
-    },
-    displayName: 'Drawer',
-    subComponents: {
-        ActionPrimary: DrawerActionPrimary,
-        ActionSecondary: DrawerActionSecondary,
-        ActionTertiary: DrawerActionTertiary,
-        Actions: DrawerActions,
-        Body: DrawerBody,
-        Close: DrawerClose,
-        Header: DrawerHeader,
-    },
+const WiredDrawerActionTertiary = createComponent({
+  tagName: "m-drawer-action-tertiary",
+  elementClass: DrawerActionTertiary$1,
+  displayName: "DrawerActionTertiary"
+});
+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));
+});
+const DrawerActions2 = createComponent({
+  tagName: "m-drawer-actions",
+  elementClass: DrawerActions$1,
+  displayName: "DrawerActions"
+});
+const DrawerBody2 = createComponent({
+  tagName: "m-drawer-body",
+  elementClass: DrawerBody$1,
+  displayName: "DrawerBody"
+});
+const DrawerClose2 = createComponent({
+  tagName: "m-drawer-close",
+  elementClass: DrawerClose$1,
+  events: {
+    onClose: "m-close"
+  },
+  displayName: "DrawerClose"
+});
+const DrawerHeader2 = createComponent({
+  tagName: "m-drawer-header",
+  elementClass: DrawerHeader$1,
+  displayName: "DrawerHeader"
+});
+const Drawer2 = createComponent({
+  tagName: "m-drawer",
+  elementClass: Drawer$1,
+  events: {
+    onClose: "close",
+    onOpening: "opening",
+    onOpened: "opened",
+    onClosing: "closing",
+    onClosed: "closed"
+  },
+  displayName: "Drawer",
+  subComponents: {
+    ActionPrimary: DrawerActionPrimary2,
+    ActionSecondary: DrawerActionSecondary2,
+    ActionTertiary: DrawerActionTertiary2,
+    Actions: DrawerActions2,
+    Body: DrawerBody2,
+    Close: DrawerClose2,
+    Header: DrawerHeader2
+  }
 });
-
 const WiredDropdownItem = createComponent({
-    tagName: 'm-dropdown-item',
-    elementClass: DropdownItem$1,
-    displayName: 'DropdownItem',
+  tagName: "m-dropdown-item",
+  elementClass: DropdownItem$1,
+  displayName: "DropdownItem"
 });
-const DropdownItem = forwardRef((props, ref) => {
+const DropdownItem2 = forwardRef(
+  (props, ref) => {
     const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredDropdownItem, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
-});
-
-const DropdownMenu = createComponent({
-    tagName: 'm-dropdown-menu',
-    elementClass: DropdownMenu$1,
-    displayName: 'DropdownMenu',
+    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));
+  }
+);
+const DropdownMenu2 = createComponent({
+  tagName: "m-dropdown-menu",
+  elementClass: DropdownMenu$1,
+  displayName: "DropdownMenu"
 });
-
 const WiredDropdownTrigger = createComponent({
-    tagName: 'm-dropdown-trigger',
-    elementClass: DropdownTrigger$1,
-    displayName: 'DropdownTrigger',
+  tagName: "m-dropdown-trigger",
+  elementClass: DropdownTrigger$1,
+  displayName: "DropdownTrigger"
+});
+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);
+});
+const Dropdown2 = createComponent({
+  tagName: "m-dropdown",
+  elementClass: Dropdown$1,
+  displayName: "Dropdown",
+  subComponents: {
+    Item: DropdownItem2,
+    Menu: DropdownMenu2,
+    Trigger: DropdownTrigger2
+  },
+  events: {
+    onExpand: "expand",
+    onCollapse: "collapse"
+  }
 });
-const DropdownTrigger = forwardRef((props, ref) => {
-    const { leading, children, ...rest } = props;
-    return (jsxs(WiredDropdownTrigger, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
-});
-
-const Dropdown = createComponent({
-    tagName: 'm-dropdown',
-    elementClass: Dropdown$1,
-    displayName: 'Dropdown',
-    subComponents: {
-        Item: DropdownItem,
-        Menu: DropdownMenu,
-        Trigger: DropdownTrigger,
-    },
-    events: {
-        onExpand: 'expand',
-        onCollapse: 'collapse',
-    },
+const EmptyStateIllustration2 = createComponent({
+  tagName: "m-empty-state-illustration",
+  elementClass: EmptyStateIllustration$1,
+  displayName: "EmptyStateIllustration"
 });
-
-const EmptyStateIllustration = createComponent({
-    tagName: 'm-empty-state-illustration',
-    elementClass: EmptyStateIllustration$1,
-    displayName: 'EmptyStateIllustration',
-});
-
-const EmptyStateHeader = createComponent({
-    tagName: 'm-empty-state-header',
-    elementClass: EmptyStateHeader$1,
-    displayName: 'EmptyStateHeader',
-});
-
-const EmptyStateMessage = createComponent({
-    tagName: 'm-empty-state-message',
-    elementClass: EmptyStateMessage$1,
-    displayName: 'EmptyStateMessage',
-});
-
-const WiredEmptyStateAction = createComponent({
-    tagName: 'm-empty-state-action',
-    elementClass: EmptyStateAction$1,
-    displayName: 'EmptyStateAction',
+const EmptyStateHeader2 = createComponent({
+  tagName: "m-empty-state-header",
+  elementClass: EmptyStateHeader$1,
+  displayName: "EmptyStateHeader"
 });
-const EmptyStateAction = forwardRef((props, ref) => {
-    const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredEmptyStateAction, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children, trailing != null && jsx("span", { slot: "trailing", children: trailing })] }));
-});
-
-const EmptyState = createComponent({
-    tagName: 'm-empty-state',
-    elementClass: EmptyState$1,
-    events: {
-        onAction: 'action',
-    },
-    displayName: 'EmptyState',
-    subComponents: {
-        Illustration: EmptyStateIllustration,
-        Header: EmptyStateHeader,
-        Message: EmptyStateMessage,
-        Action: EmptyStateAction,
-    },
+const EmptyStateMessage2 = createComponent({
+  tagName: "m-empty-state-message",
+  elementClass: EmptyStateMessage$1,
+  displayName: "EmptyStateMessage"
 });
-
-const FieldLabel = createComponent({
-    tagName: 'm-field-label',
-    elementClass: FieldLabel$1,
-    displayName: 'FieldLabel',
+const WiredEmptyStateAction = createComponent({
+  tagName: "m-empty-state-action",
+  elementClass: EmptyStateAction$1,
+  displayName: "EmptyStateAction"
+});
+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));
+});
+const EmptyState2 = createComponent({
+  tagName: "m-empty-state",
+  elementClass: EmptyState$1,
+  events: {
+    onAction: "action"
+  },
+  displayName: "EmptyState",
+  subComponents: {
+    Illustration: EmptyStateIllustration2,
+    Header: EmptyStateHeader2,
+    Message: EmptyStateMessage2,
+    Action: EmptyStateAction2
+  }
+});
+const FieldLabel2 = createComponent({
+  tagName: "m-field-label",
+  elementClass: FieldLabel$1,
+  displayName: "FieldLabel"
 });
-
 const WiredFieldHint = createComponent({
-    tagName: 'm-field-hint',
-    elementClass: FieldHint$1,
-    displayName: 'FieldHint',
-});
-const FieldHint = forwardRef(({ children, leading, ...props }, ref) => {
-    return (jsxs(WiredFieldHint, { ...props, slot: "hint", ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
-});
-
-const Field = createComponent({
-    tagName: 'm-field',
-    elementClass: Field$1,
-    displayName: 'Field',
-    subComponents: {
-        Label: FieldLabel,
-        Hint: FieldHint,
-    },
+  tagName: "m-field-hint",
+  elementClass: FieldHint$1,
+  displayName: "FieldHint"
+});
+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);
+  }
+);
+const Field2 = createComponent({
+  tagName: "m-field",
+  elementClass: Field$1,
+  displayName: "Field",
+  subComponents: {
+    Label: FieldLabel2,
+    Hint: FieldHint2
+  }
+});
+const HeaderActions2 = createComponent({
+  tagName: "m-header-actions",
+  elementClass: HeaderActions$1,
+  displayName: "HeaderActions"
+});
+const HeaderContent2 = createComponent({
+  tagName: "m-header-content",
+  elementClass: HeaderContent$1,
+  displayName: "HeaderContent"
+});
+const HeaderTitle2 = createComponent({
+  tagName: "m-header-title",
+  elementClass: HeaderTitle$1,
+  displayName: "HeaderTitle"
+});
+const SubHeader2 = createComponent({
+  tagName: "m-sub-header",
+  elementClass: SubHeader$1,
+  displayName: "SubHeader"
 });
-
-const HeaderActions = createComponent({
-    tagName: 'm-header-actions',
-    elementClass: HeaderActions$1,
-    displayName: 'HeaderActions',
-});
-
-const HeaderContent = createComponent({
-    tagName: 'm-header-content',
-    elementClass: HeaderContent$1,
-    displayName: 'HeaderContent',
-});
-
-const HeaderTitle = createComponent({
-    tagName: 'm-header-title',
-    elementClass: HeaderTitle$1,
-    displayName: 'HeaderTitle',
-});
-
-const SubHeader = createComponent({
-    tagName: 'm-sub-header',
-    elementClass: SubHeader$1,
-    displayName: 'SubHeader',
-});
-
 const HeaderBackButton = createComponent({
-    tagName: 'm-back-button',
-    elementClass: BackButton,
-    displayName: 'HeaderBackButton',
-});
-
-const Header = createComponent({
-    tagName: 'm-header',
-    elementClass: Header$1,
-    displayName: 'Header',
-    subComponents: {
-        Actions: HeaderActions,
-        Content: HeaderContent,
-        Title: HeaderTitle,
-        SubHeader,
-        BackButton: HeaderBackButton,
-    },
+  tagName: "m-back-button",
+  elementClass: BackButton,
+  displayName: "HeaderBackButton"
+});
+const HeaderTabs = createComponent({
+  tagName: "m-header-tabs",
+  elementClass: HeaderTabs$1,
+  displayName: "HeaderTabs",
+  events: {
+    onTabChange: "tabchange"
+  }
 });
-
-const Icon = createComponent({
-    tagName: 'm-icon',
-    elementClass: Icon$1,
-    displayName: 'Icon',
+const Header2 = createComponent({
+  tagName: "m-header",
+  elementClass: Header$1,
+  displayName: "Header",
+  subComponents: {
+    Actions: HeaderActions2,
+    Content: HeaderContent2,
+    Title: HeaderTitle2,
+    SubHeader: SubHeader2,
+    BackButton: HeaderBackButton,
+    Tabs: HeaderTabs
+  }
+});
+const Icon2 = createComponent({
+  tagName: "m-icon",
+  elementClass: Icon$1,
+  displayName: "Icon"
 });
-
-const LabeledValueLabel = createComponent({
-    tagName: 'm-labeled-value-label',
-    elementClass: LabeledValueLabel$1,
-    displayName: 'LabeledValueLabel',
+const LabeledValueLabel2 = createComponent({
+  tagName: "m-labeled-value-label",
+  elementClass: LabeledValueLabel$1,
+  displayName: "LabeledValueLabel"
 });
-const LabeledValueValue = createComponent({
-    tagName: 'm-labeled-value-value',
-    elementClass: LabeledValueValue$1,
-    displayName: 'LabeledValueValue',
+const LabeledValueValue2 = createComponent({
+  tagName: "m-labeled-value-value",
+  elementClass: LabeledValueValue$1,
+  displayName: "LabeledValueValue"
 });
 const WiredLabeledValue = createComponent({
-    tagName: 'm-labeled-value',
-    elementClass: LabeledValue$1,
-    displayName: 'LabeledValue',
-    subComponents: {
-        Label: LabeledValueLabel,
-        Value: LabeledValueValue,
-    },
+  tagName: "m-labeled-value",
+  elementClass: LabeledValue$1,
+  displayName: "LabeledValue",
+  subComponents: {
+    Label: LabeledValueLabel2,
+    Value: LabeledValueValue2
+  }
 });
-const LabeledValue = Object.assign(forwardRef((props, ref) => {
-    const { label, value, children, valueVariant, valueColor, labelVariant, labelColor, ...rest } = props;
-    return (jsxs(WiredLabeledValue, { ...rest, ref: ref, children: [label != null && (jsx(LabeledValueLabel, { variant: labelVariant, color: labelColor, children: label })), value != null && (jsx(LabeledValueValue, { variant: valueVariant, color: valueColor, children: value })), children] }));
-}), {
-    Label: LabeledValueLabel,
-    Value: LabeledValueValue,
-});
-
-const Box = createComponent({
-    tagName: 'm-box',
-    elementClass: Box$1,
-    displayName: 'Box',
-});
-
-const Group = createComponent({
-    tagName: 'm-group',
-    elementClass: Group$1,
-    displayName: 'Group',
-});
-
-const Stack = createComponent({
-    tagName: 'm-stack',
-    elementClass: Stack$1,
-    displayName: 'Stack',
-});
-
-const Grid = createComponent({
-    tagName: 'm-grid',
-    elementClass: Grid$1,
-    displayName: 'Grid',
-});
-
-const SidebarSide = forwardRef(({ children, ...boxProps }, ref) => {
-    return (jsx(Box, { ...boxProps, slot: "sidebar", ref: ref, children: children }));
-});
-const SidebarContent = forwardRef(({ children, ...boxProps }, ref) => {
-    return (jsx(Box, { ...boxProps, slot: "content", ref: ref, children: children }));
-});
-const Sidebar = createComponent({
-    tagName: 'm-sidebar',
-    elementClass: Sidebar$1,
-    displayName: 'Sidebar',
-    subComponents: {
-        Side: SidebarSide,
-        Content: SidebarContent,
-    },
+const LabeledValue2 = Object.assign(
+  forwardRef((props, ref) => {
+    const {
+      label,
+      value,
+      children,
+      valueVariant,
+      valueColor,
+      labelVariant,
+      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);
+  }),
+  {
+    Label: LabeledValueLabel2,
+    Value: LabeledValueValue2
+  }
+);
+const Box2 = createComponent({
+  tagName: "m-box",
+  elementClass: Box$1,
+  displayName: "Box"
+});
+const Group2 = createComponent({
+  tagName: "m-group",
+  elementClass: Group$1,
+  displayName: "Group"
+});
+const Stack2 = createComponent({
+  tagName: "m-stack",
+  elementClass: Stack$1,
+  displayName: "Stack"
+});
+const Grid2 = createComponent({
+  tagName: "m-grid",
+  elementClass: Grid$1,
+  displayName: "Grid"
+});
+const SidebarSide = forwardRef(
+  ({ children, ...boxProps }, ref) => {
+    return /* @__PURE__ */ React.createElement(Box2, { ...boxProps, slot: "sidebar", ref }, children);
+  }
+);
+const SidebarContent = forwardRef(
+  ({ children, ...boxProps }, ref) => {
+    return /* @__PURE__ */ React.createElement(Box2, { ...boxProps, slot: "content", ref }, children);
+  }
+);
+const Sidebar2 = createComponent({
+  tagName: "m-sidebar",
+  elementClass: Sidebar$1,
+  displayName: "Sidebar",
+  subComponents: {
+    Side: SidebarSide,
+    Content: SidebarContent
+  }
+});
+const Switcher2 = createComponent({
+  tagName: "m-switcher",
+  elementClass: Switcher$1,
+  displayName: "Switcher"
+});
+const Container2 = createComponent({
+  tagName: "m-container",
+  elementClass: Container$1,
+  displayName: "Container"
+});
+const Row2 = createComponent({
+  tagName: "m-row",
+  elementClass: Row$1,
+  displayName: "Row"
+});
+const Column2 = createComponent({
+  tagName: "m-column",
+  elementClass: Column$1,
+  displayName: "Column"
 });
-
-const Switcher = createComponent({
-    tagName: 'm-switcher',
-    elementClass: Switcher$1,
-    displayName: 'Switcher',
-});
-
-const Container = createComponent({
-    tagName: 'm-container',
-    elementClass: Container$1,
-    displayName: 'Container',
-});
-const Row = createComponent({
-    tagName: 'm-row',
-    elementClass: Row$1,
-    displayName: 'Row',
-});
-const Column = createComponent({
-    tagName: 'm-column',
-    elementClass: Column$1,
-    displayName: 'Column',
-});
-
 const Layout = () => {
-    return null;
+  return null;
 };
-Layout.Box = Box;
-Layout.Group = Group;
-Layout.Stack = Stack;
-Layout.Grid = Grid;
-Layout.Sidebar = Sidebar;
-Layout.Switcher = Switcher;
-Layout.Container = Container;
-Layout.Row = Row;
-Layout.Column = Column;
-
-const Link = createComponent({
-    tagName: 'm-link',
-    elementClass: Link$1,
-    displayName: 'Link',
-});
-
+Layout.Box = Box2;
+Layout.Group = Group2;
+Layout.Stack = Stack2;
+Layout.Grid = Grid2;
+Layout.Sidebar = Sidebar2;
+Layout.Switcher = Switcher2;
+Layout.Container = Container2;
+Layout.Row = Row2;
+Layout.Column = Column2;
+const Link2 = createComponent({
+  tagName: "m-link",
+  elementClass: Link$1,
+  displayName: "Link"
+});
 const Body = createComponent({
-    tagName: 'm-body',
-    elementClass: Body$1,
-    displayName: 'Body',
-});
-
-const PageContent = createComponent({
-    tagName: 'm-page-content',
-    elementClass: PageContent$1,
-    displayName: 'PageContent',
-    subComponents: {
-        Body,
-    },
+  tagName: "m-body",
+  elementClass: Body$1,
+  displayName: "Body"
+});
+const PageContent2 = createComponent({
+  tagName: "m-page-content",
+  elementClass: PageContent$1,
+  displayName: "PageContent",
+  subComponents: {
+    Body
+  }
 });
-
-const Pagination = createComponent({
-    tagName: 'm-pagination',
-    elementClass: Pagination$1,
-    displayName: 'Pagination',
-    events: {
-        onChange: 'paginationchange',
-    },
+const Pagination2 = createComponent({
+  tagName: "m-pagination",
+  elementClass: Pagination$1,
+  displayName: "Pagination",
+  events: {
+    onChange: "paginationchange"
+  }
 });
-
-const ProgressBar = createComponent({
-    tagName: 'm-progress-bar',
-    elementClass: ProgressBar$1,
-    displayName: 'ProgressBar',
+const ProgressBar2 = createComponent({
+  tagName: "m-progress-bar",
+  elementClass: ProgressBar$1,
+  displayName: "ProgressBar"
 });
-
-const ProgressBarCountdown = createComponent({
-    tagName: 'm-progress-bar-countdown',
-    elementClass: ProgressBarCountdown$1,
-    displayName: 'ProgressBarCountdown',
+const ProgressBarCountdown2 = createComponent({
+  tagName: "m-progress-bar-countdown",
+  elementClass: ProgressBarCountdown$1,
+  displayName: "ProgressBarCountdown"
 });
-
 const WiredRadio = createComponent({
-    tagName: 'm-radio',
-    elementClass: Radio$1,
-    displayName: 'Radio',
-});
-const Radio = forwardRef((props, ref) => {
-    const { children, leading, ...rest } = props;
-    return (jsxs(WiredRadio, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
-});
-
-const RadioGroup = createComponent({
-    tagName: 'm-radio-group',
-    elementClass: RadioGroup$1,
-    subComponents: {
-        Radio,
-    },
-    events: {
-        onChange: 'change',
-    },
-    displayName: 'RadioGroup',
+  tagName: "m-radio",
+  elementClass: Radio$1,
+  displayName: "Radio"
+});
+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);
+});
+const RadioGroup2 = createComponent({
+  tagName: "m-radio-group",
+  elementClass: RadioGroup$1,
+  subComponents: {
+    Radio: Radio2
+  },
+  events: {
+    onChange: "change"
+  },
+  displayName: "RadioGroup"
 });
-
 const WiredSectionTitle = createComponent({
-    tagName: 'm-section-title',
-    elementClass: SectionTitle$1,
-    displayName: 'SectionTitle',
-});
-const SectionTitle = forwardRef(({ children, leading, ...props }, ref) => {
-    return (jsxs(WiredSectionTitle, { ...props, slot: "title", ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
-});
-
-const Section = createComponent({
-    tagName: 'm-section',
-    elementClass: Section$1,
-    displayName: 'Section',
-    subComponents: {
-        Title: SectionTitle,
-    },
+  tagName: "m-section-title",
+  elementClass: SectionTitle$1,
+  displayName: "SectionTitle"
+});
+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);
+  }
+);
+const Section2 = createComponent({
+  tagName: "m-section",
+  elementClass: Section$1,
+  displayName: "Section",
+  subComponents: {
+    Title: SectionTitle2
+  }
 });
-
 const WiredSelectOption = createComponent({
-    tagName: 'm-option',
-    elementClass: SelectOption$1,
-    displayName: 'SelectOption',
+  tagName: "m-option",
+  elementClass: SelectOption$1,
+  displayName: "SelectOption"
 });
-const SLOTTED_STYLE$1 = { display: 'contents' };
-const SelectOption = forwardRef((props, ref) => {
+const SLOTTED_STYLE$3 = { display: "contents" };
+const SelectOption = forwardRef(
+  (props, ref) => {
     const { leading, trailing, children, ...rest } = props;
-    return (jsxs(WiredSelectOption, { ...rest, ref: ref, children: [leading != null && (jsx("span", { style: SLOTTED_STYLE$1, slot: "leading", children: leading })), children, trailing != null && (jsx("span", { style: SLOTTED_STYLE$1, slot: "trailing", children: trailing }))] }));
-});
-SelectOption.displayName = 'SelectOption';
-
+    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));
+  }
+);
+SelectOption.displayName = "SelectOption";
 const WiredSelect = createComponent({
-    tagName: 'm-select',
-    elementClass: Select$1,
-    events: {
-        onExpand: 'expand',
-        onCollapse: 'collapse',
-        onChange: 'change',
-    },
-    displayName: 'Select',
+  tagName: "m-select",
+  elementClass: Select$1,
+  events: {
+    onExpand: "expand",
+    onCollapse: "collapse",
+    onChange: "change"
+  },
+  displayName: "Select"
 });
-const SLOTTED_STYLE = { display: 'contents' };
+const SLOTTED_STYLE$2 = { display: "contents" };
 function Select(props) {
-    const { options, children, ...rest } = props;
-    return (jsx(WiredSelect, { ...rest, children: children ||
-            (options || []).map(function renderOption(option) {
-                const { label, leading, trailing, value: optionValue, ...others } = option;
-                return (jsxs(SelectOption, { ...others, value: optionValue, children: [leading != null && (jsx("span", { style: SLOTTED_STYLE, slot: "leading", children: leading })), label, trailing != null && (jsx("span", { style: SLOTTED_STYLE, slot: "trailing", children: trailing }))] }, optionValue));
-            }) }));
+  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));
+  }));
 }
 Select.Option = SelectOption;
-
-const SpinnerWheel = createComponent({
-    tagName: 'm-spinner-wheel',
-    elementClass: SpinnerWheel$1,
-    displayName: 'SpinnerWheel',
-});
-
-const Step = createComponent({
-    tagName: 'm-step',
-    elementClass: Step$1,
-    displayName: 'Step',
-});
-
-const Steps = createComponent({
-    tagName: 'm-steps',
-    elementClass: Steps$1,
-    displayName: 'Steps',
-    events: {
-        onChange: 'stepchange',
-        onComplete: 'stepcomplete',
-        onNavigate: 'navigate',
-        onNext: 'navigatenext',
-        onPrevious: 'navigateprevious',
-    },
-    subComponents: {
-        Step,
-    },
+const SpinnerWheel2 = createComponent({
+  tagName: "m-spinner-wheel",
+  elementClass: SpinnerWheel$1,
+  displayName: "SpinnerWheel"
+});
+const Step2 = createComponent({
+  tagName: "m-step",
+  elementClass: Step$1,
+  displayName: "Step"
+});
+const Steps2 = createComponent({
+  tagName: "m-steps",
+  elementClass: Steps$1,
+  displayName: "Steps",
+  events: {
+    onChange: "stepchange",
+    onComplete: "stepcomplete",
+    onNavigate: "navigate",
+    onNext: "navigatenext",
+    onPrevious: "navigateprevious"
+  },
+  subComponents: {
+    Step: Step2
+  }
 });
-
 function createCustomEvent(eventName, detail) {
-    const event = new CustomEvent(eventName, {
-        bubbles: true,
-        detail,
-    });
-    return event;
+  const event = new CustomEvent(eventName, {
+    bubbles: true,
+    detail
+  });
+  return event;
 }
 function useSteps() {
-    const [stepsElement, setStepsElement] = useState(null);
-    const registerSteps = useCallback(() => {
-        return {
-            ref(element) {
-                if (element == null || stepsElement != null) {
-                    return;
-                }
-                setStepsElement(element);
-            },
-        };
-    }, [stepsElement]);
-    const navigateToStep = useCallback(
+  const [stepsElement, setStepsElement] = useState(null);
+  const registerSteps = useCallback(() => {
+    return {
+      ref(element) {
+        if (element == null || stepsElement != null) {
+          return;
+        }
+        setStepsElement(element);
+      }
+    };
+  }, [stepsElement]);
+  const navigateToStep = useCallback(
     /**
      * Either `'previous'`, `'next'`, or step name.
      */
     (step) => {
-        if (stepsElement == null) {
-            return;
-        }
-        const navigateToNextStep = () => {
-            return createCustomEvent('navigatenext');
-        };
-        const navigateToPreviousStep = () => {
-            return createCustomEvent('navigateprevious');
-        };
-        let event;
-        switch (step) {
-            case 'next':
-                event = navigateToNextStep();
-                break;
-            case 'previous':
-                event = navigateToPreviousStep();
-                break;
-            default:
-                event = createCustomEvent('navigate', {
-                    step,
-                });
-        }
-        stepsElement.dispatchEvent(event);
-    }, [stepsElement]);
-    const completeStep = useCallback(() => {
-        if (stepsElement == null) {
-            return;
-        }
-        const event = createCustomEvent('stepcomplete');
-        stepsElement.dispatchEvent(event);
-    }, [stepsElement]);
-    return {
-        elementRef: stepsElement,
-        registerSteps,
-        navigateToStep,
-        completeStep,
-    };
-}
-
-const Switch = createComponent({
-    tagName: 'm-switch',
-    elementClass: Switch$1,
-    displayName: 'Switch',
-    events: {
-        onChange: 'change',
+      if (stepsElement == null) {
+        return;
+      }
+      const navigateToNextStep = () => {
+        return createCustomEvent("navigatenext");
+      };
+      const navigateToPreviousStep = () => {
+        return createCustomEvent("navigateprevious");
+      };
+      let event;
+      switch (step) {
+        case "next":
+          event = navigateToNextStep();
+          break;
+        case "previous":
+          event = navigateToPreviousStep();
+          break;
+        default:
+          event = createCustomEvent("navigate", {
+            step
+          });
+      }
+      stepsElement.dispatchEvent(event);
     },
+    [stepsElement]
+  );
+  const completeStep = useCallback(() => {
+    if (stepsElement == null) {
+      return;
+    }
+    const event = createCustomEvent("stepcomplete");
+    stepsElement.dispatchEvent(event);
+  }, [stepsElement]);
+  return {
+    elementRef: stepsElement,
+    registerSteps,
+    navigateToStep,
+    completeStep
+  };
+}
+const Switch2 = createComponent({
+  tagName: "m-switch",
+  elementClass: Switch$1,
+  displayName: "Switch",
+  events: {
+    onChange: "change"
+  }
 });
-
-const TableHead = createComponent({
-    tagName: 'm-table-head',
-    elementClass: TableHead$1,
-    displayName: 'TableHead',
-});
-
-const TableBody = createComponent({
-    tagName: 'm-table-body',
-    elementClass: TableBody$1,
-    displayName: 'TableBody',
-});
-
-const TableFoot = createComponent({
-    tagName: 'm-table-foot',
-    elementClass: TableFoot$1,
-    displayName: 'TableFoot',
-});
-
-const TableRow = createComponent({
-    tagName: 'm-table-row',
-    elementClass: TableRow$1,
-    displayName: 'TableRow',
-});
-
-const TableCell = createComponent({
-    tagName: 'm-table-cell',
-    elementClass: TableCell$1,
-    displayName: 'TableCell',
-});
-
-const TableToolbar = createComponent({
-    tagName: 'm-table-toolbar',
-    elementClass: TableToolbar$1,
-    displayName: 'TableToolbar',
-});
-
-const TableHeadCell = createComponent({
-    tagName: 'm-table-head-cell',
-    elementClass: TableHeadCell$1,
-    displayName: 'TableHeadCell',
-    events: {
-        onSort: 'columnsort',
-    },
+const TableHead2 = createComponent({
+  tagName: "m-table-head",
+  elementClass: TableHead$1,
+  displayName: "TableHead"
+});
+const TableBody2 = createComponent({
+  tagName: "m-table-body",
+  elementClass: TableBody$1,
+  displayName: "TableBody"
+});
+const TableFoot2 = createComponent({
+  tagName: "m-table-foot",
+  elementClass: TableFoot$1,
+  displayName: "TableFoot"
+});
+const TableRow2 = createComponent({
+  tagName: "m-table-row",
+  elementClass: TableRow$1,
+  displayName: "TableRow"
+});
+const TableCell2 = createComponent({
+  tagName: "m-table-cell",
+  elementClass: TableCell$1,
+  displayName: "TableCell"
+});
+const TableToolbar2 = createComponent({
+  tagName: "m-table-toolbar",
+  elementClass: TableToolbar$1,
+  displayName: "TableToolbar"
+});
+const TableHeadCell2 = createComponent({
+  tagName: "m-table-head-cell",
+  elementClass: TableHeadCell$1,
+  displayName: "TableHeadCell",
+  events: {
+    onSort: "columnsort"
+  }
 });
-
-const TableFeedback = createComponent({
-    tagName: 'm-table-feedback',
-    elementClass: TableFeedback$1,
-    displayName: 'TableFeedback',
-});
-
-const TableActions = createComponent({
-    tagName: 'm-table-actions',
-    elementClass: TableActions$1,
-    displayName: 'TableActions',
-});
-
-const Table = createComponent({
-    tagName: 'm-table',
-    elementClass: Table$1,
-    displayName: 'Table',
-    subComponents: {
-        Head: TableHead,
-        Body: TableBody,
-        Foot: TableFoot,
-        Row: TableRow,
-        HeadCell: TableHeadCell,
-        Cell: TableCell,
-        Toolbar: TableToolbar,
-        Feedback: TableFeedback,
-        Actions: TableActions,
-    },
+const TableFeedback2 = createComponent({
+  tagName: "m-table-feedback",
+  elementClass: TableFeedback$1,
+  displayName: "TableFeedback"
+});
+const TableActions2 = createComponent({
+  tagName: "m-table-actions",
+  elementClass: TableActions$1,
+  displayName: "TableActions"
+});
+const TableSelectionCell = createComponent({
+  tagName: "m-table-selection-cell",
+  elementClass: TableSelectionCell$1,
+  displayName: "TableSelectionCell"
+});
+const Table2 = createComponent({
+  tagName: "m-table",
+  elementClass: Table$1,
+  displayName: "Table",
+  events: {
+    onSelect: "select"
+  },
+  subComponents: {
+    Head: TableHead2,
+    Body: TableBody2,
+    Foot: TableFoot2,
+    Row: TableRow2,
+    HeadCell: TableHeadCell2,
+    Cell: TableCell2,
+    SelectionCell: TableSelectionCell,
+    Toolbar: TableToolbar2,
+    Feedback: TableFeedback2,
+    Actions: TableActions2
+  }
 });
-
 const WiredTab = createComponent({
-    tagName: 'm-tab',
-    elementClass: Tab$1,
-    displayName: 'Tab',
-});
-const Tab = forwardRef(({ children, leading, ...props }, ref) => {
-    return (jsxs(WiredTab, { ...props, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
-});
-
-const TabPanel = createComponent({
-    tagName: 'm-tab-panel',
-    elementClass: TabPanel$1,
-    displayName: 'TabPanel',
-});
-
-const Tabs = createComponent({
-    tagName: 'm-tabs',
-    elementClass: Tabs$1,
-    events: {
-        onTabChange: 'tabchange',
-    },
-    displayName: 'Tabs',
-    subComponents: {
-        Tab,
-        Panel: TabPanel,
-    },
+  tagName: "m-tab",
+  elementClass: Tab$1,
+  displayName: "Tab"
+});
+const Tab2 = forwardRef(
+  ({ children, leading, ...props }, ref) => {
+    return /* @__PURE__ */ React.createElement(WiredTab, { ...props, ref }, leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading" }, leading), children);
+  }
+);
+const TabPanel2 = createComponent({
+  tagName: "m-tab-panel",
+  elementClass: TabPanel$1,
+  displayName: "TabPanel"
+});
+const Tabs2 = createComponent({
+  tagName: "m-tabs",
+  elementClass: Tabs$1,
+  events: {
+    onTabChange: "tabchange"
+  },
+  displayName: "Tabs",
+  subComponents: {
+    Tab: Tab2,
+    Panel: TabPanel2
+  }
 });
-
 const WiredTag = createComponent({
-    tagName: 'm-tag',
-    elementClass: Tag$1,
-    displayName: 'Tag',
+  tagName: "m-tag",
+  elementClass: Tag$1,
+  displayName: "Tag"
 });
-const Tag = forwardRef((props, ref) => {
-    const { leading, children, ...rest } = props;
-    return (jsxs(WiredTag, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
+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);
 });
-
 const WiredActionableTag = createComponent({
-    tagName: 'm-actionable-tag',
-    elementClass: ActionableTag$1,
-    displayName: 'ActionableTag',
-    events: {
-        onChange: 'change',
-        onRemove: 'remove',
-    },
+  tagName: "m-actionable-tag",
+  elementClass: ActionableTag$1,
+  displayName: "ActionableTag",
+  events: {
+    onChange: "change",
+    onRemove: "remove"
+  }
 });
-const ActionableTag = forwardRef((props, ref) => {
+const SLOTTED_STYLE = { display: "contents" };
+const ActionableTag2 = forwardRef(
+  (props, ref) => {
     const { leading, children, selectable, removable, ...rest } = props;
-    return (jsxs(WiredActionableTag, { ...rest, selectable: selectable || Boolean(rest.onChange), removable: removable || Boolean(rest.onRemove), ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
-});
-
-const Text = createComponent({
-    tagName: 'm-text',
-    elementClass: Text$1,
-    displayName: 'Text',
+    return /* @__PURE__ */ React.createElement(
+      WiredActionableTag,
+      {
+        ...rest,
+        selectable: selectable || Boolean(rest.onChange),
+        removable: removable || Boolean(rest.onRemove),
+        ref
+      },
+      leading != null && /* @__PURE__ */ React.createElement("span", { slot: "leading", style: SLOTTED_STYLE }, leading),
+      children
+    );
+  }
+);
+const Text2 = createComponent({
+  tagName: "m-text",
+  elementClass: Text$1,
+  displayName: "Text"
 });
-
 const WiredTextArea = createComponent({
-    tagName: 'm-text-area',
-    elementClass: TextArea$1,
-    events: {
-        onInput: 'input',
-        onChange: 'change',
-    },
-    displayName: 'TextArea',
+  tagName: "m-text-area",
+  elementClass: TextArea$1,
+  events: {
+    onInput: "input",
+    onChange: "change"
+  },
+  displayName: "TextArea"
 });
-function TextArea(props) {
-    return jsx(WiredTextArea, { ...props });
+function TextArea2(props) {
+  return /* @__PURE__ */ React.createElement(WiredTextArea, { ...props });
 }
-
 const WiredTextField = createComponent({
-    tagName: 'm-text-field',
-    elementClass: TextField$1,
-    events: {
-        onInput: 'input',
-        onChange: 'change',
-        onClear: 'clear',
-    },
-    displayName: 'TextField',
-});
-const TextField = forwardRef(({ leading, trailing, ...rest }, ref) => {
-    return (jsxs(WiredTextField, { ...rest, ref: ref, children: [leading != null && jsx("div", { slot: "leading", children: leading }), trailing != null && jsx("div", { slot: "trailing", children: trailing })] }));
-});
-
-const TimelineItem = createComponent({
-    tagName: 'm-timeline-item',
-    elementClass: TimelineItem$1,
-    displayName: 'TimelineItem',
-});
-
-const TimelineExpandableItem = createComponent({
-    tagName: 'm-timeline-expandable-item',
-    elementClass: TimelineExpandableItem$1,
-    displayName: 'TimelineExpandableItem',
-});
-
-const TimelineItemBody = createComponent({
-    tagName: 'm-timeline-item-body',
-    elementClass: TimelineItemBody$1,
-    displayName: 'TimelineItemBody',
-});
-
-const TimelineItemFooter = createComponent({
-    tagName: 'm-timeline-item-footer',
-    elementClass: TimelineItemFooter$1,
-    displayName: 'TimelineItemFooter',
-});
-
-const TimelineItemHeader = createComponent({
-    tagName: 'm-timeline-item-header',
-    elementClass: TimelineItemHeader$1,
-    displayName: 'TimelineItemHeader',
-});
-
-const TimelineItemHeaderSubtitle = createComponent({
-    tagName: 'm-timeline-item-header-subtitle',
-    elementClass: TimelineItemHeaderSubtitle$1,
-    displayName: 'TimelineItemHeaderSubtitle',
-});
-
-const TimelineItemHeaderTitle = createComponent({
-    tagName: 'm-timeline-item-header-title',
-    elementClass: TimelineItemHeaderTitle$1,
-    displayName: 'TimelineItemHeaderTitle',
-});
-
-const TimelineItemIcon = createComponent({
-    tagName: 'm-timeline-item-icon',
-    elementClass: TimelineItemIcon$1,
-    displayName: 'TimelineItemIcon',
-});
-
-const Timeline = createComponent({
-    tagName: 'm-timeline',
-    elementClass: Timeline$1,
-    displayName: 'Timeline',
-    subComponents: {
-        Item: TimelineItem,
-        ExpandableItem: TimelineExpandableItem,
-        ItemBody: TimelineItemBody,
-        ItemFooter: TimelineItemFooter,
-        ItemHeader: TimelineItemHeader,
-        ItemHeaderTitle: TimelineItemHeaderTitle,
-        ItemHeaderSubtitle: TimelineItemHeaderSubtitle,
-        ItemIcon: TimelineItemIcon,
-    },
+  tagName: "m-text-field",
+  elementClass: TextField$1,
+  events: {
+    onInput: "input",
+    onChange: "change",
+    onClear: "clear"
+  },
+  displayName: "TextField"
+});
+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));
+  }
+);
+const TimelineItem2 = createComponent({
+  tagName: "m-timeline-item",
+  elementClass: TimelineItem$1,
+  displayName: "TimelineItem"
+});
+const TimelineExpandableItem2 = createComponent({
+  tagName: "m-timeline-expandable-item",
+  elementClass: TimelineExpandableItem$1,
+  displayName: "TimelineExpandableItem"
+});
+const TimelineItemBody2 = createComponent({
+  tagName: "m-timeline-item-body",
+  elementClass: TimelineItemBody$1,
+  displayName: "TimelineItemBody"
+});
+const TimelineItemFooter2 = createComponent({
+  tagName: "m-timeline-item-footer",
+  elementClass: TimelineItemFooter$1,
+  displayName: "TimelineItemFooter"
+});
+const TimelineItemHeader2 = createComponent({
+  tagName: "m-timeline-item-header",
+  elementClass: TimelineItemHeader$1,
+  displayName: "TimelineItemHeader"
+});
+const TimelineItemHeaderSubtitle2 = createComponent({
+  tagName: "m-timeline-item-header-subtitle",
+  elementClass: TimelineItemHeaderSubtitle$1,
+  displayName: "TimelineItemHeaderSubtitle"
+});
+const TimelineItemHeaderTitle2 = createComponent({
+  tagName: "m-timeline-item-header-title",
+  elementClass: TimelineItemHeaderTitle$1,
+  displayName: "TimelineItemHeaderTitle"
+});
+const TimelineItemIcon2 = createComponent({
+  tagName: "m-timeline-item-icon",
+  elementClass: TimelineItemIcon$1,
+  displayName: "TimelineItemIcon"
+});
+const Timeline2 = createComponent({
+  tagName: "m-timeline",
+  elementClass: Timeline$1,
+  displayName: "Timeline",
+  subComponents: {
+    Item: TimelineItem2,
+    ExpandableItem: TimelineExpandableItem2,
+    ItemBody: TimelineItemBody2,
+    ItemFooter: TimelineItemFooter2,
+    ItemHeader: TimelineItemHeader2,
+    ItemHeaderTitle: TimelineItemHeaderTitle2,
+    ItemHeaderSubtitle: TimelineItemHeaderSubtitle2,
+    ItemIcon: TimelineItemIcon2
+  }
 });
-
 const WiredToggle = createComponent({
-    tagName: 'm-toggle',
-    elementClass: Toggle$1,
-    displayName: 'Toggle',
+  tagName: "m-toggle",
+  elementClass: Toggle$1,
+  displayName: "Toggle"
 });
-const Toggle = forwardRef((props, ref) => {
-    const { children, leading, ...rest } = props;
-    return (jsxs(WiredToggle, { ...rest, ref: ref, children: [leading != null && jsx("span", { slot: "leading", children: leading }), children] }));
+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);
 });
-
 const WiredToggleGroup = createComponent({
-    tagName: 'm-toggle-group',
-    elementClass: ToggleGroup$1,
-    events: {
-        onChange: 'change',
+  tagName: "m-toggle-group",
+  elementClass: ToggleGroup$1,
+  events: {
+    onChange: "change"
+  },
+  displayName: "ToggleGroup"
+});
+function ToggleGroup2({
+  options,
+  children,
+  onChange,
+  ...rest
+}) {
+  return /* @__PURE__ */ React.createElement(
+    WiredToggleGroup,
+    {
+      onChange,
+      ...rest
     },
-    displayName: 'ToggleGroup',
-});
-function ToggleGroup(props) {
-    const { options, children, ...rest } = props;
-    return (jsx(WiredToggleGroup, { ...rest, children: children !== null && children !== void 0 ? children : (options || []).map(function renderOption(option) {
-            const { label, value: optionValue, ...others } = option;
-            return (jsx(Toggle, { ...others, value: optionValue, children: label }, optionValue));
-        }) }));
+    children ?? (options || []).map(function renderOption(option) {
+      const { label, value: optionValue, ...others } = option;
+      return /* @__PURE__ */ React.createElement(Toggle2, { key: optionValue, ...others, value: optionValue }, label);
+    })
+  );
 }
-ToggleGroup.Toggle = Toggle;
-
+ToggleGroup2.Toggle = Toggle2;
 const WiredTooltip = createComponent({
-    tagName: 'm-tooltip',
-    elementClass: Tooltip$1,
-    displayName: 'Tooltip',
-});
-function Tooltip(props) {
-    const { children, message, ...rest } = props;
-    return jsx(WiredTooltip, { ...rest, children: message !== null && message !== void 0 ? message : children });
+  tagName: "m-tooltip",
+  elementClass: Tooltip$1,
+  displayName: "Tooltip"
+});
+let counter = 0;
+function generateId(prefix = "tt-anchor") {
+  counter += 1;
+  const id = `m-${prefix}-${counter}`;
+  if (counter === Number.MAX_SAFE_INTEGER) {
+    counter = 0;
+  }
+  return id;
 }
-
-const LogoLoader = createComponent({
-    tagName: 'm-logo-loader',
-    elementClass: LogoLoader$1,
-    displayName: 'LogoLoader',
-});
-
-export { Accordion, ActionableTag, Badge, Banner, Box, Button, Card, Checkbox, Column, Container, Dialog, Divider, Drawer, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, EmptyState, Field, Grid, Group, Header, HeaderActions, HeaderTitle, Icon, LabeledValue, LabeledValueLabel, LabeledValueValue, Layout, Link, LogoLoader, PageContent, Pagination, ProgressBar, ProgressBarCountdown, Radio, RadioGroup, Row, Section, Select, 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, useSteps };
+function Tooltip2(props) {
+  const { children, message, ...rest } = props;
+  const child = Children.only(children);
+  if (isFragment(child) || !isValidElement(child)) {
+    console.error(
+      "Tooltip must wrap a single and valid child element (Fragment is not accepted)."
+    );
+    return null;
+  }
+  const [anchorId, childWithId] = (() => {
+    const elementWithID = child;
+    const { id } = elementWithID.props;
+    if (id) {
+      return [id, elementWithID];
+    }
+    const generatedAnchorId = generateId();
+    return [
+      generatedAnchorId,
+      cloneElement(elementWithID, {
+        id: generatedAnchorId
+      })
+    ];
+  })();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(WiredTooltip, { anchor: anchorId, ...rest }, message), childWithId);
+}
+const LogoLoader2 = createComponent({
+  tagName: "m-logo-loader",
+  elementClass: LogoLoader$1,
+  displayName: "LogoLoader"
+});
+const DotsLoader = createComponent({
+  tagName: "m-dots-loader",
+  elementClass: DotsLoader$1,
+  displayName: "DotsLoader"
+});
+export {
+  Accordion2 as Accordion,
+  ActionableTag2 as ActionableTag,
+  Badge2 as Badge,
+  Banner2 as Banner,
+  Box2 as Box,
+  Button2 as Button,
+  Card2 as Card,
+  Checkbox2 as Checkbox,
+  Column2 as Column,
+  Container2 as Container,
+  DIALOG_SIZES,
+  DIALOG_VARIANTS,
+  DRAWER_SIZES,
+  Dialog2 as Dialog,
+  Divider2 as Divider,
+  DotsLoader,
+  Drawer2 as Drawer,
+  Dropdown2 as Dropdown,
+  DropdownItem2 as DropdownItem,
+  DropdownMenu2 as DropdownMenu,
+  DropdownTrigger2 as DropdownTrigger,
+  EMPTY_STATE_VARIANTS,
+  EmptyState2 as EmptyState,
+  Field2 as Field,
+  Grid2 as Grid,
+  Group2 as Group,
+  Header2 as Header,
+  HeaderActions2 as HeaderActions,
+  HeaderTabs,
+  HeaderTitle2 as HeaderTitle,
+  Icon2 as Icon,
+  LabeledValue2 as LabeledValue,
+  LabeledValueLabel2 as LabeledValueLabel,
+  LabeledValueValue2 as LabeledValueValue,
+  Layout,
+  Link2 as Link,
+  LogoLoader2 as LogoLoader,
+  PageContent2 as PageContent,
+  Pagination2 as Pagination,
+  ProgressBar2 as ProgressBar,
+  ProgressBarCountdown2 as ProgressBarCountdown,
+  Radio2 as Radio,
+  RadioGroup2 as RadioGroup,
+  Row2 as Row,
+  Section2 as Section,
+  Select,
+  Sidebar2 as Sidebar,
+  SpinnerWheel2 as SpinnerWheel,
+  Stack2 as Stack,
+  Step2 as Step,
+  Steps2 as Steps,
+  SubHeader2 as SubHeader,
+  Switch2 as Switch,
+  Switcher2 as Switcher,
+  Tab2 as Tab,
+  TabPanel2 as TabPanel,
+  Table2 as Table,
+  TableActions2 as TableActions,
+  TableBody2 as TableBody,
+  TableCell2 as TableCell,
+  TableFeedback2 as TableFeedback,
+  TableFoot2 as TableFoot,
+  TableHead2 as TableHead,
+  TableHeadCell2 as TableHeadCell,
+  TableRow2 as TableRow,
+  TableSelectionCell,
+  TableToolbar2 as TableToolbar,
+  Tabs2 as Tabs,
+  Tag2 as Tag,
+  Text2 as Text,
+  TextArea2 as TextArea,
+  TextField2 as TextField,
+  Timeline2 as Timeline,
+  TimelineExpandableItem2 as TimelineExpandableItem,
+  TimelineItem2 as TimelineItem,
+  TimelineItemBody2 as TimelineItemBody,
+  TimelineItemFooter2 as TimelineItemFooter,
+  TimelineItemHeader2 as TimelineItemHeader,
+  TimelineItemHeaderSubtitle2 as TimelineItemHeaderSubtitle,
+  TimelineItemHeaderTitle2 as TimelineItemHeaderTitle,
+  TimelineItemIcon2 as TimelineItemIcon,
+  Toggle2 as Toggle,
+  ToggleGroup2 as ToggleGroup,
+  Tooltip2 as Tooltip,
+  Accordion as WCAccordion,
+  AccordionContent as WCAccordionContent,
+  AccordionTitle as WCAccordionTitle,
+  ActionableTag as WCActionableTag,
+  Badge as WCBadge,
+  Banner as WCBanner,
+  BannerActionPrimary as WCBannerActionPrimary,
+  BannerActionSecondary as WCBannerActionSecondary,
+  BannerActions as WCBannerActions,
+  BannerDescription as WCBannerDescription,
+  BannerIcon as WCBannerIcon,
+  BannerTitle as WCBannerTitle,
+  Box as WCBox,
+  Button as WCButton,
+  Card as WCCard,
+  CardActionPrimary as WCCardActionPrimary,
+  CardActionSecondary as WCCardActionSecondary,
+  CardActionTertiary as WCCardActionTertiary,
+  CardBody as WCCardBody,
+  CardDivider as WCCardDivider,
+  CardFooter as WCCardFooter,
+  CardSubtitle as WCCardSubtitle,
+  CardTitle as WCCardTitle,
+  Checkbox as WCCheckbox,
+  Column as WCColumn,
+  Container as WCContainer,
+  Dialog as WCDialog,
+  DialogActionPrimary as WCDialogActionPrimary,
+  DialogActionSecondary as WCDialogActionSecondary,
+  DialogActionTertiary as WCDialogActionTertiary,
+  DialogActions as WCDialogActions,
+  DialogBody as WCDialogBody,
+  DialogClose as WCDialogClose,
+  DialogFooter as WCDialogFooter,
+  DialogHeader as WCDialogHeader,
+  Divider as WCDivider,
+  Drawer as WCDrawer,
+  DrawerActionPrimary as WCDrawerActionPrimary,
+  DrawerActionSecondary as WCDrawerActionSecondary,
+  DrawerActionTertiary as WCDrawerActionTertiary,
+  DrawerActions as WCDrawerActions,
+  DrawerBody as WCDrawerBody,
+  DrawerClose as WCDrawerClose,
+  DrawerHeader as WCDrawerHeader,
+  Dropdown as WCDropdown,
+  DropdownItem as WCDropdownItem,
+  DropdownMenu as WCDropdownMenu,
+  DropdownTrigger as WCDropdownTrigger,
+  EmptyState as WCEmptyState,
+  EmptyStateAction as WCEmptyStateAction,
+  EmptyStateHeader as WCEmptyStateHeader,
+  EmptyStateIllustration as WCEmptyStateIllustration,
+  EmptyStateMessage as WCEmptyStateMessage,
+  Field as WCField,
+  FieldHint as WCFieldHint,
+  FieldLabel as WCFieldLabel,
+  Grid as WCGrid,
+  Group as WCGroup,
+  Header as WCHeader,
+  HeaderActions as WCHeaderActions,
+  HeaderContent as WCHeaderContent,
+  HeaderTitle as WCHeaderTitle,
+  Icon as WCIcon,
+  LabeledValue as WCLabeledValue,
+  LabeledValueLabel as WCLabeledValueLabel,
+  LabeledValueValue as WCLabeledValueValue,
+  Link as WCLink,
+  LogoLoader as WCLogoLoader,
+  PageContent as WCPageContent,
+  Pagination as WCPagination,
+  ProgressBar as WCProgressBar,
+  ProgressBarCountdown as WCProgressBarCountdown,
+  Radio as WCRadio,
+  RadioGroup as WCRadioGroup,
+  Row as WCRow,
+  Section as WCSection,
+  SectionTitle as WCSectionTitle,
+  Sidebar as WCSidebar,
+  SpinnerWheel as WCSpinnerWheel,
+  Stack as WCStack,
+  Step as WCStep,
+  Steps as WCSteps,
+  SubHeader as WCSubHeader,
+  Switch as WCSwitch,
+  Switcher as WCSwitcher,
+  Tab as WCTab,
+  TabPanel as WCTabPanel,
+  Table as WCTable,
+  TableActions as WCTableActions,
+  TableBody as WCTableBody,
+  TableCell as WCTableCell,
+  TableFeedback as WCTableFeedback,
+  TableFoot as WCTableFoot,
+  TableHead as WCTableHead,
+  TableHeadCell as WCTableHeadCell,
+  TableRow as WCTableRow,
+  TableToolbar as WCTableToolbar,
+  Tabs as WCTabs,
+  Tag as WCTag,
+  Text as WCText,
+  TextArea as WCTextArea,
+  TextField as WCTextField,
+  Timeline as WCTimeline,
+  TimelineExpandableItem as WCTimelineExpandableItem,
+  TimelineItem as WCTimelineItem,
+  TimelineItemBody as WCTimelineItemBody,
+  TimelineItemFooter as WCTimelineItemFooter,
+  TimelineItemHeader as WCTimelineItemHeader,
+  TimelineItemHeaderSubtitle as WCTimelineItemHeaderSubtitle,
+  TimelineItemHeaderTitle as WCTimelineItemHeaderTitle,
+  TimelineItemIcon as WCTimelineItemIcon,
+  Toggle as WCToggle,
+  ToggleGroup as WCToggleGroup,
+  Tooltip as WCTooltip,
+  useSteps
+};