@otto-de/b2b-core-components 1.9.0-beta.1 → 1.9.0

package/dist/collection/components/input/input.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

package/dist/collection/components/input-list/input-list.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

package/dist/collection/components/input-list/input-list.e2e.js

@@ -26,13 +26,27 @@ describe('B2B-InputList', () => {
     let inputValue = inputList.getAttribute('value');
     expect(inputValue).toBe('8');
   });
-  it('should not receive input text when disabled', async () => {
+  it('should not receive input text when disabled & should not show close icon', async () => {
     const inputList = await page.find('b2b-input-list');
     inputList.setAttribute('disabled', true);
     await page.waitForChanges();
     await typeInput();
     let inputValue = inputList.getAttribute('value');
     expect(inputValue).toBe(null);
+    const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+    expect(closeIcon).toBeNull();
+  });
+  it('should not not show close icon when input list has text and is disabled', async () => {
+    await typeInput('b');
+    await typeInput('2');
+    await typeInput('b');
+    const inputList = await page.find('b2b-input-list');
+    inputList.setAttribute('disabled', true);
+    await page.waitForChanges();
+    let inputValue = inputList.getAttribute('value');
+    expect(inputValue).toBe('b2b');
+    const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+    expect(closeIcon).toBeNull();
   });
   it('should not show search list when input is not focused', async () => {
     await setOptionsList();

package/dist/collection/components/input-list/input-list.js

@@ -148,7 +148,7 @@ export class InputListComponent {
           this.isElementFocused &&
           Boolean(this.value),
         [groupOrderClass]: true,
-      } }, h("b2b-input", { type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, Boolean(this.value) && (h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+      } }, h("b2b-input", { type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
   }
   static get is() { return "b2b-input-list"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-list/input-list.stories.js

@@ -53,9 +53,6 @@ export const Focused = {
     }, 500);
   },
 };
-export const Disabled = {
-  args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
-};
 export const CustomList = {
   args: Object.assign({}, meta.args),
   render: (_a) => {
@@ -83,3 +80,34 @@ export const CustomList = {
   </div>`;
   },
 };
+export const DisabledWithoutSelectedOption = {
+  args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+};
+export const disabledWithSelectedOption = {
+  args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<div style="height: 130px; width: 300px">
+    <b2b-input-list
+      data-testid="element"
+      label="${args.label}"
+      value="${args.optionsList[0]}"
+      required="${args.required}"
+      placeholder="${args.placeholder}"
+      disabled="${args.disabled}"
+      .optionsList=${args.optionsList}
+      ><ul>
+        <li>Option 1</li>
+        <li>
+          Option 2
+          <ul>
+            <li>Option 2.1</li>
+            <li>Option 2.2</li>
+          </ul>
+        </li>
+        <li>Option 3</li>
+      </ul></b2b-input-list
+    >
+  </div>`;
+  },
+};

package/dist/collection/components/label/label.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

package/dist/collection/components/modal/modal.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;

package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.css

@@ -0,0 +1,293 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-table-hover: #e6f4ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-50: var(--b2b-size-30);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@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");
+}
+:host {
+  width: 100%;
+}
+:host b2b-input-label {
+  margin-bottom: var(--b2b-size-10);
+  display: block;
+}
+:host .b2b-multiselect-dropdown {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  min-width: 20rem;
+  overflow: hidden;
+  border: 1px solid var(--b2b-color-grey-200);
+  border-radius: var(--b2b-size-border-radius-100);
+  padding: var(--b2b-size-15) var(--b2b-size-25);
+  max-height: 104px;
+  background-color: var(--b2b-color-white-100);
+}
+:host .b2b-multiselect-dropdown--open {
+  border-radius: var(--b2b-size-border-no-radius-bottom);
+  border-bottom: 0;
+}
+:host .b2b-multiselect-dropdown__placeholder {
+  color: var(--b2b-color-black-100);
+  user-select: none;
+  cursor: default;
+  font-size: var(--b2b-size-copy-100);
+  line-height: var(--b2b-size-copy-line-height-100);
+  font-family: var(--b2b-font-family-default);
+}
+:host .b2b-multiselect-dropdown__chip-container {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 4px 0;
+  width: calc(100% - 24px);
+}
+:host .b2b-multiselect-dropdown__options-container {
+  position: relative;
+  display: none;
+}
+:host .b2b-multiselect-dropdown__options-container--visible {
+  display: block;
+}
+:host .b2b-multiselect-dropdown__options {
+  position: absolute;
+  width: 100%;
+  max-height: 312px;
+  overflow-y: auto;
+  margin: 0;
+  background-color: var(--b2b-color-white-100);
+  border: solid 1px var(--b2b-color-grey-200);
+  box-sizing: border-box;
+  z-index: 10;
+}
+:host .b2b-multiselect-dropdown__option__search {
+  width: 100%;
+}
+:host .b2b-multiselect-dropdown__option__search__input {
+  width: calc(100% - 16px);
+  font-size: var(--b2b-size-copy-100);
+  line-height: var(--b2b-size-copy-line-height-100);
+  font-family: var(--b2b-font-family-default);
+  outline: none;
+  border-bottom: 1px solid var(--b2b-color-grey-200);
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  padding: 8px 8px 10px;
+}
+:host .b2b-multiselect-dropdown__option__select-all {
+  border-bottom: 1px solid var(--b2b-color-grey-200);
+}
+:host .b2b-multiselect-dropdown__option__show-more-button {
+  cursor: pointer;
+}