@elogroup-sereduc/portal-aluno-tour 1.0.8 → 1.0.9

package/README.md

@@ -39,12 +39,12 @@ function MyComponent() {
 
   const steps = [
     {
-      element: ".my-element",
+      element: "my-element", // Usa data-onboard="my-element"
       intro: "Este é o primeiro passo do tour",
       position: "bottom",
     },
     {
-      element: ".another-element",
+      element: ".another-element", // Seletor CSS também funciona
       intro: "Este é o segundo passo",
       position: "right",
     },
@@ -82,7 +82,11 @@ function MyComponent() {
 
 ### TourStep
 
-- `element: string` - Seletor CSS do elemento
+- `element: string` - Seletor CSS do elemento ou valor do atributo `data-onboard`
+  - Se começar com `.`, `#`, `[`, `:`, `>`, `+`, `~`, ou espaço: usa como seletor CSS
+  - Caso contrário: busca `[data-onboard="valor"]`
+  - Exemplo: `element: "student-card"` busca `[data-onboard="student-card"]`
+  - Exemplo: `element: ".my-class"` usa o seletor CSS `.my-class`
 - `intro: string` - Texto explicativo
 - `position?: "top" | "bottom" | "left" | "right"` - Posição da tooltip
 - `title?: string` - Título do passo (opcional)

package/dist/components/Tour.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/components/Tour.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,UAAU,CAAC;AAG/C;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,WAAe,EACf,OAAY,EACZ,MAAM,EACN,UAAU,GACX,EAAE,SAAS,kDAqmBX"}
+{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/components/Tour.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,UAAU,CAAC;AAG/C;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,WAAe,EACf,OAAY,EACZ,MAAM,EACN,UAAU,GACX,EAAE,SAAS,kDA8mBX"}

package/dist/components/Tour.js

@@ -258,6 +258,15 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             setTooltipPosition(null);
         }
     }, [enabled, steps.length, isVisible, initialStep]);
+    // Função auxiliar para buscar elemento por seletor CSS ou data-onboard
+    const findElement = useCallback((selector) => {
+        // Se o seletor começa com caracteres de seletor CSS (. # [ etc), usa diretamente
+        if (/^[.#\[:>+\s~]/.test(selector)) {
+            return document.querySelector(selector);
+        }
+        // Caso contrário, assume que é um valor de data-onboard
+        return document.querySelector(`[data-onboard="${selector}"]`);
+    }, []);
     // Destaca o elemento atual
     useEffect(() => {
         if (!isVisible || currentStep < 0 || currentStep >= steps.length) {
@@ -266,9 +275,9 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             return;
         }
         const step = steps[currentStep];
-        const element = document.querySelector(step.element);
+        const element = findElement(step.element);
         if (!element) {
-            console.warn(`Elemento não encontrado: ${step.element}`);
+            console.warn(`Elemento não encontrado: ${step.element}. Tentando buscar [data-onboard="${step.element}"]`);
             return;
         }
         setHighlightedElement(element);
@@ -302,7 +311,7 @@ export function Tour({ enabled, steps, initialStep = 0, options = {}, onExit, on
             window.removeEventListener("resize", handleResize);
             document.removeEventListener("scroll", handleScroll, true);
         };
-    }, [isVisible, currentStep, steps, calculateTooltipPosition]);
+    }, [isVisible, currentStep, steps, calculateTooltipPosition, findElement]);
     // Adiciona overlay e highlight ao elemento
     useEffect(() => {
         if (!highlightedElement) {

package/dist/types/index.d.ts

@@ -3,7 +3,9 @@
  */
 export interface TourStep {
     /**
-     * Seletor CSS do elemento a ser destacado
+     * Seletor CSS do elemento a ser destacado ou valor do atributo data-onboard
+     * - Se for um seletor CSS (começa com ., #, [, etc.), será usado diretamente
+     * - Caso contrário, será usado como valor do atributo data-onboard: [data-onboard="valor"]
      */
     element: string;
     /**

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAExD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAExD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elogroup-sereduc/portal-aluno-tour",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Componente de tour guiado customizado usando HeroUI para o Portal do Aluno",
   "type": "module",
   "main": "dist/index.js",
@@ -39,5 +39,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
-
+}

package/src/components/Tour.tsx

@@ -40,7 +40,7 @@ export function Tour({
     const rect = element.getBoundingClientRect();
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    
+
     // Tamanho estimado da tooltip
     const tooltipWidth = 384; // max-w-sm = 384px
     const tooltipHeight = 250; // altura estimada
@@ -51,10 +51,10 @@ export function Tour({
     let finalPosition = position;
 
     // Verifica se o elemento está visível na viewport
-    const isElementVisible = 
-      rect.top < viewportHeight && 
-      rect.bottom > 0 && 
-      rect.left < viewportWidth && 
+    const isElementVisible =
+      rect.top < viewportHeight &&
+      rect.bottom > 0 &&
+      rect.left < viewportWidth &&
       rect.right > 0;
 
     // Se o elemento não estiver visível, tenta posicionar próximo à borda mais próxima
@@ -92,7 +92,7 @@ export function Tour({
 
     // Determina a melhor posição baseado no espaço disponível
     let bestPosition: "top" | "bottom" | "left" | "right";
-    
+
     // Se position for "auto" ou não especificado, calcula automaticamente a melhor posição
     if (!position || position === "auto") {
       // Escolhe automaticamente a direção com mais espaço disponível
@@ -104,12 +104,12 @@ export function Tour({
     } else {
       // Posição específica foi fornecida - tenta usar ela primeiro
       // Verifica se a posição especificada tem espaço suficiente
-      const hasEnoughSpace = 
+      const hasEnoughSpace =
         (position === "top" && spaceAbove >= tooltipHeight + spacing + 8) ||
         (position === "bottom" && spaceBelow >= tooltipHeight + spacing + 8) ||
         (position === "left" && spaceLeft >= tooltipWidth + spacing + 8) ||
         (position === "right" && spaceRight >= tooltipWidth + spacing + 8);
-      
+
       if (hasEnoughSpace) {
         // Tem espaço suficiente, usa a posição especificada
         bestPosition = position as "top" | "bottom" | "left" | "right";
@@ -118,7 +118,7 @@ export function Tour({
         // Para posições verticais (top/bottom), compara entre elas
         if (position === "top" || position === "bottom") {
           bestPosition = spaceAbove > spaceBelow ? "top" : "bottom";
-        } 
+        }
         // Para posições horizontais (left/right), compara entre elas
         else if (position === "left" || position === "right") {
           bestPosition = spaceLeft > spaceRight ? "left" : "right";
@@ -168,7 +168,7 @@ export function Tour({
       const elementCenterX = rect.left + rect.width / 2;
       const minLeft = tooltipWidth / 2 + 8;
       const maxLeft = viewportWidth - tooltipWidth / 2 - 8;
-      
+
       // Mantém o mais próximo possível do centro do elemento
       if (elementCenterX < minLeft) {
         left = minLeft;
@@ -177,7 +177,7 @@ export function Tour({
       } else {
         left = elementCenterX; // Mantém centralizado no elemento
       }
-      
+
       // Verifica espaço vertical e ajusta posição se necessário
       if (finalPosition === "bottom") {
         const spaceBelow = viewportHeight - rect.bottom;
@@ -204,14 +204,14 @@ export function Tour({
           }
         }
       }
-    } 
+    }
     // Ajusta verticalmente para tooltips left/right - mantém próximo ao elemento
     else if (finalPosition === "left" || finalPosition === "right") {
       // Centraliza no elemento verticalmente
       const elementCenterY = rect.top + rect.height / 2;
       const minTop = tooltipHeight / 2 + 8;
       const maxTop = viewportHeight - tooltipHeight / 2 - 8;
-      
+
       // Mantém o mais próximo possível do centro do elemento
       if (elementCenterY < minTop) {
         top = minTop;
@@ -220,7 +220,7 @@ export function Tour({
       } else {
         top = elementCenterY; // Mantém centralizado no elemento
       }
-      
+
       // Verifica espaço horizontal e ajusta posição se necessário
       if (finalPosition === "left") {
         const spaceLeft = rect.left;
@@ -274,6 +274,16 @@ export function Tour({
     }
   }, [enabled, steps.length, isVisible, initialStep]);
 
+  // Função auxiliar para buscar elemento por seletor CSS ou data-onboard
+  const findElement = useCallback((selector: string): HTMLElement | null => {
+    // Se o seletor começa com caracteres de seletor CSS (. # [ etc), usa diretamente
+    if (/^[.#\[:>+\s~]/.test(selector)) {
+      return document.querySelector(selector) as HTMLElement;
+    }
+    // Caso contrário, assume que é um valor de data-onboard
+    return document.querySelector(`[data-onboard="${selector}"]`) as HTMLElement;
+  }, []);
+
   // Destaca o elemento atual
   useEffect(() => {
     if (!isVisible || currentStep < 0 || currentStep >= steps.length) {
@@ -283,10 +293,10 @@ export function Tour({
     }
 
     const step = steps[currentStep];
-    const element = document.querySelector(step.element) as HTMLElement;
+    const element = findElement(step.element);
 
     if (!element) {
-      console.warn(`Elemento não encontrado: ${step.element}`);
+      console.warn(`Elemento não encontrado: ${step.element}. Tentando buscar [data-onboard="${step.element}"]`);
       return;
     }
 
@@ -328,7 +338,7 @@ export function Tour({
       window.removeEventListener("resize", handleResize);
       document.removeEventListener("scroll", handleScroll, true);
     };
-  }, [isVisible, currentStep, steps, calculateTooltipPosition]);
+  }, [isVisible, currentStep, steps, calculateTooltipPosition, findElement]);
 
   // Adiciona overlay e highlight ao elemento
   useEffect(() => {
@@ -525,11 +535,10 @@ export function Tour({
                   <button
                     key={index}
                     onClick={() => setCurrentStep(index)}
-                    className={`tour:w-2 tour:h-2 tour:rounded-full tour:transition-all ${
-                      index === currentStep
+                    className={`tour:w-2 tour:h-2 tour:rounded-full tour:transition-all ${index === currentStep
                         ? "tour:bg-brand-primary tour:w-6"
                         : "tour:bg-gray-300 tour:hover:bg-gray-400"
-                    }`}
+                      }`}
                     aria-label={`Ir para passo ${index + 1}`}
                   />
                 ))}

package/src/types/index.ts

@@ -4,7 +4,9 @@
 
 export interface TourStep {
   /**
-   * Seletor CSS do elemento a ser destacado
+   * Seletor CSS do elemento a ser destacado ou valor do atributo data-onboard
+   * - Se for um seletor CSS (começa com ., #, [, etc.), será usado diretamente
+   * - Caso contrário, será usado como valor do atributo data-onboard: [data-onboard="valor"]
    */
   element: string;
 

package/dist/tour.css

@@ -1,566 +0,0 @@
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --tour-color-gray-100: oklch(96.7% 0.003 264.542);
-    --tour-color-gray-200: oklch(92.8% 0.006 264.531);
-    --tour-color-gray-300: oklch(87.2% 0.01 258.338);
-    --tour-color-gray-400: oklch(70.7% 0.022 261.325);
-    --tour-color-gray-500: oklch(55.1% 0.027 264.364);
-    --tour-color-gray-700: oklch(37.3% 0.034 259.733);
-    --tour-color-gray-900: oklch(21% 0.034 264.665);
-    --tour-color-white: #fff;
-    --tour-spacing: 0.25rem;
-    --tour-container-sm: 24rem;
-    --tour-text-xs: 0.75rem;
-    --tour-text-xs--line-height: calc(1 / 0.75);
-    --tour-text-lg: 1.125rem;
-    --tour-text-lg--line-height: calc(1.75 / 1.125);
-    --tour-font-weight-semibold: 600;
-    --tour-radius-lg: 0.5rem;
-  }
-}
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-  html, :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-    font-feature-settings: normal;
-    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;
-    text-decoration: inherit;
-  }
-  b, strong {
-    font-weight: bolder;
-  }
-  code, kbd, samp, pre {
-    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace), Fira Code, Fira Mono, Courier New, monospace;
-    font-feature-settings: normal;
-    font-variation-settings: normal;
-    font-size: 1em;
-  }
-  small {
-    font-size: 80%;
-  }
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.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 {
-    display: block;
-    vertical-align: middle;
-  }
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-  button, input, select, optgroup, textarea, ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    border-radius: 0;
-    background-color: transparent;
-    opacity: 1;
-  }
-  :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)) {
-        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, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-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"]), ::file-selector-button {
-    appearance: button;
-  }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [hidden]:where(:not([hidden="until-found"])) {
-    display: none !important;
-  }
-}
-@layer utilities {
-  .tour\:absolute {
-    position: absolute;
-  }
-  .tour\:relative {
-    position: relative;
-  }
-  .tour\:top-2 {
-    top: calc(var(--tour-spacing) * 2);
-  }
-  .tour\:right-2 {
-    right: calc(var(--tour-spacing) * 2);
-  }
-  .tour\:z-10 {
-    z-index: 10;
-  }
-  .tour\:mt-1 {
-    margin-top: calc(var(--tour-spacing) * 1);
-  }
-  .tour\:mb-2 {
-    margin-bottom: calc(var(--tour-spacing) * 2);
-  }
-  .tour\:mb-4 {
-    margin-bottom: calc(var(--tour-spacing) * 4);
-  }
-  .tour\:flex {
-    display: flex;
-  }
-  .tour\:h-0 {
-    height: calc(var(--tour-spacing) * 0);
-  }
-  .tour\:h-2 {
-    height: calc(var(--tour-spacing) * 2);
-  }
-  .tour\:h-4 {
-    height: calc(var(--tour-spacing) * 4);
-  }
-  .tour\:h-5 {
-    height: calc(var(--tour-spacing) * 5);
-  }
-  .tour\:w-0 {
-    width: calc(var(--tour-spacing) * 0);
-  }
-  .tour\:w-2 {
-    width: calc(var(--tour-spacing) * 2);
-  }
-  .tour\:w-4 {
-    width: calc(var(--tour-spacing) * 4);
-  }
-  .tour\:w-5 {
-    width: calc(var(--tour-spacing) * 5);
-  }
-  .tour\:w-6 {
-    width: calc(var(--tour-spacing) * 6);
-  }
-  .tour\:w-full {
-    width: 100%;
-  }
-  .tour\:max-w-sm {
-    max-width: var(--tour-container-sm);
-  }
-  .tour\:items-center {
-    align-items: center;
-  }
-  .tour\:justify-between {
-    justify-content: space-between;
-  }
-  .tour\:justify-center {
-    justify-content: center;
-  }
-  .tour\:gap-1 {
-    gap: calc(var(--tour-spacing) * 1);
-  }
-  .tour\:gap-2 {
-    gap: calc(var(--tour-spacing) * 2);
-  }
-  .tour\:rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
-  .tour\:rounded-lg {
-    border-radius: var(--tour-radius-lg);
-  }
-  .tour\:border-8 {
-    border-style: var(--tw-border-style);
-    border-width: 8px;
-  }
-  .tour\:border-transparent {
-    border-color: transparent;
-  }
-  .tour\:bg-brand-primary {
-    background-color: var(--brand-primary);
-  }
-  .tour\:bg-gray-200 {
-    background-color: var(--tour-color-gray-200);
-  }
-  .tour\:bg-gray-300 {
-    background-color: var(--tour-color-gray-300);
-  }
-  .tour\:bg-white {
-    background-color: var(--tour-color-white);
-  }
-  .tour\:p-1 {
-    padding: calc(var(--tour-spacing) * 1);
-  }
-  .tour\:p-6 {
-    padding: calc(var(--tour-spacing) * 6);
-  }
-  .tour\:pr-6 {
-    padding-right: calc(var(--tour-spacing) * 6);
-  }
-  .tour\:text-center {
-    text-align: center;
-  }
-  .tour\:text-lg {
-    font-size: var(--tour-text-lg);
-    line-height: var(--tw-leading, var(--tour-text-lg--line-height));
-  }
-  .tour\:text-xs {
-    font-size: var(--tour-text-xs);
-    line-height: var(--tw-leading, var(--tour-text-xs--line-height));
-  }
-  .tour\:font-semibold {
-    --tw-font-weight: var(--tour-font-weight-semibold);
-    font-weight: var(--tour-font-weight-semibold);
-  }
-  .tour\:text-gray-500 {
-    color: var(--tour-color-gray-500);
-  }
-  .tour\:text-gray-700 {
-    color: var(--tour-color-gray-700);
-  }
-  .tour\:text-gray-900 {
-    color: var(--tour-color-gray-900);
-  }
-  .tour\:shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .tour\:transition-all {
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .tour\:transition-colors {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .tour\:duration-300 {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
-  .tour\:hover\:bg-gray-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--tour-color-gray-100);
-      }
-    }
-  }
-  .tour\:hover\:bg-gray-400 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--tour-color-gray-400);
-      }
-    }
-  }
-}
-@layer base {
-  :root, [data-theme] {
-    color: hsl(var(--heroui-foreground));
-    background-color: hsl(var(--heroui-background));
-  }
-}
-@layer base {
-  :root, [data-theme=light] {
-    color-scheme: light;
-    --heroui-background: 0 0% 100%;
-    --heroui-foreground-50: 0 0% 98.04%;
-    --heroui-foreground-100: 240 4.76% 95.88%;
-    --heroui-foreground-200: 240 5.88% 90%;
-    --heroui-foreground-300: 240 4.88% 83.92%;
-    --heroui-foreground-400: 240 5.03% 64.9%;
-    --heroui-foreground-500: 240 3.83% 46.08%;
-    --heroui-foreground-600: 240 5.2% 33.92%;
-    --heroui-foreground-700: 240 5.26% 26.08%;
-    --heroui-foreground-800: 240 3.7% 15.88%;
-    --heroui-foreground-900: 240 5.88% 10%;
-    --heroui-foreground: 201.81999999999994 24.44% 8.82%;
-    --heroui-divider: 0 0% 6.67%;
-    --heroui-focus: 212.01999999999998 100% 46.67%;
-    --heroui-overlay: 0 0% 0%;
-    --heroui-content1: 0 0% 100%;
-    --heroui-content1-foreground: 201.81999999999994 24.44% 8.82%;
-    --heroui-content2: 240 4.76% 95.88%;
-    --heroui-content2-foreground: 240 3.7% 15.88%;
-    --heroui-content3: 240 5.88% 90%;
-    --heroui-content3-foreground: 240 5.26% 26.08%;
-    --heroui-content4: 240 4.88% 83.92%;
-    --heroui-content4-foreground: 240 5.2% 33.92%;
-    --heroui-default-50: 0 0% 98.04%;
-    --heroui-default-100: 240 4.76% 95.88%;
-    --heroui-default-200: 240 5.88% 90%;
-    --heroui-default-300: 240 4.88% 83.92%;
-    --heroui-default-400: 240 5.03% 64.9%;
-    --heroui-default-500: 240 3.83% 46.08%;
-    --heroui-default-600: 240 5.2% 33.92%;
-    --heroui-default-700: 240 5.26% 26.08%;
-    --heroui-default-800: 240 3.7% 15.88%;
-    --heroui-default-900: 240 5.88% 10%;
-    --heroui-default-foreground: 0 0% 0%;
-    --heroui-default: 240 4.88% 83.92%;
-    --heroui-primary-50: 212.5 92.31% 94.9%;
-    --heroui-primary-100: 211.84000000000003 92.45% 89.61%;
-    --heroui-primary-200: 211.84000000000003 92.45% 79.22%;
-    --heroui-primary-300: 212.24 92.45% 68.82%;
-    --heroui-primary-400: 212.14 92.45% 58.43%;
-    --heroui-primary-500: 212.01999999999998 100% 46.67%;
-    --heroui-primary-600: 212.14 100% 38.43%;
-    --heroui-primary-700: 212.24 100% 28.82%;
-    --heroui-primary-800: 211.84000000000003 100% 19.22%;
-    --heroui-primary-900: 211.84000000000003 100% 9.61%;
-    --heroui-primary-foreground: 0 0% 100%;
-    --heroui-primary: 212.01999999999998 100% 46.67%;
-    --heroui-secondary-50: 270 61.54% 94.9%;
-    --heroui-secondary-100: 270 59.26% 89.41%;
-    --heroui-secondary-200: 270 59.26% 78.82%;
-    --heroui-secondary-300: 270 59.26% 68.24%;
-    --heroui-secondary-400: 270 59.26% 57.65%;
-    --heroui-secondary-500: 270 66.67% 47.06%;
-    --heroui-secondary-600: 270 66.67% 37.65%;
-    --heroui-secondary-700: 270 66.67% 28.24%;
-    --heroui-secondary-800: 270 66.67% 18.82%;
-    --heroui-secondary-900: 270 66.67% 9.41%;
-    --heroui-secondary-foreground: 0 0% 100%;
-    --heroui-secondary: 270 66.67% 47.06%;
-    --heroui-success-50: 146.66999999999996 64.29% 94.51%;
-    --heroui-success-100: 145.71000000000004 61.4% 88.82%;
-    --heroui-success-200: 146.2 61.74% 77.45%;
-    --heroui-success-300: 145.78999999999996 62.57% 66.47%;
-    --heroui-success-400: 146.01 62.45% 55.1%;
-    --heroui-success-500: 145.96000000000004 79.46% 43.92%;
-    --heroui-success-600: 146.01 79.89% 35.1%;
-    --heroui-success-700: 145.78999999999996 79.26% 26.47%;
-    --heroui-success-800: 146.2 79.78% 17.45%;
-    --heroui-success-900: 145.71000000000004 77.78% 8.82%;
-    --heroui-success-foreground: 0 0% 0%;
-    --heroui-success: 145.96000000000004 79.46% 43.92%;
-    --heroui-warning-50: 54.55000000000001 91.67% 95.29%;
-    --heroui-warning-100: 37.139999999999986 91.3% 90.98%;
-    --heroui-warning-200: 37.139999999999986 91.3% 81.96%;
-    --heroui-warning-300: 36.95999999999998 91.24% 73.14%;
-    --heroui-warning-400: 37.00999999999999 91.26% 64.12%;
-    --heroui-warning-500: 37.02999999999997 91.27% 55.1%;
-    --heroui-warning-600: 37.00999999999999 74.22% 44.12%;
-    --heroui-warning-700: 36.95999999999998 73.96% 33.14%;
-    --heroui-warning-800: 37.139999999999986 75% 21.96%;
-    --heroui-warning-900: 37.139999999999986 75% 10.98%;
-    --heroui-warning-foreground: 0 0% 0%;
-    --heroui-warning: 37.02999999999997 91.27% 55.1%;
-    --heroui-danger-50: 339.13 92% 95.1%;
-    --heroui-danger-100: 340 91.84% 90.39%;
-    --heroui-danger-200: 339.3299999999999 90% 80.39%;
-    --heroui-danger-300: 339.11 90.6% 70.78%;
-    --heroui-danger-400: 339 90% 60.78%;
-    --heroui-danger-500: 339.20000000000005 90.36% 51.18%;
-    --heroui-danger-600: 339 86.54% 40.78%;
-    --heroui-danger-700: 339.11 85.99% 30.78%;
-    --heroui-danger-800: 339.3299999999999 86.54% 20.39%;
-    --heroui-danger-900: 340 84.91% 10.39%;
-    --heroui-danger-foreground: 0 0% 100%;
-    --heroui-danger: 339.20000000000005 90.36% 51.18%;
-    --heroui-divider-weight: 1px;
-    --heroui-disabled-opacity: .5;
-    --heroui-font-size-tiny: 0.75rem;
-    --heroui-font-size-small: 0.875rem;
-    --heroui-font-size-medium: 1rem;
-    --heroui-font-size-large: 1.125rem;
-    --heroui-line-height-tiny: 1rem;
-    --heroui-line-height-small: 1.25rem;
-    --heroui-line-height-medium: 1.5rem;
-    --heroui-line-height-large: 1.75rem;
-    --heroui-radius-small: 8px;
-    --heroui-radius-medium: 12px;
-    --heroui-radius-large: 14px;
-    --heroui-border-width-small: 1px;
-    --heroui-border-width-medium: 2px;
-    --heroui-border-width-large: 3px;
-    --heroui-box-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
-    --heroui-box-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
-    --heroui-box-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
-    --heroui-hover-opacity: .8;
-  }
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@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: 0px;
-}
-@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-duration {
-  syntax: "*";
-  inherits: false;
-}
-@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-border-style: solid;
-      --tw-font-weight: initial;
-      --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-duration: initial;
-    }
-  }
-}
-