@otto-de/b2b-core-components 1.14.1 → 1.15.1

package/dist/collection/components/table/table-rowgroup/table-rowgroup.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/table/table.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/textarea/textarea.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/toggle-button/toggle-button.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -240,7 +240,7 @@
   color: var(--b2b-color-black-100);
 }
 :host .b2b-toggle-chip__label:hover {
-  background-color: var(--b2b-color-table-hover);
+  background-color: var(--b2b-color-hover);
   color: var(--b2b-color-black-100);
   cursor: pointer;
   transition: all 0.3s ease;

package/dist/collection/components/toggle-group/toggle-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/toggle-switch/toggle-switch.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/tooltip/tooltip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -1,94 +1,106 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
-import { getArgTypes, hideAllControls } from "../../docs/config/utils";
 import { useArgs } from "@storybook/preview-api";
+import { hideAllControls } from "../../docs/config/utils";
 import dedent from "ts-dedent";
-const tooltipArgs = getArgTypes('b2b-tooltip');
-const Template = ({ position, trigger, content, triggerMarkup, buttons, opened, }) => {
-    const markup = triggerMarkup ? triggerMarkup : 'trigger.';
-    const filler = position === 'top' ? html `<div style="height: 125px;"></div>` : null;
-    const [_, updateArgs] = useArgs();
-    const showToolTip = async () => {
-        updateArgs({ opened: true });
-    };
-    const hideToolTip = async () => {
-        updateArgs({ opened: false });
-    };
-    const buttonMarkup = buttons
-        ? html `<b2b-button @click=${showToolTip} variant="primary"
-          >Show Tooltip</b2b-button
-        ><b2b-button @click=${hideToolTip}>Hide Tooltip</b2b-button>`
-        : null;
-    return html `${filler}<b2b-paragraph>
-      I am some text with a tooltip
-      <b2b-tooltip
-        position="${position}"
-        trigger="${trigger}"
-        content="${content}"
-        opened="${opened}"
-        data-testid="trigger"
-        >${markup}</b2b-tooltip
-      >
-    </b2b-paragraph>
-    ${buttonMarkup}`;
-};
-const defaultArgs = {
-    content: 'I am a tooltip',
-    trigger: 'hover',
-    position: 'top',
-    opened: false,
-};
-export const story010Hover = Template.bind({});
-story010Hover.args = Object.assign({}, defaultArgs);
-story010Hover.storyName = 'Default Hover Tooltip';
-export const story020Focus = Template.bind({});
-const focusTriggerMarkup = html `<b2b-button>button to focus</b2b-button>`;
-story020Focus.args = Object.assign(Object.assign({}, defaultArgs), { trigger: 'focus', triggerMarkup: focusTriggerMarkup });
-story020Focus.storyName = 'Focus Tooltip';
-export const story030Custom = Template.bind({});
-const buttons = true;
-story030Custom.args = Object.assign(Object.assign({}, defaultArgs), { buttons: buttons, trigger: 'custom', position: 'right' });
-story030Custom.storyName = 'Custom Trigger Tooltip';
-// for testing purposes
-export const story040Top = Template.bind({});
-story040Top.args = Object.assign(Object.assign({}, defaultArgs), { opened: true });
-story040Top.storyName = 'Top Tooltip';
-export const story050Bottom = Template.bind({});
-story050Bottom.args = Object.assign(Object.assign({}, defaultArgs), { position: 'bottom', opened: true });
-story050Bottom.storyName = 'Bottom Tooltip';
-export const story060Left = Template.bind({});
-story060Left.args = Object.assign(Object.assign({}, defaultArgs), { position: 'left', opened: true });
-story060Left.storyName = 'Left Tooltip';
-export const story070Right = Template.bind({});
-story070Right.args = Object.assign(Object.assign({}, defaultArgs), { position: 'right', opened: true });
-story070Right.storyName = 'Right Tooltip';
-export const story080Right = Template.bind({});
-story080Right.args = Object.assign(Object.assign({}, defaultArgs), { position: 'top', opened: true, content: 'Topping halvah cake sugar plum marzipan jelly marshmallow lemon drops. Bonbon brownie powder sesame snaps fruitcake caramels toffee. Brownie pie cotton candy sesame snaps wafer sugar plum candy marzipan oat cake.' });
-story080Right.storyName = 'Tooltip with long text';
-const BlockTooltipTemplate = ({}) => {
-    return html `<b2b-tooltip
-    content="I am a tooltip"
-    position="right"
-    opened
-    style="display: inline-block"
-    ><b2b-input style="width: 300px"></b2b-input>
-  </b2b-tooltip> `;
-};
-export const story090BlockElement = BlockTooltipTemplate.bind({});
-story090BlockElement.storyName = 'Block Element';
-story090BlockElement.parameters = {
-    controls: { hideNoControlsWarning: true },
-    docs: {
-        source: {
-            code: dedent `
-      <b2b-tooltip style="display: inline-block" content="I am a tooltip" position="right">
-        <b2b-input style="width: 300px"></b2b-input>
-      </b2b-tooltip>`,
-        },
+const meta = {
+    title: 'Components/Interaction/Tooltip',
+    component: 'b2b-tooltip',
+    args: {
+        trigger: 'hover',
+        position: 'right',
+        content: 'I am a tooltip',
+        triggerMarkup: undefined,
+        buttons: undefined,
+        opened: false,
+    },
+    argTypes: getArgTypes('b2b-tooltip'),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        const markup = args.triggerMarkup ? args.triggerMarkup : 'trigger.';
+        const filler = args.position === 'top' ? html `<div style="height: 125px;"></div>` : null;
+        const [_, updateArgs] = useArgs();
+        const showToolTip = async () => {
+            updateArgs({ opened: true });
+        };
+        const hideToolTip = async () => {
+            updateArgs({ opened: false });
+        };
+        const buttonMarkup = args.buttons
+            ? html `<b2b-button @click=${showToolTip} variant="primary"
+            >Show Tooltip</b2b-button
+          ><b2b-button @click=${hideToolTip}>Hide Tooltip</b2b-button>`
+            : null;
+        return html ` ${filler}
+      <b2b-paragraph>
+        I am some text with a tooltip
+        <b2b-tooltip
+          position="${args.position}"
+          trigger="${args.trigger}"
+          content="${args.content}"
+          opened="${args.opened}"
+          data-testid="trigger"
+          >${markup}
+        </b2b-tooltip>
+      </b2b-paragraph>
+      ${buttonMarkup}`;
     },
 };
-story090BlockElement.argTypes = Object.assign({}, hideAllControls(tooltipArgs));
-export default {
-    title: 'Components/Interaction/Tooltip',
-    argTypes: Object.assign(Object.assign({}, tooltipArgs), { triggerMarkup: { table: { disable: true } }, buttons: { table: { disable: true } } }),
-    viewMode: 'docs',
+export const DefaultHoverToolTip = {
+    args: Object.assign({}, meta.args),
 };
+export const FocusTooltip = Object.assign(Object.assign({}, meta), { render: args => {
+        const focusTriggerMarkup = html `<b2b-button>button to focus</b2b-button>`;
+        return html `
+      <b2b-paragraph>
+        I am some text with a tooltip
+        <b2b-tooltip
+          position="${args.position}"
+          trigger="${args.trigger}"
+          content="${args.content}"
+          opened="${args.opened}"
+          data-testid="trigger">
+          ${focusTriggerMarkup}
+        </b2b-tooltip>
+      </b2b-paragraph>
+    `;
+    } });
+export const CustomTooltip = Object.assign({}, meta);
+export const TopTooltip = Object.assign(Object.assign({}, meta), { args: Object.assign(Object.assign({}, meta.args), { opened: true, position: 'top' }) });
+export const BottomTooltip = Object.assign(Object.assign({}, meta), { args: Object.assign(Object.assign({}, meta.args), { opened: true, position: 'bottom' }) });
+export const LeftTooltip = Object.assign(Object.assign({}, meta), { args: Object.assign(Object.assign({}, meta.args), { opened: true, position: 'left' }) });
+export const RightTooltip = Object.assign(Object.assign({}, meta), { args: Object.assign(Object.assign({}, meta.args), { opened: true, position: 'right' }) });
+export const LongRightTooltip = Object.assign(Object.assign({}, meta), { args: Object.assign(Object.assign({}, meta.args), { opened: true, position: 'top', content: 'Topping halvah cake sugar plum marzipan jelly marshmallow lemon drops. Bonbon brownie powder sesame snaps fruitcake caramels toffee. Brownie pie cotton candy sesame snaps wafer sugar plum candy marzipan oat cake.' }) });
+const tooltipArgs = getArgTypes('b2b-tooltip');
+export const BlockTooltipStory = Object.assign(Object.assign({}, meta), { args: Object.assign(Object.assign({}, meta.args), { content: 'I am a tooltip', position: 'right', opened: true }), render: () => html `
+    <b2b-tooltip
+      content="I am a tooltip"
+      position="right"
+      opened
+      style="display: inline-block">
+      <b2b-input style="width: 300px"></b2b-input>
+    </b2b-tooltip>
+  `, storyName: 'Block Element', parameters: {
+        controls: { hideNoControlsWarning: true }, // Hide the "no controls" warning
+        docs: {
+            source: {
+                code: dedent `
+        <b2b-tooltip style="display: inline-block" content="I am a tooltip" position="right">
+          <b2b-input style="width: 300px"></b2b-input>
+        </b2b-tooltip>`,
+            },
+        },
+    }, argTypes: Object.assign({}, hideAllControls(tooltipArgs)) });
+export default meta;

package/dist/collection/components/wizard/wizard.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -32,11 +32,10 @@
   --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-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 10:57:20 GMT
+ * Generated on Thu, 19 Sep 2024 13:38:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,6 +153,7 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/docs/tokens/color.stories.js

@@ -38,7 +38,13 @@ const semanticTopTokensList = [
     'icon',
     'table',
 ];
-const semanticBottomTokensList = ['error', 'warning', 'success', 'info'];
+const semanticBottomTokensList = [
+    'error',
+    'warning',
+    'success',
+    'info',
+    'hover',
+];
 const basicTokensList = ['black', 'white', 'grey', 'red'];
 const ColorTokens = ({}) => {
     return html `

package/dist/components/b2b-alert.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const alertCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-alert{display:none;padding:var(--b2b-size-30);gap:var(--b2b-size-30);font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);flex-shrink:0;border-radius:var(--b2b-size-7)}.b2b-alert--info{background-color:var(--b2b-color-info-50)}.b2b-alert--info__icon{color:var(--b2b-color-info-100)}.b2b-alert--warning{background-color:var(--b2b-color-warning-50)}.b2b-alert--error{color:var(--b2b-color-error-100);background-color:var(--b2b-color-error-50)}.b2b-alert--success{background-color:var(--b2b-color-success-50)}.b2b-alert--success__icon{color:var(--b2b-color-success-100)}.b2b-alert__close-icon{padding-top:var(--b2b-size-7);width:var(--b2b-size-30);height:var(--b2b-size-35);cursor:pointer;fill:var(--b2b-color-grey-400);flex-shrink:0}.b2b-alert__content{display:flex;align-items:baseline;flex:2;gap:var(--b2b-size-30)}.b2b-alert__content p{width:100%;margin:0;padding:var(--b2b-size-5) 0 var(--b2b-size-1) 0}.b2b-alert--open{display:flex}.b2b-alert--small{width:fit-content;justify-content:center;padding:var(--b2b-size-7);display:inline-flex}.b2b-alert--large{width:inherit;justify-content:space-between}";
+const alertCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--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-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-hover:#e6f4ff;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-alert{display:none;padding:var(--b2b-size-30);gap:var(--b2b-size-30);font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);flex-shrink:0;border-radius:var(--b2b-size-7)}.b2b-alert--info{background-color:var(--b2b-color-info-50)}.b2b-alert--info__icon{color:var(--b2b-color-info-100)}.b2b-alert--warning{background-color:var(--b2b-color-warning-50)}.b2b-alert--error{color:var(--b2b-color-error-100);background-color:var(--b2b-color-error-50)}.b2b-alert--success{background-color:var(--b2b-color-success-50)}.b2b-alert--success__icon{color:var(--b2b-color-success-100)}.b2b-alert__close-icon{padding-top:var(--b2b-size-7);width:var(--b2b-size-30);height:var(--b2b-size-35);cursor:pointer;fill:var(--b2b-color-grey-400);flex-shrink:0}.b2b-alert__content{display:flex;align-items:baseline;flex:2;gap:var(--b2b-size-30)}.b2b-alert__content p{width:100%;margin:0;padding:var(--b2b-size-5) 0 var(--b2b-size-1) 0}.b2b-alert--open{display:flex}.b2b-alert--small{width:fit-content;justify-content:center;padding:var(--b2b-size-7);display:inline-flex}.b2b-alert--large{width:inherit;justify-content:space-between}";
 const B2bAlertStyle0 = alertCss;
 
 const AlertComponent = /*@__PURE__*/ proxyCustomElement(class AlertComponent extends HTMLElement {