@otto-de/b2b-core-components 1.0.0

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

@@ -0,0 +1,98 @@
+import { h } from '@stencil/core';
+/**
+ * Headline component to render hading tags content.
+ * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46
+ */
+export class HeadlineComponent {
+  constructor() {
+    this.size = '400';
+    this.align = 'left';
+    this.noMargin = false;
+  }
+  render() {
+    let className = `b2b-headline`;
+    const classes = {
+      [`${className}--${this.size}`]: true,
+      [`${className}--${this.align}`]: true,
+      [`${className}--no-margin`]: this.noMargin,
+    };
+    switch (this.size) {
+      case '400':
+        return (h("h1", { class: classes }, h("slot", null)));
+      case '200':
+        return (h("h2", { class: classes }, h("slot", null)));
+      case '100':
+        return (h("h3", { class: classes }, h("slot", null)));
+    }
+  }
+  static get is() { return "b2b-headline"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["headline.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["headline.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'400' | '200' | '100'",
+          "resolved": "\"100\" | \"200\" | \"400\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `<h1>`, 200 to `<h2>` and 100 to `<h3>`"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'400'"
+      },
+      "align": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right' | 'center'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The alignment of the headline."
+        },
+        "attribute": "align",
+        "reflect": false,
+        "defaultValue": "'left'"
+      },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the headline should have a margin. Per default, margins are enabled."
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,39 @@
+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}">
+    ${slot}
+  </b2b-headline>`;
+};
+const defaultArgs = {
+  size: '400',
+  align: 'left',
+  slot: 'Headline',
+};
+export const story010Default = template.bind({});
+story010Default.args = defaultArgs;
+story010Default.storyName = 'Default Headline 400';
+export const story030Size200 = template.bind({});
+story030Size200.args = Object.assign(Object.assign({}, defaultArgs), { size: 200, slot: 'Headline 200' });
+story030Size200.storyName = 'Headline 200';
+export const story040Size100 = template.bind({});
+story040Size100.args = Object.assign(Object.assign({}, defaultArgs), { size: 100, slot: 'Headline 100' });
+story040Size100.storyName = 'Headline 100';
+export const story050Center = template.bind({});
+story050Center.args = Object.assign(Object.assign({}, defaultArgs), { align: 'center', slot: 'Centered Headline' });
+story050Center.storyName = 'Center aligned';
+export const story060Right = template.bind({});
+story060Right.args = Object.assign(Object.assign({}, defaultArgs), { align: 'right', slot: 'Headline aligned to the Right' });
+story060Right.storyName = 'Right aligned';
+const argTypes = getArgTypes('b2b-headline');
+export default {
+  title: 'Components/Content/Headline',
+  argTypes: argTypes,
+  viewMode: 'docs',
+  parameters: {
+    docs: {
+      page: docs,
+    },
+  },
+};

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

@@ -0,0 +1,250 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 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-75: var(--b2b-size-30);
+  --b2b-size-copy-50: var(--b2b-size-25);
+  --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 Wed, 26 Apr 2023 14:13:51 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");
+}
+:host {
+  --b2b-icon-line-height: inherit;
+  --b2b-icon-cursor: default;
+}
+:host .b2b-icon {
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: var(--b2b-icon-line-height);
+  cursor: var(--b2b-icon-cursor);
+}
+:host .b2b-icon.icon-50 {
+  width: var(--b2b-size-40);
+  height: var(--b2b-size-40);
+}
+:host .b2b-icon.icon-100 {
+  width: var(--b2b-size-60);
+  height: var(--b2b-size-60);
+}
+:host .b2b-icon.icon-200 {
+  width: var(--b2b-size-80);
+  height: var(--b2b-size-80);
+}
+:host .b2b-icon.primary {
+  fill: var(--b2b-color-black-100);
+}
+:host .b2b-icon.secondary {
+  fill: var(--b2b-color-grey-200);
+}
+:host .b2b-icon.inverse {
+  fill: var(--b2b-color-white-100);
+}
+:host .b2b-icon.inherit {
+  fill: currentcolor;
+}

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

@@ -0,0 +1,130 @@
+import { Build, h, Host } from '@stencil/core';
+import { buildPath, fetchIcon, iconContent } from './request';
+import { iconTypes } from './types';
+export class B2bIcon {
+  constructor() {
+    this.isIconSupported = () => {
+      return iconTypes.includes(this.icon);
+    };
+    this.icon = undefined;
+    this.color = 'inherit';
+    this.size = '100';
+    this.pathData = null;
+  }
+  connectedCallback() {
+    this.loadIconPathData();
+  }
+  render() {
+    if (!this.isIconSupported())
+      return null;
+    return (h(Host, null, h("div", { class: {
+        'b2b-icon': true,
+        [`icon-${this.size}`]: true,
+        [this.color]: true,
+      }, 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);
+    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"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["icon.css"]
+    };
+  }
+  static get assetsDirs() { return ["icons"]; }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "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\"",
+          "references": {
+            "IconName": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "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'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'50' | '100' | '200'",
+          "resolved": "\"100\" | \"200\" | \"50\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the icon"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'100'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "pathData": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "icon",
+        "methodName": "loadIconPathData"
+      }];
+  }
+}

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

@@ -0,0 +1,76 @@
+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';
+const Template = ({ icon, color, size }) => {
+  return html `<b2b-icon icon="${icon}" color="${color}" size="${size}" />`;
+};
+const defaultArgs = {
+  icon: 'b2b_icon-edit',
+  color: 'primary',
+  size: '100',
+};
+export const story010Primary = Template.bind({});
+story010Primary.args = defaultArgs;
+story010Primary.storyName = 'Primary';
+export const story020Secondary = Template.bind({});
+story020Secondary.args = Object.assign(Object.assign({}, defaultArgs), { color: 'secondary' });
+story020Secondary.storyName = 'Secondary';
+export const story030Inverse = Template.bind({});
+story030Inverse.args = Object.assign(Object.assign({}, defaultArgs), { color: 'inverse' });
+story030Inverse.storyName = 'Inverse';
+story030Inverse.parameters = {
+  backgrounds: {
+    default: 'inverse-bg',
+  },
+};
+export const story035Inherit = ({ icon, color, size }) => {
+  return html ` <div style="color: red;">
+    <b2b-icon icon="${icon}" color="${color}" size="${size}" />
+  </div>`;
+};
+story035Inherit.args = Object.assign(Object.assign({}, defaultArgs), { color: 'inherit' });
+story035Inherit.storyName = 'Inherit';
+export const story040Size50 = Template.bind({});
+story040Size50.args = Object.assign(Object.assign({}, defaultArgs), { size: '50' });
+story040Size50.storyName = 'Size 50';
+export const story050Size100 = Template.bind({});
+story050Size100.args = defaultArgs;
+story050Size100.storyName = 'Size 100';
+export const story060Size200 = Template.bind({});
+story060Size200.args = Object.assign(Object.assign({}, defaultArgs), { size: '200' });
+story060Size200.storyName = 'Size 200';
+export const story070AllIcons = ({ color, size }) => {
+  // not using a self-closing tag as that messes up with the display order of the icon and paragraph
+  const icons = iconTypes.map(icon => {
+    return html `
+      <div class="icon-container">
+        <b2b-icon
+          icon="${icon}"
+          color="${color || defaultArgs.color}"
+          size="${size || 200}"></b2b-icon>
+        <p>${icon}</p>
+      </div>
+    `;
+  });
+  return html `<div class="icons-grid-container">${icons}</div>`;
+};
+story070AllIcons.args = { color: 'primary', size: '200' };
+story070AllIcons.storyName = 'All Icons';
+const controls = {
+  size: 'radio',
+  color: 'radio',
+  icon: 'select',
+};
+const iconArgs = getArgTypes('b2b-icon', controls);
+export default {
+  title: 'Components/Assets/Icon',
+  argTypes: iconArgs,
+  viewMode: 'docs',
+  parameters: {
+    docs: {
+      page: iconDocs,
+    },
+  },
+};

package/dist/collection/components/icon/icons/b2b_icon-360-degree.svg

@@ -0,0 +1,6 @@
+<svg  viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3185 11.0574C11.4652 11.0096 11.6234 10.9832 11.7914 10.9832C12.6365 10.9832 13.2498 11.6281 13.2498 12.5166C13.2498 12.5236 13.2493 12.5305 13.2488 12.5373C13.2484 12.5429 13.248 12.5484 13.2479 12.554L13.248 12.5583L13.2484 12.5638C13.2487 12.5677 13.249 12.5717 13.2488 12.5757C13.2484 12.5824 13.2476 12.589 13.2468 12.5956C13.2461 12.6009 13.2454 12.6062 13.245 12.6116C13.227 12.896 13.1297 13.1582 12.9745 13.3765L12.9678 13.3856C12.9455 13.4165 12.9225 13.4467 12.898 13.4757C12.884 13.4924 12.869 13.5082 12.8543 13.5243L12.843 13.5367C12.8329 13.5478 12.8227 13.5589 12.812 13.5695C12.7852 13.5964 12.7572 13.6218 12.7284 13.6464C12.7241 13.6501 12.72 13.6541 12.7157 13.6577C12.5735 13.7768 12.409 13.8684 12.2286 13.9252L12.2239 13.9268C12.1909 13.9371 12.1571 13.9452 12.1232 13.9531C12.1173 13.9545 12.1115 13.956 12.1057 13.9576C12.1014 13.9587 12.0971 13.9599 12.0928 13.961C12.0885 13.962 12.0843 13.963 12.08 13.9639C12.0716 13.9656 12.0631 13.9668 12.0545 13.9679L12.0462 13.9691L12.0363 13.9706C11.9565 13.9844 11.875 13.9932 11.7914 13.9932C11.0153 13.9932 10.3808 13.3759 10.3372 12.601C10.337 12.5984 10.3365 12.5959 10.3359 12.5934L10.3352 12.5897L10.3346 12.5854C10.3004 12.1547 10.2815 11.276 10.3365 10.8146C10.4651 9.73499 11.3104 9.24316 12.0414 9.24316C12.2776 9.24316 12.572 9.31311 12.7573 9.41321C13.0002 9.54443 13.0908 9.84766 12.9597 10.0907C12.8289 10.3335 12.5254 10.4243 12.2822 10.2931C12.2437 10.2738 12.1221 10.2432 12.0414 10.2432C11.9363 10.2432 11.4077 10.2764 11.3295 10.9329C11.3252 10.9688 11.3217 11.0123 11.3185 11.0574ZM12.0686 12.8936C12.1727 12.8071 12.2337 12.675 12.2474 12.5405C12.2476 12.5369 12.2481 12.5334 12.2486 12.5299C12.2492 12.5255 12.2498 12.5212 12.2498 12.5166C12.2498 12.1826 12.0784 11.9832 11.7914 11.9832C11.5001 11.9832 11.333 12.1776 11.333 12.5166C11.356 12.7545 11.5188 12.9924 11.7914 12.9924C11.8254 12.9924 11.8574 12.9886 11.8879 12.9821C11.9013 12.9791 11.914 12.9745 11.9267 12.9699L11.937 12.9662L11.9494 12.9622C11.9572 12.9598 11.9651 12.9574 11.9724 12.9541C11.9851 12.9484 11.9969 12.9412 12.0087 12.934L12.0182 12.9282L12.03 12.9213C12.038 12.9167 12.046 12.9122 12.0533 12.9067C12.0561 12.9046 12.0586 12.9023 12.0612 12.9C12.0636 12.8978 12.066 12.8956 12.0686 12.8936Z" "/>
+<path d="M9.83168 10.4629C9.74257 9.6991 9.19509 9.24316 8.3672 9.24316C8.05922 9.24316 7.65126 9.40955 7.47511 9.52979C7.24977 9.68347 7.19557 9.98535 7.34548 10.2133C7.49501 10.4414 7.80654 10.5031 8.03688 10.3571C8.10085 10.3165 8.29689 10.2465 8.3672 10.2432C8.79931 10.2432 8.82106 10.4293 8.83852 10.5787C8.85121 10.6877 8.84731 10.8391 8.75698 10.9406C8.68428 11.0223 8.55403 11.0677 8.39058 11.072C8.38806 11.0719 8.38557 11.0718 8.38309 11.0717C8.38189 11.0716 8.38069 11.0715 8.3795 11.0714C8.37712 11.0713 8.37474 11.0711 8.37234 11.071C8.37064 11.071 8.36893 11.0709 8.3672 11.0709H8.22096C7.94484 11.0709 7.72096 11.2948 7.72096 11.5709L7.7211 11.5723L7.72096 11.5736C7.72096 11.8497 7.94484 12.0736 8.22096 12.0736H8.3672C8.37123 12.0736 8.37516 12.0734 8.37909 12.0731C8.38264 12.0729 8.38619 12.0726 8.3898 12.0726C8.57994 12.0769 8.73334 12.1318 8.83241 12.2349C8.91677 12.3228 8.96034 12.4431 8.95522 12.574C8.94521 12.8286 8.76723 12.9932 8.50173 12.9932C8.25466 12.9932 7.90541 12.9209 7.72353 12.8538C7.46474 12.7588 7.17702 12.8909 7.08156 13.1501C6.98598 13.4092 7.11867 13.6968 7.37782 13.7922C7.64052 13.8889 8.10439 13.9932 8.50173 13.9932C9.29897 13.9932 9.92348 13.3999 9.95449 12.6135C9.97046 12.2084 9.82807 11.8281 9.55379 11.5425C9.78017 11.2536 9.87969 10.8744 9.83168 10.4629Z" "/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6606 10.6407C13.741 9.81787 14.3398 9.24316 15.1167 9.24316C15.8801 9.24316 16.5 9.82776 16.5908 10.6333C16.6394 11.0664 16.6482 12.0994 16.5908 12.6033C16.499 13.4084 15.8789 13.9932 15.1167 13.9932C14.3674 13.9932 13.7556 13.4094 13.6616 12.605C13.6018 12.0912 13.6196 11.0593 13.6606 10.6407ZM15.1167 12.9932C15.4075 12.9932 15.5696 12.7324 15.5972 12.4902C15.646 12.0604 15.6384 11.1127 15.5972 10.7451C15.571 10.5137 15.4294 10.2432 15.1167 10.2432C14.8125 10.2432 14.6792 10.4988 14.6558 10.738C14.6206 11.0986 14.6057 12.0663 14.6548 12.489C14.6841 12.74 14.8384 12.9932 15.1167 12.9932Z" "/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 12C0.5 5.65894 5.65894 0.5 12 0.5C18.3411 0.5 23.5 5.65894 23.5 12C23.5 18.3411 18.3411 23.5 12 23.5C5.65894 23.5 0.5 18.3411 0.5 12ZM18 12C18 11.8205 17.9973 11.642 17.9922 11.4646C17.393 11.2841 16.9553 10.7298 16.9553 10.0751C16.9553 9.52657 17.2624 9.04832 17.7144 8.80138C17.6191 8.28162 17.5009 7.78004 17.3626 7.29884C15.7818 6.79379 13.9426 6.5 12 6.5C10.0574 6.5 8.21817 6.79381 6.63741 7.29887C6.23056 8.71432 6 10.3105 6 12C6 13.6895 6.23055 15.2857 6.63737 16.7011C8.21814 17.2062 10.0574 17.5 12 17.5C13.9426 17.5 15.7818 17.2062 17.3626 16.7011C17.7694 15.2857 18 13.6895 18 12ZM18.4136 9.62305C18.1609 9.62305 17.9553 9.82581 17.9553 10.0751C17.9553 10.3242 18.1609 10.527 18.4136 10.527C18.6663 10.527 18.8718 10.3242 18.8718 10.0751C18.8718 9.82581 18.6663 9.62305 18.4136 9.62305ZM18.9908 11.4078C18.9969 11.604 19 11.8014 19 12C19 13.5139 18.8193 14.9589 18.4943 16.2839C20.9169 15.2662 22.5 13.7097 22.5 12C22.5 10.2902 20.9168 8.7337 18.4943 7.71606C18.5692 8.02173 18.6373 8.33302 18.6964 8.65096C19.3656 8.78247 19.8718 9.37077 19.8718 10.0751C19.8718 10.6715 19.5085 11.1847 18.9908 11.4078ZM18.1372 6.47519C19.7241 7.03156 21.0403 7.80118 21.9721 8.7188C20.9657 5.66821 18.5987 3.23077 15.5905 2.13275C16.6555 3.18268 17.5373 4.68398 18.1372 6.47519ZM16.9669 6.11617C15.8867 3.33255 14.0634 1.5 12 1.5C9.93654 1.5 8.1133 3.33255 7.03311 6.11617C8.52933 5.72057 10.2105 5.5 12 5.5C13.7895 5.5 15.4706 5.72057 16.9669 6.11617ZM5.86284 6.47517C6.46266 4.68398 7.34445 3.18268 8.40945 2.13277C5.40138 3.23079 3.03429 5.6682 2.02789 8.71875C2.95966 7.80115 4.27596 7.03152 5.86284 6.47517ZM5 12C5 10.4861 5.18073 9.04108 5.50574 7.71608C3.08318 8.73372 1.5 10.2902 1.5 12C1.5 13.7097 3.08318 15.2662 5.50572 16.2839C5.18071 14.9589 5 13.5139 5 12ZM5.86282 17.5248C4.27589 16.9684 2.95963 16.1988 2.02785 15.2811C3.03421 18.3318 5.40134 20.7692 8.40947 21.8672C7.34447 20.8173 6.46266 19.316 5.86282 17.5248ZM7.03308 17.8838C8.11327 20.6675 9.93652 22.5 12 22.5C14.0634 22.5 15.8867 20.6674 16.9669 17.8838C15.4707 18.2794 13.7895 18.5 12 18.5C10.2105 18.5 8.52931 18.2794 7.03308 17.8838ZM18.1372 17.5248C17.5373 19.316 16.6555 20.8174 15.5905 21.8673C18.5987 20.7693 20.9658 18.3318 21.9722 15.2811C21.0404 16.1987 19.7241 16.9684 18.1372 17.5248Z" "/>
+</svg>

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

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.26245 16.1234C6.60763 16.1234 6.88745 15.8436 6.88745 15.4984C6.88745 15.1532 6.60763 14.8734 6.26245 14.8734C5.91727 14.8734 5.63745 15.1532 5.63745 15.4984C5.63745 15.8436 5.91727 16.1234 6.26245 16.1234Z"/>
+<path d="M4.65186 10.6162C5.01514 10.249 5.61719 10.0024 6.15039 10.0024C7.83057 10.0024 8.01221 11.1084 8.01221 11.584C8.01221 12.3032 7.50049 12.6763 7.12695 12.9482C6.78857 13.1948 6.65039 13.3149 6.65039 13.5098C6.65039 13.7861 6.42676 14.0098 6.15039 14.0098C5.87402 14.0098 5.65039 13.7861 5.65039 13.5098C5.65039 12.7871 6.16289 12.4136 6.53734 12.1407C6.87426 11.8951 7.01221 11.7754 7.01221 11.584C7.01221 11.3667 7.01221 11.0024 6.15039 11.0024C5.88477 11.0024 5.53857 11.1416 5.36279 11.3193C5.16895 11.5161 4.85156 11.5171 4.65576 11.3232C4.45947 11.1289 4.45752 10.8125 4.65186 10.6162Z"/>
+<path d="M16.4976 11.021C16.7739 11.021 16.9976 10.7974 16.9976 10.521V6.521C16.9976 6.24463 16.7739 6.021 16.4976 6.021C16.2212 6.021 15.9976 6.24463 15.9976 6.521V10.521C15.9976 10.7974 16.2212 11.021 16.4976 11.021Z"/>
+<path d="M17.129 12.503C17.129 12.8482 16.8491 13.128 16.504 13.128C16.1588 13.128 15.879 12.8482 15.879 12.503C15.879 12.1578 16.1588 11.878 16.504 11.878C16.8491 11.878 17.129 12.1578 17.129 12.503Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.8579 4.14648C22.7642 4.05273 22.6367 4 22.5044 4L10.4995 4.00928C10.2236 4.00928 10 4.2334 10 4.50928V8H1.50781C1.23145 8 1.00781 8.22363 1.00781 8.5V17.5C1.00781 17.7764 1.23145 18 1.50781 18H3.01758V19.5C3.01758 19.6831 3.11768 19.8521 3.27881 19.9395C3.35352 19.98 3.43555 20 3.51758 20C3.6123 20 3.70703 19.9731 3.78955 19.9194L6.74854 18H12.5049C12.7812 18 13.0049 17.7764 13.0049 17.5V15.0023L15.7837 15.0049L19.1816 17.8818C19.2739 17.9595 19.3887 18 19.5049 18C19.5762 18 19.6479 17.9849 19.7153 17.9536C19.8916 17.8716 20.0049 17.6948 20.0049 17.5V15.0049H22.5044C22.7808 15.0049 23.0044 14.7812 23.0044 14.5049V4.5C23.0044 4.36719 22.9517 4.24023 22.8579 4.14648ZM12.0049 17H6.60059C6.50391 17 6.40967 17.0278 6.32861 17.0806L4.01758 18.5796V17.5C4.01758 17.2236 3.79395 17 3.51758 17H2.00781V9H10V14.5C10 14.7759 10.2236 14.9995 10.4995 15L12.0049 15.0014V17ZM22.0044 14.0049H19.5049C19.2285 14.0049 19.0049 14.2285 19.0049 14.5049V16.4214L16.2905 14.123C16.2002 14.0469 16.0859 14.0049 15.9678 14.0049L11 14.0005V5.00879L22.0044 5.00049V14.0049Z"/>
+</svg>

package/dist/collection/components/icon/icons/b2b_icon-allergen-sulfur-dioxide-sulfite.svg

@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0001 15.0019C15.7317 15.0019 15.4764 15.0487 15.2286 15.1151C15.2098 15.0936 15.1976 15.0683 15.1749 15.0498L12.8289 13.1473C13.0484 12.4098 13.046 11.6285 12.837 10.8978L15.1944 8.95407C15.2147 8.93734 15.2249 8.9144 15.242 8.89535C15.3958 8.93539 15.5513 8.97177 15.713 8.98727C15.8106 8.99704 15.9083 9.00192 16.0059 9.00192C16.6993 9.00192 17.3663 8.76364 17.9092 8.31637C18.5274 7.80661 18.9102 7.08688 18.9864 6.28903C19.0635 5.49118 18.8253 4.71188 18.3155 4.09274C17.2608 2.81637 15.3653 2.63473 14.0919 3.68649C13.3128 4.32956 12.9471 5.28671 13.0157 6.22519C12.9988 6.23593 12.9796 6.23983 12.9639 6.2529L10.4752 8.30392C8.89215 7.67502 7.02276 8.0914 5.89361 9.48141C5.22076 10.3115 4.91119 11.3535 5.02154 12.416C5.13287 13.4785 5.65045 14.4345 6.47955 15.1084C7.19928 15.6914 8.07818 16.0019 8.99225 16.0019C9.13287 16.0019 9.2735 15.9951 9.41412 15.9804C9.7713 15.943 10.1092 15.8438 10.4359 15.7181L12.9688 17.7734C12.9847 17.7862 13.0032 17.7915 13.0203 17.8021C13.0157 17.8694 13.0001 17.9334 13.0001 18.0019C13.0001 19.6562 14.3458 21.0019 16.0001 21.0019C17.6544 21.0019 19.0001 19.6562 19.0001 18.0019C19.0001 16.3476 17.6544 15.0019 16.0001 15.0019ZM14.7286 4.45797C15.5772 3.7568 16.8409 3.8779 17.544 4.72946C18.2452 5.58004 18.1241 6.84372 17.2725 7.54489C16.4219 8.24704 15.1573 8.12594 14.4571 7.2734C13.7559 6.42282 13.878 5.16012 14.7286 4.45797ZM13.2957 7.2756C13.3997 7.49728 13.5228 7.71261 13.6856 7.91012C13.8528 8.11313 14.0496 8.28024 14.2576 8.43002L12.4156 9.94882C12.1824 9.55966 11.8924 9.19735 11.5206 8.89547V8.8945C11.4871 8.86752 11.449 8.85116 11.4153 8.82553L13.2957 7.2756ZM7.11041 14.331C5.82525 13.289 5.62799 11.3965 6.67096 10.1123C7.17584 9.48922 7.89264 9.10055 8.68951 9.01754C8.79596 9.0068 8.90143 9.00094 9.0069 9.00094C9.69147 9.00094 10.3506 9.23434 10.8897 9.67087C12.1749 10.7138 12.3712 12.6074 11.3292 13.8916C10.2872 15.1767 8.39459 15.373 7.11041 14.331ZM13.2867 16.7422L11.3834 15.1977C11.6461 15.0013 11.8943 14.7835 12.1065 14.5224C12.2191 14.3836 12.3033 14.232 12.3943 14.0836L14.242 15.5824C13.8323 15.8808 13.503 16.2784 13.2867 16.7422ZM16.0001 20.0019C14.8975 20.0019 14.0001 19.1045 14.0001 18.0019C14.0001 16.8994 14.8975 16.0019 16.0001 16.0019C17.1026 16.0019 18.0001 16.8994 18.0001 18.0019C18.0001 19.1045 17.1026 20.0019 16.0001 20.0019Z" "/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0137 5.42969C13.6006 4.82324 12.4005 3.2041 12.4005 3.2041C12.3067 3.07715 12.1583 3.00195 12.0001 3.00195H11.9991C11.8419 3.00195 11.6934 3.07617 11.5987 3.20215C11.5499 3.26855 10.3858 4.82422 9.97858 5.4375C8.57916 7.5459 7.0733 11.4092 7.0733 14.9053C7.0733 20.21 10.1592 21.002 11.9991 21.002C13.8389 21.002 16.9258 20.21 16.9258 14.9053C16.9258 11.6484 15.4454 7.5293 14.0137 5.42969ZM13.2762 19.8129C15.9161 16.0283 13.003 7.75659 12.8663 7.37695C12.7735 7.11719 12.4874 6.98535 12.2266 7.0752C11.9669 7.16895 11.8321 7.45508 11.9249 7.71484C11.9581 7.80676 15.0645 16.6256 12.1214 19.6366C9.06769 17.3048 11.0281 10.8151 11.0489 10.7471C11.1309 10.4834 10.9835 10.2031 10.7198 10.1211C10.4522 10.0371 10.1768 10.1855 10.0938 10.4502C10.0047 10.7352 8.16241 16.837 10.8963 19.8654C9.02911 19.4188 8.0733 17.7654 8.0733 14.9053C8.0733 11.7627 9.45123 8.04102 10.8126 5.99023C11.0567 5.62109 11.6133 4.86133 11.9971 4.3418C12.3799 4.8623 12.9337 5.62109 13.1876 5.99219C14.504 7.9248 15.9258 11.8818 15.9258 14.9053C15.9258 17.673 15.0257 19.3044 13.2762 19.8129Z" "/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 11.001H14.5C14.7762 11.001 15 10.7771 15 10.501V8.50098C15 8.22479 14.7762 8.00098 14.5 8.00098H9.5C9.22388 8.00098 9 8.22479 9 8.50098V10.501C9 10.7771 9.22388 11.001 9.5 11.001ZM10 9.00098H14V10.001H10V9.00098ZM20.5 3.00098H3.5C3.22388 3.00098 3 3.22479 3 3.50098V6.50098C3 6.7771 3.22388 7.00098 3.5 7.00098H4V20.501C4 20.7771 4.22388 21.001 4.5 21.001H19.5C19.7762 21.001 20 20.7771 20 20.501V7.00098H20.5C20.7762 7.00098 21 6.7771 21 6.50098V3.50098C21 3.22479 20.7762 3.00098 20.5 3.00098ZM19 20.001H5V7.00098H19V20.001ZM20 6.00098H19.5H4.5H4V4.00098H20V6.00098Z" "/>
+</svg>