@orangesk/orange-design-system 2.1.0 → 3.0.0

package/src/assets/icons/pictogram-modem--dark.svg

@@ -0,0 +1,9 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M31.833 27C33.766 27 35.333 28.567 35.333 30.5C35.333 32.433 33.766 34 31.833 34C29.9 34 28.333 32.433 28.333 30.5C28.333 28.567 29.9 27 31.833 27ZM31.833 29C31.0046 29 30.333 29.6716 30.333 30.5C30.333 31.3284 31.0046 32 31.833 32C32.6614 32 33.333 31.3284 33.333 30.5C33.333 29.6716 32.6614 29 31.833 29Z" fill="white"/>
+  <path d="M32.1035 21.292C35.7189 21.292 38.982 22.8303 41.2129 25.2744L39.7353 26.623C37.8751 24.585 35.1446 23.292 32.1035 23.292C29.0627 23.2921 26.3319 24.585 24.4717 26.623L22.9951 25.2744C25.226 22.8305 28.4885 21.2921 32.1035 21.292Z" fill="white"/>
+  <path d="M32.1035 15.1299C37.0676 15.1299 41.5356 17.2368 44.5957 20.5811L43.1201 21.9307C40.4304 18.9911 36.4939 17.1299 32.1035 17.1299C27.7144 17.13 23.7879 18.991 21.0859 21.9326L19.6143 20.5791C22.684 17.2371 27.1386 15.13 32.1035 15.1299Z" fill="white"/>
+  <path d="M32.1045 9C38.4058 9.00004 44.0675 11.6633 47.957 15.9082L46.4824 17.2598C42.9636 13.4194 37.8333 11 32.1045 11C26.3762 11 21.2565 13.4189 17.7373 17.2598L16.2627 15.9082C20.1519 11.6637 25.8025 9 32.1045 9Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M52.9941 38H11.0059C9.34777 38.0044 8.00475 39.2635 8 40.818V44.182C8.00475 45.7365 9.34777 46.9956 11.0059 47H52.9941C54.6522 46.9956 55.9953 45.7365 56 44.182V40.818C55.9953 39.2635 54.6522 38.0044 52.9941 38ZM12.8 43.9999C11.9163 43.9999 11.2 43.3283 11.2 42.4998C11.2 41.6714 11.9163 40.9998 12.8 40.9998C13.6837 40.9998 14.4 41.6714 14.4 42.4998C14.4 43.3283 13.6837 43.9999 12.8 43.9999ZM17.6 44.0014C16.7163 44.0014 16 43.3298 16 42.5014C16 41.6729 16.7163 41.0013 17.6 41.0013C18.4837 41.0013 19.2 41.6729 19.2 42.5014C19.2 43.3298 18.4837 44.0014 17.6 44.0014ZM51.2 43.9999C50.3163 43.9999 49.6 43.3283 49.6 42.4998C49.6 41.6714 50.3163 40.9998 51.2 40.9998C52.0837 40.9998 52.8 41.6714 52.8 42.4998C52.8 43.3283 52.0837 43.9999 51.2 43.9999Z" fill="#DA8436"/>
+  <path d="M45 48V51H19V48H45Z" fill="#DA8436"/>
+</svg>

package/src/assets/icons/pictogram-modem.svg

@@ -0,0 +1,9 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M31.833 27C33.766 27 35.333 28.567 35.333 30.5C35.333 32.433 33.766 34 31.833 34C29.9 34 28.333 32.433 28.333 30.5C28.333 28.567 29.9 27 31.833 27ZM31.833 29C31.0046 29 30.333 29.6716 30.333 30.5C30.333 31.3284 31.0046 32 31.833 32C32.6614 32 33.333 31.3284 33.333 30.5C33.333 29.6716 32.6614 29 31.833 29Z" fill="black"/>
+  <path d="M32.1035 21.292C35.7189 21.292 38.982 22.8303 41.2129 25.2744L39.7353 26.623C37.8751 24.585 35.1446 23.292 32.1035 23.292C29.0627 23.2921 26.3319 24.585 24.4717 26.623L22.9951 25.2744C25.226 22.8305 28.4885 21.2921 32.1035 21.292Z" fill="black"/>
+  <path d="M32.1035 15.1299C37.0676 15.1299 41.5356 17.2368 44.5957 20.5811L43.1201 21.9307C40.4304 18.9911 36.4939 17.1299 32.1035 17.1299C27.7144 17.13 23.7879 18.991 21.0859 21.9326L19.6143 20.5791C22.684 17.2371 27.1386 15.13 32.1035 15.1299Z" fill="black"/>
+  <path d="M32.1045 9C38.4058 9.00004 44.0675 11.6633 47.957 15.9082L46.4824 17.2598C42.9636 13.4194 37.8333 11 32.1045 11C26.3762 11 21.2565 13.4189 17.7373 17.2598L16.2627 15.9082C20.1519 11.6637 25.8025 9 32.1045 9Z" fill="black"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M52.9941 38H11.0059C9.34777 38.0044 8.00475 39.2635 8 40.818V44.182C8.00475 45.7365 9.34777 46.9956 11.0059 47H52.9941C54.6522 46.9956 55.9953 45.7365 56 44.182V40.818C55.9953 39.2635 54.6522 38.0044 52.9941 38ZM12.8 43.9999C11.9163 43.9999 11.2 43.3283 11.2 42.4998C11.2 41.6714 11.9163 40.9998 12.8 40.9998C13.6837 40.9998 14.4 41.6714 14.4 42.4998C14.4 43.3283 13.6837 43.9999 12.8 43.9999ZM17.6 44.0014C16.7163 44.0014 16 43.3298 16 42.5014C16 41.6729 16.7163 41.0013 17.6 41.0013C18.4837 41.0013 19.2 41.6729 19.2 42.5014C19.2 43.3298 18.4837 44.0014 17.6 44.0014ZM51.2 43.9999C50.3163 43.9999 49.6 43.3283 49.6 42.4998C49.6 41.6714 50.3163 40.9998 51.2 40.9998C52.0837 40.9998 52.8 41.6714 52.8 42.4998C52.8 43.3283 52.0837 43.9999 51.2 43.9999Z" fill="#FFC48F"/>
+  <path d="M45 48V51H19V48H45Z" fill="#FFC48F"/>
+</svg>

package/src/assets/icons/pictogram-speed--dark.svg

@@ -0,0 +1,7 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.22384 46.201C8.7696 42.969 9.00844 39.6773 9.92448 36.5447C10.8405 33.4121 12.4128 30.5103 14.5368 28.0322C16.6607 25.5541 19.2878 23.5564 22.2434 22.1719C25.199 20.7874 28.4154 20.0478 31.6789 20.0022C34.9423 19.9567 38.1781 20.6062 41.1712 21.9076C44.1643 23.209 46.8461 25.1326 49.0385 27.5504C51.2308 29.9682 52.8835 32.825 53.8867 35.9308C54.8898 39.0366 55.2205 42.3203 54.8567 45.5638L32 43L9.22384 46.201Z" fill="#DA8436"/>
+  <path d="M5.26282 46.7577C4.36811 40.3915 5.7743 33.9149 9.22848 28.4929C12.6827 23.071 17.9581 19.0594 24.106 17.1798C30.2539 15.3002 36.8707 15.6759 42.7662 18.2394C48.6618 20.8028 53.4493 25.3858 56.2675 31.1639L54.3261 32.1108C51.7333 26.7949 47.3289 22.5786 41.9049 20.2202C36.481 17.8618 30.3936 17.5162 24.7375 19.2454C19.0815 20.9746 14.228 24.6653 11.0502 29.6535C7.87237 34.6417 6.57867 40.6002 7.4018 46.4571L5.26282 46.7577Z" fill="white"/>
+  <path d="M34 42C34 43.1046 33.1046 44 32 44C30.8954 44 30 43.1046 30 42C30 40.8954 30.8954 40 32 40C33.1046 40 34 40.8954 34 42Z" fill="white"/>
+  <path d="M50.3418 36.4394L33.8418 42.4394L33.1582 40.5605L49.6582 34.5605L50.3418 36.4394Z" fill="white"/>
+</svg>

package/src/assets/icons/pictogram-speed.svg

@@ -0,0 +1,7 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.22384 46.201C8.7696 42.969 9.00844 39.6773 9.92448 36.5447C10.8405 33.4121 12.4128 30.5103 14.5368 28.0322C16.6607 25.5541 19.2878 23.5564 22.2434 22.1719C25.199 20.7874 28.4154 20.0478 31.6789 20.0022C34.9423 19.9567 38.1781 20.6062 41.1712 21.9076C44.1643 23.209 46.8461 25.1326 49.0385 27.5504C51.2308 29.9682 52.8835 32.825 53.8867 35.9308C54.8898 39.0366 55.2205 42.3203 54.8567 45.5638L32 43L9.22384 46.201Z" fill="#FFC48F"/>
+  <path d="M5.26282 46.7577C4.36811 40.3915 5.7743 33.9149 9.22848 28.4929C12.6827 23.071 17.9581 19.0594 24.106 17.1798C30.2539 15.3002 36.8707 15.6759 42.7662 18.2394C48.6618 20.8028 53.4493 25.3858 56.2675 31.1639L54.3261 32.1108C51.7333 26.7949 47.3289 22.5786 41.9049 20.2202C36.481 17.8618 30.3936 17.5162 24.7375 19.2454C19.0815 20.9746 14.228 24.6653 11.0502 29.6535C7.87237 34.6417 6.57867 40.6002 7.4018 46.4571L5.26282 46.7577Z" fill="black"/>
+  <path d="M34 42C34 43.1046 33.1046 44 32 44C30.8954 44 30 43.1046 30 42C30 40.8954 30.8954 40 32 40C33.1046 40 34 40.8954 34 42Z" fill="black"/>
+  <path d="M50.3418 36.4394L33.8418 42.4394L33.1582 40.5605L49.6582 34.5605L50.3418 36.4394Z" fill="black"/>
+</svg>

package/src/assets/icons/pictogram-sunset--dark.svg

@@ -0,0 +1,10 @@
+<svg width="62" height="64" viewBox="0 0 62 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.5636 17.7227C22.2064 17.7227 14.6208 25.3249 14.6208 34.7028C14.6208 37.5155 15.3032 40.1685 16.5111 42.5046H46.6161C47.824 40.1685 48.5064 37.5155 48.5064 34.7028C48.5064 25.3249 40.9208 17.7227 31.5636 17.7227Z" fill="#DA8436"/>
+<path d="M5.0116 42.5049L58.6215 42.5049" stroke="white" stroke-width="2"/>
+<path d="M14.6208 47.5623L48.5064 47.5623" stroke="white" stroke-width="2"/>
+<path d="M22.713 52.6199L41.4258 52.6199" stroke="white" stroke-width="2"/>
+<path d="M52.0591 27.0142L58.0677 24.2975" stroke="white" stroke-width="2"/>
+<path d="M10.0341 26.9902L4 24.3306" stroke="white" stroke-width="2"/>
+<path d="M21.6822 14.9895L18.9238 8.99993" stroke="white" stroke-width="2"/>
+<path d="M40.4267 15.1489L43.1094 9.12508" stroke="white" stroke-width="2"/>
+</svg>

package/src/assets/icons/pictogram-sunset.svg

@@ -0,0 +1,10 @@
+<svg width="62" height="64" viewBox="0 0 62 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.5636 17.7227C22.2064 17.7227 14.6208 25.3249 14.6208 34.7028C14.6208 37.5155 15.3032 40.1685 16.5111 42.5046H46.6161C47.824 40.1685 48.5064 37.5155 48.5064 34.7028C48.5064 25.3249 40.9208 17.7227 31.5636 17.7227Z" fill="#FFC48F"/>
+<path d="M5.0116 42.5049L58.6215 42.5049" stroke="black" stroke-width="2"/>
+<path d="M14.6208 47.5623L48.5064 47.5623" stroke="black" stroke-width="2"/>
+<path d="M22.713 52.6199L41.4258 52.6199" stroke="black" stroke-width="2"/>
+<path d="M52.0591 27.0142L58.0677 24.2975" stroke="black" stroke-width="2"/>
+<path d="M10.0341 26.9902L4 24.3306" stroke="black" stroke-width="2"/>
+<path d="M21.6822 14.9895L18.9238 8.99993" stroke="black" stroke-width="2"/>
+<path d="M40.4267 15.1489L43.1094 9.12508" stroke="black" stroke-width="2"/>
+</svg>

package/src/assets/icons/pictogram-tariffs--dark.svg

@@ -1,9 +1,5 @@
-<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_3153_368" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="61" height="60">
-<path d="M60.9375 0H0V60H60.9375V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_3153_368)">
-<path d="M45.0009 52.5C45.0009 54.0532 43.7415 55.3123 42.1884 55.3125H18.2812C16.7279 55.3125 15.4688 54.0533 15.4688 52.5V51.0938H45.0009V52.5ZM45.0009 49.6865H15.4688V10.3115H45.0009V49.6865ZM42.1884 4.6875C43.7415 4.68769 45.0009 5.94682 45.0009 7.5V8.90625H15.4688V7.5C15.4688 5.9467 16.7279 4.6875 18.2812 4.6875H42.1884Z" fill="#DA8436"/>
-<path d="M33.5927 33.4381C30.8936 30.7332 28.3136 27.6002 29.5475 26.3652C32.6498 23.2568 32.8566 23.4989 29.7228 19.5941C26.582 15.6857 26.7082 16.3874 22.7752 20.401C20.707 22.6323 22.67 29.7684 29.9612 37.0658C37.2593 44.3632 44.5785 46.2437 46.6187 44.2615C50.8076 40.097 51.1371 40.3321 47.4249 37.3149C43.5234 34.1714 43.7513 34.3959 40.6595 37.4903C39.4257 38.7218 36.2954 36.1361 33.5927 33.4346V33.4381Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
+<svg width="64" height="63" viewBox="0 0 64 63" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M47.9845 55.2031C47.9845 56.834 46.6632 58.156 45.0337 58.1562H19.9507C18.321 58.1562 17 56.8341 17 55.2031V53.7266H47.9845V55.2031ZM47.9845 52.2489H17V10.9052H47.9845V52.2489ZM45.0337 5C46.6632 5.0002 47.9845 6.32229 47.9845 7.95312V9.42969H17V7.95312C17 6.32216 18.321 5 19.9507 5H45.0337Z" fill="#DA8436"/>
+  <path d="M28.3955 16.9315C29.3106 16.7289 30.0633 17.1272 30.6885 17.6636C31.2915 18.1809 31.9623 18.9853 32.7725 19.9943C33.5799 21.0011 34.2246 21.8033 34.6516 22.4624C35.073 23.1128 35.409 23.8066 35.3637 24.5819C35.3178 25.3658 34.8962 25.9905 34.4324 26.5332C33.9708 27.0731 33.2937 27.7204 32.5133 28.503C32.5044 28.5119 32.4993 28.5179 32.4938 28.545C32.4858 28.5855 32.479 28.6799 32.5153 28.8475C32.5918 29.1997 32.8178 29.6957 33.2254 30.3241C34.0282 31.5617 35.3405 33.0219 36.7377 34.4246C36.7439 34.4305 36.751 34.4359 36.7571 34.442C38.1641 35.8495 39.631 37.1732 40.8729 37.9827C41.5008 38.392 41.9966 38.6194 42.3483 38.6964C42.5163 38.7331 42.61 38.7259 42.6496 38.7179C42.6761 38.7126 42.6801 38.7079 42.6885 38.6995C43.4656 37.9211 44.1105 37.2441 44.6485 36.782C45.1896 36.3174 45.8133 35.8948 46.5963 35.8468C47.3718 35.7994 48.0664 36.1341 48.7182 36.5564C49.2135 36.8773 49.7883 37.3209 50.4692 37.8648L51.1864 38.4411L51.1895 38.4441C52.1357 39.2138 52.9199 39.8499 53.4324 40.4129C53.9576 40.99 54.4029 41.7113 54.2479 42.6288C54.1159 43.4096 53.5679 44.0935 52.9877 44.7247C52.3772 45.3887 51.4918 46.232 50.4211 47.2974L50.4129 47.3056C49.5955 48.1003 48.3873 48.3917 47.1137 48.3781C45.8155 48.3643 44.2904 48.0363 42.6403 47.4112C39.5407 46.2369 35.8701 43.9651 32.1977 40.458L31.4631 39.7392C27.5573 35.827 25.0365 31.9182 23.7735 28.6301C23.1431 26.9887 22.8118 25.4648 22.8033 24.1512C22.7948 22.8512 23.1056 21.6399 23.8965 20.7859L23.916 20.7644C24.907 19.7522 25.7243 18.8633 26.3535 18.2563C26.9605 17.6706 27.6259 17.1018 28.3955 16.9315ZM28.8483 18.9812C28.7232 19.009 28.4417 19.1586 27.8104 19.7677C27.2048 20.3521 26.495 21.1283 25.4344 22.2122C25.1405 22.5296 24.8952 23.1339 24.9016 24.1369C24.908 25.1265 25.1633 26.3943 25.7326 27.8765C26.8693 30.8359 29.2031 34.5046 32.9467 38.2544C36.6886 41.999 40.4006 44.3165 43.3832 45.4465C44.8776 46.0127 46.1533 46.2677 47.1362 46.2781C48.0173 46.2875 48.5518 46.1025 48.8412 45.8916L48.9508 45.7993C50.0729 44.683 50.8764 43.9194 51.4436 43.3024C52.0419 42.6517 52.1622 42.3794 52.1793 42.2791C52.1806 42.2715 52.1852 42.2639 52.166 42.2186C52.1375 42.1519 52.0637 42.0275 51.8811 41.8269C51.5003 41.4086 50.8668 40.8877 49.8658 40.0735C48.8275 39.2363 48.1245 38.6743 47.5778 38.3201C47.0225 37.9602 46.8063 37.9378 46.7244 37.9427C46.6502 37.9473 46.4686 37.9864 46.0143 38.3765C45.5573 38.769 45.0161 39.3399 44.1721 40.1853L44.1711 40.1863C43.5047 40.8519 42.6372 40.9087 41.8996 40.7472C41.1828 40.5902 40.4368 40.2047 39.7274 39.7423C38.3051 38.8151 36.7249 37.3767 35.3043 35.9576C35.294 35.9481 35.2825 35.9399 35.2725 35.9299C33.8457 34.4989 32.3971 32.9026 31.4662 31.4674C31.0053 30.7568 30.6197 30.0104 30.4641 29.2925C30.304 28.5535 30.3636 27.6854 31.0287 27.0192C31.8753 26.1703 32.4463 25.6257 32.8381 25.1674C33.2273 24.7119 33.2652 24.5318 33.2694 24.4588C33.2742 24.3772 33.251 24.1614 32.8903 23.6047C32.535 23.0564 31.9737 22.3519 31.1373 21.3088C30.3001 20.2663 29.7516 19.6252 29.3237 19.2581C29.1183 19.0819 28.9918 19.0146 28.9262 18.9904C28.8816 18.974 28.8683 18.9768 28.8483 18.9812Z" fill="white"/>
 </svg>

package/src/assets/icons/pictogram-tariffs.svg

@@ -1,9 +1,5 @@
-<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_3153_361" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="61" height="60">
-<path d="M60.9375 0H0V60H60.9375V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_3153_361)">
-<path d="M45.0009 52.5C45.0009 54.0532 43.7415 55.3123 42.1884 55.3125H18.2812C16.7279 55.3125 15.4688 54.0533 15.4688 52.5V51.0938H45.0009V52.5ZM45.0009 49.6865H15.4688V10.3115H45.0009V49.6865ZM42.1884 4.6875C43.7415 4.68769 45.0009 5.94682 45.0009 7.5V8.90625H15.4688V7.5C15.4688 5.9467 16.7279 4.6875 18.2812 4.6875H42.1884Z" fill="#FFC48F"/>
-<path d="M33.5927 33.4381C30.8936 30.7332 28.3136 27.6002 29.5475 26.3652C32.6498 23.2568 32.8566 23.4989 29.7228 19.5941C26.582 15.6857 26.7082 16.3874 22.7752 20.401C20.707 22.6323 22.67 29.7684 29.9612 37.0658C37.2593 44.3632 44.5785 46.2437 46.6187 44.2615C50.8076 40.097 51.1371 40.3321 47.4249 37.3149C43.5234 34.1714 43.7513 34.3959 40.6595 37.4903C39.4257 38.7218 36.2954 36.1361 33.5927 33.4346V33.4381Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
+<svg width="64" height="63" viewBox="0 0 64 63" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M47.9845 55.2031C47.9845 56.834 46.6632 58.156 45.0337 58.1562H19.9507C18.321 58.1562 17 56.8341 17 55.2031V53.7266H47.9845V55.2031ZM47.9845 52.2489H17V10.9052H47.9845V52.2489ZM45.0337 5C46.6632 5.0002 47.9845 6.32229 47.9845 7.95312V9.42969H17V7.95312C17 6.32216 18.321 5 19.9507 5H45.0337Z" fill="#FFC48F"/>
+  <path d="M28.3954 16.9315C29.3106 16.7289 30.0632 17.1272 30.6884 17.6636C31.2915 18.1809 31.9623 18.9853 32.7725 19.9943C33.5798 21.0011 34.2245 21.8033 34.6516 22.4624C35.0729 23.1128 35.409 23.8066 35.3637 24.5819C35.3177 25.3658 34.8962 25.9905 34.4323 26.5332C33.9708 27.0731 33.2936 27.7204 32.5132 28.503C32.5043 28.5119 32.4993 28.5179 32.4938 28.545C32.4857 28.5855 32.479 28.6799 32.5153 28.8475C32.5917 29.1997 32.8178 29.6957 33.2253 30.3241C34.0281 31.5617 35.3405 33.0219 36.7376 34.4246C36.7439 34.4305 36.751 34.4359 36.7571 34.442C38.1641 35.8495 39.6309 37.1732 40.8729 37.9827C41.5008 38.392 41.9966 38.6194 42.3483 38.6964C42.5162 38.7331 42.6099 38.7259 42.6495 38.7179C42.6761 38.7126 42.68 38.7079 42.6885 38.6995C43.4655 37.9211 44.1104 37.2441 44.6485 36.782C45.1896 36.3174 45.8132 35.8948 46.5962 35.8468C47.3717 35.7994 48.0663 36.1341 48.7182 36.5564C49.2135 36.8773 49.7883 37.3209 50.4692 37.8648L51.1864 38.4411L51.1895 38.4441C52.1357 39.2138 52.9199 39.8499 53.4323 40.4129C53.9576 40.99 54.4028 41.7113 54.2479 42.6288C54.1159 43.4096 53.5679 44.0935 52.9876 44.7247C52.3771 45.3887 51.4918 46.232 50.421 47.2974L50.4128 47.3056C49.5955 48.1003 48.3873 48.3917 47.1137 48.3781C45.8155 48.3643 44.2903 48.0363 42.6403 47.4112C39.5407 46.2369 35.87 43.9651 32.1977 40.458L31.463 39.7392C27.5572 35.827 25.0364 31.9182 23.7735 28.6301C23.143 26.9887 22.8118 25.4648 22.8032 24.1512C22.7948 22.8512 23.1056 21.6399 23.8964 20.7859L23.9159 20.7644C24.907 19.7522 25.7243 18.8633 26.3534 18.2563C26.9604 17.6706 27.6259 17.1018 28.3954 16.9315ZM28.8483 18.9812C28.7231 19.009 28.4416 19.1586 27.8104 19.7677C27.2047 20.3521 26.495 21.1283 25.4344 22.2122C25.1404 22.5296 24.8951 23.1339 24.9016 24.1369C24.908 25.1265 25.1632 26.3943 25.7325 27.8765C26.8692 30.8359 29.2031 34.5046 32.9466 38.2544C36.6886 41.999 40.4006 44.3165 43.3831 45.4465C44.8776 46.0127 46.1532 46.2677 47.1362 46.2781C48.0173 46.2875 48.5517 46.1025 48.8411 45.8916L48.9507 45.7993C50.0728 44.683 50.8764 43.9194 51.4436 43.3024C52.0419 42.6517 52.1622 42.3794 52.1792 42.2791C52.1805 42.2715 52.1852 42.2639 52.1659 42.2186C52.1374 42.1519 52.0636 42.0275 51.8811 41.8269C51.5003 41.4086 50.8667 40.8877 49.8657 40.0735C48.8275 39.2363 48.1245 38.6743 47.5778 38.3201C47.0224 37.9602 46.8062 37.9378 46.7243 37.9427C46.6501 37.9473 46.4685 37.9864 46.0143 38.3765C45.5573 38.769 45.016 39.3399 44.1721 40.1853L44.171 40.1863C43.5047 40.8519 42.6371 40.9087 41.8995 40.7472C41.1828 40.5902 40.4367 40.2047 39.7274 39.7423C38.305 38.8151 36.7249 37.3767 35.3042 35.9576C35.294 35.9481 35.2824 35.9399 35.2725 35.9299C33.8456 34.4989 32.3971 32.9026 31.4661 31.4674C31.0052 30.7568 30.6197 30.0104 30.4641 29.2925C30.3039 28.5535 30.3635 27.6854 31.0286 27.0192C31.8753 26.1703 32.4463 25.6257 32.838 25.1674C33.2273 24.7119 33.2651 24.5318 33.2694 24.4588C33.2741 24.3772 33.251 24.1614 32.8903 23.6047C32.535 23.0564 31.9736 22.3519 31.1372 21.3088C30.3001 20.2663 29.7515 19.6252 29.3237 19.2581C29.1183 19.0819 28.9917 19.0146 28.9262 18.9904C28.8815 18.974 28.8682 18.9768 28.8483 18.9812Z" fill="black"/>
 </svg>

package/src/assets/icons/pictogram-wallet--dark.svg

@@ -0,0 +1,6 @@
+<svg width="62" height="64" viewBox="0 0 62 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.20001 22.1C9.20001 19.0072 11.7072 16.5 14.8 16.5H49.8V20.7H54C54 33.7934 54 39.7026 54 51.5H14.8C11.7072 51.5 9.20001 48.9928 9.20001 45.9V22.1ZM48.4 17.9H16.2C15.4268 17.9 14.8 18.5268 14.8 19.3C14.8 20.0732 15.4268 20.7 16.2 20.7H48.4V17.9Z" fill="#DA8436"/>
+<path d="M27.2296 19.9778H45.5391" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path d="M27.2296 27.1709H42.9234" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path d="M50.7703 33.0562C44.2312 43.5186 30.4992 38.2873 30.4992 23.9011C30.4992 7.55361 45.5391 2.97613 50.7703 14.0927" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/assets/icons/pictogram-wallet.svg

@@ -0,0 +1,6 @@
+<svg width="62" height="64" viewBox="0 0 62 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.20001 22.1C9.20001 19.0072 11.7072 16.5 14.8 16.5H49.8V20.7H54C54 33.7934 54 39.7026 54 51.5H14.8C11.7072 51.5 9.20001 48.9928 9.20001 45.9V22.1ZM48.4 17.9H16.2C15.4268 17.9 14.8 18.5268 14.8 19.3C14.8 20.0732 15.4268 20.7 16.2 20.7H48.4V17.9Z" fill="#FFC48F"/>
+<path d="M27.2296 19.9778H45.5391" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<path d="M27.2296 27.1709H42.9234" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<path d="M50.7703 33.0562C44.2312 43.5186 30.4992 38.2873 30.4992 23.9011C30.4992 7.55361 45.5391 2.97613 50.7703 14.0927" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/components/Accordion/styles/mixins.scss

@@ -5,6 +5,7 @@
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/convert";
+@use "../../../styles/tools/layout";
 @use "../../../styles/typography/mixins" as typoMixins;
 @use "./config";
 @use "sass:math";
@@ -82,10 +83,7 @@
 @mixin body {
   margin-top: space.get();
   margin-bottom: space.get("large");
-
-  p:last-child {
-    margin-bottom: 0;
-  }
+  @include layout.reset-last-child-margin-bottom;
 }
 
 @mixin icon {

package/src/components/BlockAction/styles/mixins.scss

@@ -19,7 +19,7 @@
 
 @mixin override {
   position: relative;
-  z-index: 1;
+  z-index: 2;
 }
 
 @mixin indicator($bg-color: "default", $config: config.$indicator-colors) {

package/src/components/BlockAction/styles/style.scss

@@ -35,7 +35,7 @@
     }
 
     &--border-on-hover:has(.block-action__control:hover),
-    &--border-on-hover:has(.block-action__control:focus) {
+    &--border-on-hover:has(.block-action__control:focus-visible) {
       @include mixins.border;
     }
   }

package/src/components/BlockAction/tests/BlockAction.styles.unit.test.jsx

@@ -0,0 +1,18 @@
+import path from "path";
+import sass from "sass";
+
+describe("BlockAction styles", () => {
+  it("keeps override above control overlay regardless of DOM order", () => {
+    const result = sass.compile(
+      path.resolve(
+        process.cwd(),
+        "src/components/BlockAction/styles/style.scss",
+      ),
+    );
+
+    expect(result.css).toContain(".block-action__control::before");
+    expect(result.css).toContain("z-index: 1;");
+    expect(result.css).toContain(".block-action__override");
+    expect(result.css).toContain("z-index: 2;");
+  });
+});

package/src/components/Card/styles/mixins.scss

@@ -1,5 +1,6 @@
 @use "./config";
 @use "../../../styles/tools/generate";
+@use "../../../styles/tools/layout";
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
@@ -37,7 +38,10 @@
 
 @mixin card-section($spacing) {
   @include card-spacing($spacing);
+  @include layout.reset-last-child-margin-bottom;
+}
 
+@mixin card-section-actions() {
   > {
     .btn,
     button {

package/src/components/Card/styles/style.scss

@@ -8,6 +8,7 @@
 
     &__section {
       @include mixins.card-section(null);
+      @include mixins.card-section-actions;
 
       &--space-small {
         @include mixins.card-section(space.get());

package/src/components/Carousel/Carousel.tsx

@@ -39,6 +39,10 @@ const Carousel: React.FC<CarouselProps> = ({
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselStatic);
+  const { ["data-swiper-options"]: _dataSwiperOptionsAttr, ...domProps } =
+    other as HTMLAttributes<HTMLDivElement> & {
+      "data-swiper-options"?: string;
+    };
 
   const carouselItems = items.map((item, i) => (
     <CarouselItem key={i.toString()}>{item}</CarouselItem>
@@ -55,7 +59,6 @@ const Carousel: React.FC<CarouselProps> = ({
     dots: cx(CLASS_DOTS, showScrollbar ? "hide" : "show-md"),
   };
 
-  // Only override pagination when showScrollbar is true
   const customSwiperOptions = showScrollbar
     ? {
         pagination: {
@@ -70,10 +73,10 @@ const Carousel: React.FC<CarouselProps> = ({
       className={classes}
       ref={carouselRef}
       data-carousel
-      {...(showScrollbar || swiperOptions
+      {...(showScrollbar || customSwiperOptions
         ? { "data-swiper-options": JSON.stringify(customSwiperOptions) }
         : {})}
-      {...other}
+      {...domProps}
     >
       <div className={CLASS_VIEWPORT_WRAPPER}>
         <div className={CLASS_VIEWPORT}>

package/src/components/CarouselHero/styles/mixins.scss

@@ -1,7 +1,6 @@
 @use "sass:map" as sass-map;
 @use "sass:math";
 @use "../../../styles/tokens/base";
-@use "../../../styles/tokens/space";
 @use "../../../styles/tools/convert";
 @use "../../../styles/tools/generate";
 @use "../../../styles/tokens/breakpoint";
@@ -14,7 +13,6 @@
 @mixin base {
   margin: 0 auto;
   position: relative;
-  margin-bottom: space.get("large");
   background: var(--color-surface-primary);
   border-bottom: 1px solid var(--color-border-subtle);
 }
@@ -99,7 +97,7 @@
   cursor: pointer;
   color: var(--color-text-default);
   text-align: center;
-  flex: 0;
+  flex: 1;
   white-space: nowrap;
   font-weight: 700;
   font-size: convert.to-rem(14px);

package/src/components/CarouselPromotions/styles/mixins.scss

@@ -254,7 +254,7 @@
     @include generate.css-map(sass-map.get(config.$dot, "active"));
   }
 
-  .is-autoplay &.is-active:not(:focus) {
+  .is-autoplay &.is-active:not(:focus-visible) {
     outline: none;
   }
 
@@ -262,7 +262,7 @@
     @include generate.css-map(sass-map.get(config.$dot, "default"));
   }
 
-  &:focus:not(:active) {
+  &:focus-visible:not(:active) {
     @include generate.css-map(sass-map.get(config.$dot, "focus"));
   }
 }

package/src/components/Cover/styles/mixins.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../../styles/tokens/color";
 @use "../../../styles/tools/generate";
+@use "../../../styles/tools/layout";
 @use "./config";
 
 @mixin base {
@@ -13,6 +14,7 @@
   transform: translate3d(0, 0, 0);
   z-index: 1;
   width: 100%;
+  @include layout.reset-last-child-margin-bottom;
 }
 
 @mixin content-size($size, $config: config.$sizes) {

package/src/components/FeatureAccordion/FeatureAccordion.static.ts

@@ -3,13 +3,11 @@ import toggle from "../../scripts/modules/toggleUtil";
 interface FeatureAccordionConfig {
   bodiesSelector: string;
   buttonSelector: string;
-  imageSelector: string;
 }
 
 const defaultConfig: FeatureAccordionConfig = {
   bodiesSelector: ".accordion__body",
   buttonSelector: "[data-feature-accordion-toggle]",
-  imageSelector: "[data-feature-accordion-image]",
 };
 
 export default class FeatureAccordion {
@@ -18,7 +16,6 @@ export default class FeatureAccordion {
   private bodies: HTMLElement[] = [];
   private buttons: HTMLElement[] = [];
   private images: HTMLElement[] = [];
-  private activeId: string | null = null;
 
   constructor(element: HTMLElement, config?: Partial<FeatureAccordionConfig>) {
     this.element = element;
@@ -35,8 +32,9 @@ export default class FeatureAccordion {
     this.buttons = Array.from(
       this.element.querySelectorAll(this.config.buttonSelector),
     );
-
-    this.generateImagesFromDataAttributes();
+    this.images = Array.from(
+      this.element.querySelectorAll("[data-feature-accordion-image]"),
+    ) as HTMLElement[];
 
     this.setActive(0);
 
@@ -45,71 +43,6 @@ export default class FeatureAccordion {
     });
   }
 
-  private generateImagesFromDataAttributes(): void {
-    const desktopPreview = this.element.querySelector(
-      ".feature-accordion__preview.show-md",
-    );
-
-    if (!desktopPreview) return;
-
-    const existingImages = desktopPreview.querySelectorAll(
-      this.config.imageSelector,
-    );
-
-    if (existingImages.length > 0) {
-      this.images = Array.from(existingImages) as HTMLElement[];
-      return;
-    }
-
-    this.images = [];
-
-    this.buttons.forEach((button) => {
-      const imageUrl = button.getAttribute("data-image-url");
-      const imageAlt = button.getAttribute("data-image-alt") || "";
-      const imageSrcSet = button.getAttribute("data-image-srcset");
-
-      if (!imageUrl) return;
-
-      const img = document.createElement("img");
-      img.setAttribute("data-feature-accordion-image", "");
-      img.src = imageUrl;
-      img.alt = imageAlt;
-      if (imageSrcSet) {
-        img.srcset = imageSrcSet;
-      }
-
-      desktopPreview.appendChild(img);
-      this.images.push(img);
-
-      const bodyId = button.getAttribute("aria-controls");
-      if (bodyId) {
-        const body = document.getElementById(bodyId);
-        if (body) {
-          let mobilePreview = body.querySelector(
-            ".feature-accordion__preview.hide-md",
-          );
-
-          if (!mobilePreview) {
-            mobilePreview = document.createElement("div");
-            mobilePreview.className = "feature-accordion__preview hide-md";
-            body.appendChild(mobilePreview);
-          }
-
-          const mobileImg = document.createElement("img");
-          mobileImg.setAttribute("data-feature-accordion-image", "");
-          mobileImg.src = imageUrl;
-          mobileImg.alt = imageAlt;
-          mobileImg.className = "feature-accordion__image--mobile";
-          if (imageSrcSet) {
-            mobileImg.srcset = imageSrcSet;
-          }
-
-          mobilePreview.appendChild(mobileImg);
-        }
-      }
-    });
-  }
-
   private onClick = (e: Event): void => {
     const button = e.currentTarget as HTMLElement;
     const index = this.buttons.indexOf(button);
@@ -118,7 +51,6 @@ export default class FeatureAccordion {
 
   private setActive(index: number): void {
     if (index < 0 || index >= this.buttons.length) return;
-    this.activeId = this.buttons[index].getAttribute("id");
 
     this.bodies.forEach((body) => {
       body.setAttribute("hidden", "");

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -4,8 +4,6 @@ import cx from "classnames";
 import React, { RefCallback, useMemo } from "react";
 import { useStatic } from "../../utils/hooks";
 import { Accordion } from "../Accordion/Accordion";
-import { Grid } from "../Grid/Grid";
-import { GridCol } from "../Grid/GridCol";
 import { Image } from "../Image";
 import FeatureAccordionStatic from "./FeatureAccordion.static";
 
@@ -19,6 +17,7 @@ export interface FeatureAccordionImageSrc {
 export interface FeatureAccordionImageResponsive {
   default: string;
   sm?: string;
+  md?: string;
   lg?: string;
   xl?: string;
   xxl?: string;
@@ -32,12 +31,21 @@ export type FeatureAccordionImage =
 interface AccordionProps {
   /** Additional CSS classes */
   className?: string;
+  /** Additional CSS classes for preview area */
+  previewClassName?: string;
 }
 
+const getImageData = (props: Record<string, any>) => ({
+  id: props.id,
+  imageSrc: props.image || props.imageUrl,
+  imageAlt: props.imageAlt,
+  imageSrcSet: props.imageSrcSet,
+});
+
 const FeatureAccordion = (
   props: AccordionProps & { children: React.ReactNode },
 ) => {
-  const { className, children, ...other } = props;
+  const { className, previewClassName, children, ...other } = props;
   const [featureAccordionRef] = useStatic(FeatureAccordionStatic);
 
   const classes = cx(CLASS_ROOT, className);
@@ -50,73 +58,29 @@ const FeatureAccordion = (
   // Extract image data once to avoid duplication
   const childrenWithImageData = useMemo(
     () =>
-      childrenArray.map((child) => ({
-        child,
-        id: child.props.id,
-        imageSrc:
-          child.props["data-image"] ||
-          child.props.image ||
-          child.props["data-image-url"] ||
-          child.props.imageUrl,
-        imageAlt: child.props["data-image-alt"] || child.props.imageAlt,
-        imageSrcSet:
-          child.props["data-image-srcset"] || child.props.imageSrcSet,
-        imageUrl: child.props["data-image-url"] || child.props.imageUrl,
-      })),
+      childrenArray.map((child) => ({ child, ...getImageData(child.props) })),
     [childrenArray],
   );
 
   return (
-    <Grid
+    <div
       className={classes}
       data-feature-accordion
       ref={featureAccordionRef as RefCallback<HTMLDivElement>}
       {...other}
     >
-      <GridCol
-        size={{
-          xs: 12,
-          md: 6,
-        }}
-        className={`${CLASS_ROOT}__accordion`}
-      >
+      <div className={`${CLASS_ROOT}__accordion`}>
         <Accordion>
-          {childrenWithImageData.map(
-            ({ child, id, imageSrc, imageAlt, imageSrcSet, imageUrl }) => {
-              if (!imageSrc) return null;
+          {childrenWithImageData.map(({ child, imageSrc }) => {
+            if (!imageSrc) return null;
 
-              return React.cloneElement(child, {
-                children: (
-                  <>
-                    <div className={`${CLASS_ROOT}__content`}>
-                      {child.props.children}
-                    </div>
-                    <div className={cx(`${CLASS_ROOT}__preview`, "hide-md")}>
-                      <Image
-                        key={id}
-                        data-feature-accordion-image
-                        src={imageSrc}
-                        alt={imageAlt}
-                        srcSet={imageSrcSet}
-                        className={`${CLASS_ROOT}__image--mobile`}
-                      />
-                    </div>
-                  </>
-                ),
-              });
-            },
-          )}
+            return child;
+          })}
         </Accordion>
-      </GridCol>
-      <GridCol
-        size={{
-          xs: 12,
-          md: 6,
-        }}
-        className={cx(`${CLASS_ROOT}__preview`, "show-md")}
-      >
+      </div>
+      <div className={cx(`${CLASS_ROOT}__preview`, previewClassName)}>
         {childrenWithImageData.map(
-          ({ id, imageSrc, imageAlt, imageSrcSet, imageUrl }, index) => {
+          ({ id, imageSrc, imageAlt, imageSrcSet }, index) => {
             if (!imageSrc) return null;
 
             return (
@@ -131,8 +95,8 @@ const FeatureAccordion = (
             );
           },
         )}
-      </GridCol>
-    </Grid>
+      </div>
+    </div>
   );
 };
 

package/src/components/FeatureAccordion/FeatureAccordionItem.tsx

@@ -3,11 +3,13 @@
 import cx from "classnames";
 import React from "react";
 import { AccordionItem, AccordionItemProps } from "../Accordion/AccordionItem";
+import type { FeatureAccordionImage } from "./FeatureAccordion";
 
 const CLASS_ROOT = "feature-accordion__item";
+const CLASS_CONTENT = "feature-accordion__content";
 
 interface FeatureAccordionItemProps extends AccordionItemProps {
-  image?: string | object;
+  image?: string | FeatureAccordionImage;
   imageUrl?: string;
   imageAlt?: string;
   imageSrcSet?: string;
@@ -15,25 +17,18 @@ interface FeatureAccordionItemProps extends AccordionItemProps {
 }
 
 const FeatureAccordionItem: React.FC<FeatureAccordionItemProps> = ({
-  image,
-  imageUrl,
-  imageAlt,
-  imageSrcSet,
+  image: _image,
+  imageUrl: _imageUrl,
+  imageAlt: _imageAlt,
+  imageSrcSet: _imageSrcSet,
   className,
+  children,
   ...props
 }) => {
-  const dataImageUrl = props["data-image-url"] || imageUrl;
-  const dataImageAlt = props["data-image-alt"] || imageAlt;
-  const dataImage = props["data-image"] || image;
-  const dataImageSrcSet = props["data-image-srcset"] || imageSrcSet;
-
   return (
     <AccordionItem
       className={cx(CLASS_ROOT, className)}
-      data-image-url={dataImageUrl}
-      data-image-alt={dataImageAlt}
-      data-image={dataImage}
-      data-image-srcset={dataImageSrcSet}
+      children={<div className={CLASS_CONTENT}>{children}</div>}
       toggleAttribute="data-feature-accordion-toggle"
       {...props}
     />