@otto-de/b2b-core-components 1.37.0 → 1.37.2

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -33,11 +33,11 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-icon-100
-      icon="${args.icon}"
-      color="${args.color}"
-      size="${args.size}"
-      clickable="${args.clickable}"
-      focusable="${args.focusable}"></b2b-icon-100>`;
+      icon=${args.icon}
+      color=${args.color}
+      size=${args.size}
+      clickable=${args.clickable}
+      focusable=${args.focusable}></b2b-icon-100>`;
     },
 };
 export default meta;
@@ -62,11 +62,11 @@ export const Inherit = {
     render: ({ icon, color, size, clickable, focusable }) => {
         return html ` <div style="color: red;">
       <b2b-icon-100
-        icon="${icon}"
-        color="${color}"
-        size="${size}"
-        clickable="${clickable}"
-        focusable="${focusable}">
+        icon=${icon}
+        color=${color}
+        size=${size}
+        clickable=${clickable}
+        focusable=${focusable}>
       </b2b-icon-100>
     </div>`;
     },
@@ -75,7 +75,7 @@ export const Inherit = {
 const renderAllIcons = () => {
     const icons = iconTypes.map(icon => {
         return html ` <div class="icon-container">
-      <b2b-icon-100 icon="${icon}"></b2b-icon-100>
+      <b2b-icon-100 icon=${icon}></b2b-icon-100>
       <p>${icon}</p>
     </div>`;
     });

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -32,10 +32,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-icon-50
-      icon="${args.icon}"
-      color="${args.color}"
-      clickable="${args.clickable}"
-      focusable="${args.focusable}"></b2b-icon-50>`;
+      icon=${args.icon}
+      color=${args.color}
+      clickable=${args.clickable}
+      focusable=${args.focusable}></b2b-icon-50>`;
     },
 };
 export default meta;
@@ -57,10 +57,10 @@ export const Inherit = {
     render: ({ icon, color, clickable, focusable }) => {
         return html ` <div style="color: red;">
       <b2b-icon-50
-        icon="${icon}"
-        color="${color}"
-        clickable="${clickable}"
-        focusable="${focusable}">
+        icon=${icon}
+        color=${color}
+        clickable=${clickable}
+        focusable=${focusable}>
       </b2b-icon-50>
     </div>`;
     },
@@ -69,7 +69,7 @@ export const Inherit = {
 const renderAllIcons = () => {
     const icons = iconTypes.map(icon => {
         return html ` <div class="icon-container">
-      <b2b-icon-50 icon="${icon}"></b2b-icon-50>
+      <b2b-icon-50 icon=${icon}></b2b-icon-50>
       <p>${icon}</p>
     </div>`;
     });

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -33,17 +33,17 @@ const meta = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.defaultType}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.defaultType}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
-        input-text-align="${args.inputTextAlign}"></b2b-input>
+        input-text-align=${args.inputTextAlign}></b2b-input>
     </div>`;
     },
 };
@@ -72,15 +72,15 @@ export const Prefix = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
         ><span slot="start">Registration Number</span></b2b-input
       >
@@ -114,15 +114,15 @@ export const PrefixAndSuffix = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}>
         <b2b-icon-100 icon="b2b_icon-search" slot="start"></b2b-icon-100
         ><span slot="end">Registration Number</span></b2b-input
@@ -136,14 +136,14 @@ export const Label = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
         ><span slot="label">Custom label</span></b2b-input
       >
@@ -156,14 +156,14 @@ export const HintSlot = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
         ><span slot="hint">Custom hint</span></b2b-input
       >

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/input-group/input-group.stories.js

@@ -4,10 +4,10 @@ const Template = ({ invalid, disabled, error, hint, additionalSlot, }) => {
     return additionalSlot
         ? html ` <div style="width: 380px">
         <b2b-input-group
-          invalid="${invalid}"
-          disabled="${disabled}"
-          error="${error}"
-          hint="${hint}">
+          invalid=${invalid}
+          disabled=${disabled}
+          error=${error}
+          hint=${hint}>
           <b2b-input slot="start" label="Search Term"></b2b-input>
           <b2b-dropdown style="width: 90px;">
             <option value="one">€</option>

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/input-list/input-list.stories.js

@@ -29,10 +29,10 @@ const meta = {
         return html `<div style="height: 130px; width: 300px">
       <b2b-input-list
         data-testid="element"
-        label="${args.label}"
-        required="${args.required}"
-        placeholder="${args.placeholder}"
-        disabled="${args.disabled}"
+        label=${args.label}
+        required=${args.required}
+        placeholder=${args.placeholder}
+        disabled=${args.disabled}
         .optionsList=${args.optionsList}></b2b-input-list>
     </div>`;
     },
@@ -60,10 +60,10 @@ export const CustomList = {
         return html `<div style="height: 130px; width: 300px">
       <b2b-input-list
         data-testid="element"
-        label="${args.label}"
-        required="${args.required}"
-        placeholder="${args.placeholder}"
-        disabled="${args.disabled}"
+        label=${args.label}
+        required=${args.required}
+        placeholder=${args.placeholder}
+        disabled=${args.disabled}
         .optionsList=${args.optionsList}
         ><ul>
           <li>Option 1</li>
@@ -90,11 +90,11 @@ export const disabledWithSelectedOption = {
         return html `<div style="height: 130px; width: 300px">
       <b2b-input-list
         data-testid="element"
-        label="${args.label}"
-        value="${args.optionsList[0]}"
-        required="${args.required}"
-        placeholder="${args.placeholder}"
-        disabled="${args.disabled}"
+        label=${args.label}
+        value=${args.optionsList[0]}
+        required=${args.required}
+        placeholder=${args.placeholder}
+        disabled=${args.disabled}
         .optionsList=${args.optionsList}
         ><ul>
           <li>Option 1</li>

package/dist/collection/components/label/label.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ type }) => {
-    return html `<b2b-label type="${type}">Label</b2b-label>`;
+    return html `<b2b-label type=${type}>Label</b2b-label>`;
 };
 const defaultArgs = {
     type: 'neutral',

package/dist/collection/components/modal/modal.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -22,11 +22,11 @@ const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, conte
     <b2b-modal
       @b2b-close=${closeModal}
       id="modal"
-      opened="${opened}"
-      variant="${variant}"
-      heading="${heading}"
-      backdrop-dismiss="${backdropDismiss}"
-      esc-dismiss="${escDismiss}">
+      opened=${opened}
+      variant=${variant}
+      heading=${heading}
+      backdrop-dismiss=${backdropDismiss}
+      esc-dismiss=${escDismiss}>
       <b2b-icon-100 slot="header-icon" icon="b2b_icon-info"></b2b-icon-100>
       <div>${content}</div>
       <b2b-paragraph slot="footer-left">* Left Slot</b2b-paragraph>

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

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/pagination/pagination.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -2,8 +2,8 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ totalPages, activePage }) => {
     return html `<b2b-pagination
-    total-pages="${totalPages}"
-    active-page="${activePage}"></b2b-pagination>`;
+    total-pages=${totalPages}
+    active-page=${activePage}></b2b-pagination>`;
 };
 const defaultArgs = {
     totalPages: 10,

package/dist/collection/components/paragraph/paragraph.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

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

@@ -28,12 +28,12 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-paragraph
-      weight="${args.weight}"
-      size="${args.size}"
-      align="${args.align}"
-      margin="${args.margin}"
-      variant="${args.variant}"
-      display="${args.display}">
+      weight=${args.weight}
+      size=${args.size}
+      align=${args.align}
+      margin=${args.margin}
+      variant=${args.variant}
+      display=${args.display}>
       Far far away, behind the word mountains, far from the countries Vokalia
       and Consonantia, there live the blind texts. Separated they live in
       Bookmarksgrove right at the coast of the Semantics, a large language
@@ -75,12 +75,12 @@ export const DisplayInline = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-paragraph
-        weight="${args.weight}"
-        size="${args.size}"
-        align="${args.align}"
-        margin="${args.margin}"
-        variant="${args.variant}"
-        display="${args.display}">
+        weight=${args.weight}
+        size=${args.size}
+        align=${args.align}
+        margin=${args.margin}
+        variant=${args.variant}
+        display=${args.display}>
         Far far away, behind the word mountains, far from the countries Vokalia
         and Consonantia, there live the blind texts. Separated they live in
         Bookmarksgrove right at the coast of the Semantics, a large language
@@ -114,12 +114,12 @@ export const DisplayInlineBlock = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-paragraph
-        weight="${args.weight}"
-        size="${args.size}"
-        align="${args.align}"
-        margin="${args.margin}"
-        variant="${args.variant}"
-        display="${args.display}">
+        weight=${args.weight}
+        size=${args.size}
+        align=${args.align}
+        margin=${args.margin}
+        variant=${args.variant}
+        display=${args.display}>
         Far far away, behind the word mountains, far from the countries Vokalia
         and Consonantia, there live the blind texts. Separated they live in
         Bookmarksgrove right at the coast of the Semantics, a large language

package/dist/collection/components/progress-bar/progress-bar.css

@@ -7,6 +7,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;
@@ -68,7 +69,7 @@
   --b2b-size-160: 4rem; /** 64px */
   --b2b-size-200: 5rem; /** 80px */
   --b2b-color-error-50: var(--b2b-color-red-50);
-  --b2b-color-background-page: var(--b2b-color-grey-10);
+  --b2b-color-background-page: var(--b2b-color-grey-35);
   --b2b-color-background-box: var(--b2b-color-white-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-overlay: var(--b2b-color-black-100);
@@ -136,6 +137,7 @@
   --b2b-color-white-100: #FFFFFF;
   --b2b-color-grey-10: #F0F0F0;
   --b2b-color-grey-25: #F6F6F6;
+  --b2b-color-grey-35: #F0F0F0;
   --b2b-color-grey-50: #EEEEEE;
   --b2b-color-grey-100: #E6E6E6;
   --b2b-color-grey-150: #D5D5D5;

package/dist/collection/components/progress-bar/progress-bar.stories.js

@@ -25,10 +25,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-progress-bar
-      progress="${args.progress}"
-      label="${args.label}"
-      label-type="${args.labelType}"
-      label-position="${args.labelPosition}" />`;
+      progress=${args.progress}
+      label=${args.label}
+      label-type=${args.labelType}
+      label-position=${args.labelPosition} />`;
     },
 };
 export default meta;