@otto-de/b2b-core-components 1.37.0 → 1.37.2

package/dist/collection/components/table/table.stories.js

@@ -59,14 +59,14 @@ const meta = {
     <b2b-table-rowgroup type="body">
       ${repeat(args.data.rows, (row, index) => html `
           <b2b-table-row
-            highlight="${args.highlight}"
+            highlight=${args.highlight}
             color=${index === 0 ? args.color : 'default'}>
             ${repeat(
         // @ts-ignore
         row, (cell, index) => html `<b2b-table-cell
                   ?divider=${args.withDividers && index === 0}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
+                  align=${args.align}
+                  text-wrap=${args.textWrap}
                   >${cell}</b2b-table-cell
                 >`)}<b2b-table-cell
               ><b2b-button size="50">Action</b2b-button></b2b-table-cell
@@ -111,7 +111,7 @@ export const ScrollableTable = {
         var args = __rest(_a, []);
         return html `<b2b-scrollable-container
       style="width: ${args.parentWidth}; height: ${args.parentHeight};">
-      <b2b-table size="${args.size}">
+      <b2b-table size=${args.size}>
         <b2b-table-rowgroup type="header">
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
@@ -127,12 +127,12 @@ export const ScrollableTable = {
         <b2b-table-rowgroup type="body">
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map((data, index) => html `<b2b-table-cell
                     ?divider=${args.withDividers && index === 0}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
             </b2b-table-row>`;
@@ -148,12 +148,12 @@ const RenderSortableTable = (_a) => {
       <b2b-table-rowgroup type="body">
         ${args.data.rows.map((row, index) => {
         return html `<b2b-table-row
-            highlight="${args.highlight}"
+            highlight=${args.highlight}
             color=${index === 0 ? args.color : 'default'}>
             ${row.map(data => html `<b2b-table-cell
                   ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
+                  align=${args.align}
+                  text-wrap=${args.textWrap}
                   >${data}</b2b-table-cell
                 >`)}
           </b2b-table-row>`;
@@ -233,7 +233,7 @@ export const AccordionTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-      <b2b-table size="${args.size}">
+      <b2b-table size=${args.size}>
         <b2b-table-rowgroup type="header" accordion>
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
@@ -249,12 +249,12 @@ export const AccordionTable = {
         <b2b-table-rowgroup type="body" accordion>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${args.withDividers}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -266,12 +266,12 @@ export const AccordionTable = {
         <b2b-table-rowgroup type="body" accordion opened>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${args.withDividers}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -289,7 +289,7 @@ export const SelectableTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-      <b2b-table size="${args.size}">
+      <b2b-table size=${args.size}>
         <b2b-table-rowgroup type="header" accordion selectable>
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
@@ -305,12 +305,12 @@ export const SelectableTable = {
         <b2b-table-rowgroup type="body" accordion selectable>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${args.withDividers}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -322,12 +322,12 @@ export const SelectableTable = {
         <b2b-table-rowgroup type="body" accordion opened selectable>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${args.withDividers}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -345,42 +345,42 @@ export const ColspanTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 500px">
-      <b2b-table size="${args.size}">
-        <b2b-table-rowgroup type="header" selectable="${args.selectable}">
+      <b2b-table size=${args.size}>
+        <b2b-table-rowgroup type="header" selectable=${args.selectable}>
           <b2b-table-row>
-            <b2b-table-header divider="${args.withDividers}" colspan="2"
+            <b2b-table-header divider=${args.withDividers} colspan="2"
               >2 Columns</b2b-table-header
             >
-            <b2b-table-header divider="${args.withDividers}"
+            <b2b-table-header divider=${args.withDividers}
               >1 Column</b2b-table-header
             >
             <b2b-table-header>1 Column</b2b-table-header>
           </b2b-table-row>
         </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body" selectable="${args.selectable}">
+        <b2b-table-rowgroup type="body" selectable=${args.selectable}>
           <b2b-table-row>
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
             <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
           </b2b-table-row>
           <b2b-table-row>
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
             <b2b-table-cell>1 Column</b2b-table-cell>
           </b2b-table-row>
           <b2b-table-row>
-            <b2b-table-cell divider="${args.withDividers}" colspan="2"
+            <b2b-table-cell divider=${args.withDividers} colspan="2"
               >2 Columns</b2b-table-cell
             >
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
             <b2b-table-cell>1 Column</b2b-table-cell>

package/dist/collection/components/textarea/textarea.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/textarea/textarea.stories.js

@@ -2,18 +2,18 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, placeholder, disabled, value, invalid, hint, error, autofocus, name, resize, height, }) => {
     return html `<b2b-textarea
-    label="${label}"
-    required="${required}"
-    placeholder="${placeholder}"
-    disabled="${disabled}"
-    value="${value}"
-    invalid="${invalid}"
-    hint="${hint}"
-    error="${error}"
-    autofocus="${autofocus}"
-    name="${name}"
-    height="${height}"
-    resize="${resize}"></b2b-textarea>`;
+    label=${label}
+    required=${required}
+    placeholder=${placeholder}
+    disabled=${disabled}
+    value=${value}
+    invalid=${invalid}
+    hint=${hint}
+    error=${error}
+    autofocus=${autofocus}
+    name=${name}
+    height=${height}
+    resize=${resize}></b2b-textarea>`;
 };
 const defaultArgs = {
     label: 'Textarea',

package/dist/collection/components/time-picker/time-picker.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/time-picker/time-picker.js

@@ -128,10 +128,10 @@ export class TimePickerComponent {
             }, onMouseDown: e => e.preventDefault() }, h("div", { key: '2f3d104f3c8b91f828195d17a493ae085098ffb2', class: "b2b-time-picker__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, this.availableTimes.map(time => (h("div", { key: time, class: {
                 'b2b-time-picker__option': true,
                 'b2b-time-picker__option--selected': time === this.value,
-            }, "data-value": time, onClick: this.onSelect, role: "option", "aria-selected": time === this.value ? 'true' : 'false' }, time))))), h("span", { class: {
+            }, "data-value": time, onClick: this.onSelect, role: "option", "aria-selected": time === this.value ? 'true' : 'false' }, time))))), (this.hint || this.currentErrorMessage) && (h("span", { class: {
                 'b2b-time-picker__hint': true,
                 'b2b-time-picker__hint--error': this.isInvalid,
-            } }, this.isInvalid ? this.currentErrorMessage : this.hint)));
+            } }, this.isInvalid ? this.currentErrorMessage : this.hint))));
     }
     static get is() { return "b2b-time-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle-button/toggle-button.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/toggle-chip/toggle-chip.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/toggle-group/toggle-group.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/toggle-group/toggle-group.stories.js

@@ -2,23 +2,23 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ name, disabled, singleDisabled }) => {
     return html `
-    <b2b-toggle-group name="${name}" disabled="${disabled}">
+    <b2b-toggle-group name=${name} disabled=${disabled}>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="abcd"
         label="ABCD"></b2b-toggle-button>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="efgh"
         label="EFGH"></b2b-toggle-button>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="ijkl"
         label="IJKL"></b2b-toggle-button>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="mnop"
-        disabled="${singleDisabled}"
+        disabled=${singleDisabled}
         label="MNOP"></b2b-toggle-button>
     </b2b-toggle-group>
   `;

package/dist/collection/components/toggle-switch/toggle-switch.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/toggle-switch/toggle-switch.stories.js

@@ -25,10 +25,10 @@ export default {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-toggle-switch
-      label="${args.label}"
-      disabled="${args.disabled}"
-      label-position="${args.labelPosition}"
-      state="${args.state}" />`;
+      label=${args.label}
+      disabled=${args.disabled}
+      label-position=${args.labelPosition}
+      state=${args.state} />`;
     },
 };
 export const SwitchOn = {};

package/dist/collection/components/tooltip/tooltip.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/tooltip/tooltip.stories.js

@@ -47,10 +47,10 @@ const meta = {
       <b2b-paragraph>
         I am some text with a tooltip
         <b2b-tooltip
-          position="${args.position}"
-          trigger="${args.trigger}"
-          content="${args.content}"
-          opened="${args.opened}"
+          position=${args.position}
+          trigger=${args.trigger}
+          content=${args.content}
+          opened=${args.opened}
           data-testid="trigger"
           >${markup}
         </b2b-tooltip>
@@ -67,10 +67,10 @@ export const FocusTooltip = Object.assign(Object.assign({}, meta), { render: arg
       <b2b-paragraph>
         I am some text with a tooltip
         <b2b-tooltip
-          position="${args.position}"
-          trigger="${args.trigger}"
-          content="${args.content}"
-          opened="${args.opened}"
+          position=${args.position}
+          trigger=${args.trigger}
+          content=${args.content}
+          opened=${args.opened}
           data-testid="trigger">
           ${focusTriggerMarkup}
         </b2b-tooltip>

package/dist/collection/components/wizard/wizard.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/wizard/wizard.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ activeStep, checkIcon }) => {
-    return html `<b2b-wizard active-step="${activeStep}" check-icon="${checkIcon}">
+    return html `<b2b-wizard active-step=${activeStep} check-icon=${checkIcon}>
     <b2b-wizard-step>Step 1</b2b-wizard-step>
     <b2b-wizard-step>Step 2</b2b-wizard-step>
     <b2b-wizard-step>Step 3</b2b-wizard-step>
@@ -13,15 +13,15 @@ story010Wizard.args = { activeStep: '2', checkIcon: true };
 story010Wizard.storyName = 'Default';
 const StatesTemplate = ({ step }) => {
     return html `
-    <b2b-wizard-step step="${step}" state="default">Default</b2b-wizard-step>
-    <b2b-wizard-step step="${step}" state="completed"
+    <b2b-wizard-step step=${step} state="default">Default</b2b-wizard-step>
+    <b2b-wizard-step step=${step} state="completed"
       >Completed with icon</b2b-wizard-step
     >
-    <b2b-wizard-step step="${step}" state="completed" check-icon="false"
+    <b2b-wizard-step step=${step} state="completed" check-icon="false"
       >Completed with number</b2b-wizard-step
     >
-    <b2b-wizard-step step="${step}" state="pending">Pending</b2b-wizard-step>
-    <b2b-wizard-step step="${step}" state="disabled">Disabled</b2b-wizard-step>
+    <b2b-wizard-step step=${step} state="pending">Pending</b2b-wizard-step>
+    <b2b-wizard-step step=${step} state="disabled">Disabled</b2b-wizard-step>
   `;
 };
 export const story020WizardStates = StatesTemplate.bind({});

package/dist/collection/components/wizard-icon/wizard-icon.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/wizard-icon/wizard-icon.stories.js

@@ -2,7 +2,7 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const TemplateIcon = ({ state, step, checkIcon }) => {
     return html `<div>
-    <b2b-wizard-icon state="${state}" step="${step}" check-icon="${checkIcon}">
+    <b2b-wizard-icon state=${state} step=${step} check-icon=${checkIcon}>
     </b2b-wizard-icon>
   </div>`;
 };

package/dist/components/b2b-alert.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon-100.js';
 
-const alertCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-alert{display:none;padding:var(--b2b-size-30);gap:var(--b2b-size-30);font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);flex-shrink:0;border-radius:var(--b2b-size-7)}.b2b-alert--info{background-color:var(--b2b-color-info-50)}.b2b-alert--info__icon{color:var(--b2b-color-info-100)}.b2b-alert--warning{background-color:var(--b2b-color-warning-50)}.b2b-alert--error{color:var(--b2b-color-error-100);background-color:var(--b2b-color-error-50)}.b2b-alert--success{background-color:var(--b2b-color-success-50)}.b2b-alert--success__icon{color:var(--b2b-color-success-100)}.b2b-alert__close-icon{padding-top:var(--b2b-size-7);width:var(--b2b-size-30);height:var(--b2b-size-35);cursor:pointer;fill:var(--b2b-color-grey-400);flex-shrink:0}.b2b-alert__content{display:flex;align-items:baseline;flex:2;gap:var(--b2b-size-30)}.b2b-alert__content p{width:100%;margin:0;padding:var(--b2b-size-5) 0 var(--b2b-size-1) 0}.b2b-alert--open{display:flex}.b2b-alert--small{width:fit-content;justify-content:center;padding:var(--b2b-size-7);display:inline-flex}.b2b-alert--large{width:inherit;justify-content:space-between}";
+const alertCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-35:#F0F0F0;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-35);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-35:#F0F0F0;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-alert{display:none;padding:var(--b2b-size-30);gap:var(--b2b-size-30);font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);flex-shrink:0;border-radius:var(--b2b-size-7)}.b2b-alert--info{background-color:var(--b2b-color-info-50)}.b2b-alert--info__icon{color:var(--b2b-color-info-100)}.b2b-alert--warning{background-color:var(--b2b-color-warning-50)}.b2b-alert--error{color:var(--b2b-color-error-100);background-color:var(--b2b-color-error-50)}.b2b-alert--success{background-color:var(--b2b-color-success-50)}.b2b-alert--success__icon{color:var(--b2b-color-success-100)}.b2b-alert__close-icon{padding-top:var(--b2b-size-7);width:var(--b2b-size-30);height:var(--b2b-size-35);cursor:pointer;fill:var(--b2b-color-grey-400);flex-shrink:0}.b2b-alert__content{display:flex;align-items:baseline;flex:2;gap:var(--b2b-size-30)}.b2b-alert__content p{width:100%;margin:0;padding:var(--b2b-size-5) 0 var(--b2b-size-1) 0}.b2b-alert--open{display:flex}.b2b-alert--small{width:fit-content;justify-content:center;padding:var(--b2b-size-7);display:inline-flex}.b2b-alert--large{width:inherit;justify-content:space-between}";
 const B2bAlertStyle0 = alertCss;
 
 const AlertComponent = /*@__PURE__*/ proxyCustomElement(class AlertComponent extends HTMLElement {