@otto-de/b2b-core-components 1.10.0 → 1.11.0

package/dist/collection/components/grid/column.js

@@ -24,7 +24,7 @@ export class B2bGridColumnComponent {
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: '49c6dc8df6ad0ed3d864d5327de627b309705d00', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '3ffa9ba6f9edeb438b433882039070c63adb69b9' })));
+        return (h(Host, { key: '961d47cfb1b74852145eebb2679676755899a14a', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'ffd12518cb08b04ef6a0db4b915719a848ff0aaf' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -4,7 +4,7 @@ export class B2bGridComponent {
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: '48fb847165e96ca1ec16b36cd785872434c778f0', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'a9eec48fe8d12ba894fe38815488f78902e19a8e' })));
+        return (h(Host, { key: '0413fb6677fea801c46f2497cd3d472c9b08e3c6', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '7787a48252271e16f5e02f73047f31540c1aff02' })));
     }
     static get is() { return "b2b-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/row.js

@@ -7,7 +7,7 @@ export class B2bGridRowComponent {
         this.justify = 'start';
     }
     render() {
-        return (h(Host, { key: 'aa7dca43d2b0c2d78dbbcb8a8b8098735637ad23', style: {
+        return (h(Host, { key: '5f324fe433848ce5802e861ab4f295575486a4c2', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -15,7 +15,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'ab7ee57b3ef7652079db6e02234c711f306882b5' })));
+            } }, h("slot", { key: '685130b0b771fd3e2c846efb0590f39f640ded56' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/headline/headline.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 May 2024 10:21:24 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:07 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 07 May 2024 10:21:24 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:08 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 May 2024 10:21:24 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:07 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 07 May 2024 10:21:24 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:08 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/icon/icons/b2b_icon-hide.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
 <path d="M15.9172 12.86L16.8534 13.7963C16.904 13.5426 16.9326 13.281 16.9326 13.0127C16.9326 12.038 16.5685 11.1556 15.9872 10.461C17.5067 10.9378 18.7877 11.8005 19.7885 13.0098C19.2274 13.7104 18.5702 14.2991 17.8151 14.7579L18.5432 15.4861C19.4265 14.9137 20.1983 14.1884 20.8374 13.3076C20.8509 13.2891 20.8542 13.2673 20.8648 13.2477C20.8653 13.2468 20.8656 13.2457 20.8661 13.2448C20.8935 13.1929 20.9135 13.1404 20.9214 13.0846C20.9265 13.056 20.9241 13.0279 20.9243 12.9988C20.9234 12.9714 20.9253 12.9448 20.92 12.9179C20.9076 12.8397 20.883 12.763 20.8321 12.6953C20.3508 12.0569 19.8011 11.5042 19.1965 11.0278L20.1626 9.5957C20.3169 9.36719 20.2569 9.05664 20.0279 8.90234C19.7989 8.74609 19.4883 8.80762 19.3335 9.03711L18.3797 10.451C17.5396 9.93188 16.6016 9.55872 15.5869 9.31982L15.9366 7.61035C15.9922 7.33984 15.8174 7.0752 15.5469 7.01953C15.2764 6.96582 15.0122 7.13867 14.9571 7.40918L14.603 9.14014C14.065 9.06512 13.5143 9.01373 12.938 9.01324C12.9362 9.01324 12.9345 9.0127 12.9326 9.0127C12.932 9.0127 12.9314 9.01288 12.9308 9.01288C12.9294 9.01288 12.9281 9.0127 12.9268 9.0127C12.648 9.0127 12.3799 9.03479 12.1098 9.05261L13.0853 10.0281C14.6159 10.1068 15.8385 11.3295 15.9172 12.86ZM21.7827 20.1465L4.78275 3.14648C4.58743 2.95117 4.27103 2.95117 4.07571 3.14648C3.8804 3.3418 3.8804 3.6582 4.07571 3.85352L9.69937 9.47717C8.92014 9.71234 8.18906 10.0308 7.5192 10.4434L6.58401 9.07422C6.42825 8.84766 6.11771 8.79004 5.8887 8.94336C5.66068 9.09961 5.60208 9.41016 5.75784 9.63867L6.70065 11.019C6.08554 11.5014 5.52481 12.0616 5.03372 12.7109C5.02786 12.7187 5.02695 12.7281 5.02164 12.7361C5.00229 12.7648 4.99069 12.7957 4.97781 12.8274C4.96597 12.8567 4.95242 12.8843 4.94638 12.9147C4.94022 12.9453 4.9418 12.9755 4.94138 13.0067C4.94101 13.0399 4.939 13.0719 4.94516 13.1045C4.95059 13.1336 4.96317 13.1602 4.97391 13.1884C4.98642 13.2213 4.99808 13.2534 5.01767 13.2833C5.02286 13.2914 5.02359 13.3008 5.02933 13.3086C6.80472 15.7314 9.53372 17.0127 12.9224 17.0127C12.9248 17.0127 12.927 17.0124 12.9294 17.0124C12.9305 17.0124 12.9315 17.0127 12.9326 17.0127C12.9358 17.0127 12.9387 17.0118 12.9419 17.0118C14.2861 17.0098 15.52 16.8027 16.6348 16.4126L21.0757 20.8535C21.1734 20.9512 21.3013 21 21.4292 21C21.5572 21 21.6851 20.9512 21.7827 20.8535C21.9781 20.6582 21.9781 20.3418 21.7827 20.1465ZM12.4063 12.1841L13.7613 13.5391C13.5835 13.8174 13.2866 14.0127 12.9326 14.0127C12.3814 14.0127 11.9326 13.5645 11.9326 13.0127C11.9326 12.6586 12.1281 12.3618 12.4063 12.1841ZM9.88541 15.5732C8.35226 15.0986 7.07089 14.2342 6.08499 13.0163C7.10477 11.7842 8.37314 10.9225 9.88632 10.451C9.30008 11.147 8.93265 12.0333 8.93265 13.0127C8.93265 13.9915 9.29971 14.8774 9.88541 15.5732ZM12.9416 16.0118C12.9374 16.0118 12.9336 16.0124 12.9294 16.0124C11.2766 16.0106 9.93265 14.6659 9.93265 13.0127C9.93265 12.1085 10.3431 11.3062 10.9779 10.7557L11.6847 11.4625C11.2299 11.8294 10.9326 12.3843 10.9326 13.0127C10.9326 14.1152 11.8296 15.0127 12.9326 15.0127C13.5612 15.0127 14.116 14.7154 14.4829 14.2607L15.1897 14.9675C14.6411 15.6001 13.8422 16.009 12.9416 16.0118Z" />
 </svg>

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 May 2024 10:21:24 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:07 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 07 May 2024 10:21:24 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:08 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/icon-100/icons-100/b2b_icon-hide.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
 <path d="M15.9172 12.86L16.8534 13.7963C16.904 13.5426 16.9326 13.281 16.9326 13.0127C16.9326 12.038 16.5685 11.1556 15.9872 10.461C17.5067 10.9378 18.7877 11.8005 19.7885 13.0098C19.2274 13.7104 18.5702 14.2991 17.8151 14.7579L18.5432 15.4861C19.4265 14.9137 20.1983 14.1884 20.8374 13.3076C20.8509 13.2891 20.8542 13.2673 20.8648 13.2477C20.8653 13.2468 20.8656 13.2457 20.8661 13.2448C20.8935 13.1929 20.9135 13.1404 20.9214 13.0846C20.9265 13.056 20.9241 13.0279 20.9243 12.9988C20.9234 12.9714 20.9253 12.9448 20.92 12.9179C20.9076 12.8397 20.883 12.763 20.8321 12.6953C20.3508 12.0569 19.8011 11.5042 19.1965 11.0278L20.1626 9.5957C20.3169 9.36719 20.2569 9.05664 20.0279 8.90234C19.7989 8.74609 19.4883 8.80762 19.3335 9.03711L18.3797 10.451C17.5396 9.93188 16.6016 9.55872 15.5869 9.31982L15.9366 7.61035C15.9922 7.33984 15.8174 7.0752 15.5469 7.01953C15.2764 6.96582 15.0122 7.13867 14.9571 7.40918L14.603 9.14014C14.065 9.06512 13.5143 9.01373 12.938 9.01324C12.9362 9.01324 12.9345 9.0127 12.9326 9.0127C12.932 9.0127 12.9314 9.01288 12.9308 9.01288C12.9294 9.01288 12.9281 9.0127 12.9268 9.0127C12.648 9.0127 12.3799 9.03479 12.1098 9.05261L13.0853 10.0281C14.6159 10.1068 15.8385 11.3295 15.9172 12.86ZM21.7827 20.1465L4.78275 3.14648C4.58743 2.95117 4.27103 2.95117 4.07571 3.14648C3.8804 3.3418 3.8804 3.6582 4.07571 3.85352L9.69937 9.47717C8.92014 9.71234 8.18906 10.0308 7.5192 10.4434L6.58401 9.07422C6.42825 8.84766 6.11771 8.79004 5.8887 8.94336C5.66068 9.09961 5.60208 9.41016 5.75784 9.63867L6.70065 11.019C6.08554 11.5014 5.52481 12.0616 5.03372 12.7109C5.02786 12.7187 5.02695 12.7281 5.02164 12.7361C5.00229 12.7648 4.99069 12.7957 4.97781 12.8274C4.96597 12.8567 4.95242 12.8843 4.94638 12.9147C4.94022 12.9453 4.9418 12.9755 4.94138 13.0067C4.94101 13.0399 4.939 13.0719 4.94516 13.1045C4.95059 13.1336 4.96317 13.1602 4.97391 13.1884C4.98642 13.2213 4.99808 13.2534 5.01767 13.2833C5.02286 13.2914 5.02359 13.3008 5.02933 13.3086C6.80472 15.7314 9.53372 17.0127 12.9224 17.0127C12.9248 17.0127 12.927 17.0124 12.9294 17.0124C12.9305 17.0124 12.9315 17.0127 12.9326 17.0127C12.9358 17.0127 12.9387 17.0118 12.9419 17.0118C14.2861 17.0098 15.52 16.8027 16.6348 16.4126L21.0757 20.8535C21.1734 20.9512 21.3013 21 21.4292 21C21.5572 21 21.6851 20.9512 21.7827 20.8535C21.9781 20.6582 21.9781 20.3418 21.7827 20.1465ZM12.4063 12.1841L13.7613 13.5391C13.5835 13.8174 13.2866 14.0127 12.9326 14.0127C12.3814 14.0127 11.9326 13.5645 11.9326 13.0127C11.9326 12.6586 12.1281 12.3618 12.4063 12.1841ZM9.88541 15.5732C8.35226 15.0986 7.07089 14.2342 6.08499 13.0163C7.10477 11.7842 8.37314 10.9225 9.88632 10.451C9.30008 11.147 8.93265 12.0333 8.93265 13.0127C8.93265 13.9915 9.29971 14.8774 9.88541 15.5732ZM12.9416 16.0118C12.9374 16.0118 12.9336 16.0124 12.9294 16.0124C11.2766 16.0106 9.93265 14.6659 9.93265 13.0127C9.93265 12.1085 10.3431 11.3062 10.9779 10.7557L11.6847 11.4625C11.2299 11.8294 10.9326 12.3843 10.9326 13.0127C10.9326 14.1152 11.8296 15.0127 12.9326 15.0127C13.5612 15.0127 14.116 14.7154 14.4829 14.2607L15.1897 14.9675C14.6411 15.6001 13.8422 16.009 12.9416 16.0118Z" />
 </svg>

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

@@ -0,0 +1,244 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 04 Jun 2024 10:14:07 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: 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-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 Tue, 04 Jun 2024 10:14:08 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: 500;
+  --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 {
+  --b2b-icon-line-height: inherit;
+  --b2b-icon-cursor: default;
+}
+:host .b2b-icon-50 {
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: var(--b2b-icon-line-height);
+  cursor: var(--b2b-icon-cursor);
+  height: var(--b2b-size-30);
+  width: var(--b2b-size-30);
+}
+:host .b2b-icon-50--clickable {
+  cursor: pointer;
+}
+:host .b2b-icon-50.b2b-icon-50--primary {
+  fill: var(--b2b-color-black-100);
+}
+:host .b2b-icon-50.b2b-icon-50--secondary {
+  fill: var(--b2b-color-grey-200);
+}
+:host .b2b-icon-50.b2b-icon-50--inverse {
+  fill: var(--b2b-color-white-100);
+}
+:host .b2b-icon-50.b2b-icon-50--inherit {
+  fill: currentcolor;
+}

package/dist/collection/components/icon-50/icon-50.e2e.js

@@ -0,0 +1,32 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Icon 50', () => {
+    it('should render the icon', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-50 icon="b2b_icon-arrow-down"></b2b-icon-50>`);
+        const icon = await page.find('b2b-icon-50');
+        expect(icon).not.toBe(null);
+    });
+    it('should warn if the icon name is not supported', async () => {
+        global.console.warn = jest.fn();
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-50 icon="b2b_icon-not-supported-name"></b2b-icon-50>`);
+        expect(console.warn).toBeCalled();
+    });
+    it('should make the icon clickable', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-50 icon="b2b_icon-arrow-down" clickable></b2b-icon-50>`);
+        const icon = await page.find('b2b-icon-50');
+        const clickable = await icon.getProperty('clickable');
+        expect(clickable).toBe(true);
+    });
+    it('should make the icon focusable', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-50 icon="b2b_icon-arrow-down" focusable></b2b-icon-50>`);
+        const icon = await page.find('b2b-icon-50');
+        const focusable = await icon.getProperty('focusable');
+        const activeEl = await page.find('b2b-icon-50 >>> .b2b-icon-50');
+        const tabIndex = activeEl.getAttribute('tabindex');
+        expect(focusable).toBe(true);
+        expect(tabIndex).toBe('0');
+    });
+});

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

@@ -0,0 +1,150 @@
+import { Build, h, Host } from "@stencil/core";
+import { buildPath, fetchIcon, iconContent } from "../../utils/icon/request";
+import { iconTypes } from "./types";
+export class B2bIcon {
+    constructor() {
+        this.isIconSupported = () => {
+            return iconTypes.includes(this.icon);
+        };
+        this.icon = undefined;
+        this.color = 'inherit';
+        this.clickable = false;
+        this.focusable = false;
+        this.pathData = null;
+    }
+    connectedCallback() {
+        this.loadIconPathData();
+    }
+    render() {
+        if (!this.isIconSupported())
+            return null;
+        return (h(Host, null, h("div", { tabIndex: this.focusable ? 0 : null, class: {
+                'b2b-icon-50': true,
+                [`b2b-icon-50--${this.color}`]: true,
+                'b2b-icon-50--clickable': this.clickable,
+            }, innerHTML: this.pathData })));
+    }
+    loadIconPathData() {
+        if (!this.isIconSupported()) {
+            console.warn('icon name: ' + this.icon + ' is not supported or might have a typo.');
+            return;
+        }
+        const icon = buildPath(this.icon, 'icons-50');
+        if (Build.isBrowser) {
+            if (iconContent.has(icon)) {
+                this.pathData = iconContent.get(icon);
+            }
+            else {
+                fetchIcon(icon).then(() => (this.pathData = iconContent.get(icon)));
+            }
+        }
+        else {
+            return;
+        }
+    }
+    static get is() { return "b2b-icon-50"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon-50.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon-50.css"]
+        };
+    }
+    static get assetsDirs() { return ["icons-50"]; }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"b2b_icon-arrow-down\" | \"b2b_icon-arrow-left\" | \"b2b_icon-arrow-right\" | \"b2b_icon-arrow-up\" | \"b2b_icon-basket\" | \"b2b_icon-check\" | \"b2b_icon-close\" | \"b2b_icon-delete\" | \"b2b_icon-error-hint\" | \"b2b_icon-filter\" | \"b2b_icon-info\" | \"b2b_icon-leaving-page\" | \"b2b_icon-minus\" | \"b2b_icon-pin\" | \"b2b_icon-plus\" | \"b2b_icon-question-hint\" | \"b2b_icon-question\" | \"b2b_icon-rating-empty\" | \"b2b_icon-rating-filled\" | \"b2b_icon-rating-half\" | \"b2b_icon-reply\" | \"b2b_icon-smiley-positive\" | \"b2b_icon-sort-ascending\" | \"b2b_icon-sort-descending\" | \"b2b_icon-sort\" | \"b2b_icon-trend-down\" | \"b2b_icon-trend-up\" | \"b2b_icon-warning-hint\" | \"b2b_icon-wishlist-active\" | \"b2b_icon-wishlist\" | \"b2b_icon-info-hint\" | \"b2b_icon-refresh\" | \"b2b_icon-success-hint\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/icon-50/types.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'inverse' | 'inherit'",
+                    "resolved": "\"inherit\" | \"inverse\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the icon"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'inherit'"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Will display a pointer cursor when hovering the icon"
+                },
+                "attribute": "clickable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "focusable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu."
+                },
+                "attribute": "focusable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "pathData": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "icon",
+                "methodName": "loadIconPathData"
+            }];
+    }
+}

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

@@ -0,0 +1,80 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
+import { iconTypes } from "./types";
+import "./../../global/icon.stories.scss";
+const controls = {
+    color: 'radio',
+    icon: 'select',
+};
+const iconControls = getArgTypes('b2b-icon-50', controls);
+const meta = {
+    title: 'Components/Assets/Icon-50',
+    component: 'b2b-icon-50',
+    args: {
+        icon: 'b2b_icon-arrow-down',
+        color: 'primary',
+        clickable: false,
+        focusable: false,
+    },
+    argTypes: Object.assign({}, iconControls),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<b2b-icon-50
+    icon="${args.icon}"
+    color="${args.color}"
+    clickable="${args.clickable}"
+    focusable="${args.focusable}"></b2b-icon-50>`;
+    },
+};
+export default meta;
+export const Primary = {
+    args: Object.assign({}, meta.args),
+};
+export const Secondary = {
+    args: Object.assign(Object.assign({}, meta.args), { color: 'secondary' }),
+};
+export const Inverse = {
+    args: Object.assign(Object.assign({}, meta.args), { color: 'inverse' }),
+    parameters: {
+        backgrounds: {
+            default: 'inverse-bg',
+        },
+    },
+};
+export const Inherit = {
+    render: ({ icon, color, clickable, focusable }) => {
+        return html ` <div style="color: red;">
+      <b2b-icon-50
+        icon="${icon}"
+        color="${color}"
+        clickable="${clickable}"
+        focusable="${focusable}">
+      </b2b-icon-50>
+    </div>`;
+    },
+    args: Object.assign(Object.assign({}, meta.args), { color: 'inherit' }),
+};
+const renderAllIcons = () => {
+    const icons = iconTypes.map(icon => {
+        return html ` <div class="icon-container">
+      <b2b-icon-50 icon="${icon}"></b2b-icon-50>
+      <p>${icon}</p>
+    </div>`;
+    });
+    return html `<div class="icons-grid-container">${icons}</div>`;
+};
+export const AllIcons = {
+    render: renderAllIcons,
+};

package/dist/collection/components/icon-50/icons-50/b2b_icon-arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3765 4.17133C10.1939 3.96235 9.87747 3.94184 9.67092 4.12397L6.00002 7.33637L2.32913 4.12787C2.12161 3.94623 1.8052 3.96576 1.62356 4.17524C1.44192 4.38324 1.46292 4.69916 1.67092 4.8808L5.67092 8.3769C5.76516 8.45942 5.88284 8.50043 6.00002 8.50043C6.1177 8.50043 6.23489 8.45942 6.32913 8.3769L10.3291 4.8769C10.5371 4.69477 10.5581 4.37885 10.3765 4.17133Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66406 6.00072L7.87646 2.32982C8.05811 2.1223 8.03711 1.80638 7.8291 1.62425C7.62158 1.44213 7.30566 1.46215 7.12354 1.67162L3.62354 5.67162C3.45898 5.86009 3.45898 6.14134 3.62354 6.32982L7.11963 10.3298C7.21826 10.4431 7.35693 10.5007 7.49609 10.5007C7.61328 10.5007 7.73047 10.4602 7.8252 10.3772C8.0332 10.1955 8.0542 9.87963 7.87256 9.67162L4.66406 6.00072Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.37646 5.67162L4.87646 1.67162C4.69335 1.46215 4.37744 1.44213 4.17089 1.62425C3.96288 1.80638 3.94189 2.1223 4.12353 2.32982L7.33593 6.00072L4.12744 9.67162C3.94579 9.87963 3.96679 10.1955 4.1748 10.3772C4.26953 10.4602 4.38671 10.5007 4.5039 10.5007C4.64306 10.5007 4.78173 10.4426 4.88037 10.3298L8.37646 6.32982C8.54101 6.14134 8.54101 5.86009 8.37646 5.67162Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-arrow-up.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3291 7.12842L6.32913 3.62842C6.14114 3.46338 5.86038 3.4624 5.67092 3.62842L1.67092 7.12451C1.46291 7.30615 1.44192 7.62207 1.62356 7.83008C1.8052 8.03857 2.12161 8.05859 2.32913 7.87744L6.00002 4.66895L9.67092 7.88135C9.76565 7.96436 9.88284 8.00488 10 8.00488C10.1392 8.00488 10.2774 7.94727 10.3765 7.83398C10.5581 7.62647 10.5371 7.31055 10.3291 7.12842Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-basket.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.96338 1.43604C9.93115 1.18652 9.71875 1 9.46729 1H2.5332C2.28174 1 2.06934 1.18652 2.03711 1.43604L1.00391 9.43604C0.98584 9.57861 1.02979 9.72217 1.12451 9.83008C1.21924 9.93799 1.35645 10 1.5 10H10.5C10.6436 10 10.7808 9.93799 10.8755 9.83008C10.9702 9.72217 11.0142 9.57861 10.9961 9.43604L9.96338 1.43604ZM2.06885 9L2.97266 2H9.02783L9.93115 9H2.06885Z" fill="#222222"/>
+<path d="M7.50049 3C7.22412 3 7.00049 3.22363 7.00049 3.5C7.00049 4.23828 6.46191 4.5 6.00049 4.5C5.53906 4.5 5.00049 4.23828 5.00049 3.5C5.00049 3.22363 4.77686 3 4.50049 3C4.22412 3 4.00049 3.22363 4.00049 3.5C4.00049 4.271 4.34668 4.74072 4.63721 4.99854C5.00049 5.32178 5.48486 5.5 6.00049 5.5C6.99414 5.5 8.00049 4.81299 8.00049 3.5C8.00049 3.22363 7.77686 3 7.50049 3Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-check.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8584 3.15143C10.6656 2.95416 10.3496 2.9483 10.1514 3.14166L4.34671 8.78766L1.8638 6.1568C1.67435 5.9566 1.35745 5.94781 1.15677 6.13629C0.956085 6.32623 0.946807 6.64264 1.13626 6.84332L3.9678 9.84332C4.06009 9.94049 4.18704 9.99713 4.32083 10.0001C4.32425 10.0001 4.32816 10.0001 4.33157 10.0001C4.46146 10.0001 4.58694 9.94928 4.68021 9.85846L10.8487 3.85846C11.0464 3.66607 11.0508 3.34918 10.8584 3.15143Z" fill="#222222"/>
+</svg>