npm - @otto-de/b2b-core-components - Versions diffs - 1.31.1 → 1.31.3 - Mend

@otto-de/b2b-core-components 1.31.1 → 1.31.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (321) hide show

package/dist/collection/components/chip/chip.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -263,15 +275,9 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
-:host .b2b-chip__label--bold {
-  font-weight: bold;
-}
 :host .b2b-chip__label--italic {
   font-style: italic;
 }
-:host .b2b-chip__label--underline {
-  text-decoration: underline;
-}
 :host .b2b-chip__label--strikethrough {
   text-decoration: line-through;
 }
@@ -299,6 +305,7 @@
   pointer-events: none;
   background: var(--b2b-color-grey-25);
   color: var(--b2b-color-grey-400);
+  border: var(--b2b-size-border-width-50) solid var(--b2b-color-white-100);
 }
 :host .b2b-chip--disabled__clearIcon {
   fill: var(--b2b-color-grey-400);

package/dist/collection/components/chip/chip.stories.js CHANGED Viewed

@@ -83,18 +83,10 @@ export const story053ErrorChip = {
     name: 'Error Chip',
     args: Object.assign(Object.assign({}, meta.args), { type: 'error', label: 'Chip with error type' }),
 };
-export const story060BoldLabel = {
-    name: 'Bold Label',
-    args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'bold', label: 'Chip with bold style' }),
-};
 export const story061ItalicLabel = {
     name: 'Italic Label',
     args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'italic', label: 'Chip with italic style' }),
 };
-export const story062UnderlinedLabel = {
-    name: 'Underlined Label',
-    args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'underline', label: 'Chip with underline style' }),
-};
 export const story063StrikethroughLabel = {
     name: 'Strikethrough Label',
     args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'strikethrough', label: 'Chip with strikethrough style' }),

package/dist/collection/components/date-picker/date-picker-days-header.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/date-picker/date-picker-days.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/date-picker/date-picker-header.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/date-picker/date-picker-months.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/date-picker/date-picker-years.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/date-picker/date-picker.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -246,7 +258,7 @@
   border: var(--b2b-size-1) solid var(--b2b-color-grey-200);
   justify-content: flex-start; /* Aligns the input to the left */
   border-radius: var(--b2b-size-7);
-  padding: var(--b2b-size-15) var(--b2b-size-20);
+  padding: var(--b2b-size-13) var(--b2b-size-25) var(--b2b-size-13);
   background-color: var(--b2b-color-white-100);
   transition: outline 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
@@ -276,6 +288,11 @@
 .b2b-date-picker-input-wrapper .b2b-date-picker-input--error {
   background-color: var(--b2b-color-error-50);
 }
+b2b-input-label {
+  display: block;
+  margin-bottom: var(--b2b-size-5);
+  color: var(--b2b-color-black-100);
+}
 .b2b-date-picker-selected-date {
   flex: 1;
   align-self: center;
@@ -309,7 +326,7 @@
   padding-bottom: var(--b2b-size-40);
   outline: none;
   background-color: var(--b2b-color-white-100);
-  z-index: 400;
+  z-index: 1001;
 }
 .b2b-date-picker-body--hidden {
   display: none;

package/dist/collection/components/dropdown/dropdown.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */

package/dist/collection/components/flyout-menu/flyout-menu-option.css CHANGED Viewed

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -41,6 +46,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */
@@ -142,6 +148,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +161,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -160,6 +171,7 @@
   --b2b-size-5: 0.125rem; /** 2px */
   --b2b-size-7: 0.1875rem; /** 3px */
   --b2b-size-10: 0.25rem; /** 4px */
+  --b2b-size-13: 0.3125rem; /** 5px */
   --b2b-size-15: 0.375rem; /** 6px */
   --b2b-size-20: 0.5rem; /** 8px */
   --b2b-size-25: 0.625rem; /** 10px */