@granto-umbrella/umbrella-components 2.3.23 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.3.23",
+  "version": "3.0.1",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -30,20 +30,23 @@
     "bump:major": "npm version major"
   },
   "dependencies": {
-    "@granto-umbrella/umbrella-components": "^2.3.21",
-    "@phosphor-icons/react": "^2.1.7",
+    "@granto-umbrella/umbrella-components": "^2.3.23",
+    "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-radio-group": "^1.2.4",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.488.0",
+    "phosphor-react": "^1.4.1",
+    "radix": "^0.0.0",
     "react": "^18.3.1",
     "react-datepicker": "^8.3.0",
     "react-day-picker": "^9.6.7",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.63.0",
     "react-select": "^5.10.0",
+    "recharts": "^3.2.1",
     "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {
@@ -60,7 +63,9 @@
     "@types/mocha": "^10.0.10",
     "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
+    "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
@@ -70,7 +75,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "react-icons": "^5.4.0",
     "storybook": "8.4.7",
-    "styled-components": "^6.1.13",
+    "styled-components": "^6.1.19",
     "ts-jest": "^29.2.5",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.1",

package/src/assets/_logoUmbrella.svg

@@ -0,0 +1,34 @@
+<svg width="115" height="40" viewBox="0 0 115 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_371_2115)">
+<path d="M13.8888 16.8421H12.325C11.4619 16.8421 10.7601 17.5439 10.7601 18.407V26.9131C10.7601 28.1532 10.4423 29.0983 9.78912 29.8006C9.15608 30.4807 8.32207 30.8113 7.23951 30.8113C6.32088 30.8113 5.69155 30.5987 5.31447 30.1608C4.90831 29.6901 4.69359 28.8275 4.69359 27.6678V18.4064C4.69359 17.5433 3.9918 16.8416 3.12871 16.8416H1.56488C0.701792 16.8416 0 17.5433 0 18.4064V27.7307C0 30.1195 0.578039 31.9531 1.71772 33.18C2.87856 34.4308 4.56667 35.0649 6.73551 35.0649C8.27289 35.0649 9.63628 34.6624 10.7887 33.8691C10.8347 33.8374 10.8801 33.8057 10.9251 33.7729C11.1499 34.362 11.721 34.7819 12.3879 34.7819H13.8888C14.7519 34.7819 15.4537 34.0801 15.4537 33.217V18.4075C15.4537 17.5444 14.7519 16.8426 13.8888 16.8426V16.8421Z" fill="#4510A3"/>
+<path d="M34.7667 16.5586C33.2097 16.5586 31.8194 16.9716 30.6353 17.7855C30.2349 18.0605 29.8727 18.3726 29.5506 18.7195C29.2671 18.334 28.9403 18.0003 28.5722 17.7205C27.5563 16.9494 26.2532 16.5586 24.6989 16.5586C23.1446 16.5586 21.851 16.9536 20.7568 17.7332C20.6653 17.7982 20.5759 17.8659 20.4881 17.9363C20.2882 17.2942 19.6948 16.8421 18.9946 16.8421H17.5334C17.2134 16.8421 16.1689 16.9584 16.1689 18.4545V33.217C16.1689 34.0801 16.8707 34.7819 17.7338 34.7819H19.2977C20.1607 34.7819 20.8625 34.0801 20.8625 33.217V24.7426C20.8625 23.475 21.1608 22.4717 21.7489 21.7609C22.3021 21.0925 23.0293 20.781 24.0373 20.781C25.2393 20.781 25.5895 21.2358 25.7037 21.3844C25.9612 21.7197 26.268 22.4426 26.268 23.9874V33.217C26.268 34.0801 26.9698 34.7819 27.8329 34.7819H29.3967C30.2598 34.7819 30.9616 34.0801 30.9616 33.217V24.7426C30.9616 23.4596 31.2551 22.486 31.859 21.7668C32.4154 21.1036 33.1706 20.7815 34.168 20.7815C35.3701 20.7815 35.7202 21.2363 35.8344 21.3849C36.092 21.7202 36.3987 22.4437 36.3987 23.988V33.2175C36.3987 34.0806 37.1005 34.7824 37.9636 34.7824H39.5274C40.3905 34.7824 41.0923 34.0806 41.0923 33.2175V23.8309C41.0923 21.3982 40.5719 19.627 39.5015 18.4165C38.4121 17.1848 36.8186 16.5602 34.7651 16.5602L34.7667 16.5586Z" fill="#4510A3"/>
+<path d="M54.9735 17.7172C53.7656 16.9482 52.3276 16.5585 50.7009 16.5585C49.0741 16.5585 47.6145 16.9826 46.4082 17.8198C46.4034 17.823 46.3981 17.8267 46.3933 17.8304V11.2593C46.3933 10.2783 45.5953 9.47974 44.6137 9.47974H43.4788C42.4978 9.47974 41.6992 10.2778 41.6992 11.2593V33.0027C41.6992 33.9837 42.4973 34.7823 43.4788 34.7823H44.5825C45.3309 34.7823 45.9724 34.318 46.2352 33.6627C46.2902 33.704 46.3457 33.7442 46.4023 33.7844C47.6092 34.6342 49.0556 35.0658 50.7014 35.0658C52.3472 35.0658 53.7344 34.676 54.9428 33.9071C56.147 33.1407 57.0984 32.046 57.7711 30.6525C58.4264 29.2944 58.7585 27.6666 58.7585 25.8129C58.7585 23.9593 58.4327 22.3362 57.7897 20.9797C57.127 19.583 56.1793 18.4861 54.974 17.7188L54.9735 17.7172ZM54.0332 25.8113C54.0332 27.5476 53.6678 28.8443 52.9469 29.6656C52.252 30.4573 51.3429 30.8423 50.1662 30.8423C48.9895 30.8423 48.0926 30.4552 47.4087 29.6588C46.6932 28.8258 46.3304 27.5312 46.3304 25.8113C46.3304 24.0915 46.6932 22.7651 47.4087 21.9322C48.0926 21.1357 48.9943 20.7486 50.1662 20.7486C51.3381 20.7486 52.2483 21.1373 52.9432 21.9364C53.6667 22.7694 54.0332 24.073 54.0332 25.8113Z" fill="#4510A3"/>
+<path d="M70.3333 19.4668L70.3508 18.2065C70.3614 17.4571 69.8415 16.8045 69.1143 16.6543C68.9795 16.6263 68.8404 16.6062 68.6986 16.594C68.4247 16.5708 68.1137 16.5586 67.7731 16.5586C66.8556 16.5586 65.9629 16.741 65.1183 17.1007C64.6228 17.3122 64.1621 17.5856 63.7406 17.9193C63.5333 17.2926 62.9378 16.8415 62.254 16.8415H60.7944C60.0852 16.8415 59.3696 17.3376 59.3696 18.4461V33.216C59.3696 34.0791 60.0714 34.7808 60.9345 34.7808H62.5301C63.3932 34.7808 64.095 34.0791 64.095 33.216V24.3952C64.095 23.7822 64.2277 23.2185 64.5011 22.6722C64.7745 22.1259 65.1431 21.7319 65.6657 21.3945C66.1744 21.0655 66.7715 20.9053 67.4902 20.9053C67.7821 20.9053 68.0407 20.9185 68.2586 20.9449C68.3226 20.9529 68.3903 20.964 68.4601 20.9782C68.9165 21.0718 69.3856 20.9571 69.749 20.6652C70.1139 20.3716 70.327 19.9348 70.3333 19.4662V19.4668Z" fill="#4510A3"/>
+<path d="M82.0347 17.6311H82.0342C80.8802 16.9193 79.4629 16.5586 77.8213 16.5586C76.1798 16.5586 74.6641 16.9542 73.3668 17.7348C72.0653 18.518 71.0414 19.626 70.3227 21.0274C69.6177 22.4014 69.2607 24.0218 69.2607 25.8432C69.2607 28.6842 70.0852 30.9551 71.7115 32.5924C73.3393 34.233 75.5647 35.0648 78.3248 35.0648C79.612 35.0648 80.8575 34.8596 82.0268 34.4551C83.0681 34.0944 83.9724 33.5909 84.7144 32.9589C85.2586 32.4951 85.4178 31.7219 85.1021 31.0783L84.6557 30.1698C84.4489 29.7493 84.0692 29.4458 83.6139 29.3363C83.1617 29.2279 82.6905 29.3246 82.3198 29.6023C81.7973 29.9936 81.2525 30.2877 80.6994 30.4765C79.9865 30.7203 79.2085 30.8435 78.3877 30.8435C76.917 30.8435 75.827 30.4527 75.0559 29.6478C74.4864 29.0539 74.1236 28.2119 73.9728 27.1368H84.0306C84.8937 27.1368 85.5955 26.435 85.5955 25.5719V25.1202C85.5955 23.439 85.2967 21.9476 84.7081 20.6858C84.0962 19.3769 83.1966 18.3493 82.0347 17.6316V17.6311ZM74.9777 21.8408C75.6504 20.9999 76.5801 20.5916 77.8213 20.5916C78.9779 20.5916 79.8051 20.9232 80.3503 21.6049C80.7179 22.065 80.9749 22.6621 81.1161 23.3861H74.1881C74.3695 22.7885 74.6334 22.2713 74.9777 21.8408Z" fill="#4510A3"/>
+<path d="M89.3365 9.47925H87.7727C86.9084 9.47925 86.2078 10.1799 86.2078 11.0441V33.2164C86.2078 34.0807 86.9084 34.7813 87.7727 34.7813H89.3365C90.2007 34.7813 90.9014 34.0807 90.9014 33.2164V11.0441C90.9014 10.1799 90.2007 9.47925 89.3365 9.47925Z" fill="#4510A3"/>
+<path d="M94.8223 9.47925H93.2585C92.3942 9.47925 91.6936 10.1799 91.6936 11.0441V33.2164C91.6936 34.0807 92.3942 34.7813 93.2585 34.7813H94.8223C95.6866 34.7813 96.3872 34.0807 96.3872 33.2164V11.0441C96.3872 10.1799 95.6866 9.47925 94.8223 9.47925Z" fill="#4510A3"/>
+<path d="M112.756 16.842H111.295C110.542 16.842 109.912 17.3651 109.763 18.0848C109.655 17.9997 109.544 17.9167 109.43 17.8373C108.213 16.989 106.763 16.5591 105.12 16.5591C103.476 16.5591 102.09 16.9414 100.873 17.6956C99.6513 18.4534 98.6951 19.5476 98.0314 20.9475C97.3888 22.303 97.0625 23.9393 97.0625 25.8119C97.0625 27.6846 97.3883 29.2902 98.0308 30.6446C98.6935 32.0429 99.6475 33.1408 100.867 33.9087C102.084 34.6761 103.515 35.0648 105.12 35.0648C106.724 35.0648 108.147 34.6422 109.372 33.8098C109.418 33.7786 109.464 33.7469 109.508 33.7146C109.716 34.3345 110.303 34.7819 110.992 34.7819H112.556C113.419 34.7819 114.121 34.0801 114.121 33.217V18.3858C114.121 16.9536 113.077 16.842 112.757 16.842H112.756ZM101.787 25.8119C101.787 24.071 102.15 22.7663 102.865 21.9328C103.549 21.1363 104.451 20.7492 105.623 20.7492C106.795 20.7492 107.718 21.1347 108.392 21.928C109.099 22.762 109.458 24.0694 109.458 25.8119C109.458 27.5545 109.099 28.8301 108.392 29.6641C107.718 30.4574 106.812 30.8429 105.623 30.8429C104.433 30.8429 103.549 30.4558 102.865 29.6594C102.15 28.8264 101.787 27.5318 101.787 25.8119Z" fill="#4510A3"/>
+<path d="M72.4552 36.6899C72.3002 36.5926 72.1156 36.5439 71.9025 36.5439C71.6894 36.5439 71.5059 36.5979 71.3525 36.7063C71.2356 36.7888 71.1489 36.8935 71.0918 37.0204L71.0516 36.5863H70.6846C70.6941 36.6772 70.7026 36.7687 70.7105 36.8613C70.7184 36.9538 70.7221 37.0437 70.7221 37.1315V39.9625H71.1029V38.5319C71.16 38.652 71.2441 38.7514 71.3567 38.8291C71.5101 38.936 71.692 38.9888 71.902 38.9888C72.1119 38.9888 72.3002 38.9397 72.4568 38.8408C72.6133 38.7419 72.7349 38.6017 72.8211 38.4198C72.9073 38.2379 72.9507 38.02 72.9507 37.7661C72.9507 37.5123 72.9068 37.2896 72.819 37.1077C72.7312 36.9258 72.6096 36.7862 72.4546 36.6894L72.4552 36.6899ZM72.3658 38.4462C72.2325 38.6012 72.0532 38.6789 71.8274 38.6789C71.6016 38.6789 71.4271 38.6012 71.2938 38.4462C71.1605 38.2913 71.0939 38.0644 71.0939 37.7667C71.0939 37.4689 71.1605 37.2378 71.2938 37.0823C71.4271 36.9274 71.6048 36.8496 71.8274 36.8496C72.0501 36.8496 72.2325 36.9274 72.3658 37.0823C72.4991 37.2373 72.5657 37.4657 72.5657 37.7667C72.5657 38.0676 72.4991 38.2908 72.3658 38.4462Z" fill="#333333"/>
+<path d="M75.1075 36.692C74.9398 36.5931 74.7415 36.5439 74.5125 36.5439C74.2835 36.5439 74.09 36.5931 73.9223 36.692C73.7547 36.7909 73.6251 36.9311 73.5341 37.113C73.4432 37.2949 73.3977 37.5128 73.3977 37.7667C73.3977 38.0205 73.4432 38.2347 73.5341 38.4177C73.6251 38.6012 73.7542 38.7424 73.9223 38.8408C74.09 38.9397 74.2867 38.9888 74.5125 38.9888C74.7384 38.9888 74.9398 38.9397 75.1075 38.8408C75.2751 38.7419 75.4052 38.6012 75.4978 38.4177C75.5903 38.2342 75.6363 38.0173 75.6363 37.7667C75.6363 37.516 75.5898 37.2949 75.4978 37.113C75.4052 36.9311 75.2751 36.7909 75.1075 36.692ZM75.0488 38.4462C74.9171 38.6012 74.7384 38.6789 74.5125 38.6789C74.2867 38.6789 74.1127 38.6012 73.981 38.4462C73.8493 38.2913 73.7838 38.0644 73.7838 37.7667C73.7838 37.4689 73.8493 37.2378 73.981 37.0823C74.1127 36.9274 74.2899 36.8496 74.5125 36.8496C74.7352 36.8496 74.9129 36.9274 75.0462 37.0823C75.1794 37.2373 75.2461 37.4657 75.2461 37.7667C75.2461 38.0676 75.1805 38.2908 75.0488 38.4462Z" fill="#333333"/>
+<path d="M77.3147 36.5439C77.1989 36.5439 77.0873 36.5667 76.981 36.6122C76.8742 36.6576 76.7822 36.7259 76.7034 36.8168C76.6579 36.8697 76.6214 36.9316 76.5918 37.0014L76.5579 36.5863H76.1909C76.2004 36.6772 76.2073 36.7714 76.2121 36.8681C76.2168 36.9654 76.2189 37.0612 76.2189 37.1548V38.9465H76.6045V37.5546C76.6045 37.4388 76.6304 37.3288 76.6822 37.2256C76.734 37.122 76.8107 37.0374 76.9128 36.9718C77.0149 36.9057 77.1344 36.8729 77.2724 36.8729C77.3227 36.8729 77.3671 36.875 77.4062 36.8798C77.4454 36.8845 77.4887 36.8946 77.5358 36.9104L77.5406 36.572C77.5093 36.5593 77.4755 36.5519 77.4395 36.5487C77.4036 36.5455 77.3618 36.5439 77.3147 36.5439Z" fill="#333333"/>
+<path d="M80.7508 36.8871C80.6964 36.7829 80.6112 36.6962 80.4938 36.6285C80.3526 36.5471 80.1897 36.5063 80.0046 36.5063C79.7915 36.5063 79.6059 36.5539 79.4472 36.6497C79.2891 36.7454 79.1653 36.8824 79.0759 37.0611C78.9866 37.2399 78.9421 37.4514 78.9421 37.6957C78.9421 37.9401 78.9866 38.1516 79.0759 38.3304C79.1653 38.5091 79.2891 38.6461 79.4472 38.7418C79.6053 38.8375 79.791 38.8851 80.0046 38.8851C80.1834 38.8851 80.3463 38.8434 80.4938 38.7603C80.6043 38.6979 80.6874 38.6207 80.7429 38.5276V38.8476C80.7429 39.0168 80.6942 39.148 80.5969 39.24C80.4996 39.3326 80.351 39.3786 80.15 39.3786C80.0527 39.3786 79.9501 39.3701 79.8423 39.3526C79.7344 39.3352 79.6297 39.3093 79.5297 39.2749C79.4292 39.2405 79.3367 39.1982 79.2521 39.148L79.1061 39.7403C79.2505 39.8281 79.4123 39.8931 79.5926 39.9354C79.773 39.9778 79.9824 39.9989 80.2204 39.9989C80.6562 39.9989 80.9883 39.8916 81.2173 39.6768C81.4463 39.4621 81.5605 39.1538 81.5605 38.7529V37.206C81.5605 37.0997 81.5637 36.9913 81.57 36.8813C81.5764 36.7718 81.5859 36.6634 81.5981 36.5566H80.7942L80.7503 36.8855L80.7508 36.8871ZM80.607 38.1194C80.5224 38.2167 80.4076 38.2653 80.2637 38.2653C80.1199 38.2653 80.0004 38.2167 79.9158 38.1194C79.8311 38.022 79.7888 37.8814 79.7888 37.6963C79.7888 37.5112 79.8311 37.3663 79.9158 37.2705C80.0004 37.1748 80.1162 37.1272 80.2637 37.1272C80.4113 37.1272 80.5224 37.1748 80.607 37.2705C80.6916 37.3663 80.7339 37.508 80.7339 37.6963C80.7339 37.8845 80.6916 38.0226 80.607 38.1194Z" fill="#333333"/>
+<path d="M83.5882 36.5063C83.447 36.5063 83.3248 36.5344 83.2212 36.591C83.1175 36.6476 83.0313 36.7338 82.9626 36.8496C82.9398 36.8882 82.9197 36.9315 82.9007 36.977L82.8494 36.5582H82.0408C82.0535 36.665 82.0624 36.7729 82.0688 36.8829C82.0751 36.9929 82.0783 37.1024 82.0783 37.2118V38.947H82.9245V37.8375C82.9245 37.6899 82.9425 37.5693 82.9784 37.4752C83.0144 37.3811 83.0731 37.3113 83.1545 37.2658C83.236 37.2203 83.3412 37.1976 83.4697 37.1976C83.5448 37.1976 83.6062 37.2023 83.6533 37.2118C83.7003 37.2214 83.7627 37.243 83.8415 37.2774V36.5439C83.804 36.528 83.7685 36.518 83.7358 36.5132C83.703 36.5085 83.6533 36.5063 83.5877 36.5063H83.5882Z" fill="#333333"/>
+<path d="M85.7706 36.8966C85.7167 36.794 85.631 36.7073 85.5136 36.638C85.3645 36.5502 85.1979 36.5063 85.0128 36.5063C84.806 36.5063 84.6241 36.5555 84.4675 36.6544C84.311 36.7533 84.1878 36.8956 84.0984 37.0823C84.009 37.269 83.9646 37.4921 83.9646 37.7523C83.9646 38.0125 84.009 38.232 84.0984 38.4203C84.1878 38.6085 84.3105 38.7519 84.4675 38.8508C84.6241 38.9497 84.806 38.9988 85.0128 38.9988C85.1915 38.9988 85.3555 38.9571 85.5041 38.874C85.6099 38.8148 85.6897 38.7418 85.7442 38.6546L85.7511 38.947H86.5787V37.2071C86.5787 37.1008 86.5824 36.9924 86.5904 36.8824C86.5983 36.7729 86.6068 36.6645 86.6163 36.5576H85.8119L85.7706 36.8961V36.8966ZM85.6241 38.2299C85.5364 38.3288 85.4221 38.378 85.2809 38.378C85.1397 38.378 85.0213 38.3288 84.935 38.2299C84.8488 38.131 84.8055 37.9718 84.8055 37.7523C84.8055 37.5329 84.8494 37.3737 84.9372 37.2753C85.025 37.1764 85.1392 37.1272 85.2804 37.1272C85.4216 37.1272 85.5358 37.1764 85.6236 37.2753C85.7114 37.3742 85.7553 37.5334 85.7553 37.7523C85.7553 37.9713 85.7114 38.131 85.6236 38.2299H85.6241Z" fill="#333333"/>
+<path d="M88.69 36.5063C88.5081 36.5063 88.3452 36.5465 88.2008 36.6264C88.0813 36.6925 87.9845 36.7835 87.9105 36.8982L87.8719 36.5582H87.0632C87.0759 36.665 87.0849 36.7729 87.0913 36.8829C87.0976 36.9929 87.1008 37.1008 87.1008 37.2076V38.9475H87.938V37.6169C87.938 37.4757 87.9787 37.362 88.0601 37.2758C88.1416 37.1896 88.2484 37.1463 88.3801 37.1463C88.4806 37.1463 88.5573 37.1769 88.6107 37.2378C88.6641 37.2991 88.6905 37.4065 88.6905 37.5598V38.947H89.5277V37.5223C89.5277 37.1743 89.4579 36.9178 89.3183 36.7533C89.1787 36.5889 88.9698 36.5063 88.6905 36.5063H88.69Z" fill="#333333"/>
+<path d="M91.0692 35.7961L90.232 35.9934V36.5577H89.7852V37.1738H90.232V38.02C90.232 38.3489 90.3172 38.5943 90.4885 38.7561C90.6594 38.9175 90.9143 38.9984 91.2527 38.9984C91.3151 38.9984 91.3807 38.9936 91.4479 38.9841C91.515 38.9746 91.5833 38.9561 91.6525 38.9275V38.2834C91.6087 38.2992 91.5669 38.3109 91.5277 38.3188C91.4886 38.3267 91.4421 38.3304 91.3892 38.3304C91.3014 38.3304 91.2263 38.3077 91.1634 38.2622C91.1004 38.2167 91.0692 38.1252 91.0692 37.9872V37.1738H91.6525V36.5577H91.0692V35.7961Z" fill="#333333"/>
+<path d="M93.8342 36.6566C93.6396 36.5561 93.4112 36.5059 93.1478 36.5059C92.8844 36.5059 92.6507 36.5561 92.4566 36.6566C92.2619 36.7571 92.1118 36.8993 92.0049 37.0844C91.8981 37.2695 91.8452 37.4922 91.8452 37.7524C91.8452 38.0126 91.8986 38.2315 92.0049 38.4177C92.1112 38.6044 92.2619 38.7477 92.4566 38.8482C92.6507 38.9486 92.8812 38.9989 93.1478 38.9989C93.4143 38.9989 93.6402 38.9486 93.8342 38.8482C94.0283 38.7477 94.179 38.6038 94.2859 38.4156C94.3922 38.2273 94.4456 38.0062 94.4456 37.7524C94.4456 37.4985 94.3922 37.2738 94.2859 37.0871C94.179 36.9004 94.0289 36.7571 93.8342 36.6566ZM93.4767 38.2294C93.3953 38.3283 93.2853 38.3775 93.1478 38.3775C93.0103 38.3775 92.8955 38.3283 92.8141 38.2294C92.7326 38.1305 92.6919 37.9713 92.6919 37.7518C92.6919 37.5324 92.7326 37.3732 92.8141 37.2748C92.8955 37.1759 93.0071 37.1267 93.1478 37.1267C93.2885 37.1267 93.3953 37.1759 93.4767 37.2748C93.5582 37.3737 93.5989 37.5329 93.5989 37.7518C93.5989 37.9708 93.5582 38.1305 93.4767 38.2294Z" fill="#333333"/>
+<path d="M97.5775 37.5313L97.0698 37.4419C97.0011 37.4292 96.9508 37.4081 96.9191 37.3785C96.8879 37.3489 96.872 37.3118 96.872 37.2679C96.872 37.2114 96.9 37.1638 96.9566 37.1246C97.0132 37.0855 97.1084 37.0659 97.2433 37.0659C97.3559 37.0659 97.4776 37.0871 97.6077 37.1294C97.7378 37.1717 97.8515 37.2256 97.9488 37.2917L98.1651 36.7602C98.0429 36.6724 97.8996 36.6085 97.7346 36.5672C97.5701 36.5265 97.3966 36.5059 97.2147 36.5059C96.9921 36.5059 96.799 36.5397 96.6361 36.6069C96.4733 36.6746 96.3479 36.7682 96.2601 36.8888C96.1723 37.0093 96.1284 37.1516 96.1284 37.3145C96.1284 37.4932 96.184 37.6381 96.2956 37.7492C96.4066 37.8603 96.5626 37.9348 96.7636 37.9724L97.2713 38.0618C97.3401 38.0744 97.3919 38.0945 97.4263 38.1231C97.4606 38.1511 97.4781 38.1892 97.4781 38.2357C97.4781 38.2955 97.4506 38.3431 97.3956 38.3791C97.3406 38.415 97.2538 38.433 97.1349 38.433C96.9841 38.433 96.8329 38.4113 96.6811 38.3674C96.5288 38.3235 96.3918 38.2669 96.2696 38.1982L96.0676 38.7434C96.193 38.8217 96.3458 38.8836 96.5261 38.9291C96.7065 38.9746 96.908 38.9973 97.1306 38.9973C97.3533 38.9973 97.5368 38.965 97.6997 38.901C97.8626 38.8371 97.9905 38.7445 98.0831 38.6234C98.1756 38.5028 98.2217 38.3563 98.2217 38.1839C98.2217 37.9988 98.1661 37.8523 98.0545 37.7444C97.9435 37.6366 97.7843 37.5652 97.577 37.5303L97.5775 37.5313Z" fill="#333333"/>
+<path d="M100.302 36.6639C100.141 36.5587 99.9397 36.5063 99.698 36.5063C99.4563 36.5063 99.24 36.5587 99.0586 36.6639C98.8767 36.7692 98.7355 36.9157 98.6355 37.1034C98.5351 37.2917 98.4854 37.5064 98.4854 37.7476C98.4854 38.1363 98.6054 38.442 98.845 38.6646C99.0851 38.8873 99.4209 38.9983 99.8535 38.9983C100.029 38.9983 100.195 38.9761 100.352 38.9327C100.509 38.8888 100.647 38.8264 100.766 38.7445L100.549 38.1992C100.449 38.2621 100.343 38.3071 100.232 38.3357C100.121 38.3637 100.003 38.378 99.8773 38.378C99.6827 38.378 99.5341 38.3293 99.4304 38.232C99.3516 38.158 99.303 38.0517 99.2845 37.912H100.79V37.7333C100.79 37.4921 100.749 37.2795 100.667 37.096C100.586 36.9125 100.464 36.7687 100.303 36.6634L100.302 36.6639ZM99.7075 37.0564C99.8297 37.0564 99.9244 37.0997 99.9921 37.1859C100.051 37.261 100.084 37.3716 100.091 37.5175H99.2845C99.2998 37.3901 99.3331 37.2885 99.3855 37.2145C99.459 37.1092 99.5663 37.0569 99.7075 37.0569V37.0564Z" fill="#333333"/>
+<path d="M102.889 36.8871C102.835 36.7829 102.75 36.6962 102.632 36.6285C102.491 36.5471 102.328 36.5063 102.143 36.5063C101.93 36.5063 101.744 36.5539 101.586 36.6497C101.427 36.7454 101.304 36.8824 101.214 37.0611C101.125 37.2399 101.081 37.4514 101.081 37.6957C101.081 37.9401 101.125 38.1516 101.214 38.3304C101.304 38.5091 101.427 38.6461 101.586 38.7418C101.744 38.8375 101.929 38.8851 102.143 38.8851C102.322 38.8851 102.485 38.8434 102.632 38.7603C102.743 38.6979 102.826 38.6207 102.881 38.5276V38.8476C102.881 39.0168 102.833 39.148 102.735 39.24C102.638 39.3326 102.489 39.3786 102.288 39.3786C102.191 39.3786 102.089 39.3701 101.981 39.3526C101.873 39.3352 101.768 39.3093 101.668 39.2749C101.568 39.2405 101.475 39.1982 101.39 39.148L101.245 39.7403C101.389 39.8281 101.551 39.8931 101.731 39.9354C101.911 39.9778 102.121 39.9989 102.359 39.9989C102.795 39.9989 103.127 39.8916 103.356 39.6768C103.585 39.4621 103.699 39.1538 103.699 38.7529V37.206C103.699 37.0997 103.702 36.9913 103.708 36.8813C103.715 36.7718 103.724 36.6634 103.736 36.5566H102.933L102.889 36.8855L102.889 36.8871ZM102.745 38.1194C102.661 38.2167 102.546 38.2653 102.402 38.2653C102.258 38.2653 102.139 38.2167 102.054 38.1194C101.97 38.022 101.927 37.8814 101.927 37.6963C101.927 37.5112 101.97 37.3663 102.054 37.2705C102.139 37.1748 102.255 37.1272 102.402 37.1272C102.55 37.1272 102.661 37.1748 102.745 37.2705C102.83 37.3663 102.872 37.508 102.872 37.6963C102.872 37.8845 102.83 38.0226 102.745 38.1194Z" fill="#333333"/>
+<path d="M105.764 37.8887C105.764 38.0299 105.725 38.1436 105.649 38.2298C105.572 38.316 105.474 38.3589 105.355 38.3589C105.248 38.3589 105.169 38.3282 105.117 38.2674C105.065 38.206 105.04 38.1129 105.04 37.9876V36.5581H104.202V37.9828C104.202 38.3245 104.275 38.5794 104.421 38.747C104.567 38.9147 104.792 38.9988 105.096 38.9988C105.271 38.9988 105.423 38.957 105.552 38.874C105.644 38.8142 105.722 38.7365 105.787 38.6407V38.9469H106.6V36.5581H105.763V37.8887H105.764Z" fill="#333333"/>
+<path d="M108.633 36.5063C108.491 36.5063 108.369 36.5344 108.266 36.591C108.162 36.6476 108.076 36.7338 108.007 36.8496C107.984 36.8882 107.964 36.9315 107.945 36.977L107.894 36.5582H107.085C107.098 36.665 107.107 36.7729 107.113 36.8829C107.12 36.9929 107.123 37.1024 107.123 37.2118V38.947H107.969V37.8375C107.969 37.6899 107.987 37.5693 108.023 37.4752C108.059 37.3811 108.118 37.3113 108.199 37.2658C108.28 37.2203 108.386 37.1976 108.514 37.1976C108.589 37.1976 108.651 37.2023 108.698 37.2118C108.745 37.2214 108.807 37.243 108.886 37.2774V36.5439C108.848 36.528 108.813 36.518 108.78 36.5132C108.747 36.5085 108.698 36.5063 108.632 36.5063H108.633Z" fill="#333333"/>
+<path d="M110.979 36.6566C110.785 36.5561 110.556 36.5059 110.293 36.5059C110.029 36.5059 109.796 36.5561 109.602 36.6566C109.407 36.7571 109.257 36.8993 109.15 37.0844C109.043 37.2695 108.99 37.4922 108.99 37.7524C108.99 38.0126 109.044 38.2315 109.15 38.4177C109.256 38.6044 109.407 38.7477 109.602 38.8482C109.796 38.9486 110.026 38.9989 110.293 38.9989C110.559 38.9989 110.785 38.9486 110.979 38.8482C111.173 38.7477 111.324 38.6038 111.431 38.4156C111.537 38.2273 111.591 38.0062 111.591 37.7524C111.591 37.4985 111.537 37.2738 111.431 37.0871C111.324 36.9004 111.174 36.7571 110.979 36.6566ZM110.622 38.2294C110.54 38.3283 110.43 38.3775 110.293 38.3775C110.155 38.3775 110.041 38.3283 109.959 38.2294C109.878 38.1305 109.837 37.9713 109.837 37.7518C109.837 37.5324 109.878 37.3732 109.959 37.2748C110.041 37.1759 110.152 37.1267 110.293 37.1267C110.433 37.1267 110.54 37.1759 110.622 37.2748C110.703 37.3737 110.744 37.5329 110.744 37.7518C110.744 37.9708 110.703 38.1305 110.622 38.2294Z" fill="#333333"/>
+<path d="M113.84 37.7455C113.729 37.6376 113.57 37.5662 113.363 37.5313L112.855 37.4419C112.786 37.4292 112.736 37.4081 112.704 37.3785C112.673 37.3489 112.657 37.3118 112.657 37.2679C112.657 37.2114 112.685 37.1638 112.742 37.1246C112.798 37.0855 112.894 37.0659 113.028 37.0659C113.141 37.0659 113.263 37.0871 113.393 37.1294C113.523 37.1717 113.637 37.2256 113.734 37.2917L113.95 36.7602C113.828 36.6724 113.685 36.6085 113.52 36.5672C113.355 36.5265 113.182 36.5059 113 36.5059C112.777 36.5059 112.584 36.5397 112.421 36.6069C112.258 36.6746 112.133 36.7682 112.045 36.8888C111.957 37.0093 111.914 37.1516 111.914 37.3145C111.914 37.4932 111.969 37.6381 112.081 37.7492C112.192 37.8603 112.348 37.9348 112.549 37.9724L113.056 38.0618C113.125 38.0744 113.177 38.0945 113.211 38.1231C113.246 38.1511 113.263 38.1892 113.263 38.2357C113.263 38.2955 113.236 38.3431 113.181 38.3791C113.126 38.415 113.039 38.433 112.92 38.433C112.769 38.433 112.618 38.4113 112.466 38.3674C112.314 38.3235 112.177 38.2669 112.055 38.1982L111.853 38.7434C111.978 38.8217 112.131 38.8836 112.311 38.9291C112.492 38.9746 112.693 38.9973 112.916 38.9973C113.138 38.9973 113.322 38.965 113.485 38.901C113.648 38.8371 113.776 38.7445 113.868 38.6234C113.961 38.5028 114.007 38.3563 114.007 38.1839C114.007 37.9988 113.951 37.8523 113.84 37.7444L113.84 37.7455Z" fill="#333333"/>
+<path d="M83.9219 5.53193C91.878 -3.60352 108.129 -0.912172 113.328 9.84475C113.649 10.5275 113.922 11.2267 114.12 11.9507C113.814 11.7248 113.53 11.4906 113.249 11.2605C112.477 10.6476 111.502 9.91562 110.687 9.35397C102.334 3.6106 93.5333 2.76285 83.9214 5.53193H83.9219Z" fill="#0CD2AB"/>
+</g>
+<defs>
+<clipPath id="clip0_371_2115">
+<rect width="114.12" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets.d.ts

@@ -0,0 +1,19 @@
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package/src/components/atoms/DropDownMenu/DropdownMenu.styles.tsx

@@ -0,0 +1,106 @@
+import styled, { css } from 'styled-components';
+import {
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+  semanticShadows,
+  semanticSizes,
+  typographyTokens,
+} from '../../../styles/tokens';
+import { Variant } from './DropdownMenu.types';
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+`;
+
+export const ToggleButton = styled.button<{
+  $variant: Variant;
+  $open: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${semanticSizes.global.gap.sm};
+  padding: ${semanticSizes.global.padding.lg};
+  height: ${semanticSizes.global.spacings.lg};
+  font-size: ${typographyTokens.fontSizes.labelS};
+  border: none;
+  border-radius: ${semanticRadius.global.radius.md};
+  cursor: pointer;
+  transition: opacity 0.2s;
+  min-width: 160px;
+
+  ${(props) =>
+    props.$variant === 'light'
+      ? css`
+          background-color: ${semanticColors.branding.border.enabled};
+          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+        `
+      : css`
+          background-color: ${semanticColors.global.surface.default};
+          color: ${semanticColors.branding.border.enabled};
+          border: ${semanticBorders.global.sm} solid
+            ${semanticColors.branding.border.enabled};
+        `}
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+export const LabelText = styled.span`
+  font-weight: ${typographyTokens.fontWeights.medium};
+`;
+
+export const Menu = styled.div<{ $variant: Variant }>`
+  position: absolute;
+  top: calc(100% + ${semanticSizes.global.gap.xs});
+  right: 0;
+  width: 100%;
+  padding: ${semanticSizes.global.padding.sm} 0;
+  border-radius: ${semanticRadius.global.radius.md};
+  box-shadow: ${semanticShadows.shadow.default};
+  display: grid;
+  gap: ${semanticSizes.global.gap.xs};
+  z-index: 10;
+
+  ${(props) =>
+    props.$variant === 'light'
+      ? css`
+          background-color: ${semanticColors.global.surface.default};
+          color: ${semanticColors.global.text.default.enabled};
+        `
+      : css`
+          background-color: ${semanticColors.branding.surface.enabled};
+          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+        `}
+`;
+
+export const Item = styled.div`
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${semanticSizes.global.gap.sm};
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
+  font-size: ${typographyTokens.fontSizes.labelS};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${semanticColors.neutral['100']};
+  }
+`;
+
+export const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+export const ItemLabel = styled.span`
+  flex: 1;
+  text-align: left;
+`;

package/src/components/atoms/DropDownMenu/DropdownMenu.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import {
+  Wrapper,
+  ToggleButton,
+  LabelText,
+  Menu,
+  Item,
+  IconWrapper,
+  ItemLabel,
+} from "./DropdownMenu.styles";
+import { DropdownMenuProps, DropdownMenuItemProps } from "./DropdownMenu.types";
+
+export const DropdownMenu: React.FC<DropdownMenuProps> = ({
+  label,
+  variant = "light",
+  children,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Wrapper>
+      <ToggleButton
+        onClick={() => setOpen((o) => !o)}
+        $variant={variant}
+        $open={open}
+      >
+        <LabelText>{label}</LabelText>
+        {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+      </ToggleButton>
+      {open && <Menu $variant={variant}>{children}</Menu>}
+    </Wrapper>
+  );
+};
+
+export const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({
+  icon,
+  onClick,
+  children,
+}) => (
+  <Item onClick={onClick}>
+    {icon && <IconWrapper>{icon}</IconWrapper>}
+    <ItemLabel>{children}</ItemLabel>
+  </Item>
+);
+
+DropdownMenu.displayName = "DropdownMenu";
+DropdownMenuItem.displayName = "DropdownMenuItem";

package/src/components/atoms/DropDownMenu/DropdownMenu.types.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+export type Variant = "light" | "dark";
+
+export interface DropdownMenuProps {
+  label: string;
+  variant?: Variant;
+  children: ReactNode;
+}
+
+export interface DropdownMenuItemProps {
+  icon?: ReactNode;
+  onClick?: () => void;
+  children: ReactNode;
+}

package/src/components/atoms/DropDownMenu/index.tsx

@@ -0,0 +1,2 @@
+export { DropdownMenu, DropdownMenuItem } from "./DropdownMenu";
+export type { DropdownMenuProps, DropdownMenuItemProps } from "./DropdownMenu.types";

package/src/components/atoms/ErrorMessage/ErrorMessage.styles.tsx

@@ -0,0 +1,28 @@
+import styled, { css } from "styled-components";
+import {
+  semanticBorders,
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+} from "@granto-umbrella/umbrella-components";
+
+const errorMessageVariants = {
+  error: css`
+    color: ${semanticColors.danger.text.feedback.accent};
+  `,
+  success: css`
+    color: ${semanticColors.success.text.feedback.accent};
+  `,
+};
+
+export const ErrorMessage = styled.p<{ $type?: "error" | "success" }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${semanticSizes.global.gap.md};
+  font-size: ${typographyTokens.fontSizes.labelS};
+  margin-top: ${semanticSizes.global.spacings.sm};
+  border-radius: ${semanticBorders.global.md};
+  
+  ${({ $type = "error" }) => errorMessageVariants[$type]}
+`;

package/src/components/atoms/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { ErrorMessage as StyledErrorMessage } from "./ErrorMessage.styles";
+import { ErrorMessageProps } from "./ErrorMessage.types";
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ 
+  children,
+  type = "error"
+}) => {
+  return <StyledErrorMessage $type={type}>{children}</StyledErrorMessage>;
+};
+
+export default ErrorMessage;

package/src/components/atoms/ErrorMessage/ErrorMessage.types.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export interface ErrorMessageProps {
+    children: React.ReactNode;
+    type?: "error" | "success" ;
+}

package/src/components/atoms/ErrorMessage/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ErrorMessage";

package/src/components/atoms/Footer/Footer.styles.tsx

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import {
+  semanticSizes,
+  semanticColors,
+  primitiveSizes,
+  typographyTokens,
+} from "@granto-umbrella/umbrella-components";
+
+export const Container = styled.div`
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.global.text.default.enabled};
+  margin-top: calc(${semanticSizes.global.padding["4xl"]} + 111px);
+  padding-bottom: ${semanticSizes.global.padding["2xl"]};
+  text-align: center;
+  font-family: ${typographyTokens.fontFamily.base};
+  font-weight: ${typographyTokens.fontWeights.regular};
+  line-height: ${typographyTokens.lineHeights.bodyM};
+  position: fixed;
+  bottom: ${primitiveSizes.size.half};
+  width: ${semanticSizes.global.full};
+  background-color: ${semanticColors.base.background};
+`;

package/src/components/atoms/Footer/Footer.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Container } from "./Footer.styles";
+import { FooterProps } from "./Footer.types";
+
+const Footer: React.FC<FooterProps> = ({ children }) => {
+  return <Container>{children}</Container>;
+};
+
+export default Footer;

package/src/components/atoms/Footer/Footer.types.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export interface FooterProps {
+  children: React.ReactNode;
+}

package/src/components/atoms/Footer/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Footer";

package/src/components/atoms/GenericContainer/GenericContainer.styles.tsx

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import {
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+} from "@granto-umbrella/umbrella-components";
+
+export const Container = styled.div`
+  padding: ${semanticSizes.global.padding["2xl"]};
+  
+  h1 {
+    font-size: ${typographyTokens.fontSizes.displayM};
+    font-weight: ${typographyTokens.fontWeights.semibold};
+    line-height: ${typographyTokens.lineHeights.displayM};
+    margin-top: ${semanticSizes.global.padding.xl};
+  }
+  
+  .text {
+    color: ${semanticColors.global.text.default.enabled};
+  }
+`;

package/src/components/atoms/GenericContainer/GenericContainer.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Container } from "./GenericContainer.styles";
+import { GenericContainerProps } from "./GenericContainer.types";
+
+export const GenericContainer: React.FC<GenericContainerProps> = ({
+  children,
+}) => {
+  return <Container>{children}</Container>;
+};

package/src/components/atoms/GenericContainer/GenericContainer.types.ts

@@ -0,0 +1,5 @@
+import React from "react";
+
+export interface GenericContainerProps {
+  children: React.ReactNode;
+}

package/src/components/atoms/GenericContainer/index.tsx

@@ -0,0 +1 @@
+export { GenericContainer } from "./GenericContainer";

package/src/components/atoms/Loading/Loading.styles.tsx

@@ -0,0 +1,23 @@
+import styled, { keyframes } from "styled-components";
+import {
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+  semanticSizes,
+} from "@granto-umbrella/umbrella-components";
+
+const spin = keyframes`
+  to { 
+    transform: rotate(360deg); 
+  }
+`;
+
+export const StyledLoader = styled.div`
+  margin: ${semanticSizes.global.spacings.lg} auto;
+  border: ${semanticBorders.global.lg} solid ${semanticColors.global.border.default};
+  border-top: ${semanticBorders.global.lg} solid ${semanticColors.info.border.feedback};
+  border-radius: ${semanticRadius.global.radius.full};
+  width: ${semanticSizes.global.spacings.md};
+  height: ${semanticSizes.global.spacings.md};
+  animation: ${spin} 1s linear infinite;
+`;

package/src/components/atoms/Loading/Loading.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { StyledLoader } from "./Loading.styles";
+
+const Loader: React.FC = () => {
+  return <StyledLoader />;
+};
+
+export default Loader;

package/src/components/atoms/Loading/index.tsx

@@ -0,0 +1 @@
+export { default } from './Loading';

package/src/components/atoms/LogoContainer/LogoContainer.Types.tsx

@@ -0,0 +1,5 @@
+export interface LogoContainerProps {
+  src: string;
+  alt?: string;
+  margintBottom?: string;
+}

package/src/components/atoms/LogoContainer/LogoContainer.styles.tsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { primitiveSizes } from "@granto-umbrella/umbrella-components";
+
+export const Logo = styled.img<{ marginBottom?: string }>`
+  margin-bottom: ${(props) => props.marginBottom || primitiveSizes.size.x6};
+  width: 112px;
+  
+  @media (max-width: 768px) {
+    width: 114.12px;
+  }
+`;

package/src/components/atoms/LogoContainer/LogoContainer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Logo } from "./LogoContainer.styles";
+import { LogoContainerProps } from "./LogoContainer.Types";
+
+export const LogoContainer: React.FC<LogoContainerProps> = ({ 
+  src, 
+  alt, 
+  margintBottom 
+}) => {
+  return <Logo src={src} alt={alt} marginBottom={margintBottom} />;
+};

package/src/components/atoms/LogoContainer/index.tsx

@@ -0,0 +1 @@
+export { LogoContainer } from "./LogoContainer";

package/src/components/atoms/ModalAviso/ModalAviso.styles.tsx

@@ -0,0 +1,54 @@
+// ModalAviso.styles.tsx
+import styled from "styled-components";
+import { 
+  primitiveColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens, 
+  semanticBorders
+}  from "../../../styles/tokens";
+
+export const Wrapper = styled.div`
+  position: fixed;
+  bottom: calc(${semanticSizes.global.spacings.lg} + 10px); 
+  right: ${semanticSizes.global.padding.lg};
+  z-index: 9999;
+`;
+
+export const Container = styled.div`
+  background-color: ${primitiveColors.purple[100]};
+  border-radius: ${semanticRadius.global.radius.md2};
+  border: ${semanticBorders.global.md} solid ${primitiveColors.purple[1200]};
+  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: ${semanticSizes.global.gap.md};
+  max-width: 600px;
+`;
+
+export const Content = styled.div`
+  flex: 1;
+`;
+
+export const Title = styled.p`
+  color: ${primitiveColors.gray[1100]};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  margin: 0 0 ${semanticSizes.global.gap.xs} 0;
+`;
+
+export const Description = styled.p`
+  color: ${primitiveColors.gray[800]};
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  margin: 0;
+`;
+
+export const CloseButton = styled.button`
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: ${primitiveColors.gray[600]};
+  line-height: 0;
+`;

package/src/components/atoms/ModalAviso/ModalAviso.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { X } from "lucide-react";
+import { CloseButton, Container, Content, Description, Title, Wrapper } from "./ModalAviso.styles";
+import { ModalAvisoProps } from "./ModalAviso.types";
+
+export const ModalAviso: React.FC<ModalAvisoProps> = ({
+  title,
+  description,
+  onClose,
+}) => {
+  
+  useEffect(() => {
+    if (onClose) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [onClose]);
+
+  return (
+    <Wrapper>
+      <Container>
+        <Content>
+          <Title>{title}</Title>
+          <Description>{description}</Description>
+        </Content>
+        {onClose && (
+          <CloseButton onClick={onClose}>
+            <X size={22} />
+          </CloseButton>
+        )}
+      </Container>
+    </Wrapper>
+  );
+};

package/src/components/atoms/ModalAviso/ModalAviso.types.ts

@@ -0,0 +1,5 @@
+export interface ModalAvisoProps {
+  title: string;
+  description: string;
+  onClose?: () => void;
+}

package/src/components/atoms/ModalAviso/index.tsx

@@ -0,0 +1 @@
+export { ModalAviso } from "./ModalAviso";