@inera/ids-react 2.3.0 → 2.4.0

package/api.d.ts

@@ -46,3 +46,4 @@ export * from "./components/tooltip/tooltip";
 export * from "./components/navigation/content/navigation-content";
 export * from "./components/carousel/carousel";
 export * from "./components/tag/tag";
+export * from "./components/stepper/stepper";

package/api.js

@@ -9,7 +9,7 @@ export { IDSSelect } from './components/form/select/select.js';
 export { IDSSelectMultiple } from './components/form/selectmultiple/select-multiple.js';
 export { IDSErrorMessage } from './components/form/errormessage/error-message.js';
 export { IDSTime } from './components/form/time/time.js';
-export { IDSSpinner, IDSSpinnerWebComponent } from './components/form/spinner/spinner.js';
+export { IDSSpinner } from './components/form/spinner/spinner.js';
 export { IDSIcon } from './components/icon/icon.js';
 export { IDSButton } from './components/button/button.js';
 export { IDSButtonGroup } from './components/button/button-group.js';
@@ -46,3 +46,4 @@ export { IDSTooltip } from './components/tooltip/tooltip.js';
 export { IDSNavigationContent } from './components/navigation/content/navigation-content.js';
 export { IDSCarousel, IDSCarouselItem } from './components/carousel/carousel.js';
 export { IDSTag } from './components/tag/tag.js';
+export { IDSStep, IDSStepper } from './components/stepper/stepper.js';

package/components/agent/agent.js

@@ -3,8 +3,13 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/agent/register';
 import { IDSAgent as IDSAgent$1 } from '@inera/ids-core/components/agent/agent-element';
 
-var IDSAgent = createComponent(React__default, 'ids-agent', IDSAgent$1, {
-    onDidToggleExpansion: 'didToggleExpansion'
+var IDSAgent = createComponent({
+    tagName: 'ids-agent',
+    elementClass: IDSAgent$1,
+    react: React__default,
+    events: {
+        onDidToggleExpansion: 'didToggleExpansion'
+    },
 });
 
 export { IDSAgent };

package/components/badge/badge.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/badge/register';
 import { IDSBadge as IDSBadge$1 } from '@inera/ids-core/components/badge/badge-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSBadge = createComponent(React, 'ids-badge', IDSBadge$1);
+var IDSBadge = createComponent({
+    tagName: 'ids-badge',
+    elementClass: IDSBadge$1,
+    react: React,
+});
 
 export { IDSBadge };

package/components/breadcrumbs/breacrumbs.js

@@ -4,7 +4,15 @@ import { IDSBreadcrumbs as IDSBreadcrumbs$1 } from '@inera/ids-core/components/b
 import { IDSCrumb as IDSCrumb$1 } from '@inera/ids-core/components/breadcrumbs/crumb/crumb-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSBreadcrumbs = createComponent(React, 'ids-breadcrumbs', IDSBreadcrumbs$1);
-var IDSCrumb = createComponent(React, 'ids-crumb', IDSCrumb$1);
+var IDSBreadcrumbs = createComponent({
+    tagName: 'ids-breadcrumbs',
+    elementClass: IDSBreadcrumbs$1,
+    react: React,
+});
+var IDSCrumb = createComponent({
+    tagName: 'ids-crumb',
+    elementClass: IDSCrumb$1,
+    react: React,
+});
 
 export { IDSBreadcrumbs, IDSCrumb };

package/components/button/button-group.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/button-group/register';
 import { IDSButtonGroup as IDSButtonGroup$1 } from '@inera/ids-core/components/button-group/button-group-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSButtonGroup = createComponent(React, 'ids-button-group', IDSButtonGroup$1);
+var IDSButtonGroup = createComponent({
+    tagName: 'ids-button-group',
+    elementClass: IDSButtonGroup$1,
+    react: React,
+});
 
 export { IDSButtonGroup };

package/components/button/button.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/button/register';
 import { IDSButton as IDSButton$1 } from '@inera/ids-core/components/button/button-element';
 
-var IDSButton = createComponent(React, 'ids-button', IDSButton$1);
+var IDSButton = createComponent({
+    tagName: 'ids-button',
+    elementClass: IDSButton$1,
+    react: React,
+});
 
 export { IDSButton };

package/components/card/card.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/card/register';
 import { IDSCard as IDSCard$1 } from '@inera/ids-core/components/card/card-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSCard = createComponent(React, 'ids-card', IDSCard$1);
+var IDSCard = createComponent({
+    tagName: 'ids-card',
+    elementClass: IDSCard$1,
+    react: React,
+});
 
 export { IDSCard };

package/components/carousel/carousel.js

@@ -4,7 +4,15 @@ import { IDSCarousel as IDSCarousel$1 } from '@inera/ids-core/components/carouse
 import { IDSCarouselItem as IDSCarouselItem$1 } from '@inera/ids-core/components/carousel/carousel-item/carousel-item-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSCarousel = createComponent(React, 'ids-carousel', IDSCarousel$1);
-var IDSCarouselItem = createComponent(React, 'ids-carousel-item', IDSCarouselItem$1);
+var IDSCarousel = createComponent({
+    tagName: 'ids-carousel',
+    elementClass: IDSCarousel$1,
+    react: React,
+});
+var IDSCarouselItem = createComponent({
+    tagName: 'ids-carousel-item',
+    elementClass: IDSCarouselItem$1,
+    react: React,
+});
 
 export { IDSCarousel, IDSCarouselItem };

package/components/date-label/date-label.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/date-label/register';
 import { IDSDateLabel as IDSDateLabel$1 } from '@inera/ids-core/components/date-label/date-label-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSDateLabel = createComponent(React, 'ids-date-label', IDSDateLabel$1);
+var IDSDateLabel = createComponent({
+    tagName: 'ids-date-label',
+    elementClass: IDSDateLabel$1,
+    react: React,
+});
 
 export { IDSDateLabel };

package/components/dialog/dialog.js

@@ -4,7 +4,15 @@ import { IDSDialog as IDSDialog$1 } from '@inera/ids-core/components/dialog/dial
 import { IDSDialogActions as IDSDialogActions$1 } from '@inera/ids-core/components/dialog/actions/dialog-actions-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSDialog = createComponent(React, 'ids-dialog', IDSDialog$1);
-var IDSDialogActions = createComponent(React, 'ids-dialog-actions', IDSDialogActions$1);
+var IDSDialog = createComponent({
+    tagName: 'ids-dialog',
+    elementClass: IDSDialog$1,
+    react: React,
+});
+var IDSDialogActions = createComponent({
+    tagName: 'ids-dialog-actions',
+    elementClass: IDSDialogActions$1,
+    react: React,
+});
 
 export { IDSDialog, IDSDialogActions };

package/components/expandable/expandable.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/expandable/register';
 import { IDSExpandable as IDSExpandable$1 } from '@inera/ids-core/components/expandable/expandable-element';
 
-var IDSExpandable = createComponent(React, 'ids-expandable', IDSExpandable$1);
+var IDSExpandable = createComponent({
+    tagName: 'ids-expandable',
+    elementClass: IDSExpandable$1,
+    react: React,
+});
 
 export { IDSExpandable };

package/components/footer/footer.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/footer/register';
 import { IDSFooter as IDSFooter$1 } from '@inera/ids-core/components/footer/footer-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSFooter = createComponent(React, 'ids-footer', IDSFooter$1);
+var IDSFooter = createComponent({
+    tagName: 'ids-footer',
+    elementClass: IDSFooter$1,
+    react: React,
+});
 
 export { IDSFooter };

package/components/form/checkbox/checkbox-group.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/form/checkbox-group/register';
 import { IDSCheckboxGroup as IDSCheckboxGroup$1 } from '@inera/ids-core/components/form/checkbox-group/checkbox-group-element';
 
-var IDSCheckboxGroup = createComponent(React__default, 'ids-checkbox-group', IDSCheckboxGroup$1);
+var IDSCheckboxGroup = createComponent({
+    tagName: 'ids-checkbox-group',
+    elementClass: IDSCheckboxGroup$1,
+    react: React__default,
+});
 
 export { IDSCheckboxGroup };

package/components/form/errormessage/error-message.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/form/error-message/register';
 import { IDSErrorMessage as IDSErrorMessage$1 } from '@inera/ids-core/components/form/error-message/error-message-element';
 
-var IDSErrorMessage = createComponent(React, 'ids-error-message', IDSErrorMessage$1);
+var IDSErrorMessage = createComponent({
+    tagName: 'ids-error-message',
+    elementClass: IDSErrorMessage$1,
+    react: React,
+});
 
 export { IDSErrorMessage };

package/components/form/input/input.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/form/input/register';
 import { IDSInput as IDSInput$1 } from '@inera/ids-core/components/form/input/input-element';
 
-var IDSInput = createComponent(React, 'ids-input', IDSInput$1);
+var IDSInput = createComponent({
+    tagName: 'ids-input',
+    elementClass: IDSInput$1,
+    react: React,
+});
 
 export { IDSInput };

package/components/form/radio/radio.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/form/radio/register';
 import { IDSRadio as IDSRadio$1 } from '@inera/ids-core/components/form/radio/radio-element';
 
-var IDSRadio = createComponent(React, 'ids-radio', IDSRadio$1);
+var IDSRadio = createComponent({
+    tagName: 'ids-radio',
+    elementClass: IDSRadio$1,
+    react: React,
+});
 
 export { IDSRadio };

package/components/form/range/range.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/form/range/register';
 import { IDSRange as IDSRange$1 } from '@inera/ids-core/components/form/range/range-element';
 
-var IDSRange = createComponent(React, 'ids-range', IDSRange$1);
+var IDSRange = createComponent({
+    tagName: 'ids-range',
+    elementClass: IDSRange$1,
+    react: React,
+});
 
 export { IDSRange };

package/components/form/select/select.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/form/select/register';
 import { IDSSelect as IDSSelect$1 } from '@inera/ids-core/components/form/select/select-element';
 
-var IDSSelect = createComponent(React, 'ids-select', IDSSelect$1);
+var IDSSelect = createComponent({
+    tagName: 'ids-select',
+    elementClass: IDSSelect$1,
+    react: React,
+});
 
 export { IDSSelect };

package/components/form/selectmultiple/select-multiple.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/form/select-multiple/register';
 import { IDSSelectMultiple as IDSSelectMultiple$1 } from '@inera/ids-core/components/form/select-multiple/select-multiple-element';
 
-var IDSSelectMultiple = createComponent(React, 'ids-select-multiple', IDSSelectMultiple$1);
+var IDSSelectMultiple = createComponent({
+    tagName: 'ids-select-multiple',
+    elementClass: IDSSelectMultiple$1,
+    react: React,
+});
 
 export { IDSSelectMultiple };

package/components/form/spinner/spinner.d.ts

@@ -1,3 +1,2 @@
 import '@inera/ids-core/components/form/spinner/register';
-export declare const IDSSpinnerWebComponent: React.ForwardRefExoticComponent<any>;
-export declare const IDSSpinner: (props: any) => any;
+export declare const IDSSpinner: React.ForwardRefExoticComponent<any>;

package/components/form/spinner/spinner.js

@@ -3,10 +3,10 @@ import '@inera/ids-core/components/form/spinner/register';
 import { IDSSpinner as IDSSpinner$1 } from '@inera/ids-core/components/form/spinner/spinner-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSSpinnerWebComponent = createComponent(React, 'ids-spinner', IDSSpinner$1);
-var IDSSpinner = function (props) {
-    var srtext = props.srtext, _a = props.live, live = _a === void 0 ? 'polite' : _a;
-    return (React.createElement(IDSSpinnerWebComponent, { srtext: srtext, live: live }));
-};
+var IDSSpinner = createComponent({
+    tagName: 'ids-spinner',
+    elementClass: IDSSpinner$1,
+    react: React,
+});
 
-export { IDSSpinner, IDSSpinnerWebComponent };
+export { IDSSpinner };

package/components/form/textarea/textarea.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/form/textarea/register';
 import { IDSTextarea as IDSTextarea$1 } from '@inera/ids-core/components/form/textarea/textarea-element';
 
-var IDSTextarea = createComponent(React, 'ids-textarea', IDSTextarea$1);
+var IDSTextarea = createComponent({
+    tagName: 'ids-textarea',
+    elementClass: IDSTextarea$1,
+    react: React,
+});
 
 export { IDSTextarea };

package/components/form/time/time.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/form/time/register';
 import { IDSTime as IDSTime$1 } from '@inera/ids-core/components/form/time/time-element';
 
-var IDSTime = createComponent(React, 'ids-time', IDSTime$1);
+var IDSTime = createComponent({
+    tagName: 'ids-time',
+    elementClass: IDSTime$1,
+    react: React,
+});
 
 export { IDSTime };

package/components/header/avatar/header-avatar.js

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { IDSHeaderAvatar as IDSHeaderAvatar$1 } from '@inera/ids-core/components/header/avatar/header-avatar-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSHeaderAvatar = createComponent(React, 'ids-header-avatar', IDSHeaderAvatar$1);
+var IDSHeaderAvatar = createComponent({
+    tagName: 'ids-header-avatar',
+    elementClass: IDSHeaderAvatar$1,
+    react: React,
+});
 
 export { IDSHeaderAvatar };

package/components/header/header.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/header/register';
 import { IDSHeader as IDSHeader$1 } from '@inera/ids-core/components/header/header-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSHeader = createComponent(React, 'ids-header', IDSHeader$1);
+var IDSHeader = createComponent({
+    tagName: 'ids-header',
+    elementClass: IDSHeader$1,
+    react: React,
+});
 
 export { IDSHeader };

package/components/header/item/header-item.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/header/register';
 import { IDSHeaderItem as IDSHeaderItem$1 } from '@inera/ids-core/components/header/item/header-item-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSHeaderItem = createComponent(React, 'ids-header-item', IDSHeaderItem$1);
+var IDSHeaderItem = createComponent({
+    tagName: 'ids-header-item',
+    elementClass: IDSHeaderItem$1,
+    react: React,
+});
 
 export { IDSHeaderItem };

package/components/header/mobile-menu/header-mobile-menu.js

@@ -2,6 +2,13 @@ import * as React from 'react';
 import { IDSHeaderMobileMenu as IDSHeaderMobileMenu$1 } from '@inera/ids-core/components/header/mobile-menu/header-mobile-menu-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSHeaderMobileMenu = createComponent(React, 'ids-header-mobile-menu', IDSHeaderMobileMenu$1, { onDidToggleExpansion: 'didToggleExpansion' });
+var IDSHeaderMobileMenu = createComponent({
+    tagName: 'ids-header-mobile-menu',
+    elementClass: IDSHeaderMobileMenu$1,
+    react: React,
+    events: {
+        onDidToggleExpansion: 'didToggleExpansion'
+    },
+});
 
 export { IDSHeaderMobileMenu };

package/components/header/navigation/item/nav-item.js

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { IDSHeaderNavItem as IDSHeaderNavItem$1 } from '@inera/ids-core/components/header/navigation/item/navigation-item-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSHeaderNavItem = createComponent(React, 'ids-header-nav-item', IDSHeaderNavItem$1);
+var IDSHeaderNavItem = createComponent({
+    tagName: 'ids-header-nav-item',
+    elementClass: IDSHeaderNavItem$1,
+    react: React,
+});
 
 export { IDSHeaderNavItem };

package/components/header/navigation/mobile-item/nav-mobile-item.js

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { IDSHeaderMobileItem as IDSHeaderMobileItem$1 } from '@inera/ids-core/components/header/navigation/mobile-item/mobile-item-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSHeaderMobileItem = createComponent(React, 'ids-header-mobile-item', IDSHeaderMobileItem$1);
+var IDSHeaderMobileItem = createComponent({
+    tagName: 'ids-header-mobile-item',
+    elementClass: IDSHeaderMobileItem$1,
+    react: React,
+});
 
 export { IDSHeaderMobileItem };

package/components/header/navigation/navigation.js

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { IDSHeaderNav as IDSHeaderNav$1 } from '@inera/ids-core/components/header/navigation/navigation-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSHeaderNav = createComponent(React, 'ids-header-nav', IDSHeaderNav$1);
+var IDSHeaderNav = createComponent({
+    tagName: 'ids-header-nav',
+    elementClass: IDSHeaderNav$1,
+    react: React,
+});
 
 export { IDSHeaderNav };

package/components/icon/icon.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/icon/register';
 import { IDSIcon as IDSIcon$1 } from '@inera/ids-core/components/icon/icon-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSIcon = createComponent(React, 'ids-icon', IDSIcon$1);
+var IDSIcon = createComponent({
+    tagName: 'ids-icon',
+    elementClass: IDSIcon$1,
+    react: React,
+});
 
 export { IDSIcon };

package/components/layout/grid.js

@@ -7,8 +7,20 @@ import { IDSRow as IDSRow$1 } from '@inera/ids-core/components/grid/row/row-elem
 import { IDSColumn } from '@inera/ids-core/components/grid/column/column-element';
 import { IDSContainer as IDSContainer$1 } from '@inera/ids-core/components/grid/container/container-element';
 
-var IDSRow = createComponent(React, 'ids-row', IDSRow$1);
-var IDSCol = createComponent(React, 'ids-col', IDSColumn);
-var IDSContainer = createComponent(React, 'ids-container', IDSContainer$1);
+var IDSRow = createComponent({
+    tagName: 'ids-row',
+    elementClass: IDSRow$1,
+    react: React,
+});
+var IDSCol = createComponent({
+    tagName: 'ids-col',
+    elementClass: IDSColumn,
+    react: React,
+});
+var IDSContainer = createComponent({
+    tagName: 'ids-container',
+    elementClass: IDSContainer$1,
+    react: React,
+});
 
 export { IDSCol, IDSContainer, IDSRow };

package/components/link/link.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/link/register';
 import { IDSLink as IDSLink$1 } from '@inera/ids-core/components/link/link-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSLink = createComponent(React, 'ids-link', IDSLink$1);
+var IDSLink = createComponent({
+    tagName: 'ids-link',
+    elementClass: IDSLink$1,
+    react: React,
+});
 
 export { IDSLink };

package/components/list/item/info/list-item-info.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/list/register';
 import { IDSListItemInfo as IDSListItemInfo$1 } from '@inera/ids-core/components/list/item/info/list-item-info-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSListItemInfo = createComponent(React, 'ids-list-item-info', IDSListItemInfo$1);
+var IDSListItemInfo = createComponent({
+    tagName: 'ids-list-item-info',
+    elementClass: IDSListItemInfo$1,
+    react: React,
+});
 
 export { IDSListItemInfo };

package/components/list/item/list-item.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/list/register';
 import { IDSListItem as IDSListItem$1 } from '@inera/ids-core/components/list/item/list-item-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSListItem = createComponent(React, 'ids-list-item', IDSListItem$1);
+var IDSListItem = createComponent({
+    tagName: 'ids-list-item',
+    elementClass: IDSListItem$1,
+    react: React,
+});
 
 export { IDSListItem };

package/components/list/list.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/list/register';
 import { IDSList as IDSList$1 } from '@inera/ids-core/components/list/list-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSList = createComponent(React, 'ids-list', IDSList$1);
+var IDSList = createComponent({
+    tagName: 'ids-list',
+    elementClass: IDSList$1,
+    react: React,
+});
 
 export { IDSList };

package/components/mobile/menu/avatar/mobile-avatar.js

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { IDSMobileMenuAvatar as IDSMobileMenuAvatar$1 } from '@inera/ids-core/components/mobile/menu/avatar/mobile-menu-avatar-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSMobileMenuAvatar = createComponent(React, 'ids-mobile-menu-avatar', IDSMobileMenuAvatar$1);
+var IDSMobileMenuAvatar = createComponent({
+    tagName: 'ids-mobile-menu-avatar',
+    elementClass: IDSMobileMenuAvatar$1,
+    react: React,
+});
 
 export { IDSMobileMenuAvatar };

package/components/mobile/menu/item/mobile-item.js

@@ -2,8 +2,13 @@ import * as React from 'react';
 import { IDSMobileMenuItem as IDSMobileMenuItem$1 } from '@inera/ids-core/components/mobile/menu/item/mobile-menu-item-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSMobileMenuItem = createComponent(React, 'ids-mobile-menu-item', IDSMobileMenuItem$1, {
-    onDidToggleExpansion: 'didToggleExpansion',
+var IDSMobileMenuItem = createComponent({
+    tagName: 'ids-mobile-menu-item',
+    elementClass: IDSMobileMenuItem$1,
+    react: React,
+    events: {
+        onDidToggleExpansion: 'didToggleExpansion'
+    }
 });
 
 export { IDSMobileMenuItem };

package/components/mobile/menu/mobile-menu.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/mobile/menu/register';
 import { IDSMobileMenu as IDSMobileMenu$1 } from '@inera/ids-core/components/mobile/menu/mobile-menu-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSMobileMenu = createComponent(React, 'ids-mobile-menu', IDSMobileMenu$1);
+var IDSMobileMenu = createComponent({
+    tagName: 'ids-mobile-menu',
+    elementClass: IDSMobileMenu$1,
+    react: React
+});
 
 export { IDSMobileMenu };

package/components/navigation/content/navigation-content.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/navigation/content/register';
 import { IDSNavigationContent as IDSNavigationContent$1 } from '@inera/ids-core/components/navigation/content/navigation-content-element';
 
-var IDSNavigationContent = createComponent(React, 'ids-navigation-content', IDSNavigationContent$1);
+var IDSNavigationContent = createComponent({
+    tagName: 'ids-navigation-content',
+    elementClass: IDSNavigationContent$1,
+    react: React
+});
 
 export { IDSNavigationContent };

package/components/notification/badge/notification-badge.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/notification/badge/register';
 import { IDSNotificationBadge as IDSNotificationBadge$1 } from '@inera/ids-core/components/notification/badge/notification-badge-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSNotificationBadge = createComponent(React, 'ids-notification-badge', IDSNotificationBadge$1);
+var IDSNotificationBadge = createComponent({
+    tagName: 'ids-notification-badge',
+    elementClass: IDSNotificationBadge$1,
+    react: React
+});
 
 export { IDSNotificationBadge };

package/components/popover/popover.js

@@ -4,7 +4,15 @@ import '@inera/ids-core/components/popover/register';
 import { IDSPopover as IDSPopover$1 } from '@inera/ids-core/components/popover/popover-element';
 import { IDSPopoverContent as IDSPopoverContent$1 } from '@inera/ids-core/components/popover/content/popover-content-element';
 
-var IDSPopover = createComponent(React, 'ids-popover', IDSPopover$1);
-var IDSPopoverContent = createComponent(React, 'ids-popover-content', IDSPopoverContent$1);
+var IDSPopover = createComponent({
+    tagName: 'ids-popover',
+    elementClass: IDSPopover$1,
+    react: React
+});
+var IDSPopoverContent = createComponent({
+    tagName: 'ids-popover-content',
+    elementClass: IDSPopoverContent$1,
+    react: React
+});
 
 export { IDSPopover, IDSPopoverContent };

package/components/progressbar/progressbar.js

@@ -3,6 +3,10 @@ import { createComponent } from '@lit-labs/react';
 import '@inera/ids-core/components/progressbar/register';
 import { IDSProgressbar as IDSProgressbar$1 } from '@inera/ids-core/components/progressbar/progressbar-element';
 
-var IDSProgressbar = createComponent(React, 'ids-progressbar', IDSProgressbar$1);
+var IDSProgressbar = createComponent({
+    tagName: 'ids-progressbar',
+    elementClass: IDSProgressbar$1,
+    react: React
+});
 
 export { IDSProgressbar };

package/components/stepper/stepper.d.ts

@@ -0,0 +1,3 @@
+import '@inera/ids-core/components/stepper/register';
+export declare const IDSStepper: React.ForwardRefExoticComponent<any>;
+export declare const IDSStep: React.ForwardRefExoticComponent<any>;

package/components/stepper/stepper.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@lit-labs/react';
+import '@inera/ids-core/components/stepper/register';
+import { IDSStepper as IDSStepper$1 } from '@inera/ids-core/components/stepper/stepper-element';
+import { IDSStep as IDSStep$1 } from '@inera/ids-core/components/stepper/step/step-element';
+
+var IDSStepper = createComponent({
+    tagName: 'ids-stepper',
+    elementClass: IDSStepper$1,
+    react: React
+});
+var IDSStep = createComponent({
+    tagName: 'ids-step',
+    elementClass: IDSStep$1,
+    react: React
+});
+
+export { IDSStep, IDSStepper };

package/components/tabs/tabs.js

@@ -5,8 +5,20 @@ import { IDSTab as IDSTab$1 } from '@inera/ids-core/components/tabs/tab/tab-elem
 import { IDSTabPanel as IDSTabPanel$1 } from '@inera/ids-core/components/tabs/panel/tab-panel-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSTabs = createComponent(React, 'ids-tabs', IDSTabs$1);
-var IDSTab = createComponent(React, 'ids-tab', IDSTab$1);
-var IDSTabPanel = createComponent(React, 'ids-tab-panel', IDSTabPanel$1);
+var IDSTabs = createComponent({
+    tagName: 'ids-tabs',
+    elementClass: IDSTabs$1,
+    react: React
+});
+var IDSTab = createComponent({
+    tagName: 'ids-tab',
+    elementClass: IDSTab$1,
+    react: React
+});
+var IDSTabPanel = createComponent({
+    tagName: 'ids-tab-panel',
+    elementClass: IDSTabPanel$1,
+    react: React
+});
 
 export { IDSTab, IDSTabPanel, IDSTabs };

package/components/tooltip/tooltip.js

@@ -3,6 +3,10 @@ import '@inera/ids-core/components/tooltip/register';
 import { IDSTooltip as IDSTooltip$1 } from '@inera/ids-core/components/tooltip/tooltip-element';
 import { createComponent } from '@lit-labs/react';
 
-var IDSTooltip = createComponent(React, 'ids-tooltip', IDSTooltip$1);
+var IDSTooltip = createComponent({
+    tagName: 'ids-tooltip',
+    elementClass: IDSTooltip$1,
+    react: React
+});
 
 export { IDSTooltip };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@inera/ids-react",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "peerDependencies": {
     "react": "*"
   },
   "dependencies": {
-    "@inera/ids-core": "2.3.x",
-    "@lit-labs/react": "^1.0.2"
+    "@inera/ids-core": "2.4.x",
+    "@lit-labs/react": "^1.1.0"
   },
   "main": "api.js",
   "license": "UNLICENSED",