@myelmut/design-system 0.1.47 → 0.1.49

package/src/components/SVG/polaroid-thread.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 36 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_g_1682_441)">
+<path d="M30.7629 40.8408C31.3152 40.8408 31.7629 40.3931 31.7629 39.8408C31.7629 39.2885 31.3152 38.8408 30.7629 38.8408V39.8408V40.8408ZM10.0864 3.30746L9.70431 2.38335L10.0864 3.30746ZM33.1529 24.2639L33.1204 25.2634L35.1193 25.3284L35.1518 24.3289L34.1523 24.2964L33.1529 24.2639ZM30.7629 39.8408V38.8408C27.1629 38.8408 22.7762 37.2192 18.504 34.5414C14.2501 31.8751 10.2184 28.229 7.32983 24.329C4.42396 20.4057 2.76947 16.3567 3.0261 12.8578C3.27435 9.47312 5.33374 6.35477 10.4685 4.23158L10.0864 3.30746L9.70431 2.38335C4.03656 4.72691 1.34706 8.4086 1.03146 12.7115C0.72424 16.9001 2.69093 21.4261 5.72265 25.5194C8.7717 29.6361 12.994 33.4482 17.4418 36.2361C21.8714 39.0125 26.6342 40.8408 30.7629 40.8408V39.8408ZM10.0864 3.30746L10.4685 4.23158C15.7891 2.03159 21.5683 2.82709 25.957 6.23235C30.3388 9.63225 33.4307 15.7173 33.1529 24.2639L34.1523 24.2964L35.1518 24.3289C35.4469 15.2537 32.1536 8.50895 27.183 4.65222C22.2194 0.800831 15.6792 -0.0872049 9.70431 2.38335L10.0864 3.30746Z" fill="currentColor"/>
+<path d="M30.4133 35.2615C30.6452 36.1309 30.9675 37.5931 31.2749 39.6661C31.5658 41.6285 31.3976 43.1543 30.6627 44.9205" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_g_1682_441" x="0.499939" y="0.5" width="35.1702" height="45.9207" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="0.3333333432674408 0.3333333432674408" numOctaves="3" seed="3005" />
+<feDisplacementMap in="shape" scale="1" xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
+<feMerge result="effect1_texture_1682_441">
+<feMergeNode in="displacedImage"/>
+</feMerge>
+</filter>
+</defs>
+</svg>

package/src/components/SVG/profil.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.85714 3.07144C7.85714 4.64939 6.57796 5.92858 5 5.92858C3.42204 5.92858 2.14286 4.64939 2.14286 3.07144C2.14286 1.49348 3.42204 0.214294 5 0.214294C6.57796 0.214294 7.85714 1.49348 7.85714 3.07144Z" fill="currentColor"/>
+<path d="M10 10.9286C10 12.5065 7.76142 13.7857 5 13.7857C2.23858 13.7857 0 12.5065 0 10.9286C0 9.35062 2.23858 8.07144 5 8.07144C7.76142 8.07144 10 9.35062 10 10.9286Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/quote.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0317 0.647687C11.0886 1.88909 9.46937 4.156 9.63129 5.88317C9.90116 8.20405 13.1396 6.63881 13.7873 9.66135C14.0572 11.2266 13.0856 12.6299 11.5204 12.8998C9.63129 13.2776 8.17399 11.8203 7.7422 9.5534C6.98657 5.18151 10.0631 1.4573 12.6538 0L13.0317 0.647687ZM0.131863 9.5534C-0.677748 5.23548 2.39877 1.51127 5.0435 0L5.42132 0.701663C3.42428 1.88909 1.80506 4.20998 2.02095 5.93715C2.29082 8.20405 5.52927 6.69278 6.12298 9.71533C6.44683 11.2806 5.47529 12.6839 3.91005 12.9538C2.02095 13.2776 0.563655 11.8743 0.131863 9.5534Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/recipe-bg-shape.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1051 549" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2148 549C2113.18 469.766 2072.13 406.361 2034.19 351.68C1979.97 273.439 1933.72 224.237 1842.01 166.161C1634.69 35.4907 1467.23 0.000123591 1053.37 8.741e-05C639.513 5.12294e-05 528.672 80.6606 447.336 108.085C227.283 181.012 75.4773 349.042 0 549L2148 549Z" fill="#802948"/>
+</svg>

package/src/components/SVG/star.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.38169 0.440751C8.61486 -0.102569 9.38514 -0.102569 9.61831 0.440751L11.5399 4.91842C11.6373 5.14529 11.8511 5.30062 12.0969 5.32311L16.9493 5.767C17.538 5.82086 17.7761 6.55344 17.3314 6.94309L13.6667 10.1543C13.481 10.317 13.3993 10.5684 13.4539 10.8091L14.5312 15.5611C14.6619 16.1378 14.0388 16.5905 13.5308 16.288L9.34425 13.795C9.13213 13.6687 8.86787 13.6687 8.65575 13.795L4.46922 16.288C3.96123 16.5905 3.33806 16.1378 3.46878 15.5611L4.54607 10.8091C4.60065 10.5684 4.51899 10.317 4.33331 10.1543L0.668603 6.94309C0.223928 6.55344 0.461957 5.82086 1.05074 5.767L5.90307 5.32311C6.14892 5.30062 6.36271 5.14529 6.46008 4.91842L8.38169 0.440751Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/subtract.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5924 1.20027C7.34888 1.4078 7.22711 1.51158 7.09706 1.59874C6.79896 1.79854 6.46417 1.93721 6.1121 2.00672C5.95851 2.03705 5.79903 2.04977 5.48008 2.07522C4.6787 2.13918 4.278 2.17115 3.94371 2.28923C3.17051 2.56233 2.56233 3.17051 2.28923 3.94371C2.17115 4.278 2.13918 4.6787 2.07522 5.48008C2.04977 5.79903 2.03705 5.95851 2.00672 6.1121C1.93721 6.46417 1.79854 6.79896 1.59874 7.09706C1.51158 7.22711 1.40781 7.34887 1.20027 7.5924C0.678835 8.20428 0.418104 8.51023 0.265216 8.83011C-0.0884052 9.56995 -0.0884052 10.43 0.265216 11.1699C0.418105 11.4898 0.678827 11.7957 1.20027 12.4076C1.40778 12.6511 1.51158 12.7729 1.59874 12.9029C1.79854 13.201 1.93721 13.5358 2.00672 13.8879C2.03705 14.0415 2.04977 14.201 2.07522 14.5199C2.13918 15.3213 2.17115 15.722 2.28923 16.0563C2.56233 16.8295 3.17051 17.4377 3.94371 17.7108C4.278 17.8288 4.6787 17.8608 5.48008 17.9248C5.79903 17.9502 5.95851 17.963 6.1121 17.9933C6.46417 18.0628 6.79896 18.2015 7.09706 18.4013C7.22711 18.4884 7.34887 18.5922 7.5924 18.7997C8.20429 19.3212 8.51023 19.5819 8.83011 19.7348C9.56995 20.0884 10.43 20.0884 11.1699 19.7348C11.4898 19.5819 11.7957 19.3212 12.4076 18.7997C12.6511 18.5922 12.7729 18.4884 12.9029 18.4013C13.201 18.2015 13.5358 18.0628 13.8879 17.9933C14.0415 17.963 14.201 17.9502 14.5199 17.9248C15.3213 17.8608 15.722 17.8288 16.0563 17.7108C16.8295 17.4377 17.4377 16.8295 17.7108 16.0563C17.8288 15.722 17.8608 15.3213 17.9248 14.5199C17.9502 14.201 17.963 14.0415 17.9933 13.8879C18.0628 13.5358 18.2015 13.201 18.4013 12.9029C18.4884 12.7729 18.5922 12.6511 18.7997 12.4076C19.3212 11.7957 19.5819 11.4898 19.7348 11.1699C20.0884 10.43 20.0884 9.56995 19.7348 8.83011C19.5819 8.51023 19.3212 8.20429 18.7997 7.5924C18.5922 7.34887 18.4884 7.22711 18.4013 7.09706C18.2015 6.79896 18.0628 6.46417 17.9933 6.1121C17.963 5.95851 17.9502 5.79903 17.9248 5.48008C17.8608 4.6787 17.8288 4.278 17.7108 3.94371C17.4377 3.17051 16.8295 2.56233 16.0563 2.28923C15.722 2.17115 15.3213 2.13918 14.5199 2.07522C14.201 2.04977 14.0415 2.03705 13.8879 2.00672C13.5358 1.93721 13.201 1.79854 12.9029 1.59874C12.7729 1.51158 12.6511 1.40781 12.4076 1.20027C11.7957 0.678828 11.4898 0.418105 11.1699 0.265216C10.43 -0.0884052 9.56995 -0.0884052 8.83011 0.265216C8.51023 0.418105 8.20428 0.678833 7.5924 1.20027ZM13.8309 6.16959C14.1487 6.48742 14.1487 7.00273 13.8309 7.32056L7.32003 13.8314C7.0022 14.1493 6.48689 14.1493 6.16906 13.8314C5.85123 13.5136 5.85123 12.9983 6.16906 12.6805L12.6799 6.16959C12.9978 5.85176 13.5131 5.85176 13.8309 6.16959ZM13.798 12.7134C13.798 13.3127 13.3122 13.7985 12.7129 13.7985C12.1135 13.7985 11.6277 13.3127 11.6277 12.7134C11.6277 12.1141 12.1135 11.6282 12.7129 11.6282C13.3122 11.6282 13.798 12.1141 13.798 12.7134ZM7.28712 8.3728C7.88643 8.3728 8.37227 7.88696 8.37227 7.28765C8.37227 6.68834 7.88643 6.2025 7.28712 6.2025C6.68781 6.2025 6.20197 6.68834 6.20197 7.28765C6.20197 7.88696 6.68781 8.3728 7.28712 8.3728Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/trustpilot.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 95 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.6782 58.0245V49.7689H28.8026V50.9955H24.9048V52.9886H28.0419V54.2152H24.9048V56.798H28.8026V58.0245H23.6782ZM29.4171 58.0245L31.5753 55.0643L29.4288 52.1159H30.9443L32.3301 54.0147L33.7217 52.1159H35.2313L33.0908 55.0643L35.249 58.0245H33.7335L32.3301 56.1021L30.9325 58.0245H29.4171ZM39.6049 56.3498L40.7018 56.9454C40.4344 57.3189 40.0944 57.6176 39.6816 57.8417C39.2728 58.0658 38.8285 58.1778 38.3489 58.1778C37.8064 58.1778 37.3111 58.0383 36.8629 57.7592C36.4187 57.48 36.0629 57.1066 35.7956 56.6388C35.5322 56.167 35.4005 55.6461 35.4005 55.0761C35.4005 54.6437 35.4772 54.2407 35.6305 53.8672C35.7838 53.4898 35.9941 53.1596 36.2614 52.8766C36.5327 52.5896 36.8472 52.3655 37.2049 52.2043C37.5627 52.0432 37.944 51.9626 38.3489 51.9626C38.8285 51.9626 39.2728 52.0746 39.6816 52.2987C40.0944 52.5228 40.4344 52.8235 40.7018 53.2009L39.6049 53.7965C39.4398 53.5999 39.2472 53.4505 39.0271 53.3483C38.8069 53.2422 38.5809 53.1891 38.3489 53.1891C38.0266 53.1891 37.7337 53.2776 37.4703 53.4545C37.2108 53.6274 37.0044 53.8574 36.8511 54.1444C36.7017 54.4274 36.627 54.738 36.627 55.0761C36.627 55.4102 36.7037 55.7208 36.857 56.0078C37.0103 56.2908 37.2167 56.5189 37.4762 56.6918C37.7396 56.8648 38.0305 56.9513 38.3489 56.9513C38.5927 56.9513 38.8246 56.8963 39.0447 56.7862C39.2649 56.6761 39.4516 56.5306 39.6049 56.3498ZM44.1048 58.1778C43.5623 58.1778 43.0669 58.0383 42.6188 57.7592C42.1746 57.48 41.8188 57.1066 41.5515 56.6388C41.2881 56.167 41.1564 55.6461 41.1564 55.0761C41.1564 54.6437 41.233 54.2407 41.3863 53.8672C41.5397 53.4898 41.75 53.1596 42.0173 52.8766C42.2886 52.5896 42.6031 52.3655 42.9608 52.2043C43.3185 52.0432 43.6999 51.9626 44.1048 51.9626C44.5569 51.9626 44.9716 52.0569 45.349 52.2456C45.7264 52.4304 46.0488 52.6879 46.3161 53.0181C46.5834 53.3444 46.78 53.7218 46.9058 54.1503C47.0316 54.5749 47.0689 55.027 47.0178 55.5066H42.4714C42.5225 55.7778 42.6208 56.0235 42.7662 56.2437C42.9156 56.4599 43.1043 56.6309 43.3323 56.7567C43.5642 56.8825 43.8217 56.9474 44.1048 56.9513C44.4036 56.9513 44.6748 56.8766 44.9186 56.7272C45.1662 56.5778 45.3687 56.3714 45.5259 56.108L46.7702 56.397C46.5343 56.9198 46.1785 57.3483 45.7028 57.6825C45.2272 58.0127 44.6945 58.1778 44.1048 58.1778ZM42.4301 54.569H45.7795C45.7402 54.2859 45.6399 54.0304 45.4788 53.8024C45.3215 53.5704 45.123 53.3876 44.8832 53.254C44.6473 53.1164 44.3878 53.0476 44.1048 53.0476C43.8257 53.0476 43.5662 53.1144 43.3264 53.2481C43.0905 53.3817 42.894 53.5645 42.7367 53.7965C42.5834 54.0245 42.4812 54.282 42.4301 54.569ZM47.7958 58.0245V49.1793H49.0224V58.0245H47.7958ZM50.3154 58.0245V49.1793H51.5419V58.0245H50.3154ZM55.3489 58.1778C54.8064 58.1778 54.311 58.0383 53.8629 57.7592C53.4186 57.48 53.0629 57.1066 52.7955 56.6388C52.5321 56.167 52.4004 55.6461 52.4004 55.0761C52.4004 54.6437 52.4771 54.2407 52.6304 53.8672C52.7837 53.4898 52.9941 53.1596 53.2614 52.8766C53.5326 52.5896 53.8471 52.3655 54.2049 52.2043C54.5626 52.0432 54.944 51.9626 55.3489 51.9626C55.801 51.9626 56.2157 52.0569 56.5931 52.2456C56.9705 52.4304 57.2929 52.6879 57.5602 53.0181C57.8275 53.3444 58.0241 53.7218 58.1499 54.1503C58.2757 54.5749 58.313 55.027 58.2619 55.5066H53.7154C53.7665 55.7778 53.8648 56.0235 54.0103 56.2437C54.1597 56.4599 54.3484 56.6309 54.5764 56.7567C54.8083 56.8825 55.0658 56.9474 55.3489 56.9513C55.6476 56.9513 55.9189 56.8766 56.1626 56.7272C56.4103 56.5778 56.6128 56.3714 56.77 56.108L58.0142 56.397C57.7784 56.9198 57.4226 57.3483 56.9469 57.6825C56.4712 58.0127 55.9386 58.1778 55.3489 58.1778ZM53.6742 54.569H57.0236C56.9843 54.2859 56.884 54.0304 56.7228 53.8024C56.5656 53.5704 56.3671 53.3876 56.1273 53.254C55.8914 53.1164 55.6319 53.0476 55.3489 53.0476C55.0698 53.0476 54.8103 53.1144 54.5705 53.2481C54.3346 53.3817 54.138 53.5645 53.9808 53.7965C53.8275 54.0245 53.7253 54.282 53.6742 54.569ZM64.4277 54.3272V58.0245H63.2012V54.6279C63.2012 54.3645 63.1363 54.1247 63.0066 53.9085C62.8808 53.6923 62.7098 53.5213 62.4935 53.3955C62.2812 53.2658 62.0414 53.2009 61.7741 53.2009C61.5147 53.2009 61.2768 53.2658 61.0606 53.3955C60.8444 53.5213 60.6714 53.6923 60.5417 53.9085C60.412 54.1247 60.3471 54.3645 60.3471 54.6279V58.0245H59.1205V52.1277H60.3471V52.7527C60.5515 52.509 60.8031 52.3164 61.1019 52.1748C61.4007 52.0333 61.723 51.9626 62.069 51.9626C62.5053 51.9626 62.9024 52.0687 63.2601 52.281C63.6179 52.4933 63.9009 52.7783 64.1093 53.136C64.3216 53.4938 64.4277 53.8908 64.4277 54.3272ZM68.6004 53.3542H67.362L67.3561 58.0245H66.1296L66.1355 53.3542H65.1979V52.1277H66.1355L66.1296 50.2761H67.3561L67.362 52.1277H68.6004V53.3542Z" fill="#F7EFDC" fill-opacity="0.6"/>
+<path d="M88.1498 4.55424H90.1039V1.03242H92.681V4.53248H95V6.44393H92.681V12.6711C92.681 12.9504 92.7022 13.165 92.724 13.3797C92.7454 13.5731 92.8098 13.7448 92.8742 13.8736C92.9601 14.0024 93.0888 14.11 93.2391 14.1744C93.4108 14.2388 93.6257 14.2817 93.9265 14.2817C94.0982 14.2817 94.2914 14.2817 94.4631 14.2603C94.6351 14.2388 94.8283 14.2173 95 14.1744V16.1714C94.721 16.2143 94.4417 16.2358 94.1626 16.2573C93.8833 16.3002 93.6257 16.3002 93.3249 16.3002C92.6378 16.3002 92.1012 16.2358 91.6931 16.107C91.285 15.9782 90.9631 15.7851 90.7267 15.5487C90.4906 15.2911 90.3403 14.9903 90.2542 14.6251C90.1683 14.2603 90.1254 13.8092 90.1039 13.337V6.4654H88.1498V4.51131V4.55424ZM81.4931 14.4964C82.0512 14.4964 82.5666 14.3676 82.9747 14.1315C83.4043 13.8954 83.7262 13.5731 84.0056 13.1865C84.2846 12.8001 84.4781 12.3491 84.6068 11.8766C84.7356 11.3829 84.8 10.889 84.8 10.3736C84.8 9.8796 84.7356 9.38564 84.6068 8.89167C84.4781 8.39802 84.2846 7.96844 84.0056 7.5818C83.7262 7.19546 83.3828 6.89467 82.9747 6.65857C82.5452 6.42217 82.0512 6.29339 81.4931 6.29339C80.9348 6.29339 80.4194 6.42217 80.0112 6.65857C79.582 6.89467 79.2597 7.21692 78.9807 7.5818C78.7014 7.96844 78.5082 8.39802 78.3794 8.89167C78.2503 9.38564 78.186 9.8796 78.186 10.3736C78.186 10.889 78.2503 11.3829 78.3794 11.8766C78.5082 12.3706 78.7014 12.8001 78.9807 13.1865C79.2597 13.5731 79.6034 13.8954 80.0112 14.1315C80.4408 14.389 80.9348 14.4964 81.4931 14.4964ZM81.4931 16.5366C80.5696 16.5366 79.7322 16.3861 79.0022 16.0641C78.2718 15.7418 77.6708 15.334 77.1554 14.7971C76.6614 14.2603 76.2751 13.5946 76.0172 12.8431C75.7597 12.0912 75.6091 11.2539 75.6091 10.3736C75.6091 9.49295 75.7379 8.67704 76.0172 7.92552C76.2751 7.17399 76.6614 6.52979 77.1554 5.97143C77.6491 5.43455 78.2718 5.00497 79.0022 4.70449C79.7322 4.4037 80.5696 4.23199 81.4931 4.23199C82.4164 4.23199 83.2537 4.38223 83.9841 4.70449C84.7142 5.00497 85.3154 5.43455 85.8306 5.97143C86.3245 6.50832 86.7112 7.17399 86.9687 7.92552C87.2266 8.67704 87.3768 9.49295 87.3768 10.3736C87.3768 11.2753 87.2481 12.0912 86.9687 12.8431C86.6897 13.5946 86.3245 14.2388 85.8306 14.7971C85.3369 15.334 84.7142 15.7633 83.9841 16.0641C83.2537 16.3646 82.4378 16.5366 81.4931 16.5366ZM71.0568 0.108887H73.6336V16.2143H71.0568V0.108887ZM66.1821 4.55424H68.7593V16.2143H66.1821V4.55424ZM66.1821 0.108887H68.7593V2.53547H66.1821V0.108887ZM61.6512 10.395C61.6512 9.8796 61.5868 9.36417 61.4366 8.87021C61.3078 8.37655 61.0929 7.94698 60.8138 7.56034C60.5345 7.17399 60.1911 6.8732 59.8045 6.6371C59.3964 6.40101 58.9242 6.29339 58.4087 6.29339C57.3349 6.29339 56.519 6.65857 55.9607 7.41009C55.4238 8.16161 55.1448 9.171 55.1448 10.4165C55.1448 11.0178 55.2092 11.5547 55.3594 12.0483C55.5097 12.5423 55.7031 12.9718 56.0036 13.337C56.2829 13.7019 56.6264 13.9809 57.0345 14.1959C57.4423 14.4105 57.8933 14.5181 58.4302 14.5181C59.0315 14.5181 59.504 14.389 59.9118 14.1529C60.3199 13.9165 60.6421 13.5946 60.9212 13.2294C61.1787 12.8431 61.3722 12.4135 61.4795 11.9195C61.5868 11.4041 61.6512 10.9104 61.6512 10.395ZM52.6538 4.55424H55.0804V6.14314H55.1233C55.4882 5.45601 55.9821 4.98351 56.6264 4.68302C57.2706 4.38223 57.9577 4.23199 58.7307 4.23199C59.6542 4.23199 60.4487 4.38223 61.1358 4.72595C61.8229 5.0479 62.3813 5.47747 62.8323 6.05729C63.2834 6.61564 63.6268 7.28131 63.8417 8.03283C64.0563 8.78436 64.1851 9.60057 64.1851 10.438C64.1851 11.2324 64.0778 11.9839 63.8846 12.7143C63.67 13.4443 63.3692 14.11 62.9611 14.6684C62.5533 15.2267 62.0379 15.6775 61.3937 16.0212C60.7495 16.3646 60.0194 16.5366 59.1603 16.5366C58.7954 16.5366 58.4087 16.4937 58.0438 16.4293C57.6787 16.3646 57.3135 16.2573 56.9701 16.107C56.6264 15.9568 56.3044 15.7633 56.0251 15.5272C55.7246 15.2911 55.4882 15.0118 55.295 14.7113H55.2521V20.5306H52.6753V4.55424H52.6538ZM43.9998 4.55424H45.9539V1.03242H48.531V4.53248H50.85V6.44393H48.531V12.6711C48.531 12.9504 48.5522 13.165 48.5736 13.3797C48.5954 13.5731 48.6598 13.7448 48.7242 13.8736C48.81 14.0024 48.9388 14.11 49.0891 14.1744C49.2608 14.2388 49.4757 14.2817 49.7762 14.2817C49.9482 14.2817 50.1414 14.2817 50.3131 14.2603C50.4851 14.2388 50.6783 14.2173 50.85 14.1744V16.1714C50.5709 16.2143 50.2916 16.2358 50.0126 16.2573C49.7333 16.3002 49.4757 16.3002 49.1752 16.3002C48.4878 16.3002 47.9509 16.2358 47.5431 16.107C47.135 15.9782 46.813 15.7848 46.5766 15.5487C46.3405 15.2911 46.1903 14.9903 46.1041 14.6251C46.0186 14.2603 45.9753 13.8092 45.9539 13.337V6.4654H43.9998V4.51131V4.55424ZM35.5178 12.4779C35.6036 13.2294 35.8827 13.7448 36.3766 14.0671C36.8706 14.3676 37.4719 14.5181 38.159 14.5181C38.3951 14.5181 38.6744 14.4964 38.9749 14.4534C39.2757 14.4105 39.5762 14.3461 39.8341 14.2388C40.1131 14.1315 40.3277 13.9809 40.4994 13.7663C40.6714 13.5517 40.7573 13.2938 40.7358 12.9718C40.7144 12.6499 40.6071 12.3706 40.3707 12.1559C40.1346 11.941 39.8552 11.7908 39.5118 11.6405C39.1681 11.5117 38.7603 11.4041 38.3093 11.3183C37.8582 11.2324 37.4075 11.1251 36.935 11.0178C36.4625 10.9104 35.9903 10.7814 35.5393 10.6311C35.0882 10.4809 34.7016 10.2877 34.3367 10.0084C33.993 9.75082 33.6925 9.42856 33.499 9.02076C33.2844 8.61265 33.1771 8.14015 33.1771 7.53887C33.1771 6.89467 33.3273 6.37924 33.6496 5.94997C33.9501 5.5204 34.3582 5.17698 34.8304 4.91912C35.3032 4.66156 35.8397 4.46809 36.4196 4.36077C36.9994 4.25345 37.5577 4.21052 38.0732 4.21052C38.6744 4.21052 39.2543 4.27491 39.7908 4.4037C40.3277 4.53248 40.8432 4.72595 41.2727 5.02644C41.7238 5.30577 42.0886 5.69211 42.368 6.14314C42.6685 6.59418 42.8402 7.15253 42.9263 7.79674H40.2419C40.1131 7.17399 39.8341 6.76588 39.4045 6.55125C38.9535 6.33662 38.4598 6.229 37.88 6.229C37.708 6.229 37.4719 6.25046 37.2358 6.27192C36.9779 6.31485 36.7633 6.35778 36.5269 6.44393C36.3122 6.52979 36.1191 6.65857 35.9685 6.80881C35.8183 6.95936 35.7324 7.17399 35.7324 7.43155C35.7324 7.75381 35.8397 7.98991 36.0547 8.18308C36.2693 8.37655 36.5483 8.5268 36.9135 8.67704C37.2572 8.80582 37.6651 8.91344 38.1161 8.99929C38.5671 9.08515 39.0393 9.19247 39.5118 9.29978C39.9843 9.4071 40.435 9.53618 40.8861 9.68643C41.3371 9.83667 41.7449 10.0298 42.0886 10.3092C42.4324 10.5667 42.7328 10.889 42.9475 11.2753C43.1624 11.662 43.2697 12.1559 43.2697 12.7143C43.2697 13.4014 43.1195 13.9809 42.7972 14.4749C42.4753 14.9474 42.0672 15.3555 41.5732 15.656C41.0796 15.9568 40.4994 16.1714 39.8985 16.3217C39.2757 16.4504 38.6744 16.5366 38.0732 16.5366C37.3428 16.5366 36.6557 16.4504 36.0329 16.2787C35.4105 16.107 34.8521 15.8495 34.4011 15.5272C33.9501 15.1835 33.5852 14.7757 33.3273 14.2603C33.0698 13.7663 32.9192 13.165 32.898 12.4564H35.4963V12.4779H35.5178ZM31.1371 16.2143H28.6032V14.5825H28.5603C28.2381 15.1835 27.7656 15.6345 27.1428 15.9997C26.5204 16.3646 25.8759 16.5366 25.2317 16.5366C23.7071 16.5366 22.5904 16.1714 21.9033 15.3984C21.2162 14.6469 20.8725 13.4873 20.8725 11.9625V4.55424H23.4496V11.7049C23.4496 12.7354 23.6428 13.4658 24.0506 13.8736C24.4372 14.3032 24.9956 14.5181 25.7042 14.5181C26.241 14.5181 26.6921 14.432 27.057 14.2603C27.4221 14.0886 27.7226 13.8736 27.9376 13.5946C28.1737 13.3153 28.3239 12.9718 28.4315 12.5852C28.5388 12.1989 28.5818 11.7693 28.5818 11.3183V4.55424H31.1586V16.2143H31.1371ZM12.4978 4.55424H14.9029V6.80881H14.9458C15.0317 6.48686 15.1822 6.18607 15.3969 5.88558C15.6115 5.58479 15.8694 5.30577 16.1913 5.06936C16.4921 4.8118 16.8355 4.61863 17.2222 4.46809C17.587 4.31784 17.9737 4.23199 18.36 4.23199C18.6608 4.23199 18.8755 4.25345 18.9828 4.25345C19.0904 4.27491 19.2192 4.29638 19.3265 4.29638V6.76588C19.1548 6.72296 18.9616 6.70149 18.7681 6.68003C18.575 6.65857 18.4033 6.6371 18.2098 6.6371C17.7802 6.6371 17.3724 6.72296 16.9858 6.89467C16.5994 7.06668 16.2772 7.32424 15.9767 7.64649C15.6973 7.98991 15.4612 8.39802 15.2895 8.89167C15.1175 9.38564 15.0317 9.96545 15.0317 10.6097V16.15H12.4549L12.4978 4.55424ZM0.0214635 0.108887H13.0561V2.53547H7.92395V16.2143H5.11072V2.53547H0L0.0214635 0.108887Z" fill="#F7EFDC" fill-opacity="0.6"/>
+<path d="M16.6891 27.7664H11.3863L9.7539 22.7246L8.11186 27.7664L2.80922 27.7569L7.09775 30.8767L5.45571 35.9185L9.74424 32.7987L14.0328 35.9185L12.4004 30.8767L16.6891 27.7664Z" fill="#00C075"/>
+<path d="M12.7676 32.0164L12.4006 30.8767L9.75393 32.7987L12.7676 32.0164Z" fill="#076042"/>
+<path d="M36.041 27.896H30.7382L29.1059 22.8542L27.4638 27.896L22.1612 27.8865L26.4497 31.0063L24.8077 36.0481L29.0962 32.9283L33.3847 36.0481L31.7523 31.0063L36.041 27.896Z" fill="#00C075"/>
+<path d="M32.1195 32.1461L31.7525 31.0063L29.1059 32.9283L32.1195 32.1461Z" fill="#076042"/>
+<path d="M55.6022 27.896H50.2994L48.667 22.8542L47.025 27.896L41.7223 27.8865L46.0108 31.0063L44.3688 36.0481L48.6573 32.9283L52.9459 36.0481L51.3135 31.0063L55.6022 27.896Z" fill="#00C075"/>
+<path d="M51.6807 32.1461L51.3137 31.0063L48.667 32.9283L51.6807 32.1461Z" fill="#076042"/>
+<path d="M75.3724 27.7664H70.0696L68.4372 22.7246L66.7952 27.7664L61.4926 27.7569L65.7811 30.8767L64.1391 35.9185L68.4276 32.7987L72.7161 35.9185L71.0837 30.8767L75.3724 27.7664Z" fill="#00C075"/>
+<path d="M71.4509 32.0164L71.0839 30.8767L68.4373 32.7987L71.4509 32.0164Z" fill="#076042"/>
+<path d="M94.9335 27.7664H89.6308L87.9984 22.7246L86.3563 27.7664L81.0537 27.7569L85.3422 30.8767L83.7002 35.9185L87.9887 32.7987L92.2773 35.9185L90.6449 30.8767L94.9335 27.7664Z" fill="#00C075"/>
+<path d="M91.012 32.0164L90.645 30.8767L87.9983 32.7987L91.012 32.0164Z" fill="#076042"/>
+</svg>

package/src/components/SVG/unmute.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Unmute">
+  <path d="M11.25 5.25 6.75 9H4.5A2.25 2.25 0 0 0 2.25 11.25v1.5A2.25 2.25 0 0 0 4.5 15h2.25l4.5 3.75a.75.75 0 0 0 1.23-.58V5.83a.75.75 0 0 0-1.23-.58Z"/>
+  <path d="M15.75 8.25a6.75 6.75 0 0 1 0 7.5"/>
+  <path d="M17.64 7.5A9 9 0 0 1 19.5 12a9 9 0 0 1-1.86 4.5"/>
+</svg>

package/src/components/index.ts

@@ -0,0 +1,20 @@
+// Navigation
+export * from './Navigation';
+
+// Base
+export * from './Base';
+
+// Buttons
+export * from './Buttons';
+
+// Inputs
+export * from './Inputs';
+
+// Accordions
+export * from './Accordions';
+
+// Cards
+export * from './Cards';
+
+//SVG
+export * from './SVG';

package/src/components/styles/Color/Color.stories.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Color } from './Color';
+
+const meta = {
+    title: 'Styles/Colors',
+    component: Color,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['claret-violet-dark', 'claret-violet-light', 'beige-dark', 'beige-light', 'pink-oyster-dark', 'pink-oyster-light', 'lavender-blue-dark', 'lavender-blue-light'],
+        },
+    },
+} satisfies Meta<typeof Color>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ClaretVioletDark: Story = {
+    args: {
+        variant: 'claret-violet-dark',
+    },
+};
+
+export const ClaretVioletLight: Story = {
+    args: {
+        variant: 'claret-violet-light',
+    },
+};
+
+export const PinkOysterDark: Story = {
+    args: {
+        variant: 'pink-oyster-dark',
+    },
+};
+
+export const PinkOysterLight: Story = {
+    args: {
+        variant: 'pink-oyster-light',
+    },
+};
+
+export const BeigeDark: Story = {
+    args: {
+        variant: 'beige-dark',
+    },
+};
+
+export const BeigeLight: Story = {
+    args: {
+        variant: 'beige-light',
+    },
+};
+
+export const LavenderBlueDark: Story = {
+    args: {
+        variant: 'lavender-blue-dark',
+    },
+};
+
+export const LavenderBlueLight: Story = {
+    args: {
+        variant: 'lavender-blue-light',
+    },
+};
+
+export const Palette: Story = {
+    argTypes: {
+        variant: { control: false, table: { disable: true } },
+    },
+
+    render: () => (
+        <div className="flex flex-wrap gap-4">
+            <Color variant="claret-violet-dark" />
+            <Color variant="claret-violet-light" />
+            <Color variant="beige-dark" />
+            <Color variant="beige-light" />
+            <Color variant="pink-oyster-dark" />
+            <Color variant="pink-oyster-light" />
+            <Color variant="lavender-blue-dark" />
+            <Color variant="lavender-blue-light" />
+        </div>
+    ),
+};

package/src/components/styles/Color/Color.tsx

@@ -0,0 +1,47 @@
+import clsx from 'clsx';
+
+export interface ColorProps {
+    variant?: 'claret-violet-dark' | 'claret-violet-light' | 'beige-dark' | 'beige-light' | 'pink-oyster-dark' | 'pink-oyster-light' | 'lavender-blue-dark' | 'lavender-blue-light';
+}
+
+const variantStyles = {
+    'claret-violet-dark': 'bg-claret-violet-dark text-beige-light border-beige-light',
+    'claret-violet-light': 'bg-claret-violet-light text-beige-light border-beige-light',
+    'pink-oyster-dark': 'bg-pink-oyster-dark text-claret-violet-dark border-claret-violet-dark',
+    'pink-oyster-light': 'bg-pink-oyster-light text-claret-violet-dark border-claret-violet-dark',
+    'beige-dark': 'bg-beige-dark text-claret-violet-dark border-claret-violet-dark',
+    'beige-light': 'bg-beige-light text-claret-violet-dark border-claret-violet-dark',
+    'lavender-blue-dark': 'bg-lavender-blue-dark text-claret-violet-dark border-claret-violet-dark',
+    'lavender-blue-light': 'bg-lavender-blue-light text-claret-violet-dark border-claret-violet-dark',
+};
+
+const variantNames = {
+    'claret-violet-dark': 'Claret Violet Dark',
+    'claret-violet-light': 'Claret Violet Light',
+    'pink-oyster-dark': 'Pink Oyster Dark',
+    'pink-oyster-light': 'Pink Oyster Light',
+    'beige-dark': 'Beige Dark',
+    'beige-light': 'Beige Light',
+    'lavender-blue-dark': 'Lavender Blue Dark',
+    'lavender-blue-light': 'Lavender Blue Light',
+};
+
+const variantHex = {
+    'claret-violet-dark': '#671a36',
+    'claret-violet-light': '#802948',
+    'pink-oyster-dark': '#eeaeb4',
+    'pink-oyster-light': '#f7c8cc',
+    'beige-dark': '#f0e4c8',
+    'beige-light': '#f7efdc',
+    'lavender-blue-dark': '#adadf0',
+    'lavender-blue-light': '#c3c3fe',
+};
+
+export const Color = ({ variant = 'claret-violet-dark' }: ColorProps) => {
+    return (
+        <div className={clsx(variantStyles[variant], 'min-w-48 rounded-md border p-4')}>
+            <p className="font-pangaia text-lg">{variantNames[variant]}</p>
+            <p className="font-mori text-sm">{variantHex[variant]}</p>
+        </div>
+    );
+};

package/src/components/styles/Icon/Icon.stories.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Icon } from './Icon';
+
+import { ArrowIcon, ArrowPlainIcon, CalendarIcon, CheckIcon, CheckRoundedIcon, CrossIcon, CrossRoundedIcon, FiltersIcon, HatCookIcon, InfoIcon, MagicWandIcon, MenuIcon, MinusIcon, PlusIcon, PolaroidThreadIcon, ProfilIcon, QuoteIcon, SubtractIcon, TrustpilotIcon, CheckCircleIcon, DollarRoundedIcon } from '../../index';
+
+const meta = {
+    title: 'Assets/Icon',
+    component: Icon,
+    argTypes: {
+        name: {
+            control: 'text',
+        },
+    },
+    args: {
+        name: 'check',
+        children: <ArrowPlainIcon className="w-6" />,
+    },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    globals: {
+        backgrounds: { value: 'light' },
+    },
+    render: () => (
+        <>
+            <div className="text-claret-violet-dark grid grid-cols-4 gap-6">
+                <Icon name="arrow-plain">
+                    <ArrowPlainIcon className="w-6" />
+                </Icon>
+                <Icon name="arrow">
+                    <ArrowIcon className="w-6" />
+                </Icon>
+                <Icon name="filters">
+                    <FiltersIcon className="w-6" />
+                </Icon>
+                <Icon name="hat-cook">
+                    <HatCookIcon className="w-6" />
+                </Icon>
+                <Icon name="check">
+                    <CheckIcon className="w-6" />
+                </Icon>
+                <Icon name="check-rounded">
+                    <CheckRoundedIcon className="w-6" />
+                </Icon>
+                <Icon name="cross-rounded">
+                    <CrossRoundedIcon className="w-6" />
+                </Icon>
+                <Icon name="minus">
+                    <MinusIcon className="w-6" />
+                </Icon>
+                <Icon name="plus">
+                    <PlusIcon className="w-6" />
+                </Icon>
+                <Icon name="quote">
+                    <QuoteIcon className="w-6" />
+                </Icon>
+                <Icon name="polaroid-thread">
+                    <PolaroidThreadIcon className="w-6" />
+                </Icon>
+                <Icon name="menu">
+                    <MenuIcon className="w-6" />
+                </Icon>
+                <Icon name="profil">
+                    <ProfilIcon className="w-6" />
+                </Icon>
+                <Icon name="cross">
+                    <CrossIcon className="w-6" />
+                </Icon>
+                <Icon name="info">
+                    <InfoIcon className="w-6" />
+                </Icon>
+                <Icon name="calendar">
+                    <CalendarIcon className="w-6" />
+                </Icon>
+                <Icon name="magic-wand">
+                    <MagicWandIcon className="w-6" />
+                </Icon>
+                <Icon name="subtract">
+                    <SubtractIcon className="w-6" />
+                </Icon>
+                <Icon name="check-circle">
+                    <CheckCircleIcon className="w-6" />
+                </Icon>
+                <Icon name="dollar-rounded">
+                    <DollarRoundedIcon className="w-6" />
+                </Icon>
+            </div>
+            <div className="mt-3 flex items-start gap-6">
+                <div className="bg-claret-violet-dark p-3">
+                    <TrustpilotIcon className="w-24.5" />
+                </div>
+                <p className="text-md mb-3 font-semibold">Trustpilot</p>
+            </div>
+        </>
+    ),
+};

package/src/components/styles/Icon/Icon.tsx

@@ -0,0 +1,6 @@
+export const Icon = ({ children, name }: { children: React.ReactNode; name: string }) => (
+    <div className="flex items-start gap-3">
+        {children}
+        <p className="text-md mb-3 leading-none font-semibold">{name}</p>
+    </div>
+);

package/src/components/styles/Illustration/Illustration.stories.tsx

@@ -0,0 +1,253 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Illustration } from './Illustration';
+
+const meta = {
+    title: 'Assets/Illustration',
+    component: Illustration,
+    argTypes: {
+        name: {
+            control: 'text',
+            description: 'The name of the illustration to display',
+        },
+        variant: {
+            control: 'select',
+            options: ['light', 'dark'],
+            description: 'Color variant of the illustration',
+        },
+        hasBorder: {
+            control: 'boolean',
+            description: 'Whether to show a border around the illustration',
+        },
+        hasBackground: {
+            control: 'boolean',
+            description: 'Whether to show background and text label',
+        },
+    },
+    args: {
+        name: 'carrot',
+        variant: 'dark',
+        hasBorder: true,
+        hasBackground: true,
+    },
+} satisfies Meta<typeof Illustration>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Large: Story = {
+    render: () => (
+        <div className="grid grid-cols-2 gap-4">
+            <div className="col-span-1 grid grid-cols-1 gap-4 p-4">
+                <Illustration name="dog" />
+                <Illustration name="cat" />
+                <Illustration name="puppy" />
+                <Illustration name="kitten" />
+                <Illustration name="meat" />
+                <Illustration name="plate" />
+            </div>
+            <div className="bg-claret-violet-dark text-beige-light grid grid-cols-1 gap-4 p-4">
+                <Illustration name="dog" variant="light" />
+                <Illustration name="cat" variant="light" />
+                <Illustration name="puppy" variant="light" />
+                <Illustration name="kitten" variant="light" />
+                <Illustration name="meat" variant="light" />
+                <Illustration name="plate" variant="light" />
+            </div>
+        </div>
+    ),
+};
+
+export const Big: Story = {
+    render: () => (
+        <div className="grid grid-cols-2 gap-4">
+            <div className="col-span-1 grid grid-cols-1 gap-4 p-4">
+                <Illustration name="glasses" />
+                <Illustration name="paws" />
+                <Illustration name="france" />
+                <Illustration name="box" />
+                <Illustration name="box-2" />
+                <Illustration name="pot-big" />
+                <Illustration name="pot-big-2" />
+            </div>
+            <div className="bg-claret-violet-dark text-beige-light col-span-1 grid grid-cols-1 gap-4 p-4">
+                <Illustration name="glasses" variant="light" />
+                <Illustration name="paws" variant="light" />
+                <Illustration name="france" variant="light" />
+                <Illustration name="box" variant="light" />
+                <Illustration name="box-2" variant="light" />
+                <Illustration name="pot-big" variant="light" />
+                <Illustration name="pot-big-2" variant="light" />
+            </div>
+        </div>
+    ),
+};
+
+export const Medium: Story = {
+    render: () => (
+        <div className="grid grid-cols-4 gap-4">
+            <div className="col-span-2 grid grid-cols-2 gap-4 p-4">
+                <Illustration name="sausages" />
+                <Illustration name="crown" />
+                <Illustration name="food-bag" />
+                <Illustration name="sausage" />
+                <Illustration name="sofa" />
+                <Illustration name="balls" />
+                <Illustration name="sport" />
+                <Illustration name="bowl" />
+                <Illustration name="bowl-2" />
+                <Illustration name="basket" />
+                <Illustration name="warning" />
+                <Illustration name="magnifying-glass" />
+                <Illustration name="molecule" />
+                <Illustration name="skeleton" />
+            </div>
+            <div className="bg-claret-violet-dark text-beige-light col-span-2 grid grid-cols-2 gap-4 p-4">
+                <Illustration name="sausages" variant="light" />
+                <Illustration name="crown" variant="light" />
+                <Illustration name="food-bag" variant="light" />
+                <Illustration name="sausage" variant="light" />
+                <Illustration name="sofa" variant="light" />
+                <Illustration name="balls" variant="light" />
+                <Illustration name="sport" variant="light" />
+                <Illustration name="bowl" variant="light" />
+                <Illustration name="bowl-2" variant="light" />
+                <Illustration name="basket" variant="light" />
+                <Illustration name="warning" variant="light" />
+                <Illustration name="magnifying-glass" variant="light" />
+                <Illustration name="molecule" variant="light" />
+                <Illustration name="skeleton" variant="light" />
+            </div>
+        </div>
+    ),
+};
+
+export const Small: Story = {
+    render: () => (
+        <div className="grid grid-cols-4 gap-4">
+            <div className="col-span-2 grid grid-cols-2 gap-4">
+                <Illustration name="face" />
+                <Illustration name="can" />
+                <Illustration name="truck" />
+                <Illustration name="chicken" />
+                <Illustration name="leaf" />
+                <Illustration name="pot" />
+                <Illustration name="fridge" />
+                <Illustration name="label" />
+                <Illustration name="half-label" />
+                <Illustration name="carrot" />
+                <Illustration name="liquid" />
+                <Illustration name="steak" />
+                <Illustration name="quantity" />
+                <Illustration name="calendar" />
+            </div>
+            <div className="bg-claret-violet-dark text-beige-light col-span-2 grid grid-cols-2 gap-4 p-4">
+                <Illustration name="face" variant="light" />
+                <Illustration name="can" variant="light" />
+                <Illustration name="truck" variant="light" />
+                <Illustration name="chicken" variant="light" />
+                <Illustration name="leaf" variant="light" />
+                <Illustration name="pot" variant="light" />
+                <Illustration name="fridge" variant="light" />
+                <Illustration name="label" variant="light" />
+                <Illustration name="half-label" variant="light" />
+                <Illustration name="carrot" variant="light" />
+                <Illustration name="liquid" variant="light" />
+                <Illustration name="steak" variant="light" />
+                <Illustration name="quantity" variant="light" />
+                <Illustration name="calendar" variant="light" />
+            </div>
+        </div>
+    ),
+};
+
+export const Mini: Story = {
+    render: () => (
+        <div className="flex flex-wrap gap-4">
+            <Illustration name="check-rounded" />
+            <Illustration name="cross-rounded" />
+        </div>
+    ),
+};
+
+export const BorderAndBackgroundVariations: Story = {
+    render: () => (
+        <div className="grid grid-cols-2 gap-8 p-4">
+            <div className="space-y-4">
+                <h3 className="text-lg font-semibold">Border & Background Combinations</h3>
+                <div className="grid grid-cols-2 gap-4">
+                    <div className="text-center">
+                        <p className="text-sm mb-2">Default (both true)</p>
+                        <Illustration name="box" hasBorder={true} hasBackground={true} />
+                    </div>
+                    <div className="text-center">
+                        <p className="text-sm mb-2">Border only</p>
+                        <Illustration name="box" hasBorder={true} hasBackground={false} />
+                    </div>
+                    <div className="text-center">
+                        <p className="text-sm mb-2">Background only</p>
+                        <Illustration name="box" hasBorder={false} hasBackground={true} />
+                    </div>
+                    <div className="text-center">
+                        <p className="text-sm mb-2">Transparent (both false)</p>
+                        <Illustration name="box" hasBorder={false} hasBackground={false} />
+                    </div>
+                </div>
+            </div>
+            <div className="space-y-4 bg-claret-violet-dark p-4 rounded-lg">
+                <h3 className="text-lg font-semibold text-beige-light">Light Variant</h3>
+                <div className="grid grid-cols-2 gap-4">
+                    <div className="text-center">
+                        <p className="text-sm mb-2 text-beige-light">Default (both true)</p>
+                        <Illustration name="box" variant="light" hasBorder={true} hasBackground={true} />
+                    </div>
+                    <div className="text-center">
+                        <p className="text-sm mb-2 text-beige-light">Border only</p>
+                        <Illustration name="box" variant="light" hasBorder={true} hasBackground={false} />
+                    </div>
+                    <div className="text-center">
+                        <p className="text-sm mb-2 text-beige-light">Background only</p>
+                        <Illustration name="box" variant="light" hasBorder={false} hasBackground={true} />
+                    </div>
+                    <div className="text-center">
+                        <p className="text-sm mb-2 text-beige-light">Transparent (both false)</p>
+                        <Illustration name="box" variant="light" hasBorder={false} hasBackground={false} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates all combinations of hasBorder and hasBackground props for both light and dark variants.',
+            },
+        },
+    },
+};
+
+export const TransparentShowcase: Story = {
+    render: () => (
+        <div className="space-y-6 p-4">
+            <h3 className="text-lg font-semibold">Transparent Illustrations (Perfect for FeatureCard)</h3>
+            <div className="flex flex-wrap gap-6 items-center justify-center">
+                <Illustration name="box" hasBorder={false} hasBackground={false} />
+                <Illustration name="france" hasBorder={false} hasBackground={false} />
+                <Illustration name="paws" hasBorder={false} hasBackground={false} />
+                <Illustration name="glasses" hasBorder={false} hasBackground={false} />
+                <Illustration name="pot-big" hasBorder={false} hasBackground={false} />
+                <Illustration name="truck" hasBorder={false} hasBackground={false} />
+            </div>
+        </div>
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Shows transparent illustrations without borders or backgrounds, as used in the FeatureCard component.',
+            },
+        },
+    },
+};