@mmb-digital/design-system-web 0.1.0

package/src/components/storeButton/assets/androidSvg.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+
+interface Props {
+	className?: string;
+	height?: string;
+	width?: string;
+}
+
+export const AndroidSvg: React.FC<Props> = ({ className, height = '29', width = '116' }) => (
+	<svg
+		className={className}
+		fill="none"
+		height={height}
+		viewBox="0 0 116 29"
+		width={width}
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M58.1 16.8C55.7 16.8 53.8 18.6 53.8 21.1C53.8 23.5 55.7 25.4 58.1 25.4C60.5 25.4 62.4 23.6 62.4 21.1C62.4 18.5 60.5 16.8 58.1 16.8ZM58.1 23.6C56.8 23.6 55.7 22.5 55.7 21C55.7 19.5 56.8 18.4 58.1 18.4C59.4 18.4 60.5 19.4 60.5 21C60.5 22.5 59.4 23.6 58.1 23.6ZM48.8 16.8C46.4 16.8 44.5 18.6 44.5 21.1C44.5 23.5 46.4 25.4 48.8 25.4C51.2 25.4 53.1 23.6 53.1 21.1C53.1 18.5 51.2 16.8 48.8 16.8ZM48.8 23.6C47.5 23.6 46.4 22.5 46.4 21C46.4 19.5 47.5 18.4 48.8 18.4C50.1 18.4 51.2 19.4 51.2 21C51.2 22.5 50.1 23.6 48.8 23.6ZM37.7 18.1V19.9H42C41.9 20.9 41.5 21.7 41 22.2C40.4 22.8 39.4 23.5 37.7 23.5C35 23.5 33 21.4 33 18.7C33 16 35.1 13.9 37.7 13.9C39.1 13.9 40.2 14.5 41 15.2L42.3 13.9C41.2 12.9 39.8 12.1 37.8 12.1C34.2 12.1 31.1 15.1 31.1 18.7C31.1 22.3 34.2 25.3 37.8 25.3C39.8 25.3 41.2 24.7 42.4 23.4C43.6 22.2 44 20.5 44 19.2C44 18.8 44 18.4 43.9 18.1H37.7ZM83.1 19.5C82.7 18.5 81.7 16.8 79.5 16.8C77.3 16.8 75.5 18.5 75.5 21.1C75.5 23.5 77.3 25.4 79.7 25.4C81.6 25.4 82.8 24.2 83.2 23.5L81.8 22.5C81.3 23.2 80.7 23.7 79.7 23.7C78.7 23.7 78.1 23.3 77.6 22.4L83.3 20L83.1 19.5ZM77.3 20.9C77.3 19.3 78.6 18.4 79.5 18.4C80.2 18.4 80.9 18.8 81.1 19.3L77.3 20.9ZM72.6 25H74.5V12.5H72.6V25ZM69.6 17.7C69.1 17.2 68.3 16.7 67.3 16.7C65.2 16.7 63.2 18.6 63.2 21C63.2 23.4 65.1 25.2 67.3 25.2C68.3 25.2 69.1 24.7 69.5 24.2H69.6V24.8C69.6 26.4 68.7 27.3 67.3 27.3C66.2 27.3 65.4 26.5 65.2 25.8L63.6 26.5C64.1 27.6 65.3 29 67.4 29C69.6 29 71.4 27.7 71.4 24.6V17H69.6V17.7ZM67.4 23.6C66.1 23.6 65 22.5 65 21C65 19.5 66.1 18.4 67.4 18.4C68.7 18.4 69.7 19.5 69.7 21C69.7 22.5 68.7 23.6 67.4 23.6ZM91.8 12.5H87.3V25H89.2V20.3H91.8C93.9 20.3 95.9 18.8 95.9 16.4C95.9 14 93.9 12.5 91.8 12.5ZM91.9 18.5H89.2V14.2H91.9C93.3 14.2 94.1 15.4 94.1 16.3C94 17.4 93.2 18.5 91.9 18.5ZM103.4 16.7C102 16.7 100.6 17.3 100.1 18.6L101.8 19.3C102.2 18.6 102.8 18.4 103.5 18.4C104.5 18.4 105.4 19 105.5 20V20.1C105.2 19.9 104.4 19.6 103.6 19.6C101.8 19.6 100 20.6 100 22.4C100 24.1 101.5 25.2 103.1 25.2C104.4 25.2 105 24.6 105.5 24H105.6V25H107.4V20.2C107.2 18 105.5 16.7 103.4 16.7ZM103.2 23.6C102.6 23.6 101.7 23.3 101.7 22.5C101.7 21.5 102.8 21.2 103.7 21.2C104.5 21.2 104.9 21.4 105.4 21.6C105.2 22.8 104.2 23.6 103.2 23.6ZM113.7 17L111.6 22.4H111.5L109.3 17H107.3L110.6 24.6L108.7 28.8H110.6L115.7 17H113.7ZM96.9 25H98.8V12.5H96.9V25Z"
+			fill="white"
+		/>
+		<path
+			d="M0.4 2.5C0.0999999 2.8 0 3.3 0 3.9V26C0 26.6 0.2 27.1 0.5 27.4L0.6 27.5L13 15.1V14.9L0.4 2.5Z"
+			fill="url(#paint0_linear_2551_76392)"
+		/>
+		<path
+			d="M17 19.3L12.9 15.2V14.9L17 10.8L17.1 10.9L22 13.7C23.4 14.5 23.4 15.8 22 16.6L17 19.3Z"
+			fill="url(#paint1_linear_2551_76392)"
+		/>
+		<path
+			d="M17.1 19.2L12.9 15L0.400024 27.5C0.900024 28 1.60002 28 2.50002 27.6L17.1 19.2Z"
+			fill="url(#paint2_linear_2551_76392)"
+		/>
+		<path
+			d="M17.1 10.8L2.50002 2.49999C1.60002 1.99999 0.900024 2.09999 0.400024 2.59999L12.9 15L17.1 10.8Z"
+			fill="url(#paint3_linear_2551_76392)"
+		/>
+		<path
+			d="M17 19.1L2.50002 27.3C1.70002 27.8 1.00003 27.7 0.500025 27.3L0.400024 27.4L0.500025 27.5C1.00003 27.9 1.70002 28 2.50002 27.5L17 19.1Z"
+			fill="black"
+			opacity="0.2"
+		/>
+		<path
+			d="M0.399999 27.3C0.0999995 27 0 26.5 0 25.9V26C0 26.6 0.2 27.1 0.5 27.4V27.3H0.399999Z"
+			fill="black"
+			opacity="0.12"
+		/>
+		<path
+			d="M22 16.3L17 19.1L17.1 19.2L22 16.4C22.7 16 23 15.5 23 15C23 15.5 22.6 15.9 22 16.3Z"
+			fill="black"
+			opacity="0.12"
+		/>
+		<path
+			d="M2.5 2.60003L22 13.7C22.6 14.1 23 14.5 23 15C23 14.5 22.7 14 22 13.6L2.5 2.50003C1.1 1.70003 0 2.30003 0 3.90003V4.00003C0 2.50003 1.1 1.80003 2.5 2.60003Z"
+			fill="white"
+			opacity="0.25"
+		/>
+		<path
+			d="M31.3 8V2H32.2L35.1 6.7V2H36V8H35.2L32.1 3.1V8H31.3ZM39.6 8H38.8V5.2L36.8 2H37.7L39.2 4.4L40.7 2H41.6L39.6 5.2V8ZM42.5 8V2H43.4001L46.3 6.7V2H47.1V8H46.3L43.2 3.1V8H42.5ZM48.5 8V2H49.3001V8H48.5ZM49.2 1.5H48.5L49.0001 0.5H49.8001L49.2 1.5ZM52.6001 8V2H53.5L56.4 6.7V2H57.2V8H56.4L53.3 3.1V8H52.6001ZM58.1 8L60.4001 2H61.3L63.6 8H62.7L62.1 6.4H59.6L59.0001 8H58.1ZM59.8001 5.7H61.8001L60.8 3L59.8001 5.7Z"
+			fill="white"
+			stroke="white"
+			strokeWidth="0.138889"
+		/>
+		<defs>
+			<linearGradient
+				gradientUnits="userSpaceOnUse"
+				id="paint0_linear_2551_76392"
+				x1="7.93299"
+				x2="-2.72718"
+				y1="3.70975"
+				y2="14.3701"
+			>
+				<stop stopColor="#00A0FF" />
+				<stop
+					offset="0.00657"
+					stopColor="#00A1FF"
+				/>
+				<stop
+					offset="0.2601"
+					stopColor="#00BEFF"
+				/>
+				<stop
+					offset="0.5122"
+					stopColor="#00D2FF"
+				/>
+				<stop
+					offset="0.7604"
+					stopColor="#00DFFF"
+				/>
+				<stop
+					offset="1"
+					stopColor="#00E3FF"
+				/>
+			</linearGradient>
+			<linearGradient
+				gradientUnits="userSpaceOnUse"
+				id="paint1_linear_2551_76392"
+				x1="23.8343"
+				x2="-0.362575"
+				y1="15.0017"
+				y2="15.0017"
+			>
+				<stop stopColor="#FFE000" />
+				<stop
+					offset="0.4087"
+					stopColor="#FFBD00"
+				/>
+				<stop
+					offset="0.7754"
+					stopColor="#FFA500"
+				/>
+				<stop
+					offset="1"
+					stopColor="#FF9C00"
+				/>
+			</linearGradient>
+			<linearGradient
+				gradientUnits="userSpaceOnUse"
+				id="paint2_linear_2551_76392"
+				x1="14.827"
+				x2="-3.33"
+				y1="18.9735"
+				y2="37.1305"
+			>
+				<stop stopColor="#FF3A44" />
+				<stop
+					offset="1"
+					stopColor="#C31162"
+				/>
+			</linearGradient>
+			<linearGradient
+				gradientUnits="userSpaceOnUse"
+				id="paint3_linear_2551_76392"
+				x1="-2.70284"
+				x2="5.37702"
+				y1="0.672613"
+				y2="8.75243"
+			>
+				<stop stopColor="#32A071" />
+				<stop
+					offset="0.0685"
+					stopColor="#2DA771"
+				/>
+				<stop
+					offset="0.4762"
+					stopColor="#15CF74"
+				/>
+				<stop
+					offset="0.8009"
+					stopColor="#06E775"
+				/>
+				<stop
+					offset="1"
+					stopColor="#00F076"
+				/>
+			</linearGradient>
+		</defs>
+	</svg>
+);

package/src/components/storeButton/assets/appleSvg.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface Props {
+	className?: string;
+	height?: string;
+	width?: string;
+}
+
+export const AppleSvg: React.FC<Props> = ({ className, height = '26', width = '100' }) => (
+	<svg
+		className={className}
+		fill="none"
+		height={height}
+		viewBox="0 0 100 26"
+		width={width}
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M15.2691 12.3C15.28 11.4654 15.5018 10.6471 15.9138 9.92121C16.3258 9.19533 16.9148 8.58545 17.6258 8.1483C17.174 7.50312 16.5779 6.97218 15.885 6.59766C15.1921 6.22313 14.4214 6.01535 13.6341 5.9908C11.955 5.81497 10.3275 6.9958 9.47164 6.9958C8.59914 6.9958 7.28164 6.0083 5.8633 6.03747C4.94551 6.06707 4.05103 6.33395 3.26707 6.81209C2.4831 7.29024 1.83639 7.96335 1.38997 8.7658C-0.543363 12.1141 0.898303 17.035 2.7508 19.7408C3.6783 21.0666 4.76164 22.5475 6.17914 22.495C7.5658 22.4366 8.08414 21.61 9.7583 21.61C11.4166 21.61 11.9033 22.495 13.3491 22.4616C14.8375 22.4366 15.775 21.13 16.67 19.7925C17.3359 18.8481 17.8484 17.8044 18.1883 16.7C17.3235 16.3342 16.5854 15.7219 16.0663 14.9394C15.5472 14.157 15.2699 13.239 15.2691 12.3ZM12.5375 4.2108C13.3489 3.23649 13.7486 1.98423 13.6516 0.719971C12.4118 0.850316 11.2665 1.44302 10.4441 2.37997C10.042 2.83771 9.73411 3.37021 9.53792 3.94702C9.34174 4.52384 9.26117 5.13366 9.3008 5.74164C9.92096 5.74794 10.5345 5.61345 11.0951 5.34828C11.6558 5.08312 12.1489 4.69419 12.5375 4.2108Z"
+			fill="white"
+		/>
+		<path
+			d="M32.8025 19.14H28.0692L26.9325 22.4958H24.9275L29.4108 10.0784H31.4942L35.9775 22.4958H33.9383L32.8025 19.14ZM28.5592 17.5908H32.3108L30.4608 12.1434H30.41L28.5583 17.5917L28.5592 17.5908ZM45.66 17.97C45.66 20.7833 44.1542 22.5908 41.8817 22.5908C41.306 22.6211 40.7334 22.4887 40.2295 22.2087C39.7256 21.9286 39.3108 21.5124 39.0325 21.0075H38.99V25.4908H37.1317V13.4425H38.93V14.9483H38.9642C39.2552 14.4459 39.6771 14.0318 40.1848 13.7501C40.6925 13.4683 41.2671 13.3295 41.8475 13.3483C44.145 13.3483 45.66 15.1642 45.66 17.97ZM43.7492 17.97C43.7492 16.1367 42.8025 14.9317 41.3575 14.9317C39.9367 14.9317 38.9825 16.1625 38.9825 17.97C38.9825 19.7942 39.9367 21.0158 41.3575 21.0158C42.8025 21.0158 43.7492 19.8192 43.7492 17.97ZM55.625 17.97C55.625 20.7833 54.1183 22.5908 51.8458 22.5908C51.2703 22.621 50.6979 22.4885 50.1941 22.2084C49.6904 21.9284 49.2757 21.5122 48.9975 21.0075H48.9542V25.4908H47.0958V13.4425H48.895V14.9483H48.9292C49.2202 14.4459 49.6421 14.0318 50.1498 13.7501C50.6575 13.4683 51.2321 13.3295 51.8125 13.3483C54.11 13.3483 55.6242 15.1642 55.6242 17.97H55.625ZM53.7142 17.97C53.7142 16.1367 52.7675 14.9317 51.3225 14.9317C49.9017 14.9317 48.9475 16.1625 48.9475 17.97C48.9475 19.7942 49.9017 21.0158 51.3225 21.0158C52.7675 21.0158 53.7142 19.8192 53.7142 17.97ZM62.2108 19.0358C62.3483 20.2675 63.5441 21.0758 65.1791 21.0758C66.7458 21.0758 67.8725 20.2675 67.8725 19.1575C67.8725 18.1933 67.1925 17.6158 65.5833 17.2208L63.975 16.8333C61.695 16.2825 60.6358 15.2158 60.6358 13.485C60.6358 11.3433 62.5033 9.87085 65.155 9.87085C67.7783 9.87085 69.5775 11.3425 69.6383 13.485H67.7616C67.65 12.2458 66.625 11.4984 65.1283 11.4984C63.6308 11.4984 62.6067 12.255 62.6067 13.3567C62.6067 14.2342 63.2608 14.7508 64.8617 15.1467L66.23 15.4825C68.7775 16.085 69.8367 17.1083 69.8367 18.9242C69.8367 21.2483 67.9858 22.7033 65.0425 22.7033C62.2883 22.7033 60.4292 21.2825 60.3092 19.0367H62.2117L62.2108 19.0358ZM73.8458 11.3V13.4417H75.5675V14.9142H73.8458V19.9058C73.8458 20.6808 74.1908 21.0417 74.9475 21.0417C75.1525 21.0383 75.3558 21.0242 75.5591 20.9992V22.4617C75.2191 22.5258 74.8733 22.5542 74.5266 22.5475C72.6933 22.5475 71.9791 21.8592 71.9791 20.1033V14.9142H70.6625V13.4417H71.9791V11.3H73.8458ZM76.565 17.97C76.565 15.1208 78.2425 13.3308 80.8591 13.3308C83.4841 13.3308 85.1541 15.1208 85.1541 17.97C85.1541 20.8258 83.4925 22.6083 80.8591 22.6083C78.2258 22.6083 76.565 20.8258 76.565 17.97ZM83.26 17.97C83.26 16.0158 82.365 14.8617 80.8591 14.8617C79.3533 14.8617 78.4592 16.0242 78.4592 17.97C78.4592 19.9317 79.3533 21.0758 80.8591 21.0758C82.365 21.0758 83.26 19.9317 83.26 17.97ZM86.6858 13.4417H88.4583V14.9833H88.5016C88.6215 14.5021 88.9034 14.0767 89.2999 13.7788C89.6965 13.4809 90.1835 13.3286 90.6791 13.3475C90.8933 13.3475 91.1066 13.37 91.3158 13.4167V15.155C91.0454 15.0726 90.7634 15.0349 90.4808 15.0433C90.2108 15.0323 89.9416 15.0799 89.6917 15.1828C89.4418 15.2857 89.2171 15.4415 89.0331 15.6394C88.8491 15.8373 88.7101 16.0727 88.6257 16.3295C88.5413 16.5862 88.5135 16.8582 88.5441 17.1267V22.4958H86.6858V13.4425V13.4417ZM99.8841 19.8367C99.6341 21.4808 98.0341 22.6083 95.9858 22.6083C93.3525 22.6083 91.7175 20.8433 91.7175 18.0125C91.7175 15.1725 93.3608 13.3308 95.9075 13.3308C98.4125 13.3308 99.9875 15.0517 99.9875 17.7975V18.4333H93.5933V18.5458C93.5639 18.879 93.6057 19.2147 93.7159 19.5305C93.8261 19.8463 94.0023 20.135 94.2327 20.3775C94.463 20.62 94.7424 20.8108 95.0521 20.9371C95.3618 21.0633 95.6949 21.1223 96.0291 21.11C96.4683 21.1512 96.909 21.0495 97.2857 20.8201C97.6624 20.5906 97.955 20.2457 98.12 19.8367H99.8841ZM93.6016 17.135H98.1283C98.145 16.8354 98.0996 16.5355 97.995 16.2543C97.8903 15.973 97.7286 15.7164 97.5201 15.5006C97.3115 15.2848 97.0607 15.1144 96.7831 15.0001C96.5056 14.8859 96.2075 14.8302 95.9075 14.8367C95.6048 14.8348 95.3047 14.8929 95.0246 15.0077C94.7445 15.1224 94.4899 15.2915 94.2755 15.5052C94.0611 15.7189 93.8912 15.973 93.7755 16.2527C93.6598 16.5324 93.6008 16.8323 93.6016 17.135Z"
+			fill="white"
+		/>
+		<path
+			d="M26.8082 5.09333C26.8866 5.66 27.4407 6.01916 28.2391 6.01916C28.9832 6.01916 29.5291 5.63583 29.5291 5.10583C29.5291 4.65083 29.1816 4.37833 28.3916 4.19166L27.6232 4.00583C26.5441 3.75333 26.0516 3.2325 26.0516 2.35583C26.0516 1.29333 26.9199 0.585832 28.2224 0.585832C28.7343 0.528865 29.2479 0.676978 29.6508 0.997763C30.0537 1.31855 30.3132 1.78588 30.3724 2.2975H29.4707C29.4113 2.01744 29.2485 1.77006 29.0149 1.60465C28.7812 1.43924 28.4938 1.36796 28.2099 1.405C27.4774 1.405 26.9899 1.75666 26.9899 2.29416C26.9899 2.71916 27.3049 2.96416 28.0816 3.14583L28.7399 3.3075C29.9632 3.5925 30.4674 4.08833 30.4674 4.98583C30.4674 6.1275 29.5832 6.8425 28.1691 6.8425C26.8457 6.8425 25.9557 6.16 25.8899 5.0925H26.8082V5.09333ZM32.9091 1.07333V2.215H33.8841V2.96416H32.9091V5.27917C32.9091 5.75083 33.1032 5.9575 33.5457 5.9575C33.6591 5.9575 33.7724 5.95 33.8849 5.93667V6.6775C33.7253 6.70591 33.5636 6.72096 33.4016 6.7225C32.4132 6.7225 32.0191 6.375 32.0191 5.50666V2.96416H31.3049V2.215H32.0191V1.07333H32.9091ZM34.8007 5.425C34.8007 4.61417 35.4041 4.14667 36.4757 4.08L37.6949 4.01V3.62083C37.6949 3.14583 37.3807 2.87666 36.7732 2.87666C36.2774 2.87666 35.9332 3.05917 35.8349 3.37667H34.9749C35.0657 2.60417 35.7932 2.10833 36.8141 2.10833C37.9432 2.10833 38.5807 2.67 38.5807 3.62083V6.6975H37.7249V6.06417H37.6541C37.5115 6.2914 37.3112 6.47671 37.0736 6.60116C36.8359 6.72561 36.5695 6.78474 36.3016 6.7725C36.1125 6.79219 35.9214 6.77201 35.7405 6.71328C35.5597 6.65454 35.3932 6.55855 35.2518 6.4315C35.1104 6.30445 34.9972 6.14916 34.9195 5.97565C34.8418 5.80214 34.8013 5.61427 34.8007 5.42416V5.425ZM37.6949 5.03917V4.66333L36.5949 4.73333C35.9757 4.775 35.6949 4.98583 35.6949 5.38333C35.6949 5.78833 36.0457 6.02417 36.5291 6.02417C36.6708 6.03858 36.814 6.02431 36.9501 5.98222C37.0862 5.94012 37.2125 5.87106 37.3213 5.77915C37.4302 5.68724 37.5195 5.57436 37.5838 5.44723C37.6481 5.3201 37.6862 5.18132 37.6957 5.03917H37.6949ZM36.2816 1.44166L37.3191 0.019165H38.3607L37.1999 1.44166H36.2824H36.2816ZM40.0124 0.436665H40.8932V2.91833H40.9641C41.2057 2.3875 41.7549 2.065 42.3366 2.11166C42.5546 2.09977 42.7725 2.13616 42.9748 2.21822C43.1772 2.30028 43.3589 2.426 43.507 2.58639C43.6552 2.74678 43.7661 2.9379 43.8318 3.1461C43.8976 3.3543 43.9165 3.57445 43.8874 3.79083V6.6975H42.9982V4.01C42.9982 3.29083 42.6632 2.92667 42.0349 2.92667C41.8822 2.91416 41.7286 2.93518 41.5848 2.98825C41.4411 3.04132 41.3107 3.12516 41.2027 3.23391C41.0947 3.34266 41.0119 3.47368 40.9598 3.61782C40.9078 3.76195 40.8879 3.91571 40.9016 4.06833V6.6975H40.0124V0.436665ZM45.2616 2.195H46.1174V2.91H46.1841C46.2967 2.65313 46.4866 2.43779 46.7274 2.29394C46.9682 2.1501 47.2478 2.08493 47.5274 2.1075C47.7465 2.09098 47.9665 2.124 48.1712 2.2041C48.3758 2.2842 48.5597 2.40933 48.7094 2.57021C48.8591 2.73109 48.9706 2.92359 49.0358 3.13345C49.1009 3.34331 49.118 3.56514 49.0857 3.7825V6.6975H48.1974V4.00583C48.1974 3.2825 47.8824 2.9225 47.2257 2.9225C47.077 2.91566 46.9285 2.94105 46.7904 2.99695C46.6524 3.05285 46.528 3.13793 46.4259 3.24636C46.3238 3.35479 46.2464 3.48401 46.1989 3.62516C46.1514 3.76632 46.135 3.91607 46.1507 4.06417V6.6975H45.2616V2.195ZM50.2374 4.44416C50.2086 4.14801 50.2421 3.84911 50.3357 3.56667C50.4293 3.28423 50.581 3.02449 50.781 2.80415C50.9809 2.58381 51.2248 2.40774 51.4969 2.28725C51.7689 2.16676 52.0632 2.10451 52.3607 2.10451C52.6583 2.10451 52.9525 2.16676 53.2246 2.28725C53.4967 2.40774 53.7405 2.58381 53.9405 2.80415C54.1405 3.02449 54.2921 3.28423 54.3857 3.56667C54.4793 3.84911 54.5128 4.14801 54.4841 4.44416C54.5128 4.74032 54.4793 5.03922 54.3857 5.32166C54.2921 5.6041 54.1405 5.86384 53.9405 6.08418C53.7405 6.30452 53.4967 6.48059 53.2246 6.60108C52.9525 6.72157 52.6583 6.78381 52.3607 6.78381C52.0632 6.78381 51.7689 6.72157 51.4969 6.60108C51.2248 6.48059 50.9809 6.30452 50.781 6.08418C50.581 5.86384 50.4293 5.6041 50.3357 5.32166C50.2421 5.03922 50.2086 4.74032 50.2374 4.44416ZM53.5707 4.44416C53.5707 3.46833 53.1316 2.8975 52.3624 2.8975C51.5899 2.8975 51.1549 3.46833 51.1549 4.44416C51.1549 5.4275 51.5899 5.99416 52.3624 5.99416C53.1316 5.99416 53.5707 5.42416 53.5707 4.44416ZM59.4732 6.6975H58.6166V5.9825H58.5466C58.4328 6.24224 58.2401 6.45955 57.9958 6.60359C57.7515 6.74764 57.4681 6.81111 57.1857 6.785C56.968 6.80027 56.7496 6.76662 56.5466 6.68651C56.3436 6.60641 56.1611 6.48188 56.0124 6.32206C55.8638 6.16224 55.7528 5.97119 55.6877 5.7629C55.6225 5.55461 55.6047 5.33437 55.6357 5.11833V2.195H56.5249V4.88666C56.5249 5.61416 56.8182 5.96166 57.4707 5.96166C57.6222 5.97603 57.775 5.9564 57.9179 5.90422C58.0609 5.85203 58.1904 5.7686 58.297 5.66001C58.4035 5.55142 58.4846 5.42041 58.5341 5.27653C58.5836 5.13265 58.6004 4.97953 58.5832 4.82833V2.195H59.4732V6.6975ZM62.0916 1.07333V2.215H63.0674V2.96416H62.0924V5.27917C62.0924 5.75083 62.2866 5.9575 62.7291 5.9575C62.8424 5.9575 62.9557 5.95 63.0674 5.93667V6.6775C62.9078 6.70596 62.7461 6.72101 62.5841 6.7225C61.5957 6.7225 61.2024 6.375 61.2024 5.50666V2.96416H60.4874V2.215H61.2024V1.07333H62.0924H62.0916ZM68.8749 6.6975H67.9191L66.2941 2.195H67.2441L68.3657 5.74667H68.4357L69.5524 2.195H70.4957L68.8749 6.6975Z"
+			fill="white"
+		/>
+	</svg>
+);

package/src/components/storeButton/storeButton.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import StoreButton from './storeButton';
+import { StoreButtonSize, StoreButtonVariant, Props } from './storeButton.types';
+import React from 'react';
+
+const meta = {
+	title: 'StoreButton',
+	component: StoreButton,
+	parameters: {},
+	tags: ['autodocs'],
+	argTypes: {},
+	decorators: [
+		(story) => {
+			return <>{story()}</>;
+		},
+	],
+} satisfies Meta<typeof StoreButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultVariant: StoreButtonVariant = StoreButtonVariant.APPLE;
+const defaultSize: StoreButtonSize = StoreButtonSize.SMALL;
+
+const defaultProps: Props = {
+	variant: defaultVariant,
+	size: defaultSize,
+	href: '',
+};
+
+export const Default: Story = {
+	args: {
+		variant: StoreButtonVariant.APPLE,
+		size: StoreButtonSize.SMALL,
+		href: '',
+	},
+	argTypes: {
+		variant: {
+			type: {
+				name: 'enum',
+				value: Object.values(StoreButtonVariant),
+			},
+		},
+		size: {
+			type: {
+				name: 'enum',
+				value: Object.values(StoreButtonSize),
+			},
+		},
+	},
+};
+
+export const AppleButton: Story = {
+	args: {
+		...defaultProps,
+	},
+};
+
+export const AndroidButton: Story = {
+	args: {
+		variant: StoreButtonVariant.ANDROID,
+		size: defaultSize,
+		href: '',
+	},
+};

package/src/components/storeButton/storeButton.styles.ts

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+
+import { StoreButtonSize, Props } from './storeButton.types';
+
+export const StoreButtonStyled = styled.button<Partial<Props>>`
+	/* common styles */
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	background-color: ${({ theme }) => theme.palette.black};
+	border: 1px solid ${({ theme }) => theme.colors.border.neutral.default.light};
+
+	/* size specific styles */
+	${({ size }) => {
+		switch (size) {
+			case StoreButtonSize.SMALL:
+				return css`
+					width: 135px;
+					height: ${({ theme }) => theme.spacing.xxl};
+					border-radius: ${({ theme }) => theme.borderRadius.xs};
+				`;
+			case StoreButtonSize.BIG:
+				return css`
+					width: 162px;
+					height: 48px;
+					border-radius: 6px;
+				`;
+			default:
+				return css`
+					border-radius: ${({ theme }) => theme.borderRadius.xs};
+				`;
+		}
+	}}
+`;

package/src/components/storeButton/storeButton.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import { StoreButtonSize, StoreButtonVariant } from './storeButton.types';
+import StoreButton from './storeButton';
+import StyledComponentsThemeProvider from '@/provider/styledComponents/theme/styledComponentsThemeProvider';
+
+describe('Running Test for StoreButton', () => {
+	test('Check Button Visible', () => {
+		render(
+			<StyledComponentsThemeProvider>
+				<StoreButton
+					href=""
+					size={StoreButtonSize.SMALL}
+					variant={StoreButtonVariant.APPLE}
+				/>
+			</StyledComponentsThemeProvider>,
+		);
+		expect(screen.getByRole('button', { name: 'Button' })).toBeVisible();
+	});
+});

package/src/components/storeButton/storeButton.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React, { FC } from 'react';
+
+import { StoreButtonStyled } from './storeButton.styles';
+import { StoreButtonSize, StoreButtonVariant, Props } from './storeButton.types';
+import { AppleSvg } from './assets/appleSvg';
+import { AndroidSvg } from './assets/androidSvg';
+
+const StoreButton: FC<Props> = (props) => {
+	const { size, variant } = props;
+
+	return (
+		<StoreButtonStyled size={size}>
+			{variant === StoreButtonVariant.APPLE ? (
+				<AppleSvg
+					height={size === StoreButtonSize.SMALL ? '26' : '30'}
+					width={size === StoreButtonSize.SMALL ? '100' : '120'}
+				/>
+			) : (
+				<AndroidSvg
+					height={size === StoreButtonSize.SMALL ? '26' : '30'}
+					width={size === StoreButtonSize.SMALL ? '100' : '120'}
+				/>
+			)}
+		</StoreButtonStyled>
+	);
+};
+
+export default StoreButton;

package/src/components/storeButton/storeButton.types.tsx

@@ -0,0 +1,15 @@
+export enum StoreButtonVariant {
+	ANDROID = 'android',
+	APPLE = 'apple',
+}
+
+export enum StoreButtonSize {
+	BIG = 'big',
+	SMALL = 'small',
+}
+
+export interface Props {
+	href: string;
+	size: StoreButtonSize;
+	variant: StoreButtonVariant;
+}

package/src/icons/systemIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface Props {
+	className?: string;
+	color?: string;
+	width?: string;
+}
+
+export const SystemIcon = ({ className, color = 'white', width = '24' }: Props) => (
+	<svg
+		className={className}
+		fill="none"
+		height={width}
+		viewBox="0 0 24 24"
+		width={width}
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M19.25 12C19.25 12.9521 19.0625 13.8948 18.6981 14.7745C18.3338 15.6541 17.7997 16.4533 17.1265 17.1265C16.4533 17.7997 15.6541 18.3338 14.7745 18.6981C13.8948 19.0625 12.9521 19.25 12 19.25C11.0479 19.25 10.1052 19.0625 9.22554 18.6981C8.34593 18.3338 7.5467 17.7997 6.87348 17.1265C6.20025 16.4533 5.66622 15.6541 5.30187 14.7745C4.93753 13.8948 4.75 12.9521 4.75 12C4.75 10.0772 5.51384 8.23311 6.87348 6.87348C8.23311 5.51384 10.0772 4.75 12 4.75C13.9228 4.75 15.7669 5.51384 17.1265 6.87348C18.4862 8.23311 19.25 10.0772 19.25 12Z"
+			stroke={color}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="1.5"
+		/>
+	</svg>
+);

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/button/button';

package/src/provider/storybook/storybookProvider.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Props } from '@/provider/storybook/storybookProvider.types';
+import StyledComponentsThemeProvider from '@/provider/styledComponents/theme/styledComponentsThemeProvider';
+
+const StorybookProvider: React.FC<Props> = (props) => {
+	const { children } = props;
+
+	return <StyledComponentsThemeProvider>{children}</StyledComponentsThemeProvider>;
+};
+
+export default StorybookProvider;

package/src/provider/storybook/storybookProvider.types.ts

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

package/src/provider/styledComponents/theme/styledComponentsThemeProvider.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { Props } from '@/provider/styledComponents/theme/styledComponentsThemeProvider.types.';
+import { theme } from '@/style/styledComponents/theme';
+
+const StyledComponentsThemeProvider: React.FC<Props> = (props) => {
+	const { children } = props;
+
+	return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export default StyledComponentsThemeProvider;

package/src/provider/styledComponents/theme/styledComponentsThemeProvider.types..ts

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