@otto-de/b2b-core-components 1.16.0 → 1.18.0

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -45,10 +45,10 @@ export class B2BTextareaComponent {
         }
     }
     render() {
-        return (h(Host, { key: '3269a163de385e193c1d67643bb0488015d715b1', class: {
+        return (h(Host, { key: 'fa67a181d11d401b8619990c40cd56f788365a05', class: {
                 'b2b-textarea': true,
                 'b2b-textarea--error': this.invalid && !this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '294b3815a1a775b5e79eb405877925bf2251ddc5', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '87fe71ca84f053e80625942b7fe3afcfd4cfa44a', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-textarea"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -31,13 +31,13 @@ export class B2bToggleButtonComponent {
         return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((toggle) => toggle.value !== this.value);
     }
     render() {
-        return (h(Host, { key: '6e25a1828cae4a3649081c9494b04f59fd3b0698', onClick: this.onClick }, h("span", { key: '06b61fa400dd95dbbef5345c7f28de6e17a2c23a', class: {
+        return (h(Host, { key: '1b4455bc08da5cd59668542b9448991950082a5d', onClick: this.onClick }, h("span", { key: '3dfc32795f51493f156715c762eb07911cd8cefa', class: {
                 'b2b-toggle-button': true,
                 'b2b-toggle-button--disabled': this.disabled,
-            } }, h("input", { key: '44bf0c45d9c500c9ed269b8651757b2f423d74b7', tabindex: 0, class: {
+            } }, h("input", { key: '5909a9f50d6a5bd7debb6d94e42c32eb34494d7d', tabindex: 0, class: {
                 'b2b-toggle-button__input': true,
                 'b2b-toggle-button__input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '2f151a52b3c72735b8c7b28d5fd615ef9a1e7ece', id: this.name, tabindex: -1, class: {
+            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'a3ba75134e2b082fb6daf4a4305e909abd3ce2d3', id: this.name, tabindex: -1, class: {
                 'b2b-toggle-button__label': true,
                 'b2b-toggle-button__label--disabled': this.disabled,
                 'b2b-toggle-button__label--checked': this.checked && !this.disabled,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -33,11 +33,11 @@ export class B2BToggleChipComponent {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '8373455857bb583dcc3893c3ac42cda61fe9aaed' }, h("span", { key: '7f193051116571785580b48cc126f2b254d849bf', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
+        return (h(Host, { key: '0edab0e264bffc60e1e9b0479a8923fe046cb655' }, h("span", { key: 'cba90b7b8adb0e6d183b10800da01fd0cee84ddc', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
                 'b2b-toggle-chip': true,
-            } }, h("input", { key: '795085195e7dad551376e18a5115881f930b7189', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
+            } }, h("input", { key: 'a83be039e526e5c81d9c9a06d78ffbe084003656', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
                 'b2b-toggle-chip__input': true,
-            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '66d2b68c7947b9de58a7acf917980e5bac6a2f2d', id: this.name, tabIndex: -1, class: {
+            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '239667dab17575f444304d1a6ed080969263a529', id: this.name, tabIndex: -1, class: {
                 'b2b-toggle-chip__label': true,
                 [`b2b-toggle-chip__label--${this.variant}`]: true,
                 'b2b-toggle-chip__label--active': this.active,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -45,10 +45,10 @@ export class B2BToggleGroup {
         }
     }
     render() {
-        return (h(Host, { key: 'e6a8d71713f388ed7f41ac2b3a887143d1b53b71' }, h("div", { key: '04ac46af3a2226a1432c014fbb32ce860dc1adb0', class: {
+        return (h(Host, { key: '61ccd7ac4efe264edc353ee2c77085b928dca8f0' }, h("div", { key: 'ca4d71b1c622d8ae3220bd3a5d871454e8614d96', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: '1c50c9ab57986021c1396a19075d2885f8627d2e' }, h("slot", { key: 'a0a58ff3d0ccf598dc52a9e8f1a2f350bf5a3246' })))));
+            } }, h("fieldset", { key: '05e1fd468b4cd2ecff5e813db6389f43d065176f' }, h("slot", { key: '14e60ca50e82c8e4ae7147ac7e585a13b6c50358' })))));
     }
     static get is() { return "b2b-toggle-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -38,17 +38,17 @@ export class B2bToggleSwitchComponent {
     render() {
         // workaround for purgecss as safelist doesn't work
         const isLeft = this.labelPosition === 'left';
-        return (h(Host, { key: 'a4ae1c68c4d86a4fbf8087bb3957cab828302395' }, h("div", { key: '03170b4af83dab44488db452b8f9377439d41a3f', class: {
+        return (h(Host, { key: 'f40fa08edbf399fa627a81140477f2512a5884b3' }, h("div", { key: 'f806f79cf76f965383d8538a7c393b4e562fdb32', class: {
                 'b2b-toggle': true,
                 'b2b-toggle--disabled': this.disabled,
                 'b2b-toggle--checked': this.state,
-            } }, h("div", { key: '402d63e72ca87265c953922a217245980dd89677', class: {
+            } }, h("div", { key: '0664c184383f64864b25978d9d980266cf72668d', class: {
                 'b2b-toggle__label': true,
                 'b2b-toggle__label--left': isLeft,
-            } }, h("span", { key: 'd433a55594e8912025cd2fd965ebce9b6f3e4527', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '263e8a7aeb92eb55f147a82294bfb8d1ba21a10a', class: {
+            } }, h("span", { key: '98b08ab1b541fed7ee54730380c331aa55206868', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: 'e84003457f75842186d30b582ab3896aea5257b6', class: {
                 'b2b-toggle__icon': true,
                 'b2b-toggle__icon--show': this.state,
-            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '96e0d898cba16910264b4639908859b42128c2b0', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '087e56df9cd4e1712024944dd470baf445338077', d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" }))), this.label && (h("span", { class: {
                 'b2b-toggle__text': true,
                 'b2b-toggle__text--left': isLeft,
             } }, this.label))))));

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -59,13 +59,13 @@ export class B2BTooltipComponent {
         }
     }
     render() {
-        return (h(Host, { key: '3c6ed0fa58a1f770366975eb2ea17ef8bd48a79f', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '3b2d5106d1006a6ddb9cf4b002fcf1e8263f5408', class: {
+        return (h(Host, { key: '206be7996ce610ef649791c8fbdb33cb43c0c4e3', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '2db6908f7af38c30676f4ee4e2ec0fb395b496d3', class: {
                 [`b2b-tooltip--${this.position}`]: true,
                 'b2b-tooltip__trigger': true,
-            } }, h("slot", { key: '737a6330346847e08e06ba1b651a9a2cceb7dd30' }), h("div", { key: '5b93917d1eafbee55adc412856d18d77aee7cb5a', class: {
+            } }, h("slot", { key: '701b2c95321148dc456698c6354e57f57c2aa705' }), h("div", { key: '9a73bbaffe6aeb94df712dcfb07607038827b329', class: {
                 'b2b-tooltip__content': true,
                 'b2b-tooltip--visible': this.opened,
-            } }, h("slot", { key: '77c7cf53353c9d5f689c3d18c4921107d923d811', name: "content" }, this.content)))));
+            } }, h("slot", { key: 'a2a30959e9f5757b5bd1df92f19f97a5a87b1960', name: "content" }, this.content)))));
     }
     static get is() { return "b2b-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wizard/wizard-step.js

@@ -7,10 +7,10 @@ export class WizardStepComponent {
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: 'c13f6fb782c9d9a61240ba2ab7a5733e7be03507' }, h("div", { key: '5fb11e13cf4e047ee58ab3b820982f674eed94c9', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '4089f7b7703d27af414482549b125afcbdaf7f5e', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '323510afcecde0105b7eec43f33231c9c8228fa8', class: {
+        return (h(Host, { key: '11892ec96d8a26f9a1665908c4f247a9944ecd27' }, h("div", { key: '1d5e0fadf98c8d54ffb21638df91a4c56bcb33a3', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: '02674a17c0ee84de5c14b6422afb25df7dbca947', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: 'a059e53252f36ce98fb15298b575689c18004182', class: {
                 'b2b_wizard__step__label': true,
                 'b2b_wizard__step__label--default': this.state === WizardStatus.DEFAULT,
-            } }, h("slot", { key: '6aa9b3f33f753fdce25d6992efc321f2b3a7985b' })))));
+            } }, h("slot", { key: '68154418c6b0e5029e4b0aea64ef03f1923b1c74' })))));
     }
     static get is() { return "b2b-wizard-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -44,7 +44,7 @@ export class WizardComponent {
             this.setStepsState();
     }
     render() {
-        return (h(Host, { key: '1fb548e71aa9d672a0b922581c19909040781926' }, h("div", { key: '9444aeafb7cd39aa89e5efb4991274c631067f4d', class: "b2b_wizard" }, h("slot", { key: '3c654bbee61932d84cda6de0438bf4550b14be3a' }))));
+        return (h(Host, { key: '4395808877c2f78bb53e4ced7cc4c89d875a0b5c' }, h("div", { key: '8fe7bc19cf6e356aaafad10f0461db6d29781fcf', class: "b2b_wizard" }, h("slot", { key: '30e3bd793259494df8355d2417067861d49a70e8' }))));
     }
     static get is() { return "b2b-wizard"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -7,7 +7,7 @@ export class WizardIconComponent {
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: 'f2504601523ffc9069b0b20082547ef3580f6841' }, h("div", { key: '457ba0f1c0adc0b3b5522ac71e83ca3bbbd82cbd', class: {
+        return (h(Host, { key: 'f90113ae53a154cabd6c03ba7ca5ec799fd2a924' }, h("div", { key: 'b53d693ec4588902dfd92210723fba697fc96ca8', class: {
                 'b2b-wizard-icon': true,
             } }, this.state === WizardStatus.COMPLETED && (h("b2b-rounded-icon", { color: "var(--b2b-color-success-50)", "content-color": "var(--b2b-color-success-100)" }, this.checkIcon ? (h("b2b-icon", { slot: "icon", icon: "b2b_icon-check" })) : (h("span", { slot: "text" }, this.step)))), this.state === WizardStatus.PENDING && (h("b2b-rounded-icon", { color: "var(--b2b-color-icon-default)", "content-color": "var(--b2b-color-icon-inverted)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DISABLED && (h("b2b-rounded-icon", { color: "var(--b2b-color-grey-100)", "content-color": "var(--b2b-color-grey-400)" }, h("span", { slot: "text" }, this.step))), this.state === WizardStatus.DEFAULT && (h("b2b-rounded-icon", { color: "transparent", "border-color": "var(--b2b-color-icon-secondary)", "content-color": "var(--b2b-color-icon-secondary)" }, h("span", { slot: "text" }, this.step))))));
     }

package/dist/components/{b2b-calendar-days.d.ts → b2b-background-box.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface B2bCalendarDays extends Components.B2bCalendarDays, HTMLElement {}
-export const B2bCalendarDays: {
-    prototype: B2bCalendarDays;
-    new (): B2bCalendarDays;
+interface B2bBackgroundBox extends Components.B2bBackgroundBox, HTMLElement {}
+export const B2bBackgroundBox: {
+    prototype: B2bBackgroundBox;
+    new (): B2bBackgroundBox;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/b2b-background-box.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const backgroundBoxCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--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-hover:#e6f4ff;--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);--b2b-size-copy-line-height-75:var(--b2b-size-45);--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)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--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(.b2b-background-box){display:block;background:var(--b2b-color-background-box);border:var(--b2b-size-1) solid var(--b2b-color-border-100);padding:1.5rem}:host(.b2b-background-box--fixed-width.b2b-background-box--no-padding){width:75.75rem;padding:unset}:host(.b2b-background-box--fixed-width){width:72.75rem}:host(.b2b-background-box--no-padding){padding:unset}";
+const B2bBackgroundBoxStyle0 = backgroundBoxCss;
+
+const BackgroundBoxComponent = /*@__PURE__*/ proxyCustomElement(class BackgroundBoxComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.fixedWidth = false;
+        this.noPadding = false;
+    }
+    render() {
+        return (h(Host, { key: '1f8a3145f20472c4dff860e0f7d6c8da53c01b68', class: {
+                'b2b-background-box': true,
+                'b2b-background-box--fixed-width': this.fixedWidth,
+                'b2b-background-box--no-padding': this.noPadding,
+            } }, h("slot", { key: '102e4dcc6ebfc7da635876a17f8c26abfeff6bda' })));
+    }
+    get host() { return this; }
+    static get style() { return B2bBackgroundBoxStyle0; }
+}, [1, "b2b-background-box", {
+        "fixedWidth": [4, "fixed-width"],
+        "noPadding": [4, "no-padding"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["b2b-background-box"];
+    components.forEach(tagName => { switch (tagName) {
+        case "b2b-background-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BackgroundBoxComponent);
+            }
+            break;
+    } });
+}
+
+const B2bBackgroundBox = BackgroundBoxComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bBackgroundBox, defineCustomElement };

package/dist/components/b2b-breadcrumb-item.js

@@ -28,7 +28,7 @@ const BreadCrumbItemComponent = /*@__PURE__*/ proxyCustomElement(class BreadCrum
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '14cf113de1f545c3a7a50c17213575da72fb33b6', onClick: this.onClick, onKeyDown: this.onKeyDown, tabindex: Boolean(this.href) ? null : 0 }, h("span", { key: '45b0c5e15365bd59f67b8a268d89d2efbcd17fb7', class: {
+        return (h(Host, { key: 'a0e98de57d8664a9a360fba87f0bd54ceaa26f45', onClick: this.onClick, onKeyDown: this.onKeyDown, tabindex: Boolean(this.href) ? null : 0 }, h("span", { key: '18df4ab47446ea909c073956309c7892907f4bb6', class: {
                 'b2b-breadcrumb-nav__item': true,
                 'b2b-breadcrumb-nav__item--active': this.active,
             } }, this.href != null ? (h("a", { href: this.href }, h("slot", null))) : (h("slot", null)))));

package/dist/components/b2b-breadcrumb.js

@@ -24,7 +24,7 @@ const B2bBreadCrumbComponent = /*@__PURE__*/ proxyCustomElement(class B2bBreadCr
         this.b2bSelected.emit({ value: item.value });
     }
     render() {
-        return (h(Host, { key: '495deff042575a6bb99f467ba2507b05a6d79580' }, h("div", { key: '029aa9765e80589749554fde2910a492a322276c', class: "b2b-breadcrumb-nav" }, h("slot", { key: '72366fb19f127110554b666ac7c39631facda614' }))));
+        return (h(Host, { key: '85cfe1a842969f685907a5ba9d89bf32b657db0a' }, h("div", { key: 'd950765604d9d70f621c4f55679eb3ae1181b7bc', class: "b2b-breadcrumb-nav" }, h("slot", { key: '5152ff6e88663e4b893f7cd0a640dbd9683aa722' }))));
     }
     get host() { return this; }
     static get style() { return B2bBreadcrumbStyle0; }

package/dist/components/b2b-card.js

@@ -34,10 +34,10 @@ const CardComponent = /*@__PURE__*/ proxyCustomElement(class CardComponent exten
             return 0;
     }
     render() {
-        return (h(Host, { key: '6a39ac26f49ce2814abb2e2a5f0628d3af9e3ffb', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'f9fd7890d85a2c69fb416cacd1038a3e50ba8ce2', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
                 'b2b-card': true,
                 'b2b-card--disabled': this.disabled,
-            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '19775bd829936bbe3fa1aa8d58dde18f6d602228' })));
+            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '1258394d2cf138a0625c70af043d4590a45262db' })));
     }
     get host() { return this; }
     static get style() { return B2bCardStyle0; }

package/dist/components/b2b-checkbox-group.js

@@ -74,11 +74,11 @@ const CheckboxGroupComponent = /*@__PURE__*/ proxyCustomElement(class CheckboxGr
         }
     }
     render() {
-        return (h(Host, { key: '3b6da1303cdfd1bdddbc1f31323e50986ac7b087' }, h("div", { key: 'c626a8341b17c86efd58e6c9da73b44257b8cd9a', class: {
+        return (h(Host, { key: 'a13345395b22ac918fcb5b4186f5bb3057af8ea4' }, h("div", { key: 'b388a4b209535c47c07b2720392abeb7191b0809', class: {
                 'b2b-checkbox-group': true,
                 'b2b-checkbox-group--error': this.invalid && !this.disabled,
                 [`b2b-checkbox-group--${this.alignment}`]: true,
-            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '881df0a66e9479f2eab63d0387fc4d4f4ee37295' }, h("div", { key: '936511055623583956fc980f62497cdc01a9dc21', class: "b2b-checkbox-group__options" }, h("slot", { key: 'd096cf78944f253e07d0b852c38db6c486681eb3' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '33ed6a29fc0742e786d7f82c93dea89fdf0127b8' }, h("div", { key: 'da3884cbef485588a36ea6dd6c92f0dc0bdff138', class: "b2b-checkbox-group__options" }, h("slot", { key: 'c4f2ef006d5c8f04e45315526d076ca69a49026e' }))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
     }
     get host() { return this; }

package/dist/components/b2b-date-picker-days-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface B2bDatePickerDaysHeader extends Components.B2bDatePickerDaysHeader, HTMLElement {}
+export const B2bDatePickerDaysHeader: {
+    prototype: B2bDatePickerDaysHeader;
+    new (): B2bDatePickerDaysHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/b2b-date-picker-days-header.js

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerDaysHeader$1, d as defineCustomElement$1 } from './date-picker-days-header.js';
+
+const B2bDatePickerDaysHeader = B2bDatePickerDaysHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerDaysHeader, defineCustomElement };

package/dist/components/{b2b-calendar-header.d.ts → b2b-date-picker-days.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface B2bCalendarHeader extends Components.B2bCalendarHeader, HTMLElement {}
-export const B2bCalendarHeader: {
-    prototype: B2bCalendarHeader;
-    new (): B2bCalendarHeader;
+interface B2bDatePickerDays extends Components.B2bDatePickerDays, HTMLElement {}
+export const B2bDatePickerDays: {
+    prototype: B2bDatePickerDays;
+    new (): B2bDatePickerDays;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/b2b-date-picker-days.js

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerDays$1, d as defineCustomElement$1 } from './date-picker-days.js';
+
+const B2bDatePickerDays = B2bDatePickerDays$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerDays, defineCustomElement };

package/dist/components/b2b-date-picker-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface B2bDatePickerHeader extends Components.B2bDatePickerHeader, HTMLElement {}
+export const B2bDatePickerHeader: {
+    prototype: B2bDatePickerHeader;
+    new (): B2bDatePickerHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/b2b-date-picker-header.js

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerHeader$1, d as defineCustomElement$1 } from './date-picker-header.js';
+
+const B2bDatePickerHeader = B2bDatePickerHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerHeader, defineCustomElement };

package/dist/components/b2b-date-picker-months.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface B2bDatePickerMonths extends Components.B2bDatePickerMonths, HTMLElement {}
+export const B2bDatePickerMonths: {
+    prototype: B2bDatePickerMonths;
+    new (): B2bDatePickerMonths;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/b2b-date-picker-months.js

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerMonths$1, d as defineCustomElement$1 } from './date-picker-months.js';
+
+const B2bDatePickerMonths = B2bDatePickerMonths$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerMonths, defineCustomElement };

package/dist/components/b2b-date-picker-years.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface B2bDatePickerYears extends Components.B2bDatePickerYears, HTMLElement {}
+export const B2bDatePickerYears: {
+    prototype: B2bDatePickerYears;
+    new (): B2bDatePickerYears;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/b2b-date-picker-years.js

@@ -0,0 +1,6 @@
+import { B as B2bDatePickerYears$1, d as defineCustomElement$1 } from './date-picker-years.js';
+
+const B2bDatePickerYears = B2bDatePickerYears$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { B2bDatePickerYears, defineCustomElement };

package/dist/components/{b2b-calendar.d.ts → b2b-date-picker.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface B2bCalendar extends Components.B2bCalendar, HTMLElement {}
-export const B2bCalendar: {
-    prototype: B2bCalendar;
-    new (): B2bCalendar;
+interface B2bDatePicker extends Components.B2bDatePicker, HTMLElement {}
+export const B2bDatePicker: {
+    prototype: B2bDatePicker;
+    new (): B2bDatePicker;
 };
 /**
  * Used to define this component and all nested components recursively.