@up_si_vale/sivale-design-styles 1.0.6

package/README.md

@@ -0,0 +1,32 @@
+# Up-Sí-vale SCSS UI Kit
+
+Paquete de estilos SCSS - Landing Sí vale Mx con:
+
+Colores
+
+Colores por producto
+
+Tipografia
+
+Botones
+
+Inputs
+
+Icons
+
+# Guia de instalación - Getting Started
+TODO: Guia de instalación rapida:
+1.	Instala tu paquete desde npm:  
+    
+    npm i sivale-design-styles
+2.	En tu archivo _app.js o _app.tsx, importa el CSS: 
+
+    import 'sivale-design-styles/dist/index.css';
+
+# Build and Test
+TODO: Describe and show how to build your code and run the tests. 
+
+# Contribute
+TODO: Aplicar buenas practicas para la implementación de la biblioteca
+
+

package/dist/assets/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 7.5L10 12.5L15 7.5" stroke="#828689" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/city.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 9.01L7.01 8.99889" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 9.01L11.01 8.99889" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 13.01L7.01 12.9989" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 13.01L11.01 12.9989" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 17.01L7.01 16.9989" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 17.01L11.01 16.9989" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 21H3.6C3.26863 21 3 20.7314 3 20.4V5.6C3 5.26863 3.26863 5 3.6 5H9V3.6C9 3.26863 9.26863 3 9.6 3H14.4C14.7314 3 15 3.26863 15 3.6V9M15 21H20.4C20.7314 21 21 20.7314 21 20.4V9.6C21 9.26863 20.7314 9 20.4 9H15M15 21V17M15 9V13M15 13H17M15 13V17M15 17H17" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/credit-cards.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 11.4286V18C22 19.1046 21.1046 20 20 20H7C5.89543 20 5 19.1046 5 18V16.5M22 11.4286V10C22 8.89543 21.1046 8 20 8H19M22 11.4286H19" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 8V14.5C19 15.6046 18.1046 16.5 17 16.5H4C2.89543 16.5 2 15.6046 2 14.5V6.5C2 5.39543 2.89543 4.5 4 4.5H17C18.1046 4.5 19 5.39543 19 6.5V8ZM19 8H5.5" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/dollar-circle.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z" fill="#F59100"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.75C12.4142 4.75 12.75 5.08579 12.75 5.5V6.63088C13.7987 6.80659 14.8479 7.28725 15.5303 7.96967C15.8232 8.26256 15.8232 8.73744 15.5303 9.03033C15.2374 9.32322 14.7625 9.32322 14.4697 9.03033C13.9414 8.50209 12.9286 8.08398 11.9798 8.05845C11.4239 8.04349 10.9874 8.16616 10.7082 8.37765C10.4603 8.5654 10.25 8.8865 10.25 9.50001C10.25 9.75463 10.3066 9.92373 10.3803 10.0472C10.4566 10.1751 10.5767 10.2962 10.762 10.4141C11.1625 10.669 11.728 10.8303 12.4473 11.0264C12.4662 11.0316 12.4852 11.0367 12.5043 11.0419C13.1494 11.2177 13.9306 11.4305 14.5433 11.8204C14.8736 12.0306 15.1832 12.3079 15.4077 12.684C15.6347 13.0644 15.75 13.5046 15.75 14C15.75 15.1018 15.2633 15.942 14.5063 16.4722C13.9915 16.8327 13.3777 17.0337 12.75 17.109V18.5C12.75 18.9142 12.4142 19.25 12 19.25C11.5858 19.25 11.25 18.9142 11.25 18.5V17.0647C10.1574 16.875 9.06953 16.3427 8.39998 15.45C8.15145 15.1186 8.21861 14.6485 8.54998 14.4C8.88135 14.1515 9.35145 14.2186 9.59998 14.55C10.0709 15.1779 11.0251 15.6055 12.0269 15.6415C12.681 15.665 13.2567 15.516 13.6458 15.2435C14.0047 14.9922 14.25 14.6092 14.25 14C14.25 13.7454 14.1934 13.5763 14.1197 13.4528C14.0433 13.3249 13.9232 13.2038 13.738 13.0859C13.3375 12.831 12.7719 12.6697 12.0526 12.4736C12.0338 12.4684 12.0148 12.4633 11.9957 12.4581C11.3505 12.2823 10.5693 12.0695 9.9567 11.6796C9.62634 11.4694 9.31678 11.1921 9.09231 10.816C8.86526 10.4357 8.74998 9.99538 8.74998 9.50001C8.74998 8.48349 9.13013 7.69119 9.80247 7.18193C10.2302 6.85793 10.7348 6.6798 11.25 6.60324V5.5C11.25 5.08579 11.5858 4.75 12 4.75Z" fill="#F59100"/>
+</svg>

package/dist/assets/icons/emoji-blink-right.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9Z" fill="#F59100" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 9H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 14.5C7.5 14.5 9 16.5 12 16.5C15 16.5 16.5 14.5 16.5 14.5" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/gas-tank-droplet.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.56208C3 6.14754 4.14659 5.0002 5.56319 5.0002C6.34439 5.0002 6.9996 5.0002 6.9996 5.0002V3H12V5.0002H14.0016C17.8662 5.0002 21 8.13329 21 11.9977C21 14.2891 21 16.6925 21 18.4399C21 19.1184 20.73 19.7713 20.2494 20.2513C19.7688 20.7314 19.1172 21.0018 18.4368 21.0018C15.015 21.0018 8.98499 21.0018 5.56319 21.0018C4.88279 21.0018 4.23121 20.7314 3.75061 20.2513C3.27001 19.7713 3 19.1184 3 18.4399C3 15.454 3 10.548 3 7.56208Z" stroke="#F59100" stroke-width="1.49348" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9991 9C11.9991 9 14.9991 11.9934 14.9994 13.8865C14.9997 15.5422 13.6552 16.8865 11.9997 16.8865C10.3442 16.8865 9.012 15.5422 9 13.8865C9.00979 11.9924 11.9991 9 11.9991 9Z" stroke="#F59100" stroke-width="1.49993" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/gift.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 12V21.4C20 21.7314 19.7314 22 19.4 22H4.6C4.26863 22 4 21.7314 4 21.4V12" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.4 7H2.6C2.26863 7 2 7.26863 2 7.6V11.4C2 11.7314 2.26863 12 2.6 12H21.4C21.7314 12 22 11.7314 22 11.4V7.6C22 7.26863 21.7314 7 21.4 7Z" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 22V7" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 7H7.5C6.83696 7 6.20107 6.73661 5.73223 6.26777C5.26339 5.79893 5 5.16304 5 4.5C5 3.83696 5.26339 3.20107 5.73223 2.73223C6.20107 2.26339 6.83696 2 7.5 2C11 2 12 7 12 7Z" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 7H16.5C17.163 7 17.7989 6.73661 18.2678 6.26777C18.7366 5.79893 19 5.16304 19 4.5C19 3.83696 18.7366 3.20107 18.2678 2.73223C17.7989 2.26339 17.163 2 16.5 2C13 2 12 7 12 7Z" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/hand-card.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 9L22 9" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 11L4.80662 7.84255C5.5657 6.98859 6.65372 6.5 7.79627 6.5L8 6.5" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 19.5007L7.5 19.5005L11.5 16.5007C11.5 16.5007 12.3091 15.9533 13.5 15.0006C16 13.0007 13.5 9.834 11 11.5002C8.96409 12.857 7 14.0007 7 14.0007" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 13.5V7C8 5.89543 8.89543 5 10 5H20C21.1046 5 22 5.89543 22 7V13C22 14.1046 21.1046 15 20 15H13.5" stroke="#F59100" stroke-width="1.5"/>
+</svg>

package/dist/assets/icons/layout.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 9H21M9 21V9M5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z" stroke="#F59100" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11M5 11H19C20.1046 11 21 11.8954 21 13V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V13C3 11.8954 3.89543 11 5 11Z" stroke="#F59100" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/piggy-bank.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 8.5C13.7193 8.29761 12.6344 8 11.7647 8C7.47636 8 4 10.6676 4 13.9583C4 15.8493 5.14794 17.5345 6.93824 18.6261L6.45318 20.2259C6.33635 20.6112 6.62471 21 7.02736 21H8.79147C8.92135 21 9.04773 20.9579 9.15161 20.8799L10.5462 19.8333H12.9831L14.3777 20.8799C14.4816 20.9579 14.608 21 14.7379 21H16.502C16.9046 21 17.193 20.6112 17.0761 20.2259L16.5911 18.6261C17.6577 17.9758 18.4963 17.1147 19 16.125" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 8.5L19 7L18.916 10.6283L21 11.5V15L19.0741 16" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5 13C15.2239 13 15 12.7761 15 12.5C15 12.2239 15.2239 12 15.5 12C15.7761 12 16 12.2239 16 12.5C16 12.7761 15.7761 13 15.5 13Z" fill="#F59100" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 10C2 10 2 12.4 4 13" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8008 7.75296C12.9298 7.38131 13 6.98136 13 6.56472C13 4.59598 11.433 3 9.5 3C7.567 3 6 4.59598 6 6.56472C6 7.50638 6.35849 8.36275 6.94404 9" stroke="#F59100" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/pizza-slice.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 9.01L14.01 8.99889" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8.01L8.01 7.99889" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 14.01L8.01 13.9989" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 19L2.23626 3.0041C2.13087 2.55618 2.54815 2.16122 2.98961 2.29106L19 7" stroke="#F59100" stroke-width="1.5"/>
+<path d="M18.8545 7.4043C19.1555 6.56996 20.0458 6.08298 20.9248 6.30273L21.0957 6.35449C21.8747 6.6353 22.3511 7.42953 22.2324 8.24902L22.1982 8.4248C21.6281 10.7054 19.8426 13.5017 17.5215 15.9424L17.0498 16.4248C14.5564 18.9182 11.2855 21.2083 7.73828 22.1211L7.39355 22.2051C6.51077 22.4088 5.62957 21.9059 5.34375 21.0664L5.29492 20.8936C5.07774 19.952 5.6649 19.0123 6.60645 18.7949L7.13574 18.6582C9.78087 17.9055 12.418 16.1074 14.5752 13.9502L15.002 13.5127C17.0858 11.3178 18.4353 9.04559 18.8027 7.57617L18.8545 7.4043Z" stroke="#F59100" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/dist/assets/icons/quote-message.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 20.2895V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V15C21 16.1046 20.1046 17 19 17H7.96125C7.35368 17 6.77906 17.2762 6.39951 17.7506L4.06852 20.6643C3.71421 21.1072 3 20.8567 3 20.2895Z" stroke="#F59100" stroke-width="1.5"/>
+<path d="M10.5 10H8.5C7.94772 10 7.5 9.55228 7.5 9V8C7.5 7.44772 7.94772 7 8.5 7H9.5C10.0523 7 10.5 7.44772 10.5 8V10ZM10.5 10C10.5 11 9.5 12 8.5 13" stroke="#F59100" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M16.5 10H14.5C13.9477 10 13.5 9.55228 13.5 9V8C13.5 7.44772 13.9477 7 14.5 7H15.5C16.0523 7 16.5 7.44772 16.5 8V10ZM16.5 10C16.5 11 15.5 12 14.5 13" stroke="#F59100" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/dist/assets/icons/rocket.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0614 10.4037L14 17L10 17L7.93865 10.4037C7.35085 8.52273 7.72417 6.47307 8.93738 4.92015L11.5272 1.6052C11.7674 1.29772 12.2326 1.29772 12.4728 1.6052L15.0626 4.92015C16.2758 6.47307 16.6491 8.52273 16.0614 10.4037Z" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 20C10 22 12 23 12 23C12 23 14 22 14 20" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.5 12.5C5 15 7 19 7 19L10 17" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9316 12.5C19.4316 15 17.4316 19 17.4316 19L14.4316 17" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 11C10.8954 11 10 10.1046 10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9C14 10.1046 13.1046 11 12 11Z" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/shop-four-tiles.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4851 3H16.4934L16.9934 8C16.9934 8 17.9934 9 19.4934 9C20.5704 9 21.3038 8.48445 21.6317 8.1937C21.7624 8.07782 21.8102 7.90091 21.7815 7.72861L21.077 3.50136C21.0288 3.21205 20.7784 3 20.4851 3Z" stroke="#F59100" stroke-width="1.5"/>
+<path d="M16.4934 3L16.9934 8C16.9934 8 15.9934 9 14.4934 9C12.9934 9 11.9934 8 11.9934 8V3H16.4934Z" stroke="#F59100" stroke-width="1.5"/>
+<path d="M11.9934 3V8C11.9934 8 10.9934 9 9.49341 9C7.99341 9 6.99341 8 6.99341 8L7.49341 3H11.9934Z" stroke="#F59100" stroke-width="1.5"/>
+<path d="M7.49325 3H3.50152C3.20822 3 2.9579 3.21205 2.90969 3.50136L2.20514 7.72862C2.17643 7.90091 2.22426 8.07782 2.35495 8.1937C2.68288 8.48445 3.4162 9 4.49323 9C5.99323 9 6.99325 8 6.99325 8L7.49325 3Z" stroke="#F59100" stroke-width="1.5"/>
+<path d="M3 9V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V9" stroke="#F59100" stroke-width="1.5"/>
+<path d="M14.8333 21V15C14.8333 13.8954 13.9378 13 12.8333 13H10.8333C9.72868 13 8.83325 13.8954 8.83325 15V21" stroke="#F59100" stroke-width="1.5" stroke-miterlimit="16"/>
+</svg>

package/dist/assets/icons/shop.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 10V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V10" stroke="#F59100" stroke-width="1.5"/>
+<path d="M14.8333 21V15C14.8333 13.8954 13.9378 13 12.8333 13H10.8333C9.72868 13 8.83325 13.8954 8.83325 15V21" stroke="#F59100" stroke-width="1.5" stroke-miterlimit="16"/>
+<path d="M21.8183 9.36418L20.1243 3.43517C20.0507 3.17759 19.8153 3 19.5474 3H15.5L15.9753 8.70377C15.9909 8.89043 16.0923 9.05904 16.2532 9.15495C16.6425 9.38698 17.4052 9.81699 18 10C19.0158 10.3125 20.5008 10.1998 21.3465 10.0958C21.6982 10.0526 21.9157 9.7049 21.8183 9.36418Z" stroke="#F59100" stroke-width="1.5"/>
+<path d="M14 10C14.5675 9.82538 15.2879 9.42589 15.6909 9.18807C15.8828 9.07486 15.9884 8.86103 15.9699 8.63904L15.5 3H8.5L8.03008 8.63904C8.01158 8.86103 8.11723 9.07486 8.30906 9.18807C8.71207 9.42589 9.4325 9.82538 10 10C11.493 10.4594 12.507 10.4594 14 10Z" stroke="#F59100" stroke-width="1.5"/>
+<path d="M3.87567 3.43517L2.18166 9.36418C2.08431 9.7049 2.3018 10.0526 2.6535 10.0958C3.49916 10.1998 4.98424 10.3125 6 10C6.59477 9.81699 7.35751 9.38698 7.74678 9.15495C7.90767 9.05904 8.00913 8.89043 8.02469 8.70377L8.5 3H4.45258C4.18469 3 3.94926 3.17759 3.87567 3.43517Z" stroke="#F59100" stroke-width="1.5"/>
+</svg>

package/dist/assets/icons/simple-cart.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H22L19 16H6L3 6ZM3 6L2.25 3.5" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 19.5C11 20.3284 10.3284 21 9.5 21C8.67157 21 8 20.3284 8 19.5" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 19.5C17 20.3284 16.3284 21 15.5 21C14.6716 21 14 20.3284 14 19.5" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/small-shop.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6849 2.25H19.5474C20.1501 2.25 20.6799 2.64957 20.8455 3.22913L22.5395 9.15814C22.7563 9.91694 22.2722 10.7376 21.438 10.8402C20.9977 10.8944 20.3834 10.9519 19.7396 10.9541C19.1063 10.9563 18.3934 10.9058 17.7794 10.7168C17.0882 10.5042 16.255 10.0292 15.8692 9.79918C15.4918 9.57421 15.2627 9.18388 15.2279 8.76606L14.6849 2.25ZM16.3151 3.75L16.7157 8.55713C17.1172 8.79284 17.7539 9.13958 18.2205 9.28317C18.6223 9.40678 19.1599 9.45613 19.7344 9.45411C20.2049 9.45247 20.6664 9.41681 21.0417 9.37609L19.4342 3.75H16.3151Z" fill="#F59100"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.80989 2.25H16.1901L16.7173 8.57676C16.7587 9.07334 16.5221 9.56841 16.0721 9.83398C15.6707 10.0708 14.8819 10.5133 14.2206 10.7168C13.4275 10.9608 12.7237 11.0945 12 11.0945C11.2762 11.0945 10.5725 10.9608 9.77943 10.7168C9.11805 10.5133 8.32925 10.0708 7.92788 9.83398C7.47785 9.56841 7.24128 9.07334 7.28266 8.57676L7.80989 2.25ZM9.19009 3.75L8.78608 8.5982C9.19246 8.83365 9.78274 9.14845 10.2206 9.28317C10.9205 9.49854 11.4702 9.59454 12 9.59454C12.5297 9.59454 13.0795 9.49854 13.7794 9.28317C14.2172 9.14845 14.8075 8.83365 15.2139 8.59819L14.8099 3.75H9.19009Z" fill="#F59100"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5657 3.75L2.95824 9.37609C3.3336 9.41681 3.795 9.45247 4.26556 9.45411C4.84009 9.45613 5.37766 9.40678 5.77941 9.28317C6.24605 9.13958 6.88275 8.79284 7.28428 8.55713L7.68487 3.75H4.5657ZM3.1545 3.22913C3.32008 2.64957 3.8498 2.25 4.45255 2.25H9.31507L8.77207 8.76606C8.73725 9.18388 8.50817 9.57421 8.13077 9.79918C7.74491 10.0292 6.91174 10.5042 6.22054 10.7168C5.60652 10.9058 4.89367 10.9563 4.26031 10.9541C3.61659 10.9519 3.00225 10.8944 2.56193 10.8402C1.72773 10.7376 1.24369 9.91694 1.46049 9.15814L3.1545 3.22913Z" fill="#F59100"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 10V19C3.75 19.6904 4.30964 20.25 5 20.25H19C19.6904 20.25 20.25 19.6904 20.25 19V10H21.75V19C21.75 20.5188 20.5188 21.75 19 21.75H5C3.48122 21.75 2.25 20.5188 2.25 19V10H3.75Z" fill="#F59100"/>
+</svg>

package/dist/assets/icons/star.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.58737 8.23597L11.1849 3.00376C11.5183 2.33208 12.4817 2.33208 12.8151 3.00376L15.4126 8.23597L21.2215 9.08017C21.9668 9.18848 22.2638 10.0994 21.7243 10.6219L17.5217 14.6918L18.5135 20.4414C18.6409 21.1798 17.8614 21.7428 17.1945 21.3941L12 18.678L6.80547 21.3941C6.1386 21.7428 5.35909 21.1798 5.48645 20.4414L6.47825 14.6918L2.27575 10.6219C1.73617 10.0994 2.03322 9.18848 2.77852 9.08017L8.58737 8.23597Z" stroke="#F59100" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/tag.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 7.5H7.51M21.09 13.91L13.92 21.08C13.7343 21.266 13.5137 21.4135 13.2709 21.5141C13.0281 21.6148 12.7678 21.6666 12.505 21.6666C12.2422 21.6666 11.9819 21.6148 11.7391 21.5141C11.4963 21.4135 11.2757 21.266 11.09 21.08L2.5 12.5V2.5H12.5L21.09 11.09C21.4625 11.4647 21.6716 11.9716 21.6716 12.5C21.6716 13.0284 21.4625 13.5353 21.09 13.91Z" stroke="#F59100" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/index.css

@@ -0,0 +1,913 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Quicksand:wght@400;500;700&display=swap");
+.text-gray-25 {
+  color: #FDFDFD !important;
+}
+
+.bg-gray-25 {
+  background-color: #FDFDFD !important;
+}
+
+.border-gray-25 {
+  border-color: #FDFDFD !important;
+}
+
+.text-gray-50 {
+  color: #EAEBEB !important;
+}
+
+.bg-gray-50 {
+  background-color: #EAEBEB !important;
+}
+
+.border-gray-50 {
+  border-color: #EAEBEB !important;
+}
+
+.text-gray-100 {
+  color: #D5D7D8 !important;
+}
+
+.bg-gray-100 {
+  background-color: #D5D7D8 !important;
+}
+
+.border-gray-100 {
+  border-color: #D5D7D8 !important;
+}
+
+.text-gray-200 {
+  color: #C0C2C4 !important;
+}
+
+.bg-gray-200 {
+  background-color: #C0C2C4 !important;
+}
+
+.border-gray-200 {
+  border-color: #C0C2C4 !important;
+}
+
+.text-gray-300 {
+  color: #ABAEB0 !important;
+}
+
+.bg-gray-300 {
+  background-color: #ABAEB0 !important;
+}
+
+.border-gray-300 {
+  border-color: #ABAEB0 !important;
+}
+
+.text-gray-400 {
+  color: #969A9C !important;
+}
+
+.bg-gray-400 {
+  background-color: #969A9C !important;
+}
+
+.border-gray-400 {
+  border-color: #969A9C !important;
+}
+
+.text-gray-500 {
+  color: #828689 !important;
+}
+
+.bg-gray-500 {
+  background-color: #828689 !important;
+}
+
+.border-gray-500 {
+  border-color: #828689 !important;
+}
+
+.text-gray-600 {
+  color: #6D7275 !important;
+}
+
+.bg-gray-600 {
+  background-color: #6D7275 !important;
+}
+
+.border-gray-600 {
+  border-color: #6D7275 !important;
+}
+
+.text-gray-700 {
+  color: #585D61 !important;
+}
+
+.bg-gray-700 {
+  background-color: #585D61 !important;
+}
+
+.border-gray-700 {
+  border-color: #585D61 !important;
+}
+
+.text-gray-800 {
+  color: #43494E !important;
+}
+
+.bg-gray-800 {
+  background-color: #43494E !important;
+}
+
+.border-gray-800 {
+  border-color: #43494E !important;
+}
+
+.text-gray-900 {
+  color: #2E353A !important;
+}
+
+.bg-gray-900 {
+  background-color: #2E353A !important;
+}
+
+.border-gray-900 {
+  border-color: #2E353A !important;
+}
+
+.text-orange-25 {
+  color: #FFFAF5 !important;
+}
+
+.bg-orange-25 {
+  background-color: #FFFAF5 !important;
+}
+
+.border-orange-25 {
+  border-color: #FFFAF5 !important;
+}
+
+.text-orange-50 {
+  color: #FFF6ED !important;
+}
+
+.bg-orange-50 {
+  background-color: #FFF6ED !important;
+}
+
+.border-orange-50 {
+  border-color: #FFF6ED !important;
+}
+
+.text-orange-100 {
+  color: #FFEAD5 !important;
+}
+
+.bg-orange-100 {
+  background-color: #FFEAD5 !important;
+}
+
+.border-orange-100 {
+  border-color: #FFEAD5 !important;
+}
+
+.text-orange-200 {
+  color: #FDDCAB !important;
+}
+
+.bg-orange-200 {
+  background-color: #FDDCAB !important;
+}
+
+.border-orange-200 {
+  border-color: #FDDCAB !important;
+}
+
+.text-orange-300 {
+  color: #FEB273 !important;
+}
+
+.bg-orange-300 {
+  background-color: #FEB273 !important;
+}
+
+.border-orange-300 {
+  border-color: #FEB273 !important;
+}
+
+.text-orange-400 {
+  color: #FD853A !important;
+}
+
+.bg-orange-400 {
+  background-color: #FD853A !important;
+}
+
+.border-orange-400 {
+  border-color: #FD853A !important;
+}
+
+.text-orange-500 {
+  color: #FB6514 !important;
+}
+
+.bg-orange-500 {
+  background-color: #FB6514 !important;
+}
+
+.border-orange-500 {
+  border-color: #FB6514 !important;
+}
+
+.text-orange-600 {
+  color: #EC4A0A !important;
+}
+
+.bg-orange-600 {
+  background-color: #EC4A0A !important;
+}
+
+.border-orange-600 {
+  border-color: #EC4A0A !important;
+}
+
+.text-orange-700 {
+  color: #C4320A !important;
+}
+
+.bg-orange-700 {
+  background-color: #C4320A !important;
+}
+
+.border-orange-700 {
+  border-color: #C4320A !important;
+}
+
+.text-orange-800 {
+  color: #9C2A10 !important;
+}
+
+.bg-orange-800 {
+  background-color: #9C2A10 !important;
+}
+
+.border-orange-800 {
+  border-color: #9C2A10 !important;
+}
+
+.text-orange-900 {
+  color: #7E2410 !important;
+}
+
+.bg-orange-900 {
+  background-color: #7E2410 !important;
+}
+
+.border-orange-900 {
+  border-color: #7E2410 !important;
+}
+
+.text-blue-gray-25 {
+  color: #FCFCFD !important;
+}
+
+.bg-blue-gray-25 {
+  background-color: #FCFCFD !important;
+}
+
+.border-blue-gray-25 {
+  border-color: #FCFCFD !important;
+}
+
+.text-blue-gray-50 {
+  color: #F8F9FC !important;
+}
+
+.bg-blue-gray-50 {
+  background-color: #F8F9FC !important;
+}
+
+.border-blue-gray-50 {
+  border-color: #F8F9FC !important;
+}
+
+.text-blue-gray-100 {
+  color: #EAECF5 !important;
+}
+
+.bg-blue-gray-100 {
+  background-color: #EAECF5 !important;
+}
+
+.border-blue-gray-100 {
+  border-color: #EAECF5 !important;
+}
+
+.text-blue-gray-200 {
+  color: #D5D9EB !important;
+}
+
+.bg-blue-gray-200 {
+  background-color: #D5D9EB !important;
+}
+
+.border-blue-gray-200 {
+  border-color: #D5D9EB !important;
+}
+
+.text-blue-gray-300 {
+  color: #AFB5D9 !important;
+}
+
+.bg-blue-gray-300 {
+  background-color: #AFB5D9 !important;
+}
+
+.border-blue-gray-300 {
+  border-color: #AFB5D9 !important;
+}
+
+.text-blue-gray-400 {
+  color: #717BBC !important;
+}
+
+.bg-blue-gray-400 {
+  background-color: #717BBC !important;
+}
+
+.border-blue-gray-400 {
+  border-color: #717BBC !important;
+}
+
+.text-blue-gray-500 {
+  color: #4E5BA6 !important;
+}
+
+.bg-blue-gray-500 {
+  background-color: #4E5BA6 !important;
+}
+
+.border-blue-gray-500 {
+  border-color: #4E5BA6 !important;
+}
+
+.text-blue-gray-600 {
+  color: #3E4784 !important;
+}
+
+.bg-blue-gray-600 {
+  background-color: #3E4784 !important;
+}
+
+.border-blue-gray-600 {
+  border-color: #3E4784 !important;
+}
+
+.text-blue-gray-700 {
+  color: #363F72 !important;
+}
+
+.bg-blue-gray-700 {
+  background-color: #363F72 !important;
+}
+
+.border-blue-gray-700 {
+  border-color: #363F72 !important;
+}
+
+.text-blue-gray-800 {
+  color: #293056 !important;
+}
+
+.bg-blue-gray-800 {
+  background-color: #293056 !important;
+}
+
+.border-blue-gray-800 {
+  border-color: #293056 !important;
+}
+
+.text-blue-gray-900 {
+  color: #101323 !important;
+}
+
+.bg-blue-gray-900 {
+  background-color: #101323 !important;
+}
+
+.border-blue-gray-900 {
+  border-color: #101323 !important;
+}
+
+.my-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 0.75rem;
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+  border: none;
+  transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease;
+  gap: 0.5rem;
+  line-height: 1;
+}
+.my-button.xlarge {
+  font-size: 1.125rem;
+  padding: 1rem 2rem;
+}
+.my-button.with-icon svg, .my-button.with-icon i {
+  font-size: 1.25rem;
+}
+.my-button.primary {
+  background-color: #363F72;
+  color: white;
+}
+.my-button.primary:hover {
+  background-color: #FD853A;
+}
+.my-button.primary:active {
+  background-color: #C4320A;
+}
+.my-button.primary:disabled {
+  background-color: #ABAEB0;
+  color: white;
+  cursor: not-allowed;
+}
+.my-button.secondary {
+  background-color: transparent;
+  border: 2px solid #363F72;
+  color: #363F72;
+}
+.my-button.secondary:hover {
+  color: #EC4A0A;
+  border-color: #EC4A0A;
+}
+.my-button.secondary:active {
+  background-color: #FFF6ED;
+}
+.my-button.secondary:disabled {
+  background-color: #EAEBEB;
+  color: #ABAEB0;
+  border-color: #ABAEB0;
+}
+.my-button.tertiary {
+  background-color: #EAECF5;
+  color: #363F72;
+}
+.my-button.tertiary:hover {
+  background-color: #FFEAD5;
+  color: #EC4A0A;
+}
+.my-button.tertiary:active {
+  background-color: #FFF6ED;
+  color: #EC4A0A;
+}
+.my-button.tertiary:disabled {
+  background-color: #D5D7D8;
+  color: #ABAEB0;
+}
+
+body {
+  font-family: "DM Sans", sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #111;
+}
+
+.heading-primary {
+  font-family: "DM Sans", sans-serif;
+  font-weight: 700;
+  font-size: 2rem;
+}
+
+.heading-secondary {
+  font-family: "Quicksand", sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.label {
+  font-family: "Quicksand", sans-serif;
+  font-size: 0.875rem;
+}
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  font-family: "DM Sans", sans-serif;
+}
+.input-wrapper label {
+  font-size: 0.875rem;
+  color: #2E353A;
+  margin-bottom: 0.25rem;
+}
+.input-wrapper .input-container {
+  position: relative;
+}
+.input-wrapper .input-container .input-icon {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: #828689;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+.input-wrapper .input-container .input-status-icon {
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: #F04438;
+  width: 20px;
+  height: 20px;
+}
+.input-wrapper .input-container .input-field {
+  height: 48px;
+  padding: 0 2.5rem 0 2.75rem;
+  width: 100%;
+  border: 1px solid #ABAEB0;
+  border-radius: 0.5rem;
+  background-color: white;
+  font-size: 1rem;
+  font-family: inherit;
+  color: #2E353A;
+  transition: all 0.2s ease;
+}
+.input-wrapper .input-container .input-field::placeholder {
+  color: #828689;
+}
+.input-wrapper .input-container .input-field:hover, .input-wrapper .input-container .input-field:focus {
+  border-color: #FEB273;
+  box-shadow: 0 0 0 3px rgba(254, 178, 115, 0.2);
+  outline: none;
+}
+.input-wrapper .input-container .input-field:hover + .input-icon, .input-wrapper .input-container .input-field:focus + .input-icon {
+  color: #FD853A;
+}
+.input-wrapper .input-container .input-field.error {
+  border-color: #F04438;
+  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.2);
+}
+.input-wrapper .input-container .input-field.error + .input-icon {
+  color: #F04438;
+}
+.input-wrapper .input-container .input-field.error ~ .input-status-icon {
+  display: block;
+}
+.input-wrapper .error-message {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #F04438;
+  display: none;
+}
+.input-wrapper .error-message.visible {
+  display: block;
+}
+
+.input-underline {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  font-family: "DM Sans", sans-serif;
+}
+.input-underline label {
+  font-size: 0.875rem;
+  color: #2E353A;
+  margin-bottom: 0.25rem;
+}
+.input-underline input {
+  border: none;
+  border-bottom: 1px solid #ABAEB0;
+  font-size: 1rem;
+  padding: 0.5rem 0;
+  background: transparent;
+  color: #2E353A;
+  font-family: inherit;
+}
+.input-underline input::placeholder {
+  color: #828689;
+}
+.input-underline input:hover {
+  border-bottom-color: #828689;
+}
+.input-underline input:focus {
+  border-bottom-color: #FD853A;
+  outline: none;
+}
+.input-underline input.error {
+  border-bottom-color: #F04438;
+}
+.input-underline .error-message {
+  font-size: 0.75rem;
+  color: #F04438;
+  margin-top: 0.25rem;
+}
+
+.select-wrapper {
+  position: relative;
+  font-family: "DM Sans", sans-serif;
+}
+.select-wrapper label {
+  display: block;
+  font-size: 0.875rem;
+  color: #2E353A;
+  margin-bottom: 0.25rem;
+}
+.select-wrapper .select-icon {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  pointer-events: none;
+  color: #828689;
+}
+.select-wrapper select.select-field {
+  height: 48px;
+  width: 100%;
+  padding: 0 2.5rem 0 3rem;
+  border: 1px solid #ABAEB0;
+  border-radius: 0.5rem;
+  background-color: white;
+  font-size: 1rem;
+  font-family: inherit;
+  appearance: none;
+  background: none;
+}
+.select-wrapper select.select-field:hover {
+  border-color: #828689;
+}
+.select-wrapper select.select-field:focus {
+  border-color: #FD853A;
+  box-shadow: 0 0 0 1px #FD853A;
+  outline: none;
+}
+.select-wrapper select.select-field.error {
+  border-color: #F04438;
+  box-shadow: 0 0 0 1px #F04438;
+}
+.select-wrapper select.select-field::placeholder {
+  color: #828689;
+}
+.select-wrapper::after {
+  content: "";
+  position: absolute;
+  right: 1rem;
+  top: 55%;
+  width: 1rem;
+  height: 1rem;
+  background-color: currentColor;
+  mask-image: url("./assets/icons/chevron-down.svg");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  transition: transform 0.2s ease;
+  pointer-events: none;
+}
+.select-wrapper.open::after {
+  transform: translateY(-50%) rotate(180deg);
+}
+.select-wrapper .error-message {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #F04438;
+}
+
+.my-alert {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  color: white;
+  margin-bottom: 1rem;
+}
+.my-alert.success {
+  background-color: #52c41a;
+}
+.my-alert.error {
+  background-color: #f5222d;
+}
+
+.my-card {
+  background-color: #fff;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  color: black;
+  transition: background-color 0.3s;
+}
+@media (prefers-color-scheme: dark) {
+  .my-card {
+    background-color: #1f1f1f;
+    color: white;
+  }
+}
+
+.dark .my-card {
+  background-color: #1f1f1f;
+  color: white;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background-color: white;
+  font-family: "DM Sans", sans-serif;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 10;
+}
+.navbar .nav-left {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+.navbar .nav-left .logo {
+  display: flex;
+  align-items: center;
+}
+.navbar .nav-left .logo img {
+  height: 32px;
+}
+.navbar .nav-left .nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+.navbar .nav-left .nav-links a {
+  color: #2E353A;
+  font-weight: 600;
+  font-family: "Quicksand", sans-serif;
+  text-decoration: none;
+  position: relative;
+}
+.navbar .nav-left .nav-links a:hover {
+  color: #FB6514;
+}
+.navbar .nav-left .nav-links .nav-item.has-mega-menu {
+  position: relative;
+}
+.navbar .nav-left .nav-links .nav-item.has-mega-menu .mega-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.5rem;
+  background-color: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  grid-template-columns: repeat(2, minmax(200px, 1fr));
+  gap: 1.5rem;
+  min-width: 600px;
+}
+.navbar .nav-right {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+.navbar .nav-right a {
+  color: #585D61;
+  text-decoration: none;
+  font-family: "Quicksand", sans-serif;
+  font-weight: 600;
+}
+.navbar .nav-right .cta {
+  background-color: #3E4784;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  font-weight: 600;
+}
+.navbar .nav-right .cta:hover {
+  background-color: #363F72;
+}
+
+.mega-menu .menu-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+.mega-menu .menu-item h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 0.25rem;
+}
+.mega-menu .menu-item p {
+  font-size: 0.875rem;
+  color: #6D7275;
+  margin: 0;
+}
+
+.mega-menu {
+  display: none;
+}
+
+.mega-menu.show {
+  display: flex !important;
+}
+
+.icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #FDE9CC;
+}
+
+.icon, .icon-tag, .icon-star, .icon-small-shop, .icon-simple-cart, .icon-shop, .icon-shop-four-tiles, .icon-rocket, .icon-quote-message, .icon-pizza-slice, .icon-piggy-bank, .icon-lock, .icon-layout, .icon-hand-card, .icon-gift, .icon-gasoline, .icon-error, .icon-dollar-circle, .icon-credit-cards, .icon-city {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-color: currentColor;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  -webkit-mask-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.icon-city {
+  mask-image: url("./assets/icons/city.svg");
+}
+
+.icon-credit-cards {
+  mask-image: url("./assets/icons/credit-cards.svg");
+}
+
+.icon-dollar-circle {
+  mask-image: url("./assets/icons/dollar-circle.svg");
+}
+
+.icon-error {
+  mask-image: url("./assets/icons/error.svg");
+}
+
+.icon-gasoline {
+  mask-image: url("./assets/icons/gas-tank-droplet.svg");
+}
+
+.icon-gift {
+  mask-image: url("./assets/icons/gift.svg");
+}
+
+.icon-hand-card {
+  mask-image: url("./assets/icons/hand-card.svg");
+}
+
+.icon-layout {
+  mask-image: url("./assets/icons/layout.svg");
+}
+
+.icon-lock {
+  mask-image: url("./assets/icons/lock.svg");
+}
+
+.icon-piggy-bank {
+  mask-image: url("./assets/icons/piggy-bank.svg");
+}
+
+.icon-pizza-slice {
+  mask-image: url("./assets/icons/pizza-slice.svg");
+}
+
+.icon-quote-message {
+  mask-image: url("./assets/icons/quote-message.svg");
+}
+
+.icon-rocket {
+  mask-image: url("./assets/icons/rocket.svg");
+}
+
+.icon-shop-four-tiles {
+  mask-image: url("./assets/icons/shop-four-tiles.svg");
+}
+
+.icon-shop {
+  mask-image: url("./assets/icons/shop.svg");
+}
+
+.icon-simple-cart {
+  mask-image: url("./assets/icons/simple-cart.svg");
+}
+
+.icon-small-shop {
+  mask-image: url("./assets/icons/small-shop.svg");
+}
+
+.icon-star {
+  mask-image: url("./assets/icons/star.svg");
+}
+
+.icon-tag {
+  mask-image: url("./assets/icons/tag.svg");
+}
+
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/_typography.scss","../src/_variables.scss","../src/_button.scss","../src/_input.scss","../src/_alert.scss","../src/_card.scss","../src/_navbar.scss","../src/_icons.scss"],"names":[],"mappings":"AAAQ;AC8FN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AATF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACrGJ;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","file":"index.css"}

package/dist/js/mega-menu-toggle.js

@@ -0,0 +1,39 @@
+// mega-menu-toggle.js
+
+export function initMegaMenuToggle() {
+  const toggles = document.querySelectorAll(".menu-toggle");
+
+  toggles.forEach(toggle => {
+    toggle.addEventListener("click", (e) => {
+      e.preventDefault();
+
+      const target = toggle.dataset.target;
+      const menu = document.querySelector(`.mega-menu[data-menu="${target}"]`);
+            console.log("Toggle clicked:", target, menu); // ✅ Verifica si encuentra el menú
+
+
+      // Oculta otros menús
+      document.querySelectorAll(".mega-menu").forEach(m => {
+        if (m !== menu) m.classList.remove("show");
+      });
+
+      // Alterna visibilidad del menú actual
+      menu?.classList.toggle("show");
+    });
+  });
+
+  // Cierra el menú al hacer click fuera
+  document.addEventListener("click", (e) => {
+    const isToggle = e.target.closest(".menu-toggle");
+    const isMenu = e.target.closest(".mega-menu");
+
+    if (!isToggle && !isMenu) {
+      document.querySelectorAll(".mega-menu").forEach(m => m.classList.remove("show"));
+    }
+  });
+}
+
+// Para compatibilidad con carga directa en HTML sin import/export
+if (typeof window !== "undefined") {
+  window.initMegaMenuToggle = initMegaMenuToggle;
+} 

package/dist/src/index.js

@@ -0,0 +1,9 @@
+// src/index.js
+import { initMegaMenuToggle } from "./js/mega-menu-toggle.js";
+
+export { initMegaMenuToggle };
+
+// Para uso directo en HTML sin imports
+if (typeof window !== "undefined") {
+  window.initMegaMenuToggle = initMegaMenuToggle;
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@up_si_vale/sivale-design-styles",
+  "version": "1.0.6",
+  "description": "Biblioteca de estilos SCSS bajo el estandar WCAG para la landing de Sí vale MX",
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "style": "./dist/index.css"
+    },
+    "./mega-menu-toggle": {
+      "import": "./dist/js/mega-menu-toggle.js"
+    }
+  },
+  "style": "dist/index.css",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "scss",
+    "css",
+    "darkmode",
+    "nextjs",
+    "inputs",
+    "alerts",
+    "cards"
+  ],
+  "author": "José Alberto Vargas Celaya",
+  "license": "MIT",
+  "scripts": {
+    "build": "sass src/index.scss dist/index.css && node scripts/copy-assets.js",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": { 
+    "access": "restricted" 
+  },
+  "devDependencies": {
+    "cpy-cli": "^5.0.0",
+    "sass": "^1.75.0"
+  }
+}