takeat-design-system-ui-kit 0.0.0

package/src/assets/icons/user.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_62_1490" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_62_1490)">
+<path d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM4 18V17.2C4 16.6333 4.14583 16.1125 4.4375 15.6375C4.72917 15.1625 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6458 8.75 13.3875C9.81667 13.1292 10.9 13 12 13C13.1 13 14.1833 13.1292 15.25 13.3875C16.3167 13.6458 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2708 15.1625 19.5625 15.6375C19.8542 16.1125 20 16.6333 20 17.2V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18ZM6 18H18V17.2C18 17.0167 17.9542 16.85 17.8625 16.7C17.7708 16.55 17.65 16.4333 17.5 16.35C16.6 15.9 15.6917 15.5625 14.775 15.3375C13.8583 15.1125 12.9333 15 12 15C11.0667 15 10.1417 15.1125 9.225 15.3375C8.30833 15.5625 7.4 15.9 6.5 16.35C6.35 16.4333 6.22917 16.55 6.1375 16.7C6.04583 16.85 6 17.0167 6 17.2V18ZM12 10C12.55 10 13.0208 9.80417 13.4125 9.4125C13.8042 9.02083 14 8.55 14 8C14 7.45 13.8042 6.97917 13.4125 6.5875C13.0208 6.19583 12.55 6 12 6C11.45 6 10.9792 6.19583 10.5875 6.5875C10.1958 6.97917 10 7.45 10 8C10 8.55 10.1958 9.02083 10.5875 9.4125C10.9792 9.80417 11.45 10 12 10Z" />
+</g>
+</svg>

package/src/assets/icons/userAdd.svg

@@ -0,0 +1,8 @@
+<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_62_1529" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_62_1529)">
+<path d="M18 11H16C15.7167 11 15.4792 10.9042 15.2875 10.7125C15.0958 10.5208 15 10.2833 15 10C15 9.71667 15.0958 9.47917 15.2875 9.2875C15.4792 9.09583 15.7167 9 16 9H18V7C18 6.71667 18.0958 6.47917 18.2875 6.2875C18.4792 6.09583 18.7167 6 19 6C19.2833 6 19.5208 6.09583 19.7125 6.2875C19.9042 6.47917 20 6.71667 20 7V9H22C22.2833 9 22.5208 9.09583 22.7125 9.2875C22.9042 9.47917 23 9.71667 23 10C23 10.2833 22.9042 10.5208 22.7125 10.7125C22.5208 10.9042 22.2833 11 22 11H20V13C20 13.2833 19.9042 13.5208 19.7125 13.7125C19.5208 13.9042 19.2833 14 19 14C18.7167 14 18.4792 13.9042 18.2875 13.7125C18.0958 13.5208 18 13.2833 18 13V11ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM1 18V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20H3C2.45 20 1.97917 19.8042 1.5875 19.4125C1.19583 19.0208 1 18.55 1 18ZM3 18H15V17.2C15 17.0167 14.9542 16.85 14.8625 16.7C14.7708 16.55 14.65 16.4333 14.5 16.35C13.6 15.9 12.6917 15.5625 11.775 15.3375C10.8583 15.1125 9.93333 15 9 15C8.06667 15 7.14167 15.1125 6.225 15.3375C5.30833 15.5625 4.4 15.9 3.5 16.35C3.35 16.4333 3.22917 16.55 3.1375 16.7C3.04583 16.85 3 17.0167 3 17.2V18ZM9 10C9.55 10 10.0208 9.80417 10.4125 9.4125C10.8042 9.02083 11 8.55 11 8C11 7.45 10.8042 6.97917 10.4125 6.5875C10.0208 6.19583 9.55 6 9 6C8.45 6 7.97917 6.19583 7.5875 6.5875C7.19583 6.97917 7 7.45 7 8C7 8.55 7.19583 9.02083 7.5875 9.4125C7.97917 9.80417 8.45 10 9 10Z" />
+</g>
+</svg>

package/src/assets/icons/userAddFilled.svg

@@ -0,0 +1,8 @@
+<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_64_1647" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_64_1647)">
+<path d="M18 11H16C15.7167 11 15.4792 10.9042 15.2875 10.7125C15.0958 10.5208 15 10.2833 15 10C15 9.71667 15.0958 9.47917 15.2875 9.2875C15.4792 9.09583 15.7167 9 16 9H18V7C18 6.71667 18.0958 6.47917 18.2875 6.2875C18.4792 6.09583 18.7167 6 19 6C19.2833 6 19.5208 6.09583 19.7125 6.2875C19.9042 6.47917 20 6.71667 20 7V9H22C22.2833 9 22.5208 9.09583 22.7125 9.2875C22.9042 9.47917 23 9.71667 23 10C23 10.2833 22.9042 10.5208 22.7125 10.7125C22.5208 10.9042 22.2833 11 22 11H20V13C20 13.2833 19.9042 13.5208 19.7125 13.7125C19.5208 13.9042 19.2833 14 19 14C18.7167 14 18.4792 13.9042 18.2875 13.7125C18.0958 13.5208 18 13.2833 18 13V11ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM1 18V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20H3C2.45 20 1.97917 19.8042 1.5875 19.4125C1.19583 19.0208 1 18.55 1 18Z" />
+</g>
+</svg>

package/src/assets/icons/userCircle.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_62_1531" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_62_1531)">
+<path d="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z" />
+</g>
+</svg>

package/src/assets/icons/userCircleFilled.svg

@@ -0,0 +1,8 @@
+<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_64_1648" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_64_1648)">
+<path d="M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" />
+</g>
+</svg>

package/src/assets/icons/userFilled.svg

@@ -0,0 +1,8 @@
+<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_64_1646" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_64_1646)">
+<path d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM4 18V17.2C4 16.6333 4.14583 16.1125 4.4375 15.6375C4.72917 15.1625 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6458 8.75 13.3875C9.81667 13.1292 10.9 13 12 13C13.1 13 14.1833 13.1292 15.25 13.3875C16.3167 13.6458 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2708 15.1625 19.5625 15.6375C19.8542 16.1125 20 16.6333 20 17.2V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18Z" />
+</g>
+</svg>

package/src/assets/icons/utensils.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_62_1519" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_62_1519)">
+<path d="M7 9V3C7 2.71667 7.09583 2.47917 7.2875 2.2875C7.47917 2.09583 7.71667 2 8 2C8.28333 2 8.52083 2.09583 8.7125 2.2875C8.90417 2.47917 9 2.71667 9 3V9H10V3C10 2.71667 10.0958 2.47917 10.2875 2.2875C10.4792 2.09583 10.7167 2 11 2C11.2833 2 11.5208 2.09583 11.7125 2.2875C11.9042 2.47917 12 2.71667 12 3V9C12 9.93333 11.7125 10.75 11.1375 11.45C10.5625 12.15 9.85 12.6167 9 12.85V21C9 21.2833 8.90417 21.5208 8.7125 21.7125C8.52083 21.9042 8.28333 22 8 22C7.71667 22 7.47917 21.9042 7.2875 21.7125C7.09583 21.5208 7 21.2833 7 21V12.85C6.15 12.6167 5.4375 12.15 4.8625 11.45C4.2875 10.75 4 9.93333 4 9V3C4 2.71667 4.09583 2.47917 4.2875 2.2875C4.47917 2.09583 4.71667 2 5 2C5.28333 2 5.52083 2.09583 5.7125 2.2875C5.90417 2.47917 6 2.71667 6 3V9H7ZM17 14H15C14.7167 14 14.4792 13.9042 14.2875 13.7125C14.0958 13.5208 14 13.2833 14 13V7C14 5.83333 14.4292 4.70833 15.2875 3.625C16.1458 2.54167 17.0333 2 17.95 2C18.25 2 18.5 2.11667 18.7 2.35C18.9 2.58333 19 2.85833 19 3.175V21C19 21.2833 18.9042 21.5208 18.7125 21.7125C18.5208 21.9042 18.2833 22 18 22C17.7167 22 17.4792 21.9042 17.2875 21.7125C17.0958 21.5208 17 21.2833 17 21V14Z"/>
+</g>
+</svg>

package/src/assets/icons/waiter.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M21.1667 13.6291C21.1667 9.05557 17.775 5.26779 13.3692 4.60576C13.5558 4.33746 13.6667 4.01267 13.6667 3.66131C13.6667 2.74343 12.9208 2 12 2C11.0792 2 10.3333 2.74343 10.3333 3.66131C10.3333 4.01267 10.4442 4.33746 10.6308 4.60576C6.225 5.26779 2.83333 9.05557 2.83333 13.6291C2.37333 13.6291 2 14.0004 2 14.4598C2 14.9191 2.37333 15.2905 2.83333 15.2905H5.31583C4.26833 16.1253 3.42833 17.2234 2.9475 18.5283L2.11583 20.7869C1.9575 21.218 2.17917 21.6948 2.61083 21.8526C3.03167 22.0104 3.5225 21.7936 3.68083 21.3592L4.5125 19.1007C5.35167 16.8213 7.5525 15.2896 9.98833 15.2896H13.25C13.775 15.2896 14.2017 15.7157 14.2017 16.2391C14.2017 16.7075 13.8508 17.1121 13.3842 17.1777L9.08333 17.7899C8.62833 17.8547 8.31167 18.2758 8.37667 18.7302C8.4425 19.1846 8.865 19.5002 9.31917 19.4354L13.6192 18.8232C14.1175 18.7526 14.565 18.5383 14.93 18.231C14.9483 18.2177 18.095 15.5014 18.095 15.5014C18.43 15.2007 18.9942 15.2356 19.2833 15.5845C19.585 15.9301 19.5508 16.4583 19.2175 16.7532L14.7908 20.5393C14.4417 20.8376 14.4017 21.3625 14.7017 21.7106C15.0025 22.0594 15.5292 22.0977 15.8767 21.7994L20.3133 18.005C21.0983 17.3106 21.3367 16.2241 21.0025 15.2905H21.1667C21.6267 15.2905 22 14.9191 22 14.4598C22 14.0004 21.6267 13.6291 21.1667 13.6291ZM4.5 13.6291C4.5 9.50661 7.865 6.15327 12 6.15327C16.135 6.15327 19.5 9.50661 19.5 13.6291H4.5Z" />
+</svg>

package/src/assets/icons/warning.svg

@@ -0,0 +1,8 @@
+<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_64_1668" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_64_1668)">
+<path d="M2.72497 21C2.54164 21 2.37497 20.9542 2.22497 20.8625C2.07497 20.7708 1.95831 20.65 1.87497 20.5C1.79164 20.35 1.74581 20.1875 1.73747 20.0125C1.72914 19.8375 1.77497 19.6667 1.87497 19.5L11.125 3.5C11.225 3.33333 11.3541 3.20833 11.5125 3.125C11.6708 3.04167 11.8333 3 12 3C12.1666 3 12.3291 3.04167 12.4875 3.125C12.6458 3.20833 12.775 3.33333 12.875 3.5L22.125 19.5C22.225 19.6667 22.2708 19.8375 22.2625 20.0125C22.2541 20.1875 22.2083 20.35 22.125 20.5C22.0416 20.65 21.925 20.7708 21.775 20.8625C21.625 20.9542 21.4583 21 21.275 21H2.72497ZM4.44997 19H19.55L12 6L4.44997 19ZM12 18C12.2833 18 12.5208 17.9042 12.7125 17.7125C12.9041 17.5208 13 17.2833 13 17C13 16.7167 12.9041 16.4792 12.7125 16.2875C12.5208 16.0958 12.2833 16 12 16C11.7166 16 11.4791 16.0958 11.2875 16.2875C11.0958 16.4792 11 16.7167 11 17C11 17.2833 11.0958 17.5208 11.2875 17.7125C11.4791 17.9042 11.7166 18 12 18ZM12 15C12.2833 15 12.5208 14.9042 12.7125 14.7125C12.9041 14.5208 13 14.2833 13 14V11C13 10.7167 12.9041 10.4792 12.7125 10.2875C12.5208 10.0958 12.2833 10 12 10C11.7166 10 11.4791 10.0958 11.2875 10.2875C11.0958 10.4792 11 10.7167 11 11V14C11 14.2833 11.0958 14.5208 11.2875 14.7125C11.4791 14.9042 11.7166 15 12 15Z" />
+</g>
+</svg>

package/src/assets/icons/warningFilled.svg

@@ -0,0 +1,8 @@
+<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_64_1712" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_64_1712)">
+<path d="M2.72497 21C2.54164 21 2.37497 20.9542 2.22497 20.8625C2.07497 20.7708 1.95831 20.65 1.87497 20.5C1.79164 20.35 1.74581 20.1875 1.73747 20.0125C1.72914 19.8375 1.77497 19.6667 1.87497 19.5L11.125 3.5C11.225 3.33333 11.3541 3.20833 11.5125 3.125C11.6708 3.04167 11.8333 3 12 3C12.1666 3 12.3291 3.04167 12.4875 3.125C12.6458 3.20833 12.775 3.33333 12.875 3.5L22.125 19.5C22.225 19.6667 22.2708 19.8375 22.2625 20.0125C22.2541 20.1875 22.2083 20.35 22.125 20.5C22.0416 20.65 21.925 20.7708 21.775 20.8625C21.625 20.9542 21.4583 21 21.275 21H2.72497ZM12 18C12.2833 18 12.5208 17.9042 12.7125 17.7125C12.9041 17.5208 13 17.2833 13 17C13 16.7167 12.9041 16.4792 12.7125 16.2875C12.5208 16.0958 12.2833 16 12 16C11.7166 16 11.4791 16.0958 11.2875 16.2875C11.0958 16.4792 11 16.7167 11 17C11 17.2833 11.0958 17.5208 11.2875 17.7125C11.4791 17.9042 11.7166 18 12 18ZM12 15C12.2833 15 12.5208 14.9042 12.7125 14.7125C12.9041 14.5208 13 14.2833 13 14V11C13 10.7167 12.9041 10.4792 12.7125 10.2875C12.5208 10.0958 12.2833 10 12 10C11.7166 10 11.4791 10.0958 11.2875 10.2875C11.0958 10.4792 11 10.7167 11 11V14C11 14.2833 11.0958 14.5208 11.2875 14.7125C11.4791 14.9042 11.7166 15 12 15Z" />
+</g>
+</svg>

package/src/assets/icons/whatsapp.svg

@@ -0,0 +1,10 @@
+<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_120_983)">
+<path d="M12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C10.298 22.0024 8.62372 21.5686 7.13701 20.74L6.83201 20.562L3.80001 21.454C3.63501 21.5026 3.46033 21.5083 3.29252 21.4705C3.12472 21.4327 2.96935 21.3526 2.84115 21.238C2.71294 21.1233 2.61615 20.9778 2.55995 20.8152C2.50375 20.6526 2.49 20.4784 2.52001 20.309L2.54601 20.2L3.43801 17.168C2.49506 15.6093 1.99769 13.8218 2.00001 12C2.00001 6.477 6.47701 2 12 2ZM12 4C10.5676 3.99974 9.16146 4.38406 7.92834 5.11281C6.69521 5.84157 5.68036 6.88804 4.98977 8.14294C4.29918 9.39784 3.95817 10.8151 4.00237 12.2468C4.04656 13.6785 4.47433 15.0721 5.24101 16.282C5.43901 16.594 5.52401 16.978 5.45701 17.359L5.41801 17.522L4.97701 19.023L6.47801 18.582C6.91101 18.454 7.36101 18.532 7.71801 18.759C8.76634 19.4228 9.9547 19.8336 11.1892 19.959C12.4236 20.0844 13.6703 19.921 14.8307 19.4816C15.9911 19.0422 17.0334 18.3389 17.8752 17.4273C18.717 16.5157 19.3352 15.4208 19.6809 14.2291C20.0266 13.0374 20.0904 11.7817 19.8673 10.5611C19.6441 9.34053 19.14 8.1886 18.395 7.19638C17.65 6.20415 16.6843 5.39883 15.5744 4.84408C14.4645 4.28933 13.2408 4.00036 12 4ZM9.10201 7.184C9.21283 7.13654 9.33403 7.11851 9.45386 7.13165C9.57369 7.14479 9.68811 7.18866 9.78601 7.259C10.29 7.627 10.69 8.121 11.034 8.603L11.361 9.077L11.514 9.302C11.6026 9.43096 11.6461 9.58557 11.6378 9.74182C11.6295 9.89806 11.5698 10.0472 11.468 10.166L11.393 10.242L10.469 10.928C10.425 10.9606 10.3941 11.0078 10.3819 11.0611C10.3696 11.1145 10.3767 11.1705 10.402 11.219C10.612 11.599 10.983 12.166 11.409 12.592C11.836 13.018 12.429 13.414 12.835 13.647C12.923 13.697 13.029 13.681 13.101 13.616L13.139 13.571L13.74 12.656C13.8502 12.5088 14.0131 12.4101 14.1946 12.3806C14.3761 12.3512 14.5619 12.3932 14.713 12.498L15.256 12.877C15.796 13.262 16.315 13.676 16.726 14.201C16.8021 14.2997 16.8504 14.4168 16.866 14.5404C16.8817 14.664 16.8641 14.7895 16.815 14.904C16.419 15.828 15.416 16.615 14.374 16.577L14.215 16.567L14.024 16.549L13.916 16.535L13.678 16.495C12.754 16.321 11.273 15.797 9.73801 14.263C8.20401 12.728 7.68001 11.247 7.50601 10.323L7.46601 10.085L7.44101 9.877L7.42801 9.702L7.42401 9.627C7.38601 8.583 8.17701 7.58 9.10201 7.184Z" />
+</g>
+<defs>
+<clipPath id="clip0_120_983">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/whatsappFilled.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_120_1523)">
+<path  d="M12 2C6.477 2 2 6.477 2 12C2 13.89 2.525 15.66 3.438 17.168L2.546 20.2C2.49478 20.3741 2.49141 20.5587 2.53624 20.7346C2.58107 20.9104 2.67245 21.0709 2.80076 21.1992C2.92907 21.3276 3.08958 21.4189 3.26542 21.4638C3.44125 21.5086 3.62592 21.5052 3.8 21.454L6.832 20.562C8.39074 21.5049 10.1782 22.0023 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM9.738 14.263C11.761 16.285 13.692 16.552 14.374 16.577C15.411 16.615 16.421 15.823 16.814 14.904C16.8632 14.7896 16.881 14.6641 16.8655 14.5405C16.85 14.417 16.8019 14.2998 16.726 14.201C16.178 13.501 15.437 12.998 14.713 12.498C14.5619 12.3932 14.3761 12.3512 14.1946 12.3806C14.0131 12.4101 13.8502 12.5088 13.74 12.656L13.14 13.571C13.1083 13.62 13.0591 13.6551 13.0025 13.6692C12.9459 13.6833 12.886 13.6754 12.835 13.647C12.428 13.414 11.835 13.018 11.409 12.592C10.983 12.166 10.611 11.6 10.402 11.219C10.3767 11.1705 10.3696 11.1145 10.3819 11.0611C10.3941 11.0078 10.425 10.9606 10.469 10.928L11.393 10.242C11.5252 10.1276 11.6106 9.96841 11.6328 9.79495C11.6549 9.62149 11.6123 9.44596 11.513 9.302C11.065 8.646 10.543 7.812 9.786 7.259C9.6881 7.18866 9.57369 7.14479 9.45385 7.13165C9.33402 7.11851 9.21282 7.13654 9.102 7.184C8.182 7.578 7.386 8.588 7.424 9.627C7.449 10.309 7.716 12.24 9.738 14.263Z" />
+</g>
+<defs>
+<clipPath id="clip0_120_1523">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+
+import { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from ".";
+
+const meta: Meta<typeof Accordion> = {
+  component: Accordion,
+  title: "Design System/Accordion",
+  tags: ["!autodocs"],
+  parameters: {
+    docs: {
+      disabled: true,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;

package/src/components/Accordion/index.tsx

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+
+interface AccordionProps {
+}
+
+export const Accordion = forwardRef(function Accordion({} : AccordionProps, ref: React.Ref<HTMLDivElement>) {
+  return <div ref={ref}>Accordion</div>;
+});

package/src/components/Accordion/styles.ts

@@ -0,0 +1 @@
+import styled from 'styled-components';

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+
+import { Meta, StoryObj } from "@storybook/react";
+import { Badge } from ".";
+
+const meta: Meta<typeof Badge> = {
+  component: Badge,
+  title: "Design System/Badge",
+  tags: ["!autodocs"],
+  parameters: {
+    docs: {
+      disabled: true,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+// export const Example: Story = {};

package/src/components/Badge/index.tsx

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+
+interface BadgeProps {
+}
+
+export const Badge = forwardRef(function Badge({} : BadgeProps, ref: React.Ref<HTMLDivElement>) {
+  return <div ref={ref}>Badge</div>;
+});

package/src/components/Badge/styles.ts

@@ -0,0 +1 @@
+import styled from 'styled-components';

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,186 @@
+import { Button, BUTTON_OPTIONS } from ".";
+import { Icon } from "../Icon";
+import { Subtitle } from "../StoriesComponents/styles";
+import { AllButtonsTable } from "./styles";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Button> = {
+  title: "Design System/Button",
+  component: Button,
+  parameters: {
+    componentSubtitle: (
+      <Subtitle>
+        Um botão aciona uma ação ou evento. Use botões para ações importantes,
+        como enviar uma resposta, confirmar uma alteração ou passar para a
+        próxima etapa.
+        <br />
+        <br /> Se você precisar navegar para outro lugar, tente um link. Um
+        botão de alternância é um comportamento de dois estados que alterna um
+        estado entre ativado e desativado.
+        <br />
+        <br /> O estado de repouso de um botão indica “desligado” enquanto o
+        estado selecionado indica “ligado”.
+      </Subtitle>
+    ),
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: "inline-radio",
+        options: BUTTON_OPTIONS,
+      },
+    },
+    children: {
+      control: {
+        type: "text",
+      },
+    },
+    customColor: {
+      control: {
+        type: "color",
+      },
+    },
+    isSelected: {
+      if: {
+        arg: "variant",
+        eq: "segmented",
+      },
+    },
+  },
+  args: {
+    variant: "primary",
+    children: "Botão de teste",
+    disabled: false,
+    isLoading: false,
+    isSelected: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Example: Story = {
+  name: "Exemplo",
+  argTypes: {
+    icon: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const IconExample: Story = {
+  name: "Com ícone",
+  render: (args) => (
+    <Button
+      {...args}
+      icon={<Icon icon="utensils" />}
+      onClick={() => console.log("Clicked")}
+    >
+      Botão
+    </Button>
+  ),
+};
+
+export const AllButtons: Story = {
+  name: "Todos os botões",
+  render: () => {
+    const keys = Object.keys(BUTTON_OPTIONS);
+
+    return (
+      <AllButtonsTable>
+        <thead>
+          <tr>
+            <th>Text</th>
+            <th>Icon + Text</th>
+            <th>Icon</th>
+            <th>Disabled</th>
+          </tr>
+        </thead>
+        <tbody>
+          {keys.map((key) => (
+            <tr key={key}>
+              <td>
+                <Button
+                  variant={key as keyof typeof BUTTON_OPTIONS}
+                  onClick={() => console.log(`Clicked ${key}`)}
+                >
+                  {key.charAt(0).toUpperCase() + key.slice(1)}
+                </Button>
+                <div />
+              </td>
+              <td>
+                <Button
+                  variant={key as keyof typeof BUTTON_OPTIONS}
+                  icon={<Icon icon="utensils" />}
+                  onClick={() => console.log(`Clicked ${key}`)}
+                >
+                  {key.charAt(0).toUpperCase() + key.slice(1)}
+                </Button>
+                <div />
+              </td>
+              <td>
+                <Button
+                  variant={key as keyof typeof BUTTON_OPTIONS}
+                  icon={<Icon icon="utensils" />}
+                  onClick={() => console.log(`Clicked ${key}`)}
+                />
+                <div />
+              </td>
+              <td>
+                <Button
+                  variant={key as keyof typeof BUTTON_OPTIONS}
+                  onClick={() => console.log(`Clicked ${key}`)}
+                  disabled
+                >
+                  {key.charAt(0).toUpperCase() + key.slice(1)}
+                </Button>
+                <div />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </AllButtonsTable>
+    );
+  },
+  // Disable all controls
+  argTypes: {
+    variant: {
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    icon: {
+      table: {
+        disable: true,
+      },
+    },
+    customColor: {
+      table: {
+        disable: true,
+      },
+    },
+    isSelected: {
+      table: {
+        disable: true,
+      },
+    },
+    disabled: {
+      table: {
+        disable: true,
+      },
+    },
+    isLoading: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};

package/src/components/Button/index.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef, useMemo } from "react";
+import {
+  OutlineButton,
+  PrimaryButton,
+  SegmentedButton,
+  TextButton,
+  TonalButton,
+} from "./styles";
+import { generateColorVariants } from "../../utils/functions";
+import { Spinner } from "../Spinner";
+import { useTheme } from "styled-components";
+
+export const BUTTON_OPTIONS = {
+  primary: PrimaryButton,
+  outlined: OutlineButton,
+  tonal: TonalButton,
+  text: TextButton,
+  segmented: SegmentedButton,
+};
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "tonal" | "outlined" | "text" | "segmented";
+  icon?: React.ReactNode;
+  customColor?: string;
+  isLoading?: boolean;
+  disabled?: boolean;
+  isSelected?: boolean;
+}
+
+export const Button = forwardRef(function Button(
+  {
+    variant = "primary",
+    icon,
+    customColor,
+    isLoading,
+    isSelected,
+    children,
+    ...props
+  }: ButtonProps,
+  ref: React.Ref<HTMLButtonElement>
+) {
+  const theme = useTheme();
+  const ButtonToRender = BUTTON_OPTIONS[variant];
+  const colorVariants = customColor
+    ? useMemo(() => generateColorVariants(customColor), [customColor])
+    : undefined;
+
+  const onlyIcon = !!icon && !children;
+  const textAndIcon = !!icon && !!children;
+
+  return (
+    <ButtonToRender
+      ref={ref}
+      onlyIcon={onlyIcon}
+      textAndIcon={textAndIcon}
+      isSelected={isSelected}
+      colorVariants={colorVariants}
+      {...props}
+      disabled={isLoading || props.disabled}
+    >
+      {isLoading ? (
+        <Spinner color={theme.colors.neutral.light} />
+      ) : (
+        <>
+          {icon}
+          {children}
+        </>
+      )}
+    </ButtonToRender>
+  );
+});