@otto-de/b2b-core-components 1.0.0

package/dist/types/components.d.ts

@@ -0,0 +1,2135 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { CheckboxEventDetail, InputChangeEvent, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
+import { IconName } from "./components/icon/types";
+import { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
+import { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
+import { ContentAlignment, TableRowgroupTypes, TableSizes, TableSortDirections } from "./components/table/types";
+import { B2BTableColourOptions } from "./components/table/table-row/table-row";
+import { B2BTableColourOptions as B2BTableColourOptions1 } from "./components/table/table-row/table-row";
+export { CheckboxEventDetail, InputChangeEvent, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
+export { IconName } from "./components/icon/types";
+export { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
+export { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
+export { ContentAlignment, TableRowgroupTypes, TableSizes, TableSortDirections } from "./components/table/types";
+export { B2BTableColourOptions } from "./components/table/table-row/table-row";
+export { B2BTableColourOptions as B2BTableColourOptions1 } from "./components/table/table-row/table-row";
+export namespace Components {
+    interface B2bAlert {
+        /**
+          * Whether or not you want to use a custom icon. Per default, it is false.
+         */
+        "customIcon": boolean;
+        /**
+          * Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed.
+         */
+        "hasCloseButton": boolean;
+        /**
+          * Whether the alert is currently open. Set to true to display the alert.
+         */
+        "opened": boolean;
+        /**
+          * The size of the alert. Per default it is large. If set to small, the alert will only have an icon.
+         */
+        "size": 'large' | 'small';
+        /**
+          * The type of alert. Per default it is info.
+         */
+        "type": 'info' | 'success' | 'warning' | 'error';
+    }
+    interface B2bAnchor {
+        /**
+          * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user.
+         */
+        "download": string;
+        /**
+          * The URL or URL fragment the anchor points to. This is required.
+         */
+        "href": string;
+        /**
+          * The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px.
+         */
+        "size": 'inherit' | '100';
+        /**
+          * The target the URL will be opened into. The default is self.
+         */
+        "target": 'self' | 'blank' | 'parent' | 'top';
+    }
+    interface B2bButton {
+        /**
+          * Whether the button is currently active. Set to true when using the button to signify a permanent active state
+         */
+        "active": boolean;
+        /**
+          * Whether the button is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user.
+         */
+        "download"?: string;
+        /**
+          * An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files
+         */
+        "href"?: string;
+        /**
+          * Whether the button is currently loading. Set to true to hide text and display loading spinner instead
+         */
+        "loading": boolean;
+        /**
+          * Manually set focus to button element
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * The size of the button, 100 is the default state
+         */
+        "size": '100' | '50';
+        /**
+          * The target of the button if it should behave like an anchor. Per default it is self.
+         */
+        "target"?: 'self' | 'blank';
+        /**
+          * The button type. Matches native HTML types. The default type is 'button'.
+         */
+        "type": 'button' | 'submit' | 'reset';
+        /**
+          * The button variant. If not specified, the button will be the secondary variant.
+         */
+        "variant": 'primary' | 'secondary';
+    }
+    interface B2bCheckbox {
+        /**
+          * Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked.
+         */
+        "checked": boolean;
+        /**
+          * Whether or not the checkbox is disabled. The default value is false.
+         */
+        "disabled": boolean;
+        /**
+          * The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles.
+         */
+        "error"?: string;
+        /**
+          * The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the checkbox is rendered with error styles. Defaults to false.
+         */
+        "invalid"?: boolean;
+        /**
+          * The checkbox label. This attribute is required.
+         */
+        "label": string;
+        /**
+          * The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name.
+         */
+        "name"?: string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+        /**
+          * The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group
+         */
+        "value"?: any;
+    }
+    interface B2bCheckboxGroup {
+        /**
+          * The alignment of the checkbox group. Per default it is vertical
+         */
+        "alignment": 'vertical' | 'horizontal';
+        /**
+          * Whether or not the checkbox group as a whole is disabled. Default state is false.
+         */
+        "disabled": boolean;
+        /**
+          * The checkbox group error message. Is displayed when invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * The checkbox group hint text.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the checkbox group as a whole is invalid. Set to true to display a group error.
+         */
+        "invalid": boolean;
+        /**
+          * The label for the checkbox group. This is optional.
+         */
+        "label": string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+    }
+    interface B2bDropdown {
+        /**
+          * Whether the select as a whole is disabled. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * An optional error message for the dropdown. This will only appear if invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * An optional hint text for the dropdown.
+         */
+        "hint"?: string;
+        /**
+          * Whether the select is currently invalid. Per default it is false.
+         */
+        "invalid": boolean;
+        /**
+          * The dropdown label.
+         */
+        "label": string;
+        /**
+          * The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility.
+         */
+        "name"?: string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+    }
+    interface B2bGrid {
+        /**
+          * The inner padding of the grid container measured in px.
+         */
+        "margin": number;
+    }
+    interface B2bGridCol {
+        /**
+          * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row.
+         */
+        "span": | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 6
+    | 7
+    | 8
+    | 9
+    | 10
+    | 11
+    | 12;
+        /**
+          * The alignment of text placed inside of a column. Note that this will apply to all children.
+         */
+        "textAlign": 'left' | 'center' | 'right';
+    }
+    interface B2bGridRow {
+        /**
+          * Vertical alignment of columns. This requires the row to have a defined height.
+         */
+        "alignItems": 'stretch' | 'flex-start' | 'center' | 'flex-end';
+        /**
+          * The spacing in between individual columns in px. The higher the gap, the smaller the columns will be.
+         */
+        "columnGap": number;
+        /**
+          * Horizontal alignment of columns.
+         */
+        "justify": | 'start'
+    | 'end'
+    | 'center'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly';
+        /**
+          * The spacing between individual rows in px.
+         */
+        "rowGap": number;
+    }
+    /**
+     * Headline component to render hading tags content.
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46
+     */
+    interface B2bHeadline {
+        /**
+          * The alignment of the headline.
+         */
+        "align": 'left' | 'right' | 'center';
+        /**
+          * Whether the headline should have a margin. Per default, margins are enabled.
+         */
+        "noMargin": boolean;
+        /**
+          * Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `<h1>`, 200 to `<h2>` and 100 to `<h3>`
+         */
+        "size": '400' | '200' | '100';
+    }
+    interface B2bIcon {
+        /**
+          * The color of the icon
+         */
+        "color": 'primary' | 'secondary' | 'inverse' | 'inherit';
+        /**
+          * The name of the icon
+         */
+        "icon": IconName;
+        /**
+          * The size of the icon
+         */
+        "size": '50' | '100' | '200';
+    }
+    /**
+     * Input component
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+     */
+    interface B2bInput {
+        /**
+          * When setting the autofocus to true, the input element will be focused when the page loads.
+         */
+        "autofocus": boolean;
+        /**
+          * Whether or not the input is disabled. Default is false.
+         */
+        "disabled": boolean;
+        /**
+          * The error message that is shown if the input is invalid.
+         */
+        "error"?: string;
+        /**
+          * The hint text that appears underneath the input field.
+         */
+        "hint"?: string;
+        /**
+          * Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false.
+         */
+        "invalid": boolean;
+        /**
+          * The input label.
+         */
+        "label": string;
+        /**
+          * The name of the input. Use it to group label and input together and make it more accessible.
+         */
+        "name"?: string;
+        /**
+          * A placeholder for the input field. Per default, it is null.
+         */
+        "placeholder": string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+        /**
+          * Manually set focus to the element
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * The type of the input. All native HTML types except date or month are supported. Default is text.
+         */
+        "type": | 'text'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'url';
+        /**
+          * The default value of the input field. If defined, it will prefill the input.
+         */
+        "value": string;
+    }
+    interface B2bInputGroup {
+        /**
+          * Whether or not the input group is disabled as a whole. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * A group error text. It will only show if invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * The hint text that appears underneath the input group.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false.
+         */
+        "invalid": boolean;
+    }
+    interface B2bInputLabel {
+        /**
+          * Will render the label with a disabled style. The default value is false.
+         */
+        "disabled": boolean;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+    }
+    interface B2bInputList {
+        /**
+          * The input label.
+         */
+        "label": string;
+        /**
+          * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
+         */
+        "optionsList": string[];
+        /**
+          * The placeholder shown in the input field.
+         */
+        "placeholder": string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+        /**
+          * The default value of the input field. If defined, it will prefill the input.
+         */
+        "value": string;
+    }
+    interface B2bInputListOption {
+        /**
+          * The option name.
+         */
+        "option": string;
+    }
+    interface B2bLabel {
+        /**
+          * The type of the label. Per default it is neutral.
+         */
+        "type": 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    }
+    /**
+     * Modal component
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+     */
+    interface B2bModal {
+        /**
+          * A boolean that indicates whether the modal can be dismissed by clicking in the backdrop outside the modal.
+         */
+        "backdropDismiss": boolean;
+        /**
+          * A boolean to indicate whether the modal can be dismissed by pressing the escape key on the keyboard
+         */
+        "escDismiss": boolean;
+        /**
+          * The title for the modal. This is required.
+         */
+        "heading": string;
+        /**
+          * Whether the modal is shown or not. Default is false
+         */
+        "opened": boolean;
+        /**
+          * The size of the modal. If not specified, will assume the default size
+         */
+        "variant": 'default' | 'large';
+    }
+    interface B2bPagination {
+        /**
+          * Use this property to set programmatically the active page
+         */
+        "activePage": number;
+        /**
+          * (optional) translation to 'Go to next page'
+         */
+        "ariaLabelNextPage": string;
+        /**
+          * (optional) translation to 'Go to previous page'
+         */
+        "ariaLabelPreviousPage": string;
+        /**
+          * The total number of pages to calculate the length of pagination component
+         */
+        "totalPages": number;
+    }
+    /**
+     * Paragraph component to render text content.
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45
+     */
+    interface B2bParagraph {
+        /**
+          * The alignment of the text.
+         */
+        "align": 'left' | 'right' | 'center';
+        /**
+          * The size of the text.
+         */
+        "size": '50' | '100';
+        /**
+          * The weight of the text.
+         */
+        "weight": 'bold' | 'normal';
+    }
+    interface B2bRadioButton {
+        /**
+          * Whether or not the radio button is currently checked. Per default it is false.
+         */
+        "checked": boolean;
+        /**
+          * Whether or not the radio button is currently disabled. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * An error text. It will only show if invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * A hint to give additional information on the radio button.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the radio button should be rendered with error styles. Per default it is false.
+         */
+        "invalid": boolean;
+        /**
+          * The label of the radio button. This is required
+         */
+        "label": string;
+        /**
+          * The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required.
+         */
+        "name": string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+        /**
+          * The value of the radio button. This will be emitted when the radio button is clicked.
+         */
+        "value"?: string;
+    }
+    interface B2bRadioGroup {
+        /**
+          * The alignment of the radio group. Can be vertical or horizontal, per default it is vertical.
+         */
+        "alignment": 'vertical' | 'horizontal';
+        /**
+          * Whether or not the radio group is disabled as a whole. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * A group error text. It will only show if invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * A group hint text.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false.
+         */
+        "invalid": boolean;
+        /**
+          * The radio group label. This is optional.
+         */
+        "label": string;
+        /**
+          * The radio group name used to group them together programmatically. This is required.
+         */
+        "name": string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+    }
+    interface B2bRequiredSeparator {
+        /**
+          * The required label. Per default it is the german 'Pflichtfeld', but can be altered.
+         */
+        "label": string;
+    }
+    interface B2bScrollableContainer {
+    }
+    interface B2bSearch {
+        /**
+          * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
+         */
+        "optionsList": string[];
+        /**
+          * The placeholder shown in the input field.
+         */
+        "placeholder": string;
+        /**
+          * The default value of the search input field. If defined, it will prefill the input.
+         */
+        "value": string;
+    }
+    interface B2bSeparator {
+        /**
+          * The alignment of the separator. Per default it is horizontal.
+         */
+        "alignment": 'vertical' | 'horizontal';
+    }
+    /**
+     * Spinner component to display loading indicator.
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70
+     */
+    interface B2bSpinner {
+        /**
+          * The color of the spinner.
+         */
+        "color": 'primary' | 'secondary' | 'inverse';
+        /**
+          * The size of the spinner.
+         */
+        "size": '50' | '100' | '200';
+    }
+    interface B2bTab {
+        /**
+          * Whether or not the tab is currently disabled. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * Whether or not the tab has an error. Per default, it is false.
+         */
+        "invalid": boolean;
+        /**
+          * Whether or not the tab is currently selected. Per default it is false.
+         */
+        "selected": boolean;
+    }
+    interface B2bTabGroup {
+        /**
+          * Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation. Set it to true if you want to use external, route-based navigation.
+         */
+        "useRouter": boolean;
+    }
+    interface B2bTabPanel {
+    }
+    interface B2bTable {
+        /**
+          * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns.
+         */
+        "size": TableSizes;
+    }
+    interface B2bTableCell {
+        /**
+          * Alignment of the content of the cell, by default is to the left. *
+         */
+        "align": ContentAlignment;
+        /**
+          * Background color of the cell. This color selection does not have hover states, as it is handled from the row*
+         */
+        "color": B2BTableColourOptions;
+        /**
+          * adds a border to the right of the cell. *
+         */
+        "divider": boolean;
+        /**
+          * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation.
+         */
+        "size": TableSizes;
+        /**
+          * Weather text should wrap or truncate. It will only truncate when table size is equal *
+         */
+        "textWrap": boolean;
+    }
+    interface B2bTableHeader {
+        /**
+          * adds a border to the right of the header. *
+         */
+        "divider": boolean;
+        /**
+          * sets the header position to sticky. Use it when table is inside a scrollable container. *
+         */
+        "fixed": boolean;
+        /**
+          * The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this.
+         */
+        "sortDirection": TableSortDirections;
+        /**
+          * Optional string to uniquely represent the header, this id will be emitted by the table b2b-sort-change event. If not provided, the event will emit the header textContent.
+         */
+        "sortId"?: string;
+    }
+    interface B2bTableRow {
+        /**
+          * Background color of the row. Use it semantically. This color selection have hover states *
+         */
+        "color": B2BTableColourOptions1;
+        /**
+          * Whether the row will be highlighted on mouse over *
+         */
+        "highlight": boolean;
+    }
+    interface B2bTableRowgroup {
+        /**
+          * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over.
+         */
+        "type": TableRowgroupTypes;
+    }
+    /**
+     * Text Area Component
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96
+     */
+    interface B2bTextarea {
+        /**
+          * Whether or not the textarea should be automatically focused on page load. Per default it is false.
+         */
+        "autofocus": boolean;
+        /**
+          * Whether or not the textarea is disabled. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * An optional error message that is displayed when the textarea is invalid. Per default it is undefined.
+         */
+        "error"?: string;
+        /**
+          * An optional hint for the textarea. Per default it is undefined.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the textarea should be displayed with error styles. Per default it is false.
+         */
+        "invalid": boolean;
+        /**
+          * The textarea label. This is optional.
+         */
+        "label": string;
+        /**
+          * The maximum input length. Characters entered after that will not be appended to the input value.
+         */
+        "maxLength"?: number;
+        /**
+          * The name of the textarea. This is used to programmatically group it into a form.
+         */
+        "name"?: string;
+        /**
+          * The textarea placeholder. It is optional and undefined by default.
+         */
+        "placeholder"?: string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+        /**
+          * If and how the textarea is resizable. Per default it is resizable in both directions.
+         */
+        "resize"?: | 'unset'
+    | 'none'
+    | 'vertical'
+    | 'horizontal';
+        /**
+          * The value of the textarea. Per default it is null.
+         */
+        "value": string;
+    }
+    interface B2bToggleButton {
+        /**
+          * Whether or not the toggle button is currently checked. Per default it is false.
+         */
+        "checked": boolean;
+        /**
+          * Whether or not the toggle button is currently disabled. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * The label of the toggle button. This is required
+         */
+        "label": string;
+        /**
+          * The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required.
+         */
+        "name": string;
+        /**
+          * The value of the toggle button. This will be emitted when the toggle button is clicked. This is required
+         */
+        "value": string;
+    }
+    interface B2bToggleGroup {
+        /**
+          * Whether or not the toggle group is disabled as a whole. Per default it is false.
+         */
+        "disabled": boolean;
+        /**
+          * The toggle group name used to group them together programmatically. This is required.
+         */
+        "name": string;
+    }
+    /**
+     * The tooltip can display additional information, and will be visible based on
+     * a specific trigger.
+     */
+    interface B2bTooltip {
+        /**
+          * The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content.
+         */
+        "content": string;
+        /**
+          * Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility.
+         */
+        "opened": boolean;
+        /**
+          * Position of the tooltip.
+         */
+        "position": 'left' | 'right' | 'top' | 'bottom';
+        /**
+          * The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover.
+         */
+        "trigger": 'hover' | 'focus' | 'custom';
+    }
+}
+export interface B2bAlertCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bAlertElement;
+}
+export interface B2bCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bCheckboxElement;
+}
+export interface B2bCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bCheckboxGroupElement;
+}
+export interface B2bDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bDropdownElement;
+}
+export interface B2bInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bInputElement;
+}
+export interface B2bInputListOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bInputListOptionElement;
+}
+export interface B2bModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bModalElement;
+}
+export interface B2bPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bPaginationElement;
+}
+export interface B2bRadioButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bRadioButtonElement;
+}
+export interface B2bRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bRadioGroupElement;
+}
+export interface B2bSearchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bSearchElement;
+}
+export interface B2bTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bTabElement;
+}
+export interface B2bTabGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bTabGroupElement;
+}
+export interface B2bTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bTableElement;
+}
+export interface B2bTableHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bTableHeaderElement;
+}
+export interface B2bTextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bTextareaElement;
+}
+export interface B2bToggleButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bToggleButtonElement;
+}
+export interface B2bToggleGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bToggleGroupElement;
+}
+declare global {
+    interface HTMLB2bAlertElement extends Components.B2bAlert, HTMLStencilElement {
+    }
+    var HTMLB2bAlertElement: {
+        prototype: HTMLB2bAlertElement;
+        new (): HTMLB2bAlertElement;
+    };
+    interface HTMLB2bAnchorElement extends Components.B2bAnchor, HTMLStencilElement {
+    }
+    var HTMLB2bAnchorElement: {
+        prototype: HTMLB2bAnchorElement;
+        new (): HTMLB2bAnchorElement;
+    };
+    interface HTMLB2bButtonElement extends Components.B2bButton, HTMLStencilElement {
+    }
+    var HTMLB2bButtonElement: {
+        prototype: HTMLB2bButtonElement;
+        new (): HTMLB2bButtonElement;
+    };
+    interface HTMLB2bCheckboxElement extends Components.B2bCheckbox, HTMLStencilElement {
+    }
+    var HTMLB2bCheckboxElement: {
+        prototype: HTMLB2bCheckboxElement;
+        new (): HTMLB2bCheckboxElement;
+    };
+    interface HTMLB2bCheckboxGroupElement extends Components.B2bCheckboxGroup, HTMLStencilElement {
+    }
+    var HTMLB2bCheckboxGroupElement: {
+        prototype: HTMLB2bCheckboxGroupElement;
+        new (): HTMLB2bCheckboxGroupElement;
+    };
+    interface HTMLB2bDropdownElement extends Components.B2bDropdown, HTMLStencilElement {
+    }
+    var HTMLB2bDropdownElement: {
+        prototype: HTMLB2bDropdownElement;
+        new (): HTMLB2bDropdownElement;
+    };
+    interface HTMLB2bGridElement extends Components.B2bGrid, HTMLStencilElement {
+    }
+    var HTMLB2bGridElement: {
+        prototype: HTMLB2bGridElement;
+        new (): HTMLB2bGridElement;
+    };
+    interface HTMLB2bGridColElement extends Components.B2bGridCol, HTMLStencilElement {
+    }
+    var HTMLB2bGridColElement: {
+        prototype: HTMLB2bGridColElement;
+        new (): HTMLB2bGridColElement;
+    };
+    interface HTMLB2bGridRowElement extends Components.B2bGridRow, HTMLStencilElement {
+    }
+    var HTMLB2bGridRowElement: {
+        prototype: HTMLB2bGridRowElement;
+        new (): HTMLB2bGridRowElement;
+    };
+    /**
+     * Headline component to render hading tags content.
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46
+     */
+    interface HTMLB2bHeadlineElement extends Components.B2bHeadline, HTMLStencilElement {
+    }
+    var HTMLB2bHeadlineElement: {
+        prototype: HTMLB2bHeadlineElement;
+        new (): HTMLB2bHeadlineElement;
+    };
+    interface HTMLB2bIconElement extends Components.B2bIcon, HTMLStencilElement {
+    }
+    var HTMLB2bIconElement: {
+        prototype: HTMLB2bIconElement;
+        new (): HTMLB2bIconElement;
+    };
+    /**
+     * Input component
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+     */
+    interface HTMLB2bInputElement extends Components.B2bInput, HTMLStencilElement {
+    }
+    var HTMLB2bInputElement: {
+        prototype: HTMLB2bInputElement;
+        new (): HTMLB2bInputElement;
+    };
+    interface HTMLB2bInputGroupElement extends Components.B2bInputGroup, HTMLStencilElement {
+    }
+    var HTMLB2bInputGroupElement: {
+        prototype: HTMLB2bInputGroupElement;
+        new (): HTMLB2bInputGroupElement;
+    };
+    interface HTMLB2bInputLabelElement extends Components.B2bInputLabel, HTMLStencilElement {
+    }
+    var HTMLB2bInputLabelElement: {
+        prototype: HTMLB2bInputLabelElement;
+        new (): HTMLB2bInputLabelElement;
+    };
+    interface HTMLB2bInputListElement extends Components.B2bInputList, HTMLStencilElement {
+    }
+    var HTMLB2bInputListElement: {
+        prototype: HTMLB2bInputListElement;
+        new (): HTMLB2bInputListElement;
+    };
+    interface HTMLB2bInputListOptionElement extends Components.B2bInputListOption, HTMLStencilElement {
+    }
+    var HTMLB2bInputListOptionElement: {
+        prototype: HTMLB2bInputListOptionElement;
+        new (): HTMLB2bInputListOptionElement;
+    };
+    interface HTMLB2bLabelElement extends Components.B2bLabel, HTMLStencilElement {
+    }
+    var HTMLB2bLabelElement: {
+        prototype: HTMLB2bLabelElement;
+        new (): HTMLB2bLabelElement;
+    };
+    /**
+     * Modal component
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+     */
+    interface HTMLB2bModalElement extends Components.B2bModal, HTMLStencilElement {
+    }
+    var HTMLB2bModalElement: {
+        prototype: HTMLB2bModalElement;
+        new (): HTMLB2bModalElement;
+    };
+    interface HTMLB2bPaginationElement extends Components.B2bPagination, HTMLStencilElement {
+    }
+    var HTMLB2bPaginationElement: {
+        prototype: HTMLB2bPaginationElement;
+        new (): HTMLB2bPaginationElement;
+    };
+    /**
+     * Paragraph component to render text content.
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45
+     */
+    interface HTMLB2bParagraphElement extends Components.B2bParagraph, HTMLStencilElement {
+    }
+    var HTMLB2bParagraphElement: {
+        prototype: HTMLB2bParagraphElement;
+        new (): HTMLB2bParagraphElement;
+    };
+    interface HTMLB2bRadioButtonElement extends Components.B2bRadioButton, HTMLStencilElement {
+    }
+    var HTMLB2bRadioButtonElement: {
+        prototype: HTMLB2bRadioButtonElement;
+        new (): HTMLB2bRadioButtonElement;
+    };
+    interface HTMLB2bRadioGroupElement extends Components.B2bRadioGroup, HTMLStencilElement {
+    }
+    var HTMLB2bRadioGroupElement: {
+        prototype: HTMLB2bRadioGroupElement;
+        new (): HTMLB2bRadioGroupElement;
+    };
+    interface HTMLB2bRequiredSeparatorElement extends Components.B2bRequiredSeparator, HTMLStencilElement {
+    }
+    var HTMLB2bRequiredSeparatorElement: {
+        prototype: HTMLB2bRequiredSeparatorElement;
+        new (): HTMLB2bRequiredSeparatorElement;
+    };
+    interface HTMLB2bScrollableContainerElement extends Components.B2bScrollableContainer, HTMLStencilElement {
+    }
+    var HTMLB2bScrollableContainerElement: {
+        prototype: HTMLB2bScrollableContainerElement;
+        new (): HTMLB2bScrollableContainerElement;
+    };
+    interface HTMLB2bSearchElement extends Components.B2bSearch, HTMLStencilElement {
+    }
+    var HTMLB2bSearchElement: {
+        prototype: HTMLB2bSearchElement;
+        new (): HTMLB2bSearchElement;
+    };
+    interface HTMLB2bSeparatorElement extends Components.B2bSeparator, HTMLStencilElement {
+    }
+    var HTMLB2bSeparatorElement: {
+        prototype: HTMLB2bSeparatorElement;
+        new (): HTMLB2bSeparatorElement;
+    };
+    /**
+     * Spinner component to display loading indicator.
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70
+     */
+    interface HTMLB2bSpinnerElement extends Components.B2bSpinner, HTMLStencilElement {
+    }
+    var HTMLB2bSpinnerElement: {
+        prototype: HTMLB2bSpinnerElement;
+        new (): HTMLB2bSpinnerElement;
+    };
+    interface HTMLB2bTabElement extends Components.B2bTab, HTMLStencilElement {
+    }
+    var HTMLB2bTabElement: {
+        prototype: HTMLB2bTabElement;
+        new (): HTMLB2bTabElement;
+    };
+    interface HTMLB2bTabGroupElement extends Components.B2bTabGroup, HTMLStencilElement {
+    }
+    var HTMLB2bTabGroupElement: {
+        prototype: HTMLB2bTabGroupElement;
+        new (): HTMLB2bTabGroupElement;
+    };
+    interface HTMLB2bTabPanelElement extends Components.B2bTabPanel, HTMLStencilElement {
+    }
+    var HTMLB2bTabPanelElement: {
+        prototype: HTMLB2bTabPanelElement;
+        new (): HTMLB2bTabPanelElement;
+    };
+    interface HTMLB2bTableElement extends Components.B2bTable, HTMLStencilElement {
+    }
+    var HTMLB2bTableElement: {
+        prototype: HTMLB2bTableElement;
+        new (): HTMLB2bTableElement;
+    };
+    interface HTMLB2bTableCellElement extends Components.B2bTableCell, HTMLStencilElement {
+    }
+    var HTMLB2bTableCellElement: {
+        prototype: HTMLB2bTableCellElement;
+        new (): HTMLB2bTableCellElement;
+    };
+    interface HTMLB2bTableHeaderElement extends Components.B2bTableHeader, HTMLStencilElement {
+    }
+    var HTMLB2bTableHeaderElement: {
+        prototype: HTMLB2bTableHeaderElement;
+        new (): HTMLB2bTableHeaderElement;
+    };
+    interface HTMLB2bTableRowElement extends Components.B2bTableRow, HTMLStencilElement {
+    }
+    var HTMLB2bTableRowElement: {
+        prototype: HTMLB2bTableRowElement;
+        new (): HTMLB2bTableRowElement;
+    };
+    interface HTMLB2bTableRowgroupElement extends Components.B2bTableRowgroup, HTMLStencilElement {
+    }
+    var HTMLB2bTableRowgroupElement: {
+        prototype: HTMLB2bTableRowgroupElement;
+        new (): HTMLB2bTableRowgroupElement;
+    };
+    /**
+     * Text Area Component
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96
+     */
+    interface HTMLB2bTextareaElement extends Components.B2bTextarea, HTMLStencilElement {
+    }
+    var HTMLB2bTextareaElement: {
+        prototype: HTMLB2bTextareaElement;
+        new (): HTMLB2bTextareaElement;
+    };
+    interface HTMLB2bToggleButtonElement extends Components.B2bToggleButton, HTMLStencilElement {
+    }
+    var HTMLB2bToggleButtonElement: {
+        prototype: HTMLB2bToggleButtonElement;
+        new (): HTMLB2bToggleButtonElement;
+    };
+    interface HTMLB2bToggleGroupElement extends Components.B2bToggleGroup, HTMLStencilElement {
+    }
+    var HTMLB2bToggleGroupElement: {
+        prototype: HTMLB2bToggleGroupElement;
+        new (): HTMLB2bToggleGroupElement;
+    };
+    /**
+     * The tooltip can display additional information, and will be visible based on
+     * a specific trigger.
+     */
+    interface HTMLB2bTooltipElement extends Components.B2bTooltip, HTMLStencilElement {
+    }
+    var HTMLB2bTooltipElement: {
+        prototype: HTMLB2bTooltipElement;
+        new (): HTMLB2bTooltipElement;
+    };
+    interface HTMLElementTagNameMap {
+        "b2b-alert": HTMLB2bAlertElement;
+        "b2b-anchor": HTMLB2bAnchorElement;
+        "b2b-button": HTMLB2bButtonElement;
+        "b2b-checkbox": HTMLB2bCheckboxElement;
+        "b2b-checkbox-group": HTMLB2bCheckboxGroupElement;
+        "b2b-dropdown": HTMLB2bDropdownElement;
+        "b2b-grid": HTMLB2bGridElement;
+        "b2b-grid-col": HTMLB2bGridColElement;
+        "b2b-grid-row": HTMLB2bGridRowElement;
+        "b2b-headline": HTMLB2bHeadlineElement;
+        "b2b-icon": HTMLB2bIconElement;
+        "b2b-input": HTMLB2bInputElement;
+        "b2b-input-group": HTMLB2bInputGroupElement;
+        "b2b-input-label": HTMLB2bInputLabelElement;
+        "b2b-input-list": HTMLB2bInputListElement;
+        "b2b-input-list-option": HTMLB2bInputListOptionElement;
+        "b2b-label": HTMLB2bLabelElement;
+        "b2b-modal": HTMLB2bModalElement;
+        "b2b-pagination": HTMLB2bPaginationElement;
+        "b2b-paragraph": HTMLB2bParagraphElement;
+        "b2b-radio-button": HTMLB2bRadioButtonElement;
+        "b2b-radio-group": HTMLB2bRadioGroupElement;
+        "b2b-required-separator": HTMLB2bRequiredSeparatorElement;
+        "b2b-scrollable-container": HTMLB2bScrollableContainerElement;
+        "b2b-search": HTMLB2bSearchElement;
+        "b2b-separator": HTMLB2bSeparatorElement;
+        "b2b-spinner": HTMLB2bSpinnerElement;
+        "b2b-tab": HTMLB2bTabElement;
+        "b2b-tab-group": HTMLB2bTabGroupElement;
+        "b2b-tab-panel": HTMLB2bTabPanelElement;
+        "b2b-table": HTMLB2bTableElement;
+        "b2b-table-cell": HTMLB2bTableCellElement;
+        "b2b-table-header": HTMLB2bTableHeaderElement;
+        "b2b-table-row": HTMLB2bTableRowElement;
+        "b2b-table-rowgroup": HTMLB2bTableRowgroupElement;
+        "b2b-textarea": HTMLB2bTextareaElement;
+        "b2b-toggle-button": HTMLB2bToggleButtonElement;
+        "b2b-toggle-group": HTMLB2bToggleGroupElement;
+        "b2b-tooltip": HTMLB2bTooltipElement;
+    }
+}
+declare namespace LocalJSX {
+    interface B2bAlert {
+        /**
+          * Whether or not you want to use a custom icon. Per default, it is false.
+         */
+        "customIcon"?: boolean;
+        /**
+          * Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed.
+         */
+        "hasCloseButton"?: boolean;
+        /**
+          * Emits whenever the alert is closed.
+         */
+        "onB2b-close"?: (event: B2bAlertCustomEvent<void>) => void;
+        /**
+          * Whether the alert is currently open. Set to true to display the alert.
+         */
+        "opened"?: boolean;
+        /**
+          * The size of the alert. Per default it is large. If set to small, the alert will only have an icon.
+         */
+        "size"?: 'large' | 'small';
+        /**
+          * The type of alert. Per default it is info.
+         */
+        "type"?: 'info' | 'success' | 'warning' | 'error';
+    }
+    interface B2bAnchor {
+        /**
+          * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user.
+         */
+        "download"?: string;
+        /**
+          * The URL or URL fragment the anchor points to. This is required.
+         */
+        "href": string;
+        /**
+          * The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px.
+         */
+        "size"?: 'inherit' | '100';
+        /**
+          * The target the URL will be opened into. The default is self.
+         */
+        "target"?: 'self' | 'blank' | 'parent' | 'top';
+    }
+    interface B2bButton {
+        /**
+          * Whether the button is currently active. Set to true when using the button to signify a permanent active state
+         */
+        "active"?: boolean;
+        /**
+          * Whether the button is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file defaults to the URL string, but can be changed by the user.
+         */
+        "download"?: string;
+        /**
+          * An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files
+         */
+        "href"?: string;
+        /**
+          * Whether the button is currently loading. Set to true to hide text and display loading spinner instead
+         */
+        "loading"?: boolean;
+        /**
+          * The size of the button, 100 is the default state
+         */
+        "size"?: '100' | '50';
+        /**
+          * The target of the button if it should behave like an anchor. Per default it is self.
+         */
+        "target"?: 'self' | 'blank';
+        /**
+          * The button type. Matches native HTML types. The default type is 'button'.
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * The button variant. If not specified, the button will be the secondary variant.
+         */
+        "variant"?: 'primary' | 'secondary';
+    }
+    interface B2bCheckbox {
+        /**
+          * Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Whether or not the checkbox is disabled. The default value is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles.
+         */
+        "error"?: string;
+        /**
+          * The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the checkbox is rendered with error styles. Defaults to false.
+         */
+        "invalid"?: boolean;
+        /**
+          * The checkbox label. This attribute is required.
+         */
+        "label": string;
+        /**
+          * The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name.
+         */
+        "name"?: string;
+        /**
+          * Emits whenever the checkbox loses focus.
+         */
+        "onB2b-blur"?: (event: B2bCheckboxCustomEvent<FocusEvent>) => void;
+        /**
+          * Emits the checkbox value when it's checked status changes.
+         */
+        "onB2b-change"?: (event: B2bCheckboxCustomEvent<CheckboxEventDetail>) => void;
+        /**
+          * Emits whenever the checkbox receives focus.
+         */
+        "onB2b-focus"?: (event: B2bCheckboxCustomEvent<FocusEvent>) => void;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+        /**
+          * The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group
+         */
+        "value"?: any;
+    }
+    interface B2bCheckboxGroup {
+        /**
+          * The alignment of the checkbox group. Per default it is vertical
+         */
+        "alignment"?: 'vertical' | 'horizontal';
+        /**
+          * Whether or not the checkbox group as a whole is disabled. Default state is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * The checkbox group error message. Is displayed when invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * The checkbox group hint text.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the checkbox group as a whole is invalid. Set to true to display a group error.
+         */
+        "invalid"?: boolean;
+        /**
+          * The label for the checkbox group. This is optional.
+         */
+        "label"?: string;
+        /**
+          * Emits whenever a checkbox within the group is checked or unchecked.
+         */
+        "onB2b-group-change"?: (event: B2bCheckboxGroupCustomEvent<CheckboxEventDetail>) => void;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+    }
+    interface B2bDropdown {
+        /**
+          * Whether the select as a whole is disabled. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * An optional error message for the dropdown. This will only appear if invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * An optional hint text for the dropdown.
+         */
+        "hint"?: string;
+        /**
+          * Whether the select is currently invalid. Per default it is false.
+         */
+        "invalid"?: boolean;
+        /**
+          * The dropdown label.
+         */
+        "label"?: string;
+        /**
+          * The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility.
+         */
+        "name"?: string;
+        /**
+          * Emits whenever the dropdown loses focus.
+         */
+        "onB2b-blur"?: (event: B2bDropdownCustomEvent<FocusEvent>) => void;
+        /**
+          * Emits the option whenever a new option is chosen.
+         */
+        "onB2b-change"?: (event: B2bDropdownCustomEvent<string>) => void;
+        /**
+          * Emits whenever the dropdown receives focus.
+         */
+        "onB2b-focus"?: (event: B2bDropdownCustomEvent<FocusEvent>) => void;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+    }
+    interface B2bGrid {
+        /**
+          * The inner padding of the grid container measured in px.
+         */
+        "margin"?: number;
+    }
+    interface B2bGridCol {
+        /**
+          * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row.
+         */
+        "span"?: | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 6
+    | 7
+    | 8
+    | 9
+    | 10
+    | 11
+    | 12;
+        /**
+          * The alignment of text placed inside of a column. Note that this will apply to all children.
+         */
+        "textAlign"?: 'left' | 'center' | 'right';
+    }
+    interface B2bGridRow {
+        /**
+          * Vertical alignment of columns. This requires the row to have a defined height.
+         */
+        "alignItems"?: 'stretch' | 'flex-start' | 'center' | 'flex-end';
+        /**
+          * The spacing in between individual columns in px. The higher the gap, the smaller the columns will be.
+         */
+        "columnGap"?: number;
+        /**
+          * Horizontal alignment of columns.
+         */
+        "justify"?: | 'start'
+    | 'end'
+    | 'center'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly';
+        /**
+          * The spacing between individual rows in px.
+         */
+        "rowGap"?: number;
+    }
+    /**
+     * Headline component to render hading tags content.
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46
+     */
+    interface B2bHeadline {
+        /**
+          * The alignment of the headline.
+         */
+        "align"?: 'left' | 'right' | 'center';
+        /**
+          * Whether the headline should have a margin. Per default, margins are enabled.
+         */
+        "noMargin"?: boolean;
+        /**
+          * Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `<h1>`, 200 to `<h2>` and 100 to `<h3>`
+         */
+        "size"?: '400' | '200' | '100';
+    }
+    interface B2bIcon {
+        /**
+          * The color of the icon
+         */
+        "color"?: 'primary' | 'secondary' | 'inverse' | 'inherit';
+        /**
+          * The name of the icon
+         */
+        "icon"?: IconName;
+        /**
+          * The size of the icon
+         */
+        "size"?: '50' | '100' | '200';
+    }
+    /**
+     * Input component
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+     */
+    interface B2bInput {
+        /**
+          * When setting the autofocus to true, the input element will be focused when the page loads.
+         */
+        "autofocus"?: boolean;
+        /**
+          * Whether or not the input is disabled. Default is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * The error message that is shown if the input is invalid.
+         */
+        "error"?: string;
+        /**
+          * The hint text that appears underneath the input field.
+         */
+        "hint"?: string;
+        /**
+          * Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false.
+         */
+        "invalid"?: boolean;
+        /**
+          * The input label.
+         */
+        "label"?: string;
+        /**
+          * The name of the input. Use it to group label and input together and make it more accessible.
+         */
+        "name"?: string;
+        /**
+          * Emits whenever the input loses focus.
+         */
+        "onB2b-blur"?: (event: B2bInputCustomEvent<FocusEvent>) => void;
+        /**
+          * Emits whenever the input receives focus.
+         */
+        "onB2b-focus"?: (event: B2bInputCustomEvent<FocusEvent>) => void;
+        /**
+          * Emits whenever the input value changes.
+         */
+        "onB2b-input"?: (event: B2bInputCustomEvent<InputChangeEvent>) => void;
+        /**
+          * A placeholder for the input field. Per default, it is null.
+         */
+        "placeholder"?: string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+        /**
+          * The type of the input. All native HTML types except date or month are supported. Default is text.
+         */
+        "type"?: | 'text'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'url';
+        /**
+          * The default value of the input field. If defined, it will prefill the input.
+         */
+        "value"?: string;
+    }
+    interface B2bInputGroup {
+        /**
+          * Whether or not the input group is disabled as a whole. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * A group error text. It will only show if invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * The hint text that appears underneath the input group.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false.
+         */
+        "invalid"?: boolean;
+    }
+    interface B2bInputLabel {
+        /**
+          * Will render the label with a disabled style. The default value is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+    }
+    interface B2bInputList {
+        /**
+          * The input label.
+         */
+        "label"?: string;
+        /**
+          * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
+         */
+        "optionsList"?: string[];
+        /**
+          * The placeholder shown in the input field.
+         */
+        "placeholder"?: string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+        /**
+          * The default value of the input field. If defined, it will prefill the input.
+         */
+        "value"?: string;
+    }
+    interface B2bInputListOption {
+        /**
+          * Emits the option as a string whenever an option is selected.
+         */
+        "onB2b-option-selected"?: (event: B2bInputListOptionCustomEvent<OptionSelectedEventDetail>) => void;
+        /**
+          * The option name.
+         */
+        "option"?: string;
+    }
+    interface B2bLabel {
+        /**
+          * The type of the label. Per default it is neutral.
+         */
+        "type"?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    }
+    /**
+     * Modal component
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+     */
+    interface B2bModal {
+        /**
+          * A boolean that indicates whether the modal can be dismissed by clicking in the backdrop outside the modal.
+         */
+        "backdropDismiss"?: boolean;
+        /**
+          * A boolean to indicate whether the modal can be dismissed by pressing the escape key on the keyboard
+         */
+        "escDismiss"?: boolean;
+        /**
+          * The title for the modal. This is required.
+         */
+        "heading": string;
+        /**
+          * This even will be triggered before the modal is closed
+         */
+        "onB2b-before-close"?: (event: B2bModalCustomEvent<BeforeCloseEventDetail>) => void;
+        /**
+          * This even will be triggered when the modal is closed
+         */
+        "onB2b-close"?: (event: B2bModalCustomEvent<void>) => void;
+        /**
+          * Whether the modal is shown or not. Default is false
+         */
+        "opened"?: boolean;
+        /**
+          * The size of the modal. If not specified, will assume the default size
+         */
+        "variant"?: 'default' | 'large';
+    }
+    interface B2bPagination {
+        /**
+          * Use this property to set programmatically the active page
+         */
+        "activePage"?: number;
+        /**
+          * (optional) translation to 'Go to next page'
+         */
+        "ariaLabelNextPage"?: string;
+        /**
+          * (optional) translation to 'Go to previous page'
+         */
+        "ariaLabelPreviousPage"?: string;
+        /**
+          * Will emit every time a page changes, by clicking back, next or any specific page. \ Emits a PageChangeEventDetail that includes lastSelectedPage, currentPage and direction. Direction is only when clicking back or next.
+         */
+        "onB2b-page-change"?: (event: B2bPaginationCustomEvent<PageChangeEventDetail>) => void;
+        /**
+          * The total number of pages to calculate the length of pagination component
+         */
+        "totalPages"?: number;
+    }
+    /**
+     * Paragraph component to render text content.
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45
+     */
+    interface B2bParagraph {
+        /**
+          * The alignment of the text.
+         */
+        "align"?: 'left' | 'right' | 'center';
+        /**
+          * The size of the text.
+         */
+        "size"?: '50' | '100';
+        /**
+          * The weight of the text.
+         */
+        "weight"?: 'bold' | 'normal';
+    }
+    interface B2bRadioButton {
+        /**
+          * Whether or not the radio button is currently checked. Per default it is false.
+         */
+        "checked"?: boolean;
+        /**
+          * Whether or not the radio button is currently disabled. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * An error text. It will only show if invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * A hint to give additional information on the radio button.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the radio button should be rendered with error styles. Per default it is false.
+         */
+        "invalid"?: boolean;
+        /**
+          * The label of the radio button. This is required
+         */
+        "label": string;
+        /**
+          * The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required.
+         */
+        "name": string;
+        /**
+          * Emits whenever the radio button loses focus.
+         */
+        "onB2b-blur"?: (event: B2bRadioButtonCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted whenever the radio button is clicked.
+         */
+        "onB2b-change"?: (event: B2bRadioButtonCustomEvent<RadioEventDetail>) => void;
+        /**
+          * Emits whenever the radio button receives focus.
+         */
+        "onB2b-focus"?: (event: B2bRadioButtonCustomEvent<FocusEvent>) => void;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+        /**
+          * The value of the radio button. This will be emitted when the radio button is clicked.
+         */
+        "value"?: string;
+    }
+    interface B2bRadioGroup {
+        /**
+          * The alignment of the radio group. Can be vertical or horizontal, per default it is vertical.
+         */
+        "alignment"?: 'vertical' | 'horizontal';
+        /**
+          * Whether or not the radio group is disabled as a whole. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * A group error text. It will only show if invalid is set to true.
+         */
+        "error"?: string;
+        /**
+          * A group hint text.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false.
+         */
+        "invalid"?: boolean;
+        /**
+          * The radio group label. This is optional.
+         */
+        "label"?: string;
+        /**
+          * The radio group name used to group them together programmatically. This is required.
+         */
+        "name": string;
+        /**
+          * Emitted whenever a radio button in the group is clicked. Will emit the value of the currently selected radio button.
+         */
+        "onB2b-group-change"?: (event: B2bRadioGroupCustomEvent<RadioEventDetail>) => void;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+    }
+    interface B2bRequiredSeparator {
+        /**
+          * The required label. Per default it is the german 'Pflichtfeld', but can be altered.
+         */
+        "label"?: string;
+    }
+    interface B2bScrollableContainer {
+    }
+    interface B2bSearch {
+        /**
+          * Emits whenever the user clicks the search button. Will emit the search string.
+         */
+        "onB2b-search"?: (event: B2bSearchCustomEvent<SearchClickEventDetail>) => void;
+        /**
+          * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
+         */
+        "optionsList"?: string[];
+        /**
+          * The placeholder shown in the input field.
+         */
+        "placeholder"?: string;
+        /**
+          * The default value of the search input field. If defined, it will prefill the input.
+         */
+        "value"?: string;
+    }
+    interface B2bSeparator {
+        /**
+          * The alignment of the separator. Per default it is horizontal.
+         */
+        "alignment"?: 'vertical' | 'horizontal';
+    }
+    /**
+     * Spinner component to display loading indicator.
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70
+     */
+    interface B2bSpinner {
+        /**
+          * The color of the spinner.
+         */
+        "color"?: 'primary' | 'secondary' | 'inverse';
+        /**
+          * The size of the spinner.
+         */
+        "size"?: '50' | '100' | '200';
+    }
+    interface B2bTab {
+        /**
+          * Whether or not the tab is currently disabled. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether or not the tab has an error. Per default, it is false.
+         */
+        "invalid"?: boolean;
+        /**
+          * Emits whether the tab is selected whenever there is a change to the tabs selected status.
+         */
+        "onB2b-change"?: (event: B2bTabCustomEvent<boolean>) => void;
+        /**
+          * Whether or not the tab is currently selected. Per default it is false.
+         */
+        "selected"?: boolean;
+    }
+    interface B2bTabGroup {
+        /**
+          * Emits the previous and the next tab panel whenever a new panel is selected.
+         */
+        "onB2b-selected"?: (event: B2bTabGroupCustomEvent<TabChangeEventDetail>) => void;
+        /**
+          * Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation. Set it to true if you want to use external, route-based navigation.
+         */
+        "useRouter"?: boolean;
+    }
+    interface B2bTabPanel {
+    }
+    interface B2bTable {
+        /**
+          * Emits whenever the sort direction of any column in the table changes.
+         */
+        "onB2b-sort-change"?: (event: B2bTableCustomEvent<ColumnSortChangeEventDetail>) => void;
+        /**
+          * The size of the table. Both will expand to 100% of parent size. Expand cells will use as much space as content needs and text will wrap. Equal will keep all column sizes proportional to the number of columns.
+         */
+        "size"?: TableSizes;
+    }
+    interface B2bTableCell {
+        /**
+          * Alignment of the content of the cell, by default is to the left. *
+         */
+        "align"?: ContentAlignment;
+        /**
+          * Background color of the cell. This color selection does not have hover states, as it is handled from the row*
+         */
+        "color"?: B2BTableColourOptions;
+        /**
+          * adds a border to the right of the cell. *
+         */
+        "divider"?: boolean;
+        /**
+          * The size of the cell. Follows table size. When size is equal and textWrap is false, the text will truncate with Ellipsis. Other sizes won't affect cell current implementation.
+         */
+        "size"?: TableSizes;
+        /**
+          * Weather text should wrap or truncate. It will only truncate when table size is equal *
+         */
+        "textWrap"?: boolean;
+    }
+    interface B2bTableHeader {
+        /**
+          * adds a border to the right of the header. *
+         */
+        "divider"?: boolean;
+        /**
+          * sets the header position to sticky. Use it when table is inside a scrollable container. *
+         */
+        "fixed"?: boolean;
+        /**
+          * Emits whenever the sort direction changes.
+         */
+        "onB2b-change"?: (event: B2bTableHeaderCustomEvent<TableSortDirections>) => void;
+        /**
+          * The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this.
+         */
+        "sortDirection"?: TableSortDirections;
+        /**
+          * Optional string to uniquely represent the header, this id will be emitted by the table b2b-sort-change event. If not provided, the event will emit the header textContent.
+         */
+        "sortId"?: string;
+    }
+    interface B2bTableRow {
+        /**
+          * Background color of the row. Use it semantically. This color selection have hover states *
+         */
+        "color"?: B2BTableColourOptions1;
+        /**
+          * Whether the row will be highlighted on mouse over *
+         */
+        "highlight"?: boolean;
+    }
+    interface B2bTableRowgroup {
+        /**
+          * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over.
+         */
+        "type"?: TableRowgroupTypes;
+    }
+    /**
+     * Text Area Component
+     * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96
+     */
+    interface B2bTextarea {
+        /**
+          * Whether or not the textarea should be automatically focused on page load. Per default it is false.
+         */
+        "autofocus"?: boolean;
+        /**
+          * Whether or not the textarea is disabled. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * An optional error message that is displayed when the textarea is invalid. Per default it is undefined.
+         */
+        "error"?: string;
+        /**
+          * An optional hint for the textarea. Per default it is undefined.
+         */
+        "hint"?: string;
+        /**
+          * Whether or not the textarea should be displayed with error styles. Per default it is false.
+         */
+        "invalid"?: boolean;
+        /**
+          * The textarea label. This is optional.
+         */
+        "label"?: string;
+        /**
+          * The maximum input length. Characters entered after that will not be appended to the input value.
+         */
+        "maxLength"?: number;
+        /**
+          * The name of the textarea. This is used to programmatically group it into a form.
+         */
+        "name"?: string;
+        /**
+          * Emits whenever the textarea loses focus.
+         */
+        "onB2b-blur"?: (event: B2bTextareaCustomEvent<FocusEvent>) => void;
+        /**
+          * Emits whenever the textarea receives focus.
+         */
+        "onB2b-focus"?: (event: B2bTextareaCustomEvent<FocusEvent>) => void;
+        /**
+          * Emits whenever the textarea's input changes.
+         */
+        "onB2b-input"?: (event: B2bTextareaCustomEvent<InputChangeEvent>) => void;
+        /**
+          * The textarea placeholder. It is optional and undefined by default.
+         */
+        "placeholder"?: string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+        /**
+          * If and how the textarea is resizable. Per default it is resizable in both directions.
+         */
+        "resize"?: | 'unset'
+    | 'none'
+    | 'vertical'
+    | 'horizontal';
+        /**
+          * The value of the textarea. Per default it is null.
+         */
+        "value"?: string;
+    }
+    interface B2bToggleButton {
+        /**
+          * Whether or not the toggle button is currently checked. Per default it is false.
+         */
+        "checked"?: boolean;
+        /**
+          * Whether or not the toggle button is currently disabled. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * The label of the toggle button. This is required
+         */
+        "label": string;
+        /**
+          * The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required.
+         */
+        "name": string;
+        /**
+          * Emitted whenever the toggle button is clicked.
+         */
+        "onB2b-change"?: (event: B2bToggleButtonCustomEvent<ToggleButtonEventDetail>) => void;
+        /**
+          * The value of the toggle button. This will be emitted when the toggle button is clicked. This is required
+         */
+        "value": string;
+    }
+    interface B2bToggleGroup {
+        /**
+          * Whether or not the toggle group is disabled as a whole. Per default it is false.
+         */
+        "disabled"?: boolean;
+        /**
+          * The toggle group name used to group them together programmatically. This is required.
+         */
+        "name": string;
+        /**
+          * Emitted whenever a toggle button in the group is clicked. Will emit the value of the currently selected radio button.
+         */
+        "onB2b-group-change"?: (event: B2bToggleGroupCustomEvent<ToggleButtonEventDetail>) => void;
+    }
+    /**
+     * The tooltip can display additional information, and will be visible based on
+     * a specific trigger.
+     */
+    interface B2bTooltip {
+        /**
+          * The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content.
+         */
+        "content"?: string;
+        /**
+          * Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility.
+         */
+        "opened"?: boolean;
+        /**
+          * Position of the tooltip.
+         */
+        "position"?: 'left' | 'right' | 'top' | 'bottom';
+        /**
+          * The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover.
+         */
+        "trigger"?: 'hover' | 'focus' | 'custom';
+    }
+    interface IntrinsicElements {
+        "b2b-alert": B2bAlert;
+        "b2b-anchor": B2bAnchor;
+        "b2b-button": B2bButton;
+        "b2b-checkbox": B2bCheckbox;
+        "b2b-checkbox-group": B2bCheckboxGroup;
+        "b2b-dropdown": B2bDropdown;
+        "b2b-grid": B2bGrid;
+        "b2b-grid-col": B2bGridCol;
+        "b2b-grid-row": B2bGridRow;
+        "b2b-headline": B2bHeadline;
+        "b2b-icon": B2bIcon;
+        "b2b-input": B2bInput;
+        "b2b-input-group": B2bInputGroup;
+        "b2b-input-label": B2bInputLabel;
+        "b2b-input-list": B2bInputList;
+        "b2b-input-list-option": B2bInputListOption;
+        "b2b-label": B2bLabel;
+        "b2b-modal": B2bModal;
+        "b2b-pagination": B2bPagination;
+        "b2b-paragraph": B2bParagraph;
+        "b2b-radio-button": B2bRadioButton;
+        "b2b-radio-group": B2bRadioGroup;
+        "b2b-required-separator": B2bRequiredSeparator;
+        "b2b-scrollable-container": B2bScrollableContainer;
+        "b2b-search": B2bSearch;
+        "b2b-separator": B2bSeparator;
+        "b2b-spinner": B2bSpinner;
+        "b2b-tab": B2bTab;
+        "b2b-tab-group": B2bTabGroup;
+        "b2b-tab-panel": B2bTabPanel;
+        "b2b-table": B2bTable;
+        "b2b-table-cell": B2bTableCell;
+        "b2b-table-header": B2bTableHeader;
+        "b2b-table-row": B2bTableRow;
+        "b2b-table-rowgroup": B2bTableRowgroup;
+        "b2b-textarea": B2bTextarea;
+        "b2b-toggle-button": B2bToggleButton;
+        "b2b-toggle-group": B2bToggleGroup;
+        "b2b-tooltip": B2bTooltip;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "b2b-alert": LocalJSX.B2bAlert & JSXBase.HTMLAttributes<HTMLB2bAlertElement>;
+            "b2b-anchor": LocalJSX.B2bAnchor & JSXBase.HTMLAttributes<HTMLB2bAnchorElement>;
+            "b2b-button": LocalJSX.B2bButton & JSXBase.HTMLAttributes<HTMLB2bButtonElement>;
+            "b2b-checkbox": LocalJSX.B2bCheckbox & JSXBase.HTMLAttributes<HTMLB2bCheckboxElement>;
+            "b2b-checkbox-group": LocalJSX.B2bCheckboxGroup & JSXBase.HTMLAttributes<HTMLB2bCheckboxGroupElement>;
+            "b2b-dropdown": LocalJSX.B2bDropdown & JSXBase.HTMLAttributes<HTMLB2bDropdownElement>;
+            "b2b-grid": LocalJSX.B2bGrid & JSXBase.HTMLAttributes<HTMLB2bGridElement>;
+            "b2b-grid-col": LocalJSX.B2bGridCol & JSXBase.HTMLAttributes<HTMLB2bGridColElement>;
+            "b2b-grid-row": LocalJSX.B2bGridRow & JSXBase.HTMLAttributes<HTMLB2bGridRowElement>;
+            /**
+             * Headline component to render hading tags content.
+             * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46
+             */
+            "b2b-headline": LocalJSX.B2bHeadline & JSXBase.HTMLAttributes<HTMLB2bHeadlineElement>;
+            "b2b-icon": LocalJSX.B2bIcon & JSXBase.HTMLAttributes<HTMLB2bIconElement>;
+            /**
+             * Input component
+             * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+             */
+            "b2b-input": LocalJSX.B2bInput & JSXBase.HTMLAttributes<HTMLB2bInputElement>;
+            "b2b-input-group": LocalJSX.B2bInputGroup & JSXBase.HTMLAttributes<HTMLB2bInputGroupElement>;
+            "b2b-input-label": LocalJSX.B2bInputLabel & JSXBase.HTMLAttributes<HTMLB2bInputLabelElement>;
+            "b2b-input-list": LocalJSX.B2bInputList & JSXBase.HTMLAttributes<HTMLB2bInputListElement>;
+            "b2b-input-list-option": LocalJSX.B2bInputListOption & JSXBase.HTMLAttributes<HTMLB2bInputListOptionElement>;
+            "b2b-label": LocalJSX.B2bLabel & JSXBase.HTMLAttributes<HTMLB2bLabelElement>;
+            /**
+             * Modal component
+             * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+             */
+            "b2b-modal": LocalJSX.B2bModal & JSXBase.HTMLAttributes<HTMLB2bModalElement>;
+            "b2b-pagination": LocalJSX.B2bPagination & JSXBase.HTMLAttributes<HTMLB2bPaginationElement>;
+            /**
+             * Paragraph component to render text content.
+             * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45
+             */
+            "b2b-paragraph": LocalJSX.B2bParagraph & JSXBase.HTMLAttributes<HTMLB2bParagraphElement>;
+            "b2b-radio-button": LocalJSX.B2bRadioButton & JSXBase.HTMLAttributes<HTMLB2bRadioButtonElement>;
+            "b2b-radio-group": LocalJSX.B2bRadioGroup & JSXBase.HTMLAttributes<HTMLB2bRadioGroupElement>;
+            "b2b-required-separator": LocalJSX.B2bRequiredSeparator & JSXBase.HTMLAttributes<HTMLB2bRequiredSeparatorElement>;
+            "b2b-scrollable-container": LocalJSX.B2bScrollableContainer & JSXBase.HTMLAttributes<HTMLB2bScrollableContainerElement>;
+            "b2b-search": LocalJSX.B2bSearch & JSXBase.HTMLAttributes<HTMLB2bSearchElement>;
+            "b2b-separator": LocalJSX.B2bSeparator & JSXBase.HTMLAttributes<HTMLB2bSeparatorElement>;
+            /**
+             * Spinner component to display loading indicator.
+             * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-70
+             */
+            "b2b-spinner": LocalJSX.B2bSpinner & JSXBase.HTMLAttributes<HTMLB2bSpinnerElement>;
+            "b2b-tab": LocalJSX.B2bTab & JSXBase.HTMLAttributes<HTMLB2bTabElement>;
+            "b2b-tab-group": LocalJSX.B2bTabGroup & JSXBase.HTMLAttributes<HTMLB2bTabGroupElement>;
+            "b2b-tab-panel": LocalJSX.B2bTabPanel & JSXBase.HTMLAttributes<HTMLB2bTabPanelElement>;
+            "b2b-table": LocalJSX.B2bTable & JSXBase.HTMLAttributes<HTMLB2bTableElement>;
+            "b2b-table-cell": LocalJSX.B2bTableCell & JSXBase.HTMLAttributes<HTMLB2bTableCellElement>;
+            "b2b-table-header": LocalJSX.B2bTableHeader & JSXBase.HTMLAttributes<HTMLB2bTableHeaderElement>;
+            "b2b-table-row": LocalJSX.B2bTableRow & JSXBase.HTMLAttributes<HTMLB2bTableRowElement>;
+            "b2b-table-rowgroup": LocalJSX.B2bTableRowgroup & JSXBase.HTMLAttributes<HTMLB2bTableRowgroupElement>;
+            /**
+             * Text Area Component
+             * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96
+             */
+            "b2b-textarea": LocalJSX.B2bTextarea & JSXBase.HTMLAttributes<HTMLB2bTextareaElement>;
+            "b2b-toggle-button": LocalJSX.B2bToggleButton & JSXBase.HTMLAttributes<HTMLB2bToggleButtonElement>;
+            "b2b-toggle-group": LocalJSX.B2bToggleGroup & JSXBase.HTMLAttributes<HTMLB2bToggleGroupElement>;
+            /**
+             * The tooltip can display additional information, and will be visible based on
+             * a specific trigger.
+             */
+            "b2b-tooltip": LocalJSX.B2bTooltip & JSXBase.HTMLAttributes<HTMLB2bTooltipElement>;
+        }
+    }
+}