@xetwa/design-system 1.0.49 → 1.0.51

package/dist/assets/index-r3VUzEKX.css

@@ -0,0 +1 @@
+@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";@layer components;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:"Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:var(--black);--color-white:var(--white);--radius-xs:6px;--radius-sm:10px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--shadow-xs:0 1px 3px #51332d14;--shadow-sm:0 2px 8px #51332d1a;--shadow-md:0 4px 14px #51332d21;--shadow-lg:0 8px 26px #51332d2e;--shadow-xl:0 18px 40px #51332d47;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-title:"Fredoka", sans-serif;--color-primary:var(--primary);--color-primary-dark:var(--primary-dark);--color-primary-light:var(--primary-light);--color-brown-900:var(--brown-900);--color-brown-800:var(--brown-800);--color-brown-700:var(--brown-700);--color-brown-600:var(--brown-600);--color-brown-500:var(--brown-500);--color-brown-400:var(--brown-400);--color-brown-300:var(--brown-300);--color-brown-100:var(--brown-100);--color-brown-50:var(--brown-50);--color-cream:var(--cream);--color-canvas:var(--canvas);--color-success:var(--success);--color-error:var(--error);--color-info:var(--info);--radius-screen:34px;--radius-phone:42px;--shadow-btn-primary:0 4px 0 #cf7a30;--shadow-btn-secondary:0 4px 0 #efe2d6;--shadow-btn-dark:0 4px 0 #3a241f;--shadow-focus:0 0 0 3px #f2974b38;--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1);--duration-fast:.12s;--duration-base:.2s;--duration-medium:.3s;--duration-slow:.5s;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.container{width:100%}@media (width>=0){.container{max-width:0}}@media (width>=375px){.container{max-width:375px}}@media (width>=430px){.container{max-width:430px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1440px){.container{max-width:1440px}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-bounce{--tw-ease:var(--ease-bounce);transition-timing-function:var(--ease-bounce)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.ease-smooth{--tw-ease:var(--ease-smooth);transition-timing-function:var(--ease-smooth)}}:root{--primary:#f2974b;--primary-dark:#cf7a30;--primary-light:#fef6ee;--brown-900:#15100d;--brown-800:#51332d;--brown-700:#3f2620;--brown-600:#6e5a4f;--brown-500:#9a8478;--brown-400:#b9a392;--brown-300:#c3b1a4;--brown-100:#efe2d6;--brown-50:#fdf3ea;--cream:#fbf6f0;--canvas:#e7e5df;--success:#16915a;--error:#cf5b48;--info:#2a6fc2;--black:#000;--white:#fff;--bg-app:#fbf6f0;--bg-surface:#fff;--bg-surface-hover:#fdf3ea;--border-color:#efe2d6;--text-primary:#51332d;--text-secondary:#9a8478}.dark-theme{--bg-app:#15100d;--bg-surface:#51332d;--bg-surface-hover:#3f2620;--border-color:#3f2620;--text-primary:#efe2d6;--text-secondary:#b9a392;--primary-light:#f2974b26}body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);transition:background-color .25s,color .25s}.text-display-1{font-family:var(--font-title);font-size:28px;font-weight:700;line-height:1.08}@media (width>=1024px){.text-display-1{font-size:42px}}.text-display-2{font-family:var(--font-title);font-size:24px;font-weight:700;line-height:1.12}@media (width>=1024px){.text-display-2{font-size:34px}}.text-h1{font-family:var(--font-title);font-size:22px;font-weight:700;line-height:1.15}@media (width>=1024px){.text-h1{font-size:28px}}.text-h2{font-family:var(--font-title);font-size:18px;font-weight:600;line-height:1.2}@media (width>=1024px){.text-h2{font-size:22px}}.text-h3{font-family:var(--font-title);font-size:16px;font-weight:600;line-height:1.25}@media (width>=1024px){.text-h3{font-size:19px}}.text-label{font-family:var(--font-sans);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:800;line-height:1}@media (width>=1024px){.text-label{font-size:11px}}.text-body-lg{font-family:var(--font-sans);font-size:15px;font-weight:600;line-height:1.55}@media (width>=1024px){.text-body-lg{font-size:17px}}.text-body-md{font-family:var(--font-sans);font-size:13.5px;font-weight:600;line-height:1.5}@media (width>=1024px){.text-body-md{font-size:15px}}.text-body-sm{font-family:var(--font-sans);font-size:12px;font-weight:700;line-height:1.45}@media (width>=1024px){.text-body-sm{font-size:13px}}.text-caption{font-family:var(--font-sans);font-size:10px;font-weight:700;line-height:1.4}@media (width>=1024px){.text-caption{font-size:11px}}.text-btn-lg{font-family:var(--font-sans);letter-spacing:.04em;font-size:16px;font-weight:800;line-height:1}@media (width>=1024px){.text-btn-lg{font-size:17px}}.text-btn-md{font-family:var(--font-sans);letter-spacing:.04em;font-size:14px;font-weight:800;line-height:1}@media (width>=1024px){.text-btn-md{font-size:15px}}.text-btn-sm{font-family:var(--font-sans);letter-spacing:.04em;font-size:12px;font-weight:800;line-height:1}@media (width>=1024px){.text-btn-sm{font-size:12px}}@keyframes xtBob{0%{transform:translateY(0)}50%{transform:translateY(-7px)}to{transform:translateY(0)}}@keyframes xtPop{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes xtFlame{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.15)rotate(5deg)}}@keyframes xtRing{0%{box-shadow:0 0 #f2974b8c}to{box-shadow:0 0 0 16px #f2974b00}}.animate-bob{animation:2.9s ease-in-out infinite xtBob}.animate-pop{animation:1.6s ease-in-out infinite xtPop}.animate-flame{animation:1.8s ease-in-out infinite xtFlame}.animate-ring{animation:1.8s cubic-bezier(0,0,.2,1) infinite xtRing}@keyframes xtShadow{0%,to{opacity:.2;transform:scale(1)}50%{opacity:.08;transform:scale(.6)}}.animate-contact-shadow{animation:2.9s ease-in-out infinite xtShadow}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}

package/dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>design-system</title>
-    <script type="module" crossorigin src="/assets/index-DsSiuRvH.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DGJGCwsd.css">
+    <script type="module" crossorigin src="/assets/index-DK8EExZ4.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-r3VUzEKX.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Buttons/BaseButton/BaseButton.tsx

@@ -27,6 +27,8 @@ export interface BaseButtonProps {
   bgColor?: string;
   /** Cor da sombra customizada (sobrepõe a cor da variante) */
   shadowColor?: string;
+  /** Altura/Tamanho da sombra customizada */
+  shadowHeight?: number;
   /** Cor de fundo no hover (opcional) */
   hoverColor?: string;
   style?: ViewStyle | ViewStyle[];
@@ -45,6 +47,7 @@ export const BaseButton = React.forwardRef<React.ElementRef<typeof Pressable>, B
       onPress,
       bgColor,
       shadowColor,
+      shadowHeight,
       hoverColor,
       ...props
     },
@@ -80,19 +83,21 @@ export const BaseButton = React.forwardRef<React.ElementRef<typeof Pressable>, B
         return {};
       }
 
+      const activeShadowHeight = shadowHeight !== undefined ? shadowHeight : 4;
+
       if (Platform.OS === 'web') {
         const resolvedShadowColor = shadowColor || (variant === 'primary' ? theme.colors.primaryDark : theme.colors.brown[100]);
         return {
-          boxShadow: `0px ${scale(4)}px 0px ${resolvedShadowColor}`
+          boxShadow: `0px ${scale(activeShadowHeight)}px 0px ${resolvedShadowColor}`
         };
       } else {
-        if (shadowColor) {
+        if (shadowColor || shadowHeight !== undefined) {
           return {
-            shadowColor,
-            shadowOffset: { width: 0, height: scale(4) },
+            shadowColor: shadowColor || (variant === 'primary' ? theme.shadows.btnPrimary.shadowColor : theme.shadows.btnSecondary.shadowColor),
+            shadowOffset: { width: 0, height: scale(activeShadowHeight) },
             shadowOpacity: 1,
             shadowRadius: 0,
-            elevation: 4,
+            elevation: activeShadowHeight,
           };
         }
         return variant === 'primary' ? theme.shadows.btnPrimary : theme.shadows.btnSecondary;
@@ -139,8 +144,9 @@ export const BaseButton = React.forwardRef<React.ElementRef<typeof Pressable>, B
             if (variant === 'ghost') {
               stateStyles.push({ opacity: 0.7 });
             } else {
+              const activeShadowHeight = shadowHeight !== undefined ? shadowHeight : 4;
               stateStyles.push({
-                transform: [{ translateY: scale(4) }],
+                transform: [{ translateY: scale(activeShadowHeight) }],
               });
               if (Platform.OS === 'web') {
                 stateStyles.push({ boxShadow: 'none' });

package/src/components/Buttons/Chip/Chip.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { Pressable, StyleSheet, Animated } from 'react-native';
+import { Pressable, StyleSheet, Animated, View } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { Typography } from '../../Typography/Typography';
 import { useResponsive } from '../../../hooks/useResponsive';
@@ -8,6 +8,8 @@ import { theme } from '../../../styles/theme';
 export interface ChipProps {
   /** Texto a ser exibido no chip */
   label: string;
+  /** Elemento extra à esquerda (ex: ícone, flag) */
+  leftElement?: React.ReactNode;
   /** Função a executar ao pressionar */
   onPress?: () => void;
   /** Tamanho do chip (afeta paddings e fonte) */
@@ -30,6 +32,7 @@ export interface ChipProps {
  */
 export const Chip = ({
   label,
+  leftElement,
   onPress,
   size = 'md',
   backgroundColor = theme.colors.white,
@@ -104,6 +107,7 @@ export const Chip = ({
           style,
         ]}
       >
+        {leftElement && <View style={{ marginRight: 6 }}>{leftElement}</View>}
         <Typography variant={typographyVariant} color={textColor} style={{ textAlign: 'center' }}>
           {label}
         </Typography>

package/src/components/DataDisplay/CircularProgress/CircularProgress.stories.tsx

@@ -0,0 +1,67 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View } from 'react-native';
+import { CircularProgress } from './CircularProgress';
+import { Typography } from '../../Typography/Typography';
+
+const meta = {
+  title: 'Components/DataDisplay/CircularProgress',
+  component: CircularProgress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'O **CircularProgress** exibe o progresso de uma determinada métrica num formato circular (usando SVG). Permite configurar cores, espessura da linha e incluir texto ou filhos personalizados no centro.\n\n### Exemplo de Uso\n```tsx\n<CircularProgress progress={50} size={120} strokeWidth={12} text="50%" />\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    progress: { control: { type: 'range', min: 0, max: 100 } },
+    size: { control: 'number' },
+    strokeWidth: { control: 'number' },
+    color: { control: 'color' },
+    trackColor: { control: 'color' },
+    text: { control: 'text' },
+  },
+} satisfies Meta<typeof CircularProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    progress: 45,
+    size: 100,
+    strokeWidth: 10,
+    text: '45%',
+  },
+};
+
+export const CustomTypography: Story = {
+  args: {
+    progress: 75,
+    size: 140,
+    strokeWidth: 12,
+  },
+  render: (args) => (
+    <CircularProgress {...args}>
+      <View style={{ alignItems: 'center' }}>
+        <Typography variant="h2">75%</Typography>
+        <Typography variant="small" color="#9a8478">Concluído</Typography>
+      </View>
+    </CircularProgress>
+  ),
+};
+
+export const Sizes: Story = {
+  args: { progress: 30 },
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
+      <CircularProgress progress={15} size={50} strokeWidth={6} text="15%" />
+      <CircularProgress progress={30} size={80} strokeWidth={8} text="30%" />
+      <CircularProgress progress={85} size={120} strokeWidth={12} text="85%" />
+    </View>
+  ),
+};

package/src/components/DataDisplay/CircularProgress/CircularProgress.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+
+export interface CircularProgressProps {
+  /** O valor do progresso (0 a 100) */
+  progress: number;
+  /** Tamanho total (largura/altura) do círculo */
+  size?: number;
+  /** Grossura da linha */
+  strokeWidth?: number;
+  /** Cor da linha de progresso */
+  color?: string;
+  /** Cor da linha de fundo (track) */
+  trackColor?: string;
+  /** Texto opcional para aparecer no centro */
+  text?: string;
+  /** Permite customizar o conteúdo central, sobrepõe a prop text */
+  children?: React.ReactNode;
+}
+
+export const CircularProgress = ({
+  progress,
+  size = 100,
+  strokeWidth = 10,
+  color = theme.colors.primary,
+  trackColor = theme.colors.primaryLight,
+  text,
+  children,
+}: CircularProgressProps) => {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  // Limita o progresso entre 0 e 100
+  const safeProgress = Math.min(Math.max(progress, 0), 100);
+  const strokeDashoffset = circumference - (safeProgress / 100) * circumference;
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <Svg width={size} height={size} style={styles.svg}>
+        {/* Fundo do Progresso (Track) */}
+        <Circle
+          stroke={trackColor}
+          fill="none"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={strokeWidth}
+        />
+        {/* Linha de Progresso */}
+        <Circle
+          stroke={color}
+          fill="none"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+        />
+      </Svg>
+
+      {/* Conteúdo Central */}
+      <View style={styles.contentContainer}>
+        {children ? (
+          children
+        ) : text ? (
+          <Typography variant="h3" color={theme.colors.brown[800]}>
+            {text}
+          </Typography>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  svg: {
+    transform: [{ rotate: '-90deg' }],
+  },
+  contentContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/DataDisplay/ProgressBar/ProgressBar.tsx

@@ -53,7 +53,7 @@ export const ProgressBar = ({
   }, [progress, animatedProgress]);
 
   const sizeStyles = {
-    xs: { height: 8, borderRadius: 5 },
+    xs: { height: 8, borderRadius: 4 },
     sm: { height: 12, borderRadius: 7 },
     md: { height: 16, borderRadius: 9 },
   }[size === 'lg' ? 'md' : size] || { height: 16, borderRadius: 9 };

package/src/components/Headers/CountryHeader/CountryHeader.tsx

@@ -1,4 +1,5 @@
-import { View, StyleSheet } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { getCountryTheme } from '../../../styles/countryThemes';
@@ -27,6 +28,8 @@ export interface CountryHeaderProps {
    * O developer deve passar o \`insets.top\` gerado pelo \`react-native-safe-area-context\`.
    */
   safeAreaTop?: number;
+  /** Se deve ocultar a barra de progresso com animação */
+  hideProgressBar?: boolean;
   /** Estilos customizados opcionais para o container principal */
   style?: ViewStyle | ViewStyle[];
 }
@@ -40,11 +43,23 @@ export const CountryHeader = ({
   progressSegments = 4,
   onBackPress,
   safeAreaTop = 0,
+  hideProgressBar = false,
   style,
 }: CountryHeaderProps) => {
   const { scale, scaleText } = useResponsive();
   const countryTheme = getCountryTheme(countryCode);
 
+  const progressAnim = useRef(new Animated.Value(hideProgressBar ? 0 : 1)).current;
+
+  useEffect(() => {
+    Animated.timing(progressAnim, {
+      toValue: hideProgressBar ? 0 : 1,
+      duration: 300,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: false,
+    }).start();
+  }, [hideProgressBar, progressAnim]);
+
   return (
     <View style={[styles.container, { backgroundColor: countryTheme.bg }, style]}>
       {/* Círculo decorativo de fundo */}
@@ -87,13 +102,24 @@ export const CountryHeader = ({
         </View>
 
         {/* Progress Bar */}
-        <ProgressBar
-          progress={progress}
-          segments={progressSegments}
-          size="sm"
-          fillColor={countryTheme.progressFill}
-          trackColor={countryTheme.progressTrack}
-        />
+        <Animated.View
+          style={{
+            opacity: progressAnim,
+            height: progressAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 12],
+            }),
+            overflow: 'hidden',
+          }}
+        >
+          <ProgressBar
+            progress={progress}
+            segments={progressSegments}
+            size="sm"
+            fillColor={countryTheme.progressFill}
+            trackColor={countryTheme.progressTrack}
+          />
+        </Animated.View>
       </View>
     </View>
   );

package/src/components/Headers/RouteHeader/RouteHeader.tsx

@@ -83,6 +83,8 @@ export interface RouteHeaderProps {
   onNotificationPress?: () => void;
   /** Callback ao clicar no mapa/globo. Requer variant="minimal" */
   onGlobePress?: () => void;
+  /** Indica se está na visão global, para trocar o ícone do globo pelo pino de mapa */
+  isGlobalView?: boolean;
   /** 
    * Estilos adicionais para o contentor exterior (ex: zIndex, position absolute). 
    */
@@ -116,6 +118,7 @@ export const RouteHeader = ({
   notificationCount = 0,
   onNotificationPress,
   onGlobePress,
+  isGlobalView = false,
   safeAreaTop = 0,
   style,
 }: RouteHeaderProps) => {
@@ -188,7 +191,7 @@ export const RouteHeader = ({
               )}
             </View>
             <IconButton 
-              iconName="Globe" 
+              iconName={isGlobalView ? "MapPin" : "Globe"} 
               variant="secondary" 
               size="sm" 
               iconColor={theme.colors.brown[800]}
@@ -202,7 +205,7 @@ export const RouteHeader = ({
       <ProgressBar
         progress={progress}
         segments={segments}
-        size="sm"
+        size="xs"
         variant="default" // Usa a cor primária (laranja)
         trackColor={theme.colors.brown[100]} // Fundo da barra um pouco mais escuro para ser visível
       />

package/src/components/Navigation/TopTabBar/TopTabBar.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Pressable, Animated, LayoutChangeEvent } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+import { useResponsive } from '../../../hooks/useResponsive';
+
+export interface TopTabItem {
+  id: string;
+  label: string;
+  activeColor: string; // The color to use for the text and underline when active
+}
+
+export interface TopTabBarProps {
+  tabs: TopTabItem[];
+  activeTabId: string;
+  onTabPress: (id: string) => void;
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const TopTabBar = ({ tabs, activeTabId, onTabPress, style }: TopTabBarProps) => {
+  const { scale } = useResponsive();
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const activeIndex = tabs.findIndex((t) => t.id === activeTabId) !== -1 ? tabs.findIndex((t) => t.id === activeTabId) : 0;
+  
+  const animatedIndex = useRef(new Animated.Value(activeIndex)).current;
+
+  useEffect(() => {
+    Animated.spring(animatedIndex, {
+      toValue: activeIndex,
+      useNativeDriver: false, // Color interpolation requires useNativeDriver: false
+      tension: 60,
+      friction: 8,
+    }).start();
+  }, [activeIndex, animatedIndex]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    setContainerWidth(event.nativeEvent.layout.width);
+  };
+
+  const tabWidth = containerWidth > 0 ? containerWidth / tabs.length : 0;
+
+  // Animate indicator position
+  const translateX = animatedIndex.interpolate({
+    inputRange: tabs.map((_, i) => i),
+    outputRange: tabs.map((_, i) => i * tabWidth),
+  });
+
+  // Animate indicator color
+  const indicatorColor = tabs.length > 1 ? animatedIndex.interpolate({
+    inputRange: tabs.map((_, i) => i),
+    outputRange: tabs.map((t) => t.activeColor),
+  }) : tabs[0]?.activeColor || theme.colors.primary;
+
+  return (
+    <View style={[styles.container, style]} onLayout={handleLayout}>
+      <View style={styles.tabsRow}>
+        {tabs.map((tab, index) => {
+          const isActive = index === activeIndex;
+          // When active, use the bold font variant and active color
+          // When inactive, use regular font and brown color
+          return (
+            <Pressable
+              key={tab.id}
+              style={[styles.tabButton, { paddingVertical: scale(16) }]}
+              onPress={() => onTabPress(tab.id)}
+            >
+              <Typography
+                variant={isActive ? 'bodyMdHeavy' : 'bodyMd'}
+                style={[
+                  styles.tabLabel,
+                  { color: isActive ? tab.activeColor : theme.colors.brown[300] }
+                ]}
+              >
+                {tab.label}
+              </Typography>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      {/* Animated Indicator */}
+      {containerWidth > 0 && (
+        <Animated.View
+          style={[
+            styles.indicatorContainer,
+            {
+              width: tabWidth,
+              transform: [{ translateX }],
+            },
+          ]}
+        >
+          <Animated.View
+            style={[
+              styles.indicator,
+              { backgroundColor: indicatorColor }
+            ]}
+          />
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: theme.colors.white,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.brown[50],
+    position: 'relative',
+  },
+  tabsRow: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  tabButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tabLabel: {
+    textAlign: 'center',
+  },
+  indicatorContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  indicator: {
+    width: '60%', // Make the underline a bit shorter than the full tab width for aesthetics
+    height: 4,
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+  },
+});

package/src/index.ts

@@ -22,6 +22,7 @@ export * from './components/Cards/TeacherCard/TeacherCard';
 export * from './components/Charts/WeeklyProgressChart';
 export * from './components/DataDisplay/Avatar/Avatar';
 export * from './components/DataDisplay/Badge/Badge';
+export * from './components/DataDisplay/CircularProgress/CircularProgress';
 export * from './components/DataDisplay/Flag/Flag';
 export * from './components/DataDisplay/InstructionBubble/InstructionBubble';
 export * from './components/DataDisplay/LevelBadge/LevelBadge';
@@ -52,6 +53,7 @@ export * from './components/Navigation/BottomTabBar/BottomTabBar';
 export * from './components/Navigation/TabBar/TabBar';
 export * from './components/Navigation/PaginationDots/PaginationDots';
 export * from './components/Navigation/ProgressMap/ProgressMap';
+export * from './components/Navigation/TopTabBar/TopTabBar';
 export * from './components/Navigation/WorldProgressMap/WorldProgressMap';
 export * from './components/Typography/Typography';
 export * from './hooks/useResponsive';

package/src/utils/iconMap.ts

@@ -1,11 +1,11 @@
-import { Play, Volume2, Volume1, ArrowRight, X, Check, ChevronRight, ChevronLeft, Info, AlertTriangle, Book, Mic, Home, Compass, GraduationCap, FolderOpen, User, ShoppingCart, FileText, Wallet, Bell, Globe } from 'lucide-react-native';
+import { Play, Volume2, Volume1, ArrowRight, X, Check, ChevronRight, ChevronLeft, Info, AlertTriangle, Book, Mic, Home, Compass, GraduationCap, FolderOpen, User, ShoppingCart, FileText, Wallet, Bell, Globe, Shield, Settings, CheckCheck, Users, ShieldAlert, Plus, Lock, MapPin, Clock, Smartphone, LocateFixed } from 'lucide-react-native';
 
 /**
  * Para evitar que o Vite e o Metro (React Native) tentem empacotar os 1400+ ícones 
  * da biblioteca (o que causa crash de memória e aumenta muito o tamanho final da app),
  * mapeamos aqui explicitamente os ícones que usamos.
  * 
- * Se precisar de um novo ícone da \`lucide-react-native\`, basta importá-lo acima
+ * Se precisar de um novo ícone da `lucide-react-native`, basta importá-lo acima
  * e adicioná-lo a este objeto.
  */
 export const IconMap: Record<string, any> = {
@@ -31,4 +31,15 @@ export const IconMap: Record<string, any> = {
   Wallet,
   Bell,
   Globe,
+  Shield,
+  Settings,
+  CheckCheck,
+  Users,
+  ShieldAlert,
+  Plus,
+  Lock,
+  MapPin,
+  Clock,
+  Smartphone,
+  LocateFixed,
 };

package/dist/assets/index-DGJGCwsd.css

@@ -1 +0,0 @@
-@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";@layer components;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:"Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:var(--black);--color-white:var(--white);--radius-xs:6px;--radius-sm:10px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--shadow-xs:0 1px 3px #51332d14;--shadow-sm:0 2px 8px #51332d1a;--shadow-md:0 4px 14px #51332d21;--shadow-lg:0 8px 26px #51332d2e;--shadow-xl:0 18px 40px #51332d47;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-title:"Fredoka", sans-serif;--color-primary:var(--primary);--color-primary-dark:var(--primary-dark);--color-primary-light:var(--primary-light);--color-brown-900:var(--brown-900);--color-brown-800:var(--brown-800);--color-brown-700:var(--brown-700);--color-brown-600:var(--brown-600);--color-brown-500:var(--brown-500);--color-brown-400:var(--brown-400);--color-brown-300:var(--brown-300);--color-brown-100:var(--brown-100);--color-brown-50:var(--brown-50);--color-cream:var(--cream);--color-canvas:var(--canvas);--color-success:var(--success);--color-error:var(--error);--color-info:var(--info);--radius-screen:34px;--radius-phone:42px;--shadow-btn-primary:0 4px 0 #cf7a30;--shadow-btn-secondary:0 4px 0 #efe2d6;--shadow-btn-dark:0 4px 0 #3a241f;--shadow-focus:0 0 0 3px #f2974b38;--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1);--duration-fast:.12s;--duration-base:.2s;--duration-medium:.3s;--duration-slow:.5s;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.container{width:100%}@media (width>=0){.container{max-width:0}}@media (width>=375px){.container{max-width:375px}}@media (width>=430px){.container{max-width:430px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1440px){.container{max-width:1440px}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-bounce{--tw-ease:var(--ease-bounce);transition-timing-function:var(--ease-bounce)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.ease-smooth{--tw-ease:var(--ease-smooth);transition-timing-function:var(--ease-smooth)}}:root{--primary:#f2974b;--primary-dark:#cf7a30;--primary-light:#fef6ee;--brown-900:#15100d;--brown-800:#51332d;--brown-700:#3f2620;--brown-600:#6e5a4f;--brown-500:#9a8478;--brown-400:#b9a392;--brown-300:#c3b1a4;--brown-100:#efe2d6;--brown-50:#fdf3ea;--cream:#fbf6f0;--canvas:#e7e5df;--success:#16915a;--error:#cf5b48;--info:#2a6fc2;--black:#000;--white:#fff;--bg-app:#fbf6f0;--bg-surface:#fff;--bg-surface-hover:#fdf3ea;--border-color:#efe2d6;--text-primary:#51332d;--text-secondary:#9a8478}.dark-theme{--bg-app:#15100d;--bg-surface:#51332d;--bg-surface-hover:#3f2620;--border-color:#3f2620;--text-primary:#efe2d6;--text-secondary:#b9a392;--primary-light:#f2974b26}body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);transition:background-color .25s,color .25s}.text-display-1{font-family:var(--font-title);font-size:28px;font-weight:700;line-height:1.08}@media (width>=1024px){.text-display-1{font-size:42px}}.text-display-2{font-family:var(--font-title);font-size:24px;font-weight:700;line-height:1.12}@media (width>=1024px){.text-display-2{font-size:34px}}.text-h1{font-family:var(--font-title);font-size:22px;font-weight:700;line-height:1.15}@media (width>=1024px){.text-h1{font-size:28px}}.text-h2{font-family:var(--font-title);font-size:18px;font-weight:600;line-height:1.2}@media (width>=1024px){.text-h2{font-size:22px}}.text-h3{font-family:var(--font-title);font-size:16px;font-weight:600;line-height:1.25}@media (width>=1024px){.text-h3{font-size:19px}}.text-label{font-family:var(--font-sans);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:800;line-height:1}@media (width>=1024px){.text-label{font-size:11px}}.text-body-lg{font-family:var(--font-sans);font-size:15px;font-weight:600;line-height:1.55}@media (width>=1024px){.text-body-lg{font-size:17px}}.text-body-md{font-family:var(--font-sans);font-size:13.5px;font-weight:600;line-height:1.5}@media (width>=1024px){.text-body-md{font-size:15px}}.text-body-sm{font-family:var(--font-sans);font-size:12px;font-weight:700;line-height:1.45}@media (width>=1024px){.text-body-sm{font-size:13px}}.text-caption{font-family:var(--font-sans);font-size:10px;font-weight:700;line-height:1.4}@media (width>=1024px){.text-caption{font-size:11px}}.text-btn-lg{font-family:var(--font-sans);letter-spacing:.04em;font-size:16px;font-weight:800;line-height:1}@media (width>=1024px){.text-btn-lg{font-size:17px}}.text-btn-md{font-family:var(--font-sans);letter-spacing:.04em;font-size:14px;font-weight:800;line-height:1}@media (width>=1024px){.text-btn-md{font-size:15px}}.text-btn-sm{font-family:var(--font-sans);letter-spacing:.04em;font-size:12px;font-weight:800;line-height:1}@media (width>=1024px){.text-btn-sm{font-size:12px}}@keyframes xtBob{0%{transform:translateY(0)}50%{transform:translateY(-7px)}to{transform:translateY(0)}}@keyframes xtPop{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes xtFlame{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.15)rotate(5deg)}}@keyframes xtRing{0%{box-shadow:0 0 #f2974b8c}to{box-shadow:0 0 0 16px #f2974b00}}.animate-bob{animation:2.9s ease-in-out infinite xtBob}.animate-pop{animation:1.6s ease-in-out infinite xtPop}.animate-flame{animation:1.8s ease-in-out infinite xtFlame}.animate-ring{animation:1.8s cubic-bezier(0,0,.2,1) infinite xtRing}@keyframes xtShadow{0%,to{opacity:.2;transform:scale(1)}50%{opacity:.08;transform:scale(.6)}}.animate-contact-shadow{animation:2.9s ease-in-out infinite xtShadow}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}