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

package/dist/types/components/card/card.d.ts

@@ -1,16 +1,16 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CardComponent {
-  host: HTMLB2bCardElement;
-  /** Disables the card. Per default, it is false */
-  disabled: boolean;
-  /** An optional href in case the card is used to redirect on click. */
-  href?: string;
-  /** The target of the card if used with an href. Blank per default. */
-  target?: 'blank' | 'self';
-  /** Emits whenever the card is clicked on or enter is pressed while the card has focus. */
-  b2bChange: EventEmitter<void>;
-  onClick(): void;
-  onKeyDown(event: KeyboardEvent): void;
-  private getTabIndex;
-  render(): any;
+    host: HTMLB2bCardElement;
+    /** Disables the card. Per default, it is false */
+    disabled: boolean;
+    /** An optional href in case the card is used to redirect on click. */
+    href?: string;
+    /** The target of the card if used with an href. Blank per default. */
+    target?: 'blank' | 'self';
+    /** Emits whenever the card is clicked on or enter is pressed while the card has focus. */
+    b2bChange: EventEmitter<void>;
+    onClick(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private getTabIndex;
+    render(): any;
 }

package/dist/types/components/checkbox/checkbox.d.ts

@@ -1,43 +1,43 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { CheckboxEventDetail } from '../../utils/interfaces/form.interface';
 export declare class CheckboxComponent {
-  hostElement: HTMLB2bCheckboxElement;
-  /** The checkbox label. This attribute is required. */
-  label?: string;
-  /** Adds an asterisk at the end of the label to signify that the field is required. */
-  required: boolean;
-  /** Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked. */
-  checked: boolean;
-  /** Whether or not the checkbox is disabled. The default value is false. */
-  disabled: boolean;
-  /** If used in combination with other checkboxes, this state indicates that some checkboxes are checked, but not all. Per default, it is false. */
-  indeterminate: boolean;
-  /** The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles. */
-  error?: string;
-  /** The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint. */
-  hint?: string;
-  /** The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name. */
-  name?: string;
-  /** The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group */
-  value?: any;
-  /** Whether or not the checkbox is rendered with error styles. Defaults to false. */
-  invalid?: boolean;
-  /** If true, renders a standalone inline checkbox with no label and hint/error. */
-  standalone: boolean;
-  /** @internal whether the parent checkbox-group is disabled. */
-  groupDisabled: boolean;
-  /** Emits whenever the checkbox receives focus. */
-  b2bFocus: EventEmitter<FocusEvent>;
-  /** Emits whenever the checkbox loses focus. */
-  b2bBlur: EventEmitter<FocusEvent>;
-  /** Emits the checkbox value when it's checked status changes. */
-  b2bChange: EventEmitter<CheckboxEventDetail>;
-  connectedCallback(): void;
-  private handleFormData;
-  private emitDetail;
-  private onFocus;
-  private onBlur;
-  private onClick;
-  private renderIcon;
-  render(): any;
+    hostElement: HTMLB2bCheckboxElement;
+    /** The checkbox label. This attribute is required. */
+    label?: string;
+    /** Adds an asterisk at the end of the label to signify that the field is required. */
+    required: boolean;
+    /** Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked. */
+    checked: boolean;
+    /** Whether or not the checkbox is disabled. The default value is false. */
+    disabled: boolean;
+    /** If used in combination with other checkboxes, this state indicates that some checkboxes are checked, but not all. Per default, it is false. */
+    indeterminate: boolean;
+    /** The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles. */
+    error?: string;
+    /** The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint. */
+    hint?: string;
+    /** The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name. */
+    name?: string;
+    /** The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group */
+    value?: any;
+    /** Whether or not the checkbox is rendered with error styles. Defaults to false. */
+    invalid?: boolean;
+    /** If true, renders a standalone inline checkbox with no label and hint/error. */
+    standalone: boolean;
+    /** @internal whether the parent checkbox-group is disabled. */
+    groupDisabled: boolean;
+    /** Emits whenever the checkbox receives focus. */
+    b2bFocus: EventEmitter<FocusEvent>;
+    /** Emits whenever the checkbox loses focus. */
+    b2bBlur: EventEmitter<FocusEvent>;
+    /** Emits the checkbox value when it's checked status changes. */
+    b2bChange: EventEmitter<CheckboxEventDetail>;
+    connectedCallback(): void;
+    private handleFormData;
+    private emitDetail;
+    private onFocus;
+    private onBlur;
+    private onClick;
+    private renderIcon;
+    render(): any;
 }

package/dist/types/components/checkbox-group/checkbox-group.d.ts

@@ -1,30 +1,30 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { CheckboxEventDetail } from '../../utils/interfaces/form.interface';
 export declare class CheckboxGroupComponent {
-  host: HTMLB2bCheckboxGroupElement;
-  /** The label for the checkbox group. This is optional. */
-  label: string;
-  /** Adds an asterisk at the end of the label to signify that the field is required. */
-  required: boolean;
-  /** Whether or not the checkbox group as a whole is disabled. Default state is false. */
-  disabled: boolean;
-  /** Whether or not the checkbox group as a whole is invalid. Set to true to display a group error. */
-  invalid: boolean;
-  /** The alignment of the checkbox group. Per default it is vertical */
-  alignment: 'vertical' | 'horizontal';
-  /** The checkbox group hint text. */
-  hint?: string;
-  /** The checkbox group error message. Is displayed when invalid is set to true. */
-  error?: string;
-  /** Emits whenever a checkbox within the group is checked or unchecked. */
-  b2bGroupChange: EventEmitter<CheckboxEventDetail>;
-  handleCheckboxChange(ev: CustomEvent<CheckboxEventDetail>): void;
-  protected disabledChanged(): void;
-  protected invalidChanged(): void;
-  private getChildNodes;
-  private toggleAllDisabled;
-  private toggleAllError;
-  private removeChildText;
-  componentDidLoad(): void;
-  render(): any;
+    host: HTMLB2bCheckboxGroupElement;
+    /** The label for the checkbox group. This is optional. */
+    label: string;
+    /** Adds an asterisk at the end of the label to signify that the field is required. */
+    required: boolean;
+    /** Whether or not the checkbox group as a whole is disabled. Default state is false. */
+    disabled: boolean;
+    /** Whether or not the checkbox group as a whole is invalid. Set to true to display a group error. */
+    invalid: boolean;
+    /** The alignment of the checkbox group. Per default it is vertical */
+    alignment: 'vertical' | 'horizontal';
+    /** The checkbox group hint text. */
+    hint?: string;
+    /** The checkbox group error message. Is displayed when invalid is set to true. */
+    error?: string;
+    /** Emits whenever a checkbox within the group is checked or unchecked. */
+    b2bGroupChange: EventEmitter<CheckboxEventDetail>;
+    handleCheckboxChange(ev: CustomEvent<CheckboxEventDetail>): void;
+    protected disabledChanged(): void;
+    protected invalidChanged(): void;
+    private getChildNodes;
+    private toggleAllDisabled;
+    private toggleAllError;
+    private removeChildText;
+    componentDidLoad(): void;
+    render(): any;
 }

package/dist/types/components/chip/chip.d.ts

@@ -1,19 +1,19 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ChipComponentEventDetail } from '../../utils/interfaces/form.interface';
 export declare class B2bChipComponent {
-  host: HTMLB2bChipComponentElement;
-  /** The text content of the chip. It is required. */
-  label: string;
-  /** Whether the chip is disabled. */
-  disabled: boolean;
-  /** Whether or not the chip component has a close button. Per default it is true. */
-  hasCloseButton: boolean;
-  /** It is only used when the chip component participates in a group */
-  value?: any;
-  /** This event will be triggered when the chip element is closed */
-  b2bClose: EventEmitter<ChipComponentEventDetail>;
-  private onClick;
-  private onKeyDown;
-  private clearIcon;
-  render(): any;
+    host: HTMLB2bChipComponentElement;
+    /** The text content of the chip. It is required. */
+    label: string;
+    /** Whether the chip is disabled. */
+    disabled: boolean;
+    /** Whether or not the chip component has a close button. Per default it is true. */
+    hasCloseButton: boolean;
+    /** It is only used when the chip component participates in a group */
+    value?: any;
+    /** This event will be triggered when the chip element is closed */
+    b2bClose: EventEmitter<ChipComponentEventDetail>;
+    private onClick;
+    private onKeyDown;
+    private clearIcon;
+    render(): any;
 }

package/dist/types/components/dropdown/dropdown.d.ts

@@ -1,32 +1,32 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DropdownComponent {
-  hostElement: HTMLB2bDropdownElement;
-  /** The dropdown label. */
-  label: string;
-  /** Adds an asterisk at the end of the label to signify that the field is required. */
-  required: boolean;
-  /** The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility. */
-  name?: string;
-  /** Whether the select as a whole is disabled. Per default it is false. */
-  disabled: boolean;
-  /** Whether the select is currently invalid. Per default it is false. */
-  invalid: boolean;
-  /** An optional hint text for the dropdown. */
-  hint?: string;
-  /** An optional error message for the dropdown. This will only appear if invalid is set to true. */
-  error?: string;
-  /** Emits the option whenever a new option is chosen. */
-  b2bChange: EventEmitter<string>;
-  /** Emits whenever the dropdown receives focus. */
-  b2bFocus: EventEmitter<FocusEvent>;
-  /** Emits whenever the dropdown loses focus. */
-  b2bBlur: EventEmitter<FocusEvent>;
-  private onSelect;
-  private onFocus;
-  private onBlur;
-  private getSelectElement;
-  connectedCallback(): void;
-  private handleFormData;
-  componentDidRender(): void;
-  render(): any;
+    hostElement: HTMLB2bDropdownElement;
+    /** The dropdown label. */
+    label: string;
+    /** Adds an asterisk at the end of the label to signify that the field is required. */
+    required: boolean;
+    /** The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility. */
+    name?: string;
+    /** Whether the select as a whole is disabled. Per default it is false. */
+    disabled: boolean;
+    /** Whether the select is currently invalid. Per default it is false. */
+    invalid: boolean;
+    /** An optional hint text for the dropdown. */
+    hint?: string;
+    /** An optional error message for the dropdown. This will only appear if invalid is set to true. */
+    error?: string;
+    /** Emits the option whenever a new option is chosen. */
+    b2bChange: EventEmitter<string>;
+    /** Emits whenever the dropdown receives focus. */
+    b2bFocus: EventEmitter<FocusEvent>;
+    /** Emits whenever the dropdown loses focus. */
+    b2bBlur: EventEmitter<FocusEvent>;
+    private onSelect;
+    private onFocus;
+    private onBlur;
+    private getSelectElement;
+    connectedCallback(): void;
+    private handleFormData;
+    componentDidRender(): void;
+    render(): any;
 }

package/dist/types/components/flyout-menu/flyout-menu-option.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { OptionSelectedEventDetail } from '../../utils/interfaces/form.interface';
+export declare class FlyoutMenuOptionComponent {
+    /** The option name. */
+    option: string;
+    /** Whether the option is disabled. Per default it is false. If disabled is true, the option cannot be selected. */
+    disabled: boolean;
+    /** Whether the option has a separator at the bottom. Per default it is false. */
+    separator: boolean;
+    /** Emits the option as a string whenever an option is selected. */
+    b2bOptionSelected: EventEmitter<OptionSelectedEventDetail>;
+    handleKeyDown(event: KeyboardEvent): void;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/flyout-menu/flyout-menu.d.ts

@@ -0,0 +1,25 @@
+export declare class FlyoutMenuComponent {
+    hostElement: HTMLB2bFlyoutMenuElement;
+    /** @internal if the menu is opened. */
+    opened: boolean;
+    private triggerEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getCurrentOption;
+    private getAllOptions;
+    private setCurrentOption;
+    private resetAllOptions;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleSelected(): void;
+    handleClickOutside(event: any): void;
+    private onEscapePress;
+    private openMenu;
+    private navigateMenu;
+    private closeMenu;
+    /** We need to keep the menu open when the focus changes from the trigger
+     * to the options. We only close the menu if the next element receiving focus
+     * (relatedTarget) is not a menu option.
+     */
+    private blurMenu;
+    render(): any;
+}

package/dist/types/components/flyout-menu/flyout-menu.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const Separator: Story;
+/** Workaround because testing library (for interactions) does not support web components / shadow DOM for now.
+ * See also https://github.com/storybookjs/testing-library/issues/24
+ * TBD: migrate to @storybook/test dep
+ */
+export declare const AllStates: Story;

package/dist/types/components/grid/column.d.ts

@@ -1,9 +1,9 @@
 export declare class B2bGridColumnComponent {
-  hostElement: HTMLB2bGridColElement;
-  /** How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row. */
-  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-  /** The alignment of text placed inside of a column. Note that this will apply to all children. */
-  textAlign: 'left' | 'center' | 'right';
-  private calculateGrowDimension;
-  render(): any;
+    hostElement: HTMLB2bGridColElement;
+    /** How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row. */
+    span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** The alignment of text placed inside of a column. Note that this will apply to all children. */
+    textAlign: 'left' | 'center' | 'right';
+    private calculateGrowDimension;
+    render(): any;
 }

package/dist/types/components/grid/grid.d.ts

@@ -1,6 +1,6 @@
 export declare class B2bGridComponent {
-  hostElement: HTMLB2bGridElement;
-  /** The inner padding of the grid container measured in px. */
-  margin: number;
-  render(): any;
+    hostElement: HTMLB2bGridElement;
+    /** The inner padding of the grid container measured in px. */
+    margin: number;
+    render(): any;
 }

package/dist/types/components/grid/row.d.ts

@@ -1,12 +1,12 @@
 export declare class B2bGridRowComponent {
-  hostElement: HTMLB2bGridRowElement;
-  /** The spacing in between individual columns in px. The higher the gap, the smaller the columns will be. */
-  columnGap: number;
-  /** The spacing between individual rows in px. */
-  rowGap: number;
-  /** Vertical alignment of columns. This requires the row to have a defined height. */
-  alignItems: 'stretch' | 'flex-start' | 'center' | 'flex-end';
-  /** Horizontal alignment of columns. */
-  justify: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
-  render(): any;
+    hostElement: HTMLB2bGridRowElement;
+    /** The spacing in between individual columns in px. The higher the gap, the smaller the columns will be. */
+    columnGap: number;
+    /** The spacing between individual rows in px. */
+    rowGap: number;
+    /** Vertical alignment of columns. This requires the row to have a defined height. */
+    alignItems: 'stretch' | 'flex-start' | 'center' | 'flex-end';
+    /** Horizontal alignment of columns. */
+    justify: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+    render(): any;
 }

package/dist/types/components/headline/headline.d.ts

@@ -3,11 +3,11 @@
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46
  */
 export declare class HeadlineComponent {
-  /** 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>` */
-  size: '400' | '200' | '100';
-  /** The alignment of the headline. */
-  align: 'left' | 'right' | 'center';
-  /** Whether the headline should have a margin. Per default, margins are enabled. */
-  noMargin: boolean;
-  render(): any;
+    /** 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>` */
+    size: '400' | '200' | '100';
+    /** The alignment of the headline. */
+    align: 'left' | 'right' | 'center';
+    /** Whether the headline should have a margin. Per default, margins are enabled. */
+    noMargin: boolean;
+    render(): any;
 }

package/dist/types/components/icon/icon.d.ts

@@ -1,16 +1,19 @@
 import { IconName } from './types';
 export declare class B2bIcon {
-  /** The name of the icon */
-  icon: IconName;
-  /** The color of the icon */
-  color: 'primary' | 'secondary' | 'inverse' | 'inherit';
-  /** The size of the icon */
-  size: '50' | '100' | '200';
-  /** Will display a pointer cursor when hovering the icon */
-  clickable: boolean;
-  private pathData;
-  connectedCallback(): void;
-  private isIconSupported;
-  render(): any;
-  private loadIconPathData;
+    /** The name of the icon */
+    icon: IconName;
+    /** The color of the icon */
+    color: 'primary' | 'secondary' | 'inverse' | 'inherit';
+    /** @deprecated The size of the icon. In the future, only 50 and 100 will be support through new components. */
+    size: '50' | '100' | '200';
+    /** Will display a pointer cursor when hovering the icon */
+    clickable: boolean;
+    /** Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. */
+    focusable: boolean;
+    private pathData;
+    connectedCallback(): void;
+    private isIconSupported;
+    private warnDeprecate;
+    render(): any;
+    private loadIconPathData;
 }

package/dist/types/components/icon/icon.stories.d.ts

@@ -1,12 +1,11 @@
 import { Meta, Story } from '@storybook/web-components';
-import './icon.stories.scss';
+import './../../global/icon.stories.scss';
 export declare const story010Primary: any;
 export declare const story020Secondary: any;
 export declare const story030Inverse: any;
 export declare const story035Inherit: Story;
 export declare const story040Size50: any;
 export declare const story050Size100: any;
-export declare const story060Size200: any;
 export declare const story070AllIcons: Story;
 declare const _default: Meta;
 export default _default;

package/dist/types/components/icon/types.d.ts

@@ -1,2 +1,2 @@
-export declare const iconTypes: readonly ["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-left", "b2b_icon-trend-right", "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-hint", "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", "b2b_logo-carrier-dhl", "b2b_logo-carrier-gls", "b2b_logo-carrier-hermes", "b2b_logo-carrier-ups"];
+export declare const iconTypes: readonly ["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-50", "b2b_icon-arrow-down", "b2b_icon-arrow-graph", "b2b_icon-arrow-left-50", "b2b_icon-arrow-left", "b2b_icon-arrow-right-50", "b2b_icon-arrow-right", "b2b_icon-arrow-up-50", "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-50", "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-50", "b2b_icon-check-bold", "b2b_icon-check", "b2b_icon-chicken", "b2b_icon-city", "b2b_icon-clear", "b2b_icon-close-50", "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-50", "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-50", "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-50", "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-50", "b2b_icon-info-hint-50", "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-50", "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-50", "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-50", "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-50", "b2b_icon-plus", "b2b_icon-price-alert", "b2b_icon-price-tag", "b2b_icon-print", "b2b_icon-puzzle", "b2b_icon-qr-code", "b2b_icon-question-50", "b2b_icon-question-hint-50", "b2b_icon-question-hint", "b2b_icon-question", "b2b_icon-rating-empty-50", "b2b_icon-rating-empty", "b2b_icon-rating-filled-50", "b2b_icon-rating-filled", "b2b_icon-rating-half-50", "b2b_icon-rating-half", "b2b_icon-rating-order", "b2b_icon-rating-payment", "b2b_icon-refresh-50", "b2b_icon-remote-work", "b2b_icon-repair", "b2b_icon-reply-50", "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-50", "b2b_icon-smiley-positive", "b2b_icon-sms-info", "b2b_icon-sneaker", "b2b_icon-sort-50", "b2b_icon-sort-ascending-50", "b2b_icon-sort-ascending", "b2b_icon-sort-descending-50", "b2b_icon-sort-descending", "b2b_icon-sort", "b2b_icon-soy", "b2b_icon-spelt", "b2b_icon-stationary", "b2b_icon-studies", "b2b_icon-success-hint-50", "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-50", "b2b_icon-trend-down", "b2b_icon-trend-left", "b2b_icon-trend-right", "b2b_icon-trend-up-50", "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-hint-50", "b2b_icon-warning-hint", "b2b_icon-warning", "b2b_icon-warranty", "b2b_icon-washing-machine", "b2b_icon-whatsapp", "b2b_icon-wheat", "b2b_icon-wifi", "b2b_icon-wishlist-50", "b2b_icon-wishlist-active-50", "b2b_icon-wishlist-active", "b2b_icon-wishlist", "b2b_icon-work-life", "b2b_icon-workshop", "b2b_icon-zoom-in", "b2b_icon-zoom-out", "b2b_logo-carrier-dhl", "b2b_logo-carrier-gls", "b2b_logo-carrier-hermes", "b2b_logo-carrier-ups"];
 export type IconName = typeof iconTypes[number];

package/dist/types/components/icon-100/icon-100.d.ts

@@ -0,0 +1,19 @@
+import { IconName } from './types';
+export declare class B2bIcon {
+    /** The name of the icon */
+    icon: IconName;
+    /** The color of the icon */
+    color: 'primary' | 'secondary' | 'inverse' | 'inherit';
+    /** The size of the icon in pixel. Minimum is 24, maximum is 96px. */
+    size: number;
+    /** Will display a pointer cursor when hovering the icon */
+    clickable: boolean;
+    /** Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. */
+    focusable: boolean;
+    private pathData;
+    connectedCallback(): void;
+    private isIconSupported;
+    private isIconRightSize;
+    render(): any;
+    private loadIconPathData;
+}

package/dist/types/components/icon-100/icon-100.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './../../global/icon.stories.scss';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Inverse: Story;
+export declare const SizeGreaterThan24: Story;
+export declare const Inherit: Story;
+export declare const AllIcons: Story;

package/dist/types/components/icon-100/types.d.ts

@@ -0,0 +1,2 @@
+export declare const iconTypes: readonly ["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-left", "b2b_icon-trend-right", "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-hint", "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", "b2b_logo-carrier-dhl", "b2b_logo-carrier-gls", "b2b_logo-carrier-hermes", "b2b_logo-carrier-ups"];
+export type IconName = typeof iconTypes[number];