@otto-de/b2b-core-components 1.6.0 → 1.7.0

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

@@ -0,0 +1,249 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 26 Oct 2023 14:16:21 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-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-45);
+  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --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, 26 Oct 2023 14:16:22 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-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");
+}
+.b2b-chip {
+  font-family: var(--b2b-font-family-default);
+  font-size: var(--b2b-size-copy-100);
+  width: fit-content;
+  background-color: var(--b2b-color-grey-50);
+  border-radius: var(--b2b-size-50);
+  padding: var(--b2b-size-10) var(--b2b-size-25);
+  line-height: var(--b2b-size-copy-line-height-100);
+  height: var(--b2b-size-70);
+  display: flex;
+  align-items: center;
+  cursor: default;
+}
+.b2b-chip__label {
+  margin-right: var(--b2b-size-10);
+}
+.b2b-chip__clearIcon {
+  display: flex;
+  fill: var(--b2b-color-icon-default);
+  height: var(--b2b-size-copy-line-height-100);
+  width: var(--b2b-size-50);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transform: rotate(180deg);
+}
+.b2b-chip--disabled {
+  pointer-events: none;
+  background: var(--b2b-color-grey-25);
+  color: var(--b2b-color-grey-400);
+}
+.b2b-chip--disabled__clearIcon {
+  fill: var(--b2b-color-grey-400);
+}

package/dist/collection/components/chip/chip.e2e.js

@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Chip-Component', () => {
+  it('should render the chip component', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-chip-component label="chip"></b2b-chip-component>`);
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find('b2b-chip-component >>> div.b2b-chip__clearIcon');
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+  });
+  it('should emit b2b-close event on clear icon click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-chip-component label="chip"></b2b-chip-component>`);
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    const clearIcon = await page.find('b2b-chip-component >>>  div.b2b-chip__clearIcon');
+    await clearIcon.click();
+    expect(b2bClose).toHaveReceivedEvent();
+  });
+});

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

@@ -0,0 +1,134 @@
+import { h, Host } from '@stencil/core';
+export class B2bChipComponent {
+  constructor() {
+    this.onClick = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.b2bClose.emit({ value: this.value });
+    };
+    this.clearIcon = (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.85352 3.14648C7.6582 2.95117 7.3418 2.95117 7.14648 3.14648L5.5 4.79297L3.85352 3.14648C3.6582 2.95117 3.3418 2.95117 3.14648 3.14648C2.95117 3.3418 2.95117 3.6582 3.14648 3.85352L4.79297 5.5L3.14648 7.14648C2.95117 7.3418 2.95117 7.6582 3.14648 7.85352C3.24414 7.95117 3.37207 8 3.5 8C3.62793 8 3.75586 7.95117 3.85352 7.85352L5.5 6.20703L7.14648 7.85352C7.24414 7.95117 7.37207 8 7.5 8C7.62793 8 7.75586 7.95117 7.85352 7.85352C8.04883 7.6582 8.04883 7.3418 7.85352 7.14648L6.20703 5.5L7.85352 3.85352C8.04883 3.6582 8.04883 3.3418 7.85352 3.14648ZM5.5 0C2.46729 0 0 2.46729 0 5.5C0 8.53271 2.46729 11 5.5 11C8.53271 11 11 8.53271 11 5.5C11 2.46729 8.53271 0 5.5 0ZM5.5 10C3.01855 10 1 7.98145 1 5.5C1 3.01855 3.01855 1 5.5 1C7.98145 1 10 3.01855 10 5.5C10 7.98145 7.98145 10 5.5 10Z" })));
+    this.label = undefined;
+    this.disabled = false;
+    this.hasCloseButton = true;
+    this.value = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'b2b-chip': true,
+        'b2b-chip--disabled': this.disabled,
+      } }, h("span", { class: "b2b-chip__label" }, this.label), this.hasCloseButton && (h("div", { class: {
+        'b2b-chip__clearIcon': true,
+        'b2b-chip--disabled__clearIcon': this.disabled,
+      }, onClick: this.onClick }, this.clearIcon)))));
+  }
+  static get is() { return "b2b-chip-component"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["chip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text content of the chip. It is required."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the chip is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hasCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the chip component has a close button. Per default it is true."
+        },
+        "attribute": "has-close-button",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "It is only used when the chip component participates in a group"
+        },
+        "attribute": "value",
+        "reflect": true
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bClose",
+        "name": "b2b-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event will be triggered when the chip element is closed"
+        },
+        "complexType": {
+          "original": "ChipComponentEventDetail",
+          "resolved": "ChipComponentEventDetail<any>",
+          "references": {
+            "ChipComponentEventDetail": {
+              "location": "import",
+              "path": "../../utils/interfaces/form.interface"
+            }
+          }
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,30 @@
+import { html } from 'lit-html';
+import { getArgTypes } from '../../docs/config/utils';
+const Template = ({ label, disabled, value, hasCloseButton }) => {
+  return html `<b2b-chip-component
+    label="${label}"
+    disabled="${disabled}"
+    value="${value}"
+    has-close-button="${hasCloseButton}"></b2b-chip-component>`;
+};
+const defaultArgs = {
+  label: 'Chip Label',
+  disabled: false,
+  value: '',
+  hasCloseButton: true,
+};
+export const story010Default = Template.bind({});
+story010Default.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Default Chip' });
+story010Default.storyName = 'Default';
+export const story020Disabled = Template.bind({});
+story020Disabled.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Disabled Chip', disabled: true });
+story020Disabled.storyName = 'Disabled';
+export const story030WithoutButton = Template.bind({});
+story030WithoutButton.args = Object.assign(Object.assign({}, defaultArgs), { label: ' Chip without button', hasCloseButton: false });
+story030WithoutButton.storyName = 'Without Button';
+const chipComponentArgs = getArgTypes('b2b-chip-component');
+export default {
+  title: 'Components/Interaction/Chip',
+  argTypes: chipComponentArgs,
+  viewMode: 'docs',
+};

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/dropdown/dropdown.js

@@ -36,9 +36,9 @@ export class DropdownComponent {
       form.addEventListener('formdata', this.handleFormData);
     }
   }
-  // shadow-DOM issue: <option> did not render inside <slot> so we need to re-append to <select>
+  // we need to attach the options to the correct element here
   componentDidRender() {
-    const options = this.hostElement.querySelectorAll('option');
+    let options = this.hostElement.querySelectorAll('option');
     const selectElement = this.getSelectElement();
     selectElement.append(...options);
   }

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

@@ -1,6 +1,5 @@
 import { html } from 'lit-html';
 import { getArgTypes } from '../../docs/config/utils';
-import dropdownDocs from './dropdown.docs.mdx';
 const Template = ({ label, required, name, disabled, invalid, hint, error, }) => {
   const defaultLabel = label ? label : 'Favorite Fruit';
   return html `<b2b-dropdown
@@ -44,9 +43,4 @@ export default {
   title: 'Components/Form/Dropdown',
   argTypes: dropdownArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: dropdownDocs,
-    },
-  },
 };

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

@@ -1,6 +1,5 @@
 import { html } from 'lit-html';
 import { getArgTypes } from '../../docs/config/utils';
-import gridDocs from './grid.docs.mdx';
 const Template = ({ margin, justify, textAlign, span, rowGap, columnGap, alignItems, storyName, }) => {
   const gridBoxStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 200px;`;
   const gridBoxSmallStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 100px;`;
@@ -227,8 +226,5 @@ export default {
   viewmode: 'docs',
   parameters: {
     controls: { expanded: true },
-    docs: {
-      page: gridDocs,
-    },
   },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,5 +1,4 @@
 import { html } from 'lit-html';
-import docs from './headline.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 const template = ({ size, align, slot }) => {
   return html `<b2b-headline size="${size}" align="${align}">
@@ -31,9 +30,4 @@ export default {
   title: 'Components/Content/Headline',
   argTypes: argTypes,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: docs,
-    },
-  },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -63,7 +63,7 @@ export class B2bIcon {
         "mutable": false,
         "complexType": {
           "original": "IconName",
-          "resolved": "\"b2b_icon-360-degree\" | \"b2b_icon-advice\" | \"b2b_icon-allergen-sulfur-dioxide-sulfite\" | \"b2b_icon-almond\" | \"b2b_icon-archive\" | \"b2b_icon-armchair\" | \"b2b_icon-arrow-down\" | \"b2b_icon-arrow-graph\" | \"b2b_icon-arrow-left\" | \"b2b_icon-arrow-right\" | \"b2b_icon-arrow-up\" | \"b2b_icon-assembly\" | \"b2b_icon-assortment\" | \"b2b_icon-attachment\" | \"b2b_icon-augmented-reality\" | \"b2b_icon-autonomous-team\" | \"b2b_icon-bank-details\" | \"b2b_icon-bar-graph-ascending\" | \"b2b_icon-bar-graph-axis\" | \"b2b_icon-barley\" | \"b2b_icon-basket-sale\" | \"b2b_icon-basket\" | \"b2b_icon-basketball\" | \"b2b_icon-bikini\" | \"b2b_icon-blogs\" | \"b2b_icon-brandshop\" | \"b2b_icon-brazil-nut\" | \"b2b_icon-browser-click\" | \"b2b_icon-browser-content\" | \"b2b_icon-browser-psm\" | \"b2b_icon-burger\" | \"b2b_icon-bus\" | \"b2b_icon-callback\" | \"b2b_icon-camera\" | \"b2b_icon-cashback\" | \"b2b_icon-cashew-nut\" | \"b2b_icon-catalogue\" | \"b2b_icon-categories\" | \"b2b_icon-celery\" | \"b2b_icon-certificate\" | \"b2b_icon-chair\" | \"b2b_icon-chat\" | \"b2b_icon-check-bold\" | \"b2b_icon-check\" | \"b2b_icon-chicken\" | \"b2b_icon-city\" | \"b2b_icon-clear\" | \"b2b_icon-close-bold\" | \"b2b_icon-close\" | \"b2b_icon-code-management\" | \"b2b_icon-contact-mail\" | \"b2b_icon-copy\" | \"b2b_icon-cow\" | \"b2b_icon-crab\" | \"b2b_icon-critique\" | \"b2b_icon-curtain\" | \"b2b_icon-cut-out\" | \"b2b_icon-dashboard\" | \"b2b_icon-deer\" | \"b2b_icon-delete\" | \"b2b_icon-delivery-24h\" | \"b2b_icon-delivery-desired-date-selection\" | \"b2b_icon-delivery-desired-date\" | \"b2b_icon-delivery-express\" | \"b2b_icon-delivery-flat\" | \"b2b_icon-delivery-on-hangers\" | \"b2b_icon-delivery-preferred-place\" | \"b2b_icon-desktop-phone-ads-click\" | \"b2b_icon-desktop-phone-ads\" | \"b2b_icon-desktop-phone\" | \"b2b_icon-desktop\" | \"b2b_icon-devices-monitor-laptop-tablet\" | \"b2b_icon-dish-feature-lactose-free\" | \"b2b_icon-dislike\" | \"b2b_icon-disposal\" | \"b2b_icon-document-sign\" | \"b2b_icon-downloads\" | \"b2b_icon-dress\" | \"b2b_icon-dungarees\" | \"b2b_icon-duration\" | \"b2b_icon-e-invoice\" | \"b2b_icon-edit-pad\" | \"b2b_icon-edit\" | \"b2b_icon-egg\" | \"b2b_icon-ellipsis\" | \"b2b_icon-email-verification-confirmed-safe\" | \"b2b_icon-email-verification-confirmed\" | \"b2b_icon-email-verification-sent-safe\" | \"b2b_icon-email-verification-sent\" | \"b2b_icon-empty-hint\" | \"b2b_icon-end-to-end\" | \"b2b_icon-error-article-image\" | \"b2b_icon-error\" | \"b2b_icon-euro\" | \"b2b_icon-event\" | \"b2b_icon-events\" | \"b2b_icon-expand\" | \"b2b_icon-faq\" | \"b2b_icon-feedback\" | \"b2b_icon-filter\" | \"b2b_icon-fish\" | \"b2b_icon-fitness\" | \"b2b_icon-flag-chequered\" | \"b2b_icon-flexible-work\" | \"b2b_icon-flip\" | \"b2b_icon-food-processor\" | \"b2b_icon-fullscreen\" | \"b2b_icon-gallery-view\" | \"b2b_icon-gamepad\" | \"b2b_icon-garlic\" | \"b2b_icon-gender-intersex\" | \"b2b_icon-globe\" | \"b2b_icon-gluten\" | \"b2b_icon-glutenfree\" | \"b2b_icon-handshake\" | \"b2b_icon-hashtag\" | \"b2b_icon-hazelnut\" | \"b2b_icon-hide\" | \"b2b_icon-high-heels\" | \"b2b_icon-home\" | \"b2b_icon-info-small\" | \"b2b_icon-info\" | \"b2b_icon-inplace-zoom-reverse\" | \"b2b_icon-inplace-zoom\" | \"b2b_icon-insurance\" | \"b2b_icon-kamut\" | \"b2b_icon-laptop-os\" | \"b2b_icon-laptop\" | \"b2b_icon-leaving-page\" | \"b2b_icon-light-bulb\" | \"b2b_icon-like-fingers\" | \"b2b_icon-like-product\" | \"b2b_icon-like\" | \"b2b_icon-line-graph\" | \"b2b_icon-list-view\" | \"b2b_icon-location\" | \"b2b_icon-lupine\" | \"b2b_icon-macadamia\" | \"b2b_icon-material-samples\" | \"b2b_icon-measurement\" | \"b2b_icon-megaphone\" | \"b2b_icon-menu\" | \"b2b_icon-mic\" | \"b2b_icon-milk\" | \"b2b_icon-minus\" | \"b2b_icon-module-operations\" | \"b2b_icon-money-coins\" | \"b2b_icon-money-document\" | \"b2b_icon-money-plus\" | \"b2b_icon-money-stack\" | \"b2b_icon-money\" | \"b2b_icon-move\" | \"b2b_icon-mustard\" | \"b2b_icon-nav\" | \"b2b_icon-new\" | \"b2b_icon-newsletter-sign-up\" | \"b2b_icon-notification\" | \"b2b_icon-nuts\" | \"b2b_icon-oat\" | \"b2b_icon-order-cancelled\" | \"b2b_icon-order-delivered\" | \"b2b_icon-order-form\" | \"b2b_icon-order-management\" | \"b2b_icon-order-misdirected\" | \"b2b_icon-order-on-road\" | \"b2b_icon-order-packed\" | \"b2b_icon-order-payment\" | \"b2b_icon-order-received\" | \"b2b_icon-order-return\" | \"b2b_icon-order-shipped\" | \"b2b_icon-order-state-unknown\" | \"b2b_icon-order-stored\" | \"b2b_icon-order\" | \"b2b_icon-otto-app\" | \"b2b_icon-otto-campus\" | \"b2b_icon-otto-company\" | \"b2b_icon-otto-laptop\" | \"b2b_icon-otto-logo\" | \"b2b_icon-otto-up-points\" | \"b2b_icon-otto-up\" | \"b2b_icon-paper-plane\" | \"b2b_icon-pause\" | \"b2b_icon-payment-credit-card\" | \"b2b_icon-payment-invoice\" | \"b2b_icon-payment-pause\" | \"b2b_icon-payment-plan-protection\" | \"b2b_icon-payment-plan\" | \"b2b_icon-pdf\" | \"b2b_icon-peanut\" | \"b2b_icon-pecan-nut\" | \"b2b_icon-pending\" | \"b2b_icon-person-access\" | \"b2b_icon-person-callcenter\" | \"b2b_icon-person-check\" | \"b2b_icon-person-colleagues\" | \"b2b_icon-person-community\" | \"b2b_icon-person-development\" | \"b2b_icon-person-female\" | \"b2b_icon-person-info\" | \"b2b_icon-person-male\" | \"b2b_icon-person-rating\" | \"b2b_icon-person-support\" | \"b2b_icon-person-switch\" | \"b2b_icon-person-workshop\" | \"b2b_icon-person\" | \"b2b_icon-phone-permission\" | \"b2b_icon-phone\" | \"b2b_icon-pig\" | \"b2b_icon-pin\" | \"b2b_icon-pinch-gesture\" | \"b2b_icon-pinch\" | \"b2b_icon-pistachio\" | \"b2b_icon-plant\" | \"b2b_icon-play-1\" | \"b2b_icon-play\" | \"b2b_icon-plus\" | \"b2b_icon-price-alert\" | \"b2b_icon-price-tag\" | \"b2b_icon-print\" | \"b2b_icon-puzzle\" | \"b2b_icon-qr-code\" | \"b2b_icon-question-hint\" | \"b2b_icon-question\" | \"b2b_icon-rating-empty\" | \"b2b_icon-rating-filled\" | \"b2b_icon-rating-half\" | \"b2b_icon-rating-order\" | \"b2b_icon-rating-payment\" | \"b2b_icon-remote-work\" | \"b2b_icon-repair\" | \"b2b_icon-reply\" | \"b2b_icon-retirement-provision\" | \"b2b_icon-rocket\" | \"b2b_icon-rye\" | \"b2b_icon-sabbatical\" | \"b2b_icon-sale\" | \"b2b_icon-save\" | \"b2b_icon-sea\" | \"b2b_icon-search-enter\" | \"b2b_icon-search\" | \"b2b_icon-seo\" | \"b2b_icon-service-info\" | \"b2b_icon-sesame\" | \"b2b_icon-settings\" | \"b2b_icon-share-ios\" | \"b2b_icon-share\" | \"b2b_icon-sheep\" | \"b2b_icon-shell\" | \"b2b_icon-shirt\" | \"b2b_icon-shopping-cart-euro\" | \"b2b_icon-shopping-cart\" | \"b2b_icon-show\" | \"b2b_icon-smiley-angry\" | \"b2b_icon-smiley-happy\" | \"b2b_icon-smiley-negative\" | \"b2b_icon-smiley-neutral\" | \"b2b_icon-smiley-positive\" | \"b2b_icon-sms-info\" | \"b2b_icon-sneaker\" | \"b2b_icon-sort-ascending\" | \"b2b_icon-sort-descending\" | \"b2b_icon-sort\" | \"b2b_icon-soy\" | \"b2b_icon-spelt\" | \"b2b_icon-stationary\" | \"b2b_icon-studies\" | \"b2b_icon-success\" | \"b2b_icon-sustainable-delivery\" | \"b2b_icon-sustainable-energy-efficient\" | \"b2b_icon-sustainable-production\" | \"b2b_icon-sustainable-recycling\" | \"b2b_icon-sustainable-resource\" | \"b2b_icon-swipe-gesture\" | \"b2b_icon-sync-device\" | \"b2b_icon-t-shirt\" | \"b2b_icon-tablet\" | \"b2b_icon-tableware\" | \"b2b_icon-target-group\" | \"b2b_icon-teddy\" | \"b2b_icon-test-result\" | \"b2b_icon-town\" | \"b2b_icon-trash\" | \"b2b_icon-trend-down\" | \"b2b_icon-trend-up\" | \"b2b_icon-trousers\" | \"b2b_icon-trusted\" | \"b2b_icon-unpin\" | \"b2b_icon-upload\" | \"b2b_icon-user-management\" | \"b2b_icon-vacation\" | \"b2b_icon-variant-content\" | \"b2b_icon-vegan\" | \"b2b_icon-vegetarian\" | \"b2b_icon-viewtoggle-tiles\" | \"b2b_icon-village\" | \"b2b_icon-volume-off\" | \"b2b_icon-volume-on\" | \"b2b_icon-voucher\" | \"b2b_icon-walnut\" | \"b2b_icon-warning\" | \"b2b_icon-warranty\" | \"b2b_icon-washing-machine\" | \"b2b_icon-whatsapp\" | \"b2b_icon-wheat\" | \"b2b_icon-wifi\" | \"b2b_icon-wishlist-active\" | \"b2b_icon-wishlist\" | \"b2b_icon-work-life\" | \"b2b_icon-workshop\" | \"b2b_icon-zoom-in\" | \"b2b_icon-zoom-out\"",
+          "resolved": "\"b2b_icon-360-degree\" | \"b2b_icon-advice\" | \"b2b_icon-allergen-sulfur-dioxide-sulfite\" | \"b2b_icon-almond\" | \"b2b_icon-archive\" | \"b2b_icon-armchair\" | \"b2b_icon-arrow-down\" | \"b2b_icon-arrow-graph\" | \"b2b_icon-arrow-left\" | \"b2b_icon-arrow-right\" | \"b2b_icon-arrow-up\" | \"b2b_icon-assembly\" | \"b2b_icon-assortment\" | \"b2b_icon-attachment\" | \"b2b_icon-augmented-reality\" | \"b2b_icon-autonomous-team\" | \"b2b_icon-bank-details\" | \"b2b_icon-bar-graph-ascending\" | \"b2b_icon-bar-graph-axis\" | \"b2b_icon-barley\" | \"b2b_icon-basket-sale\" | \"b2b_icon-basket\" | \"b2b_icon-basketball\" | \"b2b_icon-bikini\" | \"b2b_icon-blogs\" | \"b2b_icon-brandshop\" | \"b2b_icon-brazil-nut\" | \"b2b_icon-browser-click\" | \"b2b_icon-browser-content\" | \"b2b_icon-browser-psm\" | \"b2b_icon-burger\" | \"b2b_icon-bus\" | \"b2b_icon-callback\" | \"b2b_icon-camera\" | \"b2b_icon-cashback\" | \"b2b_icon-cashew-nut\" | \"b2b_icon-catalogue\" | \"b2b_icon-categories\" | \"b2b_icon-celery\" | \"b2b_icon-certificate\" | \"b2b_icon-chair\" | \"b2b_icon-chat\" | \"b2b_icon-check-bold\" | \"b2b_icon-check\" | \"b2b_icon-chicken\" | \"b2b_icon-city\" | \"b2b_icon-clear\" | \"b2b_icon-close-bold\" | \"b2b_icon-close\" | \"b2b_icon-code-management\" | \"b2b_icon-contact-mail\" | \"b2b_icon-copy\" | \"b2b_icon-cow\" | \"b2b_icon-crab\" | \"b2b_icon-critique\" | \"b2b_icon-curtain\" | \"b2b_icon-cut-out\" | \"b2b_icon-dashboard\" | \"b2b_icon-deer\" | \"b2b_icon-delete\" | \"b2b_icon-delivery-24h\" | \"b2b_icon-delivery-desired-date-selection\" | \"b2b_icon-delivery-desired-date\" | \"b2b_icon-delivery-express\" | \"b2b_icon-delivery-flat\" | \"b2b_icon-delivery-on-hangers\" | \"b2b_icon-delivery-preferred-place\" | \"b2b_icon-desktop-phone-ads-click\" | \"b2b_icon-desktop-phone-ads\" | \"b2b_icon-desktop-phone\" | \"b2b_icon-desktop\" | \"b2b_icon-devices-monitor-laptop-tablet\" | \"b2b_icon-dish-feature-lactose-free\" | \"b2b_icon-dislike\" | \"b2b_icon-disposal\" | \"b2b_icon-document-sign\" | \"b2b_icon-downloads\" | \"b2b_icon-dress\" | \"b2b_icon-dungarees\" | \"b2b_icon-duration\" | \"b2b_icon-e-invoice\" | \"b2b_icon-edit-pad\" | \"b2b_icon-edit\" | \"b2b_icon-egg\" | \"b2b_icon-ellipsis\" | \"b2b_icon-email-verification-confirmed-safe\" | \"b2b_icon-email-verification-confirmed\" | \"b2b_icon-email-verification-sent-safe\" | \"b2b_icon-email-verification-sent\" | \"b2b_icon-empty-hint\" | \"b2b_icon-end-to-end\" | \"b2b_icon-error-article-image\" | \"b2b_icon-error-hint\" | \"b2b_icon-error\" | \"b2b_icon-euro\" | \"b2b_icon-event\" | \"b2b_icon-events\" | \"b2b_icon-expand\" | \"b2b_icon-faq\" | \"b2b_icon-feedback\" | \"b2b_icon-filter\" | \"b2b_icon-fish\" | \"b2b_icon-fitness\" | \"b2b_icon-flag-chequered\" | \"b2b_icon-flexible-work\" | \"b2b_icon-flip\" | \"b2b_icon-food-processor\" | \"b2b_icon-fullscreen\" | \"b2b_icon-gallery-view\" | \"b2b_icon-gamepad\" | \"b2b_icon-garlic\" | \"b2b_icon-gender-intersex\" | \"b2b_icon-globe\" | \"b2b_icon-gluten\" | \"b2b_icon-glutenfree\" | \"b2b_icon-handshake\" | \"b2b_icon-hashtag\" | \"b2b_icon-hazelnut\" | \"b2b_icon-hide\" | \"b2b_icon-high-heels\" | \"b2b_icon-home\" | \"b2b_icon-info-small\" | \"b2b_icon-info\" | \"b2b_icon-inplace-zoom-reverse\" | \"b2b_icon-inplace-zoom\" | \"b2b_icon-insurance\" | \"b2b_icon-kamut\" | \"b2b_icon-laptop-os\" | \"b2b_icon-laptop\" | \"b2b_icon-leaving-page\" | \"b2b_icon-light-bulb\" | \"b2b_icon-like-fingers\" | \"b2b_icon-like-product\" | \"b2b_icon-like\" | \"b2b_icon-line-graph\" | \"b2b_icon-list-view\" | \"b2b_icon-location\" | \"b2b_icon-lupine\" | \"b2b_icon-macadamia\" | \"b2b_icon-material-samples\" | \"b2b_icon-measurement\" | \"b2b_icon-megaphone\" | \"b2b_icon-menu\" | \"b2b_icon-mic\" | \"b2b_icon-milk\" | \"b2b_icon-minus\" | \"b2b_icon-module-operations\" | \"b2b_icon-money-coins\" | \"b2b_icon-money-document\" | \"b2b_icon-money-plus\" | \"b2b_icon-money-stack\" | \"b2b_icon-money\" | \"b2b_icon-move\" | \"b2b_icon-mustard\" | \"b2b_icon-nav\" | \"b2b_icon-new\" | \"b2b_icon-newsletter-sign-up\" | \"b2b_icon-notification\" | \"b2b_icon-nuts\" | \"b2b_icon-oat\" | \"b2b_icon-order-cancelled\" | \"b2b_icon-order-delivered\" | \"b2b_icon-order-form\" | \"b2b_icon-order-management\" | \"b2b_icon-order-misdirected\" | \"b2b_icon-order-on-road\" | \"b2b_icon-order-packed\" | \"b2b_icon-order-payment\" | \"b2b_icon-order-received\" | \"b2b_icon-order-return\" | \"b2b_icon-order-shipped\" | \"b2b_icon-order-state-unknown\" | \"b2b_icon-order-stored\" | \"b2b_icon-order\" | \"b2b_icon-otto-app\" | \"b2b_icon-otto-campus\" | \"b2b_icon-otto-company\" | \"b2b_icon-otto-laptop\" | \"b2b_icon-otto-logo\" | \"b2b_icon-otto-up-points\" | \"b2b_icon-otto-up\" | \"b2b_icon-paper-plane\" | \"b2b_icon-pause\" | \"b2b_icon-payment-credit-card\" | \"b2b_icon-payment-invoice\" | \"b2b_icon-payment-pause\" | \"b2b_icon-payment-plan-protection\" | \"b2b_icon-payment-plan\" | \"b2b_icon-pdf\" | \"b2b_icon-peanut\" | \"b2b_icon-pecan-nut\" | \"b2b_icon-pending\" | \"b2b_icon-person-access\" | \"b2b_icon-person-callcenter\" | \"b2b_icon-person-check\" | \"b2b_icon-person-colleagues\" | \"b2b_icon-person-community\" | \"b2b_icon-person-development\" | \"b2b_icon-person-female\" | \"b2b_icon-person-info\" | \"b2b_icon-person-male\" | \"b2b_icon-person-rating\" | \"b2b_icon-person-support\" | \"b2b_icon-person-switch\" | \"b2b_icon-person-workshop\" | \"b2b_icon-person\" | \"b2b_icon-phone-permission\" | \"b2b_icon-phone\" | \"b2b_icon-pig\" | \"b2b_icon-pin\" | \"b2b_icon-pinch-gesture\" | \"b2b_icon-pinch\" | \"b2b_icon-pistachio\" | \"b2b_icon-plant\" | \"b2b_icon-play-1\" | \"b2b_icon-play\" | \"b2b_icon-plus\" | \"b2b_icon-price-alert\" | \"b2b_icon-price-tag\" | \"b2b_icon-print\" | \"b2b_icon-puzzle\" | \"b2b_icon-qr-code\" | \"b2b_icon-question-hint\" | \"b2b_icon-question\" | \"b2b_icon-rating-empty\" | \"b2b_icon-rating-filled\" | \"b2b_icon-rating-half\" | \"b2b_icon-rating-order\" | \"b2b_icon-rating-payment\" | \"b2b_icon-remote-work\" | \"b2b_icon-repair\" | \"b2b_icon-reply\" | \"b2b_icon-retirement-provision\" | \"b2b_icon-rocket\" | \"b2b_icon-rye\" | \"b2b_icon-sabbatical\" | \"b2b_icon-sale\" | \"b2b_icon-save\" | \"b2b_icon-sea\" | \"b2b_icon-search-enter\" | \"b2b_icon-search\" | \"b2b_icon-seo\" | \"b2b_icon-service-info\" | \"b2b_icon-sesame\" | \"b2b_icon-settings\" | \"b2b_icon-share-ios\" | \"b2b_icon-share\" | \"b2b_icon-sheep\" | \"b2b_icon-shell\" | \"b2b_icon-shirt\" | \"b2b_icon-shopping-cart-euro\" | \"b2b_icon-shopping-cart\" | \"b2b_icon-show\" | \"b2b_icon-smiley-angry\" | \"b2b_icon-smiley-happy\" | \"b2b_icon-smiley-negative\" | \"b2b_icon-smiley-neutral\" | \"b2b_icon-smiley-positive\" | \"b2b_icon-sms-info\" | \"b2b_icon-sneaker\" | \"b2b_icon-sort-ascending\" | \"b2b_icon-sort-descending\" | \"b2b_icon-sort\" | \"b2b_icon-soy\" | \"b2b_icon-spelt\" | \"b2b_icon-stationary\" | \"b2b_icon-studies\" | \"b2b_icon-success\" | \"b2b_icon-sustainable-delivery\" | \"b2b_icon-sustainable-energy-efficient\" | \"b2b_icon-sustainable-production\" | \"b2b_icon-sustainable-recycling\" | \"b2b_icon-sustainable-resource\" | \"b2b_icon-swipe-gesture\" | \"b2b_icon-sync-device\" | \"b2b_icon-t-shirt\" | \"b2b_icon-tablet\" | \"b2b_icon-tableware\" | \"b2b_icon-target-group\" | \"b2b_icon-teddy\" | \"b2b_icon-test-result\" | \"b2b_icon-town\" | \"b2b_icon-trash\" | \"b2b_icon-trend-down\" | \"b2b_icon-trend-up\" | \"b2b_icon-trousers\" | \"b2b_icon-trusted\" | \"b2b_icon-unpin\" | \"b2b_icon-upload\" | \"b2b_icon-user-management\" | \"b2b_icon-vacation\" | \"b2b_icon-variant-content\" | \"b2b_icon-vegan\" | \"b2b_icon-vegetarian\" | \"b2b_icon-viewtoggle-tiles\" | \"b2b_icon-village\" | \"b2b_icon-volume-off\" | \"b2b_icon-volume-on\" | \"b2b_icon-voucher\" | \"b2b_icon-walnut\" | \"b2b_icon-warning\" | \"b2b_icon-warranty\" | \"b2b_icon-washing-machine\" | \"b2b_icon-whatsapp\" | \"b2b_icon-wheat\" | \"b2b_icon-wifi\" | \"b2b_icon-wishlist-active\" | \"b2b_icon-wishlist\" | \"b2b_icon-work-life\" | \"b2b_icon-workshop\" | \"b2b_icon-zoom-in\" | \"b2b_icon-zoom-out\"",
           "references": {
             "IconName": {
               "location": "import",

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

@@ -1,5 +1,4 @@
 import { html } from 'lit-html';
-import iconDocs from './icon.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 import { iconTypes } from './types';
 import './icon.stories.scss';
@@ -68,9 +67,4 @@ export default {
   title: 'Components/Assets/Icon',
   argTypes: iconArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: iconDocs,
-    },
-  },
 };

package/dist/collection/components/icon/icons/b2b_icon-error-hint.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.85352 3.14648C7.6582 2.95117 7.3418 2.95117 7.14648 3.14648L5.5 4.79297L3.85352 3.14648C3.6582 2.95117 3.3418 2.95117 3.14648 3.14648C2.95117 3.3418 2.95117 3.6582 3.14648 3.85352L4.79297 5.5L3.14648 7.14648C2.95117 7.3418 2.95117 7.6582 3.14648 7.85352C3.24414 7.95117 3.37207 8 3.5 8C3.62793 8 3.75586 7.95117 3.85352 7.85352L5.5 6.20703L7.14648 7.85352C7.24414 7.95117 7.37207 8 7.5 8C7.62793 8 7.75586 7.95117 7.85352 7.85352C8.04883 7.6582 8.04883 7.3418 7.85352 7.14648L6.20703 5.5L7.85352 3.85352C8.04883 3.6582 8.04883 3.3418 7.85352 3.14648ZM5.5 0C2.46729 0 0 2.46729 0 5.5C0 8.53271 2.46729 11 5.5 11C8.53271 11 11 8.53271 11 5.5C11 2.46729 8.53271 0 5.5 0ZM5.5 10C3.01855 10 1 7.98145 1 5.5C1 3.01855 3.01855 1 5.5 1C7.98145 1 10 3.01855 10 5.5C10 7.98145 7.98145 10 5.5 10Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon/types.js

@@ -92,6 +92,7 @@ export const iconTypes = [
   "b2b_icon-empty-hint",
   "b2b_icon-end-to-end",
   "b2b_icon-error-article-image",
+  "b2b_icon-error-hint",
   "b2b_icon-error",
   "b2b_icon-euro",
   "b2b_icon-event",

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */