@otto-de/b2b-core-components 1.10.1 → 1.11.1

package/dist/types/components.d.ts

@@ -5,19 +5,21 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
-import { CheckboxEventDetail, ChipComponentEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
+import { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, EscapePressed, NextMonth, PageChangeEventDetail, PreviousMonth, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
+import { CalendarEventDetail, CheckboxEventDetail, ChipComponentEventDetail, DateSelectedEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 import { IconName } from "./components/icon/types";
 import { IconName as IconName1 } from "./components/icon-100/types";
+import { IconName as IconName2 } from "./components/icon-50/types";
 import { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
 import { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
 import { CheckboxEventDetail as CheckboxEventDetail1 } from "./components";
 import { TableAccordionSelectedEventDetail } from "./utils/interfaces/content.interface";
 import { WizardStatus, WizardSteps } from "./utils/types/wizard.types";
-export { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
-export { CheckboxEventDetail, ChipComponentEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
+export { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, EscapePressed, NextMonth, PageChangeEventDetail, PreviousMonth, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
+export { CalendarEventDetail, CheckboxEventDetail, ChipComponentEventDetail, DateSelectedEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 export { IconName } from "./components/icon/types";
 export { IconName as IconName1 } from "./components/icon-100/types";
+export { IconName as IconName2 } from "./components/icon-50/types";
 export { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
 export { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
 export { CheckboxEventDetail as CheckboxEventDetail1 } from "./components";
@@ -127,6 +129,62 @@ export namespace Components {
          */
         "width": 'fit-content' | 'fit-container' | 'custom';
     }
+    interface B2bCalendar {
+        /**
+          * Whether the dates after the current date are disabled. By default, this is false.
+         */
+        "disableFutureDates": boolean;
+        /**
+          * Whether the previous dates from the current date are disabled. By default, this is true.
+         */
+        "disablePastDates": boolean;
+        /**
+          * Whether the dates that fall on the weekend are disabled. By default, this is false.
+         */
+        "disableWeekends": boolean;
+        /**
+          * Label for the calendar component.
+         */
+        "label": string;
+    }
+    interface B2bCalendarDays {
+        /**
+          * Internal whether the dates after the current date are disabled. By default, this is false.
+         */
+        "disableFutureDates": boolean;
+        /**
+          * Internal whether the dates previous to the current date are disabled. By default, this is true.
+         */
+        "disablePastDates": boolean;
+        /**
+          * Internal whether the weekends are disabled. By default, this is false.
+         */
+        "disableWeekends": boolean;
+        /**
+          * Internal selected day
+         */
+        "selectedDay": number;
+        /**
+          * Internal selected month
+         */
+        "selectedMonth": number;
+        /**
+          * Internal selected year
+         */
+        "selectedYear": number;
+    }
+    interface B2bCalendarDaysHeader {
+    }
+    interface B2bCalendarHeader {
+        /**
+          * Internal selected month
+         */
+        "selectedMonth": number;
+        /**
+          * Internal selected year
+         */
+        "selectedYear": number;
+    }
     interface B2bCard {
         /**
           * Disables the card. Per default, it is false
@@ -231,6 +289,14 @@ export namespace Components {
           * The text content of the chip. It is required.
          */
         "label": string;
+        /**
+          * The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set.
+         */
+        "labelStyle"?: 'bold' | 'italic' | 'underline' | 'strikethrough';
+        /**
+          * The type of chip to represent states like success, info, warn and error. Uses default style if not set.
+         */
+        "type"?: 'success' | 'info' | 'warn' | 'error';
         /**
           * It is only used when the chip component participates in a group
          */
@@ -395,6 +461,24 @@ export namespace Components {
          */
         "size": number;
     }
+    interface B2bIcon50 {
+        /**
+          * Will display a pointer cursor when hovering the icon
+         */
+        "clickable": boolean;
+        /**
+          * The color of the icon
+         */
+        "color": 'primary' | 'secondary' | 'inverse' | 'inherit';
+        /**
+          * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu.
+         */
+        "focusable": boolean;
+        /**
+          * The name of the icon
+         */
+        "icon": IconName2;
+    }
     /**
      * Input component
      * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
@@ -1129,6 +1213,18 @@ export interface B2bBreadcrumbItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bBreadcrumbItemElement;
 }
+export interface B2bCalendarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bCalendarElement;
+}
+export interface B2bCalendarDaysCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bCalendarDaysElement;
+}
+export interface B2bCalendarHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bCalendarHeaderElement;
+}
 export interface B2bCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bCardElement;
@@ -1301,6 +1397,65 @@ declare global {
         prototype: HTMLB2bButtonElement;
         new (): HTMLB2bButtonElement;
     };
+    interface HTMLB2bCalendarElementEventMap {
+        "b2b-selected": CalendarEventDetail;
+    }
+    interface HTMLB2bCalendarElement extends Components.B2bCalendar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bCalendarElementEventMap>(type: K, listener: (this: HTMLB2bCalendarElement, ev: B2bCalendarCustomEvent<HTMLB2bCalendarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLB2bCalendarElementEventMap>(type: K, listener: (this: HTMLB2bCalendarElement, ev: B2bCalendarCustomEvent<HTMLB2bCalendarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLB2bCalendarElement: {
+        prototype: HTMLB2bCalendarElement;
+        new (): HTMLB2bCalendarElement;
+    };
+    interface HTMLB2bCalendarDaysElementEventMap {
+        "b2b-calendar-escape": EscapePressed;
+        "b2b-date-selected": DateSelectedEventDetail;
+    }
+    interface HTMLB2bCalendarDaysElement extends Components.B2bCalendarDays, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bCalendarDaysElementEventMap>(type: K, listener: (this: HTMLB2bCalendarDaysElement, ev: B2bCalendarDaysCustomEvent<HTMLB2bCalendarDaysElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLB2bCalendarDaysElementEventMap>(type: K, listener: (this: HTMLB2bCalendarDaysElement, ev: B2bCalendarDaysCustomEvent<HTMLB2bCalendarDaysElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLB2bCalendarDaysElement: {
+        prototype: HTMLB2bCalendarDaysElement;
+        new (): HTMLB2bCalendarDaysElement;
+    };
+    interface HTMLB2bCalendarDaysHeaderElement extends Components.B2bCalendarDaysHeader, HTMLStencilElement {
+    }
+    var HTMLB2bCalendarDaysHeaderElement: {
+        prototype: HTMLB2bCalendarDaysHeaderElement;
+        new (): HTMLB2bCalendarDaysHeaderElement;
+    };
+    interface HTMLB2bCalendarHeaderElementEventMap {
+        "b2b-calendar-previous-month": PreviousMonth;
+        "b2b-calendar-next-month": NextMonth;
+    }
+    interface HTMLB2bCalendarHeaderElement extends Components.B2bCalendarHeader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bCalendarHeaderElementEventMap>(type: K, listener: (this: HTMLB2bCalendarHeaderElement, ev: B2bCalendarHeaderCustomEvent<HTMLB2bCalendarHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLB2bCalendarHeaderElementEventMap>(type: K, listener: (this: HTMLB2bCalendarHeaderElement, ev: B2bCalendarHeaderCustomEvent<HTMLB2bCalendarHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLB2bCalendarHeaderElement: {
+        prototype: HTMLB2bCalendarHeaderElement;
+        new (): HTMLB2bCalendarHeaderElement;
+    };
     interface HTMLB2bCardElementEventMap {
         "b2b-selected": void;
     }
@@ -1453,6 +1608,12 @@ declare global {
         prototype: HTMLB2bIcon100Element;
         new (): HTMLB2bIcon100Element;
     };
+    interface HTMLB2bIcon50Element extends Components.B2bIcon50, HTMLStencilElement {
+    }
+    var HTMLB2bIcon50Element: {
+        prototype: HTMLB2bIcon50Element;
+        new (): HTMLB2bIcon50Element;
+    };
     interface HTMLB2bInputElementEventMap {
         "b2b-focus": FocusEvent;
         "b2b-blur": FocusEvent;
@@ -1944,6 +2105,10 @@ declare global {
         "b2b-breadcrumb": HTMLB2bBreadcrumbElement;
         "b2b-breadcrumb-item": HTMLB2bBreadcrumbItemElement;
         "b2b-button": HTMLB2bButtonElement;
+        "b2b-calendar": HTMLB2bCalendarElement;
+        "b2b-calendar-days": HTMLB2bCalendarDaysElement;
+        "b2b-calendar-days-header": HTMLB2bCalendarDaysHeaderElement;
+        "b2b-calendar-header": HTMLB2bCalendarHeaderElement;
         "b2b-card": HTMLB2bCardElement;
         "b2b-checkbox": HTMLB2bCheckboxElement;
         "b2b-checkbox-group": HTMLB2bCheckboxGroupElement;
@@ -1957,6 +2122,7 @@ declare global {
         "b2b-headline": HTMLB2bHeadlineElement;
         "b2b-icon": HTMLB2bIconElement;
         "b2b-icon-100": HTMLB2bIcon100Element;
+        "b2b-icon-50": HTMLB2bIcon50Element;
         "b2b-input": HTMLB2bInputElement;
         "b2b-input-group": HTMLB2bInputGroupElement;
         "b2b-input-label": HTMLB2bInputLabelElement;
@@ -2103,6 +2269,82 @@ declare namespace LocalJSX {
          */
         "width"?: 'fit-content' | 'fit-container' | 'custom';
     }
+    interface B2bCalendar {
+        /**
+          * Whether the dates after the current date are disabled. By default, this is false.
+         */
+        "disableFutureDates"?: boolean;
+        /**
+          * Whether the previous dates from the current date are disabled. By default, this is true.
+         */
+        "disablePastDates"?: boolean;
+        /**
+          * Whether the dates that fall on the weekend are disabled. By default, this is false.
+         */
+        "disableWeekends"?: boolean;
+        /**
+          * Label for the calendar component.
+         */
+        "label"?: string;
+        /**
+          * Emits the selected date as Date type.
+         */
+        "onB2b-selected"?: (event: B2bCalendarCustomEvent<CalendarEventDetail>) => void;
+    }
+    interface B2bCalendarDays {
+        /**
+          * Internal whether the dates after the current date are disabled. By default, this is false.
+         */
+        "disableFutureDates"?: boolean;
+        /**
+          * Internal whether the dates previous to the current date are disabled. By default, this is true.
+         */
+        "disablePastDates"?: boolean;
+        /**
+          * Internal whether the weekends are disabled. By default, this is false.
+         */
+        "disableWeekends"?: boolean;
+        /**
+          * Event emitted on escape press*
+         */
+        "onB2b-calendar-escape"?: (event: B2bCalendarDaysCustomEvent<EscapePressed>) => void;
+        /**
+          * Event emitted on selecting date*
+         */
+        "onB2b-date-selected"?: (event: B2bCalendarDaysCustomEvent<DateSelectedEventDetail>) => void;
+        /**
+          * Internal selected day
+         */
+        "selectedDay"?: number;
+        /**
+          * Internal selected month
+         */
+        "selectedMonth"?: number;
+        /**
+          * Internal selected year
+         */
+        "selectedYear"?: number;
+    }
+    interface B2bCalendarDaysHeader {
+    }
+    interface B2bCalendarHeader {
+        /**
+          * Event emitted for next month click*
+         */
+        "onB2b-calendar-next-month"?: (event: B2bCalendarHeaderCustomEvent<NextMonth>) => void;
+        /**
+          * Event emitted for previous month click*
+         */
+        "onB2b-calendar-previous-month"?: (event: B2bCalendarHeaderCustomEvent<PreviousMonth>) => void;
+        /**
+          * Internal selected month
+         */
+        "selectedMonth"?: number;
+        /**
+          * Internal selected year
+         */
+        "selectedYear"?: number;
+    }
     interface B2bCard {
         /**
           * Disables the card. Per default, it is false
@@ -2226,10 +2468,18 @@ declare namespace LocalJSX {
           * The text content of the chip. It is required.
          */
         "label": string;
+        /**
+          * The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set.
+         */
+        "labelStyle"?: 'bold' | 'italic' | 'underline' | 'strikethrough';
         /**
           * This event will be triggered when the chip element is closed
          */
         "onB2b-close"?: (event: B2bChipComponentCustomEvent<ChipComponentEventDetail>) => void;
+        /**
+          * The type of chip to represent states like success, info, warn and error. Uses default style if not set.
+         */
+        "type"?: 'success' | 'info' | 'warn' | 'error';
         /**
           * It is only used when the chip component participates in a group
          */
@@ -2409,6 +2659,24 @@ declare namespace LocalJSX {
          */
         "size"?: number;
     }
+    interface B2bIcon50 {
+        /**
+          * Will display a pointer cursor when hovering the icon
+         */
+        "clickable"?: boolean;
+        /**
+          * The color of the icon
+         */
+        "color"?: 'primary' | 'secondary' | 'inverse' | 'inherit';
+        /**
+          * Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu.
+         */
+        "focusable"?: boolean;
+        /**
+          * The name of the icon
+         */
+        "icon"?: IconName2;
+    }
     /**
      * Input component
      * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
@@ -3230,6 +3498,10 @@ declare namespace LocalJSX {
         "b2b-breadcrumb": B2bBreadcrumb;
         "b2b-breadcrumb-item": B2bBreadcrumbItem;
         "b2b-button": B2bButton;
+        "b2b-calendar": B2bCalendar;
+        "b2b-calendar-days": B2bCalendarDays;
+        "b2b-calendar-days-header": B2bCalendarDaysHeader;
+        "b2b-calendar-header": B2bCalendarHeader;
         "b2b-card": B2bCard;
         "b2b-checkbox": B2bCheckbox;
         "b2b-checkbox-group": B2bCheckboxGroup;
@@ -3243,6 +3515,7 @@ declare namespace LocalJSX {
         "b2b-headline": B2bHeadline;
         "b2b-icon": B2bIcon;
         "b2b-icon-100": B2bIcon100;
+        "b2b-icon-50": B2bIcon50;
         "b2b-input": B2bInput;
         "b2b-input-group": B2bInputGroup;
         "b2b-input-label": B2bInputLabel;
@@ -3291,6 +3564,10 @@ declare module "@stencil/core" {
             "b2b-breadcrumb": LocalJSX.B2bBreadcrumb & JSXBase.HTMLAttributes<HTMLB2bBreadcrumbElement>;
             "b2b-breadcrumb-item": LocalJSX.B2bBreadcrumbItem & JSXBase.HTMLAttributes<HTMLB2bBreadcrumbItemElement>;
             "b2b-button": LocalJSX.B2bButton & JSXBase.HTMLAttributes<HTMLB2bButtonElement>;
+            "b2b-calendar": LocalJSX.B2bCalendar & JSXBase.HTMLAttributes<HTMLB2bCalendarElement>;
+            "b2b-calendar-days": LocalJSX.B2bCalendarDays & JSXBase.HTMLAttributes<HTMLB2bCalendarDaysElement>;
+            "b2b-calendar-days-header": LocalJSX.B2bCalendarDaysHeader & JSXBase.HTMLAttributes<HTMLB2bCalendarDaysHeaderElement>;
+            "b2b-calendar-header": LocalJSX.B2bCalendarHeader & JSXBase.HTMLAttributes<HTMLB2bCalendarHeaderElement>;
             "b2b-card": LocalJSX.B2bCard & JSXBase.HTMLAttributes<HTMLB2bCardElement>;
             "b2b-checkbox": LocalJSX.B2bCheckbox & JSXBase.HTMLAttributes<HTMLB2bCheckboxElement>;
             "b2b-checkbox-group": LocalJSX.B2bCheckboxGroup & JSXBase.HTMLAttributes<HTMLB2bCheckboxGroupElement>;
@@ -3308,6 +3585,7 @@ declare module "@stencil/core" {
             "b2b-headline": LocalJSX.B2bHeadline & JSXBase.HTMLAttributes<HTMLB2bHeadlineElement>;
             "b2b-icon": LocalJSX.B2bIcon & JSXBase.HTMLAttributes<HTMLB2bIconElement>;
             "b2b-icon-100": LocalJSX.B2bIcon100 & JSXBase.HTMLAttributes<HTMLB2bIcon100Element>;
+            "b2b-icon-50": LocalJSX.B2bIcon50 & JSXBase.HTMLAttributes<HTMLB2bIcon50Element>;
             /**
              * Input component
              * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53

package/dist/types/utils/interfaces/form.interface.d.ts

@@ -20,6 +20,10 @@ export interface OptionSelectedEventDetail<T = any> {
   selectedOption: string;
 }
 
+export interface DateSelectedEventDetail {
+  selectedDate: Date;
+}
+
 export interface MultiSelectOptionEventDetail {
   selected: boolean;
   selectedOption: string;
@@ -41,3 +45,6 @@ export interface ToggleButtonEventDetail<T = any> {
 export interface ChipComponentEventDetail<T = any> {
   value: T;
 }
+export interface CalendarEventDetail<T = any> {
+  selectedDate: Date;
+}

package/dist/types/utils/interfaces/interaction.interface.d.ts

@@ -10,7 +10,9 @@ export interface TabChangeEventDetail {
   previousTab: HTMLB2bTabElement;
   nextTab: HTMLB2bTabElement;
 }
-
+export interface EscapePressed<T = any> {}
+export interface PreviousMonth<T = any> {}
+export interface NextMonth<T = any> {}
 export interface ColumnSortChangeEventDetail {
   sortedColumn: string;
   sortDirection: string;

package/dist/types/utils/resources.d.ts

@@ -1 +1 @@
-export declare const ICON_PATH = "https://portal.otto.market/design-system/dist/b2b-core-components";
+export declare const ICON_PATH = "https://b2b-design-system.otto.market/dist/b2b-core-components";