@koaris/bloom-ui 1.2.3 → 1.2.5

package/dist/index.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
@@ -49,9 +39,9 @@ __export(index_exports, {
   TextInput: () => TextInput,
   Toast: () => Toast,
   ToastContainer: () => ToastContainer,
-  ToastContext: () => ToastContext,
   ToastProvider: () => ToastProvider,
   Toggle: () => Toggle,
+  toastService: () => toastService,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
@@ -2835,6 +2825,13 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var passwordMask = {
   password: [/^(?=.*[!@#$%^&*])/, /(?=.*[0-9])/, /.{8,}$/]
 };
+var phoneFormats = {
+  "BR": { countryCode: "+55", format: "($1) $2-$3" },
+  "US": { countryCode: "+1", format: "($1) $2-$3" },
+  "UK": { countryCode: "+44", format: "$1 $2 $3" },
+  "DE": { countryCode: "+49", format: "$1 $2 $3" },
+  "FR": { countryCode: "+33", format: "$1 $2 $3 $4" }
+};
 var Input = (0, import_react4.forwardRef)(
   ({
     className,
@@ -2851,6 +2848,8 @@ var Input = (0, import_react4.forwardRef)(
     label,
     helperText,
     id,
+    countryCode = "BR",
+    // Default to Brazil
     ...rest
   }, ref) => {
     const [selected, setSelected] = (0, import_react4.useState)(false);
@@ -2902,20 +2901,52 @@ var Input = (0, import_react4.forwardRef)(
           if (result.length > 5) result = result.replace(/(\d{5})(\d+)/, "$1-$2");
           break;
         case "phone":
-          result = value2.replace(/\D/g, "");
-          if (result.length > 11) result = result.substring(0, 11);
-          if (result.length > 10)
-            result = result.replace(/(\d{2})(\d{5})(\d+)/, "($1) $2-$3");
-          else if (result.length > 6)
-            result = result.replace(/(\d{2})(\d{4})(\d+)/, "($1) $2-$3");
-          else if (result.length > 2)
-            result = result.replace(/(\d{2})(\d+)/, "($1) $2");
+          result = applyPhoneMask(value2, countryCode);
+          break;
+        case "email":
+          result = value2.trim();
           break;
         default:
           break;
       }
       return result;
     };
+    const applyPhoneMask = (value2, countryCode2) => {
+      let digits = value2.replace(/\D/g, "");
+      const format = phoneFormats[countryCode2] || phoneFormats["BR"];
+      switch (countryCode2) {
+        case "BR":
+          if (digits.length > 11) digits = digits.substring(0, 11);
+          if (digits.length > 10)
+            return digits.replace(/(\d{2})(\d{5})(\d+)/, "($1) $2-$3");
+          else if (digits.length > 6)
+            return digits.replace(/(\d{2})(\d{4})(\d+)/, "($1) $2-$3");
+          else if (digits.length > 2)
+            return digits.replace(/(\d{2})(\d+)/, "($1) $2");
+          return digits;
+        case "US":
+          if (digits.length > 10) digits = digits.substring(0, 10);
+          if (digits.length > 6)
+            return digits.replace(/(\d{3})(\d{3})(\d+)/, "($1) $2-$3");
+          else if (digits.length > 3)
+            return digits.replace(/(\d{3})(\d+)/, "($1) $2");
+          return digits;
+        case "UK":
+          if (digits.length > 10) digits = digits.substring(0, 10);
+          if (digits.length > 7)
+            return digits.replace(/(\d{3})(\d{3})(\d+)/, "$1 $2 $3");
+          else if (digits.length > 3)
+            return digits.replace(/(\d{3})(\d+)/, "$1 $2");
+          return digits;
+        default:
+          if (digits.length > 10) digits = digits.substring(0, 10);
+          if (digits.length > 6)
+            return digits.replace(/(\d{3})(\d{3})(\d+)/, "$1 $2 $3");
+          else if (digits.length > 3)
+            return digits.replace(/(\d{3})(\d+)/, "$1 $2");
+          return digits;
+      }
+    };
     const validateInput = (value2) => {
       if (!value2) return false;
       let valid = false;
@@ -2936,7 +2967,16 @@ var Input = (0, import_react4.forwardRef)(
           valid = /^\d{5}-\d{3}$/.test(value2);
           break;
         case "phone":
-          valid = /^\(\d{2}\) \d{5}-\d{4}$/.test(value2);
+          if (countryCode === "BR") {
+            valid = /^\(\d{2}\) \d{5}-\d{4}$/.test(value2) || /^\(\d{2}\) \d{4}-\d{4}$/.test(value2);
+          } else if (countryCode === "US") {
+            valid = /^\(\d{3}\) \d{3}-\d{4}$/.test(value2);
+          } else {
+            valid = /^[\d\s()-]{8,}$/.test(value2);
+          }
+          break;
+        case "email":
+          valid = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value2);
           break;
         default:
           valid = value2.length > 0;
@@ -2947,7 +2987,7 @@ var Input = (0, import_react4.forwardRef)(
     };
     const handleInput = (event) => {
       let newValue = event.currentTarget.value;
-      if (["date", "cpf", "phone", "cnpj", "cep"].includes(type)) {
+      if (["date", "cpf", "phone", "cnpj", "cep", "email"].includes(type)) {
         newValue = applyMask(newValue, type);
       }
       const newEvent = {
@@ -2992,6 +3032,8 @@ var Input = (0, import_react4.forwardRef)(
       switch (type) {
         case "password":
           return "password";
+        case "email":
+          return "email";
         case "date":
         case "cpf":
         case "phone":
@@ -3002,13 +3044,19 @@ var Input = (0, import_react4.forwardRef)(
           return "text";
       }
     };
+    const renderPhonePrefix = () => {
+      if (type !== "phone") return null;
+      const format = phoneFormats[countryCode] || phoneFormats["BR"];
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute left-3 top-1.5 text-gray-500", children: format.countryCode });
+    };
     const inputClasses = twMerge(
-      "flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none transition-all duration-200",
+      "flex items-center justify-center border-2 border-gray-400 rounded-sm w-full px-3 py-1 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none transition-all duration-200",
       className,
       disabled && "opacity-50 cursor-not-allowed",
       selected && "border-2 border-orange-500",
       validated && isValid && "border-2 border-green-900",
-      error && "border-2 border-red-900"
+      (error || !isValid && inputValue != "") && "border-2 border-red-900",
+      type === "phone" && "pl-10"
     );
     const renderPasswordValidation = () => {
       if (type !== "password") return null;
@@ -3039,26 +3087,29 @@ var Input = (0, import_react4.forwardRef)(
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "input",
-        {
-          type: getInputType(),
-          required,
-          disabled,
-          ref,
-          id,
-          className: inputClasses,
-          onClick,
-          onFocus: handleFocus,
-          onChange: handleInput,
-          onBlur: handleBlur,
-          placeholder,
-          value: inputValue,
-          "aria-invalid": error,
-          "aria-describedby": error ? `${id}-error` : helperText ? `${id}-helper` : void 0,
-          ...rest
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [
+        renderPhonePrefix(),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            type: getInputType(),
+            required,
+            disabled,
+            ref,
+            id,
+            className: inputClasses,
+            onClick,
+            onFocus: handleFocus,
+            onChange: handleInput,
+            onBlur: handleBlur,
+            placeholder,
+            value: inputValue,
+            "aria-invalid": error,
+            "aria-describedby": error ? `${id}-error` : helperText ? `${id}-helper` : void 0,
+            ...rest
+          }
+        )
+      ] }),
       renderPasswordValidation(),
       error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: `${id}-error`, className: "mt-1 text-sm text-red-900", role: "alert", children: errorMessage || "Invalid field." }),
       helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: `${id}-helper`, className: "mt-1 text-sm text-gray-500", children: helperText })
@@ -3641,8 +3692,51 @@ var Modal = ({
 };
 
 // src/components/Toast/index.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react8 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var ToastService = class _ToastService {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.toasts = [];
+  }
+  static getInstance() {
+    if (!_ToastService.instance) {
+      _ToastService.instance = new _ToastService();
+    }
+    return _ToastService.instance;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  notify() {
+    this.listeners.forEach((listener) => listener([...this.toasts]));
+  }
+  showToast(toast) {
+    const id = `toast-${Date.now()}`;
+    this.toasts.push({
+      ...toast,
+      id,
+      onDismiss: (toastId) => this.hideToast(toastId)
+    });
+    this.notify();
+    return id;
+  }
+  hideToast(id) {
+    this.toasts = this.toasts.filter((toast) => toast.id !== id);
+    this.notify();
+  }
+  clearToasts() {
+    this.toasts = [];
+    this.notify();
+  }
+  getToasts() {
+    return [...this.toasts];
+  }
+};
+var toastService = ToastService.getInstance();
 var Toast = ({
   id,
   message,
@@ -3709,19 +3803,21 @@ var Toast = ({
 };
 var ToastContainer = ({
   position = "top-right",
-  className,
-  children
+  className
 }) => {
-  const containerRef = (0, import_react8.useRef)({ current: null });
+  const containerRef = (0, import_react8.useRef)(null);
   const [isMounted, setIsMounted] = (0, import_react8.useState)(false);
+  const [toasts, setToasts] = (0, import_react8.useState)([]);
   (0, import_react8.useEffect)(() => {
     const container = document.createElement("div");
     container.id = "toast-root";
     container.className = "fixed z-50 p-4";
     document.body.appendChild(container);
-    containerRef.current = { current: container };
+    containerRef.current = container;
     setIsMounted(true);
+    const unsubscribe = toastService.subscribe(setToasts);
     return () => {
+      unsubscribe();
       container.remove();
     };
   }, []);
@@ -3742,30 +3838,23 @@ var ToastContainer = ({
         positionClasses[position],
         className
       ),
-      children
+      children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Toast, { ...toast }, toast.id))
     }
   );
 };
-var ToastContext = import_react8.default.createContext(void 0);
-var ToastProvider = ({ position = "top-right", children }) => {
-  const [toasts, setToasts] = (0, import_react8.useState)([]);
-  const showToast = (toast) => {
-    const id = `toast-${Date.now()}`;
-    setToasts((prev) => [...prev, { ...toast, id }]);
-    return id;
+var useToast = () => {
+  return {
+    showToast: (toast) => toastService.showToast(toast),
+    hideToast: (id) => toastService.hideToast(id),
+    clearToasts: () => toastService.clearToasts()
   };
-  const hideToast = (id) => setToasts((prev) => prev.filter((toast) => toast.id !== id));
-  const clearToasts = () => setToasts([]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ToastContext.Provider, { value: { showToast, hideToast, clearToasts }, children: [
+};
+var ToastProvider = ({ position = "top-right", children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToastContainer, { position, children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Toast, { ...toast, onDismiss: hideToast }, toast.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToastContainer, { position })
   ] });
 };
-var useToast = () => {
-  const context = import_react8.default.useContext(ToastContext);
-  if (!context) throw new Error("useToast must be used within ToastProvider");
-  return context;
-};
 Toast.displayName = "Toast";
 ToastContainer.displayName = "ToastContainer";
 // Annotate the CommonJS export names for ESM import in node:
@@ -3789,8 +3878,8 @@ ToastContainer.displayName = "ToastContainer";
   TextInput,
   Toast,
   ToastContainer,
-  ToastContext,
   ToastProvider,
   Toggle,
+  toastService,
   useToast
 });

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default, { DetailedHTMLProps, HTMLAttributes, ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, FormHTMLAttributes } from 'react';
+import * as react from 'react';
+import react__default, { DetailedHTMLProps, HTMLAttributes, ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, FormHTMLAttributes } from 'react';
 
 type CardSize = 'small' | 'medium' | 'large' | 'full';
 type CardDirection = 'row' | 'col';
@@ -35,7 +35,7 @@ interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonE
     fullWidth?: boolean;
     children: ReactNode;
 }
-declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Primary UI component for user interaction
@@ -66,12 +66,16 @@ interface CheckboxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>
 }
 declare const Checkbox: ({ className, required, disabled }: CheckboxProps) => react_jsx_runtime.JSX.Element;
 
-type InputType = 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
+type InputType = 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep' | 'email';
 interface PasswordValidation {
     hasEightCharacters: boolean;
     hasSpecialCharacters: boolean;
     hasNumber: boolean;
 }
+interface PhoneFormat {
+    countryCode: string;
+    format: string;
+}
 interface InputProps extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'type'> {
     disabled?: boolean;
     placeholder?: string;
@@ -84,8 +88,9 @@ interface InputProps extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInpu
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     label?: string;
     helperText?: string;
+    countryCode?: string;
 }
-declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
 interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     disabled?: boolean;
@@ -98,7 +103,7 @@ interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInput
     required?: boolean;
     type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
 }
-declare const TextInput: React$1.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
 interface TextAreaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
     disabled?: boolean;
@@ -177,7 +182,7 @@ interface SkeletonProps {
     animate?: boolean;
     className?: string;
 }
-declare const Skeleton: React__default.FC<SkeletonProps>;
+declare const Skeleton: react__default.FC<SkeletonProps>;
 
 type LoadingSize = 'xs' | 'sm' | 'md' | 'lg';
 type LoadingColor = 'primary' | 'secondary' | 'white' | 'black' | 'gray';
@@ -189,7 +194,7 @@ interface LoadingProps {
     centered?: boolean;
     className?: string;
 }
-declare const Loading: React__default.FC<LoadingProps>;
+declare const Loading: react__default.FC<LoadingProps>;
 
 interface ModalProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     isOpen: boolean;
@@ -220,21 +225,30 @@ interface ToastContainerProps {
     position?: ToastPosition;
     className?: string;
 }
-declare const Toast: React__default.FC<ToastProps>;
-declare const ToastContainer: React__default.FC<ToastContainerProps & {
-    children?: React__default.ReactNode;
-}>;
-type ToastItem = Omit<ToastProps, 'onDismiss'>;
-interface ToastContextType {
-    showToast: (toast: Omit<ToastItem, 'id'>) => string;
+declare class ToastService {
+    private static instance;
+    private listeners;
+    private toasts;
+    private constructor();
+    static getInstance(): ToastService;
+    subscribe(listener: (toasts: ToastProps[]) => void): () => void;
+    private notify;
+    showToast(toast: Omit<ToastProps, 'id' | 'onDismiss'>): string;
+    hideToast(id: string): void;
+    clearToasts(): void;
+    getToasts(): ToastProps[];
+}
+declare const toastService: ToastService;
+declare const Toast: react__default.FC<ToastProps>;
+declare const ToastContainer: react__default.FC<ToastContainerProps>;
+declare const useToast: () => {
+    showToast: (toast: Omit<ToastProps, "id" | "onDismiss">) => string;
     hideToast: (id: string) => void;
     clearToasts: () => void;
-}
-declare const ToastContext: React__default.Context<ToastContextType | undefined>;
-declare const ToastProvider: React__default.FC<{
+};
+declare const ToastProvider: react__default.FC<{
     position?: ToastPosition;
-    children: React__default.ReactNode;
+    children: react__default.ReactNode;
 }>;
-declare const useToast: () => ToastContextType;
 
-export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardDirection, type CardProps, type CardSize, Checkbox, type CheckboxProps, Form, type FormProps, Heading, type HeadingProps, Input, type InputProps, type InputType, Link, type LinkProps, Loading, type LoadingColor, type LoadingProps, type LoadingSize, Modal, type ModalProps, MultiStep, type MultiStepProps, type PasswordValidation, RadioGroup, type RadioGroupProps, Skeleton, type SkeletonProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Toast, ToastContainer, type ToastContainerProps, ToastContext, type ToastPosition, type ToastProps, ToastProvider, type ToastVariant, Toggle, type ToggleProps, useToast };
+export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardDirection, type CardProps, type CardSize, Checkbox, type CheckboxProps, Form, type FormProps, Heading, type HeadingProps, Input, type InputProps, type InputType, Link, type LinkProps, Loading, type LoadingColor, type LoadingProps, type LoadingSize, Modal, type ModalProps, MultiStep, type MultiStepProps, type PasswordValidation, type PhoneFormat, RadioGroup, type RadioGroupProps, Skeleton, type SkeletonProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Toast, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, ToastProvider, type ToastVariant, Toggle, type ToggleProps, toastService, useToast };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default, { DetailedHTMLProps, HTMLAttributes, ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, FormHTMLAttributes } from 'react';
+import * as react from 'react';
+import react__default, { DetailedHTMLProps, HTMLAttributes, ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, FormHTMLAttributes } from 'react';
 
 type CardSize = 'small' | 'medium' | 'large' | 'full';
 type CardDirection = 'row' | 'col';
@@ -35,7 +35,7 @@ interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonE
     fullWidth?: boolean;
     children: ReactNode;
 }
-declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Primary UI component for user interaction
@@ -66,12 +66,16 @@ interface CheckboxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>
 }
 declare const Checkbox: ({ className, required, disabled }: CheckboxProps) => react_jsx_runtime.JSX.Element;
 
-type InputType = 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
+type InputType = 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep' | 'email';
 interface PasswordValidation {
     hasEightCharacters: boolean;
     hasSpecialCharacters: boolean;
     hasNumber: boolean;
 }
+interface PhoneFormat {
+    countryCode: string;
+    format: string;
+}
 interface InputProps extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'type'> {
     disabled?: boolean;
     placeholder?: string;
@@ -84,8 +88,9 @@ interface InputProps extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInpu
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     label?: string;
     helperText?: string;
+    countryCode?: string;
 }
-declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
 interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     disabled?: boolean;
@@ -98,7 +103,7 @@ interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInput
     required?: boolean;
     type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
 }
-declare const TextInput: React$1.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
 interface TextAreaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
     disabled?: boolean;
@@ -177,7 +182,7 @@ interface SkeletonProps {
     animate?: boolean;
     className?: string;
 }
-declare const Skeleton: React__default.FC<SkeletonProps>;
+declare const Skeleton: react__default.FC<SkeletonProps>;
 
 type LoadingSize = 'xs' | 'sm' | 'md' | 'lg';
 type LoadingColor = 'primary' | 'secondary' | 'white' | 'black' | 'gray';
@@ -189,7 +194,7 @@ interface LoadingProps {
     centered?: boolean;
     className?: string;
 }
-declare const Loading: React__default.FC<LoadingProps>;
+declare const Loading: react__default.FC<LoadingProps>;
 
 interface ModalProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     isOpen: boolean;
@@ -220,21 +225,30 @@ interface ToastContainerProps {
     position?: ToastPosition;
     className?: string;
 }
-declare const Toast: React__default.FC<ToastProps>;
-declare const ToastContainer: React__default.FC<ToastContainerProps & {
-    children?: React__default.ReactNode;
-}>;
-type ToastItem = Omit<ToastProps, 'onDismiss'>;
-interface ToastContextType {
-    showToast: (toast: Omit<ToastItem, 'id'>) => string;
+declare class ToastService {
+    private static instance;
+    private listeners;
+    private toasts;
+    private constructor();
+    static getInstance(): ToastService;
+    subscribe(listener: (toasts: ToastProps[]) => void): () => void;
+    private notify;
+    showToast(toast: Omit<ToastProps, 'id' | 'onDismiss'>): string;
+    hideToast(id: string): void;
+    clearToasts(): void;
+    getToasts(): ToastProps[];
+}
+declare const toastService: ToastService;
+declare const Toast: react__default.FC<ToastProps>;
+declare const ToastContainer: react__default.FC<ToastContainerProps>;
+declare const useToast: () => {
+    showToast: (toast: Omit<ToastProps, "id" | "onDismiss">) => string;
     hideToast: (id: string) => void;
     clearToasts: () => void;
-}
-declare const ToastContext: React__default.Context<ToastContextType | undefined>;
-declare const ToastProvider: React__default.FC<{
+};
+declare const ToastProvider: react__default.FC<{
     position?: ToastPosition;
-    children: React__default.ReactNode;
+    children: react__default.ReactNode;
 }>;
-declare const useToast: () => ToastContextType;
 
-export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardDirection, type CardProps, type CardSize, Checkbox, type CheckboxProps, Form, type FormProps, Heading, type HeadingProps, Input, type InputProps, type InputType, Link, type LinkProps, Loading, type LoadingColor, type LoadingProps, type LoadingSize, Modal, type ModalProps, MultiStep, type MultiStepProps, type PasswordValidation, RadioGroup, type RadioGroupProps, Skeleton, type SkeletonProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Toast, ToastContainer, type ToastContainerProps, ToastContext, type ToastPosition, type ToastProps, ToastProvider, type ToastVariant, Toggle, type ToggleProps, useToast };
+export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardDirection, type CardProps, type CardSize, Checkbox, type CheckboxProps, Form, type FormProps, Heading, type HeadingProps, Input, type InputProps, type InputType, Link, type LinkProps, Loading, type LoadingColor, type LoadingProps, type LoadingSize, Modal, type ModalProps, MultiStep, type MultiStepProps, type PasswordValidation, type PhoneFormat, RadioGroup, type RadioGroupProps, Skeleton, type SkeletonProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Toast, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, ToastProvider, type ToastVariant, Toggle, type ToggleProps, toastService, useToast };

package/dist/index.mjs

@@ -2781,6 +2781,13 @@ import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var passwordMask = {
   password: [/^(?=.*[!@#$%^&*])/, /(?=.*[0-9])/, /.{8,}$/]
 };
+var phoneFormats = {
+  "BR": { countryCode: "+55", format: "($1) $2-$3" },
+  "US": { countryCode: "+1", format: "($1) $2-$3" },
+  "UK": { countryCode: "+44", format: "$1 $2 $3" },
+  "DE": { countryCode: "+49", format: "$1 $2 $3" },
+  "FR": { countryCode: "+33", format: "$1 $2 $3 $4" }
+};
 var Input = forwardRef2(
   ({
     className,
@@ -2797,6 +2804,8 @@ var Input = forwardRef2(
     label,
     helperText,
     id,
+    countryCode = "BR",
+    // Default to Brazil
     ...rest
   }, ref) => {
     const [selected, setSelected] = useState3(false);
@@ -2848,20 +2857,52 @@ var Input = forwardRef2(
           if (result.length > 5) result = result.replace(/(\d{5})(\d+)/, "$1-$2");
           break;
         case "phone":
-          result = value2.replace(/\D/g, "");
-          if (result.length > 11) result = result.substring(0, 11);
-          if (result.length > 10)
-            result = result.replace(/(\d{2})(\d{5})(\d+)/, "($1) $2-$3");
-          else if (result.length > 6)
-            result = result.replace(/(\d{2})(\d{4})(\d+)/, "($1) $2-$3");
-          else if (result.length > 2)
-            result = result.replace(/(\d{2})(\d+)/, "($1) $2");
+          result = applyPhoneMask(value2, countryCode);
+          break;
+        case "email":
+          result = value2.trim();
           break;
         default:
           break;
       }
       return result;
     };
+    const applyPhoneMask = (value2, countryCode2) => {
+      let digits = value2.replace(/\D/g, "");
+      const format = phoneFormats[countryCode2] || phoneFormats["BR"];
+      switch (countryCode2) {
+        case "BR":
+          if (digits.length > 11) digits = digits.substring(0, 11);
+          if (digits.length > 10)
+            return digits.replace(/(\d{2})(\d{5})(\d+)/, "($1) $2-$3");
+          else if (digits.length > 6)
+            return digits.replace(/(\d{2})(\d{4})(\d+)/, "($1) $2-$3");
+          else if (digits.length > 2)
+            return digits.replace(/(\d{2})(\d+)/, "($1) $2");
+          return digits;
+        case "US":
+          if (digits.length > 10) digits = digits.substring(0, 10);
+          if (digits.length > 6)
+            return digits.replace(/(\d{3})(\d{3})(\d+)/, "($1) $2-$3");
+          else if (digits.length > 3)
+            return digits.replace(/(\d{3})(\d+)/, "($1) $2");
+          return digits;
+        case "UK":
+          if (digits.length > 10) digits = digits.substring(0, 10);
+          if (digits.length > 7)
+            return digits.replace(/(\d{3})(\d{3})(\d+)/, "$1 $2 $3");
+          else if (digits.length > 3)
+            return digits.replace(/(\d{3})(\d+)/, "$1 $2");
+          return digits;
+        default:
+          if (digits.length > 10) digits = digits.substring(0, 10);
+          if (digits.length > 6)
+            return digits.replace(/(\d{3})(\d{3})(\d+)/, "$1 $2 $3");
+          else if (digits.length > 3)
+            return digits.replace(/(\d{3})(\d+)/, "$1 $2");
+          return digits;
+      }
+    };
     const validateInput = (value2) => {
       if (!value2) return false;
       let valid = false;
@@ -2882,7 +2923,16 @@ var Input = forwardRef2(
           valid = /^\d{5}-\d{3}$/.test(value2);
           break;
         case "phone":
-          valid = /^\(\d{2}\) \d{5}-\d{4}$/.test(value2);
+          if (countryCode === "BR") {
+            valid = /^\(\d{2}\) \d{5}-\d{4}$/.test(value2) || /^\(\d{2}\) \d{4}-\d{4}$/.test(value2);
+          } else if (countryCode === "US") {
+            valid = /^\(\d{3}\) \d{3}-\d{4}$/.test(value2);
+          } else {
+            valid = /^[\d\s()-]{8,}$/.test(value2);
+          }
+          break;
+        case "email":
+          valid = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value2);
           break;
         default:
           valid = value2.length > 0;
@@ -2893,7 +2943,7 @@ var Input = forwardRef2(
     };
     const handleInput = (event) => {
       let newValue = event.currentTarget.value;
-      if (["date", "cpf", "phone", "cnpj", "cep"].includes(type)) {
+      if (["date", "cpf", "phone", "cnpj", "cep", "email"].includes(type)) {
         newValue = applyMask(newValue, type);
       }
       const newEvent = {
@@ -2938,6 +2988,8 @@ var Input = forwardRef2(
       switch (type) {
         case "password":
           return "password";
+        case "email":
+          return "email";
         case "date":
         case "cpf":
         case "phone":
@@ -2948,13 +3000,19 @@ var Input = forwardRef2(
           return "text";
       }
     };
+    const renderPhonePrefix = () => {
+      if (type !== "phone") return null;
+      const format = phoneFormats[countryCode] || phoneFormats["BR"];
+      return /* @__PURE__ */ jsx6("span", { className: "absolute left-3 top-1.5 text-gray-500", children: format.countryCode });
+    };
     const inputClasses = twMerge(
-      "flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none transition-all duration-200",
+      "flex items-center justify-center border-2 border-gray-400 rounded-sm w-full px-3 py-1 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none transition-all duration-200",
       className,
       disabled && "opacity-50 cursor-not-allowed",
       selected && "border-2 border-orange-500",
       validated && isValid && "border-2 border-green-900",
-      error && "border-2 border-red-900"
+      (error || !isValid && inputValue != "") && "border-2 border-red-900",
+      type === "phone" && "pl-10"
     );
     const renderPasswordValidation = () => {
       if (type !== "password") return null;
@@ -2985,26 +3043,29 @@ var Input = forwardRef2(
           ]
         }
       ),
-      /* @__PURE__ */ jsx6(
-        "input",
-        {
-          type: getInputType(),
-          required,
-          disabled,
-          ref,
-          id,
-          className: inputClasses,
-          onClick,
-          onFocus: handleFocus,
-          onChange: handleInput,
-          onBlur: handleBlur,
-          placeholder,
-          value: inputValue,
-          "aria-invalid": error,
-          "aria-describedby": error ? `${id}-error` : helperText ? `${id}-helper` : void 0,
-          ...rest
-        }
-      ),
+      /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+        renderPhonePrefix(),
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            type: getInputType(),
+            required,
+            disabled,
+            ref,
+            id,
+            className: inputClasses,
+            onClick,
+            onFocus: handleFocus,
+            onChange: handleInput,
+            onBlur: handleBlur,
+            placeholder,
+            value: inputValue,
+            "aria-invalid": error,
+            "aria-describedby": error ? `${id}-error` : helperText ? `${id}-helper` : void 0,
+            ...rest
+          }
+        )
+      ] }),
       renderPasswordValidation(),
       error && /* @__PURE__ */ jsx6("p", { id: `${id}-error`, className: "mt-1 text-sm text-red-900", role: "alert", children: errorMessage || "Invalid field." }),
       helperText && !error && /* @__PURE__ */ jsx6("p", { id: `${id}-helper`, className: "mt-1 text-sm text-gray-500", children: helperText })
@@ -3594,8 +3655,51 @@ var Modal = ({
 };
 
 // src/components/Toast/index.tsx
-import React, { useEffect as useEffect5, useState as useState7, useRef as useRef2 } from "react";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useState as useState7, useRef as useRef2 } from "react";
+import { Fragment, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var ToastService = class _ToastService {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.toasts = [];
+  }
+  static getInstance() {
+    if (!_ToastService.instance) {
+      _ToastService.instance = new _ToastService();
+    }
+    return _ToastService.instance;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  notify() {
+    this.listeners.forEach((listener) => listener([...this.toasts]));
+  }
+  showToast(toast) {
+    const id = `toast-${Date.now()}`;
+    this.toasts.push({
+      ...toast,
+      id,
+      onDismiss: (toastId) => this.hideToast(toastId)
+    });
+    this.notify();
+    return id;
+  }
+  hideToast(id) {
+    this.toasts = this.toasts.filter((toast) => toast.id !== id);
+    this.notify();
+  }
+  clearToasts() {
+    this.toasts = [];
+    this.notify();
+  }
+  getToasts() {
+    return [...this.toasts];
+  }
+};
+var toastService = ToastService.getInstance();
 var Toast = ({
   id,
   message,
@@ -3662,19 +3766,21 @@ var Toast = ({
 };
 var ToastContainer = ({
   position = "top-right",
-  className,
-  children
+  className
 }) => {
-  const containerRef = useRef2({ current: null });
+  const containerRef = useRef2(null);
   const [isMounted, setIsMounted] = useState7(false);
+  const [toasts, setToasts] = useState7([]);
   useEffect5(() => {
     const container = document.createElement("div");
     container.id = "toast-root";
     container.className = "fixed z-50 p-4";
     document.body.appendChild(container);
-    containerRef.current = { current: container };
+    containerRef.current = container;
     setIsMounted(true);
+    const unsubscribe = toastService.subscribe(setToasts);
     return () => {
+      unsubscribe();
       container.remove();
     };
   }, []);
@@ -3695,30 +3801,23 @@ var ToastContainer = ({
         positionClasses[position],
         className
       ),
-      children
+      children: toasts.map((toast) => /* @__PURE__ */ jsx19(Toast, { ...toast }, toast.id))
     }
   );
 };
-var ToastContext = React.createContext(void 0);
-var ToastProvider = ({ position = "top-right", children }) => {
-  const [toasts, setToasts] = useState7([]);
-  const showToast = (toast) => {
-    const id = `toast-${Date.now()}`;
-    setToasts((prev) => [...prev, { ...toast, id }]);
-    return id;
+var useToast = () => {
+  return {
+    showToast: (toast) => toastService.showToast(toast),
+    hideToast: (id) => toastService.hideToast(id),
+    clearToasts: () => toastService.clearToasts()
   };
-  const hideToast = (id) => setToasts((prev) => prev.filter((toast) => toast.id !== id));
-  const clearToasts = () => setToasts([]);
-  return /* @__PURE__ */ jsxs11(ToastContext.Provider, { value: { showToast, hideToast, clearToasts }, children: [
+};
+var ToastProvider = ({ position = "top-right", children }) => {
+  return /* @__PURE__ */ jsxs11(Fragment, { children: [
     children,
-    /* @__PURE__ */ jsx19(ToastContainer, { position, children: toasts.map((toast) => /* @__PURE__ */ jsx19(Toast, { ...toast, onDismiss: hideToast }, toast.id)) })
+    /* @__PURE__ */ jsx19(ToastContainer, { position })
   ] });
 };
-var useToast = () => {
-  const context = React.useContext(ToastContext);
-  if (!context) throw new Error("useToast must be used within ToastProvider");
-  return context;
-};
 Toast.displayName = "Toast";
 ToastContainer.displayName = "ToastContainer";
 export {
@@ -3741,8 +3840,8 @@ export {
   TextInput,
   Toast,
   ToastContainer,
-  ToastContext,
   ToastProvider,
   Toggle,
+  toastService,
   useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koaris/bloom-ui",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Bloom-ui is a public design system from the Koaris Project developed with React, Typescript, and Tailwind.",
   "source": "./src/index.ts",
   "type": "module",

package/tailwind.css

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation 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:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.top-0{top:0}.z-10{z-index:10}.z-50{z-index:50}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-3{margin-left:.75rem}.mr-1{margin-right:.25rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-12{height:3rem}.h-16{height:4rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-auto{height:auto}.h-full{height:100%}.max-h-\[70vh\]{max-height:70vh}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.max-w-\[180px\]{max-width:180px}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x:0px}.translate-x-1{--tw-translate-x:0.25rem}.translate-x-1,.translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x:1.25rem}.translate-x-6{--tw-translate-x:1.5rem}.translate-x-6,.translate-x-8{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-8{--tw-translate-x:2rem}.translate-x-full{--tw-translate-x:100%}.scale-100,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.resize-y{resize:vertical}.resize{resize:both}.grid-flow-col{grid-auto-flow:column}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(70 215 242/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-green-500{--tw-border-opacity:1;border-color:rgb(70 242 175/var(--tw-border-opacity,1))}.border-green-900{--tw-border-opacity:1;border-color:rgb(20 83 45/var(--tw-border-opacity,1))}.border-neutral{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(227 227 226/var(--tw-border-opacity,1))}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(157 157 157/var(--tw-border-opacity,1))}.border-neutral-800{--tw-border-opacity:1;border-color:rgb(28 33 38/var(--tw-border-opacity,1))}.border-orange-500{--tw-border-opacity:1;border-color:rgb(243 98 70/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(233 30 99/var(--tw-border-opacity,1))}.border-red-900{--tw-border-opacity:1;border-color:rgb(158 0 63/var(--tw-border-opacity,1))}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-neutral{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-neutral-200{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.bg-neutral-500{--tw-bg-opacity:1;background-color:rgb(157 157 157/var(--tw-bg-opacity,1))}.bg-neutral-600{--tw-bg-opacity:1;background-color:rgb(50 60 69/var(--tw-bg-opacity,1))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(28 33 38/var(--tw-bg-opacity,1))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(243 98 70/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(247 176 200/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-opacity-50{--tw-bg-opacity:0.5}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.font-default{font-family:Open Sans,sans-serif}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.75rem}.text-4xl{font-size:2rem}.text-5xl{font-size:2.25rem}.text-6xl{font-size:3rem}.text-7xl{font-size:4rem}.text-8xl{font-size:4.5rem}.text-9xl{font-size:6rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem}.text-md{font-size:1rem}.text-sm{font-size:.875rem}.text-xl{font-size:1.25rem}.text-xs{font-size:.75rem}.text-xxs{font-size:.625rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-tight{line-height:1.25}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(70 242 175/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-neutral{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-neutral-1000{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-neutral-200{--tw-text-opacity:1;color:rgb(246 246 246/var(--tw-text-opacity,1))}.text-neutral-500{--tw-text-opacity:1;color:rgb(157 157 157/var(--tw-text-opacity,1))}.text-neutral-800{--tw-text-opacity:1;color:rgb(28 33 38/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(243 98 70/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(233 30 99/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-red-900{--tw-text-opacity:1;color:rgb(158 0 63/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}html{font-family:Open Sans,sans-serif}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-orange-500:hover{--tw-border-opacity:1;border-color:rgb(243 98 70/var(--tw-border-opacity,1))}.hover\:bg-orange-50:hover{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.hover\:bg-orange-500:hover{--tw-bg-opacity:1;background-color:rgb(243 98 70/var(--tw-bg-opacity,1))}.hover\:bg-orange-700:hover{--tw-bg-opacity:1;background-color:rgb(194 65 12/var(--tw-bg-opacity,1))}.hover\:bg-opacity-100:hover{--tw-bg-opacity:1}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.hover\:text-neutral:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-md:hover,.hover\:shadow-none:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-none:hover{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.hover\:shadow-neutral-500:hover{--tw-shadow-color:#9d9d9d;--tw-shadow:var(--tw-shadow-colored)}.hover\:shadow-orange-500:hover{--tw-shadow-color:#f36246;--tw-shadow:var(--tw-shadow-colored)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(70 215 242/var(--tw-ring-opacity,1))}.focus\:ring-orange-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(243 98 70/var(--tw-ring-opacity,1))}.focus\:ring-opacity-50:focus{--tw-ring-opacity:0.5}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (min-width:640px){.sm\:text-sm{font-size:.875rem}}@media (prefers-color-scheme:dark){.dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.dark\:bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation 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:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:.75rem}.right-0{right:0}.top-0{top:0}.top-1\.5{top:.375rem}.z-10{z-index:10}.z-50{z-index:50}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-3{margin-left:.75rem}.mr-1{margin-right:.25rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-12{height:3rem}.h-16{height:4rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-auto{height:auto}.h-full{height:100%}.max-h-\[70vh\]{max-height:70vh}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.max-w-\[180px\]{max-width:180px}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x:0px}.translate-x-1{--tw-translate-x:0.25rem}.translate-x-1,.translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x:1.25rem}.translate-x-6{--tw-translate-x:1.5rem}.translate-x-6,.translate-x-8{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-8{--tw-translate-x:2rem}.translate-x-full{--tw-translate-x:100%}.scale-100,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.resize-y{resize:vertical}.resize{resize:both}.grid-flow-col{grid-auto-flow:column}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(70 215 242/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.border-green-500{--tw-border-opacity:1;border-color:rgb(70 242 175/var(--tw-border-opacity,1))}.border-green-900{--tw-border-opacity:1;border-color:rgb(20 83 45/var(--tw-border-opacity,1))}.border-neutral{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(227 227 226/var(--tw-border-opacity,1))}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(157 157 157/var(--tw-border-opacity,1))}.border-neutral-800{--tw-border-opacity:1;border-color:rgb(28 33 38/var(--tw-border-opacity,1))}.border-orange-500{--tw-border-opacity:1;border-color:rgb(243 98 70/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(233 30 99/var(--tw-border-opacity,1))}.border-red-900{--tw-border-opacity:1;border-color:rgb(158 0 63/var(--tw-border-opacity,1))}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-neutral{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-neutral-200{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.bg-neutral-500{--tw-bg-opacity:1;background-color:rgb(157 157 157/var(--tw-bg-opacity,1))}.bg-neutral-600{--tw-bg-opacity:1;background-color:rgb(50 60 69/var(--tw-bg-opacity,1))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(28 33 38/var(--tw-bg-opacity,1))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(243 98 70/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(247 176 200/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-opacity-50{--tw-bg-opacity:0.5}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-10{padding-left:2.5rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.font-default{font-family:Open Sans,sans-serif}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.75rem}.text-4xl{font-size:2rem}.text-5xl{font-size:2.25rem}.text-6xl{font-size:3rem}.text-7xl{font-size:4rem}.text-8xl{font-size:4.5rem}.text-9xl{font-size:6rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem}.text-md{font-size:1rem}.text-sm{font-size:.875rem}.text-xl{font-size:1.25rem}.text-xs{font-size:.75rem}.text-xxs{font-size:.625rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-tight{line-height:1.25}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(70 242 175/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-neutral{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-neutral-1000{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-neutral-200{--tw-text-opacity:1;color:rgb(246 246 246/var(--tw-text-opacity,1))}.text-neutral-500{--tw-text-opacity:1;color:rgb(157 157 157/var(--tw-text-opacity,1))}.text-neutral-800{--tw-text-opacity:1;color:rgb(28 33 38/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(243 98 70/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(233 30 99/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-red-900{--tw-text-opacity:1;color:rgb(158 0 63/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}html{font-family:Open Sans,sans-serif}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-orange-500:hover{--tw-border-opacity:1;border-color:rgb(243 98 70/var(--tw-border-opacity,1))}.hover\:bg-orange-50:hover{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.hover\:bg-orange-500:hover{--tw-bg-opacity:1;background-color:rgb(243 98 70/var(--tw-bg-opacity,1))}.hover\:bg-orange-700:hover{--tw-bg-opacity:1;background-color:rgb(194 65 12/var(--tw-bg-opacity,1))}.hover\:bg-opacity-100:hover{--tw-bg-opacity:1}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.hover\:text-neutral:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-md:hover,.hover\:shadow-none:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-none:hover{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.hover\:shadow-neutral-500:hover{--tw-shadow-color:#9d9d9d;--tw-shadow:var(--tw-shadow-colored)}.hover\:shadow-orange-500:hover{--tw-shadow-color:#f36246;--tw-shadow:var(--tw-shadow-colored)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(70 215 242/var(--tw-ring-opacity,1))}.focus\:ring-orange-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(243 98 70/var(--tw-ring-opacity,1))}.focus\:ring-opacity-50:focus{--tw-ring-opacity:0.5}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (min-width:640px){.sm\:text-sm{font-size:.875rem}}@media (prefers-color-scheme:dark){.dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.dark\:bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}}