npm - @otto-de/b2b-core-components - Versions diffs - 1.37.3 → 1.38.1 - Mend

@otto-de/b2b-core-components 1.37.3 → 1.38.1

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 (474) hide show

package/dist/collection/components/icon-100/types.js CHANGED Viewed

@@ -17,12 +17,15 @@ export const iconTypes = [
     'b2b_icon-arrow-misdirected',
     'b2b_icon-arrow-right',
     'b2b_icon-arrow-up',
+    'b2b_icon-ascending-arrow-graph-axis',
     'b2b_icon-assembly',
     'b2b_icon-assortment',
     'b2b_icon-attachment',
+    'b2b_icon-audio-description',
     'b2b_icon-augmented-reality',
     'b2b_icon-autonomous-team',
     'b2b_icon-bank-details',
+    'b2b_icon-bar-graph-ascending-magnifying-glass',
     'b2b_icon-bar-graph-ascending',
     'b2b_icon-bar-graph-axis',
     'b2b_icon-barley',
@@ -31,12 +34,14 @@ export const iconTypes = [
     'b2b_icon-basketball',
     'b2b_icon-bikini',
     'b2b_icon-blogs',
+    'b2b_icon-box-scale',
     'b2b_icon-brandshop',
     'b2b_icon-brazil-nut',
     'b2b_icon-browser-click',
     'b2b_icon-browser-content-skyscraper',
     'b2b_icon-browser-content',
     'b2b_icon-browser-duration',
+    'b2b_icon-browser-hand-pointing',
     'b2b_icon-browser-list-click',
     'b2b_icon-browser-magnifying-glass-info',
     'b2b_icon-browser-person-click',
@@ -66,15 +71,20 @@ export const iconTypes = [
     'b2b_icon-clipboard-check',
     'b2b_icon-close-bold',
     'b2b_icon-close',
+    'b2b_icon-closed-captions',
     'b2b_icon-clover-four-leaf',
     'b2b_icon-code-management',
+    'b2b_icon-cogwheel-circular-arrow',
+    'b2b_icon-cogwheel-pen',
     'b2b_icon-contact-mail',
+    'b2b_icon-contrast',
     'b2b_icon-cookie',
     'b2b_icon-copy',
     'b2b_icon-cosmetics',
     'b2b_icon-cow',
     'b2b_icon-crab',
     'b2b_icon-critique',
+    'b2b_icon-crown-circle',
     'b2b_icon-curtain',
     'b2b_icon-cut-out',
     'b2b_icon-dashboard',
@@ -90,15 +100,20 @@ export const iconTypes = [
     'b2b_icon-delivery-flat',
     'b2b_icon-delivery-on-hangers',
     'b2b_icon-delivery-preferred-place',
+    'b2b_icon-design-assets',
+    'b2b_icon-desktop-code',
     'b2b_icon-desktop-phone-ads-click',
     'b2b_icon-desktop-phone-ads',
     'b2b_icon-desktop-phone',
     'b2b_icon-desktop',
     'b2b_icon-devices-monitor-laptop-tablet',
+    'b2b_icon-diamond-circle',
     'b2b_icon-dish-feature-lactose-free',
     'b2b_icon-dislike',
     'b2b_icon-disposal',
+    'b2b_icon-document-magnifying-glass',
     'b2b_icon-document-sign',
+    'b2b_icon-document-speaker',
     'b2b_icon-downloads',
     'b2b_icon-dress',
     'b2b_icon-dungarees',
@@ -108,6 +123,7 @@ export const iconTypes = [
     'b2b_icon-edit-pad',
     'b2b_icon-edit',
     'b2b_icon-egg',
+    'b2b_icon-ellipsis-vertical',
     'b2b_icon-ellipsis',
     'b2b_icon-email-verification-confirmed-safe',
     'b2b_icon-email-verification-confirmed',
@@ -118,6 +134,7 @@ export const iconTypes = [
     'b2b_icon-error-article-image',
     'b2b_icon-error-hint',
     'b2b_icon-error',
+    'b2b_icon-euro-sale',
     'b2b_icon-euro',
     'b2b_icon-event',
     'b2b_icon-events',
@@ -138,14 +155,19 @@ export const iconTypes = [
     'b2b_icon-gallery-view',
     'b2b_icon-gamepad',
     'b2b_icon-garlic',
+    'b2b_icon-gavel',
     'b2b_icon-gender-intersex',
     'b2b_icon-globe-hand',
     'b2b_icon-globe',
     'b2b_icon-gluten',
     'b2b_icon-glutenfree',
+    'b2b_icon-hand-high-five',
+    'b2b_icon-hand-pointing-up',
+    'b2b_icon-hand-raised',
     'b2b_icon-handshake',
     'b2b_icon-hashtag',
     'b2b_icon-hazelnut',
+    'b2b_icon-hearing-disability',
     'b2b_icon-hide',
     'b2b_icon-high-heels',
     'b2b_icon-home',
@@ -156,6 +178,7 @@ export const iconTypes = [
     'b2b_icon-inplace-zoom',
     'b2b_icon-insurance',
     'b2b_icon-kamut',
+    'b2b_icon-keyboard',
     'b2b_icon-laptop-os',
     'b2b_icon-laptop-phone-ads',
     'b2b_icon-laptop-phone-youtube',
@@ -172,12 +195,14 @@ export const iconTypes = [
     'b2b_icon-link',
     'b2b_icon-list-view',
     'b2b_icon-location',
+    'b2b_icon-lock-closed-check',
     'b2b_icon-lock-open',
     'b2b_icon-lupine',
     'b2b_icon-macadamia',
     'b2b_icon-material-samples',
     'b2b_icon-measurement',
     'b2b_icon-megaphone',
+    'b2b_icon-mental-disability',
     'b2b_icon-menu',
     'b2b_icon-mic',
     'b2b_icon-milk',
@@ -190,12 +215,14 @@ export const iconTypes = [
     'b2b_icon-money-plus',
     'b2b_icon-money-stack',
     'b2b_icon-money',
+    'b2b_icon-moon',
     'b2b_icon-move',
     'b2b_icon-movie',
     'b2b_icon-mustard',
     'b2b_icon-nav',
     'b2b_icon-new',
     'b2b_icon-newsletter-sign-up',
+    'b2b_icon-notification-strikethrough',
     'b2b_icon-notification',
     'b2b_icon-nuts',
     'b2b_icon-oat',
@@ -258,6 +285,7 @@ export const iconTypes = [
     'b2b_icon-person',
     'b2b_icon-phone-permission',
     'b2b_icon-phone-play',
+    'b2b_icon-phone-shopping-cart',
     'b2b_icon-phone',
     'b2b_icon-pig',
     'b2b_icon-pin',
@@ -310,29 +338,44 @@ export const iconTypes = [
     'b2b_icon-shell',
     'b2b_icon-shirt',
     'b2b_icon-shopping-cart-euro',
+    'b2b_icon-shopping-cart-plus',
     'b2b_icon-shopping-cart',
     'b2b_icon-show',
     'b2b_icon-skip-link',
     'b2b_icon-smiley-angry',
+    'b2b_icon-smiley-confused',
+    'b2b_icon-smiley-dizzy',
     'b2b_icon-smiley-happy',
     'b2b_icon-smiley-negative',
     'b2b_icon-smiley-neutral',
+    'b2b_icon-smiley-pensive',
     'b2b_icon-smiley-positive',
+    'b2b_icon-smiley-relieved',
+    'b2b_icon-smiley-sad',
+    'b2b_icon-smiley-smiling-with-smiling-eyes',
+    'b2b_icon-smiley-smiling',
+    'b2b_icon-smiley-squinting',
+    'b2b_icon-smiley-winking',
+    'b2b_icon-smiley-worried',
     'b2b_icon-sms-info',
     'b2b_icon-sneaker',
     'b2b_icon-sort-ascending',
     'b2b_icon-sort-descending',
     'b2b_icon-sort',
     'b2b_icon-soy',
+    'b2b_icon-sparkles',
     'b2b_icon-speech-bubble-eye',
     'b2b_icon-speech-bubble-sparkles',
+    'b2b_icon-speech-disability',
     'b2b_icon-spelt',
     'b2b_icon-sphere',
+    'b2b_icon-star-circle',
     'b2b_icon-stationary',
     'b2b_icon-studies',
     'b2b_icon-success-hint-filled',
     'b2b_icon-success',
     'b2b_icon-sulfur-dioxide-sulfite',
+    'b2b_icon-sun',
     'b2b_icon-sustainability',
     'b2b_icon-sustainable-animal-welfare',
     'b2b_icon-sustainable-delivery',
@@ -353,6 +396,8 @@ export const iconTypes = [
     'b2b_icon-target-group',
     'b2b_icon-teddy',
     'b2b_icon-test-result',
+    'b2b_icon-text-scale',
+    'b2b_icon-theming',
     'b2b_icon-touch',
     'b2b_icon-town',
     'b2b_icon-trash',
@@ -375,6 +420,7 @@ export const iconTypes = [
     'b2b_icon-vegetarian',
     'b2b_icon-viewtoggle-tiles',
     'b2b_icon-village',
+    'b2b_icon-visual-disability',
     'b2b_icon-voice-sparkles',
     'b2b_icon-volume-off',
     'b2b_icon-volume-on',

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

package/dist/collection/components/icon-50/icon-50.js CHANGED Viewed

@@ -62,7 +62,7 @@ export class B2bIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"b2b_icon-arrow-down\" | \"b2b_icon-arrow-left\" | \"b2b_icon-arrow-right\" | \"b2b_icon-arrow-up\" | \"b2b_icon-basket\" | \"b2b_icon-callback\" | \"b2b_icon-check\" | \"b2b_icon-close\" | \"b2b_icon-delete\" | \"b2b_icon-error-hint\" | \"b2b_icon-feedback\" | \"b2b_icon-filter\" | \"b2b_icon-flag-chequered\" | \"b2b_icon-info\" | \"b2b_icon-inplace-zoom\" | \"b2b_icon-leaving-page\" | \"b2b_icon-minus\" | \"b2b_icon-notification\" | \"b2b_icon-pending\" | \"b2b_icon-phone\" | \"b2b_icon-pin\" | \"b2b_icon-plus\" | \"b2b_icon-print\" | \"b2b_icon-qr-code\" | \"b2b_icon-question-hint\" | \"b2b_icon-question\" | \"b2b_icon-rating-empty\" | \"b2b_icon-rating-filled\" | \"b2b_icon-rating-half\" | \"b2b_icon-reply\" | \"b2b_icon-smiley-angry\" | \"b2b_icon-smiley-happy\" | \"b2b_icon-smiley-negative\" | \"b2b_icon-smiley-neutral\" | \"b2b_icon-smiley-positive\" | \"b2b_icon-sort-ascending\" | \"b2b_icon-sort-descending\" | \"b2b_icon-sort\" | \"b2b_icon-trend-down\" | \"b2b_icon-trend-up\" | \"b2b_icon-voucher\" | \"b2b_icon-warning-hint\" | \"b2b_icon-wishlist-active\" | \"b2b_icon-wishlist\" | \"b2b_icon-arrow-long-left\" | \"b2b_icon-arrow-long-right\" | \"b2b_icon-arrow-misdirected\" | \"b2b_icon-flame\" | \"b2b_icon-lock-open\" | \"b2b_icon-refresh\" | \"b2b_icon-skip-link\" | \"b2b_icon-arrow-return\" | \"b2b_icon-info-hint\" | \"b2b_icon-lock-closed\" | \"b2b_icon-sparkles\" | \"b2b_icon-success-hint\"",
+                    "resolved": "\"b2b_icon-arrow-down\" | \"b2b_icon-arrow-left\" | \"b2b_icon-arrow-right\" | \"b2b_icon-arrow-up\" | \"b2b_icon-basket\" | \"b2b_icon-callback\" | \"b2b_icon-check\" | \"b2b_icon-close\" | \"b2b_icon-delete\" | \"b2b_icon-dislike\" | \"b2b_icon-error-hint\" | \"b2b_icon-feedback\" | \"b2b_icon-filter\" | \"b2b_icon-flag-chequered\" | \"b2b_icon-info\" | \"b2b_icon-inplace-zoom\" | \"b2b_icon-leaving-page\" | \"b2b_icon-like\" | \"b2b_icon-minus\" | \"b2b_icon-notification\" | \"b2b_icon-pending\" | \"b2b_icon-phone\" | \"b2b_icon-pin\" | \"b2b_icon-plus\" | \"b2b_icon-print\" | \"b2b_icon-qr-code\" | \"b2b_icon-question-hint\" | \"b2b_icon-question\" | \"b2b_icon-rating-empty\" | \"b2b_icon-rating-filled\" | \"b2b_icon-rating-half\" | \"b2b_icon-reply\" | \"b2b_icon-smiley-angry\" | \"b2b_icon-smiley-happy\" | \"b2b_icon-smiley-negative\" | \"b2b_icon-smiley-neutral\" | \"b2b_icon-smiley-positive\" | \"b2b_icon-sort-ascending\" | \"b2b_icon-sort-descending\" | \"b2b_icon-sort\" | \"b2b_icon-trend-down\" | \"b2b_icon-trend-up\" | \"b2b_icon-voucher\" | \"b2b_icon-warning-hint\" | \"b2b_icon-wishlist-active\" | \"b2b_icon-wishlist\" | \"b2b_icon-arrow-long-left\" | \"b2b_icon-arrow-long-right\" | \"b2b_icon-arrow-misdirected\" | \"b2b_icon-flame\" | \"b2b_icon-lock-open\" | \"b2b_icon-refresh\" | \"b2b_icon-skip-link\" | \"b2b_icon-sparkles\" | \"b2b_icon-arrow-return\" | \"b2b_icon-info-hint\" | \"b2b_icon-lock-closed\" | \"b2b_icon-success-hint\"",
                     "references": {
                         "IconName": {
                             "location": "import",

package/dist/collection/components/icon-50/icons-50/b2b_icon-dislike.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9878 6.38965L11.0093 2.08203C10.7754 1.41309 10.0435 1 9.5 1H5.7002C5.37549 1 4.99756 1.21289 4.40674 1.56055C4.14453 1.71484 3.70459 1.97363 3.58789 1.99609H2.92035C2.81177 1.49518 2.55103 1 1.90332 1H0.5C0.223633 1 0 1.22363 0 1.5C0 1.77637 0.223633 2 0.5 2L1.87012 1.98145C1.8833 1.99512 2 2.14062 2 2.88379V8H0.5C0.223633 8 0 8.22363 0 8.5C0 8.77637 0.223633 9 0.5 9H2.5C2.77637 9 3 8.77637 3 8.5V8H3.54102C3.89795 8 4.88818 8.34863 5.18652 9.02441C5.31396 9.31348 5.37158 9.54883 5.42285 9.75586C5.5083 10.1035 5.59717 10.4639 5.9668 10.7871C6.12744 10.9277 6.3291 11 6.54443 11C6.6792 11 6.81982 10.9717 6.9585 10.9141C7.40039 10.7295 7.93799 10.167 7.99902 9.18652C8.02637 8.74078 8.02655 8.31628 8.01984 8H10.397C11.2852 8 12 7.17969 12 6.5C12 6.46289 11.9961 6.42578 11.9878 6.38965ZM10.397 7H7.5C7.22363 7 7 7.22363 7 7.5C7 7.51166 7.05078 8.30859 7.00098 9.125C6.96143 9.75684 6.76293 9.94624 6.62549 10C6.49854 9.88867 6.46875 9.82227 6.39355 9.5166C6.33594 9.28223 6.26416 8.99023 6.10156 8.62109C5.59619 7.47559 4.18457 7 3.54102 7H3V2.99609H3.58789C3.92285 2.99609 4.31006 2.77832 4.91406 2.42285C5.16797 2.27246 5.59326 2.02246 5.7002 2H9.5C9.64404 2 9.98242 2.17383 10.0498 2.35742L10.9951 6.53516C10.958 6.69043 10.7012 7 10.397 7Z" fill="#212121"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-like.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 9.99995L10.1299 10.0185C10.1167 10.0048 10 9.85932 10 9.11616V3.99995H11.5C11.7764 3.99995 12 3.77631 12 3.49995C12 3.22358 11.7764 2.99995 11.5 2.99995H9.5C9.22363 2.99995 9 3.22358 9 3.49995V3.99995H8.45898C8.10205 3.99995 7.11182 3.65131 6.81348 2.97553C6.68604 2.68647 6.62842 2.45112 6.57715 2.24409C6.4917 1.89643 6.40283 1.53608 6.0332 1.21284C5.771 0.983346 5.40088 0.935494 5.0415 1.08589C4.59961 1.27046 4.06201 1.83296 4.00098 2.81342C3.97363 3.25916 3.97345 3.68366 3.98016 3.99995H1.60303C0.714844 3.99995 0 4.82026 0 5.49995C0 5.53706 0.0039062 5.57417 0.012207 5.6103L0.990723 9.91792C1.22461 10.5869 1.95654 10.9999 2.5 10.9999H6.2998C6.62451 10.9999 7.00244 10.7871 7.59326 10.4394C7.85547 10.2851 8.29541 10.0263 8.41211 10.0039H9.07965C9.18823 10.5048 9.44897 10.9999 10.0967 10.9999H11.5C11.7764 10.9999 12 10.7763 12 10.4999C12 10.2236 11.7764 9.99995 11.5 9.99995ZM9 9.00385H8.41211C8.07715 9.00385 7.68994 9.22163 7.08594 9.5771C6.83203 9.72749 6.40674 9.97749 6.2998 9.99995H2.5C2.35596 9.99995 2.01758 9.82612 1.9502 9.64253L1.00488 5.46479C1.04199 5.30952 1.29883 4.99995 1.60303 4.99995H4.5C4.77637 4.99995 5 4.77631 5 4.49995C5 4.48829 4.94922 3.69135 4.99902 2.87495C5.03857 2.24311 5.22098 2.09429 5.3736 1.99995C5.50056 2.11128 5.53125 2.17768 5.60645 2.48335C5.66406 2.71772 5.73584 3.00971 5.89844 3.37885C6.40381 4.52436 7.81543 4.99995 8.45898 4.99995H9V9.00385Z" fill="#212121"/>
+</svg>

package/dist/collection/components/icon-50/types.js CHANGED Viewed

@@ -12,6 +12,7 @@ export const iconTypes = [
     'b2b_icon-check',
     'b2b_icon-close',
     'b2b_icon-delete',
+    'b2b_icon-dislike',
     'b2b_icon-error-hint',
     'b2b_icon-feedback',
     'b2b_icon-filter',
@@ -21,6 +22,7 @@ export const iconTypes = [
     'b2b_icon-info',
     'b2b_icon-inplace-zoom',
     'b2b_icon-leaving-page',
+    'b2b_icon-like',
     'b2b_icon-lock-closed',
     'b2b_icon-lock-open',
     'b2b_icon-minus',

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -257,7 +255,7 @@
   overflow: hidden;
   border: 1px solid var(--b2b-color-grey-200);
   border-radius: var(--b2b-size-border-radius-100);
-  padding: 5px var(--b2b-size-20);
+  padding: var(--b2b-size-7) var(--b2b-size-20);
   max-height: 104px;
   background-color: var(--b2b-color-white-100);
 }
@@ -281,7 +279,7 @@
   align-items: center;
   gap: 4px 0;
   width: calc(100% - 24px);
-  padding: var(--b2b-size-1) 0;
+  padding: 0;
 }
 :host .b2b-multiselect-dropdown__placeholder {
   display: inline-flex;

package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.e2e.js CHANGED Viewed

@@ -86,4 +86,46 @@ describe('b2b-multiselect-dropdown', () => {
         const chips = await page.findAll('b2b-multiselect-dropdown >>> b2b-chip-component');
         expect(chips.length).toBe(2);
     });
+    it('should toggle option when clicking on row padding area', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown options-list="Alpha, Beta, Gamma"></b2b-multiselect-dropdown>`,
+        });
+        const trigger = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown');
+        await trigger.click();
+        await page.waitForChanges();
+        const spy = await page.spyOnEvent('b2b-selected');
+        const allOptions = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+        const firstOption = allOptions[1];
+        await firstOption.click();
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEvent();
+        const checkbox = await firstOption.find('b2b-checkbox');
+        const isChecked = await checkbox.getProperty('checked');
+        expect(isChecked).toBe(true);
+        const chip = await page.find('b2b-multiselect-dropdown >>> b2b-chip-component');
+        expect(chip).not.toBeNull();
+    });
+    it('should not toggle when clicking disabled option row', async () => {
+        const page = await newE2EPage({
+            html: `<b2b-multiselect-dropdown options-list="Alpha, Beta"></b2b-multiselect-dropdown>`,
+        });
+        const trigger = await page.find('b2b-multiselect-dropdown >>> .b2b-multiselect-dropdown');
+        await trigger.click();
+        await page.waitForChanges();
+        const allOptions = await page.findAll('b2b-multiselect-dropdown >>> b2b-multiselect-option');
+        const firstOption = allOptions[1]; // Skip select-all
+        const checkbox = await firstOption.find('b2b-checkbox');
+        await page.$eval('b2b-multiselect-dropdown', (el) => {
+            const option = el.shadowRoot.querySelectorAll('b2b-multiselect-option')[1];
+            const cb = option.querySelector('b2b-checkbox');
+            cb.setAttribute('disabled', 'true');
+        });
+        await page.waitForChanges();
+        const spy = await page.spyOnEvent('b2b-selected');
+        await firstOption.click();
+        await page.waitForChanges();
+        expect(spy).not.toHaveReceivedEvent();
+        const isChecked = await checkbox.getProperty('checked');
+        expect(isChecked).toBe(false);
+    });
 });

package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.css CHANGED Viewed

@@ -4,6 +4,7 @@
   gap: var(--b2b-size-15);
   padding: var(--b2b-size-20) var(--b2b-size-20) var(--b2b-size-25);
   align-items: center;
+  cursor: pointer;
 }
 .b2b-multiselect-dropdown__option:hover {
   background-color: var(--b2b-color-hover-default);

package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 export class B2bMultiSelectOption {
     constructor() {
         this.handleCheckboxChange = event => {
@@ -8,6 +8,18 @@ export class B2bMultiSelectOption {
                 selectedOption: this.option,
             });
         };
+        this.handleRowClick = (event) => {
+            const checkbox = this.hostElement.querySelector('b2b-checkbox');
+            if (!checkbox)
+                return;
+            if (checkbox.hasAttribute('disabled'))
+                return;
+            const target = event.target;
+            if (target.tagName.toLowerCase() === 'b2b-checkbox') {
+                return;
+            }
+            checkbox.click();
+        };
         this.option = undefined;
         this.label = undefined;
         this.selected = false;
@@ -15,9 +27,9 @@ export class B2bMultiSelectOption {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f1a1faa0a97e00af9fbfa291aba3c53ea92ad44c', role: "option", class: {
+        return (h(Host, { key: 'b9d2434db50809b6a7118b82bdd23857963b9da9', role: "option", onClick: this.handleRowClick, class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: '251ccb65111ecb72b57c19786df65a11a1432ab7', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: (_a = this.label) !== null && _a !== void 0 ? _a : this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: '692eee7bee2b04768e8002a14422df19eeb43333', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: (_a = this.label) !== null && _a !== void 0 ? _a : this.option, indeterminate: this.indeterminate, value: this.option })));
     }
     static get is() { return "b2b-multiselect-option"; }
     static get originalStyleUrls() {
@@ -131,4 +143,5 @@ export class B2bMultiSelectOption {
                 }
             }];
     }
+    static get elementRef() { return "hostElement"; }
 }

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -241,6 +239,7 @@
 .b2b-radio-items {
   display: flex;
   justify-content: flex-start;
+  align-items: center;
 }
 .b2b-radio-input {
   appearance: none;

package/dist/collection/components/radio-group/radio-group.css CHANGED Viewed

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

package/dist/collection/components/required-separator/required-separator.css CHANGED Viewed

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

package/dist/collection/components/rounded-icon/rounded-icon.css CHANGED Viewed

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

package/dist/collection/components/scrollable-container/scrollable-container.css CHANGED Viewed

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;

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

@@ -5,7 +5,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;
@@ -135,7 +134,6 @@
   --b2b-color-black-50: #333333;
   --b2b-color-black-100: #222222;
   --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;