xertica-ui 1.2.1 → 1.2.3

package/bin/cli.ts

@@ -287,6 +287,62 @@ program
             componentsToUpdate = response.selected;
         }
 
+
+
+        // --- Theme Update Logic ---
+        // Ask if user wants to update theme
+        const themeResponse = await prompts({
+            type: 'confirm',
+            name: 'updateTheme',
+            message: 'Do you want to update/change the project theme?',
+            initial: false
+        });
+
+        if (themeResponse.updateTheme) {
+            const themeSelection = await prompts({
+                type: 'select',
+                name: 'theme',
+                message: 'Select the new color theme:',
+                choices: colorThemes.map(t => ({
+                    title: t.name,
+                    description: t.description,
+                    value: t.id
+                })),
+                initial: 0
+            });
+
+            if (themeSelection.theme) {
+                const spinnerTheme = ora('Updating theme...').start();
+                // 1. Update React Context
+                const contextPath = path.join(targetDir, 'contexts', 'BrandColorsContext.tsx');
+                if (await fs.pathExists(contextPath)) {
+                    let content = await fs.readFile(contextPath, 'utf8');
+                    // Replace existing default. We can try to find any string like "return saved || '...';"
+                    // The regex needs to be robust to catch whatever is there currently.
+                    // It might be 'xertica-original' or previously set 'rose', etc.
+                    // Regex: /return saved \|\| '([a-zA-Z0-9-]+)';/
+                    content = content.replace(
+                        /return saved \|\| '([a-zA-Z0-9-]+)';/,
+                        `return saved || '${themeSelection.theme}';`
+                    );
+                    await fs.writeFile(contextPath, content);
+                } else {
+                    spinnerTheme.warn('BrandColorsContext.tsx not found. Skipping context update.');
+                }
+
+                // 2. Update styles/xertica/tokens.css
+                const tokensPath = path.join(targetDir, 'styles', 'xertica', 'tokens.css');
+                const selectedTheme = colorThemes.find(t => t.id === themeSelection.theme);
+
+                if (selectedTheme) {
+                    await fs.ensureDir(path.dirname(tokensPath));
+                    const newTokensCss = generateTokensCss(selectedTheme);
+                    await fs.writeFile(tokensPath, newTokensCss);
+                }
+                spinnerTheme.succeed('Theme updated successfully!');
+            }
+        }
+
         const spinner = ora('Updating components...').start();
 
         try {

package/dist/cli.js

@@ -713,6 +713,47 @@ program.command("update").description("Update components in your project").argum
     if (!response.selected) return;
     componentsToUpdate = response.selected;
   }
+  const themeResponse = await prompts({
+    type: "confirm",
+    name: "updateTheme",
+    message: "Do you want to update/change the project theme?",
+    initial: false
+  });
+  if (themeResponse.updateTheme) {
+    const themeSelection = await prompts({
+      type: "select",
+      name: "theme",
+      message: "Select the new color theme:",
+      choices: colorThemes.map((t) => ({
+        title: t.name,
+        description: t.description,
+        value: t.id
+      })),
+      initial: 0
+    });
+    if (themeSelection.theme) {
+      const spinnerTheme = ora("Updating theme...").start();
+      const contextPath = path.join(targetDir, "contexts", "BrandColorsContext.tsx");
+      if (await fs.pathExists(contextPath)) {
+        let content = await fs.readFile(contextPath, "utf8");
+        content = content.replace(
+          /return saved \|\| '([a-zA-Z0-9-]+)';/,
+          `return saved || '${themeSelection.theme}';`
+        );
+        await fs.writeFile(contextPath, content);
+      } else {
+        spinnerTheme.warn("BrandColorsContext.tsx not found. Skipping context update.");
+      }
+      const tokensPath = path.join(targetDir, "styles", "xertica", "tokens.css");
+      const selectedTheme = colorThemes.find((t) => t.id === themeSelection.theme);
+      if (selectedTheme) {
+        await fs.ensureDir(path.dirname(tokensPath));
+        const newTokensCss = generateTokensCss(selectedTheme);
+        await fs.writeFile(tokensPath, newTokensCss);
+      }
+      spinnerTheme.succeed("Theme updated successfully!");
+    }
+  }
   const spinner = ora("Updating components...").start();
   try {
     let updatedCount = 0;

package/index.css

@@ -1,8 +1,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap");
+@import './styles/xertica/tokens.css';
+
 /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
 @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 {
+
+    *,
+    :before,
+    :after,
+    ::backdrop {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -68,7 +74,9 @@
 }
 
 @layer theme {
-  :root, :host {
+
+  :root,
+  :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --color-red-500: oklch(.637 .237 25.331);
@@ -98,8 +106,8 @@
     --font-weight-extrabold: var(--font-weight-extrabold);
     --leading-tight: 1.25;
     --leading-relaxed: 1.625;
-    --radius-sm: calc(var(--radius)  - 2px);
-    --radius-lg: calc(var(--radius)  + 6px);
+    --radius-sm: calc(var(--radius) - 2px);
+    --radius-lg: calc(var(--radius) + 6px);
     --radius-2xl: 1rem;
     --drop-shadow-sm: 0 1px 2px #00000026;
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
@@ -129,7 +137,11 @@
 }
 
 @layer base {
-  *, :after, :before, ::backdrop {
+
+  *,
+  :after,
+  :before,
+  ::backdrop {
     box-sizing: border-box;
     border: 0 solid;
     margin: 0;
@@ -143,7 +155,8 @@
     padding: 0;
   }
 
-  html, :host {
+  html,
+  :host {
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
     line-height: 1.5;
@@ -168,7 +181,12 @@
     text-decoration: underline dotted;
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-size: inherit;
     font-weight: inherit;
   }
@@ -180,11 +198,15 @@
     text-decoration: inherit;
   }
 
-  b, strong {
+  b,
+  strong {
     font-weight: bolder;
   }
 
-  code, kbd, samp, pre {
+  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);
@@ -195,7 +217,8 @@
     font-size: 80%;
   }
 
-  sub, sup {
+  sub,
+  sup {
     vertical-align: baseline;
     font-size: 75%;
     line-height: 0;
@@ -228,21 +251,35 @@
     display: list-item;
   }
 
-  ol, ul, menu {
+  ol,
+  ul,
+  menu {
     list-style: none;
   }
 
-  img, svg, video, canvas, audio, iframe, embed, object {
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
     vertical-align: middle;
     display: block;
   }
 
-  img, video {
+  img,
+  video {
     max-width: 100%;
     height: auto;
   }
 
-  button, input, select, optgroup, textarea {
+  button,
+  input,
+  select,
+  optgroup,
+  textarea {
     font: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
@@ -348,7 +385,8 @@
     box-shadow: none;
   }
 
-  button, input:where([type="button"], [type="reset"], [type="submit"]) {
+  button,
+  input:where([type="button"], [type="reset"], [type="submit"]) {
     appearance: button;
   }
 
@@ -559,31 +597,31 @@
     width: 100%;
   }
 
-  @media (width >= 40rem) {
+  @media (width >=40rem) {
     .container {
       max-width: 40rem;
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .container {
       max-width: 48rem;
     }
   }
 
-  @media (width >= 64rem) {
+  @media (width >=64rem) {
     .container {
       max-width: 64rem;
     }
   }
 
-  @media (width >= 80rem) {
+  @media (width >=80rem) {
     .container {
       max-width: 80rem;
     }
   }
 
-  @media (width >= 96rem) {
+  @media (width >=96rem) {
     .container {
       max-width: 96rem;
     }
@@ -1039,7 +1077,8 @@
     flex: 1;
   }
 
-  .flex-shrink-0, .shrink-0 {
+  .flex-shrink-0,
+  .shrink-0 {
     flex-shrink: 0;
   }
 
@@ -1338,7 +1377,7 @@
   }
 
   .rounded-lg {
-    border-radius: calc(var(--radius)  + 6px);
+    border-radius: calc(var(--radius) + 6px);
   }
 
   .rounded-md {
@@ -1346,11 +1385,11 @@
   }
 
   .rounded-sm {
-    border-radius: calc(var(--radius)  - 2px);
+    border-radius: calc(var(--radius) - 2px);
   }
 
   .rounded-xl {
-    border-radius: calc(var(--radius)  + 12px);
+    border-radius: calc(var(--radius) + 12px);
   }
 
   .border {
@@ -3095,23 +3134,23 @@
     grid-template-columns: 1fr auto;
   }
 
-  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) {
+  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(> svg) {
     grid-template-columns: calc(var(--spacing) * 4) 1fr;
   }
 
-  .has-\[\>svg\]\:gap-x-3:has( > svg) {
+  .has-\[\>svg\]\:gap-x-3:has(> svg) {
     column-gap: calc(var(--spacing) * 3);
   }
 
-  .has-\[\>svg\]\:px-2\.5:has( > svg) {
+  .has-\[\>svg\]\:px-2\.5:has(> svg) {
     padding-inline: calc(var(--spacing) * 2.5);
   }
 
-  .has-\[\>svg\]\:px-3:has( > svg) {
+  .has-\[\>svg\]\:px-3:has(> svg) {
     padding-inline: calc(var(--spacing) * 3);
   }
 
-  .has-\[\>svg\]\:px-4:has( > svg) {
+  .has-\[\>svg\]\:px-4:has(> svg) {
     padding-inline: calc(var(--spacing) * 4);
   }
 
@@ -3326,153 +3365,153 @@
     background-color: var(--muted);
   }
 
-  @media (width >= 40rem) {
+  @media (width >=40rem) {
     .sm\:flex {
       display: flex;
     }
   }
 
-  @media (width >= 40rem) {
+  @media (width >=40rem) {
     .sm\:p-4 {
       padding: calc(var(--spacing) * 4);
     }
   }
 
-  @media (width >= 40rem) {
+  @media (width >=40rem) {
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:fixed {
       position: fixed;
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:inset-y-0 {
       inset-block: calc(var(--spacing) * 0);
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:left-0 {
       left: calc(var(--spacing) * 0);
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:block {
       display: block;
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:hidden {
       display: none;
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:w-64 {
       width: calc(var(--spacing) * 64);
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:translate-x-0 {
       --tw-translate-x: calc(var(--spacing) * 0);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:p-6 {
       padding: calc(var(--spacing) * 6);
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:pr-20 {
       padding-right: calc(var(--spacing) * 20);
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:pr-\[420px\] {
       padding-right: 420px;
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:pl-20 {
       padding-left: calc(var(--spacing) * 20);
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:pl-64 {
       padding-left: calc(var(--spacing) * 64);
     }
   }
 
-  @media (width >= 48rem) {
+  @media (width >=48rem) {
     .md\:text-sm {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
 
-  @media (width >= 64rem) {
+  @media (width >=64rem) {
     .lg\:flex {
       display: flex;
     }
   }
 
-  @media (width >= 64rem) {
+  @media (width >=64rem) {
     .lg\:hidden {
       display: none;
     }
   }
 
-  @media (width >= 64rem) {
+  @media (width >=64rem) {
     .lg\:w-1\/2 {
       width: 50%;
     }
   }
 
-  @media (width >= 64rem) {
+  @media (width >=64rem) {
     .lg\:flex-1 {
       flex: 1;
     }
   }
 
-  @media (width >= 64rem) {
+  @media (width >=64rem) {
     .lg\:flex-none {
       flex: none;
     }
   }
 
-  @media (width >= 64rem) {
+  @media (width >=64rem) {
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
 
-  @media (width >= 64rem) {
+  @media (width >=64rem) {
     .lg\:px-8 {
       padding-inline: calc(var(--spacing) * 8);
     }
@@ -3633,71 +3672,71 @@
     padding-bottom: calc(var(--spacing) * 6);
   }
 
-  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
+  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role="checkbox"] {
     --tw-translate-y: 2px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .\[\&\>svg\]\:pointer-events-none > svg {
+  .\[\&\>svg\]\:pointer-events-none>svg {
     pointer-events: none;
   }
 
-  .\[\&\>svg\]\:size-3 > svg {
+  .\[\&\>svg\]\:size-3>svg {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
 
-  .\[\&\>svg\]\:size-5 > svg {
+  .\[\&\>svg\]\:size-5>svg {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
 
-  .\[\&\>svg\]\:translate-y-0\.5 > svg {
+  .\[\&\>svg\]\:translate-y-0\.5>svg {
     --tw-translate-y: calc(var(--spacing) * .5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .\[\&\>svg\]\:text-\[color\:var\(--chart-2\)\] > svg {
+  .\[\&\>svg\]\:text-\[color\:var\(--chart-2\)\]>svg {
     color: var(--chart-2);
   }
 
-  .\[\&\>svg\]\:text-\[color\:var\(--chart-3\)\] > svg {
+  .\[\&\>svg\]\:text-\[color\:var\(--chart-3\)\]>svg {
     color: var(--chart-3);
   }
 
-  .\[\&\>svg\]\:text-\[color\:var\(--chart-4\)\] > svg {
+  .\[\&\>svg\]\:text-\[color\:var\(--chart-4\)\]>svg {
     color: var(--chart-4);
   }
 
-  .\[\&\>svg\]\:text-\[color\:var\(--destructive\)\] > svg {
+  .\[\&\>svg\]\:text-\[color\:var\(--destructive\)\]>svg {
     color: var(--destructive);
   }
 
-  .\[\&\>svg\]\:text-\[color\:var\(--info\)\] > svg {
+  .\[\&\>svg\]\:text-\[color\:var\(--info\)\]>svg {
     color: var(--info);
   }
 
-  .\[\&\>svg\]\:text-\[color\:var\(--success\)\] > svg {
+  .\[\&\>svg\]\:text-\[color\:var\(--success\)\]>svg {
     color: var(--success);
   }
 
-  .\[\&\>svg\]\:text-\[color\:var\(--warning\)\] > svg {
+  .\[\&\>svg\]\:text-\[color\:var\(--warning\)\]>svg {
     color: var(--warning);
   }
 
-  .\[\&\>svg\]\:text-current > svg {
+  .\[\&\>svg\]\:text-current>svg {
     color: currentColor;
   }
 
-  .\[\&\>svg\]\:text-destructive > svg {
+  .\[\&\>svg\]\:text-destructive>svg {
     color: var(--destructive);
   }
 
-  .\[\&\>svg\]\:text-muted-foreground > svg {
+  .\[\&\>svg\]\:text-muted-foreground>svg {
     color: var(--muted-foreground);
   }
 
-  .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
+  .\[\&\>tr\]\:last\:border-b-0>tr:last-child {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0;
   }
@@ -3751,138 +3790,7 @@
   }
 }
 
-:root, :root[data-theme="default"] {
-  --xertica-primary: #2c275b;
-  --xertica-dark: #231d4f;
-  --background: #fff;
-  --foreground: #09090b;
-  --card: #fff;
-  --card-foreground: #09090b;
-  --popover: #fff;
-  --popover-foreground: #09090b;
-  --primary: var(--xertica-primary);
-  --primary-foreground: #fafafa;
-  --primary-light: #2c275b26;
-  --primary-light-foreground: #2c275b;
-  --secondary: #f4f4f5;
-  --secondary-foreground: #18181b;
-  --muted: #f4f4f5;
-  --muted-foreground: #71717a;
-  --accent: #f4f4f5;
-  --accent-foreground: #18181b;
-  --destructive: #ef4444;
-  --destructive-foreground: #fafafa;
-  --border: #e4e4e7;
-  --input: #f4f4f580;
-  --input-background: #f4f4f580;
-  --ring: #a1a1aa;
-  --sidebar: #2c275b;
-  --sidebar-foreground: #fafafa;
-  --sidebar-primary: #fff;
-  --sidebar-primary-foreground: #09090b;
-  --sidebar-accent: #f4f4f5;
-  --sidebar-accent-foreground: #18181b;
-  --sidebar-border: #413d6b;
-  --sidebar-ring: #a1a1aa;
-  --chart-1: #2c275b;
-  --chart-2: #059669;
-  --chart-3: #f59e0b;
-  --chart-4: #2563eb;
-  --chart-5: #ef4444;
-  --gradient-diagonal: linear-gradient(135deg, #fdb0f2 0%, #72cdfd 100%);
-  --radius: 6px;
-  --radius-button: 12px;
-  --radius-card: 12px;
-  --elevation-sm: 0px 0px 48px 0px #0000001a;
-  --font-size: 16px;
-  --text-h1: 2rem;
-  --text-h2: 1.75rem;
-  --text-h3: 1.5rem;
-  --text-h4: 1.25rem;
-  --text-base: 1rem;
-  --text-p: .875rem;
-  --text-label: .875rem;
-  --text-small: .875rem;
-  --text-xs: .75rem;
-  --text-muted: .875rem;
-  --text-stats: 2.25rem;
-  --text-table-head: 1.25rem;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-  --spacing-1: .25rem;
-  --spacing-2: .5rem;
-  --spacing-3: .75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-  --cell-size: 2.5rem;
-  --cell-radius: var(--radius);
-  --calendar-caption-size: 15px;
-  --calendar-weekday-size: 12px;
-  --calendar-day-size: 14px;
-  --toast-success-bg: #dcfce7;
-  --toast-success-border: #059669;
-  --toast-success-icon: #059669;
-  --toast-warning-bg: #fef3c7;
-  --toast-warning-border: #f59e0b;
-  --toast-warning-icon: #f59e0b;
-  --toast-info-bg: #dbeafe;
-  --toast-info-border: #2563eb;
-  --toast-info-icon: #2563eb;
-  --toast-error-bg: #fee2e2;
-  --toast-error-border: #ef4444;
-  --toast-error-icon: #ef4444;
-}
-
-:root[data-mode="dark"], .dark {
-  --xertica-primary: #2c275b;
-  --background: #050505;
-  --foreground: #fafafa;
-  --card: #141416;
-  --card-foreground: #fafafa;
-  --popover: #141416;
-  --popover-foreground: #fafafa;
-  --primary-foreground: #fafafa;
-  --primary-light: #2c275b26;
-  --primary-light-foreground: #2c275b;
-  --secondary: #27272a;
-  --secondary-foreground: #fafafa;
-  --muted: #27272a;
-  --muted-foreground: #a1a1aa;
-  --accent: #27272a;
-  --accent-foreground: #fafafa;
-  --destructive: #ef4444;
-  --destructive-foreground: #fafafa;
-  --border: #3f3f46;
-  --input: #27272a80;
-  --input-background: #27272a80;
-  --ring: #71717a;
-  --elevation-sm: 0px 0px 48px 0px #0000004d;
-  --sidebar-foreground: #fafafa;
-  --sidebar-primary: #fff;
-  --sidebar-primary-foreground: #09090b;
-  --sidebar-accent: #3f3f46;
-  --sidebar-accent-foreground: #fafafa;
-  --sidebar-border: #413d6b;
-  --sidebar-ring: #a1a1aa;
-  --gradient-diagonal: linear-gradient(135deg, #7b4a7a 0%, #3a5c7d 100%);
-  --toast-success-bg: #064e3b;
-  --toast-success-border: #22c55e;
-  --toast-success-icon: #22c55e;
-  --toast-warning-bg: #713f12;
-  --toast-warning-border: #fbbf24;
-  --toast-warning-icon: #fbbf24;
-  --toast-info-bg: #1e3a8a;
-  --toast-info-border: #60a5fa;
-  --toast-info-icon: #60a5fa;
-  --toast-error-bg: #7f1d1d;
-  --toast-error-border: #f87171;
-  --toast-error-icon: #f87171;
-}
+/* Colors are now managed by styles/xertica/tokens.css */
 
 [data-sonner-toast] {
   border-radius: var(--radius) !important;
@@ -3971,7 +3879,8 @@
   padding-bottom: var(--spacing-2) !important;
 }
 
-.gm-style .gm-style-iw-c .gm-style-iw-d .poi-info-window, .gm-style .gm-style-iw-c .gm-style-iw-d .transit-container {
+.gm-style .gm-style-iw-c .gm-style-iw-d .poi-info-window,
+.gm-style .gm-style-iw-c .gm-style-iw-d .transit-container {
   padding: var(--spacing-4) !important;
   padding-top: 0 !important;
 }
@@ -3991,7 +3900,7 @@
   background-color: var(--accent) !important;
 }
 
-.gm-style .gm-ui-hover-effect > span {
+.gm-style .gm-ui-hover-effect>span {
   background-color: var(--foreground) !important;
   width: 14px !important;
   height: 14px !important;
@@ -4009,34 +3918,41 @@
   font-family: Roboto, sans-serif !important;
 }
 
-.xertica-infowindow-content *, .gm-style .gm-style-iw-c * {
+.xertica-infowindow-content *,
+.gm-style .gm-style-iw-c * {
   font-family: Roboto, sans-serif !important;
 }
 
-[data-chat-message-container] .break-words img, [data-chat-message-container] .overflow-wrap-anywhere img {
+[data-chat-message-container] .break-words img,
+[data-chat-message-container] .overflow-wrap-anywhere img {
   max-width: 100%;
   height: auto;
 }
 
-[data-chat-message-container] .break-words pre, [data-chat-message-container] .overflow-wrap-anywhere pre {
+[data-chat-message-container] .break-words pre,
+[data-chat-message-container] .overflow-wrap-anywhere pre {
   white-space: pre-wrap;
   word-wrap: break-word;
   max-width: 100%;
   overflow-x: auto;
 }
 
-[data-chat-message-container] .break-words table, [data-chat-message-container] .overflow-wrap-anywhere table {
+[data-chat-message-container] .break-words table,
+[data-chat-message-container] .overflow-wrap-anywhere table {
   max-width: 100%;
   display: block;
   overflow-x: auto;
 }
 
-[data-chat-message-container] .break-words > *, [data-chat-message-container] .overflow-hidden > * {
+[data-chat-message-container] .break-words>*,
+[data-chat-message-container] .overflow-hidden>* {
   box-sizing: border-box;
   max-width: 100%;
 }
 
-[data-chat-message-container] audio, [data-chat-message-container] video, [data-chat-message-container] iframe {
+[data-chat-message-container] audio,
+[data-chat-message-container] video,
+[data-chat-message-container] iframe {
   width: 100%;
   max-width: 100%;
 }
@@ -4056,7 +3972,7 @@
   box-sizing: border-box;
 }
 
-[data-chat-message-container] > div {
+[data-chat-message-container]>div {
   max-width: 100%;
   overflow-x: hidden;
 }
@@ -4445,4 +4361,4 @@
     opacity: var(--tw-exit-opacity, 1);
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Xertica UI - Design System completo com componentes React e Tailwind CSS",
   "type": "module",
   "bin": "./dist/cli.js",