0xtrails 0.13.2 → 0.14.0

package/src/widget/index.css

@@ -1,686 +0,0 @@
-@import "tailwindcss";
-
-@source "../**/*.{js,ts,jsx,tsx}";
-@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
-
-@theme {
-  --color-polygon-50: #f2efff;
-  --color-polygon-100: #e4dfff;
-  --color-polygon-200: #c8bbff;
-  --color-polygon-300: #b09aff;
-  --color-polygon-400: #9673ff;
-  --color-polygon-500: #814aff;
-  --color-polygon-600: #6c00f6;
-  --color-polygon-700: #5100bd;
-  --color-polygon-800: #3a008b;
-  --color-polygon-900: #210056;
-  --color-polygon-950: #170040;
-}
-
-*:focus {
-  outline: none;
-}
-
-/* Trails Widget Theme Variables - Easy to customize */
-:root {
-  /* Font Family - Customizable font for the entire widget */
-  --trails-font-family:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-
-  /* Border Radius - Customizable border radius for the widget */
-  --trails-border-radius-widget: 32px; /* Main widget container border radius */
-  --trails-border-radius-button: 32px; /* Primary buttons border radius */
-  --trails-border-radius-input: 32px; /* Input fields border radius */
-  --trails-border-radius-dropdown: 32px; /* Dropdown border radius now matches input and button */
-  --trails-border-radius-container: 8px; /* Container elements border radius (balance cards, etc.) */
-  --trails-border-radius-list: 8px; /* Token list border radius */
-  --trails-border-radius-list-button: 12px; /* List item buttons border radius */
-  --trails-border-radius-large-button: 16px; /* Large buttons border radius */
-
-  /* Widget Border - Customizable widget border */
-  --trails-widget-border: 1px solid rgb(229 231 235); /* Default widget border */
-
-  /* Primary Colors - These apply to both themes */
-  --trails-primary: rgb(21 93 252); /* #155DFC - Change this to customize */
-  --trails-primary-hover: rgb(
-    17 75 202
-  ); /* Darker shade of #155DFC - Change this for hover state */
-  --trails-primary-disabled: rgb(212 212 216); /* #D4D4D8 - Disabled state */
-  --trails-primary-disabled-text: rgb(
-    107 114 128
-  ); /* gray-500 - Disabled text */
-
-  /* Modal Button Colors - Customizable modal trigger button */
-  --trails-modal-button-bg: var(
-    --trails-primary,
-    rgb(21 93 252)
-  ); /* Defaults to primary color */
-  --trails-modal-button-hover-bg: var(
-    --trails-primary-hover,
-    rgb(17 75 202)
-  ); /* Defaults to primary hover */
-  --trails-modal-button-text: rgb(255 255 255); /* white text */
-  --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow */
-
-  /* Percentage Button Colors - Customizable percentage buttons */
-  --trails-percentage-button-bg: rgb(
-    228 228 231
-  ); /* #E4E4E7 - Light gray background */
-  --trails-percentage-button-text: rgb(
-    113 113 123
-  ); /* #71717B - Dark gray text */
-  --trails-percentage-button-hover-bg: rgb(
-    212 212 216
-  ); /* #D4D4D8 - Slightly darker on hover */
-}
-
-/* Utility Classes that use CSS Variables */
-.trails-bg-primary {
-  background-color: var(--trails-bg-primary);
-}
-
-.trails-bg-secondary {
-  background-color: var(--trails-bg-secondary);
-}
-
-.trails-bg-secondary-hover:hover {
-  background-color: var(--trails-bg-secondary-hover);
-}
-
-.trails-focus-border-secondary:focus-within {
-  border-color: var(--trails-bg-secondary-focus-border);
-}
-
-.trails-bg-tertiary {
-  background-color: var(--trails-bg-tertiary);
-}
-
-.trails-bg-card {
-  background-color: var(--trails-bg-card);
-}
-
-.trails-bg-overlay {
-  background-color: var(--trails-bg-overlay);
-}
-
-.trails-text-primary {
-  color: var(--trails-text-primary);
-}
-
-.trails-text-secondary {
-  color: var(--trails-text-secondary);
-}
-
-.trails-text-tertiary {
-  color: var(--trails-text-tertiary);
-}
-
-.trails-text-muted {
-  color: var(--trails-text-muted);
-}
-
-.trails-text-inverse {
-  color: var(--trails-text-inverse);
-}
-
-.trails-border-primary {
-  border-color: var(--trails-border-primary);
-}
-
-.trails-border-secondary {
-  border-color: var(--trails-border-secondary);
-}
-
-.trails-border-tertiary {
-  border-color: var(--trails-border-tertiary);
-}
-
-.trails-hover-bg:hover {
-  background-color: var(--trails-hover-bg);
-}
-
-.trails-hover-text:hover {
-  color: var(--trails-hover-text);
-}
-
-.trails-bg-percentage-button {
-  background-color: var(--trails-percentage-button-bg);
-}
-
-.trails-text-percentage-button {
-  color: var(--trails-percentage-button-text);
-}
-
-.trails-hover-percentage-button:hover {
-  background-color: var(--trails-percentage-button-hover-bg);
-}
-
-/* Font Family Utility Class */
-.trails-font {
-  font-family: var(--trails-font-family);
-}
-
-/* Border Radius Utility Classes */
-.trails-border-radius-widget {
-  border-radius: var(--trails-border-radius-widget);
-}
-
-.trails-border-radius-button {
-  border-radius: var(--trails-border-radius-button);
-}
-
-.trails-border-radius-input {
-  border-radius: var(--trails-border-radius-input);
-}
-
-.trails-border-radius-dropdown {
-  border-radius: var(--trails-border-radius-dropdown);
-}
-
-.trails-border-radius-list {
-  border-radius: var(--trails-border-radius-list);
-}
-
-.trails-border-radius-list-button {
-  border-radius: var(--trails-border-radius-list-button);
-}
-
-.trails-border-radius-large-button {
-  border-radius: var(--trails-border-radius-large-button);
-}
-
-.trails-border-radius-container {
-  border-radius: var(--trails-border-radius-container);
-}
-
-.trails-widget-border {
-  border: var(--trails-widget-border);
-}
-
-/* Input Field Utility Classes */
-.trails-input {
-  background-color: var(--trails-input-bg);
-  border-color: var(--trails-input-border);
-  color: var(--trails-input-text);
-  border-radius: var(--trails-border-radius-input);
-}
-
-.trails-input::placeholder {
-  color: var(--trails-input-placeholder);
-}
-
-.trails-input:focus {
-  border-color: var(--trails-input-focus-border);
-  --tw-ring-color: var(--trails-input-focus-border);
-}
-
-/* Dropdown Utility Classes */
-.trails-dropdown {
-  background-color: var(--trails-dropdown-bg);
-  border-color: var(--trails-dropdown-border);
-  color: var(--trails-dropdown-text);
-  border-radius: var(--trails-border-radius-dropdown);
-}
-
-.trails-dropdown:focus {
-  border-color: var(
-    --trails-dropdown-focus-border,
-    var(--trails-dropdown-border)
-  );
-  --tw-ring-color: var(
-    --trails-dropdown-focus-border,
-    var(--trails-dropdown-border)
-  );
-}
-
-.trails-dropdown-item {
-  color: var(--trails-dropdown-text);
-}
-
-.trails-dropdown-item:hover {
-  background-color: var(--trails-dropdown-hover-bg);
-}
-
-.trails-list-item {
-  background-color: var(--trails-list-item-bg);
-}
-
-.trails-list-item:hover {
-  background-color: var(--trails-list-hover-bg);
-}
-
-.trails-list-item-selected {
-  background-color: var(--trails-list-item-selected-bg);
-}
-
-/* Token List Utility Classes */
-.trails-list {
-  background-color: var(--trails-list-bg);
-  border: 1px solid var(--trails-list-border);
-}
-
-.trails-border-list {
-  border-color: var(--trails-list-border);
-}
-
-.trails-dropdown-item-selected {
-  background-color: var(--trails-dropdown-selected-bg);
-  color: var(--trails-dropdown-selected-text);
-}
-
-/* Light Mode Theme Variables */
-[data-theme="light"] {
-  /* Background Colors */
-  --trails-bg-primary: rgb(255 255 255); /* white */
-  --trails-bg-secondary: rgb(244 244 245); /* #F4F4F5 */
-  --trails-bg-secondary-hover: rgb(228 228 231); /* #E4E4E7 */
-  --trails-bg-secondary-focus-border: rgb(
-    244 244 245
-  ); /* #F4F4F5 - same as secondary bg */
-  --trails-bg-tertiary: rgb(243 244 246); /* gray-100 */
-  --trails-bg-card: rgb(255 255 255); /* white */
-  --trails-bg-overlay: rgb(255 255 255); /* white */
-
-  /* Text Colors */
-  --trails-text-primary: rgb(17 24 39); /* gray-900 */
-  --trails-text-secondary: rgb(75 85 99); /* gray-600 */
-  --trails-text-tertiary: rgb(107 114 128); /* gray-500 */
-  --trails-text-muted: rgb(156 163 175); /* gray-400 */
-  --trails-text-inverse: rgb(255 255 255); /* white */
-
-  /* Border Colors */
-  --trails-border-primary: rgb(229 231 235); /* gray-200 */
-  --trails-border-secondary: rgb(209 213 219); /* gray-300 */
-  --trails-border-tertiary: rgb(243 244 246); /* gray-100 */
-
-  /* Interactive Colors */
-  --trails-hover-bg: rgb(243 244 246); /* gray-100 - darker than gray-50 */
-  --trails-hover-text: rgb(17 24 39); /* gray-900 */
-
-  /* Input Field Colors */
-  --trails-input-bg: rgb(255 255 255); /* white */
-  --trails-input-border: rgb(209 213 219); /* gray-300 */
-  --trails-input-text: rgb(17 24 39); /* gray-900 */
-  --trails-input-placeholder: rgb(156 163 175); /* gray-400 */
-  --trails-input-focus-border: rgb(21 93 252); /* #155DFC */
-
-  /* Dropdown Colors */
-  --trails-dropdown-bg: rgb(255 255 255); /* white */
-  --trails-dropdown-border: rgb(229 231 235); /* gray-200 */
-  --trails-dropdown-text: rgb(17 24 39); /* gray-900 */
-  --trails-dropdown-hover-bg: rgb(249 250 251); /* gray-50 */
-  --trails-dropdown-selected-bg: rgb(243 244 246); /* gray-100 */
-  --trails-dropdown-selected-text: rgb(17 24 39); /* gray-900 */
-  --trails-dropdown-focus-border: rgb(
-    108 0 246
-  ); /* #155DFC - matches input focus border */
-
-  /* Modal Button Colors - Light Mode */
-  --trails-modal-button-bg: var(
-    --trails-primary,
-    rgb(21 93 252)
-  ); /* #155DFC for light mode */
-  --trails-modal-button-hover-bg: var(
-    --trails-primary-hover,
-    rgb(17 75 202)
-  ); /* Darker shade of #155DFC for light mode */
-  --trails-modal-button-text: rgb(255 255 255); /* white text */
-  --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow for light mode */
-
-  /* Token List Colors */
-  --trails-list-bg: rgb(255 255 255); /* white background for token list */
-  --trails-list-border: rgb(229 231 235); /* gray-200 border */
-  --trails-list-hover-bg: rgb(250 250 250); /* #FAFAFA hover */
-  --trails-list-item-bg: transparent; /* transparent background for list items */
-  --trails-list-item-selected-bg: rgb(239 246 255); /* #EFF6FF selected */
-
-  /* Widget Border - Customizable widget border */
-  --trails-widget-border: none; /* Default widget border */
-
-  /* Border Radius - Customizable border radius for the widget */
-  --trails-border-radius-widget: 24px; /* Main widget container border radius */
-  --trails-border-radius-button: 32px; /* Primary buttons border radius */
-  --trails-border-radius-input: 32px; /* Input fields border radius */
-  --trails-border-radius-dropdown: 32px; /* Dropdown border radius */
-  --trails-border-radius-container: 8px; /* Container elements border radius (balance cards, etc.) */
-  --trails-border-radius-list: 8px; /* Token list border radius */
-  --trails-border-radius-list-button: 12px; /* List item buttons border radius */
-  --trails-border-radius-large-button: 16px; /* Large buttons border radius */
-
-  /* Status Colors */
-  --trails-success-bg: rgb(240 253 244); /* green-50 */
-  --trails-success-text: rgb(22 163 74); /* green-600 */
-  --trails-success-border: rgb(187 247 208); /* green-200 */
-
-  --trails-warning-bg: rgb(255 251 235); /* amber-50 */
-  --trails-warning-text: rgb(217 119 6); /* amber-600 */
-  --trails-warning-border: rgb(253 230 138); /* amber-200 */
-
-  --trails-error-bg: rgb(254 242 242); /* red-50 */
-  --trails-error-text: rgb(220 38 38); /* red-600 */
-  --trails-error-border: rgb(254 202 202); /* red-200 */
-
-  /* Shadow */
-  --trails-shadow:
-    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-
-  /* Percentage Button Colors - Light Mode */
-  --trails-percentage-button-bg: rgb(
-    228 228 231
-  ); /* #E4E4E7 - Light gray background */
-  --trails-percentage-button-text: rgb(
-    113 113 123
-  ); /* #71717B - Dark gray text */
-  --trails-percentage-button-hover-bg: rgb(
-    212 212 216
-  ); /* #D4D4D8 - Slightly darker on hover */
-}
-
-/* Dark Mode Theme Variables */
-[data-theme="dark"] {
-  /* Background Colors */
-  --trails-bg-primary: rgb(17 24 39); /* gray-900 */
-  --trails-bg-secondary: rgb(31 41 55); /* gray-800 */
-  --trails-bg-secondary-hover: rgb(55 65 81); /* gray-700 */
-  --trails-bg-secondary-focus-border: rgb(
-    31 41 55
-  ); /* gray-800 - same as secondary bg */
-  --trails-bg-tertiary: rgb(55 65 81); /* gray-700 */
-  --trails-bg-card: rgb(31 41 55); /* gray-800 */
-  --trails-bg-overlay: rgb(17 24 39); /* gray-900 */
-
-  /* Text Colors */
-  --trails-text-primary: rgb(255 255 255); /* white */
-  --trails-text-secondary: rgb(209 213 219); /* gray-300 */
-  --trails-text-tertiary: rgb(156 163 175); /* gray-400 */
-  --trails-text-muted: rgb(107 114 128); /* gray-500 */
-  --trails-text-inverse: rgb(17 24 39); /* gray-900 */
-
-  /* Border Colors */
-  --trails-border-primary: rgb(55 65 81); /* gray-700 */
-  --trails-border-secondary: rgb(75 85 99); /* gray-600 */
-  --trails-border-tertiary: rgb(31 41 55); /* gray-800 */
-
-  /* Interactive Colors */
-  --trails-hover-bg: rgb(55 65 81); /* gray-700 */
-  --trails-hover-text: rgb(255 255 255); /* white */
-
-  /* Input Field Colors */
-  --trails-input-bg: rgb(31 41 55); /* gray-800 */
-  --trails-input-border: rgb(75 85 99); /* gray-600 */
-  --trails-input-text: rgb(255 255 255); /* white */
-  --trails-input-placeholder: rgb(107 114 128); /* gray-500 */
-  --trails-input-focus-border: rgb(21 93 252); /* #155DFC */
-
-  /* Dropdown Colors */
-  --trails-dropdown-bg: rgb(31 41 55); /* gray-800 */
-  --trails-dropdown-border: rgb(75 85 99); /* gray-600 */
-  --trails-dropdown-text: rgb(255 255 255); /* white */
-  --trails-dropdown-hover-bg: rgb(55 65 81); /* gray-700 */
-  --trails-dropdown-selected-bg: rgb(55 65 81); /* gray-700 */
-  --trails-dropdown-selected-text: rgb(255 255 255); /* white */
-  --trails-dropdown-focus-border: rgb(
-    108 0 246
-  ); /* #155DFC - matches input focus border */
-
-  /* Modal Button Colors - Dark Mode */
-  --trails-modal-button-bg: var(
-    --trails-primary,
-    rgb(21 93 252)
-  ); /* #155DFC for dark mode */
-  --trails-modal-button-hover-bg: var(
-    --trails-primary-hover,
-    rgb(17 75 202)
-  ); /* Darker shade of #155DFC for dark mode */
-  --trails-modal-button-text: rgb(255 255 255); /* white text */
-  --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.1); /* subtle shadow for dark mode */
-
-  /* Token List Colors */
-  --trails-list-bg: rgb(31 41 55); /* gray-800 background for token list */
-  --trails-list-border: rgb(55 65 81); /* gray-700 border - good balance */
-  --trails-list-hover-bg: rgb(55 65 81); /* gray-700 hover */
-  --trails-list-item-bg: transparent; /* transparent background for list items */
-  --trails-list-item-selected-bg: rgb(
-    30 58 138
-  ); /* blue-800 selected for dark mode */
-
-  /* Widget Border - Customizable widget border */
-  --trails-widget-border: none; /* Default widget border */
-
-  /* Border Radius - Customizable border radius for the widget */
-  --trails-border-radius-widget: 32px; /* Main widget container border radius */
-  --trails-border-radius-button: 32px; /* Primary buttons border radius */
-  --trails-border-radius-input: 32px; /* Input fields border radius */
-  --trails-border-radius-dropdown: 32px; /* Dropdown border radius */
-  --trails-border-radius-container: 8px; /* Container elements border radius (balance cards, etc.) */
-  --trails-border-radius-list: 8px; /* Token list border radius */
-  --trails-border-radius-list-button: 12px; /* List item buttons border radius */
-  --trails-border-radius-large-button: 16px; /* Large buttons border radius */
-
-  /* Status Colors */
-  --trails-success-bg: rgb(22 163 74 / 0.2); /* green-600 with opacity */
-  --trails-success-text: rgb(134 239 172); /* green-400 */
-  --trails-success-border: rgb(22 163 74 / 0.3); /* green-600 with opacity */
-
-  --trails-warning-bg: rgb(217 119 6 / 0.2); /* amber-600 with opacity */
-  --trails-warning-text: rgb(251 191 36); /* amber-400 */
-  --trails-warning-border: rgb(217 119 6 / 0.3); /* amber-600 with opacity */
-
-  --trails-error-bg: rgb(239 68 68 / 0.2); /* red-500 with opacity */
-  --trails-error-text: rgb(252 165 165); /* red-400 */
-  --trails-error-border: rgb(239 68 68 / 0.3); /* red-500 with opacity */
-
-  /* Shadow */
-  --trails-shadow:
-    0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
-
-  /* Percentage Button Colors - Dark Mode */
-  --trails-percentage-button-bg: rgb(
-    55 65 81
-  ); /* gray-700 - Dark gray background */
-  --trails-percentage-button-text: rgb(
-    209 213 219
-  ); /* gray-300 - Light gray text */
-  --trails-percentage-button-hover-bg: rgb(
-    75 85 99
-  ); /* gray-600 - Slightly lighter on hover */
-}
-
-/* Custom Scrollbar Styles */
-.trails-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: rgb(209 213 219) transparent;
-}
-
-/* Hide scrollbar by default, show on hover */
-.scrollbar-hide {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-.scrollbar-hide::-webkit-scrollbar {
-  display: none; /* Chrome, Safari and Opera */
-}
-
-/* Show scrollbar on hover */
-.scrollbar-hide:hover {
-  -ms-overflow-style: auto; /* IE and Edge */
-  scrollbar-width: thin; /* Firefox */
-  scrollbar-color: rgb(209 213 219) transparent;
-}
-
-.scrollbar-hide:hover::-webkit-scrollbar {
-  display: block;
-  width: 4px;
-  height: 4px;
-}
-
-.scrollbar-hide:hover::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.scrollbar-hide:hover::-webkit-scrollbar-thumb {
-  background-color: rgb(209 213 219);
-  border-radius: 2px;
-}
-
-.scrollbar-hide:hover::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(156 163 175);
-}
-
-/* Dark mode scrollbar on hover */
-[data-theme="dark"] .scrollbar-hide:hover,
-.dark .scrollbar-hide:hover {
-  scrollbar-color: rgb(75 85 99) transparent;
-}
-
-[data-theme="dark"] .scrollbar-hide:hover::-webkit-scrollbar-thumb,
-.dark .scrollbar-hide:hover::-webkit-scrollbar-thumb {
-  background-color: rgb(75 85 99);
-}
-
-[data-theme="dark"] .scrollbar-hide:hover::-webkit-scrollbar-thumb:hover,
-.dark .scrollbar-hide:hover::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(107 114 128);
-}
-
-.trails-scrollbar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.trails-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.trails-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgb(209 213 219);
-  border-radius: 3px;
-  transition: background-color 0.2s ease;
-}
-
-.trails-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(156 163 175);
-}
-
-/* Dark mode scrollbar styles */
-[data-theme="dark"] .trails-scrollbar,
-.dark .trails-scrollbar {
-  scrollbar-color: rgb(75 85 99) transparent;
-}
-
-[data-theme="dark"] .trails-scrollbar::-webkit-scrollbar-thumb,
-.dark .trails-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgb(75 85 99);
-}
-
-[data-theme="dark"] .trails-scrollbar::-webkit-scrollbar-thumb:hover,
-.dark .trails-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(107 114 128);
-}
-
-/* Define dark mode selector for Tailwind */
-[data-theme="dark"] {
-  color-scheme: dark;
-}
-
-[data-theme="light"] {
-  color-scheme: light;
-}
-
-/* Default light theme before JavaScript loads */
-:root:not([data-theme]) {
-  color-scheme: light;
-}
-
-/* Ensure light mode takes precedence when data-theme="light" */
-[data-theme="light"] {
-  color-scheme: light;
-}
-
-/* Note: Components should use proper light/dark classes instead of relying on CSS overrides */
-
-/* Primary Button Override Classes - These will override Tailwind classes */
-/* Light mode primary button */
-.bg-blue-500 {
-  background-color: var(--trails-primary, rgb(21 93 252));
-}
-
-/* Dark mode primary button */
-.dark .bg-blue-500 {
-  background-color: var(
-    --trails-primary,
-    rgb(21 93 252)
-  ); /* #155DFC for dark mode */
-}
-
-/* Light mode hover */
-.hover\:bg-blue-600:hover {
-  background-color: var(--trails-primary-hover, rgb(17 75 202));
-}
-
-/* Dark mode hover */
-.dark .hover\:bg-blue-600:hover {
-  background-color: var(
-    --trails-primary-hover,
-    rgb(17 75 202)
-  ); /* Darker shade of #155DFC for dark mode */
-}
-
-/* Light mode disabled background */
-.disabled\:bg-gray-300:disabled {
-  background-color: var(--trails-primary-disabled, rgb(212 212 216));
-}
-
-/* Dark mode disabled background */
-.dark .disabled\:bg-gray-300:disabled {
-  background-color: rgb(55 65 81); /* gray-700 for dark mode */
-}
-
-/* Light mode disabled text */
-.disabled\:text-gray-500:disabled {
-  color: var(--trails-primary-disabled-text, rgb(107 114 128));
-}
-
-/* Dark mode disabled text */
-.dark .disabled\:text-gray-500:disabled {
-  color: rgb(156 163 175); /* gray-400 for dark mode */
-}
-
-/* Alternative approach: Direct color overrides */
-.trails-btn-primary {
-  background-color: var(--trails-primary, rgb(59 130 246));
-  color: white;
-  transition: all 0.2s ease-in-out;
-  border-radius: var(--trails-border-radius-button);
-}
-
-.trails-btn-primary:hover:not(:disabled) {
-  background-color: var(--trails-primary-hover, rgb(37 99 235));
-}
-
-.trails-btn-primary:disabled {
-  background-color: var(--trails-primary-disabled, rgb(212 212 216));
-  color: var(--trails-primary-disabled-text, rgb(107 114 128));
-  cursor: not-allowed;
-}
-
-/* Modal Button Utility Classes */
-.trails-modal-button {
-  background-color: var(
-    --trails-modal-button-bg,
-    var(--trails-primary, rgb(59 130 246))
-  );
-  color: var(--trails-modal-button-text, rgb(255 255 255));
-  box-shadow: var(--trails-modal-button-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-  transition: all 0.2s ease-in-out;
-  border-radius: var(--trails-border-radius-button);
-}
-
-.trails-modal-button:hover {
-  background-color: var(
-    --trails-modal-button-hover-bg,
-    var(--trails-primary-hover, rgb(37 99 235))
-  );
-}

package/src/widget/index.tsx

@@ -1,28 +0,0 @@
-// Be explicit about what we export
-
-export type { TrailsWidgetProps, TrailsWidgetRef } from "./widget.js"
-export {
-  createModalController,
-  WidgetFundMethod,
-  TrailsWidget,
-} from "./widget.js"
-
-// Export config provider and hooks
-export {
-  TrailsProvider,
-  useTrails,
-  type TrailsConfig,
-  type SequenceEnv,
-} from "./providers/TrailsProvider.js"
-
-// Export modal provider and hooks
-export {
-  TrailsModalProvider,
-  useTrailsModal,
-  type TrailsModalContextType,
-  type ModalSelectionParams,
-} from "./providers/TrailsModalProvider.js"
-
-// Export TrailsHookModal for use with useTrailsSendTransaction
-// Must be rendered inside WagmiProvider for the modal to work
-export { TrailsHookModal } from "./components/TrailsHookModal.js"