greenole-design-system 1.1.71 → 1.1.72

package/README.md

@@ -1,147 +1,147 @@
-# Greenole Design System
-
-[![Figma Design](https://img.shields.io/badge/Figma-Design_System-blue)](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
-
-The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.  
-The library is constantly evolving, with new components and improvements being added over time.
-
-## Table of Contents
-
-- [Introduction](#introduction)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Development](#development)
-- [Build & Publication](#build--publication)
-- [Contributing](#contributing)
-- [License](#license)
-
-## Introduction
-
-**Greenole Design System** gathers reusable components that follow a consistent visual identity.  
-It helps teams maintain design and usability standards across their React projects.
-
-> **Note:**  
-> This library is in constant evolution. Existing components may be updated and new ones added over time.
-
-## Installation
-
-To install the library in your React project, run:
-
-```bash
-npm install greenole-design-system
-```
-
-> **Note:**  
-> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
-
-## Usage
-
-After installation, you need to import both the CSS styles and the components:
-
-### 1. Import the CSS styles
-
-First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
-
-```jsx
-import 'greenole-design-system/dist/greenole.css';
-```
-
-### 2. Import and use components
-
-Then you can import and use the library's components:
-
-```jsx
-import React from 'react';
-import { Typography } from 'greenole-design-system';
-
-function App() {
-  return (
-    <div>
-      <Typography variant="h1">
-        The quick brown fox jumps over the lazy dog.
-      </Typography>
-      {/* Additional components will be added in the future */}
-    </div>
-  );
-}
-
-export default App;
-```
-
-## Development
-
-To contribute to or test the library locally:
-
-1. Clone the repository:
-   ```bash
-   git clone https://github.com/your-username/greenole-design-system.git
-   cd greenole-design-system
-   ```
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-3. Start the development environment using Vite:
-   ```bash
-   npm run dev
-   ```
-4. To view the documentation and components, we use **Storybook**:
-   ```bash
-   npm run storybook
-   ```
-   Storybook serves as the documentation and demo environment for the library's components.
-
-## Build & Publication
-
-To generate the library bundle:
-
-1. Run the build command:
-
-   ```bash
-   npm run build
-   ```
-
-   This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
-
-2. To test locally in another project, use `npm link`:
-   ```bash
-   cd greenole-design-system
-   npm link
-   cd ../your-consumer-project
-   npm link greenole-design-system
-   ```
-3. When ready to publish:
-
-   ```bash
-   npm login
-   npm publish --access public
-   ```
-
-## Publishing Storybook to GitHub Pages
-
-1. Build the Storybook:
-
-   ```bash
-   npm run build-storybook
-   ```
-
-   This generates the static files for your Storybook.
-
-2. Deploy to GitHub Pages:
-
-   ```bash
-   npm run deploy-storybook
-   ```
-
-   This will automatically push the built files to the configured branch (`gh-pages`).
-
-   After that, you can access the updated Storybook at: [Design System](https://greenole-iot.github.io/greenole-design-system)
-
-## Contributing
-
-Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
-
-1. Fork the repository.
-2. Create a branch for your feature (`git checkout -b my-feature`).
-3. Commit your changes.
-4. Open a pull request for review.
+# Greenole Design System
+
+[![Figma Design](https://img.shields.io/badge/Figma-Design_System-blue)](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
+
+The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.  
+The library is constantly evolving, with new components and improvements being added over time.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Development](#development)
+- [Build & Publication](#build--publication)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Introduction
+
+**Greenole Design System** gathers reusable components that follow a consistent visual identity.  
+It helps teams maintain design and usability standards across their React projects.
+
+> **Note:**  
+> This library is in constant evolution. Existing components may be updated and new ones added over time.
+
+## Installation
+
+To install the library in your React project, run:
+
+```bash
+npm install greenole-design-system
+```
+
+> **Note:**  
+> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
+
+## Usage
+
+After installation, you need to import both the CSS styles and the components:
+
+### 1. Import the CSS styles
+
+First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
+
+```jsx
+import 'greenole-design-system/dist/greenole.css';
+```
+
+### 2. Import and use components
+
+Then you can import and use the library's components:
+
+```jsx
+import React from 'react';
+import { Typography } from 'greenole-design-system';
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">
+        The quick brown fox jumps over the lazy dog.
+      </Typography>
+      {/* Additional components will be added in the future */}
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Development
+
+To contribute to or test the library locally:
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/your-username/greenole-design-system.git
+   cd greenole-design-system
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development environment using Vite:
+   ```bash
+   npm run dev
+   ```
+4. To view the documentation and components, we use **Storybook**:
+   ```bash
+   npm run storybook
+   ```
+   Storybook serves as the documentation and demo environment for the library's components.
+
+## Build & Publication
+
+To generate the library bundle:
+
+1. Run the build command:
+
+   ```bash
+   npm run build
+   ```
+
+   This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
+
+2. To test locally in another project, use `npm link`:
+   ```bash
+   cd greenole-design-system
+   npm link
+   cd ../your-consumer-project
+   npm link greenole-design-system
+   ```
+3. When ready to publish:
+
+   ```bash
+   npm login
+   npm publish --access public
+   ```
+
+## Publishing Storybook to GitHub Pages
+
+1. Build the Storybook:
+
+   ```bash
+   npm run build-storybook
+   ```
+
+   This generates the static files for your Storybook.
+
+2. Deploy to GitHub Pages:
+
+   ```bash
+   npm run deploy-storybook
+   ```
+
+   This will automatically push the built files to the configured branch (`gh-pages`).
+
+   After that, you can access the updated Storybook at: [Design System](https://greenole-iot.github.io/greenole-design-system)
+
+## Contributing
+
+Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
+
+1. Fork the repository.
+2. Create a branch for your feature (`git checkout -b my-feature`).
+3. Commit your changes.
+4. Open a pull request for review.

package/dist/base-components/Toast/Toast.stories.d.ts

@@ -6,6 +6,7 @@ export default meta;
 type Story = StoryObj<typeof Toast>;
 export declare const Playground: Story;
 export declare const Gallery: Story;
+export declare const CustomDescription: Story;
 export declare const InteractiveSandbox: {
     name: string;
     render: () => React.JSX.Element;

package/dist/base-components/Toast/Toast.types.d.ts

@@ -1,13 +1,15 @@
-export type ToastVariant = "success" | "error" | "warning" | "info";
-export type ToastPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+import { ReactNode } from 'react';
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+export type ToastPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export interface ToastProps {
     id?: string;
     variant?: ToastVariant;
     message: string;
-    description?: string;
+    description?: string | ReactNode;
     position?: ToastPosition;
     autoDismiss?: boolean;
     autoDismissTime?: number;
-    onClose?: () => void;
+    closable?: boolean;
     className?: string;
+    onClose?: () => void;
 }

package/dist/greenole-design-system.cjs.js

@@ -1254,7 +1254,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[U8]+=1);const f1={h1:F`
     outline: 2px solid var(--info, #2e90fa);
     outline-offset: 2px;
   }
-`,Xl={success:i.jsx(ba,{size:20}),error:i.jsx(Ea,{size:20}),warning:i.jsx(ka,{size:20}),info:i.jsx(wa,{size:20})},ln=({variant:e="info",message:t,description:n,autoDismiss:r=!0,autoDismissTime:s=3e3,onClose:o})=>{const a=e==="error"||e==="warning"?"alert":"status";return d.useEffect(()=>{if(r&&o){const l=setTimeout(()=>o(),s);return()=>clearTimeout(l)}},[r,s,o]),i.jsxs(Nl,{variant:e,role:a,children:[i.jsx(Ul,{variant:e,children:Xl[e]}),i.jsxs(Wl,{children:[i.jsx(Yl,{children:t}),n&&i.jsx(Kl,{children:n})]}),i.jsx(Gl,{type:"button",onClick:o,"aria-label":"Fechar",children:i.jsx(Va,{size:16})}),r&&i.jsx(zl,{variant:e,autoDismissTime:s})]})},cn=d.createContext(null),ql=({children:e})=>{const[t,n]=d.useState([]),r=d.useCallback((o,a="info",l={})=>{const c=Date.now()+Math.random(),h={id:c,message:o,variant:a,description:l.description,position:l.position??"top-right",autoDismiss:l.autoDismiss??!0,autoDismissTime:l.autoDismissTime??4e3};n(u=>[...u,h]),h.autoDismiss&&setTimeout(()=>{n(u=>u.filter(f=>f.id!==c))},h.autoDismissTime)},[]),s=d.useCallback(()=>n([]),[]);return i.jsxs(cn.Provider,{value:{showToast:r,clearToasts:s},children:[e,["top-left","top-right","bottom-left","bottom-right"].map(o=>i.jsx("div",{style:{position:"fixed",[o.includes("bottom")?"bottom":"top"]:16,[o.includes("right")?"right":"left"]:16,display:"flex",flexDirection:o.includes("bottom")?"column-reverse":"column",gap:8,zIndex:9999},children:t.filter(a=>a.position===o).map(a=>i.jsx(ln,{message:a.message,description:a.description,variant:a.variant,onClose:()=>n(l=>l.filter(c=>c.id!==a.id))},a.id))},o))]})},Jl=()=>{const e=d.useContext(cn);if(!e)throw new Error("useToast must be used within <ToastProvider>");return e},Ql=e=>{switch(e){case"top":return F`
+`,Xl={success:i.jsx(ba,{size:20}),error:i.jsx(Ea,{size:20}),warning:i.jsx(ka,{size:20}),info:i.jsx(wa,{size:20})},ln=({variant:e="info",message:t,description:n,autoDismiss:r=!0,autoDismissTime:s=3e3,closable:o=!0,onClose:a})=>{const l=e==="error"||e==="warning"?"alert":"status";return d.useEffect(()=>{if(r&&a){const c=setTimeout(()=>a(),s);return()=>clearTimeout(c)}},[r,s,a]),i.jsxs(Nl,{variant:e,role:l,children:[i.jsx(Ul,{variant:e,children:Xl[e]}),i.jsxs(Wl,{children:[i.jsx(Yl,{children:t}),n&&i.jsx(Kl,{children:n})]}),o&&i.jsx(Gl,{type:"button",onClick:a,"aria-label":"Fechar",children:i.jsx(Va,{size:16})}),r&&i.jsx(zl,{variant:e,autoDismissTime:s})]})},cn=d.createContext(null),ql=({children:e})=>{const[t,n]=d.useState([]),r=d.useCallback((o,a="info",l={})=>{const c=Date.now()+Math.random(),h={id:c,message:o,variant:a,description:l.description,position:l.position??"top-right",autoDismiss:l.autoDismiss??!0,autoDismissTime:l.autoDismissTime??4e3};n(u=>[...u,h]),h.autoDismiss&&setTimeout(()=>{n(u=>u.filter(f=>f.id!==c))},h.autoDismissTime)},[]),s=d.useCallback(()=>n([]),[]);return i.jsxs(cn.Provider,{value:{showToast:r,clearToasts:s},children:[e,["top-left","top-right","bottom-left","bottom-right"].map(o=>i.jsx("div",{style:{position:"fixed",[o.includes("bottom")?"bottom":"top"]:16,[o.includes("right")?"right":"left"]:16,display:"flex",flexDirection:o.includes("bottom")?"column-reverse":"column",gap:8,zIndex:9999},children:t.filter(a=>a.position===o).map(a=>i.jsx(ln,{message:a.message,description:a.description,variant:a.variant,onClose:()=>n(l=>l.filter(c=>c.id!==a.id))},a.id))},o))]})},Jl=()=>{const e=d.useContext(cn);if(!e)throw new Error("useToast must be used within <ToastProvider>");return e},Ql=e=>{switch(e){case"top":return F`
         bottom: 100%;
         left: 50%;
         transform: translateX(-50%);

package/dist/greenole-design-system.js

@@ -5830,21 +5830,22 @@ const ja = H.div`
   description: n,
   autoDismiss: r = !0,
   autoDismissTime: s = 3e3,
-  onClose: o
+  closable: o = !0,
+  onClose: a
 }) => {
-  const a = e === "error" || e === "warning" ? "alert" : "status";
+  const l = e === "error" || e === "warning" ? "alert" : "status";
   return y(() => {
-    if (r && o) {
-      const l = setTimeout(() => o(), s);
-      return () => clearTimeout(l);
+    if (r && a) {
+      const c = setTimeout(() => a(), s);
+      return () => clearTimeout(c);
     }
-  }, [r, s, o]), /* @__PURE__ */ i.jsxs(vl, { variant: e, role: a, children: [
+  }, [r, s, a]), /* @__PURE__ */ i.jsxs(vl, { variant: e, role: l, children: [
     /* @__PURE__ */ i.jsx(xl, { variant: e, children: Vl[e] }),
     /* @__PURE__ */ i.jsxs(Ml, { children: [
       /* @__PURE__ */ i.jsx(bl, { children: t }),
       n && /* @__PURE__ */ i.jsx(wl, { children: n })
     ] }),
-    /* @__PURE__ */ i.jsx(kl, { type: "button", onClick: o, "aria-label": "Fechar", children: /* @__PURE__ */ i.jsx(sa, { size: 16 }) }),
+    o && /* @__PURE__ */ i.jsx(kl, { type: "button", onClick: a, "aria-label": "Fechar", children: /* @__PURE__ */ i.jsx(sa, { size: 16 }) }),
     r && /* @__PURE__ */ i.jsx(yl, { variant: e, autoDismissTime: s })
   ] });
 }, Mn = g1(null), by = ({

package/dist/greenole.css

@@ -355,6 +355,10 @@
   gap: 2.5rem;
 }
 
+.tw-gap-2 {
+  gap: 0.5rem;
+}
+
 .tw-gap-3 {
   gap: 0.75rem;
 }

package/dist/index.css

@@ -1 +1 @@
-:root{--neutral-softest: #FEFEFE;--neutral-soft: #F4F7FA;--neutral-lightest: #E6EBF2;--neutral-lighter: #C3CED8;--neutral-light: #9FADBA;--neutral-medium: #62768A;--neutral-grey: #9D9D9D;--neutral-dark: #2E4151;--neutral-darker: #202F3C;--neutral-darkest: #101C26;--brandcolor-main: #118E34;--brandcolor-softest: #DEF8E2;--brandcolor-soft: #26C45B;--brandcolor-medium: #0B662A;--brandcolor-darkest: #033B12;--success: #00DC7D;--success-soft: #00DC7D;--success-dark: #1C904A;--danger: #E2222A;--danger-dark: #B7151B;--warning: #FF9900;--info: #2981FD;--link-soft: #2981FD;--link-dark: #0351C1;--red-500: #FDE7E8;--red-600: #DD6764;--red-700: #CE0000;--red-800: #9B0000;--red-900: #670103;--orange-400: #FFFAF3;--orange-500: #FDEDD8;--orange-600: #F2B177;--orange-700: #E49145;--orange-800: #B75E13;--orange-900: #773F0B;--yellow-400: #FFF4D2;--yellow-500: #FEE69F;--yellow-600: #FED871;--yellow-700: #F3C148;--yellow-800: #BF921C;--yellow-900: #7E610B;--green-400: #E2F8D9;--green-500: #B2E59C;--green-600: #93C57D;--green-700: #6AA758;--green-800: #397428;--green-900: #294D12;--cyan-400: #DDECED;--cyan-500: #A2C4C7;--cyan-600: #79A4B4;--cyan-700: #47818D;--cyan-800: #105057;--cyan-900: #0B333A;--blue-400: #DEECFF;--blue-500: #C6DBF8;--blue-600: #A2C4F1;--blue-700: #699EEB;--blue-800: #3978D7;--blue-900: #1555CC;--purple-400: #EFE6FB;--purple-500: #BA96EE;--purple-600: #9E69E9;--purple-700: #5300CF;--purple-800: #4100CA;--purple-900: #1800C2;--pink-400: #F9E4EE;--pink-500: #F0BCD5;--pink-600: #E2679E;--pink-700: #B32867;--pink-800: #9D2661;--pink-900: #772155;--grey-200: #F8F8F8;--grey-300: #EDEDED;--grey-400: #C9C9C9;--grey-500: #B4B4B4;--grey-600: #999997;--grey-700: #666667;--grey-800: #434345;--grey-900: #020202;--color-light: #FEFEFE;--color-dark: #101C26;--color-brand: #118E34;--color-brand-softest: #DEF8E2;--color-brand-soft: #26C45B;--color-brand-medium: #0B662A;--color-brand-darkest: #033B12;--color-background-dashboard: #FAFAFC;--color-background-card: #FEFEFE;--color-background: #FAFAFC;--color-background-hover: #E6EBF2;--color-surface: #FEFEFE;--color-surface-hover: #E6EBF2;--color-on-background: #2E4151;--color-on-background-hover: #202F3C;--color-on-surface: #101C26;--color-on-surface-hover: #2E4151;--color-on-brand: #FFFFFF;--color-on-brand-hover: #FFFFFF;--color-sidebar: #118E34;--color-on-sidebar: #FFFFFF;--color-sidebar-hover: #0B662A;--color-on-sidebar-hover: #FFFFFF;--color-danger: #E2222A;--color-on-danger: #FFFFFF;--color-danger-dark: #B7151B;--color-success: #00DC7D;--color-on-success: #FFFFFF;--color-success-dark: #1C904A;--color-warning: #FF9900;--color-on-warning: #101C26;--color-link: #2981FD;--color-link-dark: #0351C1;--color-neutral-soft: #F4F7FA;--color-neutral-lightest: #E6EBF2;--color-neutral-lighter: #C3CED8;--color-neutral-light: #9FADBA;--color-neutral-medium: #62768A;--color-neutral-dark: #2E4151;--color-neutral-darker: #202F3C;--color-neutral-darkest: #101C26;--brackgrounds-dashboards: #FAFAFC;--brackgrounds-card: #FEFEFE;--background-soft: #FAFAFC;--background-dark-softest: #3A3939;--background-dark-softin: #323131;--background-dark-soft: #2D2C2C;--background-dark-medium: #292828;--background-dark-hard: #1E1E1E;--background-dark-hardest: #19191C;--hover-soft: #E6EBF2;--hover-medium: #C3CED8;--hover-dark: #C8C8C8;--hover-dark-soft: #434343;--hover-dark-medium: #353434;--hover-dark-hard: #292828;--font-family-primary: Roboto, sans-serif;--font-family-mono: monospace;--font-family-sans: Roboto, sans-serif;--font-size-h1: 56px;--font-size-h2: 48px;--font-size-h3: 40px;--font-size-h4: 32px;--font-size-h5: 24px;--font-size-h6: 20px;--font-size-subtitle-regular: 32px;--font-size-subtitle-medium: 24px;--font-size-body-xl: 18px;--font-size-body-lg: 16px;--font-size-body-md: 14px;--font-size-body-sm: 12px;--font-size-caption: 10px;--line-height-h1: 150%;--line-height-h2: 150%;--line-height-h3: 40px;--line-height-h4: 32px;--line-height-h5: 24px;--line-height-subtitle-regular: 24px;--line-height-subtitle-medium: 24px;--line-height-body-xl: 24px;--line-height-body-lg: 24px;--line-height-body-md: 20px;--line-height-body-sm: 16px;--line-height-caption: 16px;--line-height-tight: 120%;--line-height-normal: 150%;--line-height-relaxed: 180%;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-5: 20px;--spacing-6: 24px;--spacing-8: 32px;--spacing-10: 40px;--spacing-12: 48px;--spacing-16: 64px;--spacing-20: 80px;--spacing-24: 96px;--spacing-32: 128px;--spacing-40: 160px;--spacing-48: 192px;--spacing-56: 224px;--spacing-64: 256px;--spacing-72: 288px;--spacing-80: 320px;--spacing-96: 384px;--radius-4: 4px;--radius-8: 8px;--radius-12: 12px;--radius-16: 16px;--radius-none: 0;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(124, 124, 131, .04);--shadow-sm: 0 1px 3px 0 rgba(124, 124, 131, .08), 0 1px 2px 0 rgba(124, 124, 131, .04);--shadow-md: 0 2px 4px -2px rgba(124, 124, 131, .08), 0 4px 8px -2px rgba(124, 124, 131, .12);--shadow-lg: 0 4px 6px -2px rgba(124, 124, 131, .04), 0 12px 16px -4px rgba(124, 124, 131, .08);--shadow-dialog: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12)}.tw-m-5{margin:1.25rem}.tw-my-10{margin-top:2.5rem;margin-bottom:2.5rem}.tw-my-6{margin-top:1.5rem;margin-bottom:1.5rem}.tw-mb-2{margin-bottom:.5rem}.tw-mb-4{margin-bottom:1rem}.tw-mb-6{margin-bottom:1.5rem}.tw-mt-10{margin-top:2.5rem}.tw-mt-2{margin-top:.5rem}.tw-mt-4{margin-top:1rem}.tw-mt-5{margin-top:1.25rem}.tw-flex{display:flex}.tw-h-1\.5{height:.375rem}.tw-h-2\.5{height:.625rem}.tw-h-3\.5{height:.875rem}.tw-h-\[120px\]{height:120px}.tw-h-\[200px\]{height:200px}.tw-h-\[20vh\]{height:20vh}.tw-h-auto{height:auto}.tw-w-\[150px\]{width:150px}.tw-w-\[200px\]{width:200px}.tw-w-\[350px\]{width:350px}.tw-flex-1{flex:1 1 0%}.tw-list-inside{list-style-position:inside}.tw-list-disc{list-style-type:disc}.tw-flex-col{flex-direction:column}.tw-items-start{align-items:flex-start}.tw-items-center{align-items:center}.tw-items-baseline{align-items:baseline}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-10{gap:2.5rem}.tw-gap-3{gap:.75rem}.tw-gap-4{gap:1rem}.tw-gap-40{gap:10rem}.tw-gap-5{gap:1.25rem}.tw-gap-\[8px\]{gap:8px}.tw-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.tw-overflow-hidden{overflow:hidden}.tw-whitespace-nowrap{white-space:nowrap}.tw-rounded{border-radius:.25rem}.tw-rounded-lg{border-radius:.5rem}.tw-rounded-xl{border-radius:.75rem}.tw-border{border-width:1px}.tw-border-amber-200{--tw-border-opacity: 1;border-color:rgb(253 230 138 / var(--tw-border-opacity, 1))}.tw-border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.tw-border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.tw-border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.tw-bg-\[var\(--blue-700\)\]{background-color:var(--blue-700)}.tw-bg-\[var\(--brandcolor-main\)\]{background-color:var(--brandcolor-main)}.tw-bg-\[var\(--green-700\)\]{background-color:var(--green-700)}.tw-bg-\[var\(--neutral-grey\)\]{background-color:var(--neutral-grey)}.tw-bg-\[var\(--red-700\)\]{background-color:var(--red-700)}.tw-bg-amber-100{--tw-bg-opacity: 1;background-color:rgb(254 243 199 / var(--tw-bg-opacity, 1))}.tw-bg-amber-50{--tw-bg-opacity: 1;background-color:rgb(255 251 235 / var(--tw-bg-opacity, 1))}.tw-bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.tw-bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.tw-bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.tw-bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.tw-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.tw-p-4{padding:1rem}.tw-p-6{padding:1.5rem}.tw-p-\[16px\]{padding:16px}.tw-px-1{padding-left:.25rem;padding-right:.25rem}.tw-text-right{text-align:right}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-font-semibold{font-weight:600}.tw-text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.tw-text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.tw-text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.tw-text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}
+:root{--neutral-softest: #FEFEFE;--neutral-soft: #F4F7FA;--neutral-lightest: #E6EBF2;--neutral-lighter: #C3CED8;--neutral-light: #9FADBA;--neutral-medium: #62768A;--neutral-grey: #9D9D9D;--neutral-dark: #2E4151;--neutral-darker: #202F3C;--neutral-darkest: #101C26;--brandcolor-main: #118E34;--brandcolor-softest: #DEF8E2;--brandcolor-soft: #26C45B;--brandcolor-medium: #0B662A;--brandcolor-darkest: #033B12;--success: #00DC7D;--success-soft: #00DC7D;--success-dark: #1C904A;--danger: #E2222A;--danger-dark: #B7151B;--warning: #FF9900;--info: #2981FD;--link-soft: #2981FD;--link-dark: #0351C1;--red-500: #FDE7E8;--red-600: #DD6764;--red-700: #CE0000;--red-800: #9B0000;--red-900: #670103;--orange-400: #FFFAF3;--orange-500: #FDEDD8;--orange-600: #F2B177;--orange-700: #E49145;--orange-800: #B75E13;--orange-900: #773F0B;--yellow-400: #FFF4D2;--yellow-500: #FEE69F;--yellow-600: #FED871;--yellow-700: #F3C148;--yellow-800: #BF921C;--yellow-900: #7E610B;--green-400: #E2F8D9;--green-500: #B2E59C;--green-600: #93C57D;--green-700: #6AA758;--green-800: #397428;--green-900: #294D12;--cyan-400: #DDECED;--cyan-500: #A2C4C7;--cyan-600: #79A4B4;--cyan-700: #47818D;--cyan-800: #105057;--cyan-900: #0B333A;--blue-400: #DEECFF;--blue-500: #C6DBF8;--blue-600: #A2C4F1;--blue-700: #699EEB;--blue-800: #3978D7;--blue-900: #1555CC;--purple-400: #EFE6FB;--purple-500: #BA96EE;--purple-600: #9E69E9;--purple-700: #5300CF;--purple-800: #4100CA;--purple-900: #1800C2;--pink-400: #F9E4EE;--pink-500: #F0BCD5;--pink-600: #E2679E;--pink-700: #B32867;--pink-800: #9D2661;--pink-900: #772155;--grey-200: #F8F8F8;--grey-300: #EDEDED;--grey-400: #C9C9C9;--grey-500: #B4B4B4;--grey-600: #999997;--grey-700: #666667;--grey-800: #434345;--grey-900: #020202;--color-light: #FEFEFE;--color-dark: #101C26;--color-brand: #118E34;--color-brand-softest: #DEF8E2;--color-brand-soft: #26C45B;--color-brand-medium: #0B662A;--color-brand-darkest: #033B12;--color-background-dashboard: #FAFAFC;--color-background-card: #FEFEFE;--color-background: #FAFAFC;--color-background-hover: #E6EBF2;--color-surface: #FEFEFE;--color-surface-hover: #E6EBF2;--color-on-background: #2E4151;--color-on-background-hover: #202F3C;--color-on-surface: #101C26;--color-on-surface-hover: #2E4151;--color-on-brand: #FFFFFF;--color-on-brand-hover: #FFFFFF;--color-sidebar: #118E34;--color-on-sidebar: #FFFFFF;--color-sidebar-hover: #0B662A;--color-on-sidebar-hover: #FFFFFF;--color-danger: #E2222A;--color-on-danger: #FFFFFF;--color-danger-dark: #B7151B;--color-success: #00DC7D;--color-on-success: #FFFFFF;--color-success-dark: #1C904A;--color-warning: #FF9900;--color-on-warning: #101C26;--color-link: #2981FD;--color-link-dark: #0351C1;--color-neutral-soft: #F4F7FA;--color-neutral-lightest: #E6EBF2;--color-neutral-lighter: #C3CED8;--color-neutral-light: #9FADBA;--color-neutral-medium: #62768A;--color-neutral-dark: #2E4151;--color-neutral-darker: #202F3C;--color-neutral-darkest: #101C26;--brackgrounds-dashboards: #FAFAFC;--brackgrounds-card: #FEFEFE;--background-soft: #FAFAFC;--background-dark-softest: #3A3939;--background-dark-softin: #323131;--background-dark-soft: #2D2C2C;--background-dark-medium: #292828;--background-dark-hard: #1E1E1E;--background-dark-hardest: #19191C;--hover-soft: #E6EBF2;--hover-medium: #C3CED8;--hover-dark: #C8C8C8;--hover-dark-soft: #434343;--hover-dark-medium: #353434;--hover-dark-hard: #292828;--font-family-primary: Roboto, sans-serif;--font-family-mono: monospace;--font-family-sans: Roboto, sans-serif;--font-size-h1: 56px;--font-size-h2: 48px;--font-size-h3: 40px;--font-size-h4: 32px;--font-size-h5: 24px;--font-size-h6: 20px;--font-size-subtitle-regular: 32px;--font-size-subtitle-medium: 24px;--font-size-body-xl: 18px;--font-size-body-lg: 16px;--font-size-body-md: 14px;--font-size-body-sm: 12px;--font-size-caption: 10px;--line-height-h1: 150%;--line-height-h2: 150%;--line-height-h3: 40px;--line-height-h4: 32px;--line-height-h5: 24px;--line-height-subtitle-regular: 24px;--line-height-subtitle-medium: 24px;--line-height-body-xl: 24px;--line-height-body-lg: 24px;--line-height-body-md: 20px;--line-height-body-sm: 16px;--line-height-caption: 16px;--line-height-tight: 120%;--line-height-normal: 150%;--line-height-relaxed: 180%;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-5: 20px;--spacing-6: 24px;--spacing-8: 32px;--spacing-10: 40px;--spacing-12: 48px;--spacing-16: 64px;--spacing-20: 80px;--spacing-24: 96px;--spacing-32: 128px;--spacing-40: 160px;--spacing-48: 192px;--spacing-56: 224px;--spacing-64: 256px;--spacing-72: 288px;--spacing-80: 320px;--spacing-96: 384px;--radius-4: 4px;--radius-8: 8px;--radius-12: 12px;--radius-16: 16px;--radius-none: 0;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(124, 124, 131, .04);--shadow-sm: 0 1px 3px 0 rgba(124, 124, 131, .08), 0 1px 2px 0 rgba(124, 124, 131, .04);--shadow-md: 0 2px 4px -2px rgba(124, 124, 131, .08), 0 4px 8px -2px rgba(124, 124, 131, .12);--shadow-lg: 0 4px 6px -2px rgba(124, 124, 131, .04), 0 12px 16px -4px rgba(124, 124, 131, .08);--shadow-dialog: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12)}.tw-m-5{margin:1.25rem}.tw-my-10{margin-top:2.5rem;margin-bottom:2.5rem}.tw-my-6{margin-top:1.5rem;margin-bottom:1.5rem}.tw-mb-2{margin-bottom:.5rem}.tw-mb-4{margin-bottom:1rem}.tw-mb-6{margin-bottom:1.5rem}.tw-mt-10{margin-top:2.5rem}.tw-mt-2{margin-top:.5rem}.tw-mt-4{margin-top:1rem}.tw-mt-5{margin-top:1.25rem}.tw-flex{display:flex}.tw-h-1\.5{height:.375rem}.tw-h-2\.5{height:.625rem}.tw-h-3\.5{height:.875rem}.tw-h-\[120px\]{height:120px}.tw-h-\[200px\]{height:200px}.tw-h-\[20vh\]{height:20vh}.tw-h-auto{height:auto}.tw-w-\[150px\]{width:150px}.tw-w-\[200px\]{width:200px}.tw-w-\[350px\]{width:350px}.tw-flex-1{flex:1 1 0%}.tw-list-inside{list-style-position:inside}.tw-list-disc{list-style-type:disc}.tw-flex-col{flex-direction:column}.tw-items-start{align-items:flex-start}.tw-items-center{align-items:center}.tw-items-baseline{align-items:baseline}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-10{gap:2.5rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-4{gap:1rem}.tw-gap-40{gap:10rem}.tw-gap-5{gap:1.25rem}.tw-gap-\[8px\]{gap:8px}.tw-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.tw-overflow-hidden{overflow:hidden}.tw-whitespace-nowrap{white-space:nowrap}.tw-rounded{border-radius:.25rem}.tw-rounded-lg{border-radius:.5rem}.tw-rounded-xl{border-radius:.75rem}.tw-border{border-width:1px}.tw-border-amber-200{--tw-border-opacity: 1;border-color:rgb(253 230 138 / var(--tw-border-opacity, 1))}.tw-border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.tw-border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.tw-border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.tw-bg-\[var\(--blue-700\)\]{background-color:var(--blue-700)}.tw-bg-\[var\(--brandcolor-main\)\]{background-color:var(--brandcolor-main)}.tw-bg-\[var\(--green-700\)\]{background-color:var(--green-700)}.tw-bg-\[var\(--neutral-grey\)\]{background-color:var(--neutral-grey)}.tw-bg-\[var\(--red-700\)\]{background-color:var(--red-700)}.tw-bg-amber-100{--tw-bg-opacity: 1;background-color:rgb(254 243 199 / var(--tw-bg-opacity, 1))}.tw-bg-amber-50{--tw-bg-opacity: 1;background-color:rgb(255 251 235 / var(--tw-bg-opacity, 1))}.tw-bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.tw-bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.tw-bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.tw-bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.tw-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.tw-p-4{padding:1rem}.tw-p-6{padding:1.5rem}.tw-p-\[16px\]{padding:16px}.tw-px-1{padding-left:.25rem;padding-right:.25rem}.tw-text-right{text-align:right}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-font-semibold{font-weight:600}.tw-text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.tw-text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.tw-text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.tw-text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}

package/package.json

@@ -1,100 +1,100 @@
-{
-  "name": "greenole-design-system",
-  "version": "1.1.71",
-  "type": "module",
-  "main": "dist/greenole-design-system.cjs.js",
-  "module": "dist/greenole-design-system.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "description": "Componentes reutilizáveis grnl",
-  "keywords": [
-    "design-system",
-    "greenole",
-    "react",
-    "ui",
-    "components"
-  ],
-  "author": "Greenole",
-  "license": "MIT",
-  "scripts": {
-    "dev": "npm run generate:tokens && vite",
-    "build": "npm run generate:tokens && tsc && vite build && npm run build:tokens-css && npm run build:tailwind-config && npx tailwindcss -i ./src/index.css -o ./dist/greenole.css",
-    "build:tokens-css": "node --import tsx/esm scripts/build-tokens-css.js",
-    "build:tailwind-config": "node --import tsx/esm scripts/build-tailwind-config.js",
-    "generate:tokens": "tsx scripts/generate-tokens-css.js",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "storybook": "npm run generate:tokens && storybook dev -p 6006",
-    "build-storybook": "npm run generate:tokens && storybook build",
-    "deploy-storybook": "storybook-to-ghpages",
-    "release": "npm run build && npm publish && npm run build-storybook && npm run deploy-storybook",
-    "create-component": "node scripts/create-component.js",
-    "commit": "node scripts/commit.js"
-  },
-  "peerDependencies": {
-    "@react-google-maps/api": "^2.20.7",
-    "i18next": "^25.4.1",
-    "react": ">=18.2.0 <20.0.0",
-    "react-dom": ">=18.2.0 <20.0.0",
-    "react-i18next": "^15.4.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.5",
-    "@eslint/js": "^9.21.0",
-    "@react-google-maps/api": "^2.20.7",
-    "@storybook/addon-docs": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-onboarding": "^8.6.4",
-    "@storybook/addon-themes": "^8.6.10",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/builder-vite": "^8.6.4",
-    "@storybook/experimental-addon-test": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.4",
-    "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/test": "^8.6.4",
-    "@tanstack/react-form": "^1.20.0",
-    "@tanstack/react-query": "^5.87.4",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/styled-components": "^5.1.34",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.0.8",
-    "@vitest/coverage-v8": "^3.0.8",
-    "autoprefixer": "^10.4.21",
-    "chalk": "^5.6.0",
-    "cross-env": "^10.0.0",
-    "eslint": "^9.21.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-storybook": "^0.11.4",
-    "globals": "^15.15.0",
-    "playwright": "^1.51.0",
-    "postcss": "^8.5.3",
-    "prop-types": "^15.8.1",
-    "storybook": "^8.6.4",
-    "tailwindcss": "^3.4.17",
-    "tsx": "^4.20.6",
-    "vite": "^6.2.0",
-    "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.8"
-  },
-  "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@phosphor-icons/react": "^2.1.10",
-    "clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
-    "framer-motion": "^12.23.26",
-    "i18next-http-backend": "^3.0.2",
-    "lucide-react": "^0.523.0",
-    "styled-components": "^6.1.19",
-    "use-debounce": "^10.0.6"
-  }
-}
+{
+  "name": "greenole-design-system",
+  "version": "1.1.72",
+  "type": "module",
+  "main": "dist/greenole-design-system.cjs.js",
+  "module": "dist/greenole-design-system.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Componentes reutilizáveis grnl",
+  "keywords": [
+    "design-system",
+    "greenole",
+    "react",
+    "ui",
+    "components"
+  ],
+  "author": "Greenole",
+  "license": "MIT",
+  "scripts": {
+    "dev": "npm run generate:tokens && vite",
+    "build": "npm run generate:tokens && tsc && vite build && npm run build:tokens-css && npm run build:tailwind-config && npx tailwindcss -i ./src/index.css -o ./dist/greenole.css",
+    "build:tokens-css": "node --import tsx/esm scripts/build-tokens-css.js",
+    "build:tailwind-config": "node --import tsx/esm scripts/build-tailwind-config.js",
+    "generate:tokens": "tsx scripts/generate-tokens-css.js",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "npm run generate:tokens && storybook dev -p 6006",
+    "build-storybook": "npm run generate:tokens && storybook build",
+    "deploy-storybook": "storybook-to-ghpages",
+    "release": "npm run build && npm publish && npm run build-storybook && npm run deploy-storybook",
+    "create-component": "node scripts/create-component.js",
+    "commit": "node scripts/commit.js"
+  },
+  "peerDependencies": {
+    "@react-google-maps/api": "^2.20.7",
+    "i18next": "^25.4.1",
+    "react": ">=18.2.0 <20.0.0",
+    "react-dom": ">=18.2.0 <20.0.0",
+    "react-i18next": "^15.4.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.5",
+    "@eslint/js": "^9.21.0",
+    "@react-google-maps/api": "^2.20.7",
+    "@storybook/addon-docs": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/addon-themes": "^8.6.10",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/builder-vite": "^8.6.4",
+    "@storybook/experimental-addon-test": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/test": "^8.6.4",
+    "@tanstack/react-form": "^1.20.0",
+    "@tanstack/react-query": "^5.87.4",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/styled-components": "^5.1.34",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.8",
+    "@vitest/coverage-v8": "^3.0.8",
+    "autoprefixer": "^10.4.21",
+    "chalk": "^5.6.0",
+    "cross-env": "^10.0.0",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.11.4",
+    "globals": "^15.15.0",
+    "playwright": "^1.51.0",
+    "postcss": "^8.5.3",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.6.4",
+    "tailwindcss": "^3.4.17",
+    "tsx": "^4.20.6",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.0.8"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@phosphor-icons/react": "^2.1.10",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "framer-motion": "^12.23.26",
+    "i18next-http-backend": "^3.0.2",
+    "lucide-react": "^0.523.0",
+    "styled-components": "^6.1.19",
+    "use-debounce": "^10.0.6"
+  }
+}