@sudobility/workflow-components 1.0.10 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.esm.js.map +1 -1
  2. package/dist/index.umd.js.map +1 -1
  3. package/dist/status-badge.d.ts +2 -3
  4. package/dist/status-badge.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/src/status-badge.tsx +2 -2
package/dist/index.umd.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.umd.js","sources":["../node_modules/react/cjs/react-jsx-runtime.production.js","../node_modules/react/cjs/react-jsx-runtime.development.js","../node_modules/react/jsx-runtime.js","../src/blockquote.tsx","../src/checklist-progress.tsx","../src/form-builder.tsx","../src/form-template.tsx","../src/form-validator.tsx","../src/network-status.tsx","../src/process-diagram.tsx","../src/quote-generator.tsx","../src/safety-checklist.tsx","../node_modules/@sudobility/design/dist/index.esm.js","../src/status-badge.tsx","../src/sticky-note.tsx","../src/system-status.tsx"],"sourcesContent":["/**\n * @license React\n * react-jsx-runtime.production.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\nvar REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\");\nfunction jsxProd(type, config, maybeKey) {\n var key = null;\n void 0 !== maybeKey && (key = \"\" + maybeKey);\n void 0 !== config.key && (key = \"\" + config.key);\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n config = maybeKey.ref;\n return {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n ref: void 0 !== config ? config : null,\n props: maybeKey\n };\n}\nexports.Fragment = REACT_FRAGMENT_TYPE;\nexports.jsx = jsxProd;\nexports.jsxs = jsxProd;\n","/**\n * @license React\n * react-jsx-runtime.development.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n function getComponentNameFromType(type) {\n if (null == type) return null;\n if (\"function\" === typeof type)\n return type.$$typeof === REACT_CLIENT_REFERENCE\n ? null\n : type.displayName || type.name || null;\n if (\"string\" === typeof type) return type;\n switch (type) {\n case REACT_FRAGMENT_TYPE:\n return \"Fragment\";\n case REACT_PROFILER_TYPE:\n return \"Profiler\";\n case REACT_STRICT_MODE_TYPE:\n return \"StrictMode\";\n case REACT_SUSPENSE_TYPE:\n return \"Suspense\";\n case REACT_SUSPENSE_LIST_TYPE:\n return \"SuspenseList\";\n case REACT_ACTIVITY_TYPE:\n return \"Activity\";\n }\n if (\"object\" === typeof type)\n switch (\n (\"number\" === typeof type.tag &&\n console.error(\n \"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.\"\n ),\n type.$$typeof)\n ) {\n case REACT_PORTAL_TYPE:\n return \"Portal\";\n case REACT_CONTEXT_TYPE:\n return type.displayName || \"Context\";\n case REACT_CONSUMER_TYPE:\n return (type._context.displayName || \"Context\") + \".Consumer\";\n case REACT_FORWARD_REF_TYPE:\n var innerType = type.render;\n type = type.displayName;\n type ||\n ((type = innerType.displayName || innerType.name || \"\"),\n (type = \"\" !== type ? \"ForwardRef(\" + type + \")\" : \"ForwardRef\"));\n return type;\n case REACT_MEMO_TYPE:\n return (\n (innerType = type.displayName || null),\n null !== innerType\n ? innerType\n : getComponentNameFromType(type.type) || \"Memo\"\n );\n case REACT_LAZY_TYPE:\n innerType = type._payload;\n type = type._init;\n try {\n return getComponentNameFromType(type(innerType));\n } catch (x) {}\n }\n return null;\n }\n function testStringCoercion(value) {\n return \"\" + value;\n }\n function checkKeyStringCoercion(value) {\n try {\n testStringCoercion(value);\n var JSCompiler_inline_result = !1;\n } catch (e) {\n JSCompiler_inline_result = !0;\n }\n if (JSCompiler_inline_result) {\n JSCompiler_inline_result = console;\n var JSCompiler_temp_const = JSCompiler_inline_result.error;\n var JSCompiler_inline_result$jscomp$0 =\n (\"function\" === typeof Symbol &&\n Symbol.toStringTag &&\n value[Symbol.toStringTag]) ||\n value.constructor.name ||\n \"Object\";\n JSCompiler_temp_const.call(\n JSCompiler_inline_result,\n \"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.\",\n JSCompiler_inline_result$jscomp$0\n );\n return testStringCoercion(value);\n }\n }\n function getTaskName(type) {\n if (type === REACT_FRAGMENT_TYPE) return \"<>\";\n if (\n \"object\" === typeof type &&\n null !== type &&\n type.$$typeof === REACT_LAZY_TYPE\n )\n return \"<...>\";\n try {\n var name = getComponentNameFromType(type);\n return name ? \"<\" + name + \">\" : \"<...>\";\n } catch (x) {\n return \"<...>\";\n }\n }\n function getOwner() {\n var dispatcher = ReactSharedInternals.A;\n return null === dispatcher ? null : dispatcher.getOwner();\n }\n function UnknownOwner() {\n return Error(\"react-stack-top-frame\");\n }\n function hasValidKey(config) {\n if (hasOwnProperty.call(config, \"key\")) {\n var getter = Object.getOwnPropertyDescriptor(config, \"key\").get;\n if (getter && getter.isReactWarning) return !1;\n }\n return void 0 !== config.key;\n }\n function defineKeyPropWarningGetter(props, displayName) {\n function warnAboutAccessingKey() {\n specialPropKeyWarningShown ||\n ((specialPropKeyWarningShown = !0),\n console.error(\n \"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)\",\n displayName\n ));\n }\n warnAboutAccessingKey.isReactWarning = !0;\n Object.defineProperty(props, \"key\", {\n get: warnAboutAccessingKey,\n configurable: !0\n });\n }\n function elementRefGetterWithDeprecationWarning() {\n var componentName = getComponentNameFromType(this.type);\n didWarnAboutElementRef[componentName] ||\n ((didWarnAboutElementRef[componentName] = !0),\n console.error(\n \"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.\"\n ));\n componentName = this.props.ref;\n return void 0 !== componentName ? componentName : null;\n }\n function ReactElement(type, key, props, owner, debugStack, debugTask) {\n var refProp = props.ref;\n type = {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n props: props,\n _owner: owner\n };\n null !== (void 0 !== refProp ? refProp : null)\n ? Object.defineProperty(type, \"ref\", {\n enumerable: !1,\n get: elementRefGetterWithDeprecationWarning\n })\n : Object.defineProperty(type, \"ref\", { enumerable: !1, value: null });\n type._store = {};\n Object.defineProperty(type._store, \"validated\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: 0\n });\n Object.defineProperty(type, \"_debugInfo\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: null\n });\n Object.defineProperty(type, \"_debugStack\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: debugStack\n });\n Object.defineProperty(type, \"_debugTask\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: debugTask\n });\n Object.freeze && (Object.freeze(type.props), Object.freeze(type));\n return type;\n }\n function jsxDEVImpl(\n type,\n config,\n maybeKey,\n isStaticChildren,\n debugStack,\n debugTask\n ) {\n var children = config.children;\n if (void 0 !== children)\n if (isStaticChildren)\n if (isArrayImpl(children)) {\n for (\n isStaticChildren = 0;\n isStaticChildren < children.length;\n isStaticChildren++\n )\n validateChildKeys(children[isStaticChildren]);\n Object.freeze && Object.freeze(children);\n } else\n console.error(\n \"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.\"\n );\n else validateChildKeys(children);\n if (hasOwnProperty.call(config, \"key\")) {\n children = getComponentNameFromType(type);\n var keys = Object.keys(config).filter(function (k) {\n return \"key\" !== k;\n });\n isStaticChildren =\n 0 < keys.length\n ? \"{key: someKey, \" + keys.join(\": ..., \") + \": ...}\"\n : \"{key: someKey}\";\n didWarnAboutKeySpread[children + isStaticChildren] ||\n ((keys =\n 0 < keys.length ? \"{\" + keys.join(\": ..., \") + \": ...}\" : \"{}\"),\n console.error(\n 'A props object containing a \"key\" prop is being spread into JSX:\\n let props = %s;\\n <%s {...props} />\\nReact keys must be passed directly to JSX without using spread:\\n let props = %s;\\n <%s key={someKey} {...props} />',\n isStaticChildren,\n children,\n keys,\n children\n ),\n (didWarnAboutKeySpread[children + isStaticChildren] = !0));\n }\n children = null;\n void 0 !== maybeKey &&\n (checkKeyStringCoercion(maybeKey), (children = \"\" + maybeKey));\n hasValidKey(config) &&\n (checkKeyStringCoercion(config.key), (children = \"\" + config.key));\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n children &&\n defineKeyPropWarningGetter(\n maybeKey,\n \"function\" === typeof type\n ? type.displayName || type.name || \"Unknown\"\n : type\n );\n return ReactElement(\n type,\n children,\n maybeKey,\n getOwner(),\n debugStack,\n debugTask\n );\n }\n function validateChildKeys(node) {\n isValidElement(node)\n ? node._store && (node._store.validated = 1)\n : \"object\" === typeof node &&\n null !== node &&\n node.$$typeof === REACT_LAZY_TYPE &&\n (\"fulfilled\" === node._payload.status\n ? isValidElement(node._payload.value) &&\n node._payload.value._store &&\n (node._payload.value._store.validated = 1)\n : node._store && (node._store.validated = 1));\n }\n function isValidElement(object) {\n return (\n \"object\" === typeof object &&\n null !== object &&\n object.$$typeof === REACT_ELEMENT_TYPE\n );\n }\n var React = require(\"react\"),\n REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_PORTAL_TYPE = Symbol.for(\"react.portal\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\"),\n REACT_STRICT_MODE_TYPE = Symbol.for(\"react.strict_mode\"),\n REACT_PROFILER_TYPE = Symbol.for(\"react.profiler\"),\n REACT_CONSUMER_TYPE = Symbol.for(\"react.consumer\"),\n REACT_CONTEXT_TYPE = Symbol.for(\"react.context\"),\n REACT_FORWARD_REF_TYPE = Symbol.for(\"react.forward_ref\"),\n REACT_SUSPENSE_TYPE = Symbol.for(\"react.suspense\"),\n REACT_SUSPENSE_LIST_TYPE = Symbol.for(\"react.suspense_list\"),\n REACT_MEMO_TYPE = Symbol.for(\"react.memo\"),\n REACT_LAZY_TYPE = Symbol.for(\"react.lazy\"),\n REACT_ACTIVITY_TYPE = Symbol.for(\"react.activity\"),\n REACT_CLIENT_REFERENCE = Symbol.for(\"react.client.reference\"),\n ReactSharedInternals =\n React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,\n hasOwnProperty = Object.prototype.hasOwnProperty,\n isArrayImpl = Array.isArray,\n createTask = console.createTask\n ? console.createTask\n : function () {\n return null;\n };\n React = {\n react_stack_bottom_frame: function (callStackForError) {\n return callStackForError();\n }\n };\n var specialPropKeyWarningShown;\n var didWarnAboutElementRef = {};\n var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(\n React,\n UnknownOwner\n )();\n var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));\n var didWarnAboutKeySpread = {};\n exports.Fragment = REACT_FRAGMENT_TYPE;\n exports.jsx = function (type, config, maybeKey) {\n var trackActualOwner =\n 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n return jsxDEVImpl(\n type,\n config,\n maybeKey,\n !1,\n trackActualOwner\n ? Error(\"react-stack-top-frame\")\n : unknownOwnerDebugStack,\n trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n );\n };\n exports.jsxs = function (type, config, maybeKey) {\n var trackActualOwner =\n 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n return jsxDEVImpl(\n type,\n config,\n maybeKey,\n !0,\n trackActualOwner\n ? Error(\"react-stack-top-frame\")\n : unknownOwnerDebugStack,\n trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n );\n };\n })();\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-jsx-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n","import React from 'react';\nimport { cn } from '@sudobility/components';\n\nexport interface BlockquoteProps {\n /** Quote content */\n children: React.ReactNode;\n /** Citation/author */\n cite?: string;\n /** Variant style */\n variant?: 'default' | 'bordered' | 'accent';\n /** Size variant */\n size?: 'sm' | 'md' | 'lg';\n /** Additional className */\n className?: string;\n}\n\n/**\n * Blockquote Component\n *\n * Displays quoted text with optional citation and various styling options.\n * Uses semantic HTML for proper document structure.\n *\n * @example\n * ```tsx\n * <Blockquote cite=\"John Doe\">\n * This is a great quote about something important.\n * </Blockquote>\n * ```\n *\n * @example\n * ```tsx\n * <Blockquote variant=\"accent\" size=\"lg\">\n * Innovation distinguishes between a leader and a follower.\n * </Blockquote>\n * ```\n */\nexport const Blockquote: React.FC<BlockquoteProps> = ({\n children,\n cite,\n variant = 'default',\n size = 'md',\n className,\n}) => {\n // Size configurations\n const sizeClasses = {\n sm: 'text-sm p-3',\n md: 'text-base p-4',\n lg: 'text-lg p-6',\n };\n\n const citeSize = {\n sm: 'text-xs',\n md: 'text-sm',\n lg: 'text-base',\n };\n\n // Variant configurations\n const variantClasses = {\n default:\n 'border-l-4 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50',\n bordered:\n 'border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800',\n accent:\n 'border-l-4 border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/20',\n };\n\n return (\n <blockquote\n className={cn(\n 'rounded-r-lg',\n sizeClasses[size],\n variantClasses[variant],\n className\n )}\n >\n <p className='text-gray-800 dark:text-gray-200 italic'>{children}</p>\n {cite && (\n <footer\n className={cn(\n 'mt-2 text-gray-600 dark:text-gray-400',\n citeSize[size]\n )}\n >\n — <cite className='not-italic font-medium'>{cite}</cite>\n </footer>\n )}\n </blockquote>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UchecklistUprogress Component\n *\n * A reusable UchecklistUprogress component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UchecklistUprogress className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/checklist-progress}\n */\n\nexport interface UchecklistUprogressProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UchecklistUprogress = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UchecklistUprogressProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UchecklistUprogress'\n >\n {children || 'UchecklistUprogress Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UformUbuilder Component\n *\n * A reusable UformUbuilder component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UformUbuilder className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/form-builder}\n */\n\nexport interface UformUbuilderProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UformUbuilder = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UformUbuilderProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UformUbuilder'\n >\n {children || 'UformUbuilder Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UformUtemplate Component\n *\n * A reusable UformUtemplate component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UformUtemplate className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/form-template}\n */\n\nexport interface UformUtemplateProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UformUtemplate = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UformUtemplateProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UformUtemplate'\n >\n {children || 'UformUtemplate Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UformUvalidator Component\n *\n * A reusable UformUvalidator component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UformUvalidator className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/form-validator}\n */\n\nexport interface UformUvalidatorProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UformUvalidator = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UformUvalidatorProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UformUvalidator'\n >\n {children || 'UformUvalidator Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UnetworkUstatus Component\n *\n * A reusable UnetworkUstatus component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UnetworkUstatus className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/network-status}\n */\n\nexport interface UnetworkUstatusProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UnetworkUstatus = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UnetworkUstatusProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UnetworkUstatus'\n >\n {children || 'UnetworkUstatus Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UprocessUdiagram Component\n *\n * A reusable UprocessUdiagram component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UprocessUdiagram className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/process-diagram}\n */\n\nexport interface UprocessUdiagramProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UprocessUdiagram = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UprocessUdiagramProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UprocessUdiagram'\n >\n {children || 'UprocessUdiagram Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * QuoteGenerator Component\n *\n * Insurance component with full dark mode support.\n *\n * @component\n * @example\n * ```tsx\n * <QuoteGenerator className=\"custom-class\" />\n * ```\n */\nexport interface QuoteGeneratorProps {\n className?: string;\n children?: React.ReactNode;\n disabled?: boolean;\n}\n\nexport const QuoteGenerator = ({\n className,\n children,\n disabled,\n}: QuoteGeneratorProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n className\n )}\n role='region'\n aria-label='QuoteGenerator'\n >\n {children || 'QuoteGenerator Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * SafetyChecklist Component\n *\n * Construction component with full dark mode support.\n *\n * @component\n * @example\n * ```tsx\n * <SafetyChecklist className=\"custom-class\" />\n * ```\n */\nexport interface SafetyChecklistProps {\n className?: string;\n children?: React.ReactNode;\n disabled?: boolean;\n}\n\nexport const SafetyChecklist = ({\n className,\n children,\n disabled,\n}: SafetyChecklistProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n className\n )}\n role='region'\n aria-label='SafetyChecklist'\n >\n {children || 'SafetyChecklist Component'}\n </div>\n );\n};\n","import { clsx as E } from \"clsx\";\nimport { twMerge as I } from \"tailwind-merge\";\nconst o = {\n // Blue palette - primary brand color\n blue: {\n 50: \"#eff6ff\",\n 100: \"#dbeafe\",\n 200: \"#bfdbfe\",\n 300: \"#93c5fd\",\n 400: \"#60a5fa\",\n 500: \"#3b82f6\",\n 600: \"#2563eb\",\n 700: \"#1d4ed8\",\n 800: \"#1e40af\",\n 900: \"#1e3a8a\",\n 950: \"#172554\"\n },\n // Purple palette - secondary brand color\n purple: {\n 50: \"#faf5ff\",\n 100: \"#f3e8ff\",\n 200: \"#e9d5ff\",\n 300: \"#d8b4fe\",\n 400: \"#c084fc\",\n 500: \"#a855f7\",\n 600: \"#9333ea\",\n 700: \"#7c3aed\",\n 800: \"#6b21a8\",\n 900: \"#581c87\",\n 950: \"#3b0764\"\n },\n // Neutral palette - backgrounds, text, borders\n neutral: {\n 0: \"#ffffff\",\n 50: \"#f9fafb\",\n 100: \"#f3f4f6\",\n 200: \"#e5e7eb\",\n 300: \"#d1d5db\",\n 400: \"#9ca3af\",\n 500: \"#6b7280\",\n 600: \"#4b5563\",\n 700: \"#374151\",\n 800: \"#1f2937\",\n 900: \"#111827\",\n 950: \"#030712\"\n },\n // Semantic state colors\n red: {\n 50: \"#fef2f2\",\n 100: \"#fee2e2\",\n 200: \"#fecaca\",\n 300: \"#fca5a5\",\n 400: \"#f87171\",\n 500: \"#ef4444\",\n 600: \"#dc2626\",\n 700: \"#b91c1c\",\n 800: \"#991b1b\",\n 900: \"#7f1d1d\",\n 950: \"#450a0a\"\n },\n orange: {\n 50: \"#fff7ed\",\n 100: \"#ffedd5\",\n 200: \"#fed7aa\",\n 300: \"#fdba74\",\n 400: \"#fb923c\",\n 500: \"#f97316\",\n 600: \"#ea580c\",\n 700: \"#c2410c\",\n 800: \"#9a3412\",\n 900: \"#7c2d12\",\n 950: \"#431407\"\n },\n amber: {\n 50: \"#fffbeb\",\n 100: \"#fef3c7\",\n 200: \"#fde68a\",\n 300: \"#fcd34d\",\n 400: \"#fbbf24\",\n 500: \"#f59e0b\",\n 600: \"#d97706\",\n 700: \"#b45309\",\n 800: \"#92400e\",\n 900: \"#78350f\",\n 950: \"#451a03\"\n },\n green: {\n 50: \"#f0fdf4\",\n 100: \"#dcfce7\",\n 200: \"#bbf7d0\",\n 300: \"#86efac\",\n 400: \"#4ade80\",\n 500: \"#22c55e\",\n 600: \"#16a34a\",\n 700: \"#15803d\",\n 800: \"#166534\",\n 900: \"#14532d\",\n 950: \"#052e16\"\n },\n // Web3 specific colors\n web3: {\n ethereum: {\n light: \"#627eea\",\n DEFAULT: \"#627eea\",\n dark: \"#4c63d2\"\n },\n solana: {\n light: \"#9945ff\",\n DEFAULT: \"#9945ff\",\n dark: \"#7d37d9\"\n },\n polygon: {\n light: \"#8247e5\",\n DEFAULT: \"#8247e5\",\n dark: \"#6a3bc0\"\n },\n bitcoin: {\n light: \"#f7931a\",\n DEFAULT: \"#f7931a\",\n dark: \"#e07f00\"\n },\n binance: {\n light: \"#f3ba2f\",\n DEFAULT: \"#f3ba2f\",\n dark: \"#d4a423\"\n },\n cardano: {\n light: \"#0033ad\",\n DEFAULT: \"#0033ad\",\n dark: \"#002488\"\n },\n avalanche: {\n light: \"#e84142\",\n DEFAULT: \"#e84142\",\n dark: \"#d1383a\"\n },\n fantom: {\n light: \"#1969ff\",\n DEFAULT: \"#1969ff\",\n dark: \"#0052ff\"\n },\n arbitrum: {\n light: \"#2d374b\",\n DEFAULT: \"#2d374b\",\n dark: \"#1e2532\"\n },\n optimism: {\n light: \"#ff0420\",\n DEFAULT: \"#ff0420\",\n dark: \"#e6031c\"\n },\n chainlink: {\n light: \"#375bd2\",\n DEFAULT: \"#375bd2\",\n dark: \"#2d4bb5\"\n },\n cosmos: {\n light: \"#2e3148\",\n DEFAULT: \"#2e3148\",\n dark: \"#1f2030\"\n },\n polkadot: {\n light: \"#e6007a\",\n DEFAULT: \"#e6007a\",\n dark: \"#cc006e\"\n }\n }\n}, A = {\n // Text colors\n text: {\n primary: {\n light: o.neutral[900],\n dark: o.neutral[0]\n },\n secondary: {\n light: o.neutral[600],\n dark: o.neutral[400]\n },\n tertiary: {\n light: o.neutral[500],\n dark: o.neutral[500]\n },\n disabled: {\n light: o.neutral[400],\n dark: o.neutral[600]\n },\n inverse: {\n light: o.neutral[0],\n dark: o.neutral[900]\n },\n link: {\n light: o.blue[600],\n dark: o.blue[400]\n },\n linkHover: {\n light: o.blue[700],\n dark: o.blue[300]\n }\n },\n // Background colors\n background: {\n primary: {\n light: o.neutral[0],\n dark: o.neutral[900]\n },\n secondary: {\n light: o.neutral[50],\n dark: o.neutral[800]\n },\n tertiary: {\n light: o.neutral[100],\n dark: o.neutral[700]\n },\n elevated: {\n light: o.neutral[0],\n dark: o.neutral[800]\n },\n overlay: {\n light: \"rgba(0, 0, 0, 0.5)\",\n dark: \"rgba(0, 0, 0, 0.7)\"\n },\n page: {\n light: o.neutral[50],\n dark: o.neutral[950]\n }\n },\n // Border colors\n border: {\n primary: {\n light: o.neutral[200],\n dark: o.neutral[700]\n },\n secondary: {\n light: o.neutral[100],\n dark: o.neutral[800]\n },\n focus: {\n light: o.blue[500],\n dark: o.blue[400]\n },\n error: {\n light: o.red[300],\n dark: o.red[700]\n }\n },\n // Brand colors\n brand: {\n primary: {\n light: o.blue[600],\n dark: o.blue[500]\n },\n primaryHover: {\n light: o.blue[700],\n dark: o.blue[400]\n },\n secondary: {\n light: o.purple[600],\n dark: o.purple[500]\n },\n secondaryHover: {\n light: o.purple[700],\n dark: o.purple[400]\n }\n },\n // State colors\n state: {\n success: {\n light: o.green[600],\n dark: o.green[500]\n },\n successBg: {\n light: o.green[100],\n dark: `${o.green[900]}/30`\n },\n successText: {\n light: o.green[700],\n dark: o.green[300]\n },\n warning: {\n light: o.orange[500],\n dark: o.orange[400]\n },\n warningBg: {\n light: o.orange[100],\n dark: `${o.orange[900]}/30`\n },\n warningText: {\n light: o.orange[700],\n dark: o.orange[300]\n },\n attention: {\n light: o.amber[500],\n dark: o.amber[400]\n },\n attentionBg: {\n light: o.amber[100],\n dark: `${o.amber[900]}/30`\n },\n attentionText: {\n light: o.amber[700],\n dark: o.amber[300]\n },\n error: {\n light: o.red[600],\n dark: o.red[500]\n },\n errorBg: {\n light: o.red[100],\n dark: `${o.red[900]}/30`\n },\n errorText: {\n light: o.red[700],\n dark: o.red[300]\n },\n info: {\n light: o.blue[600],\n dark: o.blue[500]\n },\n infoBg: {\n light: o.blue[100],\n dark: `${o.blue[900]}/30`\n },\n infoText: {\n light: o.blue[700],\n dark: o.blue[300]\n },\n selected: {\n light: o.blue[100],\n dark: `${o.blue[900]}/30`\n }\n },\n // Action colors\n action: {\n primary: {\n light: o.blue[600],\n dark: o.blue[600]\n },\n primaryHover: {\n light: o.blue[700],\n dark: o.blue[700]\n },\n secondary: {\n light: o.neutral[100],\n dark: o.neutral[800]\n },\n danger: {\n light: o.red[600],\n dark: o.red[600]\n }\n },\n // Web3 specific colors\n web3: {\n ethereum: {\n light: o.web3.ethereum.light,\n dark: o.web3.ethereum.dark\n },\n ethereumBg: {\n light: `${o.blue[100]}`,\n dark: `${o.blue[900]}/30`\n },\n solana: {\n light: o.web3.solana.light,\n dark: o.web3.solana.dark\n },\n solanaBg: {\n light: `${o.purple[100]}`,\n dark: `${o.purple[900]}/30`\n },\n polygon: {\n light: o.web3.polygon.light,\n dark: o.web3.polygon.dark\n },\n polygonBg: {\n light: `${o.purple[50]}`,\n dark: `${o.purple[900]}/20`\n },\n bitcoin: {\n light: o.web3.bitcoin.light,\n dark: o.web3.bitcoin.dark\n },\n bitcoinBg: {\n light: `${o.orange[100]}`,\n dark: `${o.orange[900]}/30`\n },\n binance: {\n light: o.web3.binance.light,\n dark: o.web3.binance.dark\n },\n binanceBg: {\n light: `${o.amber[100]}`,\n dark: `${o.amber[900]}/30`\n },\n cardano: {\n light: o.web3.cardano.light,\n dark: o.web3.cardano.dark\n },\n cardanoBg: {\n light: `${o.blue[50]}`,\n dark: `${o.blue[900]}/20`\n },\n avalanche: {\n light: o.web3.avalanche.light,\n dark: o.web3.avalanche.dark\n },\n avalancheBg: {\n light: `${o.red[100]}`,\n dark: `${o.red[900]}/30`\n },\n arbitrum: {\n light: o.web3.arbitrum.light,\n dark: o.web3.arbitrum.dark\n },\n arbitrumBg: {\n light: `${o.neutral[100]}`,\n dark: `${o.neutral[800]}/50`\n },\n optimism: {\n light: o.web3.optimism.light,\n dark: o.web3.optimism.dark\n },\n optimismBg: {\n light: `${o.red[50]}`,\n dark: `${o.red[900]}/20`\n }\n }\n}, h = {\n button: {\n // Primary button - main brand actions\n primary: {\n base: \"bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white border-transparent\",\n dark: \"dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white\",\n focus: \"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-blue-400\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600\"\n },\n // Secondary button - alternative actions\n secondary: {\n base: \"bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-900 border-transparent\",\n dark: \"dark:bg-gray-800 dark:hover:bg-gray-700 dark:active:bg-gray-600 dark:text-gray-50\",\n focus: \"focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Outline button - secondary emphasis\n outline: {\n base: \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border-gray-300\",\n dark: \"dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600\",\n focus: \"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Ghost button - minimal emphasis\n ghost: {\n base: \"bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border-transparent\",\n dark: \"dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-300\",\n focus: \"focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Destructive button - dangerous actions\n destructive: {\n base: \"bg-red-600 hover:bg-red-700 active:bg-red-800 text-white border-transparent\",\n dark: \"dark:bg-red-600 dark:hover:bg-red-700 dark:active:bg-red-800 dark:text-white\",\n focus: \"focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Success button - positive actions\n success: {\n base: \"bg-green-600 hover:bg-green-700 active:bg-green-800 text-white border-transparent\",\n dark: \"dark:bg-green-600 dark:hover:bg-green-700 dark:active:bg-green-800 dark:text-white\",\n focus: \"focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Link button - text-like appearance\n link: {\n base: \"bg-transparent hover:bg-transparent active:bg-transparent text-blue-600 border-transparent underline-offset-4 hover:underline\",\n dark: \"dark:text-blue-400\",\n focus: \"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\"\n },\n // Gradient variants for special emphasis\n gradient: {\n primary: \"bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-transparent shadow-lg hover:shadow-xl\",\n secondary: \"bg-gradient-to-r from-gray-100 to-gray-200 hover:from-gray-200 hover:to-gray-300 text-gray-900 border-transparent\",\n success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white border-transparent\"\n }\n },\n card: {\n // Default card styling\n default: {\n base: \"bg-white border-gray-200\",\n dark: \"dark:bg-gray-800 dark:border-gray-700\",\n hover: \"hover:shadow-md transition-shadow duration-200\"\n },\n // Elevated card with shadow\n elevated: {\n base: \"bg-white shadow-sm border-gray-200\",\n dark: \"dark:bg-gray-800 dark:border-gray-700\",\n hover: \"hover:shadow-lg transition-shadow duration-200\"\n },\n // Interactive card that can be clicked\n interactive: {\n base: \"bg-white border-gray-200 cursor-pointer\",\n dark: \"dark:bg-gray-800 dark:border-gray-700\",\n hover: \"hover:bg-gray-50 hover:shadow-md dark:hover:bg-gray-700 transition-all duration-200\",\n focus: \"focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n },\n // Success state card\n success: {\n base: \"bg-green-50 border-green-200\",\n dark: \"dark:bg-green-900/20 dark:border-green-800\",\n text: \"text-green-800 dark:text-green-200\"\n },\n // Warning state card\n warning: {\n base: \"bg-orange-50 border-orange-200\",\n dark: \"dark:bg-orange-900/20 dark:border-orange-800\",\n text: \"text-orange-800 dark:text-orange-200\"\n },\n // Attention state card\n attention: {\n base: \"bg-amber-50 border-amber-200\",\n dark: \"dark:bg-amber-900/20 dark:border-amber-800\",\n text: \"text-amber-800 dark:text-amber-200\"\n },\n // Error state card\n error: {\n base: \"bg-red-50 border-red-200\",\n dark: \"dark:bg-red-900/20 dark:border-red-800\",\n text: \"text-red-800 dark:text-red-200\"\n }\n },\n badge: {\n // Default badge\n default: {\n base: \"bg-gray-100 text-gray-800\",\n dark: \"dark:bg-gray-800 dark:text-gray-300\"\n },\n // Primary badge\n primary: {\n base: \"bg-blue-100 text-blue-800\",\n dark: \"dark:bg-blue-900/30 dark:text-blue-300\"\n },\n // Success badge\n success: {\n base: \"bg-green-100 text-green-800\",\n dark: \"dark:bg-green-900/30 dark:text-green-300\"\n },\n // Warning badge\n warning: {\n base: \"bg-orange-100 text-orange-800\",\n dark: \"dark:bg-orange-900/30 dark:text-orange-300\"\n },\n // Attention badge\n attention: {\n base: \"bg-amber-100 text-amber-800\",\n dark: \"dark:bg-amber-900/30 dark:text-amber-300\"\n },\n // Error badge\n error: {\n base: \"bg-red-100 text-red-800\",\n dark: \"dark:bg-red-900/30 dark:text-red-300\"\n },\n // Web3 specific badges\n ethereum: {\n base: \"bg-blue-100 text-blue-800\",\n dark: \"dark:bg-blue-900/30 dark:text-blue-300\"\n },\n solana: {\n base: \"bg-purple-100 text-purple-800\",\n dark: \"dark:bg-purple-900/30 dark:text-purple-300\"\n },\n polygon: {\n base: \"bg-purple-50 text-purple-800\",\n dark: \"dark:bg-purple-900/20 dark:text-purple-300\"\n },\n bitcoin: {\n base: \"bg-orange-100 text-orange-800\",\n dark: \"dark:bg-orange-900/30 dark:text-orange-300\"\n },\n binance: {\n base: \"bg-amber-100 text-amber-800\",\n dark: \"dark:bg-amber-900/30 dark:text-amber-300\"\n },\n cardano: {\n base: \"bg-blue-50 text-blue-900\",\n dark: \"dark:bg-blue-900/20 dark:text-blue-200\"\n },\n avalanche: {\n base: \"bg-red-100 text-red-800\",\n dark: \"dark:bg-red-900/30 dark:text-red-300\"\n },\n arbitrum: {\n base: \"bg-gray-100 text-gray-800\",\n dark: \"dark:bg-gray-800/50 dark:text-gray-300\"\n },\n optimism: {\n base: \"bg-red-50 text-red-900\",\n dark: \"dark:bg-red-900/20 dark:text-red-200\"\n }\n },\n input: {\n // Default input styling\n default: {\n base: \"bg-white border-gray-300 text-gray-900 placeholder:text-gray-500\",\n dark: \"dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100 dark:placeholder:text-gray-400\",\n focus: \"focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400\",\n error: \"border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700\"\n },\n // Search input styling\n search: {\n base: \"bg-gray-50 border-gray-200 text-gray-900 placeholder:text-gray-500\",\n dark: \"dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder:text-gray-400\",\n focus: \"focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:bg-gray-900\"\n }\n },\n alert: {\n // Info alert\n info: {\n base: \"bg-blue-50 border-blue-200 text-blue-800\",\n dark: \"dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-200\",\n icon: \"text-blue-600 dark:text-blue-400\"\n },\n // Success alert\n success: {\n base: \"bg-green-50 border-green-200 text-green-800\",\n dark: \"dark:bg-green-900/20 dark:border-green-800 dark:text-green-200\",\n icon: \"text-green-600 dark:text-green-400\"\n },\n // Warning alert\n warning: {\n base: \"bg-orange-50 border-orange-200 text-orange-800\",\n dark: \"dark:bg-orange-900/20 dark:border-orange-800 dark:text-orange-200\",\n icon: \"text-orange-600 dark:text-orange-400\"\n },\n // Attention alert\n attention: {\n base: \"bg-amber-50 border-amber-200 text-amber-800\",\n dark: \"dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-200\",\n icon: \"text-amber-600 dark:text-amber-400\"\n },\n // Error alert\n error: {\n base: \"bg-red-50 border-red-200 text-red-800\",\n dark: \"dark:bg-red-900/20 dark:border-red-800 dark:text-red-200\",\n icon: \"text-red-600 dark:text-red-400\"\n }\n }\n}, T = (t, r, a = [\"focus\"]) => {\n const i = h[t][r];\n return i ? [\n i.base,\n i.dark,\n ...a.map((l) => i[l]).filter(Boolean)\n ].join(\" \") : (console.warn(`Color variant '${r}' not found for component '${t}'`), \"\");\n}, L = (t, r, a, n) => {\n const i = [`bg-${t}`, `text-${r}`];\n return a && i.push(`border-${a}`), n?.hover && (n.hover.background && i.push(`hover:bg-${n.hover.background}`), n.hover.text && i.push(`hover:text-${n.hover.text}`), n.hover.border && i.push(`hover:border-${n.hover.border}`)), n?.focus?.ring && i.push(`focus:ring-2 focus:ring-${n.focus.ring}`), n?.dark && (n.dark.background && i.push(`dark:bg-${n.dark.background}`), n.dark.text && i.push(`dark:text-${n.dark.text}`), n.dark.border && i.push(`dark:border-${n.dark.border}`)), i.join(\" \");\n}, G = {\n // Raw color palette (use sparingly, prefer semantic tokens)\n raw: o,\n // Semantic color tokens (recommended for most use cases)\n semantic: A,\n // Component-specific colors (use for components)\n component: h,\n // Utilities\n utils: {\n getColorClasses: T,\n buildColorClass: L\n }\n}, e = {\n // Spacing scale (based on 4px grid)\n spacing: {\n xs: \"p-1\",\n // 4px\n sm: \"p-2\",\n // 8px\n md: \"p-4\",\n // 16px\n lg: \"p-6\",\n // 24px\n xl: \"p-8\",\n // 32px\n \"2xl\": \"p-12\",\n // 48px\n \"3xl\": \"p-16\",\n // 64px\n \"4xl\": \"p-20\",\n // 80px\n \"5xl\": \"p-24\"\n // 96px\n },\n // Margin utilities\n margin: {\n xs: \"m-1\",\n sm: \"m-2\",\n md: \"m-4\",\n lg: \"m-6\",\n xl: \"m-8\",\n \"2xl\": \"m-12\",\n \"3xl\": \"m-16\",\n \"4xl\": \"m-20\",\n \"5xl\": \"m-24\"\n },\n // Padding utilities\n padding: {\n xs: \"p-1\",\n sm: \"p-2\",\n md: \"p-4\",\n lg: \"p-6\",\n xl: \"p-8\",\n \"2xl\": \"p-12\",\n \"3xl\": \"p-16\"\n },\n // Gap utilities for flex/grid\n gap: {\n xs: \"gap-1\",\n sm: \"gap-2\",\n md: \"gap-4\",\n lg: \"gap-6\",\n xl: \"gap-8\",\n \"2xl\": \"gap-12\",\n \"3xl\": \"gap-16\"\n },\n // Border radius scale\n radius: {\n none: \"rounded-none\",\n sm: \"rounded-sm\",\n // 2px\n md: \"rounded-md\",\n // 6px\n lg: \"rounded-lg\",\n // 8px\n xl: \"rounded-xl\",\n // 12px\n \"2xl\": \"rounded-2xl\",\n // 16px\n \"3xl\": \"rounded-3xl\",\n // 24px\n full: \"rounded-full\"\n },\n // Shadow scale\n shadow: {\n none: \"shadow-none\",\n sm: \"shadow-sm\",\n md: \"shadow-md\",\n lg: \"shadow-lg\",\n xl: \"shadow-xl\",\n \"2xl\": \"shadow-2xl\"\n },\n // Typography scale\n typography: {\n // Font families\n family: {\n // Sans-serif fonts (default for UI)\n sans: \"font-sans\",\n // Inter, system-ui, sans-serif\n // Serif fonts (for editorial content)\n serif: \"font-serif\",\n // ui-serif, Georgia, serif\n // Monospace fonts (for code)\n mono: \"font-mono\",\n // ui-monospace, Menlo, Monaco, Consolas\n // Display fonts (for headings)\n display: \"font-sans\",\n // Same as sans for consistency\n // Body text font\n body: \"font-sans\"\n // Same as sans for consistency\n },\n // Font sizes with semantic names\n size: {\n // Micro text (10px)\n micro: \"text-[10px]\",\n // Extra small (12px)\n xs: \"text-xs\",\n // Small (14px)\n sm: \"text-sm\",\n // Base/Body (16px) - Default browser size\n base: \"text-base\",\n md: \"text-base\",\n // Alias for base\n // Large (18px)\n lg: \"text-lg\",\n // Extra large (20px)\n xl: \"text-xl\",\n // 2X large (24px)\n \"2xl\": \"text-2xl\",\n // 3X large (30px)\n \"3xl\": \"text-3xl\",\n // 4X large (36px)\n \"4xl\": \"text-4xl\",\n // 5X large (48px)\n \"5xl\": \"text-5xl\",\n // 6X large (60px)\n \"6xl\": \"text-6xl\",\n // 7X large (72px)\n \"7xl\": \"text-7xl\",\n // 8X large (96px)\n \"8xl\": \"text-8xl\",\n // 9X large (128px)\n \"9xl\": \"text-9xl\"\n },\n // Semantic font sizes for specific use cases\n semantic: {\n // Caption text\n caption: \"text-xs\",\n // 12px\n // Small body text\n small: \"text-sm\",\n // 14px\n // Regular body text\n body: \"text-base\",\n // 16px\n // Large body text\n bodyLarge: \"text-lg\",\n // 18px\n // Subheading text\n subheading: \"text-xl\",\n // 20px\n // Heading 6\n h6: \"text-base\",\n // 16px\n // Heading 5\n h5: \"text-lg\",\n // 18px\n // Heading 4\n h4: \"text-xl\",\n // 20px\n // Heading 3\n h3: \"text-2xl\",\n // 24px\n // Heading 2\n h2: \"text-3xl\",\n // 30px\n // Heading 1\n h1: \"text-4xl\",\n // 36px\n // Display text (hero headings)\n display: \"text-6xl\",\n // 60px\n // Giant display text\n hero: \"text-8xl\"\n // 96px\n },\n // Font weights with semantic names\n weight: {\n // Numeric weights\n thin: \"font-thin\",\n // 100\n extralight: \"font-extralight\",\n // 200\n light: \"font-light\",\n // 300\n normal: \"font-normal\",\n // 400\n medium: \"font-medium\",\n // 500\n semibold: \"font-semibold\",\n // 600\n bold: \"font-bold\",\n // 700\n extrabold: \"font-extrabold\",\n // 800\n black: \"font-black\",\n // 900\n // Semantic weights\n body: \"font-normal\",\n // For body text\n emphasis: \"font-medium\",\n // For emphasized text\n strong: \"font-semibold\",\n // For strong text\n heading: \"font-bold\",\n // For headings\n display: \"font-extrabold\"\n // For display text\n },\n // Font styles\n style: {\n normal: \"not-italic\",\n italic: \"italic\",\n oblique: \"italic\"\n // Maps to italic (closest approximation)\n },\n // Text decoration\n decoration: {\n none: \"no-underline\",\n underline: \"underline\",\n overline: \"overline\",\n lineThrough: \"line-through\"\n },\n // Text decoration style\n decorationStyle: {\n solid: \"decoration-solid\",\n double: \"decoration-double\",\n dotted: \"decoration-dotted\",\n dashed: \"decoration-dashed\",\n wavy: \"decoration-wavy\"\n },\n // Text decoration thickness\n decorationThickness: {\n auto: \"decoration-auto\",\n fromFont: \"decoration-from-font\",\n thin: \"decoration-1\",\n medium: \"decoration-2\",\n thick: \"decoration-4\"\n },\n // Text underline offset\n underlineOffset: {\n auto: \"underline-offset-auto\",\n small: \"underline-offset-1\",\n medium: \"underline-offset-2\",\n large: \"underline-offset-4\",\n xl: \"underline-offset-8\"\n },\n // Line heights with semantic names\n leading: {\n // Numeric values\n none: \"leading-none\",\n // 1\n tight: \"leading-tight\",\n // 1.25\n snug: \"leading-snug\",\n // 1.375\n normal: \"leading-normal\",\n // 1.5\n relaxed: \"leading-relaxed\",\n // 1.625\n loose: \"leading-loose\",\n // 2\n // Semantic values\n heading: \"leading-tight\",\n // For headings\n body: \"leading-relaxed\",\n // For body text\n caption: \"leading-normal\",\n // For captions\n display: \"leading-none\"\n // For display text\n },\n // Letter spacing with semantic names\n tracking: {\n // Numeric values\n tighter: \"tracking-tighter\",\n // -0.05em\n tight: \"tracking-tight\",\n // -0.025em\n normal: \"tracking-normal\",\n // 0em\n wide: \"tracking-wide\",\n // 0.025em\n wider: \"tracking-wider\",\n // 0.05em\n widest: \"tracking-widest\",\n // 0.1em\n // Semantic values\n heading: \"tracking-tight\",\n // For headings\n body: \"tracking-normal\",\n // For body text\n caption: \"tracking-normal\",\n // For captions\n button: \"tracking-wide\",\n // For button text\n uppercase: \"tracking-wider\"\n // For uppercase text\n },\n // Text transform\n transform: {\n none: \"normal-case\",\n uppercase: \"uppercase\",\n lowercase: \"lowercase\",\n capitalize: \"capitalize\"\n },\n // Text alignment\n align: {\n left: \"text-left\",\n center: \"text-center\",\n right: \"text-right\",\n justify: \"text-justify\",\n start: \"text-start\",\n end: \"text-end\"\n },\n // Vertical alignment\n verticalAlign: {\n baseline: \"align-baseline\",\n top: \"align-top\",\n middle: \"align-middle\",\n bottom: \"align-bottom\",\n textTop: \"align-text-top\",\n textBottom: \"align-text-bottom\",\n sub: \"align-sub\",\n super: \"align-super\"\n },\n // White space handling\n whitespace: {\n normal: \"whitespace-normal\",\n nowrap: \"whitespace-nowrap\",\n pre: \"whitespace-pre\",\n preLine: \"whitespace-pre-line\",\n preWrap: \"whitespace-pre-wrap\",\n break: \"whitespace-break-spaces\"\n },\n // Word breaking\n wordBreak: {\n normal: \"break-normal\",\n words: \"break-words\",\n all: \"break-all\",\n keep: \"break-keep\"\n },\n // Text overflow\n overflow: {\n clip: \"text-clip\",\n ellipsis: \"text-ellipsis\"\n },\n // Text indent\n indent: {\n none: \"indent-0\",\n sm: \"indent-1\",\n md: \"indent-4\",\n lg: \"indent-8\"\n }\n },\n // Animation durations\n animation: {\n none: \"duration-0\",\n fastest: \"duration-75\",\n fast: \"duration-150\",\n normal: \"duration-200\",\n slow: \"duration-300\",\n slower: \"duration-500\",\n slowest: \"duration-700\"\n },\n // Animation easing\n ease: {\n linear: \"ease-linear\",\n in: \"ease-in\",\n out: \"ease-out\",\n inOut: \"ease-in-out\"\n },\n // Z-index scale\n zIndex: {\n auto: \"z-auto\",\n base: \"z-0\",\n docked: \"z-10\",\n dropdown: \"z-20\",\n sticky: \"z-30\",\n banner: \"z-40\",\n overlay: \"z-50\",\n modal: \"z-60\",\n popover: \"z-70\",\n skipLink: \"z-80\",\n toast: \"z-90\",\n tooltip: \"z-100\"\n },\n // Breakpoints (for reference - these are handled by Tailwind)\n breakpoints: {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n },\n // Grid columns\n grid: {\n cols1: \"grid-cols-1\",\n cols2: \"grid-cols-2\",\n cols3: \"grid-cols-3\",\n cols4: \"grid-cols-4\",\n cols5: \"grid-cols-5\",\n cols6: \"grid-cols-6\",\n cols12: \"grid-cols-12\"\n },\n // Responsive grid patterns\n gridResponsive: {\n responsive2: \"grid-cols-1 md:grid-cols-2\",\n responsive3: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\n responsive4: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n responsive6: \"grid-cols-2 md:grid-cols-3 lg:grid-cols-6\"\n },\n // Flex utilities\n flex: {\n center: \"flex items-center justify-center\",\n between: \"flex items-center justify-between\",\n start: \"flex items-center justify-start\",\n end: \"flex items-center justify-end\",\n col: \"flex flex-col\",\n colCenter: \"flex flex-col items-center justify-center\",\n wrap: \"flex flex-wrap\"\n },\n // Common width utilities\n width: {\n full: \"w-full\",\n screen: \"w-screen\",\n auto: \"w-auto\",\n fit: \"w-fit\",\n container: \"w-full max-w-7xl mx-auto\",\n containerSm: \"w-full max-w-3xl mx-auto\",\n containerLg: \"w-full max-w-full mx-auto\"\n },\n // Common height utilities\n height: {\n full: \"h-full\",\n screen: \"h-screen\",\n auto: \"h-auto\",\n fit: \"h-fit\",\n min: \"min-h-0\",\n minScreen: \"min-h-screen\"\n }\n}, K = {\n // =============================================================================\n // HEADINGS\n // =============================================================================\n heading: {\n // Display headings (hero sections, landing pages)\n display: {\n // Massive display text (128px)\n hero: () => `${e.typography.family.display} ${e.typography.semantic.hero} ${e.typography.weight.display} ${e.typography.leading.display} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Large display text (96px)\n xl: () => `${e.typography.family.display} text-7xl ${e.typography.weight.display} ${e.typography.leading.display} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Medium display text (72px)\n lg: () => `${e.typography.family.display} text-6xl ${e.typography.weight.bold} ${e.typography.leading.display} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Small display text (60px)\n md: () => `${e.typography.family.display} text-5xl ${e.typography.weight.bold} ${e.typography.leading.tight} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Extra small display text (48px)\n sm: () => `${e.typography.family.display} text-4xl ${e.typography.weight.bold} ${e.typography.leading.tight} ${e.typography.tracking.heading} text-gray-900 dark:text-white`\n },\n // Standard headings (H1-H6)\n h1: () => `${e.typography.family.sans} ${e.typography.semantic.h1} ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h2: () => `${e.typography.family.sans} ${e.typography.semantic.h2} ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h3: () => `${e.typography.family.sans} ${e.typography.semantic.h3} ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h4: () => `${e.typography.family.sans} ${e.typography.semantic.h4} ${e.typography.weight.semibold} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h5: () => `${e.typography.family.sans} ${e.typography.semantic.h5} ${e.typography.weight.semibold} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h6: () => `${e.typography.family.sans} ${e.typography.semantic.h6} ${e.typography.weight.semibold} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Responsive headings that scale with screen size\n responsive: {\n h1: () => `${e.typography.family.sans} text-2xl sm:text-3xl md:text-4xl lg:text-5xl ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h2: () => `${e.typography.family.sans} text-xl sm:text-2xl md:text-3xl lg:text-4xl ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h3: () => `${e.typography.family.sans} text-lg sm:text-xl md:text-2xl lg:text-3xl ${e.typography.weight.semibold} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n display: () => `${e.typography.family.display} text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl ${e.typography.weight.display} ${e.typography.leading.display} ${e.typography.tracking.heading} text-gray-900 dark:text-white`\n }\n },\n // =============================================================================\n // BODY TEXT\n // =============================================================================\n body: {\n // Large body text (18px)\n xl: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Regular body text (16px) - Default\n lg: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Medium body text (16px) - Alias for lg\n md: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Small body text (14px)\n sm: () => `${e.typography.family.body} ${e.typography.semantic.small} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n // Extra small body text (12px)\n xs: () => `${e.typography.family.body} ${e.typography.semantic.caption} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n // Emphasized/strong body text variants\n strong: {\n xl: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.strong} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n lg: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.strong} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n md: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.strong} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n sm: () => `${e.typography.family.body} ${e.typography.semantic.small} ${e.typography.weight.strong} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`\n },\n // Emphasized/medium body text variants\n emphasis: {\n xl: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.emphasis} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n lg: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.emphasis} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n md: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.emphasis} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n sm: () => `${e.typography.family.body} ${e.typography.semantic.small} ${e.typography.weight.emphasis} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`\n },\n // Muted/secondary body text variants\n muted: {\n xl: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n lg: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n md: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n sm: () => `${e.typography.family.body} ${e.typography.semantic.small} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`\n }\n },\n // =============================================================================\n // SPECIALIZED TEXT\n // =============================================================================\n // Caption and small text\n caption: {\n // Default caption (12px)\n default: () => `${e.typography.family.body} ${e.typography.semantic.caption} ${e.typography.weight.body} ${e.typography.leading.caption} ${e.typography.tracking.caption} text-gray-500 dark:text-gray-500`,\n // Emphasized caption\n emphasis: () => `${e.typography.family.body} ${e.typography.semantic.caption} ${e.typography.weight.emphasis} ${e.typography.leading.caption} ${e.typography.tracking.caption} text-gray-600 dark:text-gray-400`,\n // Uppercase caption (for labels)\n uppercase: () => `${e.typography.family.body} ${e.typography.semantic.caption} ${e.typography.weight.emphasis} ${e.typography.leading.caption} ${e.typography.tracking.uppercase} ${e.typography.transform.uppercase} text-gray-500 dark:text-gray-500`\n },\n // Lead text (introduction paragraphs)\n lead: {\n // Large lead text\n lg: () => `${e.typography.family.body} text-xl ${e.typography.weight.body} ${e.typography.leading.relaxed} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Medium lead text\n md: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.body} ${e.typography.leading.relaxed} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Small lead text\n sm: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.relaxed} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`\n },\n // Links\n link: {\n // Default link\n default: () => `${e.typography.decoration.underline} ${e.typography.underlineOffset.medium} text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-150`,\n // Link without underline\n subtle: () => `${e.typography.decoration.none} text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:${e.typography.decoration.underline} hover:${e.typography.underlineOffset.medium} transition-all duration-150`,\n // Muted link\n muted: () => `${e.typography.decoration.underline} ${e.typography.underlineOffset.medium} text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-150`,\n // External link (with icon space)\n external: () => `${e.typography.decoration.underline} ${e.typography.underlineOffset.medium} text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-150 inline-flex items-center gap-1`\n },\n // Code and monospace text\n code: {\n // Inline code\n inline: () => `${e.typography.family.mono} text-sm ${e.typography.weight.medium} px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100`,\n // Code block\n block: () => `${e.typography.family.mono} text-sm ${e.typography.weight.body} ${e.typography.leading.relaxed} p-4 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 overflow-x-auto`,\n // Small inline code\n small: () => `${e.typography.family.mono} text-xs ${e.typography.weight.medium} px-1 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100`\n },\n // UI Labels and form text\n label: {\n // Form labels\n default: () => `${e.typography.family.body} text-sm ${e.typography.weight.emphasis} text-gray-900 dark:text-white`,\n // Required field labels\n required: () => `${e.typography.family.body} text-sm ${e.typography.weight.emphasis} text-gray-900 dark:text-white after:content-['*'] after:ml-0.5 after:text-red-500`,\n // Optional field labels\n optional: () => `${e.typography.family.body} text-sm ${e.typography.weight.body} text-gray-600 dark:text-gray-400`,\n // Helper text\n helper: () => `${e.typography.family.body} text-sm ${e.typography.weight.body} text-gray-500 dark:text-gray-500`,\n // Error text\n error: () => `${e.typography.family.body} text-sm ${e.typography.weight.body} text-red-600 dark:text-red-400`,\n // Success text\n success: () => `${e.typography.family.body} text-sm ${e.typography.weight.body} text-green-600 dark:text-green-400`\n },\n // =============================================================================\n // WEB3 SPECIFIC\n // =============================================================================\n web3: {\n // Wallet addresses\n address: () => `${e.typography.family.mono} text-sm ${e.typography.weight.body} text-gray-900 dark:text-white break-all`,\n // Short wallet addresses (truncated)\n addressShort: () => `${e.typography.family.mono} text-sm ${e.typography.weight.body} text-gray-900 dark:text-white`,\n // Transaction hashes\n hash: () => `${e.typography.family.mono} text-xs ${e.typography.weight.body} text-gray-500 dark:text-gray-500 break-all`,\n // Cryptocurrency amounts\n amount: () => `${e.typography.family.mono} text-base ${e.typography.weight.emphasis} text-gray-900 dark:text-white`,\n // Chain names\n chain: () => `${e.typography.family.body} text-sm ${e.typography.weight.emphasis} text-gray-900 dark:text-white`,\n // Token symbols\n symbol: () => `${e.typography.family.body} text-sm ${e.typography.weight.bold} ${e.typography.transform.uppercase} text-gray-900 dark:text-white`\n },\n // =============================================================================\n // UTILITY CLASSES\n // =============================================================================\n // Truncation utilities\n truncate: {\n // Single line truncation\n line: () => `${e.typography.overflow.ellipsis} ${e.typography.whitespace.nowrap} overflow-hidden`,\n // Multi-line truncation (2 lines)\n lines2: () => \"line-clamp-2\",\n // Multi-line truncation (3 lines)\n lines3: () => \"line-clamp-3\",\n // Multi-line truncation (4 lines)\n lines4: () => \"line-clamp-4\"\n },\n // Selection styles\n selection: {\n // Default text selection\n default: () => \"selection:bg-blue-200 dark:selection:bg-blue-800 selection:text-blue-900 dark:selection:text-blue-100\",\n // Brand colored selection\n brand: () => \"selection:bg-purple-200 dark:selection:bg-purple-800 selection:text-purple-900 dark:selection:text-purple-100\"\n }\n}, q = (t = \"body\", r = \"body\", a = \"body\", n = \"text-gray-900 dark:text-white\", i = {}) => {\n const { leading: d = \"body\", tracking: l = \"body\", transform: s = \"none\", decoration: b = \"none\" } = i;\n return [\n e.typography.family[t],\n e.typography.semantic[r],\n e.typography.weight[a],\n e.typography.leading[d],\n e.typography.tracking[l],\n e.typography.transform[s],\n e.typography.decoration[b],\n n\n ].filter(Boolean).join(\" \");\n}, H = (...t) => t.filter(Boolean).join(\" \"), Y = (t, r) => {\n const a = [];\n return a.push(t), r.sm && a.push(`sm:${r.sm}`), r.md && a.push(`md:${r.md}`), r.lg && a.push(`lg:${r.lg}`), r.xl && a.push(`xl:${r.xl}`), r[\"2xl\"] && a.push(`2xl:${r[\"2xl\"]}`), a.join(\" \");\n}, Q = {\n // Button variants with complete styling\n button: {\n primary: {\n default: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200 h-8\",\n large: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 inline-flex items-center justify-center rounded-md px-6 py-3 text-base font-medium transition-colors duration-200 h-12\",\n withIcon: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n fullWidth: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 flex items-center justify-center w-full rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\"\n },\n secondary: {\n default: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700 dark:active:bg-gray-600 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700 dark:active:bg-gray-600 inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200 h-8\",\n large: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700 dark:active:bg-gray-600 inline-flex items-center justify-center rounded-md px-6 py-3 text-base font-medium transition-colors duration-200 h-12\",\n withIcon: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700 dark:active:bg-gray-600 inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\"\n },\n outline: {\n default: () => \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border border-gray-300 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border border-gray-300 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600 inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200 h-8\",\n large: () => \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border border-gray-300 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600 inline-flex items-center justify-center rounded-md px-6 py-3 text-base font-medium transition-colors duration-200 h-12\",\n withIcon: () => \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border border-gray-300 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600 inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\"\n },\n destructive: {\n default: () => \"bg-red-600 text-white hover:bg-red-700 active:bg-red-800 border-transparent focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-red-600 dark:hover:bg-red-700 dark:active:bg-red-800 dark:text-white inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n outline: () => \"bg-transparent hover:bg-red-50 active:bg-red-100 text-red-600 border border-red-300 focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-800 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-red-600 text-white hover:bg-red-700 active:bg-red-800 border-transparent focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-red-600 dark:hover:bg-red-700 dark:active:bg-red-800 dark:text-white inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200 h-8\"\n },\n ghost: {\n default: () => \"bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-300 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-300 inline-flex items-center justify-center rounded-md px-2 py-1 text-xs font-medium transition-colors duration-200 h-8\",\n icon: () => \"bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-300 inline-flex items-center justify-center rounded-md p-2 transition-colors duration-200 h-10 w-10\"\n },\n link: {\n default: () => \"bg-transparent hover:bg-transparent active:bg-transparent text-blue-600 border-transparent underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline dark:text-blue-400 inline-flex items-center justify-center rounded-md px-0 py-0 text-sm font-medium transition-colors duration-200\",\n muted: () => \"bg-transparent hover:bg-transparent active:bg-transparent text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 border-transparent underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline inline-flex items-center justify-center rounded-md px-0 py-0 text-sm font-medium transition-colors duration-200\"\n },\n gradient: {\n primary: () => \"bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-transparent shadow-lg hover:shadow-xl focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-200\",\n secondary: () => \"bg-gradient-to-r from-gray-100 to-gray-200 hover:from-gray-200 hover:to-gray-300 text-gray-900 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-200\",\n success: () => \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white border-transparent shadow-lg hover:shadow-xl focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-200\"\n },\n // Web3 specific button variants\n web3: {\n wallet: () => \"bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n connect: () => \"bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-transparent shadow-lg hover:shadow-xl focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all duration-200\",\n disconnect: () => \"bg-transparent hover:bg-red-50 active:bg-red-100 text-red-600 border border-red-300 focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-800 inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\"\n }\n },\n // Card variants\n card: {\n default: {\n base: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg\",\n padded: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6\",\n interactive: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 transition-all duration-200 hover:shadow-md cursor-pointer\"\n },\n elevated: {\n base: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm\",\n padded: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6\",\n interactive: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6 transition-all duration-200 hover:shadow-lg cursor-pointer\"\n },\n state: {\n success: () => \"bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800 text-green-800 dark:text-green-200 rounded-lg border p-4\",\n warning: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded-lg border p-4\",\n error: () => \"bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800 text-red-800 dark:text-red-200 rounded-lg border p-4\",\n info: () => \"bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 text-blue-800 dark:text-blue-200 rounded-lg border p-4\"\n }\n },\n // Badge variants\n badge: {\n default: () => \"bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n primary: () => \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n success: () => \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n warning: () => \"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n error: () => \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n // Web3 specific\n ethereum: () => \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n solana: () => \"bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n // Sizes\n small: (t = \"default\") => {\n const r = {\n default: \"bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300\",\n primary: \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300\",\n success: \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300\",\n warning: \"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300\",\n error: \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300\"\n };\n return `${r[t] || r.default} inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium`;\n },\n large: (t = \"default\") => {\n const r = {\n default: \"bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300\",\n primary: \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300\",\n success: \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300\",\n warning: \"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300\",\n error: \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300\"\n };\n return `${r[t] || r.default} inline-flex items-center px-3 py-1 rounded-full text-sm font-medium`;\n }\n },\n // Input variants\n input: {\n default: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n search: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n error: () => \"bg-gray-50 dark:bg-gray-800 border-red-300 dark:border-red-700 text-gray-900 dark:text-gray-100 focus:border-red-500 focus:ring-red-500 block w-full rounded-md px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n // Sizes\n small: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md px-2 py-1.5 text-xs placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n large: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md px-4 py-3 text-base placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n // Special variants\n withIcon: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md pl-10 pr-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\"\n },\n // Alert variants\n alert: {\n info: () => \"bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 text-blue-800 dark:text-blue-200 rounded-md border p-4 flex items-start gap-3\",\n success: () => \"bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800 text-green-800 dark:text-green-200 rounded-md border p-4 flex items-start gap-3\",\n warning: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded-md border p-4 flex items-start gap-3\",\n attention: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded-md border p-4 flex items-start gap-3\",\n error: () => \"bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800 text-red-800 dark:text-red-200 rounded-md border p-4 flex items-start gap-3\",\n // Compact variants\n compact: {\n info: () => \"bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 text-blue-800 dark:text-blue-200 rounded border px-3 py-2 text-sm\",\n success: () => \"bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800 text-green-800 dark:text-green-200 rounded border px-3 py-2 text-sm\",\n warning: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded border px-3 py-2 text-sm\",\n attention: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded border px-3 py-2 text-sm\",\n error: () => \"bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800 text-red-800 dark:text-red-200 rounded border px-3 py-2 text-sm\"\n }\n },\n // Loading/Spinner variants\n loading: {\n // Spinner variants\n spinner: {\n default: () => \"animate-spin rounded-full border-2 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400 w-5 h-5\",\n small: () => \"animate-spin rounded-full border-2 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400 w-4 h-4\",\n large: () => \"animate-spin rounded-full border-2 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400 w-8 h-8\",\n extraLarge: () => \"animate-spin rounded-full border-4 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400 w-16 h-16\",\n // Color variants\n white: () => \"animate-spin rounded-full border-2 border-white/30 border-t-white w-5 h-5\",\n success: () => \"animate-spin rounded-full border-2 border-green-200 border-t-green-600 dark:border-green-700 dark:border-t-green-400 w-5 h-5\",\n warning: () => \"animate-spin rounded-full border-2 border-amber-200 border-t-amber-600 dark:border-amber-700 dark:border-t-amber-400 w-5 h-5\",\n error: () => \"animate-spin rounded-full border-2 border-red-200 border-t-red-600 dark:border-red-700 dark:border-t-red-400 w-5 h-5\"\n },\n // Loading state containers\n state: {\n default: () => \"flex flex-col items-center justify-center py-8 px-4\",\n fullScreen: () => \"flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900\",\n inline: () => \"inline-flex items-center gap-2\",\n center: () => \"flex items-center justify-center\"\n },\n // Loading buttons\n button: {\n default: () => \"inline-flex items-center gap-2 opacity-70 cursor-wait pointer-events-none\",\n primary: () => \"bg-blue-600 text-white hover:bg-blue-700 inline-flex items-center gap-2 opacity-70 cursor-wait pointer-events-none px-4 py-2 rounded-md text-sm font-medium\",\n secondary: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 inline-flex items-center gap-2 opacity-70 cursor-wait pointer-events-none px-4 py-2 rounded-md text-sm font-medium dark:bg-gray-800 dark:text-gray-50\"\n },\n // Skeleton loading\n skeleton: {\n default: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded\",\n text: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded h-4\",\n title: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded h-6\",\n avatar: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded-full w-10 h-10\",\n card: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg h-32\"\n },\n // Progress indicators\n progress: {\n bar: () => \"w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700\",\n fill: () => \"bg-blue-600 h-2 rounded-full transition-all duration-300\",\n indeterminate: () => \"w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700 overflow-hidden relative before:absolute before:inset-0 before:bg-blue-600 before:rounded-full before:animate-pulse\"\n },\n // Dots indicator\n dots: {\n default: () => \"flex space-x-1 justify-center items-center\",\n dot: () => \"w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse\",\n dotStaggered: (t = 0) => `w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse animation-delay-${t}`\n }\n },\n // Modal/Dialog variants\n modal: {\n // Overlay variants\n overlay: {\n default: () => \"fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4\",\n dark: () => \"fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4\",\n light: () => \"fixed inset-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-4\"\n },\n // Container variants\n container: {\n default: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden\",\n small: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-sm\",\n medium: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-md\",\n large: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-2xl\",\n extraLarge: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-4xl\",\n fullScreen: () => \"bg-white dark:bg-gray-800 shadow-xl border border-gray-200 dark:border-gray-700 w-full h-full overflow-hidden\"\n },\n // Header variants\n header: {\n default: () => \"px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between\",\n centered: () => \"px-6 py-4 border-b border-gray-200 dark:border-gray-700 text-center\",\n minimal: () => \"px-6 py-4 flex items-center justify-between\"\n },\n // Content variants\n content: {\n default: () => \"px-6 py-4 overflow-y-auto flex-1\",\n padded: () => \"px-6 py-6 overflow-y-auto flex-1\",\n compact: () => \"px-4 py-3 overflow-y-auto flex-1\",\n scrollable: () => \"px-6 py-4 overflow-y-auto flex-1 max-h-96\"\n },\n // Footer variants\n footer: {\n default: () => \"px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-3\",\n centered: () => \"px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-center gap-3\",\n spaceBetween: () => \"px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between\",\n minimal: () => \"px-6 py-4 flex items-center justify-end gap-3\"\n },\n // Close button variants\n close: {\n default: () => \"text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700\",\n subtle: () => \"text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200\",\n prominent: () => \"text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600\"\n },\n // Web3 specific modal variants\n web3: {\n wallet: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-md\",\n transaction: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-lg\",\n confirmation: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-sm\"\n },\n // Animation variants\n animation: {\n fadeIn: () => \"animate-in fade-in-0 duration-200\",\n slideIn: () => \"animate-in fade-in-0 zoom-in-95 duration-200\",\n slideUp: () => \"animate-in fade-in-0 slide-in-from-bottom-4 duration-200\",\n fadeOut: () => \"animate-out fade-out-0 duration-150\",\n slideOut: () => \"animate-out fade-out-0 zoom-out-95 duration-150\"\n }\n },\n // Navigation variants\n navigation: {\n // Breadcrumb variants\n breadcrumb: {\n container: () => \"flex items-center justify-between text-sm\",\n list: () => \"flex items-center space-x-1\",\n item: () => \"flex items-center\",\n separator: () => \"h-4 w-4 text-gray-400 dark:text-gray-500 mx-2 flex-shrink-0\",\n link: () => \"flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:rounded-sm\",\n current: () => \"flex items-center text-gray-900 dark:text-white font-medium\",\n home: () => \"h-4 w-4 mr-1 flex-shrink-0\"\n },\n // Tab variants\n tabs: {\n root: () => \"\",\n list: () => \"inline-flex h-10 items-center justify-center rounded-md bg-gray-100 dark:bg-gray-800 p-1 text-gray-500 dark:text-gray-400\",\n listUnderlined: () => \"flex border-b border-gray-200 dark:border-gray-700\",\n listPills: () => \"flex space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg p-1\",\n trigger: () => \"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-950 data-[state=active]:shadow-sm dark:ring-offset-gray-950 dark:focus-visible:ring-blue-400 dark:data-[state=active]:bg-gray-950 dark:data-[state=active]:text-gray-50\",\n triggerUnderlined: () => \"inline-flex items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 border-b-2 border-transparent hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-blue-600 focus:border-blue-600 dark:focus:text-blue-400 dark:focus:border-blue-400 data-[state=active]:text-blue-600 data-[state=active]:border-blue-600 dark:data-[state=active]:text-blue-400 dark:data-[state=active]:border-blue-400 transition-colors\",\n triggerPills: () => \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-white dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-100 transition-all\",\n content: () => \"mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:ring-offset-gray-950 dark:focus-visible:ring-blue-400\"\n },\n // Menu/Dropdown variants\n menu: {\n trigger: () => \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors\",\n content: () => \"z-50 min-w-[12rem] overflow-hidden rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-1 text-gray-900 dark:text-gray-100 shadow-lg\",\n item: () => \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none focus:bg-gray-100 focus:text-gray-900 dark:focus:bg-gray-700 dark:focus:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\",\n separator: () => \"-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-700\",\n label: () => \"px-2 py-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100\",\n shortcut: () => \"ml-auto text-xs tracking-widest text-gray-500 dark:text-gray-400\"\n },\n // Pagination variants\n pagination: {\n container: () => \"flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 sm:px-6\",\n info: () => \"flex flex-1 justify-between sm:hidden\",\n nav: () => \"hidden sm:flex sm:flex-1 sm:items-center sm:justify-between\",\n results: () => \"text-sm text-gray-700 dark:text-gray-300\",\n buttons: () => \"relative z-0 inline-flex rounded-md shadow-sm -space-x-px\",\n button: () => \"relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors\",\n buttonActive: () => \"relative inline-flex items-center px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-300 dark:border-blue-700 z-10\",\n buttonFirst: () => \"rounded-l-md\",\n buttonLast: () => \"rounded-r-md\",\n // Mobile variants\n mobileButton: () => \"relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors\"\n },\n // Sidebar/Menu navigation\n sidebar: {\n container: () => \"flex flex-col h-full bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700\",\n nav: () => \"flex-1 px-4 py-6 space-y-1\",\n item: () => \"group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 transition-colors\",\n itemActive: () => \"group flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-r-2 border-blue-500\",\n icon: () => \"mr-3 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400\",\n iconActive: () => \"mr-3 h-5 w-5 flex-shrink-0 text-blue-500 dark:text-blue-400\"\n },\n // Step navigation\n steps: {\n container: () => \"flex items-center justify-center\",\n list: () => \"flex items-center space-x-4\",\n step: () => \"flex items-center space-x-2\",\n circle: () => \"flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-sm font-medium\",\n circleActive: () => \"flex items-center justify-center w-8 h-8 rounded-full border-2 border-blue-600 dark:border-blue-400 bg-blue-600 dark:bg-blue-400 text-white text-sm font-medium\",\n circleCompleted: () => \"flex items-center justify-center w-8 h-8 rounded-full border-2 border-green-600 dark:border-green-400 bg-green-600 dark:bg-green-400 text-white text-sm font-medium\",\n label: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n labelInactive: () => \"text-sm font-medium text-gray-500 dark:text-gray-400\",\n connector: () => \"w-12 h-px bg-gray-300 dark:bg-gray-600\",\n connectorActive: () => \"w-12 h-px bg-blue-600 dark:bg-blue-400\"\n }\n },\n // Data Display variants\n dataDisplay: {\n // Table variants\n table: {\n container: () => \"w-full overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700\",\n wrapper: () => \"overflow-x-auto\",\n table: () => \"min-w-full divide-y divide-gray-200 dark:divide-gray-700\",\n thead: () => \"bg-gray-50 dark:bg-gray-800\",\n tbody: () => \"bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700\",\n tfoot: () => \"bg-gray-50 dark:bg-gray-800\",\n tr: () => \"hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors\",\n trSelected: () => \"bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30\",\n th: () => \"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider\",\n thSortable: () => \"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors\",\n td: () => \"px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100\",\n tdCompact: () => \"px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100\"\n },\n // List variants\n list: {\n container: () => \"bg-white dark:bg-gray-900 shadow overflow-hidden rounded-lg\",\n ul: () => \"divide-y divide-gray-200 dark:divide-gray-700\",\n li: () => \"px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors\",\n liActive: () => \"px-4 py-4 sm:px-6 bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500\",\n // Email list specific\n emailItem: () => \"flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors\",\n emailItemRead: () => \"flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors opacity-60\",\n emailItemSelected: () => \"flex items-center px-4 py-3 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 cursor-pointer\"\n },\n // Grid variants\n grid: {\n container: () => \"grid gap-4\",\n twoColumn: () => \"grid grid-cols-1 md:grid-cols-2 gap-4\",\n threeColumn: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\",\n fourColumn: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\",\n autoFit: () => \"grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4\"\n },\n // Key-Value pairs\n keyValue: {\n container: () => \"bg-white dark:bg-gray-900 shadow overflow-hidden rounded-lg\",\n list: () => \"divide-y divide-gray-200 dark:divide-gray-700\",\n row: () => \"px-4 py-4 sm:px-6 sm:grid sm:grid-cols-3 sm:gap-4\",\n key: () => \"text-sm font-medium text-gray-500 dark:text-gray-400\",\n value: () => \"mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2\",\n // Inline variant\n inline: () => \"flex items-center space-x-2\",\n inlineKey: () => \"text-sm font-medium text-gray-500 dark:text-gray-400\",\n inlineValue: () => \"text-sm text-gray-900 dark:text-gray-100\"\n },\n // Code display\n code: {\n inline: () => \"font-mono text-sm text-pink-600 dark:text-pink-400 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded\",\n block: () => \"font-mono text-sm text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto\",\n // Web3 specific\n address: () => \"font-mono text-sm text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 px-2 py-1 rounded select-all\",\n hash: () => \"font-mono text-sm text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/20 px-2 py-1 rounded select-all\",\n // Syntax highlighting\n keyword: () => \"text-purple-600 dark:text-purple-400\",\n string: () => \"text-green-600 dark:text-green-400\",\n number: () => \"text-blue-600 dark:text-blue-400\",\n comment: () => \"text-gray-500 dark:text-gray-500 italic\"\n },\n // Stats/Metrics\n stats: {\n container: () => \"bg-white dark:bg-gray-900 overflow-hidden shadow rounded-lg\",\n grid: () => \"grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-gray-700\",\n item: () => \"px-4 py-5 sm:p-6\",\n label: () => \"text-sm font-medium text-gray-500 dark:text-gray-400 truncate\",\n value: () => \"mt-1 text-3xl font-semibold text-gray-900 dark:text-gray-100\",\n change: () => \"mt-2 flex items-center text-sm\",\n changePositive: () => \"text-green-600 dark:text-green-400\",\n changeNegative: () => \"text-red-600 dark:text-red-400\"\n },\n // Empty states\n empty: {\n container: () => \"text-center py-12\",\n icon: () => \"mx-auto h-12 w-12 text-gray-400\",\n title: () => \"mt-2 text-sm font-medium text-gray-900 dark:text-gray-100\",\n description: () => \"mt-1 text-sm text-gray-500 dark:text-gray-400\",\n action: () => \"mt-6\"\n },\n // Timeline\n timeline: {\n container: () => \"flow-root\",\n list: () => \"-mb-8\",\n item: () => \"relative pb-8\",\n itemLast: () => \"relative\",\n connector: () => \"absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-700\",\n dot: () => \"relative flex h-8 w-8 items-center justify-center rounded-full bg-white dark:bg-gray-800 ring-8 ring-white dark:ring-gray-900\",\n dotActive: () => \"bg-blue-600 dark:bg-blue-400\",\n dotComplete: () => \"bg-green-600 dark:bg-green-400\",\n content: () => \"ml-12 flex flex-col\",\n time: () => \"text-xs text-gray-500 dark:text-gray-400\",\n title: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n description: () => \"mt-1 text-sm text-gray-500 dark:text-gray-400\"\n }\n },\n // Forms Advanced variants\n formsAdvanced: {\n // Multi-step wizard\n wizard: {\n container: () => \"w-full\",\n steps: () => \"flex items-center justify-between mb-8\",\n step: () => \"flex flex-col items-center\",\n stepCircle: () => \"w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-all\",\n stepCompleted: () => \"bg-green-100 border-green-500 text-green-700 dark:bg-green-900/30 dark:border-green-400 dark:text-green-300\",\n stepCurrent: () => \"bg-blue-100 border-blue-500 text-blue-700 dark:bg-blue-900/30 dark:border-blue-400 dark:text-blue-300\",\n stepInactive: () => \"bg-gray-100 border-gray-300 text-gray-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400\",\n stepContent: () => \"mt-2 text-center\",\n stepTitle: () => \"text-sm font-medium\",\n stepDescription: () => \"text-xs text-gray-500 dark:text-gray-400 mt-1\",\n connector: () => \"flex-1 h-px bg-gray-200 dark:bg-gray-700 mt-5\",\n connectorCompleted: () => \"flex-1 h-px bg-green-300 dark:bg-green-600 mt-5\"\n },\n // File upload components\n fileUpload: {\n dropzone: () => \"border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center transition-colors hover:border-gray-400 dark:hover:border-gray-500 cursor-pointer\",\n dropzoneActive: () => \"border-blue-400 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-500\",\n dropzoneError: () => \"border-red-400 bg-red-50 dark:bg-red-900/20 dark:border-red-500\",\n icon: () => \"h-12 w-12 text-gray-400 mx-auto mb-4\",\n text: () => \"text-lg font-medium text-gray-900 dark:text-gray-100 mb-2\",\n subtext: () => \"text-sm text-gray-500 dark:text-gray-400 mb-4\",\n button: () => \"inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors\",\n input: () => \"sr-only\",\n fileList: () => \"mt-6 space-y-2\",\n fileItem: () => \"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg\",\n fileIcon: () => \"w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center mr-3\",\n fileName: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n fileSize: () => \"text-xs text-gray-500 dark:text-gray-400\",\n removeButton: () => \"p-1 text-gray-400 hover:text-red-500 transition-colors\"\n },\n // Web3 specific inputs\n web3: {\n container: () => \"space-y-2\",\n label: () => \"text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center\",\n labelIcon: () => \"h-4 w-4 inline mr-1\",\n inputGroup: () => \"flex rounded-md shadow-sm\",\n tokenInput: () => \"rounded-r-none font-mono\",\n tokenSymbol: () => \"inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-sm font-medium\",\n balance: () => \"text-sm text-gray-500 dark:text-gray-400\",\n balanceActions: () => \"flex space-x-2\",\n maxButton: () => \"text-xs\",\n addressInput: () => \"font-mono text-sm\",\n addressValid: () => \"border-green-300 dark:border-green-600 pr-10\",\n addressInvalid: () => \"border-red-300 dark:border-red-600 pr-10\",\n gasSettings: () => \"grid grid-cols-3 gap-2\",\n gasOption: () => \"p-2 text-center border rounded-md transition-colors cursor-pointer\",\n gasOptionActive: () => \"border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-900/20\",\n gasOptionInactive: () => \"border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500\"\n },\n // Advanced validation\n validation: {\n container: () => \"space-y-1\",\n label: () => \"text-sm font-medium text-gray-700 dark:text-gray-300\",\n input: () => \"block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100\",\n inputSuccess: () => \"border-green-300 dark:border-green-600 focus:border-green-500 focus:ring-green-500 pr-10\",\n inputError: () => \"border-red-300 dark:border-red-600 focus:border-red-500 focus:ring-red-500 pr-10\",\n inputWarning: () => \"border-yellow-300 dark:border-yellow-600 focus:border-yellow-500 focus:ring-yellow-500 pr-10\",\n successIcon: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-green-500\",\n errorIcon: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-red-500\",\n warningIcon: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-yellow-500\",\n loadingIcon: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-blue-600\",\n successMessage: () => \"text-xs text-green-600 dark:text-green-400\",\n errorMessage: () => \"text-xs text-red-600 dark:text-red-400\",\n warningMessage: () => \"text-xs text-yellow-600 dark:text-yellow-400\",\n helpMessage: () => \"text-xs text-gray-500 dark:text-gray-400\",\n requirements: () => \"space-y-1 mt-2\",\n requirement: () => \"flex items-center text-xs\",\n requirementMet: () => \"text-green-600 dark:text-green-400\",\n requirementUnmet: () => \"text-gray-500 dark:text-gray-400\",\n requirementIcon: () => \"h-3 w-3 mr-1\"\n },\n // Form sections and layouts\n layout: {\n section: () => \"space-y-6\",\n sectionTitle: () => \"text-lg font-medium text-gray-900 dark:text-gray-100\",\n sectionDescription: () => \"text-sm text-gray-500 dark:text-gray-400\",\n fieldGroup: () => \"space-y-4\",\n fieldRow: () => \"grid grid-cols-1 md:grid-cols-2 gap-4\",\n fieldColumn: () => \"space-y-4\",\n actions: () => \"flex justify-between pt-6 border-t border-gray-200 dark:border-gray-700\",\n actionsRight: () => \"flex justify-end space-x-4 pt-6 border-t border-gray-200 dark:border-gray-700\",\n actionsCenter: () => \"flex justify-center space-x-4 pt-6 border-t border-gray-200 dark:border-gray-700\"\n },\n // Security and sensitive inputs\n security: {\n container: () => \"relative\",\n input: () => \"font-mono\",\n toggleButton: () => \"absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200\",\n strengthMeter: () => \"mt-2 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden\",\n strengthBar: () => \"h-full transition-all duration-300\",\n strengthWeak: () => \"bg-red-500 w-1/4\",\n strengthMedium: () => \"bg-yellow-500 w-1/2\",\n strengthStrong: () => \"bg-green-500 w-3/4\",\n strengthVeryStrong: () => \"bg-green-600 w-full\"\n },\n // Conditional fields and dynamic forms\n conditional: {\n container: () => \"space-y-4\",\n trigger: () => \"flex items-center space-x-2\",\n content: () => \"ml-6 mt-4 pl-4 border-l-2 border-gray-200 dark:border-gray-700 space-y-4\",\n contentVisible: () => \"opacity-100 max-h-none\",\n contentHidden: () => \"opacity-0 max-h-0 overflow-hidden\"\n }\n },\n // Notifications & Feedback variants\n notifications: {\n // Toast notifications\n toast: {\n container: () => \"fixed top-4 right-4 z-50 max-w-sm w-full transform transition-all duration-300 ease-out\",\n content: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4\",\n // Toast with icon and content\n wrapper: () => \"flex items-start space-x-3\",\n icon: () => \"flex-shrink-0 mt-0.5\",\n successIcon: () => \"h-5 w-5 text-green-500\",\n errorIcon: () => \"h-5 w-5 text-red-500\",\n warningIcon: () => \"h-5 w-5 text-yellow-500\",\n infoIcon: () => \"h-5 w-5 text-blue-500\",\n text: () => \"flex-1 min-w-0\",\n title: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n message: () => \"mt-1 text-sm text-gray-500 dark:text-gray-400\",\n action: () => \"mt-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 cursor-pointer\",\n closeButton: () => \"ml-4 flex-shrink-0 text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 cursor-pointer\",\n // Toast variants by type\n success: () => \"border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20\",\n error: () => \"border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20\",\n warning: () => \"border-yellow-200 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/20\",\n info: () => \"border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20\"\n },\n // Progress indicators\n progress: {\n container: () => \"w-full\",\n content: () => \"flex items-center justify-between mb-2\",\n text: () => \"flex-1 min-w-0 mr-4\",\n title: () => \"text-sm font-medium text-gray-700 dark:text-gray-300\",\n message: () => \"text-xs text-gray-500 dark:text-gray-400 mt-1\",\n // Progress bar\n bar: () => \"w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden\",\n fill: () => \"h-full bg-blue-600 rounded-full transition-all duration-300\",\n fillSuccess: () => \"h-full bg-green-600 rounded-full transition-all duration-300\",\n fillError: () => \"h-full bg-red-600 rounded-full transition-all duration-300\",\n fillWarning: () => \"h-full bg-yellow-600 rounded-full transition-all duration-300\",\n percentage: () => \"text-sm text-gray-500 dark:text-gray-400 ml-2 flex-shrink-0\",\n // Circular progress\n circle: () => \"relative w-8 h-8\",\n circleTrack: () => \"absolute inset-0 rounded-full border-2 border-gray-200 dark:border-gray-700\",\n circleFill: () => \"absolute inset-0 rounded-full border-2 border-transparent transition-all duration-300\",\n // Loading spinners\n spinner: () => \"animate-spin rounded-full border-2 border-transparent\",\n spinnerPrimary: () => \"border-t-blue-600 border-r-blue-600\",\n spinnerSuccess: () => \"border-t-green-600 border-r-green-600\",\n spinnerError: () => \"border-t-red-600 border-r-red-600\",\n spinnerWarning: () => \"border-t-yellow-600 border-r-yellow-600\"\n },\n // Transaction status\n transaction: {\n container: () => \"border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800\",\n wrapper: () => \"flex items-start space-x-3\",\n icon: () => \"w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0\",\n iconPending: () => \"bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400\",\n iconConfirming: () => \"bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400\",\n iconConfirmed: () => \"bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400\",\n iconFailed: () => \"bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400\",\n content: () => \"flex-1 min-w-0\",\n header: () => \"flex items-center justify-between mb-1\",\n type: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n status: () => \"px-2 py-1 text-xs rounded-full font-medium\",\n statusPending: () => \"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300\",\n statusConfirming: () => \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300\",\n statusConfirmed: () => \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300\",\n statusFailed: () => \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300\",\n details: () => \"text-xs text-gray-500 dark:text-gray-400 mt-1\",\n hash: () => \"font-mono text-xs text-gray-500 dark:text-gray-400\",\n amount: () => \"text-sm text-gray-600 dark:text-gray-400 ml-2\",\n confirmations: () => \"mt-2 text-xs text-gray-500 dark:text-gray-400\",\n confirmationBar: () => \"w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mt-1\",\n confirmationProgress: () => \"h-1.5 bg-blue-600 rounded-full transition-all duration-300\"\n },\n // System status indicators\n status: {\n indicator: () => \"flex items-center space-x-2\",\n dot: () => \"w-3 h-3 rounded-full flex-shrink-0\",\n text: () => \"text-sm font-medium\",\n // Status variants\n online: () => \"text-green-700 dark:text-green-300\",\n onlineDot: () => \"bg-green-500\",\n degraded: () => \"text-yellow-700 dark:text-yellow-300\",\n degradedDot: () => \"bg-yellow-500\",\n offline: () => \"text-red-700 dark:text-red-300\",\n offlineDot: () => \"bg-red-500\",\n // Animated indicators\n pulse: () => \"animate-pulse\",\n // Connection status\n connection: () => \"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg\",\n connectionLabel: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n connectionDescription: () => \"text-xs text-gray-500 dark:text-gray-400\",\n connectionStatus: () => \"px-2 py-1 text-xs rounded-full font-medium\"\n },\n // Notification badges\n badge: {\n container: () => \"relative inline-block\",\n badge: () => \"absolute -top-1 -right-1 text-white text-xs rounded-full flex items-center justify-center font-medium\",\n // Size variants\n small: () => \"h-3 w-3 text-xs\",\n medium: () => \"h-4 w-4 text-xs\",\n large: () => \"h-5 w-5 text-xs\",\n // Color variants\n primary: () => \"bg-blue-500\",\n success: () => \"bg-green-500\",\n error: () => \"bg-red-500\",\n warning: () => \"bg-yellow-500\",\n // Special states\n dot: () => \"w-2 h-2 rounded-full animate-pulse\",\n count: () => \"min-w-[1rem] px-1\",\n countOverflow: () => \"min-w-[1.25rem] px-1\"\n // for 99+\n },\n // Contextual feedback\n feedback: {\n container: () => \"p-3 rounded-lg border\",\n content: () => \"flex items-start\",\n icon: () => \"flex-shrink-0 mr-2 mt-0.5\",\n text: () => \"flex-1 min-w-0\",\n title: () => \"text-sm font-medium\",\n message: () => \"text-sm mt-1\",\n action: () => \"ml-auto flex-shrink-0\",\n // Feedback variants\n success: () => \"bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800\",\n successIcon: () => \"h-4 w-4 text-green-600 dark:text-green-400\",\n successTitle: () => \"text-green-800 dark:text-green-200\",\n successMessage: () => \"text-green-700 dark:text-green-300\",\n error: () => \"bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800\",\n errorIcon: () => \"h-4 w-4 text-red-600 dark:text-red-400\",\n errorTitle: () => \"text-red-800 dark:text-red-200\",\n errorMessage: () => \"text-red-700 dark:text-red-300\",\n warning: () => \"bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800\",\n warningIcon: () => \"h-4 w-4 text-yellow-600 dark:text-yellow-400\",\n warningTitle: () => \"text-yellow-800 dark:text-yellow-200\",\n warningMessage: () => \"text-yellow-700 dark:text-yellow-300\",\n info: () => \"bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800\",\n infoIcon: () => \"h-4 w-4 text-blue-600 dark:text-blue-400\",\n infoTitle: () => \"text-blue-800 dark:text-blue-200\",\n infoMessage: () => \"text-blue-700 dark:text-blue-300\",\n neutral: () => \"bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700\",\n neutralIcon: () => \"h-4 w-4 text-gray-600 dark:text-gray-400\",\n neutralTitle: () => \"text-gray-900 dark:text-gray-100\",\n neutralMessage: () => \"text-gray-600 dark:text-gray-400\"\n },\n // Alert banners (different from alerts component)\n banner: {\n container: () => \"border-l-4 p-4\",\n content: () => \"flex items-center justify-between\",\n text: () => \"flex items-center\",\n icon: () => \"flex-shrink-0 mr-3\",\n message: () => \"text-sm font-medium\",\n action: () => \"flex-shrink-0 ml-4\",\n closeButton: () => \"text-gray-400 hover:text-gray-500 dark:hover:text-gray-300\",\n // Banner variants\n success: () => \"bg-green-50 dark:bg-green-900/20 border-green-400\",\n error: () => \"bg-red-50 dark:bg-red-900/20 border-red-400\",\n warning: () => \"bg-yellow-50 dark:bg-yellow-900/20 border-yellow-400\",\n info: () => \"bg-blue-50 dark:bg-blue-900/20 border-blue-400\"\n },\n // Loading states\n loading: {\n overlay: () => \"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\",\n container: () => \"bg-white dark:bg-gray-800 rounded-lg p-6 max-w-sm mx-4\",\n content: () => \"text-center\",\n spinner: () => \"mx-auto mb-4\",\n title: () => \"text-lg font-medium text-gray-900 dark:text-gray-100 mb-2\",\n message: () => \"text-sm text-gray-500 dark:text-gray-400\",\n // Inline loading\n inline: () => \"flex items-center space-x-2\",\n inlineSpinner: () => \"flex-shrink-0\",\n inlineText: () => \"text-sm text-gray-600 dark:text-gray-400\"\n }\n },\n // Layout & Spacing variants\n layout: {\n // Container variants\n container: {\n narrow: () => \"max-w-2xl mx-auto px-4 sm:px-6\",\n default: () => \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\",\n wide: () => \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\",\n full: () => \"w-full px-4 sm:px-6 lg:px-8\",\n fluid: () => \"w-full\"\n },\n // Grid layouts\n grid: {\n // Responsive columns\n responsive: {\n oneToTwo: () => \"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6\",\n oneToThree: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6\",\n oneToFour: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6\",\n twoToFour: () => \"grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6\",\n threeToSix: () => \"grid grid-cols-3 md:grid-cols-6 gap-4 md:gap-6\"\n },\n // Fixed columns with responsive gaps\n fixed: {\n one: () => \"grid grid-cols-1 gap-4 md:gap-6\",\n two: () => \"grid grid-cols-2 gap-4 md:gap-6\",\n three: () => \"grid grid-cols-3 gap-4 md:gap-6\",\n four: () => \"grid grid-cols-4 gap-4 md:gap-6\",\n five: () => \"grid grid-cols-5 gap-4 md:gap-6\",\n six: () => \"grid grid-cols-6 gap-4 md:gap-6\"\n },\n // Auto-fit patterns\n autoFit: {\n small: () => \"grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 md:gap-6\",\n medium: () => \"grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 md:gap-6\",\n large: () => \"grid grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 md:gap-6\"\n },\n // Dashboard layouts\n dashboard: {\n sidebar: () => \"grid grid-cols-1 lg:grid-cols-4 gap-6\",\n sidebarContent: () => \"lg:col-span-3\",\n sidebarAside: () => \"lg:col-span-1\",\n twoColumn: () => \"grid grid-cols-1 lg:grid-cols-2 gap-6\",\n threeColumn: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\",\n // Masonry-style layouts\n masonry: () => \"columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6\",\n masonryItem: () => \"break-inside-avoid mb-6\"\n }\n },\n // Flexbox patterns\n flex: {\n // Basic layouts\n row: () => \"flex flex-row\",\n column: () => \"flex flex-col\",\n rowReverse: () => \"flex flex-row-reverse\",\n columnReverse: () => \"flex flex-col-reverse\",\n // Common patterns\n center: () => \"flex items-center justify-center\",\n centerVertical: () => \"flex items-center\",\n centerHorizontal: () => \"flex justify-center\",\n spaceBetween: () => \"flex items-center justify-between\",\n spaceAround: () => \"flex items-center justify-around\",\n spaceEvenly: () => \"flex items-center justify-evenly\",\n // Responsive flex direction\n responsiveColumn: () => \"flex flex-col md:flex-row\",\n responsiveRow: () => \"flex flex-row md:flex-col\",\n // Common component layouts\n header: () => \"flex items-center justify-between w-full\",\n toolbar: () => \"flex items-center space-x-2\",\n buttonGroup: () => \"flex items-center space-x-2\",\n iconText: () => \"flex items-center space-x-2\",\n // List layouts\n listItem: () => \"flex items-start space-x-3\",\n listItemCenter: () => \"flex items-center space-x-3\",\n listItemEnd: () => \"flex items-end space-x-3\",\n // Card content layouts\n cardContent: () => \"flex flex-col space-y-4\",\n cardActions: () => \"flex items-center justify-end space-x-2 pt-4\",\n cardHeader: () => \"flex items-start justify-between\",\n // Form layouts\n formRow: () => \"flex flex-col sm:flex-row sm:items-center sm:space-x-4 space-y-2 sm:space-y-0\",\n formActions: () => \"flex flex-col sm:flex-row-reverse sm:justify-start space-y-2 sm:space-y-0 sm:space-x-2 sm:space-x-reverse\",\n // Wrap variants\n wrap: () => \"flex flex-wrap\",\n nowrap: () => \"flex flex-nowrap\",\n wrapReverse: () => \"flex flex-wrap-reverse\",\n // Gap utilities (for flex layouts)\n gapSm: () => \"gap-2\",\n gapMd: () => \"gap-4\",\n gapLg: () => \"gap-6\",\n gapXl: () => \"gap-8\"\n },\n // Spacing utilities\n spacing: {\n // Margin utilities\n margin: {\n none: () => \"m-0\",\n xs: () => \"m-1\",\n sm: () => \"m-2\",\n md: () => \"m-4\",\n lg: () => \"m-6\",\n xl: () => \"m-8\",\n xxl: () => \"m-12\",\n // Directional margins\n top: {\n none: () => \"mt-0\",\n xs: () => \"mt-1\",\n sm: () => \"mt-2\",\n md: () => \"mt-4\",\n lg: () => \"mt-6\",\n xl: () => \"mt-8\",\n xxl: () => \"mt-12\"\n },\n bottom: {\n none: () => \"mb-0\",\n xs: () => \"mb-1\",\n sm: () => \"mb-2\",\n md: () => \"mb-4\",\n lg: () => \"mb-6\",\n xl: () => \"mb-8\",\n xxl: () => \"mb-12\"\n },\n left: {\n none: () => \"ml-0\",\n xs: () => \"ml-1\",\n sm: () => \"ml-2\",\n md: () => \"ml-4\",\n lg: () => \"ml-6\",\n xl: () => \"ml-8\",\n xxl: () => \"ml-12\"\n },\n right: {\n none: () => \"mr-0\",\n xs: () => \"mr-1\",\n sm: () => \"mr-2\",\n md: () => \"mr-4\",\n lg: () => \"mr-6\",\n xl: () => \"mr-8\",\n xxl: () => \"mr-12\"\n },\n horizontal: {\n none: () => \"mx-0\",\n xs: () => \"mx-1\",\n sm: () => \"mx-2\",\n md: () => \"mx-4\",\n lg: () => \"mx-6\",\n xl: () => \"mx-8\",\n xxl: () => \"mx-12\",\n auto: () => \"mx-auto\"\n },\n vertical: {\n none: () => \"my-0\",\n xs: () => \"my-1\",\n sm: () => \"my-2\",\n md: () => \"my-4\",\n lg: () => \"my-6\",\n xl: () => \"my-8\",\n xxl: () => \"my-12\"\n }\n },\n // Padding utilities\n padding: {\n none: () => \"p-0\",\n xs: () => \"p-1\",\n sm: () => \"p-2\",\n md: () => \"p-4\",\n lg: () => \"p-6\",\n xl: () => \"p-8\",\n xxl: () => \"p-12\",\n // Directional padding\n top: {\n none: () => \"pt-0\",\n xs: () => \"pt-1\",\n sm: () => \"pt-2\",\n md: () => \"pt-4\",\n lg: () => \"pt-6\",\n xl: () => \"pt-8\",\n xxl: () => \"pt-12\"\n },\n bottom: {\n none: () => \"pb-0\",\n xs: () => \"pb-1\",\n sm: () => \"pb-2\",\n md: () => \"pb-4\",\n lg: () => \"pb-6\",\n xl: () => \"pb-8\",\n xxl: () => \"pb-12\"\n },\n left: {\n none: () => \"pl-0\",\n xs: () => \"pl-1\",\n sm: () => \"pl-2\",\n md: () => \"pl-4\",\n lg: () => \"pl-6\",\n xl: () => \"pl-8\",\n xxl: () => \"pl-12\"\n },\n right: {\n none: () => \"pr-0\",\n xs: () => \"pr-1\",\n sm: () => \"pr-2\",\n md: () => \"pr-4\",\n lg: () => \"pr-6\",\n xl: () => \"pr-8\",\n xxl: () => \"pr-12\"\n },\n horizontal: {\n none: () => \"px-0\",\n xs: () => \"px-1\",\n sm: () => \"px-2\",\n md: () => \"px-4\",\n lg: () => \"px-6\",\n xl: () => \"px-8\",\n xxl: () => \"px-12\"\n },\n vertical: {\n none: () => \"py-0\",\n xs: () => \"py-1\",\n sm: () => \"py-2\",\n md: () => \"py-4\",\n lg: () => \"py-6\",\n xl: () => \"py-8\",\n xxl: () => \"py-12\"\n }\n },\n // Common spacing combinations\n section: () => \"py-12 md:py-16 lg:py-20\",\n subsection: () => \"py-8 md:py-12\",\n cardSpacing: () => \"p-6 md:p-8\",\n listSpacing: () => \"space-y-4\",\n buttonSpacing: () => \"space-x-2\"\n },\n // Web3-specific layouts\n web3: {\n // Wallet interface layouts\n wallet: {\n connect: () => \"flex flex-col items-center space-y-4 p-6\",\n connected: () => \"flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg\",\n balance: () => \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\",\n portfolio: () => \"grid grid-cols-1 lg:grid-cols-3 gap-6\"\n },\n // Transaction layouts\n transaction: {\n form: () => \"space-y-6\",\n preview: () => \"bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-3\",\n history: () => \"space-y-2\",\n historyItem: () => \"flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700\",\n details: () => \"grid grid-cols-1 md:grid-cols-2 gap-4\"\n },\n // NFT layouts\n nft: {\n gallery: () => \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6\",\n card: () => \"bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden\",\n cardContent: () => \"p-4 space-y-3\",\n cardActions: () => \"flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700\",\n // Collection view\n collection: () => \"grid grid-cols-1 lg:grid-cols-4 gap-6\",\n collectionSidebar: () => \"lg:col-span-1 space-y-6\",\n collectionGrid: () => \"lg:col-span-3\"\n },\n // DeFi layouts\n defi: {\n dashboard: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\",\n pool: () => \"bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6\",\n poolStats: () => \"grid grid-cols-2 md:grid-cols-4 gap-4\",\n liquidity: () => \"space-y-4\",\n farming: () => \"grid grid-cols-1 lg:grid-cols-2 gap-6\"\n },\n // DAO layouts\n dao: {\n governance: () => \"grid grid-cols-1 lg:grid-cols-3 gap-6\",\n proposal: () => \"bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6\",\n proposalHeader: () => \"flex items-start justify-between mb-6\",\n proposalContent: () => \"space-y-6\",\n voting: () => \"grid grid-cols-1 md:grid-cols-2 gap-4\"\n }\n },\n // Positioning utilities\n position: {\n relative: () => \"relative\",\n absolute: () => \"absolute\",\n fixed: () => \"fixed\",\n sticky: () => \"sticky\",\n // Common absolute positions\n topLeft: () => \"absolute top-0 left-0\",\n topRight: () => \"absolute top-0 right-0\",\n bottomLeft: () => \"absolute bottom-0 left-0\",\n bottomRight: () => \"absolute bottom-0 right-0\",\n center: () => \"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\",\n // Overlay positions\n overlay: () => \"fixed inset-0 z-50\",\n backdrop: () => \"fixed inset-0 bg-black bg-opacity-50 z-40\"\n },\n // Overflow utilities\n overflow: {\n hidden: () => \"overflow-hidden\",\n auto: () => \"overflow-auto\",\n scroll: () => \"overflow-scroll\",\n xHidden: () => \"overflow-x-hidden\",\n yHidden: () => \"overflow-y-hidden\",\n xAuto: () => \"overflow-x-auto\",\n yAuto: () => \"overflow-y-auto\",\n xScroll: () => \"overflow-x-scroll\",\n yScroll: () => \"overflow-y-scroll\"\n },\n // Z-index utilities\n zIndex: {\n base: () => \"z-0\",\n dropdown: () => \"z-10\",\n sticky: () => \"z-20\",\n modal: () => \"z-50\",\n popover: () => \"z-60\",\n tooltip: () => \"z-70\"\n },\n // Display utilities\n display: {\n block: () => \"block\",\n inline: () => \"inline\",\n inlineBlock: () => \"inline-block\",\n flex: () => \"flex\",\n inlineFlex: () => \"inline-flex\",\n grid: () => \"grid\",\n inlineGrid: () => \"inline-grid\",\n hidden: () => \"hidden\",\n // Responsive display\n hiddenMobile: () => \"hidden sm:block\",\n hiddenTablet: () => \"hidden md:block\",\n hiddenDesktop: () => \"block md:hidden\",\n mobileOnly: () => \"block sm:hidden\",\n tabletOnly: () => \"hidden sm:block md:hidden\",\n desktopOnly: () => \"hidden md:block\"\n },\n // Common layout patterns\n patterns: {\n // Page layouts\n fullHeight: () => \"min-h-screen flex flex-col\",\n centeredPage: () => \"min-h-screen flex items-center justify-center\",\n // Header patterns\n header: () => \"sticky top-0 z-40 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700\",\n headerContent: () => \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\",\n // Sidebar patterns\n sidebarLayout: () => \"flex h-screen bg-gray-100 dark:bg-gray-900\",\n sidebar: () => \"w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700\",\n mainContent: () => \"flex-1 flex flex-col overflow-hidden\",\n // Modal patterns\n modalOverlay: () => \"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\",\n modalContent: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden\",\n // Card patterns\n cardGrid: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\",\n cardStack: () => \"space-y-6\",\n // List patterns\n dividedList: () => \"divide-y divide-gray-200 dark:divide-gray-700\",\n spacedList: () => \"space-y-4\",\n // Form patterns\n formStack: () => \"space-y-6\",\n formGrid: () => \"grid grid-cols-1 md:grid-cols-2 gap-6\",\n fieldset: () => \"space-y-4\",\n // Loading patterns\n loadingOverlay: () => \"absolute inset-0 bg-white bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center\",\n loadingInline: () => \"flex items-center space-x-2\",\n // Empty state patterns\n emptyState: () => \"text-center py-12\",\n emptyStateIcon: () => \"mx-auto h-12 w-12 text-gray-400 mb-4\"\n }\n },\n // Table variants\n table: {\n container: () => \"overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800\",\n table: () => \"min-w-full divide-y divide-gray-200 dark:divide-gray-700\",\n header: {\n row: () => \"bg-gray-50 dark:bg-gray-900/50\",\n cell: () => \"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider\",\n sortable: () => \"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 select-none group\"\n },\n body: {\n row: () => \"bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200\",\n rowSelected: () => \"bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200\",\n rowClickable: () => \"bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200 cursor-pointer\",\n cell: () => \"px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100\",\n cellMuted: () => \"px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400\",\n cellAction: () => \"px-6 py-4 whitespace-nowrap text-right text-sm font-medium\"\n },\n // Compact table variants\n compact: {\n header: {\n cell: () => \"px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider\",\n sortable: () => \"px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 select-none group\"\n },\n body: {\n cell: () => \"px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100\",\n cellMuted: () => \"px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400\",\n cellAction: () => \"px-4 py-3 whitespace-nowrap text-right text-sm font-medium\"\n }\n },\n // Table states\n states: {\n loading: () => \"opacity-50 pointer-events-none\",\n empty: () => \"text-center py-12 text-gray-500 dark:text-gray-400\",\n error: () => \"text-center py-12 text-red-500 dark:text-red-400\"\n },\n // Pagination styles\n pagination: {\n container: () => \"bg-white dark:bg-gray-800 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6\",\n info: () => \"flex-1 flex justify-between sm:hidden text-sm text-gray-700 dark:text-gray-300\",\n nav: () => \"hidden sm:flex-1 sm:flex sm:items-center sm:justify-between\",\n button: () => \"relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200\",\n buttonCurrent: () => \"relative inline-flex items-center px-4 py-2 border border-blue-500 dark:border-blue-400 text-sm font-medium rounded-md text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200\"\n },\n // Data grid specific variants\n grid: {\n container: () => \"overflow-auto rounded-lg border border-gray-200 dark:border-gray-700\",\n table: () => \"min-w-full table-fixed\",\n resizeHandle: () => \"absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-blue-500 dark:hover:bg-blue-400 transition-colors duration-200\",\n filterContainer: () => \"border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 p-3\",\n filterInput: () => \"block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 focus:outline-none focus:ring-2\"\n },\n // Sorting indicators\n sort: {\n indicator: () => \"ml-2 h-4 w-4 flex-none rounded text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300\",\n ascending: () => \"ml-2 h-4 w-4 flex-none rounded text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300 transform rotate-0\",\n descending: () => \"ml-2 h-4 w-4 flex-none rounded text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300 transform rotate-180\"\n }\n },\n // Icon variants\n icon: {\n // Size variants\n size: {\n xs: () => \"h-3 w-3\",\n sm: () => \"h-4 w-4\",\n md: () => \"h-5 w-5\",\n lg: () => \"h-6 w-6\",\n xl: () => \"h-8 w-8\",\n xxl: () => \"h-10 w-10\",\n xxxl: () => \"h-12 w-12\"\n },\n // Color variants\n color: {\n // Neutral colors\n default: () => \"text-gray-500 dark:text-gray-400\",\n muted: () => \"text-gray-400 dark:text-gray-500\",\n subtle: () => \"text-gray-300 dark:text-gray-600\",\n primary: () => \"text-gray-900 dark:text-gray-100\",\n // Brand colors\n brand: () => \"text-blue-600 dark:text-blue-400\",\n brandMuted: () => \"text-blue-500 dark:text-blue-500\",\n // Semantic colors\n success: () => \"text-green-600 dark:text-green-400\",\n warning: () => \"text-amber-600 dark:text-amber-400\",\n error: () => \"text-red-600 dark:text-red-400\",\n info: () => \"text-blue-600 dark:text-blue-400\",\n // Interactive colors\n interactive: () => \"text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200\",\n interactiveSubtle: () => \"text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200\",\n // Web3 specific colors\n ethereum: () => \"text-blue-600 dark:text-blue-400\",\n solana: () => \"text-purple-600 dark:text-purple-400\",\n bitcoin: () => \"text-orange-600 dark:text-orange-400\"\n },\n // Combined size and color variants\n variant: {\n // Default variants (most common combinations)\n default: {\n xs: () => \"h-3 w-3 text-gray-500 dark:text-gray-400\",\n sm: () => \"h-4 w-4 text-gray-500 dark:text-gray-400\",\n md: () => \"h-5 w-5 text-gray-500 dark:text-gray-400\",\n lg: () => \"h-6 w-6 text-gray-500 dark:text-gray-400\",\n xl: () => \"h-8 w-8 text-gray-500 dark:text-gray-400\"\n },\n // Interactive variants\n interactive: {\n xs: () => \"h-3 w-3 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\",\n sm: () => \"h-4 w-4 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\",\n md: () => \"h-5 w-5 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\",\n lg: () => \"h-6 w-6 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\",\n xl: () => \"h-8 w-8 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\"\n },\n // Success variants\n success: {\n xs: () => \"h-3 w-3 text-green-600 dark:text-green-400\",\n sm: () => \"h-4 w-4 text-green-600 dark:text-green-400\",\n md: () => \"h-5 w-5 text-green-600 dark:text-green-400\",\n lg: () => \"h-6 w-6 text-green-600 dark:text-green-400\",\n xl: () => \"h-8 w-8 text-green-600 dark:text-green-400\"\n },\n // Warning variants\n warning: {\n xs: () => \"h-3 w-3 text-amber-600 dark:text-amber-400\",\n sm: () => \"h-4 w-4 text-amber-600 dark:text-amber-400\",\n md: () => \"h-5 w-5 text-amber-600 dark:text-amber-400\",\n lg: () => \"h-6 w-6 text-amber-600 dark:text-amber-400\",\n xl: () => \"h-8 w-8 text-amber-600 dark:text-amber-400\"\n },\n // Error variants\n error: {\n xs: () => \"h-3 w-3 text-red-600 dark:text-red-400\",\n sm: () => \"h-4 w-4 text-red-600 dark:text-red-400\",\n md: () => \"h-5 w-5 text-red-600 dark:text-red-400\",\n lg: () => \"h-6 w-6 text-red-600 dark:text-red-400\",\n xl: () => \"h-8 w-8 text-red-600 dark:text-red-400\"\n },\n // Muted variants\n muted: {\n xs: () => \"h-3 w-3 text-gray-400 dark:text-gray-500\",\n sm: () => \"h-4 w-4 text-gray-400 dark:text-gray-500\",\n md: () => \"h-5 w-5 text-gray-400 dark:text-gray-500\",\n lg: () => \"h-6 w-6 text-gray-400 dark:text-gray-500\",\n xl: () => \"h-8 w-8 text-gray-400 dark:text-gray-500\"\n }\n },\n // Context-specific icon patterns\n context: {\n // Button icons\n button: {\n leading: () => \"h-4 w-4 mr-2 flex-shrink-0\",\n trailing: () => \"h-4 w-4 ml-2 flex-shrink-0\",\n only: () => \"h-4 w-4\",\n small: () => \"h-3 w-3\",\n large: () => \"h-5 w-5\"\n },\n // Input icons\n input: {\n leading: () => \"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none\",\n trailing: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\",\n interactive: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 hover:text-gray-600 cursor-pointer transition-colors duration-200\"\n },\n // Navigation icons\n navigation: {\n menu: () => \"h-5 w-5 text-gray-600 dark:text-gray-400\",\n menuActive: () => \"h-5 w-5 text-blue-600 dark:text-blue-400\",\n breadcrumb: () => \"h-4 w-4 text-gray-400 mx-2\",\n tab: () => \"h-4 w-4 mr-2\"\n },\n // Status icons\n status: {\n success: () => \"h-5 w-5 text-green-500 flex-shrink-0\",\n warning: () => \"h-5 w-5 text-amber-500 flex-shrink-0\",\n error: () => \"h-5 w-5 text-red-500 flex-shrink-0\",\n info: () => \"h-5 w-5 text-blue-500 flex-shrink-0\",\n loading: () => \"h-5 w-5 text-gray-400 animate-spin flex-shrink-0\"\n },\n // Avatar/Profile icons\n avatar: {\n small: () => \"h-6 w-6 text-gray-400\",\n medium: () => \"h-8 w-8 text-gray-400\",\n large: () => \"h-10 w-10 text-gray-400\",\n fallback: () => \"h-full w-full text-gray-300\"\n },\n // Web3 context icons\n web3: {\n wallet: () => \"h-5 w-5 text-gray-600 dark:text-gray-400\",\n walletConnected: () => \"h-5 w-5 text-green-600 dark:text-green-400\",\n walletDisconnected: () => \"h-5 w-5 text-gray-400 dark:text-gray-500\",\n transaction: () => \"h-4 w-4 text-blue-600 dark:text-blue-400\",\n blockchain: {\n ethereum: () => \"h-5 w-5 text-blue-600 dark:text-blue-400\",\n solana: () => \"h-5 w-5 text-purple-600 dark:text-purple-400\",\n bitcoin: () => \"h-5 w-5 text-orange-600 dark:text-orange-400\"\n }\n },\n // Card and content icons\n card: {\n header: () => \"h-5 w-5 text-gray-600 dark:text-gray-400 mr-2\",\n action: () => \"h-4 w-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200\",\n feature: () => \"h-6 w-6 text-blue-600 dark:text-blue-400\",\n featureLarge: () => \"h-8 w-8 text-blue-600 dark:text-blue-400\"\n },\n // List and table icons\n list: {\n item: () => \"h-4 w-4 text-gray-500 dark:text-gray-400 mr-3 flex-shrink-0\",\n action: () => \"h-4 w-4 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200\",\n bullet: () => \"h-1.5 w-1.5 text-gray-400 mt-2 mr-3 flex-shrink-0\"\n }\n },\n // Decorative icon patterns\n decorative: {\n hero: {\n small: () => \"h-12 w-12 text-blue-600 dark:text-blue-400\",\n medium: () => \"h-16 w-16 text-blue-600 dark:text-blue-400\",\n large: () => \"h-20 w-20 text-blue-600 dark:text-blue-400\",\n xlarge: () => \"h-24 w-24 text-blue-600 dark:text-blue-400\"\n },\n feature: {\n small: () => \"h-8 w-8 text-gray-600 dark:text-gray-400\",\n medium: () => \"h-10 w-10 text-gray-600 dark:text-gray-400\",\n large: () => \"h-12 w-12 text-gray-600 dark:text-gray-400\"\n },\n background: {\n subtle: () => \"h-32 w-32 text-gray-100 dark:text-gray-800 opacity-50\",\n muted: () => \"h-24 w-24 text-gray-200 dark:text-gray-700 opacity-30\"\n },\n empty: {\n small: () => \"h-8 w-8 text-gray-400 dark:text-gray-500 mb-2\",\n medium: () => \"h-12 w-12 text-gray-400 dark:text-gray-500 mb-4\",\n large: () => \"h-16 w-16 text-gray-400 dark:text-gray-500 mb-6\"\n }\n }\n },\n // Overlays & Portals variants\n overlays: {\n // Modal/Dialog overlays\n modal: {\n backdrop: () => \"fixed inset-0 z-40 bg-black/50 dark:bg-black/70 backdrop-blur-sm transition-all duration-300 ease-out\",\n backdropEntering: () => \"opacity-0\",\n backdropEntered: () => \"opacity-100\",\n backdropExiting: () => \"opacity-0\",\n container: () => \"fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-300 ease-out\",\n containerEntering: () => \"opacity-0 scale-95\",\n containerEntered: () => \"opacity-100 scale-100\",\n containerExiting: () => \"opacity-0 scale-95\",\n content: () => \"relative w-full max-w-lg bg-white dark:bg-gray-900 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[80vh] overflow-hidden\",\n // Size variants\n small: () => \"max-w-sm\",\n medium: () => \"max-w-lg\",\n large: () => \"max-w-2xl\",\n extraLarge: () => \"max-w-4xl\",\n fullWidth: () => \"max-w-[95vw]\",\n // Header and content areas\n header: () => \"flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700\",\n title: () => \"text-lg font-semibold text-gray-900 dark:text-gray-100\",\n closeButton: () => \"p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors\",\n body: () => \"p-4 sm:p-6 overflow-y-auto\",\n footer: () => \"flex items-center justify-end space-x-3 p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50\"\n },\n // Tooltip overlays\n tooltip: {\n container: () => \"absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 dark:bg-gray-800 rounded shadow-lg transition-all duration-200 pointer-events-none\",\n arrow: () => \"absolute w-2 h-2 bg-gray-900 dark:bg-gray-800 transform rotate-45\",\n // Position variants\n top: () => \"-translate-x-1/2 -translate-y-full left-1/2 bottom-full mb-2\",\n topArrow: () => \"top-full left-1/2 -translate-x-1/2 -translate-y-1/2\",\n bottom: () => \"-translate-x-1/2 translate-y-full left-1/2 top-full mt-2\",\n bottomArrow: () => \"bottom-full left-1/2 -translate-x-1/2 translate-y-1/2\",\n left: () => \"-translate-y-1/2 -translate-x-full top-1/2 right-full mr-2\",\n leftArrow: () => \"left-full top-1/2 -translate-y-1/2 -translate-x-1/2\",\n right: () => \"-translate-y-1/2 translate-x-full top-1/2 left-full ml-2\",\n rightArrow: () => \"right-full top-1/2 -translate-y-1/2 translate-x-1/2\",\n // Content variants\n light: () => \"text-gray-900 bg-white border border-gray-200 shadow-md\",\n dark: () => \"text-white bg-gray-900 dark:bg-gray-800\",\n info: () => \"text-blue-50 bg-blue-600\",\n success: () => \"text-green-50 bg-green-600\",\n warning: () => \"text-amber-50 bg-amber-600\",\n error: () => \"text-red-50 bg-red-600\"\n },\n // Popover overlays (more complex than tooltips)\n popover: {\n backdrop: () => \"fixed inset-0 z-30\",\n container: () => \"absolute z-40 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 transition-all duration-200\",\n arrow: () => \"absolute w-3 h-3 bg-white dark:bg-gray-800 border-l border-t border-gray-200 dark:border-gray-700 transform rotate-45\",\n // Size variants\n small: () => \"w-48\",\n medium: () => \"w-64\",\n large: () => \"w-80\",\n auto: () => \"w-auto min-w-48 max-w-xs\",\n // Position variants (similar to tooltip but adjusted for larger content)\n top: () => \"-translate-x-1/2 -translate-y-full left-1/2 bottom-full mb-3\",\n topArrow: () => \"top-full left-1/2 -translate-x-1/2 -translate-y-1/2\",\n bottom: () => \"-translate-x-1/2 translate-y-full left-1/2 top-full mt-3\",\n bottomArrow: () => \"bottom-full left-1/2 -translate-x-1/2 translate-y-1/2\",\n left: () => \"-translate-y-1/2 -translate-x-full top-1/2 right-full mr-3\",\n leftArrow: () => \"left-full top-1/2 -translate-y-1/2 -translate-x-1/2\",\n right: () => \"-translate-y-1/2 translate-x-full top-1/2 left-full ml-3\",\n rightArrow: () => \"right-full top-1/2 -translate-y-1/2 translate-x-1/2\",\n // Content areas\n header: () => \"px-4 py-3 border-b border-gray-200 dark:border-gray-700\",\n title: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n body: () => \"px-4 py-3\",\n footer: () => \"px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50\",\n // Animation states\n entering: () => \"opacity-0 scale-95 transform\",\n entered: () => \"opacity-100 scale-100 transform\",\n exiting: () => \"opacity-0 scale-95 transform\"\n },\n // Dropdown menus\n dropdown: {\n container: () => \"relative inline-block\",\n trigger: () => \"inline-flex justify-center items-center bg-transparent border-0 text-gray-900 dark:text-gray-100 focus:outline-none transition-colors\",\n triggerBordered: () => \"inline-flex justify-center items-center bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-950 transition-colors\",\n menu: () => \"absolute z-50 w-56 bg-white dark:bg-gray-800 rounded-md shadow-lg focus:outline-none transition-all duration-200\",\n menuSmall: () => \"w-40\",\n menuLarge: () => \"w-72\",\n menuAuto: () => \"w-auto min-w-40\",\n // Position variants\n menuTop: () => \"bottom-full mb-1\",\n menuBottom: () => \"top-full mt-1\",\n menuLeft: () => \"right-0\",\n menuRight: () => \"left-0\",\n // Animation states\n menuEntering: () => \"opacity-0 scale-95 transform origin-top\",\n menuEntered: () => \"opacity-100 scale-100 transform origin-top\",\n menuExiting: () => \"opacity-0 scale-95 transform origin-top\",\n // Menu items\n itemContainer: () => \"py-1 px-1\",\n item: () => \"flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:text-blue-700 dark:hover:text-blue-300 transition-all duration-200 cursor-pointer hover:shadow-sm rounded-sm\",\n itemActive: () => \"bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 shadow-sm\",\n itemDisabled: () => \"text-gray-400 dark:text-gray-600 cursor-not-allowed hover:bg-transparent hover:text-gray-400 dark:hover:text-gray-600\",\n // Special item types\n divider: () => \"my-1 border-t border-gray-200 dark:border-gray-700\",\n header: () => \"px-4 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\",\n // Icons in menu items\n itemIcon: () => \"mr-3 h-4 w-4 flex-shrink-0\",\n itemIconRight: () => \"ml-auto h-4 w-4 flex-shrink-0\"\n },\n // Drawer/Sidebar overlays\n drawer: {\n backdrop: () => \"fixed inset-0 z-40 bg-black/50 dark:bg-black/70 transition-opacity duration-300\",\n container: () => \"fixed inset-y-0 z-50 flex w-full justify-end transition-transform duration-300 ease-in-out\",\n // Position variants\n right: () => \"right-0\",\n left: () => \"left-0 justify-start\",\n // Size variants\n narrow: () => \"max-w-xs\",\n default: () => \"max-w-md\",\n wide: () => \"max-w-lg\",\n extraWide: () => \"max-w-2xl\",\n // Content\n content: () => \"relative flex w-full flex-col bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 shadow-xl\",\n contentLeft: () => \"border-r border-l-0 border-gray-200 dark:border-gray-700\",\n header: () => \"flex items-center justify-between px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700\",\n title: () => \"text-lg font-semibold text-gray-900 dark:text-gray-100\",\n closeButton: () => \"p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors\",\n body: () => \"flex-1 px-4 sm:px-6 py-4 overflow-y-auto\",\n footer: () => \"flex items-center justify-end space-x-3 px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50\",\n // Animation states\n entering: () => \"translate-x-full\",\n enteringLeft: () => \"-translate-x-full\",\n entered: () => \"translate-x-0\",\n exiting: () => \"translate-x-full\",\n exitingLeft: () => \"-translate-x-full\"\n },\n // Sheet overlays (bottom sheets, action sheets)\n sheet: {\n backdrop: () => \"fixed inset-0 z-40 bg-black/50 dark:bg-black/70 transition-opacity duration-300\",\n container: () => \"fixed inset-x-0 bottom-0 z-50 transition-transform duration-300 ease-out\",\n content: () => \"relative bg-white dark:bg-gray-900 rounded-t-lg shadow-xl border-t border-gray-200 dark:border-gray-700 max-h-[85vh] overflow-hidden\",\n handle: () => \"flex justify-center py-2\",\n handleBar: () => \"w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full\",\n header: () => \"flex items-center justify-between px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700\",\n title: () => \"text-lg font-semibold text-gray-900 dark:text-gray-100\",\n closeButton: () => \"p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors\",\n body: () => \"px-4 sm:px-6 py-4 overflow-y-auto\",\n footer: () => \"flex items-center justify-center space-x-3 px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50\",\n // Animation states\n entering: () => \"translate-y-full\",\n entered: () => \"translate-y-0\",\n exiting: () => \"translate-y-full\"\n },\n // Context menus (right-click menus)\n contextMenu: {\n backdrop: () => \"fixed inset-0 z-30\",\n container: () => \"absolute z-50 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-1 focus:outline-none transition-all duration-150\",\n item: () => \"flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 transition-colors cursor-pointer\",\n itemDisabled: () => \"text-gray-400 dark:text-gray-600 cursor-not-allowed hover:bg-transparent\",\n itemDanger: () => \"text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-700 dark:hover:text-red-300\",\n divider: () => \"my-1 border-t border-gray-200 dark:border-gray-700\",\n icon: () => \"mr-2 h-4 w-4 flex-shrink-0\",\n shortcut: () => \"ml-auto text-xs text-gray-400 dark:text-gray-500\",\n // Nested menu indicators\n submenuIndicator: () => \"ml-auto h-4 w-4 text-gray-400 dark:text-gray-500\",\n submenu: () => \"absolute left-full top-0 ml-1\"\n },\n // Loading overlays\n loading: {\n backdrop: () => \"fixed inset-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm flex items-center justify-center transition-all duration-300\",\n container: () => \"flex flex-col items-center space-y-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700\",\n spinner: () => \"w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin\",\n spinnerLarge: () => \"w-12 h-12 border-3 border-blue-600 border-t-transparent rounded-full animate-spin\",\n text: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n subtext: () => \"text-xs text-gray-500 dark:text-gray-400 text-center max-w-xs\"\n },\n // Portal utilities for managing overlay z-index and positioning\n portal: {\n // Z-index layers (ensure proper stacking)\n backdrop: () => \"z-40\",\n dropdown: () => \"z-50\",\n tooltip: () => \"z-50\",\n popover: () => \"z-40\",\n modal: () => \"z-50\",\n drawer: () => \"z-50\",\n sheet: () => \"z-50\",\n contextMenu: () => \"z-50\",\n loading: () => \"z-60\",\n notification: () => \"z-70\",\n // Focus trap utilities\n focusTrap: () => \"focus:outline-none\",\n focusVisible: () => \"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n // Screen reader utilities\n srOnly: () => \"sr-only\",\n ariaLabel: () => \"aria-label\"\n }\n },\n // Micro-Interactions & Animations variants\n animations: {\n // Hover effects\n hover: {\n // Card hover effects\n card: {\n subtle: () => \"transition-all duration-200 hover:shadow-md hover:-translate-y-0.5\",\n lift: () => \"transition-all duration-300 hover:shadow-lg hover:-translate-y-1\",\n glow: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/25 dark:hover:shadow-blue-400/25\",\n scale: () => \"transition-transform duration-200 hover:scale-105\",\n border: () => \"transition-all duration-200 hover:border-blue-300 dark:hover:border-blue-600\",\n // Web3 specific card hovers\n nft: () => \"transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/30 hover:scale-[1.02]\",\n wallet: () => \"transition-all duration-200 hover:shadow-md hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 dark:hover:from-blue-900/20 dark:hover:to-indigo-900/20\",\n transaction: () => \"transition-all duration-200 hover:shadow-md hover:border-green-300 dark:hover:border-green-600\"\n },\n // Button hover effects\n button: {\n lift: () => \"transition-all duration-150 hover:-translate-y-0.5 hover:shadow-md\",\n glow: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-current/25\",\n scale: () => \"transition-transform duration-150 hover:scale-105\",\n shimmer: () => \"relative overflow-hidden transition-all duration-200 before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent hover:before:translate-x-full\",\n // Web3 button hovers\n connect: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/30 hover:scale-[1.02]\",\n transaction: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-green-500/30\",\n disconnect: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-red-500/30\"\n },\n // Icon hover effects\n icon: {\n bounce: () => \"transition-transform duration-200 hover:scale-110 hover:-translate-y-0.5\",\n rotate: () => \"transition-transform duration-200 hover:rotate-12\",\n pulse: () => \"transition-all duration-200 hover:scale-110 hover:text-blue-600 dark:hover:text-blue-400\",\n glow: () => \"transition-all duration-200 hover:text-blue-600 dark:hover:text-blue-400 hover:drop-shadow-sm\"\n }\n },\n // Loading animations\n loading: {\n // Spinner variants\n spinner: {\n default: () => \"animate-spin\",\n slow: () => \"animate-spin-slow\",\n fast: () => \"animate-spin-fast\",\n bounce: () => \"animate-bounce\",\n pulse: () => \"animate-pulse\",\n ping: () => \"animate-ping\"\n },\n // Skeleton loaders\n skeleton: {\n base: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded\",\n line: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 h-4 rounded\",\n circle: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded-full\",\n card: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg h-32\",\n // Shimmer effect\n shimmer: () => \"relative overflow-hidden bg-gray-200 dark:bg-gray-700 before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-gray-200 before:via-white before:to-gray-200 dark:before:from-gray-700 dark:before:via-gray-600 dark:before:to-gray-700\",\n // Progressive loading\n progressive: () => \"bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%] animate-shimmer-bg\"\n },\n // Progress indicators\n progress: {\n bar: () => \"transition-all duration-300 ease-out\",\n indeterminate: () => \"animate-progress-indeterminate bg-gradient-to-r from-blue-500 via-purple-500 to-blue-500 bg-[length:200%_100%]\",\n // Web3 progress indicators\n transaction: () => \"animate-progress-glow bg-gradient-to-r from-green-400 to-blue-500\",\n minting: () => \"animate-progress-rainbow bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500\"\n }\n },\n // Transition animations\n transitions: {\n // Slide transitions\n slide: {\n up: () => \"transition-transform duration-300 ease-out\",\n upEnter: () => \"translate-y-full\",\n upEntered: () => \"translate-y-0\",\n upExit: () => \"translate-y-full\",\n down: () => \"transition-transform duration-300 ease-out\",\n downEnter: () => \"-translate-y-full\",\n downEntered: () => \"translate-y-0\",\n downExit: () => \"-translate-y-full\",\n left: () => \"transition-transform duration-300 ease-out\",\n leftEnter: () => \"translate-x-full\",\n leftEntered: () => \"translate-x-0\",\n leftExit: () => \"translate-x-full\",\n right: () => \"transition-transform duration-300 ease-out\",\n rightEnter: () => \"-translate-x-full\",\n rightEntered: () => \"translate-x-0\",\n rightExit: () => \"-translate-x-full\"\n },\n // Fade transitions\n fade: {\n default: () => \"transition-opacity duration-300 ease-out\",\n enter: () => \"opacity-0\",\n entered: () => \"opacity-100\",\n exit: () => \"opacity-0\",\n fast: () => \"transition-opacity duration-150 ease-out\",\n slow: () => \"transition-opacity duration-500 ease-out\",\n // Fade with scale\n scale: () => \"transition-all duration-300 ease-out\",\n scaleEnter: () => \"opacity-0 scale-95\",\n scaleEntered: () => \"opacity-100 scale-100\",\n scaleExit: () => \"opacity-0 scale-95\"\n },\n // Page transitions\n page: {\n slideLeft: () => \"transition-transform duration-300 ease-in-out\",\n slideRight: () => \"transition-transform duration-300 ease-in-out\",\n fadeScale: () => \"transition-all duration-300 ease-in-out\"\n }\n },\n // Gesture feedback\n feedback: {\n // Click/tap feedback\n tap: {\n ripple: () => \"relative overflow-hidden transition-all duration-150 active:scale-95\",\n scale: () => \"transition-transform duration-100 active:scale-95\",\n glow: () => \"transition-all duration-150 active:shadow-lg active:shadow-current/30\",\n // Material Design ripple effect\n materialRipple: () => \"relative overflow-hidden after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:transition-opacity after:duration-300 after:opacity-0 active:after:opacity-100 active:after:bg-white/20\"\n },\n // Focus feedback\n focus: {\n ring: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n glow: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:shadow-lg focus-visible:shadow-blue-500/25\",\n scale: () => \"focus-visible:outline-none focus-visible:scale-105 focus-visible:ring-2 focus-visible:ring-blue-500\",\n // Web3 focus styles\n wallet: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:bg-blue-50 dark:focus-visible:bg-blue-900/20\"\n },\n // Drag feedback\n drag: {\n dragging: () => \"opacity-50 scale-95 rotate-3 shadow-xl z-50\",\n dropzone: () => \"transition-all duration-200 border-2 border-dashed\",\n dropzoneActive: () => \"border-blue-400 bg-blue-50 dark:bg-blue-900/20 scale-105\",\n dropzoneInactive: () => \"border-gray-300 dark:border-gray-600\"\n }\n },\n // Scroll animations\n scroll: {\n // Reveal animations\n reveal: {\n fadeUp: () => \"opacity-0 translate-y-8 transition-all duration-700 ease-out\",\n fadeUpVisible: () => \"opacity-100 translate-y-0\",\n fadeDown: () => \"opacity-0 -translate-y-8 transition-all duration-700 ease-out\",\n fadeDownVisible: () => \"opacity-100 translate-y-0\",\n fadeLeft: () => \"opacity-0 translate-x-8 transition-all duration-700 ease-out\",\n fadeLeftVisible: () => \"opacity-100 translate-x-0\",\n fadeRight: () => \"opacity-0 -translate-x-8 transition-all duration-700 ease-out\",\n fadeRightVisible: () => \"opacity-100 translate-x-0\",\n scale: () => \"opacity-0 scale-90 transition-all duration-700 ease-out\",\n scaleVisible: () => \"opacity-100 scale-100\"\n },\n // Parallax effects\n parallax: {\n slow: () => \"transform transition-transform duration-75\",\n medium: () => \"transform transition-transform duration-100\",\n fast: () => \"transform transition-transform duration-150\"\n },\n // Sticky animations\n sticky: {\n shrink: () => \"transition-all duration-300 ease-out\",\n shrinkActive: () => \"py-2 shadow-lg backdrop-blur-md\",\n shrinkInactive: () => \"py-4\"\n }\n },\n // Web3-specific animations\n web3: {\n // Wallet connection animations\n wallet: {\n connecting: () => \"animate-pulse bg-gradient-to-r from-blue-500 via-purple-500 to-blue-500 bg-[length:200%_100%] animate-shimmer-bg\",\n connected: () => \"animate-bounce-gentle bg-gradient-to-r from-green-400 to-blue-500\",\n disconnected: () => \"animate-fade-out opacity-50\",\n error: () => \"animate-shake bg-red-100 dark:bg-red-900/20\"\n },\n // Transaction animations\n transaction: {\n pending: () => \"animate-pulse border border-yellow-300 bg-yellow-50 dark:border-yellow-700 dark:bg-yellow-900/20\",\n confirming: () => \"animate-progress-dots bg-gradient-to-r from-blue-500 to-purple-500\",\n confirmed: () => \"animate-success-pulse border border-green-300 bg-green-50 dark:border-green-700 dark:bg-green-900/20\",\n failed: () => \"animate-error-flash border border-red-300 bg-red-50 dark:border-red-700 dark:bg-red-900/20\"\n },\n // Blockchain activity\n blockchain: {\n mining: () => \"animate-mining-pulse bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-400 bg-[length:200%_100%]\",\n minting: () => \"animate-rainbow bg-gradient-to-r from-pink-500 via-purple-500 via-blue-500 to-pink-500 bg-[length:300%_100%]\",\n staking: () => \"animate-glow-pulse bg-gradient-to-r from-green-400 to-emerald-500\",\n burning: () => \"animate-fire bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 bg-[length:200%_100%]\"\n }\n },\n // Utility animations\n utility: {\n // Attention grabbing\n attention: {\n bounce: () => \"animate-bounce\",\n pulse: () => \"animate-pulse\",\n ping: () => \"animate-ping\",\n shake: () => \"animate-shake\",\n wiggle: () => \"animate-wiggle\",\n heartbeat: () => \"animate-heartbeat\"\n },\n // State indicators\n state: {\n success: () => \"animate-success-checkmark\",\n error: () => \"animate-error-x\",\n warning: () => \"animate-warning-triangle\",\n info: () => \"animate-info-circle\"\n },\n // Performance considerations\n reduced: {\n // Reduced motion variants for accessibility\n fadeOnly: () => \"transition-opacity duration-300 ease-out\",\n scaleOnly: () => \"transition-transform duration-200 ease-out\",\n instant: () => \"transition-none\",\n respectPrefers: () => \"motion-safe:transition-all motion-safe:duration-300 motion-reduce:transition-none\"\n }\n }\n },\n // Accessibility & A11Y variants\n accessibility: {\n // Screen reader and assistive technology support\n screenReader: {\n // Visually hidden but accessible to screen readers\n only: () => \"sr-only\",\n focusable: () => \"sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-2 focus:bg-white focus:text-black focus:border focus:rounded\",\n // Skip links for navigation\n skipLink: () => \"sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded focus:m-2 focus:no-underline\"\n },\n // Focus management\n focus: {\n // Focus indicators\n ring: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n ringInset: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500\",\n ringDark: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900\",\n // High contrast focus for better visibility\n highContrast: () => \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-yellow-400 focus-visible:ring-offset-2 focus-visible:bg-yellow-50 dark:focus-visible:bg-yellow-900/20\",\n // Web3 specific focus styles\n wallet: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:bg-blue-50 dark:focus-visible:bg-blue-900/20\",\n transaction: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2\",\n error: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2\"\n },\n // Color contrast and visibility\n contrast: {\n // High contrast text\n text: {\n high: () => \"text-gray-900 dark:text-gray-100\",\n medium: () => \"text-gray-700 dark:text-gray-300\",\n low: () => \"text-gray-600 dark:text-gray-400\",\n inverse: () => \"text-white dark:text-gray-900\"\n },\n // High contrast backgrounds\n background: {\n primary: () => \"bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900\",\n secondary: () => \"bg-gray-700 text-white dark:bg-gray-300 dark:text-gray-900\",\n success: () => \"bg-green-700 text-white dark:bg-green-300 dark:text-gray-900\",\n warning: () => \"bg-yellow-700 text-white dark:bg-yellow-300 dark:text-gray-900\",\n error: () => \"bg-red-700 text-white dark:bg-red-300 dark:text-gray-900\"\n },\n // Link contrast\n link: {\n default: () => \"text-blue-700 dark:text-blue-300 underline hover:text-blue-900 dark:hover:text-blue-100\",\n visited: () => \"text-purple-700 dark:text-purple-300 underline hover:text-purple-900 dark:hover:text-purple-100\"\n }\n },\n // Motion and animation preferences\n motion: {\n // Respect user's motion preferences\n respectPrefers: () => \"motion-safe:transition-all motion-safe:duration-300 motion-reduce:transition-none\",\n reduceMotion: () => \"motion-reduce:transition-none motion-reduce:animate-none\",\n // Safe animations that work with reduced motion\n safe: {\n fade: () => \"motion-safe:transition-opacity motion-safe:duration-300 motion-reduce:transition-none\",\n scale: () => \"motion-safe:transition-transform motion-safe:duration-200 motion-reduce:transition-none\",\n slide: () => \"motion-safe:transition-transform motion-safe:duration-300 motion-reduce:transition-none\"\n },\n // Loading animations that respect motion preferences\n loading: {\n spin: () => \"motion-safe:animate-spin motion-reduce:animate-none\",\n pulse: () => \"motion-safe:animate-pulse motion-reduce:animate-none\",\n bounce: () => \"motion-safe:animate-bounce motion-reduce:animate-none\"\n }\n },\n // Semantic HTML and roles\n semantic: {\n // Interactive roles\n interactive: {\n button: () => 'role=\"button\" tabindex=\"0\"',\n link: () => 'role=\"link\"',\n menuitem: () => 'role=\"menuitem\"',\n tab: () => 'role=\"tab\"',\n tabpanel: () => 'role=\"tabpanel\"',\n dialog: () => 'role=\"dialog\"'\n },\n // State roles\n states: {\n selected: (t) => `aria-selected=\"${t}\"`,\n checked: (t) => `aria-checked=\"${t}\"`,\n pressed: (t) => `aria-pressed=\"${t}\"`,\n expanded: (t) => `aria-expanded=\"${t}\"`,\n disabled: (t) => t ? 'aria-disabled=\"true\" tabindex=\"-1\"' : \"\"\n },\n // Web3 specific semantic patterns\n web3: {\n wallet: () => 'role=\"button\" aria-label=\"Connect Wallet\"',\n transaction: () => 'role=\"status\" aria-live=\"polite\"',\n balance: () => 'role=\"text\" aria-label=\"Account Balance\"',\n address: () => 'role=\"text\" aria-label=\"Wallet Address\"'\n }\n },\n // Form accessibility\n form: {\n // Required field indicators\n required: {\n indicator: () => \"text-red-500 dark:text-red-400\",\n text: () => 'aria-required=\"true\" required',\n visual: () => 'after:content-[\"*\"] after:ml-1 after:text-red-500 dark:after:text-red-400'\n },\n // Validation states\n validation: {\n valid: () => \"border-green-500 dark:border-green-400 focus:ring-green-500\",\n invalid: () => 'border-red-500 dark:border-red-400 focus:ring-red-500 aria-invalid=\"true\"',\n pending: () => \"border-yellow-500 dark:border-yellow-400 focus:ring-yellow-500\"\n }\n },\n // Interactive patterns\n interactive: {\n // Button patterns\n button: {\n primary: () => \"inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed\",\n secondary: () => \"inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed\",\n // Icon buttons with proper labels\n icon: () => \"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500\"\n },\n // Link patterns\n link: {\n default: () => \"text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\",\n external: () => 'text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 after:content-[\"↗\"] after:ml-1 after:text-xs'\n }\n },\n // Text and content accessibility\n content: {\n // Text sizing and scaling\n text: {\n minimum: () => \"text-sm min-h-[44px] min-w-[44px]\",\n // WCAG minimum touch target\n touch: () => \"min-h-[44px] min-w-[44px] touch-manipulation\"\n }\n },\n // Error handling and feedback\n feedback: {\n // Error messages\n error: {\n container: () => \"border border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/20 rounded-md p-4\",\n title: () => \"text-sm font-medium text-red-800 dark:text-red-200\",\n message: () => \"text-sm text-red-700 dark:text-red-300 mt-2\"\n },\n // Success messages\n success: {\n container: () => \"border border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/20 rounded-md p-4\",\n title: () => \"text-sm font-medium text-green-800 dark:text-green-200\",\n message: () => \"text-sm text-green-700 dark:text-green-300 mt-2\"\n },\n // Live regions for dynamic content\n liveRegion: {\n polite: () => 'sr-only aria-live=\"polite\"',\n assertive: () => 'sr-only aria-live=\"assertive\"',\n status: () => 'sr-only role=\"status\" aria-live=\"polite\"',\n alert: () => 'sr-only role=\"alert\" aria-live=\"assertive\"'\n }\n }\n },\n // Performance & Optimization variants\n performance: {\n // Bundle optimization patterns\n bundle: {\n // Lazy loading utilities\n lazy: {\n component: () => \"opacity-0 transition-opacity duration-300\",\n componentLoaded: () => \"opacity-100\",\n image: () => \"blur-sm transition-all duration-300\",\n imageLoaded: () => \"blur-none\",\n skeleton: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded\"\n },\n // Code splitting indicators\n splitting: {\n loading: () => \"flex items-center justify-center py-8\",\n error: () => \"text-red-600 dark:text-red-400 text-center py-8\",\n fallback: () => \"bg-gray-100 dark:bg-gray-800 animate-pulse rounded\"\n }\n },\n // Rendering optimization\n rendering: {\n // GPU acceleration utilities\n gpu: {\n transform: () => \"transform-gpu\",\n layer: () => \"will-change-transform transform translate3d-0\",\n composite: () => \"backface-hidden\"\n },\n // Layout optimization\n layout: {\n // Prevent layout shifts\n stable: () => \"aspect-square\",\n containLayout: () => \"contain-layout\",\n containStyle: () => \"contain-style\",\n // Efficient positioning\n sticky: () => \"sticky top-0 z-40\",\n fixed: () => \"fixed inset-0 z-50\"\n },\n // Memory optimization\n memory: {\n // Efficient list rendering\n virtualList: () => \"overflow-hidden\",\n virtualItem: () => \"absolute left-0 right-0\",\n // Image optimization\n responsiveImage: () => \"max-w-full h-auto object-cover\",\n lazyImage: () => \"object-cover transition-opacity duration-300 opacity-0\",\n loadedImage: () => \"opacity-100\"\n }\n },\n // Network optimization\n network: {\n // Caching patterns\n cache: {\n // Service worker states\n cached: () => \"border-l-4 border-green-500 bg-green-50 dark:bg-green-900/20\",\n updating: () => \"border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20\",\n offline: () => \"border-l-4 border-gray-500 bg-gray-50 dark:bg-gray-900/20\",\n error: () => \"border-l-4 border-red-500 bg-red-50 dark:bg-red-900/20\",\n // Cache status indicators\n fresh: () => \"text-green-600 dark:text-green-400\",\n stale: () => \"text-yellow-600 dark:text-yellow-400\",\n expired: () => \"text-red-600 dark:text-red-400\"\n },\n // Connection quality\n connection: {\n fast: () => \"border-green-500 bg-green-50 dark:bg-green-900/20\",\n slow: () => \"border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20\",\n offline: () => \"border-red-500 bg-red-50 dark:bg-red-900/20\"\n }\n },\n // Core Web Vitals optimization\n webVitals: {\n // Largest Contentful Paint (LCP)\n lcp: {\n optimize: () => \"will-change-contents\",\n hero: () => \"contain-layout will-change-contents\",\n image: () => \"object-cover will-change-auto\"\n },\n // First Input Delay (FID) / Interaction to Next Paint (INP)\n interactivity: {\n optimize: () => \"touch-manipulation select-none\",\n debounced: () => \"transition-none\",\n throttled: () => \"pointer-events-none transition-opacity duration-100\",\n ready: () => \"pointer-events-auto opacity-100\"\n },\n // Cumulative Layout Shift (CLS)\n layoutStability: {\n // Prevent layout shifts\n stable: () => \"aspect-square contain-layout\",\n placeholder: () => \"min-h-[200px] bg-gray-100 dark:bg-gray-800\",\n skeleton: () => \"animate-pulse bg-gray-200 dark:bg-gray-700\",\n // Image container stability\n imageContainer: () => \"overflow-hidden relative\",\n imageStable: () => \"absolute inset-0 object-cover\"\n }\n },\n // Web3 Performance optimization\n web3: {\n // Wallet connection optimization\n wallet: {\n cached: () => \"opacity-100 transition-opacity duration-200\",\n connecting: () => \"opacity-75 cursor-wait\",\n staleData: () => \"opacity-75\",\n freshData: () => \"opacity-100\"\n },\n // Transaction optimization\n transaction: {\n // Batching indicators\n batched: () => \"border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20\",\n individual: () => \"border-l-4 border-gray-500 bg-gray-50 dark:bg-gray-900/20\",\n // Gas optimization\n gasOptimal: () => \"text-green-600 dark:text-green-400\",\n gasHigh: () => \"text-yellow-600 dark:text-yellow-400\",\n gasVeryHigh: () => \"text-red-600 dark:text-red-400\"\n },\n // Blockchain data optimization\n blockchain: {\n // Data freshness\n realtime: () => \"border-green-500 bg-green-50 dark:bg-green-900/20\",\n cached: () => \"border-blue-500 bg-blue-50 dark:bg-blue-900/20\",\n stale: () => \"border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20\",\n // Query optimization\n optimistic: () => \"opacity-75 transition-opacity duration-200\",\n confirmed: () => \"opacity-100\",\n refetching: () => \"animate-pulse\"\n }\n },\n // Monitoring and debugging\n monitoring: {\n // Performance metrics\n metrics: {\n good: () => \"text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/20\",\n needsImprovement: () => \"text-yellow-600 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-900/20\",\n poor: () => \"text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/20\"\n },\n // Error boundaries\n errorBoundary: {\n container: () => \"border border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/20 rounded-lg p-4\",\n title: () => \"text-lg font-semibold text-red-800 dark:text-red-200\",\n message: () => \"text-red-700 dark:text-red-300 mt-2\",\n retry: () => \"mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500\",\n fallback: () => \"text-center text-gray-500 dark:text-gray-400 py-8\"\n }\n },\n // Resource optimization\n resource: {\n // Image optimization\n image: {\n // Responsive images\n responsive: () => \"w-full h-auto object-cover\",\n hero: () => \"w-full h-[50vh] object-cover\",\n thumbnail: () => \"w-16 h-16 object-cover rounded\",\n avatar: () => \"w-10 h-10 object-cover rounded-full\",\n // Loading states\n placeholder: () => \"bg-gray-200 dark:bg-gray-700 animate-pulse\",\n blurred: () => \"filter blur-sm\",\n sharp: () => \"filter blur-none transition-all duration-300\"\n },\n // Critical resources\n critical: {\n // Above the fold\n aboveFold: () => \"will-change-contents\",\n belowFold: () => \"will-change-auto\"\n }\n },\n // Database and API optimization\n data: {\n // Query optimization\n query: {\n cached: () => \"opacity-100\",\n loading: () => \"opacity-75 animate-pulse\",\n error: () => \"opacity-50 text-red-600 dark:text-red-400\",\n // REST optimization\n fresh: () => \"border-l-2 border-green-500\",\n stale: () => \"border-l-2 border-yellow-500\",\n invalid: () => \"border-l-2 border-red-500\",\n // Optimistic updates\n optimistic: () => \"opacity-75\",\n confirmed: () => \"opacity-100\",\n reverted: () => \"opacity-50 line-through\"\n },\n // Real-time optimization\n realtime: {\n // WebSocket states\n connected: () => \"border-green-500 bg-green-50 dark:bg-green-900/20\",\n connecting: () => \"border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20\",\n disconnected: () => \"border-red-500 bg-red-50 dark:bg-red-900/20\",\n // Update indicators\n live: () => \"animate-pulse text-green-600 dark:text-green-400\",\n delayed: () => \"text-yellow-600 dark:text-yellow-400\",\n offline: () => \"text-gray-500 dark:text-gray-400\"\n }\n }\n }\n};\nclass k {\n /**\n * Creates a new SimpleVariants instance.\n *\n * @param designSystemVariants - Configuration object containing variant definitions\n * @example\n * ```typescript\n * const variants = new SimpleVariants({\n * button: {\n * primary: () => 'bg-blue-600 text-white px-4 py-2 rounded',\n * secondary: () => 'bg-gray-200 text-gray-900 px-4 py-2 rounded'\n * }\n * });\n * ```\n */\n constructor(r) {\n this.fallbacks = /* @__PURE__ */ new Map(), this.variants = r || {}, this.setupDefaultFallbacks(), this.validateConfiguration();\n }\n /**\n * Sets up default fallback styles for common component variants.\n * These fallbacks ensure that basic styling is available even when\n * specific variants are not defined in the design system.\n *\n * @private\n */\n setupDefaultFallbacks() {\n this.fallbacks.set(\"button.primary\", \"bg-blue-600 text-white px-4 py-2 rounded\"), this.fallbacks.set(\"button.secondary\", \"bg-gray-200 text-gray-900 px-4 py-2 rounded\"), this.fallbacks.set(\"button.outline\", \"border border-gray-300 text-gray-700 px-4 py-2 rounded\"), this.fallbacks.set(\n \"alert.default\",\n \"bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded\"\n ), this.fallbacks.set(\n \"alert.destructive\",\n \"bg-red-50 border border-red-200 text-red-800 p-4 rounded\"\n ), this.fallbacks.set(\n \"input.default\",\n \"border border-gray-300 px-3 py-2 rounded focus:ring-2 focus:ring-blue-500\"\n ), this.fallbacks.set(\"badge.default\", \"bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm\");\n }\n /**\n * Retrieves CSS classes for a specific component variant.\n *\n * This is the main API method for getting variant classes. It supports\n * both separate parameters and dot notation for convenience.\n *\n * @param component - The component name (e.g., 'button', 'input')\n * @param variant - The variant name (e.g., 'primary', 'outline'). Defaults to 'default'\n * @returns CSS class string for the specified variant\n * @throws {Error} When neither variant nor fallback is available\n *\n * @example\n * ```typescript\n * // Separate parameters\n * const classes1 = variants.get('button', 'primary');\n * // Returns: \"bg-blue-600 text-white px-4 py-2 rounded ...\"\n *\n * // Dot notation\n * const classes2 = variants.get('button.primary');\n * // Returns: same as above\n *\n * // Default variant\n * const classes3 = variants.get('input');\n * // Returns: default input styling\n * ```\n */\n get(r, a) {\n if (!a && r.includes(\".\")) {\n const [n, i] = r.split(\".\", 2);\n return this.get(n, i);\n }\n a || (a = \"default\");\n try {\n const n = this.variants[r];\n if (!n)\n return this.getFallback(r, a);\n const i = n[a];\n if (typeof i == \"function\")\n return i();\n if (typeof i == \"string\")\n return i;\n if (i && typeof i == \"object\") {\n if (typeof i.default == \"function\")\n return i.default();\n if (typeof i.default == \"string\")\n return i.default;\n }\n return this.getFallback(r, a);\n } catch (n) {\n const i = `Failed to resolve variant '${r}.${a}': ${n instanceof Error ? n.message : String(n)}`;\n return this.logStructuredError(\"VARIANT_RESOLUTION_ERROR\", i, {\n component: r,\n variant: a,\n error: n instanceof Error ? n.message : String(n),\n availableVariants: this.getAvailableVariants(r)\n }), this.getFallback(r, a);\n }\n }\n /**\n * Retrieves CSS classes for a specific component variant with size modifier.\n *\n * This method allows you to get size-specific variants (e.g., small, medium, large)\n * for components. If the sized variant doesn't exist, it falls back to the base variant.\n *\n * @param component - The component name (e.g., 'button', 'input')\n * @param variant - The variant name (e.g., 'primary', 'outline')\n * @param size - The size modifier (e.g., 'sm', 'md', 'lg')\n * @returns CSS class string for the specified sized variant\n *\n * @example\n * ```typescript\n * // Get a small primary button\n * const smallButton = variants.sized('button', 'primary', 'sm');\n * // Returns: \"bg-blue-600 text-white px-3 py-1.5 text-xs ...\"\n *\n * // Get a large secondary button\n * const largeButton = variants.sized('button', 'secondary', 'lg');\n * // Returns: \"bg-gray-100 text-gray-900 px-6 py-3 text-base ...\"\n * ```\n */\n sized(r, a, n) {\n try {\n const d = this.variants[r]?.[a];\n if (d && typeof d == \"object\" && d[n]) {\n const l = d[n];\n if (typeof l == \"function\")\n return l();\n if (typeof l == \"string\")\n return l;\n }\n return this.get(r, a);\n } catch (i) {\n return console.warn(`Failed to get sized variant ${r}.${a}.${n}:`, i), this.get(r, a);\n }\n }\n /**\n * Retrieves CSS classes for nested variant paths.\n *\n * This method allows you to access deeply nested variants using dot notation.\n * Useful for complex variant structures with multiple levels of nesting.\n *\n * @param path - Dot-separated path to the variant (e.g., 'button.gradient.primary')\n * @returns CSS class string for the nested variant\n *\n * @example\n * ```typescript\n * // Get a nested gradient button variant\n * const gradientButton = variants.nested('button.gradient.primary');\n * // Returns: \"bg-gradient-to-r from-blue-600 to-purple-600 ...\"\n *\n * // Access deeply nested variants\n * const cardHeader = variants.nested('card.header.elevated');\n * ```\n */\n nested(r) {\n try {\n const a = r.split(\".\");\n let n = this.variants;\n for (const i of a)\n if (n = n?.[i], !n) break;\n return typeof n == \"function\" ? n() : typeof n == \"string\" ? n : n && typeof n.default == \"function\" ? n.default() : n && typeof n.default == \"string\" ? n.default : this.getFallback(a[0], a.slice(1).join(\".\"));\n } catch (a) {\n return console.warn(`Failed to get nested variant ${r}:`, a), this.getFallback(r.split(\".\")[0], r.split(\".\").slice(1).join(\".\"));\n }\n }\n /**\n * Conditionally selects between two variants based on a boolean condition.\n *\n * This utility method helps with conditional styling, allowing you to\n * switch between different variants based on application state.\n *\n * @param condition - Boolean condition to evaluate\n * @param trueComponent - Component name when condition is true\n * @param trueVariant - Variant name when condition is true\n * @param falseComponent - Component name when condition is false (optional)\n * @param falseVariant - Variant name when condition is false (optional)\n * @returns CSS class string for the selected variant\n *\n * @example\n * ```typescript\n * // Show error or success alert based on validation\n * const alertClasses = variants.when(\n * hasError,\n * 'alert', 'destructive',\n * 'alert', 'success'\n * );\n *\n * // Simple boolean styling\n * const buttonClasses = variants.when(isLoading, 'button', 'disabled');\n * ```\n */\n when(r, a, n, i, d) {\n return r ? this.get(a, n) : i && d ? this.get(i, d) : \"\";\n }\n /**\n * Combines multiple variant classes into a single class string.\n *\n * This method allows you to merge variant classes with custom classes,\n * creating complex styling combinations. Supports both variant paths\n * and custom CSS classes.\n *\n * @param variants - Array of variant paths or custom CSS classes\n * @returns Combined CSS class string\n *\n * @example\n * ```typescript\n * // Combine variant with custom classes\n * const complexButton = variants.combine(\n * 'button.primary',\n * 'animations.hover',\n * 'custom-shadow',\n * 'my-2'\n * );\n * // Returns: \"bg-blue-600 text-white ... hover:scale-105 custom-shadow my-2\"\n *\n * // Mix variants and utilities\n * const styledCard = variants.combine(\n * 'card.elevated',\n * 'border-2',\n * 'border-blue-500'\n * );\n * ```\n */\n combine(...r) {\n return r.map((a) => a.includes(\".\") ? this.nested(a) : a).filter(Boolean).join(\" \");\n }\n /**\n * Gets fallback styles for when variants are not found.\n *\n * @private\n * @param component - Component name\n * @param variant - Variant name\n * @returns Fallback CSS classes or empty string\n */\n getFallback(r, a) {\n const n = `${r}.${a}`, i = this.fallbacks.get(n) || this.fallbacks.get(`${r}.default`) || \"\";\n return i || this.logStructuredError(\n \"FALLBACK_NOT_FOUND\",\n `No fallback found for '${r}.${a}'`,\n {\n component: r,\n variant: a,\n availableFallbacks: Array.from(this.fallbacks.keys()),\n suggestion: `Consider adding a fallback with addFallback('${r}.${a}', 'your-classes')`\n }\n ), i;\n }\n /**\n * Logs structured error messages for better debugging and AI assistance.\n *\n * @private\n * @param errorCode - Standardized error code\n * @param message - Human-readable error message\n * @param context - Additional context for debugging\n */\n logStructuredError(r, a, n) {\n const i = {\n timestamp: (/* @__PURE__ */ new Date()).toISOString(),\n code: r,\n message: a,\n context: n,\n source: \"SimpleVariants\"\n };\n console.warn(\"🎨 Design System Warning:\", i);\n }\n /**\n * Gets available variants for a component.\n *\n * @private\n * @param component - Component name\n * @returns Array of available variant names\n */\n getAvailableVariants(r) {\n try {\n const a = this.variants[r];\n return !a || typeof a != \"object\" ? [] : Object.keys(a);\n } catch {\n return [];\n }\n }\n /**\n * Validates variant configuration on initialization.\n *\n * @private\n */\n validateConfiguration() {\n if (!this.variants || typeof this.variants != \"object\") {\n this.logStructuredError(\n \"INVALID_CONFIGURATION\",\n \"Variant configuration is null, undefined, or not an object\",\n {\n configType: typeof this.variants,\n configValue: this.variants,\n suggestion: \"Provide a valid variant configuration object\"\n }\n );\n return;\n }\n const r = [];\n for (const [a, n] of Object.entries(this.variants))\n if (typeof n == \"object\" && n !== null) {\n \"default\" in n || r.push({\n type: \"warning\",\n message: `Component '${a}' has no 'default' variant`,\n component: a\n });\n for (const [i, d] of Object.entries(n))\n typeof d != \"function\" && typeof d != \"string\" && typeof d != \"object\" && r.push({\n type: \"error\",\n message: `Invalid variant type for '${a}.${i}': expected function, string, or object`,\n component: a\n });\n }\n r.length > 0 && this.logStructuredError(\"CONFIGURATION_VALIDATION\", \"Variant configuration has issues\", {\n issues: r,\n totalComponents: Object.keys(this.variants).length,\n recommendations: [\n \"Add default variants to all components\",\n \"Ensure all variants are functions, strings, or objects\",\n \"Consider using TypeScript for better type safety\"\n ]\n });\n }\n /**\n * Adds a custom fallback style for a specific variant.\n *\n * This method allows you to define fallback styles that will be used\n * when a specific variant is not found in the design system.\n *\n * @param key - The variant key in format 'component.variant'\n * @param classes - CSS classes to use as fallback\n *\n * @example\n * ```typescript\n * // Add custom fallback for a missing variant\n * variants.addFallback('button.special', 'bg-purple-600 text-white px-4 py-2 rounded');\n *\n * // Now this will use the fallback if 'special' variant doesn't exist\n * const specialButton = variants.get('button', 'special');\n * ```\n */\n addFallback(r, a) {\n this.fallbacks.set(r, a);\n }\n /**\n * Checks if a specific variant exists in the design system.\n *\n * This utility method helps you conditionally apply variants\n * based on their availability in the design system.\n *\n * @param component - The component name to check\n * @param variant - The variant name to check\n * @returns true if the variant exists, false otherwise\n *\n * @example\n * ```typescript\n * // Check before using a variant\n * if (variants.has('button', 'gradient')) {\n * const buttonClass = variants.get('button', 'gradient');\n * } else {\n * const buttonClass = variants.get('button', 'primary');\n * }\n *\n * // Conditional rendering logic\n * const showGradientOption = variants.has('button', 'gradient');\n * ```\n */\n has(r, a) {\n try {\n const n = this.variants[r];\n return !!(n && n[a]);\n } catch {\n return !1;\n }\n }\n}\nfunction X(t) {\n return new k(t);\n}\nfunction Z(t) {\n const r = new k(t);\n return {\n // Direct access functions\n button: (a, n) => n ? r.sized(\"button\", a, n) : r.get(\"button\", a),\n alert: (a) => r.get(\"alert\", a),\n input: (a) => r.get(\"input\", a),\n badge: (a) => r.get(\"badge\", a),\n // Generic access\n get: (a, n) => r.get(a, n),\n nested: (a) => r.nested(a),\n when: (a, n, i, d, l) => r.when(a, n, i, d, l),\n combine: (...a) => r.combine(...a)\n };\n}\nfunction x(...t) {\n return I(E(t));\n}\nfunction J(t, r) {\n if (t.startsWith(\"hsl(\"))\n return t.replace(\")\", ` / ${r})`);\n if (t.startsWith(\"#\")) {\n const a = t.slice(1), n = parseInt(a.slice(0, 2), 16), i = parseInt(a.slice(2, 4), 16), d = parseInt(a.slice(4, 6), 16);\n return `rgba(${n}, ${i}, ${d}, ${r})`;\n }\n return t;\n}\nfunction ee(t, r = {}) {\n const a = [t];\n return Object.entries(r).forEach(([n, i]) => {\n a.push(`${n}:${i}`);\n }), a.join(\" \");\n}\nfunction re(t, r) {\n return `${t} dark:${r}`;\n}\nfunction te(t, r = \"light\") {\n return t === \"primary\" ? r === \"dark\" ? \"#ffffff\" : \"#111827\" : t === \"secondary\" ? r === \"dark\" ? \"#9ca3af\" : \"#4b5563\" : r === \"dark\" ? \"#ffffff\" : \"#111827\";\n}\nfunction ae(t, r, a = \"to-r\") {\n return `bg-gradient-${a} from-${t} to-${r}`;\n}\nfunction oe(t) {\n return typeof t == \"number\" ? `${t * 0.25}rem` : t;\n}\nfunction ne(t = \"200ms\", r = \"ease-out\") {\n return `transition-all duration-${t.replace(\"ms\", \"\")} ${r}`;\n}\nconst O = {\n button: {\n xs: \"h-7 px-2 text-xs\",\n sm: \"h-8 px-3 text-sm\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-11 px-8 text-base\",\n xl: \"h-12 px-10 text-lg\"\n },\n input: {\n xs: \"h-7 px-2 text-xs\",\n sm: \"h-8 px-3 text-sm\",\n md: \"h-10 px-3 text-sm\",\n lg: \"h-11 px-4 text-base\",\n xl: \"h-12 px-4 text-lg\"\n },\n icon: {\n xs: \"w-3 h-3\",\n sm: \"w-4 h-4\",\n md: \"w-5 h-5\",\n lg: \"w-6 h-6\",\n xl: \"w-8 h-8\"\n }\n};\nfunction ie(t, r = \"md\") {\n return O[t][r];\n}\nconst D = \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\", W = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\", w = {\n default: \"transition-colors duration-200\",\n all: \"transition-all duration-200\",\n fast: \"transition-all duration-100\",\n slow: \"transition-all duration-300\",\n colors: \"transition-colors duration-200\",\n opacity: \"transition-opacity duration-200\",\n transform: \"transition-transform duration-200\"\n};\nfunction de(t) {\n return t.split(\" \").map((r) => `hover:${r}`).join(\" \");\n}\nfunction le(t = \"opacity-50 cursor-not-allowed pointer-events-none\") {\n return `disabled:${t.replace(/\\s+/g, \" disabled:\")}`;\n}\nconst ge = \"opacity-70 cursor-wait pointer-events-none\";\nfunction se(t) {\n return x({\n default: \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800\",\n primary: \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800\",\n secondary: \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700\",\n destructive: \"bg-red-600 text-white hover:bg-red-700 active:bg-red-800\",\n outline: \"border border-gray-300 bg-transparent hover:bg-gray-50 active:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800\",\n ghost: \"bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-800\"\n }[t], w.default, W);\n}\nfunction be(t = \"default\") {\n return x(\"w-full rounded-md border bg-white px-3 py-2 text-sm placeholder:text-gray-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400\", {\n default: \"border-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-400\",\n error: \"border-red-300 dark:border-red-600 focus:border-red-500 dark:focus:border-red-400\",\n success: \"border-green-300 dark:border-green-600 focus:border-green-500 dark:focus:border-green-400\"\n }[t], D, w.colors);\n}\nfunction ue(t = \"default\") {\n const r = \"rounded-lg bg-white dark:bg-gray-800\";\n return {\n default: r,\n bordered: `${r} border border-gray-200 dark:border-gray-700`,\n elevated: `${r} shadow-md`\n }[t];\n}\nfunction ye(t = \"base\", r = \"normal\", a = \"default\") {\n const n = {\n xs: \"text-xs\",\n sm: \"text-sm\",\n base: \"text-base\",\n lg: \"text-lg\",\n xl: \"text-xl\",\n \"2xl\": \"text-2xl\"\n }, i = {\n normal: \"font-normal\",\n medium: \"font-medium\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n }, d = {\n default: \"text-gray-900 dark:text-gray-100\",\n muted: \"text-gray-600 dark:text-gray-400\",\n primary: \"text-blue-600 dark:text-blue-400\"\n };\n return x(n[t], i[r], d[a]);\n}\nconst V = {\n success: \"bg-green-500\",\n error: \"bg-red-500\",\n warning: \"bg-orange-500\",\n attention: \"bg-amber-500\",\n info: \"bg-blue-500\",\n neutral: \"bg-gray-500\"\n};\nfunction ce(t) {\n return V[t];\n}\nconst B = {\n default: \"bg-white dark:bg-gray-800\",\n bordered: \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700\",\n elevated: \"bg-white dark:bg-gray-800 shadow-md\",\n info: \"bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-900 dark:text-blue-300\",\n success: \"bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-900 dark:text-green-300\",\n warning: \"bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 text-orange-900 dark:text-orange-300\",\n attention: \"bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-amber-900 dark:text-amber-300\",\n error: \"bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-900 dark:text-red-300\"\n};\nfunction xe(t) {\n return B[t];\n}\nconst F = {\n primary: {\n background: \"bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20\",\n text: \"text-blue-700 dark:text-blue-300\"\n },\n secondary: {\n background: \"bg-gradient-to-r from-gray-50 to-slate-50 dark:from-gray-800/50 dark:to-slate-800/50\",\n text: \"text-gray-700 dark:text-gray-300\"\n },\n success: {\n background: \"bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20\",\n text: \"text-green-700 dark:text-green-300\"\n },\n warning: {\n background: \"bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20\",\n text: \"text-orange-700 dark:text-orange-300\"\n },\n attention: {\n background: \"bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20\",\n text: \"text-amber-700 dark:text-amber-300\"\n },\n info: {\n background: \"bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-cyan-900/20 dark:to-blue-900/20\",\n text: \"text-blue-700 dark:text-blue-300\"\n },\n purple: {\n background: \"bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20\",\n text: \"text-purple-700 dark:text-purple-300\"\n }\n};\nfunction pe(t) {\n return F[t];\n}\nconst R = {\n default: {\n container: \"bg-gradient-to-r from-blue-600/10 to-purple-600/10 border border-blue-200 text-blue-600 backdrop-blur-sm\",\n icon: \"text-blue-600\"\n },\n premium: {\n container: \"bg-gradient-to-r from-blue-600/10 to-purple-600/10 border border-blue-200 text-blue-600 backdrop-blur-sm\",\n icon: \"text-blue-600\"\n },\n primary: {\n container: \"bg-gradient-to-r from-blue-600/10 to-purple-600/10 border border-blue-200 text-blue-600 backdrop-blur-sm\",\n icon: \"text-blue-600\"\n },\n light: {\n container: \"bg-white/20 border border-white/30 text-white backdrop-blur-sm\",\n icon: \"text-white\"\n }\n};\nfunction fe(t) {\n return R[t];\n}\nconst u = {\n // Background gradients\n backgrounds: {\n main: \"bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-indigo-900\",\n page: \"bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800\",\n pageDark: \"bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800\",\n section: \"bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900 dark:to-blue-900\",\n overlay: \"bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-blue-900/50 dark:to-purple-900/50\"\n },\n // Button gradients\n buttons: {\n primary: \"bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700\",\n primaryBlue: \"bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800\",\n primaryPurple: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800\"\n },\n // Text gradients (use with bg-clip-text text-transparent)\n text: {\n primary: \"bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 dark:from-gray-100 dark:via-blue-200 dark:to-purple-200\",\n secondary: \"bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400\",\n accent: \"bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400\"\n },\n // Special effect gradients\n effects: {\n glow: \"bg-gradient-to-r from-blue-600 to-purple-600\",\n shimmer: \"bg-gradient-to-r from-transparent via-white/20 to-transparent\"\n }\n}, me = {\n // Primary action button with full styling\n primaryButton: `${u.buttons.primary} text-white shadow-lg hover:shadow-xl transition-all duration-200`,\n // Hero button with enhanced styling\n heroButton: `${u.buttons.primary} text-white px-8 py-4 rounded-xl font-bold text-lg transition-all duration-300 transform hover:scale-105 shadow-2xl hover:shadow-blue-500/25`,\n // Header button styling\n headerButton: `${u.buttons.primary} text-white px-4 py-2 rounded-md font-medium transition-all duration-200 transform hover:scale-105 shadow-lg`,\n // Page background with common layout\n pageLayout: `min-h-screen ${u.backgrounds.page}`,\n // Page background with dark mode support\n pageLayoutDark: `min-h-screen ${u.backgrounds.pageDark}`,\n // Text gradient styling\n gradientText: `${u.text.primary} bg-clip-text text-transparent`,\n gradientTextSecondary: `${u.text.secondary} bg-clip-text text-transparent`\n}, he = (t, r) => u[t][r] || \"\", ke = (t, r = \"\") => `${t} ${r}`.trim(), g = {\n // Common layout classes\n layout: {\n section: \"py-20\",\n sectionSm: \"py-16\",\n sectionLg: \"py-24\",\n container: \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\",\n containerSm: \"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\",\n containerLg: \"max-w-8xl mx-auto px-4 sm:px-6 lg:px-8\"\n },\n // Animation durations (in milliseconds)\n animation: {\n fast: 150,\n normal: 300,\n slow: 500,\n extraSlow: 1e3\n },\n // Common spacing patterns\n spacing: {\n sectionGap: \"space-y-20\",\n cardGap: \"space-y-8\",\n listGap: \"space-y-4\",\n inlineGap: \"space-x-4\"\n },\n // Grid patterns\n grid: {\n responsive2: \"grid md:grid-cols-2 gap-8\",\n responsive3: \"grid md:grid-cols-2 lg:grid-cols-3 gap-8\",\n responsive4: \"grid md:grid-cols-2 lg:grid-cols-4 gap-8\",\n autoFit: \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-auto-fit gap-8\"\n },\n // Typography patterns\n typography: {\n hero: \"text-4xl md:text-6xl lg:text-7xl font-bold\",\n heading1: \"text-3xl md:text-5xl font-bold\",\n heading2: \"text-2xl md:text-4xl font-bold\",\n heading3: \"text-xl md:text-2xl font-bold\",\n bodyLarge: \"text-xl md:text-2xl\",\n body: \"text-lg\",\n caption: \"text-sm text-gray-600 dark:text-gray-400\"\n },\n // Card patterns\n card: {\n base: \"bg-white dark:bg-gray-800 rounded-lg shadow-lg\",\n interactive: \"bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow\",\n border: \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg\"\n },\n // Button sizing patterns\n button: {\n sm: \"px-3 py-2 text-sm\",\n md: \"px-4 py-2\",\n lg: \"px-6 py-3 text-lg\",\n xl: \"px-8 py-4 text-xl\"\n },\n // Icon sizing\n icon: {\n xs: \"w-4 h-4\",\n sm: \"w-5 h-5\",\n md: \"w-6 h-6\",\n lg: \"w-8 h-8\",\n xl: \"w-10 h-10\",\n xxl: \"w-12 h-12\"\n },\n // Transition patterns\n transition: {\n base: \"transition-all duration-200\",\n slow: \"transition-all duration-300\",\n colors: \"transition-colors duration-200\",\n transform: \"transition-transform duration-200\",\n shadow: \"transition-shadow duration-200\"\n },\n // Common hover effects\n hover: {\n scale: \"hover:scale-105\",\n scaleSmall: \"hover:scale-102\",\n lift: \"hover:-translate-y-1\",\n glow: \"hover:shadow-lg\"\n },\n // Focus patterns\n focus: {\n ring: \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\",\n ringInset: \"focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500\"\n }\n}, we = {\n // Section with container\n section: `${g.layout.section} ${g.layout.container}`,\n sectionCentered: `${g.layout.section} ${g.layout.container} text-center`,\n // Interactive card\n interactiveCard: `${g.card.interactive} ${g.transition.base} ${g.hover.lift}`,\n // Primary button\n primaryButton: `${g.button.md} ${g.transition.base} ${g.hover.scale} ${g.focus.ring}`,\n // Hero text\n heroText: `${g.typography.hero} leading-tight`,\n // Feature grid\n featureGrid: `${g.grid.responsive4}`,\n // Icon container\n iconContainer: `${g.icon.lg} rounded-full flex items-center justify-center`\n}, y = [\n \"Web3 email platform\",\n \"wallet email\",\n \"ENS email\",\n \"SNS email\",\n \"smart contract integration\",\n \"decentralized email\",\n \"blockchain messaging\",\n \"crypto email\",\n \"Web3 communication\",\n \"secure email\"\n], v = [\n \"Web3 email for users\",\n \"wallet email address\",\n \"passwordless email\",\n \"secure Web3 communication\",\n \"ENS domain email\",\n \"SNS domain email\",\n \"crypto wallet email\",\n \"Web2 Web3 bridge\",\n \"decentralized identity\",\n \"blockchain email\"\n], $ = [\n \"Web3 email API\",\n \"smart contract email integration\",\n \"blockchain developer tools\",\n \"Web3 SDK\",\n \"decentralized messaging API\",\n \"smart contract notifications\",\n \"Web3 developer platform\",\n \"blockchain email service\",\n \"crypto developer tools\",\n \"Web3 infrastructure\"\n], N = [\n \"Web3 email documentation\",\n \"wallet email guide\",\n \"ENS email setup\",\n \"SNS email integration\",\n \"smart contract email API\",\n \"Web3 communication docs\",\n \"blockchain email tutorial\",\n \"crypto wallet email\",\n \"decentralized email guide\",\n \"Web3 developer documentation\"\n], j = (t) => [\n `about ${t}`,\n \"Web3 email team\",\n \"blockchain email company\",\n \"crypto email platform\",\n \"decentralized email team\",\n \"wallet email founders\",\n \"Web3 communication team\",\n \"blockchain messaging company\",\n \"ENS email team\",\n \"crypto startup team\"\n], f = [\n \"DeFi email notifications\",\n \"DAO communication platform\",\n \"NFT email alerts\",\n \"crypto airdrop notifications\",\n \"Web3 social platform\",\n \"blockchain KYC email\",\n \"DeFi yield farming alerts\",\n \"GameFi notification system\",\n \"Layer 2 email integration\",\n \"cross-chain messaging protocol\",\n \"multichain email support\",\n \"decentralized identity verification\",\n \"Web3 reputation system\",\n \"crypto compliance email\"\n], m = [\n \"EIP-712 signature authentication\",\n \"SIWE Sign-In with Ethereum\",\n \"multi-signature wallet email\",\n \"hardware wallet email support\",\n \"Web3 API integration\",\n \"smart contract event notifications\",\n \"IPFS email storage\",\n \"ENS subdomain email routing\",\n \"Chainlink oracle integration\",\n \"Web3 SDK documentation\",\n \"blockchain webhook notifications\",\n \"crypto API endpoints\",\n \"decentralized email protocol\",\n \"Web3 developer tools\"\n], S = [\n \"accessible Web3 email\",\n \"screen reader crypto wallet\",\n \"Web3 accessibility features\",\n \"inclusive blockchain platform\",\n \"accessible wallet integration\",\n \"Web3 WCAG compliance\",\n \"keyboard navigation Web3\",\n \"voice control crypto email\",\n \"high contrast Web3 interface\",\n \"accessible blockchain tools\"\n], c = (...t) => {\n const r = /* @__PURE__ */ new Set();\n return t.forEach((a) => a.forEach((n) => r.add(n))), Array.from(r);\n}, ve = () => c(y, v, f), $e = (t) => c(y, j(t)), je = () => c(y, N, m), Se = () => c(y, v, S), Ce = () => c(y, $, m), ze = () => c(y, $, f), Ee = () => c(y, f, m), Ie = (t) => c(y, j(t), S), p = (t) => ({\n \"@type\": \"Organization\",\n name: t,\n url: `https://${t}`,\n contactPoint: {\n \"@type\": \"ContactPoint\",\n contactType: \"customer service\",\n email: \"support@sudobility.com\"\n }\n}), Ae = (t, r = {}) => ({\n \"@context\": \"https://schema.org\",\n \"@type\": \"SoftwareApplication\",\n name: t,\n description: \"Web3 email platform connecting wallets to email addresses with ENS/SNS domain support and smart contract integration\",\n url: `https://${t}`,\n applicationCategory: \"BusinessApplication\",\n operatingSystem: \"Web\",\n offers: {\n \"@type\": \"Offer\",\n price: \"0\",\n priceCurrency: \"USD\",\n availability: \"https://schema.org/InStock\"\n },\n author: p(t),\n ...r\n}), Te = (t, r = {}) => ({\n \"@context\": \"https://schema.org\",\n \"@type\": \"WebPage\",\n name: t,\n description: \"Web3 email platform connecting wallets to email addresses\",\n url: `https://${t}`,\n ...r\n}), Le = (t, r = {}) => ({\n \"@context\": \"https://schema.org\",\n \"@type\": \"AboutPage\",\n name: `About ${t}`,\n description: `Learn about the team behind ${t}, the revolutionary Web3 email platform that connects wallets to email addresses without passwords.`,\n url: `https://${t}/about`,\n mainEntity: {\n ...p(t),\n \"@id\": `https://${t}/#organization`,\n foundingDate: \"2024\"\n },\n ...r\n}), Oe = (t, r = {}) => ({\n \"@context\": \"https://schema.org\",\n \"@type\": \"TechArticle\",\n name: \"Documentation\",\n headline: `${t} Documentation - Web3 Email Platform Guide`,\n description: `Complete documentation for ${t} Web3 email platform. Learn how to connect wallets, manage ENS/SNS domain emails, integrate smart contracts, and use Web3 communication features.`,\n url: `https://${t}/document`,\n datePublished: \"2025-01-12\",\n dateModified: \"2025-01-12\",\n author: p(t),\n publisher: p(t),\n ...r\n}), P = {\n // State colors\n success: \"text-green-700 dark:text-green-300\",\n error: \"text-red-700 dark:text-red-300\",\n warning: \"text-amber-700 dark:text-amber-300\",\n info: \"text-blue-700 dark:text-blue-300\",\n // Action colors\n primary: \"text-blue-600 dark:text-blue-400\",\n secondary: \"text-gray-600 dark:text-gray-400\",\n accent: \"text-purple-600 dark:text-purple-400\",\n // Content colors\n muted: \"text-gray-500 dark:text-gray-500\",\n emphasis: \"text-gray-900 dark:text-gray-100\",\n subtle: \"text-gray-600 dark:text-gray-400\"\n}, C = {\n // Layout patterns\n centeredContainer: \"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\",\n fullWidthSection: \"w-full py-8 sm:py-12 lg:py-16\",\n flexBetween: \"flex items-center justify-between\",\n flexCenter: \"flex items-center justify-center\",\n gridResponsive: \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\",\n // Interactive states\n clickable: \"cursor-pointer transition-colors duration-200 hover:opacity-80\",\n focusable: \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\",\n disabled: \"opacity-50 cursor-not-allowed pointer-events-none\",\n // Visual hierarchy\n cardShadow: \"shadow-md hover:shadow-lg transition-shadow duration-200\",\n elevatedCard: \"bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700\",\n subtleCard: \"bg-gray-50 dark:bg-gray-900 rounded-md border border-gray-200 dark:border-gray-800\",\n // Spacing patterns\n sectionSpacing: \"py-8 sm:py-12 lg:py-16\",\n componentSpacing: \"space-y-4\",\n tightSpacing: \"space-y-2\",\n looseSpacing: \"space-y-8\"\n}, z = {\n xs: { padding: \"px-2 py-1\", text: \"text-xs\", height: \"h-6\" },\n sm: { padding: \"px-3 py-1.5\", text: \"text-sm\", height: \"h-8\" },\n md: { padding: \"px-4 py-2\", text: \"text-base\", height: \"h-10\" },\n lg: { padding: \"px-6 py-3\", text: \"text-lg\", height: \"h-12\" },\n xl: { padding: \"px-8 py-4\", text: \"text-xl\", height: \"h-14\" }\n};\nfunction U(t) {\n return P[t];\n}\nfunction De(t, r) {\n return x(C[t], r);\n}\nfunction We(t, r) {\n const a = z[t];\n return x(r, a.padding, a.text, a.height);\n}\nfunction Ve(t) {\n const r = [];\n if (t.intent && r.push(U(t.intent)), t.pattern && r.push(C[t.pattern]), t.size) {\n const a = z[t.size];\n r.push(a.padding, a.text, a.height);\n }\n return t.additional && r.push(t.additional), x(...r);\n}\nfunction Be(t, r = {}) {\n const a = [], n = [], i = [];\n for (const [d, l] of Object.entries(t))\n if (r.allowedComponents && !r.allowedComponents.includes(d) && n.push(`Component '${d}' is not in the allowed components list`), r.requireDefault && typeof l == \"object\" && l !== null && (\"default\" in l || (a.push(`Component '${d}' is missing required 'default' variant`), i.push(`Add a 'default' variant to ${d}`))), r.checkTypes && typeof l == \"object\" && l !== null)\n for (const [s, b] of Object.entries(l))\n typeof b != \"function\" && typeof b != \"string\" && typeof b != \"object\" && a.push(\n `Invalid variant type for ${d}.${s}: expected function, string, or object`\n );\n return {\n isValid: a.length === 0,\n errors: a,\n warnings: n,\n suggestions: i\n };\n}\nfunction Fe(t, r, a = \"default\", n = {}) {\n const i = {\n classes: \"\",\n usedFallback: !1,\n warnings: [],\n requested: { component: r, variant: a }\n };\n try {\n const d = t[r];\n if (!d) {\n if (i.warnings?.push(`Component '${r}' not found in configuration`), n.fallback)\n i.classes = n.fallback(r, a), i.usedFallback = !0;\n else if (n.strict)\n throw new Error(`Component '${r}' not found`);\n return i;\n }\n if (typeof d == \"function\")\n return i.classes = d(), i;\n if (typeof d == \"string\")\n return i.classes = d, i;\n if (typeof d == \"object\" && d !== null) {\n const l = d[a];\n if (!l) {\n i.warnings?.push(`Variant '${a}' not found for component '${r}'`);\n const s = d.default;\n if (s)\n return i.classes = typeof s == \"function\" ? s() : String(s), i.usedFallback = !0, i.warnings?.push(\"Using 'default' variant instead\"), i;\n if (n.fallback)\n i.classes = n.fallback(r, a), i.usedFallback = !0;\n else if (n.strict)\n throw new Error(`Variant '${a}' not found for component '${r}'`);\n return i;\n }\n return i.classes = typeof l == \"function\" ? l() : String(l), i;\n }\n } catch (d) {\n i.warnings?.push(\n `Error resolving variant: ${d instanceof Error ? d.message : String(d)}`\n ), n.fallback && (i.classes = n.fallback(r, a), i.usedFallback = !0);\n }\n return i;\n}\nfunction Re(t, r, a = \"\") {\n const n = t[r];\n return !n || typeof n != \"object\" || n === null ? [] : Object.keys(n).filter((i) => i.toLowerCase().includes(a.toLowerCase())).sort();\n}\nfunction Ne(t) {\n const r = {\n componentCount: 0,\n variantCount: 0,\n missingDefaults: [],\n duplicatePatterns: [],\n optimizationSuggestions: []\n }, a = /* @__PURE__ */ new Map();\n for (const [n, i] of Object.entries(t))\n if (r.componentCount++, typeof i == \"object\" && i !== null) {\n const d = Object.keys(i);\n r.variantCount += d.length, d.includes(\"default\") || r.missingDefaults.push(n);\n for (const [l, s] of Object.entries(i)) {\n const b = typeof s == \"function\" ? s() : String(s);\n a.has(b) || a.set(b, []), a.get(b).push(`${n}.${l}`);\n }\n }\n for (const [n, i] of a.entries())\n i.length > 1 && r.duplicatePatterns.push({ pattern: n, components: i });\n return r.missingDefaults.length > 0 && r.optimizationSuggestions.push(\n `Consider adding 'default' variants to: ${r.missingDefaults.join(\", \")}`\n ), r.duplicatePatterns.length > 0 && r.optimizationSuggestions.push(\n `Consider extracting common patterns into shared utilities for: ${r.duplicatePatterns.slice(0, 3).map((n) => `${n.pattern.slice(0, 30)}...`).join(\", \")}`\n ), r;\n}\nconst Pe = {\n // Layout utilities\n layout: {\n container: \"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\",\n containerSmall: \"mx-auto max-w-3xl px-4 sm:px-6 lg:px-8\",\n containerLarge: \"mx-auto max-w-full px-4 sm:px-6 lg:px-8\",\n section: \"py-8 sm:py-12 lg:py-16\",\n sectionSmall: \"py-6 sm:py-8 lg:py-10\",\n flex: \"flex items-center justify-between\",\n flexCenter: \"flex items-center justify-center\",\n flexCol: \"flex flex-col\",\n grid: \"grid grid-cols-1 gap-6\",\n gridMd: \"grid grid-cols-1 md:grid-cols-2 gap-6\",\n gridLg: \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"\n },\n // Section styles with backgrounds\n section: {\n // Standard section with white/dark background\n default: \"py-8 sm:py-12 lg:py-16 bg-white dark:bg-gray-900\",\n // Hero sections (larger spacing)\n hero: \"py-20 bg-white dark:bg-gray-900\",\n // Subtle background sections\n subtle: \"py-8 sm:py-12 lg:py-16 bg-gray-50 dark:bg-gray-800\",\n // Accent background sections\n accent: \"py-8 sm:py-12 lg:py-16 bg-blue-50 dark:bg-blue-900\",\n // Gradient sections with dark mode support\n gradient: \"py-20 bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900 dark:to-blue-900\",\n gradientAmber: \"py-20 bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900 dark:to-yellow-900\",\n gradientBlue: \"py-20 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900 dark:to-purple-900\",\n // No background (transparent)\n transparent: \"py-8 sm:py-12 lg:py-16\"\n },\n // Background utilities\n background: {\n surface: \"bg-white dark:bg-gray-800\",\n subtle: \"bg-gray-50 dark:bg-gray-900\",\n muted: \"bg-gray-100 dark:bg-gray-700\",\n overlay: \"bg-black/50 dark:bg-black/70\"\n },\n // Border utilities\n border: {\n default: \"border-gray-200 dark:border-gray-700\",\n subtle: \"border-gray-100 dark:border-gray-800\",\n radius: \"rounded-lg\",\n radiusSm: \"rounded-md\",\n radiusLg: \"rounded-xl\",\n radiusFull: \"rounded-full\"\n },\n // Shadow utilities\n shadow: {\n sm: \"shadow-sm\",\n md: \"shadow-md\",\n lg: \"shadow-lg\",\n xl: \"shadow-xl\"\n },\n // Spacing utilities\n spacing: {\n card: {\n sm: \"p-4\",\n md: \"p-6\",\n lg: \"p-8\"\n },\n section: {\n sm: \"py-6 px-4\",\n md: \"py-8 px-6\",\n lg: \"py-12 px-8\"\n }\n },\n // Typography utilities - Enhanced with design system\n text: {\n // Headings\n h1: \"text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h2: \"text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h3: \"text-xl sm:text-2xl font-semibold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h4: \"text-lg sm:text-xl font-semibold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h5: \"text-base sm:text-lg font-semibold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h6: \"text-base font-semibold text-gray-900 dark:text-white leading-tight tracking-tight\",\n // Display headings\n display: \"text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold text-gray-900 dark:text-white leading-none tracking-tight\",\n hero: \"text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-black text-gray-900 dark:text-white leading-none tracking-tight\",\n // Body text\n body: \"text-base font-normal text-gray-700 dark:text-gray-300 leading-relaxed\",\n bodyLarge: \"text-lg font-normal text-gray-700 dark:text-gray-300 leading-relaxed\",\n bodySmall: \"text-sm font-normal text-gray-600 dark:text-gray-400 leading-relaxed\",\n // Lead text (introductory paragraphs)\n lead: \"text-xl font-normal text-gray-700 dark:text-gray-300 leading-relaxed\",\n leadLarge: \"text-2xl font-normal text-gray-700 dark:text-gray-300 leading-relaxed\",\n // Specialized text\n caption: \"text-sm font-normal text-gray-500 dark:text-gray-500 leading-normal\",\n label: \"text-sm font-medium text-gray-700 dark:text-gray-300\",\n helper: \"text-sm font-normal text-gray-500 dark:text-gray-500\",\n // Links\n link: \"text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline underline-offset-2 decoration-blue-600 dark:decoration-blue-400 transition-colors duration-150\",\n linkSubtle: \"text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 no-underline hover:underline hover:underline-offset-2 transition-all duration-150\",\n linkMuted: \"text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline underline-offset-2 decoration-gray-400 hover:decoration-gray-600 transition-colors duration-150\",\n // Code text\n code: \"font-mono text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded\",\n codeBlock: \"font-mono text-sm font-normal text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto leading-relaxed\",\n // Status text\n success: \"text-green-700 dark:text-green-300 font-medium\",\n warning: \"text-orange-700 dark:text-orange-300 font-medium\",\n attention: \"text-amber-700 dark:text-amber-300 font-medium\",\n error: \"text-red-700 dark:text-red-300 font-medium\",\n info: \"text-blue-700 dark:text-blue-300 font-medium\",\n // Emphasis variants\n emphasis: \"font-medium text-gray-900 dark:text-gray-100\",\n strong: \"font-semibold text-gray-900 dark:text-gray-100\",\n muted: \"text-gray-500 dark:text-gray-500\",\n // Uppercase labels\n uppercase: \"text-xs font-semibold text-gray-500 dark:text-gray-500 uppercase tracking-wider\"\n },\n // Transition utilities\n transition: {\n default: \"transition-colors duration-200\",\n all: \"transition-all duration-200\",\n fast: \"transition-all duration-150\",\n slow: \"transition-all duration-300\",\n transform: \"transition-transform duration-200\"\n },\n // Interactive states\n states: {\n hover: \"hover:opacity-80 transition-opacity duration-200\",\n focus: \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none\",\n loading: \"animate-pulse\"\n },\n // Table utilities\n table: {\n // Table container\n container: \"bg-white dark:bg-gray-900 rounded-2xl shadow-xl overflow-hidden\",\n wrapper: \"overflow-x-auto\",\n base: \"w-full\",\n // Table header\n thead: \"bg-gray-50 dark:bg-gray-800\",\n th: \"px-6 py-4 text-left text-sm font-semibold text-gray-900 dark:text-gray-100\",\n // Table body\n tbody: \"divide-y divide-gray-200 dark:divide-gray-700\",\n // Table rows (alternating)\n tr: \"bg-white dark:bg-gray-900\",\n trAlt: \"bg-gray-50 dark:bg-gray-800\",\n // Table cells\n td: \"px-6 py-4 text-sm text-gray-900 dark:text-gray-100\"\n },\n // Card utilities\n card: {\n // Standard cards with shadow\n default: \"bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg\",\n large: \"bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl\",\n // Cards with border instead of shadow\n bordered: \"bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700\",\n // Cards with hover effects\n interactive: \"bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow\",\n // Feature cards (for grids)\n feature: \"bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow\"\n },\n // Badge utilities\n badge: {\n blue: \"inline-flex items-center bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 px-4 py-2 rounded-full\",\n green: \"inline-flex items-center bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 px-4 py-2 rounded-full\",\n purple: \"inline-flex items-center bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 px-4 py-2 rounded-full\",\n amber: \"inline-flex items-center bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 px-4 py-2 rounded-full\",\n gray: \"inline-flex items-center bg-gray-100 dark:bg-gray-900/30 text-gray-800 dark:text-gray-300 px-4 py-2 rounded-full\"\n },\n // Web3 specific utilities\n web3: {\n walletButton: \"bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium\",\n chainBadge: (t) => t === \"ethereum\" ? \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\" : \"bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n addressText: \"font-mono text-sm text-gray-600 dark:text-gray-400\"\n }\n};\nexport {\n S as ACCESSIBILITY_KEYWORDS,\n y as BASE_KEYWORDS,\n G as Colors,\n $ as DEVELOPER_KEYWORDS,\n N as DOCUMENTATION_KEYWORDS,\n u as GRADIENTS,\n me as GRADIENT_CLASSES,\n P as SEMANTIC_COLOR_MAP,\n z as SIZE_SCALES,\n k as SimpleVariants,\n m as TECHNICAL_SEO_KEYWORDS,\n e as Tokens,\n K as Typography,\n g as UI_CONSTANTS,\n we as UI_CONSTANTS_PATTERNS,\n C as UI_PATTERNS,\n v as USER_FOCUSED_KEYWORDS,\n Q as Variants,\n f as WEB3_TRENDING_KEYWORDS,\n Ne as analyzeVariantUsage,\n ne as animation,\n De as applyUIPattern,\n L as buildColorClass,\n L as buildColorClassLegacy,\n se as buttonVariant,\n F as calloutVariantColors,\n ue as cardVariant,\n B as cardVariantColors,\n x as cn,\n G as colors,\n G as colorsLegacy,\n ke as combineGradient,\n c as combineKeywords,\n H as combineTextStyles,\n H as combineTextStylesLegacy,\n Le as createAboutPageData,\n p as createBaseOrganization,\n j as createCompanyKeywords,\n Ve as createComponentWithIntent,\n Z as createQuickVariants,\n Y as createResponsiveText,\n Y as createResponsiveTextLegacy,\n We as createSizedComponent,\n Ae as createSoftwareApplicationData,\n Oe as createTechArticleData,\n q as createTextStyle,\n q as createTextStyleLegacy,\n X as createVariants,\n Te as createWebPageData,\n e as designTokens,\n e as designTokensLegacy,\n le as disabledState,\n D as focusRing,\n W as focusVisible,\n $e as getAboutPageKeywords,\n pe as getCalloutVariantColors,\n xe as getCardVariantColors,\n T as getColorClasses,\n T as getColorClassesLegacy,\n Ie as getContactKeywords,\n Ce as getDeveloperPageKeywords,\n je as getDocumentationKeywords,\n he as getGradient,\n ve as getHomePageKeywords,\n fe as getSectionBadgeColors,\n U as getSemanticColor,\n ie as getSizeClasses,\n ce as getStatusIndicatorColor,\n Ee as getSubscriptionKeywords,\n te as getThemeSemanticColor,\n Se as getUserPageKeywords,\n Re as getVariantSuggestions,\n ze as getWeb3ProjectsKeywords,\n ae as gradient,\n de as hoverState,\n be as inputVariant,\n ge as loadingState,\n ee as responsive,\n Fe as safeResolveVariant,\n R as sectionBadgeColors,\n O as sizeClasses,\n oe as spacing,\n V as statusIndicatorColors,\n ye as textVariant,\n K as textVariants,\n K as textVariantsLegacy,\n re as themeColor,\n w as transitions,\n Pe as ui,\n Be as validateVariantConfig,\n Q as variants,\n Q as variantsLegacy,\n J as withOpacity\n};\n","import React from 'react';\nimport { variants, getStatusIndicatorColor } from '@sudobility/design';\n\nexport type StatusType =\n | 'verified'\n | 'connected'\n | 'disconnected'\n | 'pending'\n | 'error'\n | 'success'\n | 'warning';\n\n// Local ChainType enum to avoid @johnqh/lib dependency\nexport type ChainType = 'evm' | 'solana' | 'unknown';\n\ninterface StatusBadgeProps {\n status: StatusType;\n label?: string;\n showDot?: boolean;\n size?: 'sm' | 'md' | 'lg';\n}\n\ninterface ChainBadgeProps {\n chainType: ChainType;\n size?: 'sm' | 'md' | 'lg';\n}\n\n// Map StatusType to design system status indicator types\nconst getStatusDotColor = (status: StatusType) => {\n switch (status) {\n case 'verified':\n case 'success':\n return getStatusIndicatorColor('success');\n case 'connected':\n case 'warning':\n return getStatusIndicatorColor('warning');\n case 'disconnected':\n case 'error':\n return getStatusIndicatorColor('error');\n case 'pending':\n return getStatusIndicatorColor('info');\n default:\n return getStatusIndicatorColor('neutral');\n }\n};\n\n// Dot size classes for different badge sizes\nconst getDotSizeClass = (size: 'sm' | 'md' | 'lg') => {\n switch (size) {\n case 'sm':\n return 'w-1.5 h-1.5';\n case 'lg':\n return 'w-3 h-3';\n default: // md\n return 'w-2 h-2';\n }\n};\n\nexport const StatusBadge: React.FC<StatusBadgeProps> = ({\n status,\n label,\n showDot = true,\n size = 'md',\n}) => {\n const defaultLabels: Record<StatusType, string> = {\n verified: 'Verified',\n connected: 'Connected',\n disconnected: 'Disconnected',\n pending: 'Pending',\n error: 'Error',\n success: 'Success',\n warning: 'Warning',\n };\n\n const displayLabel = label || defaultLabels[status];\n\n // Use design system badge variants for consistent styling\n const getDesignSystemVariant = (\n status: StatusType,\n size: 'sm' | 'md' | 'lg'\n ) => {\n const sizeMap = { sm: 'small', md: 'default', lg: 'large' } as const;\n const variantMap = {\n verified: 'success',\n success: 'success',\n connected: 'warning',\n warning: 'warning',\n disconnected: 'error',\n error: 'error',\n pending: 'primary',\n } as const;\n\n const variant = variantMap[status] || 'default';\n const badgeSize = sizeMap[size];\n\n if (badgeSize === 'default') {\n return variants.badge[variant as keyof typeof variants.badge]() as string;\n } else {\n return variants.badge[badgeSize](variant) as string;\n }\n };\n\n const badgeClass = getDesignSystemVariant(status, size);\n const dotColor = getStatusDotColor(status);\n const dotSize = getDotSizeClass(size);\n\n return (\n <span className={badgeClass}>\n {showDot && (\n <span\n className={`inline-block ${dotSize} rounded-full ${dotColor} mr-1`}\n />\n )}\n {displayLabel}\n </span>\n );\n};\n\nexport const ChainBadge: React.FC<ChainBadgeProps> = ({\n chainType,\n size = 'md',\n}) => {\n if (chainType === 'unknown') return null;\n\n const chainLabel = chainType === 'solana' ? 'SOL' : 'ETH';\n const sizeMap = { sm: 'small', md: 'default', lg: 'large' } as const;\n const badgeSize = sizeMap[size];\n\n // Use design system Web3 badge variants\n const getBadgeClass = () => {\n const badgeType = chainType === 'solana' ? 'solana' : 'ethereum';\n if (badgeSize === 'default') {\n return variants.badge[badgeType]();\n } else {\n return variants.badge[badgeSize](badgeType);\n }\n };\n\n return <span className={getBadgeClass() as string}>{chainLabel}</span>;\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UstickyUnote Component\n *\n * A reusable UstickyUnote component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UstickyUnote className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/sticky-note}\n */\n\nexport interface UstickyUnoteProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UstickyUnote = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UstickyUnoteProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UstickyUnote'\n >\n {children || 'UstickyUnote Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UsystemUstatus Component\n *\n * A reusable UsystemUstatus component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UsystemUstatus className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/system-status}\n */\n\nexport interface UsystemUstatusProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UsystemUstatus = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UsystemUstatusProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UsystemUstatus'\n >\n {children || 'UsystemUstatus Component'}\n </div>\n );\n};\n"],"names":["REACT_ELEMENT_TYPE","REACT_FRAGMENT_TYPE","jsxProd","type","config","maybeKey","key","propName","reactJsxRuntime_production","getComponentNameFromType","REACT_CLIENT_REFERENCE","REACT_PROFILER_TYPE","REACT_STRICT_MODE_TYPE","REACT_SUSPENSE_TYPE","REACT_SUSPENSE_LIST_TYPE","REACT_ACTIVITY_TYPE","REACT_PORTAL_TYPE","REACT_CONTEXT_TYPE","REACT_CONSUMER_TYPE","REACT_FORWARD_REF_TYPE","innerType","REACT_MEMO_TYPE","REACT_LAZY_TYPE","testStringCoercion","value","checkKeyStringCoercion","JSCompiler_inline_result","JSCompiler_temp_const","JSCompiler_inline_result$jscomp$0","getTaskName","name","getOwner","dispatcher","ReactSharedInternals","UnknownOwner","hasValidKey","hasOwnProperty","getter","defineKeyPropWarningGetter","props","displayName","warnAboutAccessingKey","specialPropKeyWarningShown","elementRefGetterWithDeprecationWarning","componentName","didWarnAboutElementRef","ReactElement","owner","debugStack","debugTask","refProp","jsxDEVImpl","isStaticChildren","children","isArrayImpl","validateChildKeys","keys","k","didWarnAboutKeySpread","node","isValidElement","object","React","require$$0","createTask","callStackForError","unknownOwnerDebugStack","unknownOwnerDebugTask","reactJsxRuntime_development","trackActualOwner","jsxRuntimeModule","require$$1","Blockquote","cite","variant","size","className","sizeClasses","citeSize","variantClasses","jsxs","cn","jsx","UchecklistUprogress","disabled","onClick","UformUbuilder","UformUtemplate","UformUvalidator","UnetworkUstatus","UprocessUdiagram","QuoteGenerator","SafetyChecklist","Q","t","r","V","ce","getStatusDotColor","status","getStatusIndicatorColor","getDotSizeClass","StatusBadge","label","showDot","displayLabel","badgeClass","sizeMap","badgeSize","variants","dotColor","dotSize","ChainBadge","chainType","chainLabel","getBadgeClass","badgeType","UstickyUnote","UsystemUstatus"],"mappings":"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","x_google_ignoreList":[0,1,2,12]}
1
+ {"version":3,"file":"index.umd.js","sources":["../node_modules/react/cjs/react-jsx-runtime.production.js","../node_modules/react/cjs/react-jsx-runtime.development.js","../node_modules/react/jsx-runtime.js","../src/blockquote.tsx","../src/checklist-progress.tsx","../src/form-builder.tsx","../src/form-template.tsx","../src/form-validator.tsx","../src/network-status.tsx","../src/process-diagram.tsx","../src/quote-generator.tsx","../src/safety-checklist.tsx","../node_modules/@sudobility/design/dist/index.esm.js","../src/status-badge.tsx","../src/sticky-note.tsx","../src/system-status.tsx"],"sourcesContent":["/**\n * @license React\n * react-jsx-runtime.production.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\nvar REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\");\nfunction jsxProd(type, config, maybeKey) {\n var key = null;\n void 0 !== maybeKey && (key = \"\" + maybeKey);\n void 0 !== config.key && (key = \"\" + config.key);\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n config = maybeKey.ref;\n return {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n ref: void 0 !== config ? config : null,\n props: maybeKey\n };\n}\nexports.Fragment = REACT_FRAGMENT_TYPE;\nexports.jsx = jsxProd;\nexports.jsxs = jsxProd;\n","/**\n * @license React\n * react-jsx-runtime.development.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n function getComponentNameFromType(type) {\n if (null == type) return null;\n if (\"function\" === typeof type)\n return type.$$typeof === REACT_CLIENT_REFERENCE\n ? null\n : type.displayName || type.name || null;\n if (\"string\" === typeof type) return type;\n switch (type) {\n case REACT_FRAGMENT_TYPE:\n return \"Fragment\";\n case REACT_PROFILER_TYPE:\n return \"Profiler\";\n case REACT_STRICT_MODE_TYPE:\n return \"StrictMode\";\n case REACT_SUSPENSE_TYPE:\n return \"Suspense\";\n case REACT_SUSPENSE_LIST_TYPE:\n return \"SuspenseList\";\n case REACT_ACTIVITY_TYPE:\n return \"Activity\";\n }\n if (\"object\" === typeof type)\n switch (\n (\"number\" === typeof type.tag &&\n console.error(\n \"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.\"\n ),\n type.$$typeof)\n ) {\n case REACT_PORTAL_TYPE:\n return \"Portal\";\n case REACT_CONTEXT_TYPE:\n return type.displayName || \"Context\";\n case REACT_CONSUMER_TYPE:\n return (type._context.displayName || \"Context\") + \".Consumer\";\n case REACT_FORWARD_REF_TYPE:\n var innerType = type.render;\n type = type.displayName;\n type ||\n ((type = innerType.displayName || innerType.name || \"\"),\n (type = \"\" !== type ? \"ForwardRef(\" + type + \")\" : \"ForwardRef\"));\n return type;\n case REACT_MEMO_TYPE:\n return (\n (innerType = type.displayName || null),\n null !== innerType\n ? innerType\n : getComponentNameFromType(type.type) || \"Memo\"\n );\n case REACT_LAZY_TYPE:\n innerType = type._payload;\n type = type._init;\n try {\n return getComponentNameFromType(type(innerType));\n } catch (x) {}\n }\n return null;\n }\n function testStringCoercion(value) {\n return \"\" + value;\n }\n function checkKeyStringCoercion(value) {\n try {\n testStringCoercion(value);\n var JSCompiler_inline_result = !1;\n } catch (e) {\n JSCompiler_inline_result = !0;\n }\n if (JSCompiler_inline_result) {\n JSCompiler_inline_result = console;\n var JSCompiler_temp_const = JSCompiler_inline_result.error;\n var JSCompiler_inline_result$jscomp$0 =\n (\"function\" === typeof Symbol &&\n Symbol.toStringTag &&\n value[Symbol.toStringTag]) ||\n value.constructor.name ||\n \"Object\";\n JSCompiler_temp_const.call(\n JSCompiler_inline_result,\n \"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.\",\n JSCompiler_inline_result$jscomp$0\n );\n return testStringCoercion(value);\n }\n }\n function getTaskName(type) {\n if (type === REACT_FRAGMENT_TYPE) return \"<>\";\n if (\n \"object\" === typeof type &&\n null !== type &&\n type.$$typeof === REACT_LAZY_TYPE\n )\n return \"<...>\";\n try {\n var name = getComponentNameFromType(type);\n return name ? \"<\" + name + \">\" : \"<...>\";\n } catch (x) {\n return \"<...>\";\n }\n }\n function getOwner() {\n var dispatcher = ReactSharedInternals.A;\n return null === dispatcher ? null : dispatcher.getOwner();\n }\n function UnknownOwner() {\n return Error(\"react-stack-top-frame\");\n }\n function hasValidKey(config) {\n if (hasOwnProperty.call(config, \"key\")) {\n var getter = Object.getOwnPropertyDescriptor(config, \"key\").get;\n if (getter && getter.isReactWarning) return !1;\n }\n return void 0 !== config.key;\n }\n function defineKeyPropWarningGetter(props, displayName) {\n function warnAboutAccessingKey() {\n specialPropKeyWarningShown ||\n ((specialPropKeyWarningShown = !0),\n console.error(\n \"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)\",\n displayName\n ));\n }\n warnAboutAccessingKey.isReactWarning = !0;\n Object.defineProperty(props, \"key\", {\n get: warnAboutAccessingKey,\n configurable: !0\n });\n }\n function elementRefGetterWithDeprecationWarning() {\n var componentName = getComponentNameFromType(this.type);\n didWarnAboutElementRef[componentName] ||\n ((didWarnAboutElementRef[componentName] = !0),\n console.error(\n \"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.\"\n ));\n componentName = this.props.ref;\n return void 0 !== componentName ? componentName : null;\n }\n function ReactElement(type, key, props, owner, debugStack, debugTask) {\n var refProp = props.ref;\n type = {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n props: props,\n _owner: owner\n };\n null !== (void 0 !== refProp ? refProp : null)\n ? Object.defineProperty(type, \"ref\", {\n enumerable: !1,\n get: elementRefGetterWithDeprecationWarning\n })\n : Object.defineProperty(type, \"ref\", { enumerable: !1, value: null });\n type._store = {};\n Object.defineProperty(type._store, \"validated\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: 0\n });\n Object.defineProperty(type, \"_debugInfo\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: null\n });\n Object.defineProperty(type, \"_debugStack\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: debugStack\n });\n Object.defineProperty(type, \"_debugTask\", {\n configurable: !1,\n enumerable: !1,\n writable: !0,\n value: debugTask\n });\n Object.freeze && (Object.freeze(type.props), Object.freeze(type));\n return type;\n }\n function jsxDEVImpl(\n type,\n config,\n maybeKey,\n isStaticChildren,\n debugStack,\n debugTask\n ) {\n var children = config.children;\n if (void 0 !== children)\n if (isStaticChildren)\n if (isArrayImpl(children)) {\n for (\n isStaticChildren = 0;\n isStaticChildren < children.length;\n isStaticChildren++\n )\n validateChildKeys(children[isStaticChildren]);\n Object.freeze && Object.freeze(children);\n } else\n console.error(\n \"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.\"\n );\n else validateChildKeys(children);\n if (hasOwnProperty.call(config, \"key\")) {\n children = getComponentNameFromType(type);\n var keys = Object.keys(config).filter(function (k) {\n return \"key\" !== k;\n });\n isStaticChildren =\n 0 < keys.length\n ? \"{key: someKey, \" + keys.join(\": ..., \") + \": ...}\"\n : \"{key: someKey}\";\n didWarnAboutKeySpread[children + isStaticChildren] ||\n ((keys =\n 0 < keys.length ? \"{\" + keys.join(\": ..., \") + \": ...}\" : \"{}\"),\n console.error(\n 'A props object containing a \"key\" prop is being spread into JSX:\\n let props = %s;\\n <%s {...props} />\\nReact keys must be passed directly to JSX without using spread:\\n let props = %s;\\n <%s key={someKey} {...props} />',\n isStaticChildren,\n children,\n keys,\n children\n ),\n (didWarnAboutKeySpread[children + isStaticChildren] = !0));\n }\n children = null;\n void 0 !== maybeKey &&\n (checkKeyStringCoercion(maybeKey), (children = \"\" + maybeKey));\n hasValidKey(config) &&\n (checkKeyStringCoercion(config.key), (children = \"\" + config.key));\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n children &&\n defineKeyPropWarningGetter(\n maybeKey,\n \"function\" === typeof type\n ? type.displayName || type.name || \"Unknown\"\n : type\n );\n return ReactElement(\n type,\n children,\n maybeKey,\n getOwner(),\n debugStack,\n debugTask\n );\n }\n function validateChildKeys(node) {\n isValidElement(node)\n ? node._store && (node._store.validated = 1)\n : \"object\" === typeof node &&\n null !== node &&\n node.$$typeof === REACT_LAZY_TYPE &&\n (\"fulfilled\" === node._payload.status\n ? isValidElement(node._payload.value) &&\n node._payload.value._store &&\n (node._payload.value._store.validated = 1)\n : node._store && (node._store.validated = 1));\n }\n function isValidElement(object) {\n return (\n \"object\" === typeof object &&\n null !== object &&\n object.$$typeof === REACT_ELEMENT_TYPE\n );\n }\n var React = require(\"react\"),\n REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_PORTAL_TYPE = Symbol.for(\"react.portal\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\"),\n REACT_STRICT_MODE_TYPE = Symbol.for(\"react.strict_mode\"),\n REACT_PROFILER_TYPE = Symbol.for(\"react.profiler\"),\n REACT_CONSUMER_TYPE = Symbol.for(\"react.consumer\"),\n REACT_CONTEXT_TYPE = Symbol.for(\"react.context\"),\n REACT_FORWARD_REF_TYPE = Symbol.for(\"react.forward_ref\"),\n REACT_SUSPENSE_TYPE = Symbol.for(\"react.suspense\"),\n REACT_SUSPENSE_LIST_TYPE = Symbol.for(\"react.suspense_list\"),\n REACT_MEMO_TYPE = Symbol.for(\"react.memo\"),\n REACT_LAZY_TYPE = Symbol.for(\"react.lazy\"),\n REACT_ACTIVITY_TYPE = Symbol.for(\"react.activity\"),\n REACT_CLIENT_REFERENCE = Symbol.for(\"react.client.reference\"),\n ReactSharedInternals =\n React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,\n hasOwnProperty = Object.prototype.hasOwnProperty,\n isArrayImpl = Array.isArray,\n createTask = console.createTask\n ? console.createTask\n : function () {\n return null;\n };\n React = {\n react_stack_bottom_frame: function (callStackForError) {\n return callStackForError();\n }\n };\n var specialPropKeyWarningShown;\n var didWarnAboutElementRef = {};\n var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(\n React,\n UnknownOwner\n )();\n var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));\n var didWarnAboutKeySpread = {};\n exports.Fragment = REACT_FRAGMENT_TYPE;\n exports.jsx = function (type, config, maybeKey) {\n var trackActualOwner =\n 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n return jsxDEVImpl(\n type,\n config,\n maybeKey,\n !1,\n trackActualOwner\n ? Error(\"react-stack-top-frame\")\n : unknownOwnerDebugStack,\n trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n );\n };\n exports.jsxs = function (type, config, maybeKey) {\n var trackActualOwner =\n 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;\n return jsxDEVImpl(\n type,\n config,\n maybeKey,\n !0,\n trackActualOwner\n ? Error(\"react-stack-top-frame\")\n : unknownOwnerDebugStack,\n trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask\n );\n };\n })();\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-jsx-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n","import React from 'react';\nimport { cn } from '@sudobility/components';\n\nexport interface BlockquoteProps {\n /** Quote content */\n children: React.ReactNode;\n /** Citation/author */\n cite?: string;\n /** Variant style */\n variant?: 'default' | 'bordered' | 'accent';\n /** Size variant */\n size?: 'sm' | 'md' | 'lg';\n /** Additional className */\n className?: string;\n}\n\n/**\n * Blockquote Component\n *\n * Displays quoted text with optional citation and various styling options.\n * Uses semantic HTML for proper document structure.\n *\n * @example\n * ```tsx\n * <Blockquote cite=\"John Doe\">\n * This is a great quote about something important.\n * </Blockquote>\n * ```\n *\n * @example\n * ```tsx\n * <Blockquote variant=\"accent\" size=\"lg\">\n * Innovation distinguishes between a leader and a follower.\n * </Blockquote>\n * ```\n */\nexport const Blockquote: React.FC<BlockquoteProps> = ({\n children,\n cite,\n variant = 'default',\n size = 'md',\n className,\n}) => {\n // Size configurations\n const sizeClasses = {\n sm: 'text-sm p-3',\n md: 'text-base p-4',\n lg: 'text-lg p-6',\n };\n\n const citeSize = {\n sm: 'text-xs',\n md: 'text-sm',\n lg: 'text-base',\n };\n\n // Variant configurations\n const variantClasses = {\n default:\n 'border-l-4 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50',\n bordered:\n 'border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800',\n accent:\n 'border-l-4 border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/20',\n };\n\n return (\n <blockquote\n className={cn(\n 'rounded-r-lg',\n sizeClasses[size],\n variantClasses[variant],\n className\n )}\n >\n <p className='text-gray-800 dark:text-gray-200 italic'>{children}</p>\n {cite && (\n <footer\n className={cn(\n 'mt-2 text-gray-600 dark:text-gray-400',\n citeSize[size]\n )}\n >\n — <cite className='not-italic font-medium'>{cite}</cite>\n </footer>\n )}\n </blockquote>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UchecklistUprogress Component\n *\n * A reusable UchecklistUprogress component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UchecklistUprogress className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/checklist-progress}\n */\n\nexport interface UchecklistUprogressProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UchecklistUprogress = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UchecklistUprogressProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UchecklistUprogress'\n >\n {children || 'UchecklistUprogress Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UformUbuilder Component\n *\n * A reusable UformUbuilder component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UformUbuilder className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/form-builder}\n */\n\nexport interface UformUbuilderProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UformUbuilder = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UformUbuilderProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UformUbuilder'\n >\n {children || 'UformUbuilder Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UformUtemplate Component\n *\n * A reusable UformUtemplate component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UformUtemplate className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/form-template}\n */\n\nexport interface UformUtemplateProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UformUtemplate = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UformUtemplateProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UformUtemplate'\n >\n {children || 'UformUtemplate Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UformUvalidator Component\n *\n * A reusable UformUvalidator component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UformUvalidator className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/form-validator}\n */\n\nexport interface UformUvalidatorProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UformUvalidator = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UformUvalidatorProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UformUvalidator'\n >\n {children || 'UformUvalidator Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UnetworkUstatus Component\n *\n * A reusable UnetworkUstatus component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UnetworkUstatus className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/network-status}\n */\n\nexport interface UnetworkUstatusProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UnetworkUstatus = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UnetworkUstatusProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UnetworkUstatus'\n >\n {children || 'UnetworkUstatus Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UprocessUdiagram Component\n *\n * A reusable UprocessUdiagram component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UprocessUdiagram className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/process-diagram}\n */\n\nexport interface UprocessUdiagramProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UprocessUdiagram = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UprocessUdiagramProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UprocessUdiagram'\n >\n {children || 'UprocessUdiagram Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * QuoteGenerator Component\n *\n * Insurance component with full dark mode support.\n *\n * @component\n * @example\n * ```tsx\n * <QuoteGenerator className=\"custom-class\" />\n * ```\n */\nexport interface QuoteGeneratorProps {\n className?: string;\n children?: React.ReactNode;\n disabled?: boolean;\n}\n\nexport const QuoteGenerator = ({\n className,\n children,\n disabled,\n}: QuoteGeneratorProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n className\n )}\n role='region'\n aria-label='QuoteGenerator'\n >\n {children || 'QuoteGenerator Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * SafetyChecklist Component\n *\n * Construction component with full dark mode support.\n *\n * @component\n * @example\n * ```tsx\n * <SafetyChecklist className=\"custom-class\" />\n * ```\n */\nexport interface SafetyChecklistProps {\n className?: string;\n children?: React.ReactNode;\n disabled?: boolean;\n}\n\nexport const SafetyChecklist = ({\n className,\n children,\n disabled,\n}: SafetyChecklistProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n className\n )}\n role='region'\n aria-label='SafetyChecklist'\n >\n {children || 'SafetyChecklist Component'}\n </div>\n );\n};\n","import { clsx as E } from \"clsx\";\nimport { twMerge as I } from \"tailwind-merge\";\nconst o = {\n // Blue palette - primary brand color\n blue: {\n 50: \"#eff6ff\",\n 100: \"#dbeafe\",\n 200: \"#bfdbfe\",\n 300: \"#93c5fd\",\n 400: \"#60a5fa\",\n 500: \"#3b82f6\",\n 600: \"#2563eb\",\n 700: \"#1d4ed8\",\n 800: \"#1e40af\",\n 900: \"#1e3a8a\",\n 950: \"#172554\"\n },\n // Purple palette - secondary brand color\n purple: {\n 50: \"#faf5ff\",\n 100: \"#f3e8ff\",\n 200: \"#e9d5ff\",\n 300: \"#d8b4fe\",\n 400: \"#c084fc\",\n 500: \"#a855f7\",\n 600: \"#9333ea\",\n 700: \"#7c3aed\",\n 800: \"#6b21a8\",\n 900: \"#581c87\",\n 950: \"#3b0764\"\n },\n // Neutral palette - backgrounds, text, borders\n neutral: {\n 0: \"#ffffff\",\n 50: \"#f9fafb\",\n 100: \"#f3f4f6\",\n 200: \"#e5e7eb\",\n 300: \"#d1d5db\",\n 400: \"#9ca3af\",\n 500: \"#6b7280\",\n 600: \"#4b5563\",\n 700: \"#374151\",\n 800: \"#1f2937\",\n 900: \"#111827\",\n 950: \"#030712\"\n },\n // Semantic state colors\n red: {\n 50: \"#fef2f2\",\n 100: \"#fee2e2\",\n 200: \"#fecaca\",\n 300: \"#fca5a5\",\n 400: \"#f87171\",\n 500: \"#ef4444\",\n 600: \"#dc2626\",\n 700: \"#b91c1c\",\n 800: \"#991b1b\",\n 900: \"#7f1d1d\",\n 950: \"#450a0a\"\n },\n orange: {\n 50: \"#fff7ed\",\n 100: \"#ffedd5\",\n 200: \"#fed7aa\",\n 300: \"#fdba74\",\n 400: \"#fb923c\",\n 500: \"#f97316\",\n 600: \"#ea580c\",\n 700: \"#c2410c\",\n 800: \"#9a3412\",\n 900: \"#7c2d12\",\n 950: \"#431407\"\n },\n amber: {\n 50: \"#fffbeb\",\n 100: \"#fef3c7\",\n 200: \"#fde68a\",\n 300: \"#fcd34d\",\n 400: \"#fbbf24\",\n 500: \"#f59e0b\",\n 600: \"#d97706\",\n 700: \"#b45309\",\n 800: \"#92400e\",\n 900: \"#78350f\",\n 950: \"#451a03\"\n },\n green: {\n 50: \"#f0fdf4\",\n 100: \"#dcfce7\",\n 200: \"#bbf7d0\",\n 300: \"#86efac\",\n 400: \"#4ade80\",\n 500: \"#22c55e\",\n 600: \"#16a34a\",\n 700: \"#15803d\",\n 800: \"#166534\",\n 900: \"#14532d\",\n 950: \"#052e16\"\n },\n // Web3 specific colors\n web3: {\n ethereum: {\n light: \"#627eea\",\n DEFAULT: \"#627eea\",\n dark: \"#4c63d2\"\n },\n solana: {\n light: \"#9945ff\",\n DEFAULT: \"#9945ff\",\n dark: \"#7d37d9\"\n },\n polygon: {\n light: \"#8247e5\",\n DEFAULT: \"#8247e5\",\n dark: \"#6a3bc0\"\n },\n bitcoin: {\n light: \"#f7931a\",\n DEFAULT: \"#f7931a\",\n dark: \"#e07f00\"\n },\n binance: {\n light: \"#f3ba2f\",\n DEFAULT: \"#f3ba2f\",\n dark: \"#d4a423\"\n },\n cardano: {\n light: \"#0033ad\",\n DEFAULT: \"#0033ad\",\n dark: \"#002488\"\n },\n avalanche: {\n light: \"#e84142\",\n DEFAULT: \"#e84142\",\n dark: \"#d1383a\"\n },\n fantom: {\n light: \"#1969ff\",\n DEFAULT: \"#1969ff\",\n dark: \"#0052ff\"\n },\n arbitrum: {\n light: \"#2d374b\",\n DEFAULT: \"#2d374b\",\n dark: \"#1e2532\"\n },\n optimism: {\n light: \"#ff0420\",\n DEFAULT: \"#ff0420\",\n dark: \"#e6031c\"\n },\n chainlink: {\n light: \"#375bd2\",\n DEFAULT: \"#375bd2\",\n dark: \"#2d4bb5\"\n },\n cosmos: {\n light: \"#2e3148\",\n DEFAULT: \"#2e3148\",\n dark: \"#1f2030\"\n },\n polkadot: {\n light: \"#e6007a\",\n DEFAULT: \"#e6007a\",\n dark: \"#cc006e\"\n }\n }\n}, A = {\n // Text colors\n text: {\n primary: {\n light: o.neutral[900],\n dark: o.neutral[0]\n },\n secondary: {\n light: o.neutral[600],\n dark: o.neutral[400]\n },\n tertiary: {\n light: o.neutral[500],\n dark: o.neutral[500]\n },\n disabled: {\n light: o.neutral[400],\n dark: o.neutral[600]\n },\n inverse: {\n light: o.neutral[0],\n dark: o.neutral[900]\n },\n link: {\n light: o.blue[600],\n dark: o.blue[400]\n },\n linkHover: {\n light: o.blue[700],\n dark: o.blue[300]\n }\n },\n // Background colors\n background: {\n primary: {\n light: o.neutral[0],\n dark: o.neutral[900]\n },\n secondary: {\n light: o.neutral[50],\n dark: o.neutral[800]\n },\n tertiary: {\n light: o.neutral[100],\n dark: o.neutral[700]\n },\n elevated: {\n light: o.neutral[0],\n dark: o.neutral[800]\n },\n overlay: {\n light: \"rgba(0, 0, 0, 0.5)\",\n dark: \"rgba(0, 0, 0, 0.7)\"\n },\n page: {\n light: o.neutral[50],\n dark: o.neutral[950]\n }\n },\n // Border colors\n border: {\n primary: {\n light: o.neutral[200],\n dark: o.neutral[700]\n },\n secondary: {\n light: o.neutral[100],\n dark: o.neutral[800]\n },\n focus: {\n light: o.blue[500],\n dark: o.blue[400]\n },\n error: {\n light: o.red[300],\n dark: o.red[700]\n }\n },\n // Brand colors\n brand: {\n primary: {\n light: o.blue[600],\n dark: o.blue[500]\n },\n primaryHover: {\n light: o.blue[700],\n dark: o.blue[400]\n },\n secondary: {\n light: o.purple[600],\n dark: o.purple[500]\n },\n secondaryHover: {\n light: o.purple[700],\n dark: o.purple[400]\n }\n },\n // State colors\n state: {\n success: {\n light: o.green[600],\n dark: o.green[500]\n },\n successBg: {\n light: o.green[100],\n dark: `${o.green[900]}/30`\n },\n successText: {\n light: o.green[700],\n dark: o.green[300]\n },\n warning: {\n light: o.orange[500],\n dark: o.orange[400]\n },\n warningBg: {\n light: o.orange[100],\n dark: `${o.orange[900]}/30`\n },\n warningText: {\n light: o.orange[700],\n dark: o.orange[300]\n },\n attention: {\n light: o.amber[500],\n dark: o.amber[400]\n },\n attentionBg: {\n light: o.amber[100],\n dark: `${o.amber[900]}/30`\n },\n attentionText: {\n light: o.amber[700],\n dark: o.amber[300]\n },\n error: {\n light: o.red[600],\n dark: o.red[500]\n },\n errorBg: {\n light: o.red[100],\n dark: `${o.red[900]}/30`\n },\n errorText: {\n light: o.red[700],\n dark: o.red[300]\n },\n info: {\n light: o.blue[600],\n dark: o.blue[500]\n },\n infoBg: {\n light: o.blue[100],\n dark: `${o.blue[900]}/30`\n },\n infoText: {\n light: o.blue[700],\n dark: o.blue[300]\n },\n selected: {\n light: o.blue[100],\n dark: `${o.blue[900]}/30`\n }\n },\n // Action colors\n action: {\n primary: {\n light: o.blue[600],\n dark: o.blue[600]\n },\n primaryHover: {\n light: o.blue[700],\n dark: o.blue[700]\n },\n secondary: {\n light: o.neutral[100],\n dark: o.neutral[800]\n },\n danger: {\n light: o.red[600],\n dark: o.red[600]\n }\n },\n // Web3 specific colors\n web3: {\n ethereum: {\n light: o.web3.ethereum.light,\n dark: o.web3.ethereum.dark\n },\n ethereumBg: {\n light: `${o.blue[100]}`,\n dark: `${o.blue[900]}/30`\n },\n solana: {\n light: o.web3.solana.light,\n dark: o.web3.solana.dark\n },\n solanaBg: {\n light: `${o.purple[100]}`,\n dark: `${o.purple[900]}/30`\n },\n polygon: {\n light: o.web3.polygon.light,\n dark: o.web3.polygon.dark\n },\n polygonBg: {\n light: `${o.purple[50]}`,\n dark: `${o.purple[900]}/20`\n },\n bitcoin: {\n light: o.web3.bitcoin.light,\n dark: o.web3.bitcoin.dark\n },\n bitcoinBg: {\n light: `${o.orange[100]}`,\n dark: `${o.orange[900]}/30`\n },\n binance: {\n light: o.web3.binance.light,\n dark: o.web3.binance.dark\n },\n binanceBg: {\n light: `${o.amber[100]}`,\n dark: `${o.amber[900]}/30`\n },\n cardano: {\n light: o.web3.cardano.light,\n dark: o.web3.cardano.dark\n },\n cardanoBg: {\n light: `${o.blue[50]}`,\n dark: `${o.blue[900]}/20`\n },\n avalanche: {\n light: o.web3.avalanche.light,\n dark: o.web3.avalanche.dark\n },\n avalancheBg: {\n light: `${o.red[100]}`,\n dark: `${o.red[900]}/30`\n },\n arbitrum: {\n light: o.web3.arbitrum.light,\n dark: o.web3.arbitrum.dark\n },\n arbitrumBg: {\n light: `${o.neutral[100]}`,\n dark: `${o.neutral[800]}/50`\n },\n optimism: {\n light: o.web3.optimism.light,\n dark: o.web3.optimism.dark\n },\n optimismBg: {\n light: `${o.red[50]}`,\n dark: `${o.red[900]}/20`\n }\n }\n}, h = {\n button: {\n // Primary button - main brand actions\n primary: {\n base: \"bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white border-transparent\",\n dark: \"dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white\",\n focus: \"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-blue-400\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600\"\n },\n // Secondary button - alternative actions\n secondary: {\n base: \"bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-900 border-transparent\",\n dark: \"dark:bg-gray-800 dark:hover:bg-gray-700 dark:active:bg-gray-600 dark:text-gray-50\",\n focus: \"focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Outline button - secondary emphasis\n outline: {\n base: \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border-gray-300\",\n dark: \"dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600\",\n focus: \"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Ghost button - minimal emphasis\n ghost: {\n base: \"bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border-transparent\",\n dark: \"dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-300\",\n focus: \"focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Destructive button - dangerous actions\n destructive: {\n base: \"bg-red-600 hover:bg-red-700 active:bg-red-800 text-white border-transparent\",\n dark: \"dark:bg-red-600 dark:hover:bg-red-700 dark:active:bg-red-800 dark:text-white\",\n focus: \"focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Success button - positive actions\n success: {\n base: \"bg-green-600 hover:bg-green-700 active:bg-green-800 text-white border-transparent\",\n dark: \"dark:bg-green-600 dark:hover:bg-green-700 dark:active:bg-green-800 dark:text-white\",\n focus: \"focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed\"\n },\n // Link button - text-like appearance\n link: {\n base: \"bg-transparent hover:bg-transparent active:bg-transparent text-blue-600 border-transparent underline-offset-4 hover:underline\",\n dark: \"dark:text-blue-400\",\n focus: \"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\"\n },\n // Gradient variants for special emphasis\n gradient: {\n primary: \"bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-transparent shadow-lg hover:shadow-xl\",\n secondary: \"bg-gradient-to-r from-gray-100 to-gray-200 hover:from-gray-200 hover:to-gray-300 text-gray-900 border-transparent\",\n success: \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white border-transparent\"\n }\n },\n card: {\n // Default card styling\n default: {\n base: \"bg-white border-gray-200\",\n dark: \"dark:bg-gray-800 dark:border-gray-700\",\n hover: \"hover:shadow-md transition-shadow duration-200\"\n },\n // Elevated card with shadow\n elevated: {\n base: \"bg-white shadow-sm border-gray-200\",\n dark: \"dark:bg-gray-800 dark:border-gray-700\",\n hover: \"hover:shadow-lg transition-shadow duration-200\"\n },\n // Interactive card that can be clicked\n interactive: {\n base: \"bg-white border-gray-200 cursor-pointer\",\n dark: \"dark:bg-gray-800 dark:border-gray-700\",\n hover: \"hover:bg-gray-50 hover:shadow-md dark:hover:bg-gray-700 transition-all duration-200\",\n focus: \"focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n },\n // Success state card\n success: {\n base: \"bg-green-50 border-green-200\",\n dark: \"dark:bg-green-900/20 dark:border-green-800\",\n text: \"text-green-800 dark:text-green-200\"\n },\n // Warning state card\n warning: {\n base: \"bg-orange-50 border-orange-200\",\n dark: \"dark:bg-orange-900/20 dark:border-orange-800\",\n text: \"text-orange-800 dark:text-orange-200\"\n },\n // Attention state card\n attention: {\n base: \"bg-amber-50 border-amber-200\",\n dark: \"dark:bg-amber-900/20 dark:border-amber-800\",\n text: \"text-amber-800 dark:text-amber-200\"\n },\n // Error state card\n error: {\n base: \"bg-red-50 border-red-200\",\n dark: \"dark:bg-red-900/20 dark:border-red-800\",\n text: \"text-red-800 dark:text-red-200\"\n }\n },\n badge: {\n // Default badge\n default: {\n base: \"bg-gray-100 text-gray-800\",\n dark: \"dark:bg-gray-800 dark:text-gray-300\"\n },\n // Primary badge\n primary: {\n base: \"bg-blue-100 text-blue-800\",\n dark: \"dark:bg-blue-900/30 dark:text-blue-300\"\n },\n // Success badge\n success: {\n base: \"bg-green-100 text-green-800\",\n dark: \"dark:bg-green-900/30 dark:text-green-300\"\n },\n // Warning badge\n warning: {\n base: \"bg-orange-100 text-orange-800\",\n dark: \"dark:bg-orange-900/30 dark:text-orange-300\"\n },\n // Attention badge\n attention: {\n base: \"bg-amber-100 text-amber-800\",\n dark: \"dark:bg-amber-900/30 dark:text-amber-300\"\n },\n // Error badge\n error: {\n base: \"bg-red-100 text-red-800\",\n dark: \"dark:bg-red-900/30 dark:text-red-300\"\n },\n // Web3 specific badges\n ethereum: {\n base: \"bg-blue-100 text-blue-800\",\n dark: \"dark:bg-blue-900/30 dark:text-blue-300\"\n },\n solana: {\n base: \"bg-purple-100 text-purple-800\",\n dark: \"dark:bg-purple-900/30 dark:text-purple-300\"\n },\n polygon: {\n base: \"bg-purple-50 text-purple-800\",\n dark: \"dark:bg-purple-900/20 dark:text-purple-300\"\n },\n bitcoin: {\n base: \"bg-orange-100 text-orange-800\",\n dark: \"dark:bg-orange-900/30 dark:text-orange-300\"\n },\n binance: {\n base: \"bg-amber-100 text-amber-800\",\n dark: \"dark:bg-amber-900/30 dark:text-amber-300\"\n },\n cardano: {\n base: \"bg-blue-50 text-blue-900\",\n dark: \"dark:bg-blue-900/20 dark:text-blue-200\"\n },\n avalanche: {\n base: \"bg-red-100 text-red-800\",\n dark: \"dark:bg-red-900/30 dark:text-red-300\"\n },\n arbitrum: {\n base: \"bg-gray-100 text-gray-800\",\n dark: \"dark:bg-gray-800/50 dark:text-gray-300\"\n },\n optimism: {\n base: \"bg-red-50 text-red-900\",\n dark: \"dark:bg-red-900/20 dark:text-red-200\"\n }\n },\n input: {\n // Default input styling\n default: {\n base: \"bg-white border-gray-300 text-gray-900 placeholder:text-gray-500\",\n dark: \"dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100 dark:placeholder:text-gray-400\",\n focus: \"focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400\",\n error: \"border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700\"\n },\n // Search input styling\n search: {\n base: \"bg-gray-50 border-gray-200 text-gray-900 placeholder:text-gray-500\",\n dark: \"dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder:text-gray-400\",\n focus: \"focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:bg-gray-900\"\n }\n },\n alert: {\n // Info alert\n info: {\n base: \"bg-blue-50 border-blue-200 text-blue-800\",\n dark: \"dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-200\",\n icon: \"text-blue-600 dark:text-blue-400\"\n },\n // Success alert\n success: {\n base: \"bg-green-50 border-green-200 text-green-800\",\n dark: \"dark:bg-green-900/20 dark:border-green-800 dark:text-green-200\",\n icon: \"text-green-600 dark:text-green-400\"\n },\n // Warning alert\n warning: {\n base: \"bg-orange-50 border-orange-200 text-orange-800\",\n dark: \"dark:bg-orange-900/20 dark:border-orange-800 dark:text-orange-200\",\n icon: \"text-orange-600 dark:text-orange-400\"\n },\n // Attention alert\n attention: {\n base: \"bg-amber-50 border-amber-200 text-amber-800\",\n dark: \"dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-200\",\n icon: \"text-amber-600 dark:text-amber-400\"\n },\n // Error alert\n error: {\n base: \"bg-red-50 border-red-200 text-red-800\",\n dark: \"dark:bg-red-900/20 dark:border-red-800 dark:text-red-200\",\n icon: \"text-red-600 dark:text-red-400\"\n }\n }\n}, T = (t, r, a = [\"focus\"]) => {\n const i = h[t][r];\n return i ? [\n i.base,\n i.dark,\n ...a.map((l) => i[l]).filter(Boolean)\n ].join(\" \") : (console.warn(`Color variant '${r}' not found for component '${t}'`), \"\");\n}, L = (t, r, a, n) => {\n const i = [`bg-${t}`, `text-${r}`];\n return a && i.push(`border-${a}`), n?.hover && (n.hover.background && i.push(`hover:bg-${n.hover.background}`), n.hover.text && i.push(`hover:text-${n.hover.text}`), n.hover.border && i.push(`hover:border-${n.hover.border}`)), n?.focus?.ring && i.push(`focus:ring-2 focus:ring-${n.focus.ring}`), n?.dark && (n.dark.background && i.push(`dark:bg-${n.dark.background}`), n.dark.text && i.push(`dark:text-${n.dark.text}`), n.dark.border && i.push(`dark:border-${n.dark.border}`)), i.join(\" \");\n}, G = {\n // Raw color palette (use sparingly, prefer semantic tokens)\n raw: o,\n // Semantic color tokens (recommended for most use cases)\n semantic: A,\n // Component-specific colors (use for components)\n component: h,\n // Utilities\n utils: {\n getColorClasses: T,\n buildColorClass: L\n }\n}, e = {\n // Spacing scale (based on 4px grid)\n spacing: {\n xs: \"p-1\",\n // 4px\n sm: \"p-2\",\n // 8px\n md: \"p-4\",\n // 16px\n lg: \"p-6\",\n // 24px\n xl: \"p-8\",\n // 32px\n \"2xl\": \"p-12\",\n // 48px\n \"3xl\": \"p-16\",\n // 64px\n \"4xl\": \"p-20\",\n // 80px\n \"5xl\": \"p-24\"\n // 96px\n },\n // Margin utilities\n margin: {\n xs: \"m-1\",\n sm: \"m-2\",\n md: \"m-4\",\n lg: \"m-6\",\n xl: \"m-8\",\n \"2xl\": \"m-12\",\n \"3xl\": \"m-16\",\n \"4xl\": \"m-20\",\n \"5xl\": \"m-24\"\n },\n // Padding utilities\n padding: {\n xs: \"p-1\",\n sm: \"p-2\",\n md: \"p-4\",\n lg: \"p-6\",\n xl: \"p-8\",\n \"2xl\": \"p-12\",\n \"3xl\": \"p-16\"\n },\n // Gap utilities for flex/grid\n gap: {\n xs: \"gap-1\",\n sm: \"gap-2\",\n md: \"gap-4\",\n lg: \"gap-6\",\n xl: \"gap-8\",\n \"2xl\": \"gap-12\",\n \"3xl\": \"gap-16\"\n },\n // Border radius scale\n radius: {\n none: \"rounded-none\",\n sm: \"rounded-sm\",\n // 2px\n md: \"rounded-md\",\n // 6px\n lg: \"rounded-lg\",\n // 8px\n xl: \"rounded-xl\",\n // 12px\n \"2xl\": \"rounded-2xl\",\n // 16px\n \"3xl\": \"rounded-3xl\",\n // 24px\n full: \"rounded-full\"\n },\n // Shadow scale\n shadow: {\n none: \"shadow-none\",\n sm: \"shadow-sm\",\n md: \"shadow-md\",\n lg: \"shadow-lg\",\n xl: \"shadow-xl\",\n \"2xl\": \"shadow-2xl\"\n },\n // Typography scale\n typography: {\n // Font families\n family: {\n // Sans-serif fonts (default for UI)\n sans: \"font-sans\",\n // Inter, system-ui, sans-serif\n // Serif fonts (for editorial content)\n serif: \"font-serif\",\n // ui-serif, Georgia, serif\n // Monospace fonts (for code)\n mono: \"font-mono\",\n // ui-monospace, Menlo, Monaco, Consolas\n // Display fonts (for headings)\n display: \"font-sans\",\n // Same as sans for consistency\n // Body text font\n body: \"font-sans\"\n // Same as sans for consistency\n },\n // Font sizes with semantic names\n size: {\n // Micro text (10px)\n micro: \"text-[10px]\",\n // Extra small (12px)\n xs: \"text-xs\",\n // Small (14px)\n sm: \"text-sm\",\n // Base/Body (16px) - Default browser size\n base: \"text-base\",\n md: \"text-base\",\n // Alias for base\n // Large (18px)\n lg: \"text-lg\",\n // Extra large (20px)\n xl: \"text-xl\",\n // 2X large (24px)\n \"2xl\": \"text-2xl\",\n // 3X large (30px)\n \"3xl\": \"text-3xl\",\n // 4X large (36px)\n \"4xl\": \"text-4xl\",\n // 5X large (48px)\n \"5xl\": \"text-5xl\",\n // 6X large (60px)\n \"6xl\": \"text-6xl\",\n // 7X large (72px)\n \"7xl\": \"text-7xl\",\n // 8X large (96px)\n \"8xl\": \"text-8xl\",\n // 9X large (128px)\n \"9xl\": \"text-9xl\"\n },\n // Semantic font sizes for specific use cases\n semantic: {\n // Caption text\n caption: \"text-xs\",\n // 12px\n // Small body text\n small: \"text-sm\",\n // 14px\n // Regular body text\n body: \"text-base\",\n // 16px\n // Large body text\n bodyLarge: \"text-lg\",\n // 18px\n // Subheading text\n subheading: \"text-xl\",\n // 20px\n // Heading 6\n h6: \"text-base\",\n // 16px\n // Heading 5\n h5: \"text-lg\",\n // 18px\n // Heading 4\n h4: \"text-xl\",\n // 20px\n // Heading 3\n h3: \"text-2xl\",\n // 24px\n // Heading 2\n h2: \"text-3xl\",\n // 30px\n // Heading 1\n h1: \"text-4xl\",\n // 36px\n // Display text (hero headings)\n display: \"text-6xl\",\n // 60px\n // Giant display text\n hero: \"text-8xl\"\n // 96px\n },\n // Font weights with semantic names\n weight: {\n // Numeric weights\n thin: \"font-thin\",\n // 100\n extralight: \"font-extralight\",\n // 200\n light: \"font-light\",\n // 300\n normal: \"font-normal\",\n // 400\n medium: \"font-medium\",\n // 500\n semibold: \"font-semibold\",\n // 600\n bold: \"font-bold\",\n // 700\n extrabold: \"font-extrabold\",\n // 800\n black: \"font-black\",\n // 900\n // Semantic weights\n body: \"font-normal\",\n // For body text\n emphasis: \"font-medium\",\n // For emphasized text\n strong: \"font-semibold\",\n // For strong text\n heading: \"font-bold\",\n // For headings\n display: \"font-extrabold\"\n // For display text\n },\n // Font styles\n style: {\n normal: \"not-italic\",\n italic: \"italic\",\n oblique: \"italic\"\n // Maps to italic (closest approximation)\n },\n // Text decoration\n decoration: {\n none: \"no-underline\",\n underline: \"underline\",\n overline: \"overline\",\n lineThrough: \"line-through\"\n },\n // Text decoration style\n decorationStyle: {\n solid: \"decoration-solid\",\n double: \"decoration-double\",\n dotted: \"decoration-dotted\",\n dashed: \"decoration-dashed\",\n wavy: \"decoration-wavy\"\n },\n // Text decoration thickness\n decorationThickness: {\n auto: \"decoration-auto\",\n fromFont: \"decoration-from-font\",\n thin: \"decoration-1\",\n medium: \"decoration-2\",\n thick: \"decoration-4\"\n },\n // Text underline offset\n underlineOffset: {\n auto: \"underline-offset-auto\",\n small: \"underline-offset-1\",\n medium: \"underline-offset-2\",\n large: \"underline-offset-4\",\n xl: \"underline-offset-8\"\n },\n // Line heights with semantic names\n leading: {\n // Numeric values\n none: \"leading-none\",\n // 1\n tight: \"leading-tight\",\n // 1.25\n snug: \"leading-snug\",\n // 1.375\n normal: \"leading-normal\",\n // 1.5\n relaxed: \"leading-relaxed\",\n // 1.625\n loose: \"leading-loose\",\n // 2\n // Semantic values\n heading: \"leading-tight\",\n // For headings\n body: \"leading-relaxed\",\n // For body text\n caption: \"leading-normal\",\n // For captions\n display: \"leading-none\"\n // For display text\n },\n // Letter spacing with semantic names\n tracking: {\n // Numeric values\n tighter: \"tracking-tighter\",\n // -0.05em\n tight: \"tracking-tight\",\n // -0.025em\n normal: \"tracking-normal\",\n // 0em\n wide: \"tracking-wide\",\n // 0.025em\n wider: \"tracking-wider\",\n // 0.05em\n widest: \"tracking-widest\",\n // 0.1em\n // Semantic values\n heading: \"tracking-tight\",\n // For headings\n body: \"tracking-normal\",\n // For body text\n caption: \"tracking-normal\",\n // For captions\n button: \"tracking-wide\",\n // For button text\n uppercase: \"tracking-wider\"\n // For uppercase text\n },\n // Text transform\n transform: {\n none: \"normal-case\",\n uppercase: \"uppercase\",\n lowercase: \"lowercase\",\n capitalize: \"capitalize\"\n },\n // Text alignment\n align: {\n left: \"text-left\",\n center: \"text-center\",\n right: \"text-right\",\n justify: \"text-justify\",\n start: \"text-start\",\n end: \"text-end\"\n },\n // Vertical alignment\n verticalAlign: {\n baseline: \"align-baseline\",\n top: \"align-top\",\n middle: \"align-middle\",\n bottom: \"align-bottom\",\n textTop: \"align-text-top\",\n textBottom: \"align-text-bottom\",\n sub: \"align-sub\",\n super: \"align-super\"\n },\n // White space handling\n whitespace: {\n normal: \"whitespace-normal\",\n nowrap: \"whitespace-nowrap\",\n pre: \"whitespace-pre\",\n preLine: \"whitespace-pre-line\",\n preWrap: \"whitespace-pre-wrap\",\n break: \"whitespace-break-spaces\"\n },\n // Word breaking\n wordBreak: {\n normal: \"break-normal\",\n words: \"break-words\",\n all: \"break-all\",\n keep: \"break-keep\"\n },\n // Text overflow\n overflow: {\n clip: \"text-clip\",\n ellipsis: \"text-ellipsis\"\n },\n // Text indent\n indent: {\n none: \"indent-0\",\n sm: \"indent-1\",\n md: \"indent-4\",\n lg: \"indent-8\"\n }\n },\n // Animation durations\n animation: {\n none: \"duration-0\",\n fastest: \"duration-75\",\n fast: \"duration-150\",\n normal: \"duration-200\",\n slow: \"duration-300\",\n slower: \"duration-500\",\n slowest: \"duration-700\"\n },\n // Animation easing\n ease: {\n linear: \"ease-linear\",\n in: \"ease-in\",\n out: \"ease-out\",\n inOut: \"ease-in-out\"\n },\n // Z-index scale\n zIndex: {\n auto: \"z-auto\",\n base: \"z-0\",\n docked: \"z-10\",\n dropdown: \"z-20\",\n sticky: \"z-30\",\n banner: \"z-40\",\n overlay: \"z-50\",\n modal: \"z-60\",\n popover: \"z-70\",\n skipLink: \"z-80\",\n toast: \"z-90\",\n tooltip: \"z-100\"\n },\n // Breakpoints (for reference - these are handled by Tailwind)\n breakpoints: {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n \"2xl\": \"1536px\"\n },\n // Grid columns\n grid: {\n cols1: \"grid-cols-1\",\n cols2: \"grid-cols-2\",\n cols3: \"grid-cols-3\",\n cols4: \"grid-cols-4\",\n cols5: \"grid-cols-5\",\n cols6: \"grid-cols-6\",\n cols12: \"grid-cols-12\"\n },\n // Responsive grid patterns\n gridResponsive: {\n responsive2: \"grid-cols-1 md:grid-cols-2\",\n responsive3: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\n responsive4: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n responsive6: \"grid-cols-2 md:grid-cols-3 lg:grid-cols-6\"\n },\n // Flex utilities\n flex: {\n center: \"flex items-center justify-center\",\n between: \"flex items-center justify-between\",\n start: \"flex items-center justify-start\",\n end: \"flex items-center justify-end\",\n col: \"flex flex-col\",\n colCenter: \"flex flex-col items-center justify-center\",\n wrap: \"flex flex-wrap\"\n },\n // Common width utilities\n width: {\n full: \"w-full\",\n screen: \"w-screen\",\n auto: \"w-auto\",\n fit: \"w-fit\",\n container: \"w-full max-w-7xl mx-auto\",\n containerSm: \"w-full max-w-3xl mx-auto\",\n containerLg: \"w-full max-w-full mx-auto\"\n },\n // Common height utilities\n height: {\n full: \"h-full\",\n screen: \"h-screen\",\n auto: \"h-auto\",\n fit: \"h-fit\",\n min: \"min-h-0\",\n minScreen: \"min-h-screen\"\n }\n}, K = {\n // =============================================================================\n // HEADINGS\n // =============================================================================\n heading: {\n // Display headings (hero sections, landing pages)\n display: {\n // Massive display text (128px)\n hero: () => `${e.typography.family.display} ${e.typography.semantic.hero} ${e.typography.weight.display} ${e.typography.leading.display} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Large display text (96px)\n xl: () => `${e.typography.family.display} text-7xl ${e.typography.weight.display} ${e.typography.leading.display} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Medium display text (72px)\n lg: () => `${e.typography.family.display} text-6xl ${e.typography.weight.bold} ${e.typography.leading.display} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Small display text (60px)\n md: () => `${e.typography.family.display} text-5xl ${e.typography.weight.bold} ${e.typography.leading.tight} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Extra small display text (48px)\n sm: () => `${e.typography.family.display} text-4xl ${e.typography.weight.bold} ${e.typography.leading.tight} ${e.typography.tracking.heading} text-gray-900 dark:text-white`\n },\n // Standard headings (H1-H6)\n h1: () => `${e.typography.family.sans} ${e.typography.semantic.h1} ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h2: () => `${e.typography.family.sans} ${e.typography.semantic.h2} ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h3: () => `${e.typography.family.sans} ${e.typography.semantic.h3} ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h4: () => `${e.typography.family.sans} ${e.typography.semantic.h4} ${e.typography.weight.semibold} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h5: () => `${e.typography.family.sans} ${e.typography.semantic.h5} ${e.typography.weight.semibold} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h6: () => `${e.typography.family.sans} ${e.typography.semantic.h6} ${e.typography.weight.semibold} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n // Responsive headings that scale with screen size\n responsive: {\n h1: () => `${e.typography.family.sans} text-2xl sm:text-3xl md:text-4xl lg:text-5xl ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h2: () => `${e.typography.family.sans} text-xl sm:text-2xl md:text-3xl lg:text-4xl ${e.typography.weight.heading} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n h3: () => `${e.typography.family.sans} text-lg sm:text-xl md:text-2xl lg:text-3xl ${e.typography.weight.semibold} ${e.typography.leading.heading} ${e.typography.tracking.heading} text-gray-900 dark:text-white`,\n display: () => `${e.typography.family.display} text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl ${e.typography.weight.display} ${e.typography.leading.display} ${e.typography.tracking.heading} text-gray-900 dark:text-white`\n }\n },\n // =============================================================================\n // BODY TEXT\n // =============================================================================\n body: {\n // Large body text (18px)\n xl: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Regular body text (16px) - Default\n lg: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Medium body text (16px) - Alias for lg\n md: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Small body text (14px)\n sm: () => `${e.typography.family.body} ${e.typography.semantic.small} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n // Extra small body text (12px)\n xs: () => `${e.typography.family.body} ${e.typography.semantic.caption} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n // Emphasized/strong body text variants\n strong: {\n xl: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.strong} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n lg: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.strong} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n md: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.strong} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n sm: () => `${e.typography.family.body} ${e.typography.semantic.small} ${e.typography.weight.strong} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`\n },\n // Emphasized/medium body text variants\n emphasis: {\n xl: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.emphasis} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n lg: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.emphasis} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n md: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.emphasis} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`,\n sm: () => `${e.typography.family.body} ${e.typography.semantic.small} ${e.typography.weight.emphasis} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-900 dark:text-white`\n },\n // Muted/secondary body text variants\n muted: {\n xl: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n lg: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n md: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`,\n sm: () => `${e.typography.family.body} ${e.typography.semantic.small} ${e.typography.weight.body} ${e.typography.leading.body} ${e.typography.tracking.body} text-gray-600 dark:text-gray-400`\n }\n },\n // =============================================================================\n // SPECIALIZED TEXT\n // =============================================================================\n // Caption and small text\n caption: {\n // Default caption (12px)\n default: () => `${e.typography.family.body} ${e.typography.semantic.caption} ${e.typography.weight.body} ${e.typography.leading.caption} ${e.typography.tracking.caption} text-gray-500 dark:text-gray-500`,\n // Emphasized caption\n emphasis: () => `${e.typography.family.body} ${e.typography.semantic.caption} ${e.typography.weight.emphasis} ${e.typography.leading.caption} ${e.typography.tracking.caption} text-gray-600 dark:text-gray-400`,\n // Uppercase caption (for labels)\n uppercase: () => `${e.typography.family.body} ${e.typography.semantic.caption} ${e.typography.weight.emphasis} ${e.typography.leading.caption} ${e.typography.tracking.uppercase} ${e.typography.transform.uppercase} text-gray-500 dark:text-gray-500`\n },\n // Lead text (introduction paragraphs)\n lead: {\n // Large lead text\n lg: () => `${e.typography.family.body} text-xl ${e.typography.weight.body} ${e.typography.leading.relaxed} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Medium lead text\n md: () => `${e.typography.family.body} ${e.typography.semantic.bodyLarge} ${e.typography.weight.body} ${e.typography.leading.relaxed} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`,\n // Small lead text\n sm: () => `${e.typography.family.body} ${e.typography.semantic.body} ${e.typography.weight.body} ${e.typography.leading.relaxed} ${e.typography.tracking.body} text-gray-700 dark:text-gray-300`\n },\n // Links\n link: {\n // Default link\n default: () => `${e.typography.decoration.underline} ${e.typography.underlineOffset.medium} text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-150`,\n // Link without underline\n subtle: () => `${e.typography.decoration.none} text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:${e.typography.decoration.underline} hover:${e.typography.underlineOffset.medium} transition-all duration-150`,\n // Muted link\n muted: () => `${e.typography.decoration.underline} ${e.typography.underlineOffset.medium} text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-150`,\n // External link (with icon space)\n external: () => `${e.typography.decoration.underline} ${e.typography.underlineOffset.medium} text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-150 inline-flex items-center gap-1`\n },\n // Code and monospace text\n code: {\n // Inline code\n inline: () => `${e.typography.family.mono} text-sm ${e.typography.weight.medium} px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100`,\n // Code block\n block: () => `${e.typography.family.mono} text-sm ${e.typography.weight.body} ${e.typography.leading.relaxed} p-4 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 overflow-x-auto`,\n // Small inline code\n small: () => `${e.typography.family.mono} text-xs ${e.typography.weight.medium} px-1 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100`\n },\n // UI Labels and form text\n label: {\n // Form labels\n default: () => `${e.typography.family.body} text-sm ${e.typography.weight.emphasis} text-gray-900 dark:text-white`,\n // Required field labels\n required: () => `${e.typography.family.body} text-sm ${e.typography.weight.emphasis} text-gray-900 dark:text-white after:content-['*'] after:ml-0.5 after:text-red-500`,\n // Optional field labels\n optional: () => `${e.typography.family.body} text-sm ${e.typography.weight.body} text-gray-600 dark:text-gray-400`,\n // Helper text\n helper: () => `${e.typography.family.body} text-sm ${e.typography.weight.body} text-gray-500 dark:text-gray-500`,\n // Error text\n error: () => `${e.typography.family.body} text-sm ${e.typography.weight.body} text-red-600 dark:text-red-400`,\n // Success text\n success: () => `${e.typography.family.body} text-sm ${e.typography.weight.body} text-green-600 dark:text-green-400`\n },\n // =============================================================================\n // WEB3 SPECIFIC\n // =============================================================================\n web3: {\n // Wallet addresses\n address: () => `${e.typography.family.mono} text-sm ${e.typography.weight.body} text-gray-900 dark:text-white break-all`,\n // Short wallet addresses (truncated)\n addressShort: () => `${e.typography.family.mono} text-sm ${e.typography.weight.body} text-gray-900 dark:text-white`,\n // Transaction hashes\n hash: () => `${e.typography.family.mono} text-xs ${e.typography.weight.body} text-gray-500 dark:text-gray-500 break-all`,\n // Cryptocurrency amounts\n amount: () => `${e.typography.family.mono} text-base ${e.typography.weight.emphasis} text-gray-900 dark:text-white`,\n // Chain names\n chain: () => `${e.typography.family.body} text-sm ${e.typography.weight.emphasis} text-gray-900 dark:text-white`,\n // Token symbols\n symbol: () => `${e.typography.family.body} text-sm ${e.typography.weight.bold} ${e.typography.transform.uppercase} text-gray-900 dark:text-white`\n },\n // =============================================================================\n // UTILITY CLASSES\n // =============================================================================\n // Truncation utilities\n truncate: {\n // Single line truncation\n line: () => `${e.typography.overflow.ellipsis} ${e.typography.whitespace.nowrap} overflow-hidden`,\n // Multi-line truncation (2 lines)\n lines2: () => \"line-clamp-2\",\n // Multi-line truncation (3 lines)\n lines3: () => \"line-clamp-3\",\n // Multi-line truncation (4 lines)\n lines4: () => \"line-clamp-4\"\n },\n // Selection styles\n selection: {\n // Default text selection\n default: () => \"selection:bg-blue-200 dark:selection:bg-blue-800 selection:text-blue-900 dark:selection:text-blue-100\",\n // Brand colored selection\n brand: () => \"selection:bg-purple-200 dark:selection:bg-purple-800 selection:text-purple-900 dark:selection:text-purple-100\"\n }\n}, q = (t = \"body\", r = \"body\", a = \"body\", n = \"text-gray-900 dark:text-white\", i = {}) => {\n const { leading: d = \"body\", tracking: l = \"body\", transform: s = \"none\", decoration: b = \"none\" } = i;\n return [\n e.typography.family[t],\n e.typography.semantic[r],\n e.typography.weight[a],\n e.typography.leading[d],\n e.typography.tracking[l],\n e.typography.transform[s],\n e.typography.decoration[b],\n n\n ].filter(Boolean).join(\" \");\n}, H = (...t) => t.filter(Boolean).join(\" \"), Y = (t, r) => {\n const a = [];\n return a.push(t), r.sm && a.push(`sm:${r.sm}`), r.md && a.push(`md:${r.md}`), r.lg && a.push(`lg:${r.lg}`), r.xl && a.push(`xl:${r.xl}`), r[\"2xl\"] && a.push(`2xl:${r[\"2xl\"]}`), a.join(\" \");\n}, Q = {\n // Button variants with complete styling\n button: {\n primary: {\n default: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200 h-8\",\n large: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 inline-flex items-center justify-center rounded-md px-6 py-3 text-base font-medium transition-colors duration-200 h-12\",\n withIcon: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n fullWidth: () => \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 border-transparent focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white dark:focus-visible:ring-blue-400 flex items-center justify-center w-full rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\"\n },\n secondary: {\n default: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700 dark:active:bg-gray-600 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700 dark:active:bg-gray-600 inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200 h-8\",\n large: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700 dark:active:bg-gray-600 inline-flex items-center justify-center rounded-md px-6 py-3 text-base font-medium transition-colors duration-200 h-12\",\n withIcon: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700 dark:active:bg-gray-600 inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\"\n },\n outline: {\n default: () => \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border border-gray-300 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border border-gray-300 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600 inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200 h-8\",\n large: () => \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border border-gray-300 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600 inline-flex items-center justify-center rounded-md px-6 py-3 text-base font-medium transition-colors duration-200 h-12\",\n withIcon: () => \"bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border border-gray-300 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600 inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\"\n },\n destructive: {\n default: () => \"bg-red-600 text-white hover:bg-red-700 active:bg-red-800 border-transparent focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-red-600 dark:hover:bg-red-700 dark:active:bg-red-800 dark:text-white inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n outline: () => \"bg-transparent hover:bg-red-50 active:bg-red-100 text-red-600 border border-red-300 focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-800 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-red-600 text-white hover:bg-red-700 active:bg-red-800 border-transparent focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-red-600 dark:hover:bg-red-700 dark:active:bg-red-800 dark:text-white inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200 h-8\"\n },\n ghost: {\n default: () => \"bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-300 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n small: () => \"bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-300 inline-flex items-center justify-center rounded-md px-2 py-1 text-xs font-medium transition-colors duration-200 h-8\",\n icon: () => \"bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-300 inline-flex items-center justify-center rounded-md p-2 transition-colors duration-200 h-10 w-10\"\n },\n link: {\n default: () => \"bg-transparent hover:bg-transparent active:bg-transparent text-blue-600 border-transparent underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline dark:text-blue-400 inline-flex items-center justify-center rounded-md px-0 py-0 text-sm font-medium transition-colors duration-200\",\n muted: () => \"bg-transparent hover:bg-transparent active:bg-transparent text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 border-transparent underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline inline-flex items-center justify-center rounded-md px-0 py-0 text-sm font-medium transition-colors duration-200\"\n },\n gradient: {\n primary: () => \"bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-transparent shadow-lg hover:shadow-xl focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-200\",\n secondary: () => \"bg-gradient-to-r from-gray-100 to-gray-200 hover:from-gray-200 hover:to-gray-300 text-gray-900 border-transparent focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-200\",\n success: () => \"bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white border-transparent shadow-lg hover:shadow-xl focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-200\"\n },\n // Web3 specific button variants\n web3: {\n wallet: () => \"bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\",\n connect: () => \"bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-transparent shadow-lg hover:shadow-xl focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all duration-200\",\n disconnect: () => \"bg-transparent hover:bg-red-50 active:bg-red-100 text-red-600 border border-red-300 focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-800 inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-200\"\n }\n },\n // Card variants\n card: {\n default: {\n base: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg\",\n padded: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6\",\n interactive: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 transition-all duration-200 hover:shadow-md cursor-pointer\"\n },\n elevated: {\n base: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm\",\n padded: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6\",\n interactive: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6 transition-all duration-200 hover:shadow-lg cursor-pointer\"\n },\n state: {\n success: () => \"bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800 text-green-800 dark:text-green-200 rounded-lg border p-4\",\n warning: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded-lg border p-4\",\n error: () => \"bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800 text-red-800 dark:text-red-200 rounded-lg border p-4\",\n info: () => \"bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 text-blue-800 dark:text-blue-200 rounded-lg border p-4\"\n }\n },\n // Badge variants\n badge: {\n default: () => \"bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n primary: () => \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n success: () => \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n warning: () => \"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n error: () => \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n // Web3 specific\n ethereum: () => \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n solana: () => \"bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n // Sizes\n small: (t = \"default\") => {\n const r = {\n default: \"bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300\",\n primary: \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300\",\n success: \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300\",\n warning: \"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300\",\n error: \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300\"\n };\n return `${r[t] || r.default} inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium`;\n },\n large: (t = \"default\") => {\n const r = {\n default: \"bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300\",\n primary: \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300\",\n success: \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300\",\n warning: \"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300\",\n error: \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300\"\n };\n return `${r[t] || r.default} inline-flex items-center px-3 py-1 rounded-full text-sm font-medium`;\n }\n },\n // Input variants\n input: {\n default: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n search: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n error: () => \"bg-gray-50 dark:bg-gray-800 border-red-300 dark:border-red-700 text-gray-900 dark:text-gray-100 focus:border-red-500 focus:ring-red-500 block w-full rounded-md px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n // Sizes\n small: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md px-2 py-1.5 text-xs placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n large: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md px-4 py-3 text-base placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\",\n // Special variants\n withIcon: () => \"bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 block w-full rounded-md pl-10 pr-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\"\n },\n // Alert variants\n alert: {\n info: () => \"bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 text-blue-800 dark:text-blue-200 rounded-md border p-4 flex items-start gap-3\",\n success: () => \"bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800 text-green-800 dark:text-green-200 rounded-md border p-4 flex items-start gap-3\",\n warning: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded-md border p-4 flex items-start gap-3\",\n attention: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded-md border p-4 flex items-start gap-3\",\n error: () => \"bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800 text-red-800 dark:text-red-200 rounded-md border p-4 flex items-start gap-3\",\n // Compact variants\n compact: {\n info: () => \"bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 text-blue-800 dark:text-blue-200 rounded border px-3 py-2 text-sm\",\n success: () => \"bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800 text-green-800 dark:text-green-200 rounded border px-3 py-2 text-sm\",\n warning: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded border px-3 py-2 text-sm\",\n attention: () => \"bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded border px-3 py-2 text-sm\",\n error: () => \"bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800 text-red-800 dark:text-red-200 rounded border px-3 py-2 text-sm\"\n }\n },\n // Loading/Spinner variants\n loading: {\n // Spinner variants\n spinner: {\n default: () => \"animate-spin rounded-full border-2 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400 w-5 h-5\",\n small: () => \"animate-spin rounded-full border-2 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400 w-4 h-4\",\n large: () => \"animate-spin rounded-full border-2 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400 w-8 h-8\",\n extraLarge: () => \"animate-spin rounded-full border-4 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400 w-16 h-16\",\n // Color variants\n white: () => \"animate-spin rounded-full border-2 border-white/30 border-t-white w-5 h-5\",\n success: () => \"animate-spin rounded-full border-2 border-green-200 border-t-green-600 dark:border-green-700 dark:border-t-green-400 w-5 h-5\",\n warning: () => \"animate-spin rounded-full border-2 border-amber-200 border-t-amber-600 dark:border-amber-700 dark:border-t-amber-400 w-5 h-5\",\n error: () => \"animate-spin rounded-full border-2 border-red-200 border-t-red-600 dark:border-red-700 dark:border-t-red-400 w-5 h-5\"\n },\n // Loading state containers\n state: {\n default: () => \"flex flex-col items-center justify-center py-8 px-4\",\n fullScreen: () => \"flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900\",\n inline: () => \"inline-flex items-center gap-2\",\n center: () => \"flex items-center justify-center\"\n },\n // Loading buttons\n button: {\n default: () => \"inline-flex items-center gap-2 opacity-70 cursor-wait pointer-events-none\",\n primary: () => \"bg-blue-600 text-white hover:bg-blue-700 inline-flex items-center gap-2 opacity-70 cursor-wait pointer-events-none px-4 py-2 rounded-md text-sm font-medium\",\n secondary: () => \"bg-gray-100 text-gray-900 hover:bg-gray-200 inline-flex items-center gap-2 opacity-70 cursor-wait pointer-events-none px-4 py-2 rounded-md text-sm font-medium dark:bg-gray-800 dark:text-gray-50\"\n },\n // Skeleton loading\n skeleton: {\n default: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded\",\n text: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded h-4\",\n title: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded h-6\",\n avatar: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded-full w-10 h-10\",\n card: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg h-32\"\n },\n // Progress indicators\n progress: {\n bar: () => \"w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700\",\n fill: () => \"bg-blue-600 h-2 rounded-full transition-all duration-300\",\n indeterminate: () => \"w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700 overflow-hidden relative before:absolute before:inset-0 before:bg-blue-600 before:rounded-full before:animate-pulse\"\n },\n // Dots indicator\n dots: {\n default: () => \"flex space-x-1 justify-center items-center\",\n dot: () => \"w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse\",\n dotStaggered: (t = 0) => `w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse animation-delay-${t}`\n }\n },\n // Modal/Dialog variants\n modal: {\n // Overlay variants\n overlay: {\n default: () => \"fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4\",\n dark: () => \"fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4\",\n light: () => \"fixed inset-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-4\"\n },\n // Container variants\n container: {\n default: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden\",\n small: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-sm\",\n medium: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-md\",\n large: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-2xl\",\n extraLarge: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-4xl\",\n fullScreen: () => \"bg-white dark:bg-gray-800 shadow-xl border border-gray-200 dark:border-gray-700 w-full h-full overflow-hidden\"\n },\n // Header variants\n header: {\n default: () => \"px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between\",\n centered: () => \"px-6 py-4 border-b border-gray-200 dark:border-gray-700 text-center\",\n minimal: () => \"px-6 py-4 flex items-center justify-between\"\n },\n // Content variants\n content: {\n default: () => \"px-6 py-4 overflow-y-auto flex-1\",\n padded: () => \"px-6 py-6 overflow-y-auto flex-1\",\n compact: () => \"px-4 py-3 overflow-y-auto flex-1\",\n scrollable: () => \"px-6 py-4 overflow-y-auto flex-1 max-h-96\"\n },\n // Footer variants\n footer: {\n default: () => \"px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-3\",\n centered: () => \"px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-center gap-3\",\n spaceBetween: () => \"px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between\",\n minimal: () => \"px-6 py-4 flex items-center justify-end gap-3\"\n },\n // Close button variants\n close: {\n default: () => \"text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700\",\n subtle: () => \"text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200\",\n prominent: () => \"text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600\"\n },\n // Web3 specific modal variants\n web3: {\n wallet: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-md\",\n transaction: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-lg\",\n confirmation: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[90vh] overflow-hidden w-full max-w-sm\"\n },\n // Animation variants\n animation: {\n fadeIn: () => \"animate-in fade-in-0 duration-200\",\n slideIn: () => \"animate-in fade-in-0 zoom-in-95 duration-200\",\n slideUp: () => \"animate-in fade-in-0 slide-in-from-bottom-4 duration-200\",\n fadeOut: () => \"animate-out fade-out-0 duration-150\",\n slideOut: () => \"animate-out fade-out-0 zoom-out-95 duration-150\"\n }\n },\n // Navigation variants\n navigation: {\n // Breadcrumb variants\n breadcrumb: {\n container: () => \"flex items-center justify-between text-sm\",\n list: () => \"flex items-center space-x-1\",\n item: () => \"flex items-center\",\n separator: () => \"h-4 w-4 text-gray-400 dark:text-gray-500 mx-2 flex-shrink-0\",\n link: () => \"flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:rounded-sm\",\n current: () => \"flex items-center text-gray-900 dark:text-white font-medium\",\n home: () => \"h-4 w-4 mr-1 flex-shrink-0\"\n },\n // Tab variants\n tabs: {\n root: () => \"\",\n list: () => \"inline-flex h-10 items-center justify-center rounded-md bg-gray-100 dark:bg-gray-800 p-1 text-gray-500 dark:text-gray-400\",\n listUnderlined: () => \"flex border-b border-gray-200 dark:border-gray-700\",\n listPills: () => \"flex space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg p-1\",\n trigger: () => \"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-950 data-[state=active]:shadow-sm dark:ring-offset-gray-950 dark:focus-visible:ring-blue-400 dark:data-[state=active]:bg-gray-950 dark:data-[state=active]:text-gray-50\",\n triggerUnderlined: () => \"inline-flex items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 border-b-2 border-transparent hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-blue-600 focus:border-blue-600 dark:focus:text-blue-400 dark:focus:border-blue-400 data-[state=active]:text-blue-600 data-[state=active]:border-blue-600 dark:data-[state=active]:text-blue-400 dark:data-[state=active]:border-blue-400 transition-colors\",\n triggerPills: () => \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-white dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-100 transition-all\",\n content: () => \"mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:ring-offset-gray-950 dark:focus-visible:ring-blue-400\"\n },\n // Menu/Dropdown variants\n menu: {\n trigger: () => \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors\",\n content: () => \"z-50 min-w-[12rem] overflow-hidden rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-1 text-gray-900 dark:text-gray-100 shadow-lg\",\n item: () => \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none focus:bg-gray-100 focus:text-gray-900 dark:focus:bg-gray-700 dark:focus:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\",\n separator: () => \"-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-700\",\n label: () => \"px-2 py-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100\",\n shortcut: () => \"ml-auto text-xs tracking-widest text-gray-500 dark:text-gray-400\"\n },\n // Pagination variants\n pagination: {\n container: () => \"flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 sm:px-6\",\n info: () => \"flex flex-1 justify-between sm:hidden\",\n nav: () => \"hidden sm:flex sm:flex-1 sm:items-center sm:justify-between\",\n results: () => \"text-sm text-gray-700 dark:text-gray-300\",\n buttons: () => \"relative z-0 inline-flex rounded-md shadow-sm -space-x-px\",\n button: () => \"relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors\",\n buttonActive: () => \"relative inline-flex items-center px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-300 dark:border-blue-700 z-10\",\n buttonFirst: () => \"rounded-l-md\",\n buttonLast: () => \"rounded-r-md\",\n // Mobile variants\n mobileButton: () => \"relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors\"\n },\n // Sidebar/Menu navigation\n sidebar: {\n container: () => \"flex flex-col h-full bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700\",\n nav: () => \"flex-1 px-4 py-6 space-y-1\",\n item: () => \"group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 transition-colors\",\n itemActive: () => \"group flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-100 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-r-2 border-blue-500\",\n icon: () => \"mr-3 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400\",\n iconActive: () => \"mr-3 h-5 w-5 flex-shrink-0 text-blue-500 dark:text-blue-400\"\n },\n // Step navigation\n steps: {\n container: () => \"flex items-center justify-center\",\n list: () => \"flex items-center space-x-4\",\n step: () => \"flex items-center space-x-2\",\n circle: () => \"flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-sm font-medium\",\n circleActive: () => \"flex items-center justify-center w-8 h-8 rounded-full border-2 border-blue-600 dark:border-blue-400 bg-blue-600 dark:bg-blue-400 text-white text-sm font-medium\",\n circleCompleted: () => \"flex items-center justify-center w-8 h-8 rounded-full border-2 border-green-600 dark:border-green-400 bg-green-600 dark:bg-green-400 text-white text-sm font-medium\",\n label: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n labelInactive: () => \"text-sm font-medium text-gray-500 dark:text-gray-400\",\n connector: () => \"w-12 h-px bg-gray-300 dark:bg-gray-600\",\n connectorActive: () => \"w-12 h-px bg-blue-600 dark:bg-blue-400\"\n }\n },\n // Data Display variants\n dataDisplay: {\n // Table variants\n table: {\n container: () => \"w-full overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700\",\n wrapper: () => \"overflow-x-auto\",\n table: () => \"min-w-full divide-y divide-gray-200 dark:divide-gray-700\",\n thead: () => \"bg-gray-50 dark:bg-gray-800\",\n tbody: () => \"bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700\",\n tfoot: () => \"bg-gray-50 dark:bg-gray-800\",\n tr: () => \"hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors\",\n trSelected: () => \"bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30\",\n th: () => \"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider\",\n thSortable: () => \"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors\",\n td: () => \"px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100\",\n tdCompact: () => \"px-3 py-2 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100\"\n },\n // List variants\n list: {\n container: () => \"bg-white dark:bg-gray-900 shadow overflow-hidden rounded-lg\",\n ul: () => \"divide-y divide-gray-200 dark:divide-gray-700\",\n li: () => \"px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors\",\n liActive: () => \"px-4 py-4 sm:px-6 bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500\",\n // Email list specific\n emailItem: () => \"flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors\",\n emailItemRead: () => \"flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors opacity-60\",\n emailItemSelected: () => \"flex items-center px-4 py-3 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 cursor-pointer\"\n },\n // Grid variants\n grid: {\n container: () => \"grid gap-4\",\n twoColumn: () => \"grid grid-cols-1 md:grid-cols-2 gap-4\",\n threeColumn: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\",\n fourColumn: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\",\n autoFit: () => \"grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4\"\n },\n // Key-Value pairs\n keyValue: {\n container: () => \"bg-white dark:bg-gray-900 shadow overflow-hidden rounded-lg\",\n list: () => \"divide-y divide-gray-200 dark:divide-gray-700\",\n row: () => \"px-4 py-4 sm:px-6 sm:grid sm:grid-cols-3 sm:gap-4\",\n key: () => \"text-sm font-medium text-gray-500 dark:text-gray-400\",\n value: () => \"mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2\",\n // Inline variant\n inline: () => \"flex items-center space-x-2\",\n inlineKey: () => \"text-sm font-medium text-gray-500 dark:text-gray-400\",\n inlineValue: () => \"text-sm text-gray-900 dark:text-gray-100\"\n },\n // Code display\n code: {\n inline: () => \"font-mono text-sm text-pink-600 dark:text-pink-400 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded\",\n block: () => \"font-mono text-sm text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto\",\n // Web3 specific\n address: () => \"font-mono text-sm text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 px-2 py-1 rounded select-all\",\n hash: () => \"font-mono text-sm text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/20 px-2 py-1 rounded select-all\",\n // Syntax highlighting\n keyword: () => \"text-purple-600 dark:text-purple-400\",\n string: () => \"text-green-600 dark:text-green-400\",\n number: () => \"text-blue-600 dark:text-blue-400\",\n comment: () => \"text-gray-500 dark:text-gray-500 italic\"\n },\n // Stats/Metrics\n stats: {\n container: () => \"bg-white dark:bg-gray-900 overflow-hidden shadow rounded-lg\",\n grid: () => \"grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-gray-700\",\n item: () => \"px-4 py-5 sm:p-6\",\n label: () => \"text-sm font-medium text-gray-500 dark:text-gray-400 truncate\",\n value: () => \"mt-1 text-3xl font-semibold text-gray-900 dark:text-gray-100\",\n change: () => \"mt-2 flex items-center text-sm\",\n changePositive: () => \"text-green-600 dark:text-green-400\",\n changeNegative: () => \"text-red-600 dark:text-red-400\"\n },\n // Empty states\n empty: {\n container: () => \"text-center py-12\",\n icon: () => \"mx-auto h-12 w-12 text-gray-400\",\n title: () => \"mt-2 text-sm font-medium text-gray-900 dark:text-gray-100\",\n description: () => \"mt-1 text-sm text-gray-500 dark:text-gray-400\",\n action: () => \"mt-6\"\n },\n // Timeline\n timeline: {\n container: () => \"flow-root\",\n list: () => \"-mb-8\",\n item: () => \"relative pb-8\",\n itemLast: () => \"relative\",\n connector: () => \"absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-700\",\n dot: () => \"relative flex h-8 w-8 items-center justify-center rounded-full bg-white dark:bg-gray-800 ring-8 ring-white dark:ring-gray-900\",\n dotActive: () => \"bg-blue-600 dark:bg-blue-400\",\n dotComplete: () => \"bg-green-600 dark:bg-green-400\",\n content: () => \"ml-12 flex flex-col\",\n time: () => \"text-xs text-gray-500 dark:text-gray-400\",\n title: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n description: () => \"mt-1 text-sm text-gray-500 dark:text-gray-400\"\n }\n },\n // Forms Advanced variants\n formsAdvanced: {\n // Multi-step wizard\n wizard: {\n container: () => \"w-full\",\n steps: () => \"flex items-center justify-between mb-8\",\n step: () => \"flex flex-col items-center\",\n stepCircle: () => \"w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-all\",\n stepCompleted: () => \"bg-green-100 border-green-500 text-green-700 dark:bg-green-900/30 dark:border-green-400 dark:text-green-300\",\n stepCurrent: () => \"bg-blue-100 border-blue-500 text-blue-700 dark:bg-blue-900/30 dark:border-blue-400 dark:text-blue-300\",\n stepInactive: () => \"bg-gray-100 border-gray-300 text-gray-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400\",\n stepContent: () => \"mt-2 text-center\",\n stepTitle: () => \"text-sm font-medium\",\n stepDescription: () => \"text-xs text-gray-500 dark:text-gray-400 mt-1\",\n connector: () => \"flex-1 h-px bg-gray-200 dark:bg-gray-700 mt-5\",\n connectorCompleted: () => \"flex-1 h-px bg-green-300 dark:bg-green-600 mt-5\"\n },\n // File upload components\n fileUpload: {\n dropzone: () => \"border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center transition-colors hover:border-gray-400 dark:hover:border-gray-500 cursor-pointer\",\n dropzoneActive: () => \"border-blue-400 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-500\",\n dropzoneError: () => \"border-red-400 bg-red-50 dark:bg-red-900/20 dark:border-red-500\",\n icon: () => \"h-12 w-12 text-gray-400 mx-auto mb-4\",\n text: () => \"text-lg font-medium text-gray-900 dark:text-gray-100 mb-2\",\n subtext: () => \"text-sm text-gray-500 dark:text-gray-400 mb-4\",\n button: () => \"inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors\",\n input: () => \"sr-only\",\n fileList: () => \"mt-6 space-y-2\",\n fileItem: () => \"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg\",\n fileIcon: () => \"w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center mr-3\",\n fileName: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n fileSize: () => \"text-xs text-gray-500 dark:text-gray-400\",\n removeButton: () => \"p-1 text-gray-400 hover:text-red-500 transition-colors\"\n },\n // Web3 specific inputs\n web3: {\n container: () => \"space-y-2\",\n label: () => \"text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center\",\n labelIcon: () => \"h-4 w-4 inline mr-1\",\n inputGroup: () => \"flex rounded-md shadow-sm\",\n tokenInput: () => \"rounded-r-none font-mono\",\n tokenSymbol: () => \"inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-sm font-medium\",\n balance: () => \"text-sm text-gray-500 dark:text-gray-400\",\n balanceActions: () => \"flex space-x-2\",\n maxButton: () => \"text-xs\",\n addressInput: () => \"font-mono text-sm\",\n addressValid: () => \"border-green-300 dark:border-green-600 pr-10\",\n addressInvalid: () => \"border-red-300 dark:border-red-600 pr-10\",\n gasSettings: () => \"grid grid-cols-3 gap-2\",\n gasOption: () => \"p-2 text-center border rounded-md transition-colors cursor-pointer\",\n gasOptionActive: () => \"border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-900/20\",\n gasOptionInactive: () => \"border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500\"\n },\n // Advanced validation\n validation: {\n container: () => \"space-y-1\",\n label: () => \"text-sm font-medium text-gray-700 dark:text-gray-300\",\n input: () => \"block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100\",\n inputSuccess: () => \"border-green-300 dark:border-green-600 focus:border-green-500 focus:ring-green-500 pr-10\",\n inputError: () => \"border-red-300 dark:border-red-600 focus:border-red-500 focus:ring-red-500 pr-10\",\n inputWarning: () => \"border-yellow-300 dark:border-yellow-600 focus:border-yellow-500 focus:ring-yellow-500 pr-10\",\n successIcon: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-green-500\",\n errorIcon: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-red-500\",\n warningIcon: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-yellow-500\",\n loadingIcon: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-blue-600\",\n successMessage: () => \"text-xs text-green-600 dark:text-green-400\",\n errorMessage: () => \"text-xs text-red-600 dark:text-red-400\",\n warningMessage: () => \"text-xs text-yellow-600 dark:text-yellow-400\",\n helpMessage: () => \"text-xs text-gray-500 dark:text-gray-400\",\n requirements: () => \"space-y-1 mt-2\",\n requirement: () => \"flex items-center text-xs\",\n requirementMet: () => \"text-green-600 dark:text-green-400\",\n requirementUnmet: () => \"text-gray-500 dark:text-gray-400\",\n requirementIcon: () => \"h-3 w-3 mr-1\"\n },\n // Form sections and layouts\n layout: {\n section: () => \"space-y-6\",\n sectionTitle: () => \"text-lg font-medium text-gray-900 dark:text-gray-100\",\n sectionDescription: () => \"text-sm text-gray-500 dark:text-gray-400\",\n fieldGroup: () => \"space-y-4\",\n fieldRow: () => \"grid grid-cols-1 md:grid-cols-2 gap-4\",\n fieldColumn: () => \"space-y-4\",\n actions: () => \"flex justify-between pt-6 border-t border-gray-200 dark:border-gray-700\",\n actionsRight: () => \"flex justify-end space-x-4 pt-6 border-t border-gray-200 dark:border-gray-700\",\n actionsCenter: () => \"flex justify-center space-x-4 pt-6 border-t border-gray-200 dark:border-gray-700\"\n },\n // Security and sensitive inputs\n security: {\n container: () => \"relative\",\n input: () => \"font-mono\",\n toggleButton: () => \"absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200\",\n strengthMeter: () => \"mt-2 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden\",\n strengthBar: () => \"h-full transition-all duration-300\",\n strengthWeak: () => \"bg-red-500 w-1/4\",\n strengthMedium: () => \"bg-yellow-500 w-1/2\",\n strengthStrong: () => \"bg-green-500 w-3/4\",\n strengthVeryStrong: () => \"bg-green-600 w-full\"\n },\n // Conditional fields and dynamic forms\n conditional: {\n container: () => \"space-y-4\",\n trigger: () => \"flex items-center space-x-2\",\n content: () => \"ml-6 mt-4 pl-4 border-l-2 border-gray-200 dark:border-gray-700 space-y-4\",\n contentVisible: () => \"opacity-100 max-h-none\",\n contentHidden: () => \"opacity-0 max-h-0 overflow-hidden\"\n }\n },\n // Notifications & Feedback variants\n notifications: {\n // Toast notifications\n toast: {\n container: () => \"fixed top-4 right-4 z-50 max-w-sm w-full transform transition-all duration-300 ease-out\",\n content: () => \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4\",\n // Toast with icon and content\n wrapper: () => \"flex items-start space-x-3\",\n icon: () => \"flex-shrink-0 mt-0.5\",\n successIcon: () => \"h-5 w-5 text-green-500\",\n errorIcon: () => \"h-5 w-5 text-red-500\",\n warningIcon: () => \"h-5 w-5 text-yellow-500\",\n infoIcon: () => \"h-5 w-5 text-blue-500\",\n text: () => \"flex-1 min-w-0\",\n title: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n message: () => \"mt-1 text-sm text-gray-500 dark:text-gray-400\",\n action: () => \"mt-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 cursor-pointer\",\n closeButton: () => \"ml-4 flex-shrink-0 text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 cursor-pointer\",\n // Toast variants by type\n success: () => \"border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20\",\n error: () => \"border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20\",\n warning: () => \"border-yellow-200 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/20\",\n info: () => \"border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20\"\n },\n // Progress indicators\n progress: {\n container: () => \"w-full\",\n content: () => \"flex items-center justify-between mb-2\",\n text: () => \"flex-1 min-w-0 mr-4\",\n title: () => \"text-sm font-medium text-gray-700 dark:text-gray-300\",\n message: () => \"text-xs text-gray-500 dark:text-gray-400 mt-1\",\n // Progress bar\n bar: () => \"w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden\",\n fill: () => \"h-full bg-blue-600 rounded-full transition-all duration-300\",\n fillSuccess: () => \"h-full bg-green-600 rounded-full transition-all duration-300\",\n fillError: () => \"h-full bg-red-600 rounded-full transition-all duration-300\",\n fillWarning: () => \"h-full bg-yellow-600 rounded-full transition-all duration-300\",\n percentage: () => \"text-sm text-gray-500 dark:text-gray-400 ml-2 flex-shrink-0\",\n // Circular progress\n circle: () => \"relative w-8 h-8\",\n circleTrack: () => \"absolute inset-0 rounded-full border-2 border-gray-200 dark:border-gray-700\",\n circleFill: () => \"absolute inset-0 rounded-full border-2 border-transparent transition-all duration-300\",\n // Loading spinners\n spinner: () => \"animate-spin rounded-full border-2 border-transparent\",\n spinnerPrimary: () => \"border-t-blue-600 border-r-blue-600\",\n spinnerSuccess: () => \"border-t-green-600 border-r-green-600\",\n spinnerError: () => \"border-t-red-600 border-r-red-600\",\n spinnerWarning: () => \"border-t-yellow-600 border-r-yellow-600\"\n },\n // Transaction status\n transaction: {\n container: () => \"border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800\",\n wrapper: () => \"flex items-start space-x-3\",\n icon: () => \"w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0\",\n iconPending: () => \"bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400\",\n iconConfirming: () => \"bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400\",\n iconConfirmed: () => \"bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400\",\n iconFailed: () => \"bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400\",\n content: () => \"flex-1 min-w-0\",\n header: () => \"flex items-center justify-between mb-1\",\n type: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n status: () => \"px-2 py-1 text-xs rounded-full font-medium\",\n statusPending: () => \"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300\",\n statusConfirming: () => \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300\",\n statusConfirmed: () => \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300\",\n statusFailed: () => \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300\",\n details: () => \"text-xs text-gray-500 dark:text-gray-400 mt-1\",\n hash: () => \"font-mono text-xs text-gray-500 dark:text-gray-400\",\n amount: () => \"text-sm text-gray-600 dark:text-gray-400 ml-2\",\n confirmations: () => \"mt-2 text-xs text-gray-500 dark:text-gray-400\",\n confirmationBar: () => \"w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mt-1\",\n confirmationProgress: () => \"h-1.5 bg-blue-600 rounded-full transition-all duration-300\"\n },\n // System status indicators\n status: {\n indicator: () => \"flex items-center space-x-2\",\n dot: () => \"w-3 h-3 rounded-full flex-shrink-0\",\n text: () => \"text-sm font-medium\",\n // Status variants\n online: () => \"text-green-700 dark:text-green-300\",\n onlineDot: () => \"bg-green-500\",\n degraded: () => \"text-yellow-700 dark:text-yellow-300\",\n degradedDot: () => \"bg-yellow-500\",\n offline: () => \"text-red-700 dark:text-red-300\",\n offlineDot: () => \"bg-red-500\",\n // Animated indicators\n pulse: () => \"animate-pulse\",\n // Connection status\n connection: () => \"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg\",\n connectionLabel: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n connectionDescription: () => \"text-xs text-gray-500 dark:text-gray-400\",\n connectionStatus: () => \"px-2 py-1 text-xs rounded-full font-medium\"\n },\n // Notification badges\n badge: {\n container: () => \"relative inline-block\",\n badge: () => \"absolute -top-1 -right-1 text-white text-xs rounded-full flex items-center justify-center font-medium\",\n // Size variants\n small: () => \"h-3 w-3 text-xs\",\n medium: () => \"h-4 w-4 text-xs\",\n large: () => \"h-5 w-5 text-xs\",\n // Color variants\n primary: () => \"bg-blue-500\",\n success: () => \"bg-green-500\",\n error: () => \"bg-red-500\",\n warning: () => \"bg-yellow-500\",\n // Special states\n dot: () => \"w-2 h-2 rounded-full animate-pulse\",\n count: () => \"min-w-[1rem] px-1\",\n countOverflow: () => \"min-w-[1.25rem] px-1\"\n // for 99+\n },\n // Contextual feedback\n feedback: {\n container: () => \"p-3 rounded-lg border\",\n content: () => \"flex items-start\",\n icon: () => \"flex-shrink-0 mr-2 mt-0.5\",\n text: () => \"flex-1 min-w-0\",\n title: () => \"text-sm font-medium\",\n message: () => \"text-sm mt-1\",\n action: () => \"ml-auto flex-shrink-0\",\n // Feedback variants\n success: () => \"bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800\",\n successIcon: () => \"h-4 w-4 text-green-600 dark:text-green-400\",\n successTitle: () => \"text-green-800 dark:text-green-200\",\n successMessage: () => \"text-green-700 dark:text-green-300\",\n error: () => \"bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800\",\n errorIcon: () => \"h-4 w-4 text-red-600 dark:text-red-400\",\n errorTitle: () => \"text-red-800 dark:text-red-200\",\n errorMessage: () => \"text-red-700 dark:text-red-300\",\n warning: () => \"bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800\",\n warningIcon: () => \"h-4 w-4 text-yellow-600 dark:text-yellow-400\",\n warningTitle: () => \"text-yellow-800 dark:text-yellow-200\",\n warningMessage: () => \"text-yellow-700 dark:text-yellow-300\",\n info: () => \"bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800\",\n infoIcon: () => \"h-4 w-4 text-blue-600 dark:text-blue-400\",\n infoTitle: () => \"text-blue-800 dark:text-blue-200\",\n infoMessage: () => \"text-blue-700 dark:text-blue-300\",\n neutral: () => \"bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700\",\n neutralIcon: () => \"h-4 w-4 text-gray-600 dark:text-gray-400\",\n neutralTitle: () => \"text-gray-900 dark:text-gray-100\",\n neutralMessage: () => \"text-gray-600 dark:text-gray-400\"\n },\n // Alert banners (different from alerts component)\n banner: {\n container: () => \"border-l-4 p-4\",\n content: () => \"flex items-center justify-between\",\n text: () => \"flex items-center\",\n icon: () => \"flex-shrink-0 mr-3\",\n message: () => \"text-sm font-medium\",\n action: () => \"flex-shrink-0 ml-4\",\n closeButton: () => \"text-gray-400 hover:text-gray-500 dark:hover:text-gray-300\",\n // Banner variants\n success: () => \"bg-green-50 dark:bg-green-900/20 border-green-400\",\n error: () => \"bg-red-50 dark:bg-red-900/20 border-red-400\",\n warning: () => \"bg-yellow-50 dark:bg-yellow-900/20 border-yellow-400\",\n info: () => \"bg-blue-50 dark:bg-blue-900/20 border-blue-400\"\n },\n // Loading states\n loading: {\n overlay: () => \"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\",\n container: () => \"bg-white dark:bg-gray-800 rounded-lg p-6 max-w-sm mx-4\",\n content: () => \"text-center\",\n spinner: () => \"mx-auto mb-4\",\n title: () => \"text-lg font-medium text-gray-900 dark:text-gray-100 mb-2\",\n message: () => \"text-sm text-gray-500 dark:text-gray-400\",\n // Inline loading\n inline: () => \"flex items-center space-x-2\",\n inlineSpinner: () => \"flex-shrink-0\",\n inlineText: () => \"text-sm text-gray-600 dark:text-gray-400\"\n }\n },\n // Layout & Spacing variants\n layout: {\n // Container variants\n container: {\n narrow: () => \"max-w-2xl mx-auto px-4 sm:px-6\",\n default: () => \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\",\n wide: () => \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\",\n full: () => \"w-full px-4 sm:px-6 lg:px-8\",\n fluid: () => \"w-full\"\n },\n // Grid layouts\n grid: {\n // Responsive columns\n responsive: {\n oneToTwo: () => \"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6\",\n oneToThree: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6\",\n oneToFour: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6\",\n twoToFour: () => \"grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6\",\n threeToSix: () => \"grid grid-cols-3 md:grid-cols-6 gap-4 md:gap-6\"\n },\n // Fixed columns with responsive gaps\n fixed: {\n one: () => \"grid grid-cols-1 gap-4 md:gap-6\",\n two: () => \"grid grid-cols-2 gap-4 md:gap-6\",\n three: () => \"grid grid-cols-3 gap-4 md:gap-6\",\n four: () => \"grid grid-cols-4 gap-4 md:gap-6\",\n five: () => \"grid grid-cols-5 gap-4 md:gap-6\",\n six: () => \"grid grid-cols-6 gap-4 md:gap-6\"\n },\n // Auto-fit patterns\n autoFit: {\n small: () => \"grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 md:gap-6\",\n medium: () => \"grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 md:gap-6\",\n large: () => \"grid grid-cols-[repeat(auto-fit,minmax(400px,1fr))] gap-4 md:gap-6\"\n },\n // Dashboard layouts\n dashboard: {\n sidebar: () => \"grid grid-cols-1 lg:grid-cols-4 gap-6\",\n sidebarContent: () => \"lg:col-span-3\",\n sidebarAside: () => \"lg:col-span-1\",\n twoColumn: () => \"grid grid-cols-1 lg:grid-cols-2 gap-6\",\n threeColumn: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\",\n // Masonry-style layouts\n masonry: () => \"columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6\",\n masonryItem: () => \"break-inside-avoid mb-6\"\n }\n },\n // Flexbox patterns\n flex: {\n // Basic layouts\n row: () => \"flex flex-row\",\n column: () => \"flex flex-col\",\n rowReverse: () => \"flex flex-row-reverse\",\n columnReverse: () => \"flex flex-col-reverse\",\n // Common patterns\n center: () => \"flex items-center justify-center\",\n centerVertical: () => \"flex items-center\",\n centerHorizontal: () => \"flex justify-center\",\n spaceBetween: () => \"flex items-center justify-between\",\n spaceAround: () => \"flex items-center justify-around\",\n spaceEvenly: () => \"flex items-center justify-evenly\",\n // Responsive flex direction\n responsiveColumn: () => \"flex flex-col md:flex-row\",\n responsiveRow: () => \"flex flex-row md:flex-col\",\n // Common component layouts\n header: () => \"flex items-center justify-between w-full\",\n toolbar: () => \"flex items-center space-x-2\",\n buttonGroup: () => \"flex items-center space-x-2\",\n iconText: () => \"flex items-center space-x-2\",\n // List layouts\n listItem: () => \"flex items-start space-x-3\",\n listItemCenter: () => \"flex items-center space-x-3\",\n listItemEnd: () => \"flex items-end space-x-3\",\n // Card content layouts\n cardContent: () => \"flex flex-col space-y-4\",\n cardActions: () => \"flex items-center justify-end space-x-2 pt-4\",\n cardHeader: () => \"flex items-start justify-between\",\n // Form layouts\n formRow: () => \"flex flex-col sm:flex-row sm:items-center sm:space-x-4 space-y-2 sm:space-y-0\",\n formActions: () => \"flex flex-col sm:flex-row-reverse sm:justify-start space-y-2 sm:space-y-0 sm:space-x-2 sm:space-x-reverse\",\n // Wrap variants\n wrap: () => \"flex flex-wrap\",\n nowrap: () => \"flex flex-nowrap\",\n wrapReverse: () => \"flex flex-wrap-reverse\",\n // Gap utilities (for flex layouts)\n gapSm: () => \"gap-2\",\n gapMd: () => \"gap-4\",\n gapLg: () => \"gap-6\",\n gapXl: () => \"gap-8\"\n },\n // Spacing utilities\n spacing: {\n // Margin utilities\n margin: {\n none: () => \"m-0\",\n xs: () => \"m-1\",\n sm: () => \"m-2\",\n md: () => \"m-4\",\n lg: () => \"m-6\",\n xl: () => \"m-8\",\n xxl: () => \"m-12\",\n // Directional margins\n top: {\n none: () => \"mt-0\",\n xs: () => \"mt-1\",\n sm: () => \"mt-2\",\n md: () => \"mt-4\",\n lg: () => \"mt-6\",\n xl: () => \"mt-8\",\n xxl: () => \"mt-12\"\n },\n bottom: {\n none: () => \"mb-0\",\n xs: () => \"mb-1\",\n sm: () => \"mb-2\",\n md: () => \"mb-4\",\n lg: () => \"mb-6\",\n xl: () => \"mb-8\",\n xxl: () => \"mb-12\"\n },\n left: {\n none: () => \"ml-0\",\n xs: () => \"ml-1\",\n sm: () => \"ml-2\",\n md: () => \"ml-4\",\n lg: () => \"ml-6\",\n xl: () => \"ml-8\",\n xxl: () => \"ml-12\"\n },\n right: {\n none: () => \"mr-0\",\n xs: () => \"mr-1\",\n sm: () => \"mr-2\",\n md: () => \"mr-4\",\n lg: () => \"mr-6\",\n xl: () => \"mr-8\",\n xxl: () => \"mr-12\"\n },\n horizontal: {\n none: () => \"mx-0\",\n xs: () => \"mx-1\",\n sm: () => \"mx-2\",\n md: () => \"mx-4\",\n lg: () => \"mx-6\",\n xl: () => \"mx-8\",\n xxl: () => \"mx-12\",\n auto: () => \"mx-auto\"\n },\n vertical: {\n none: () => \"my-0\",\n xs: () => \"my-1\",\n sm: () => \"my-2\",\n md: () => \"my-4\",\n lg: () => \"my-6\",\n xl: () => \"my-8\",\n xxl: () => \"my-12\"\n }\n },\n // Padding utilities\n padding: {\n none: () => \"p-0\",\n xs: () => \"p-1\",\n sm: () => \"p-2\",\n md: () => \"p-4\",\n lg: () => \"p-6\",\n xl: () => \"p-8\",\n xxl: () => \"p-12\",\n // Directional padding\n top: {\n none: () => \"pt-0\",\n xs: () => \"pt-1\",\n sm: () => \"pt-2\",\n md: () => \"pt-4\",\n lg: () => \"pt-6\",\n xl: () => \"pt-8\",\n xxl: () => \"pt-12\"\n },\n bottom: {\n none: () => \"pb-0\",\n xs: () => \"pb-1\",\n sm: () => \"pb-2\",\n md: () => \"pb-4\",\n lg: () => \"pb-6\",\n xl: () => \"pb-8\",\n xxl: () => \"pb-12\"\n },\n left: {\n none: () => \"pl-0\",\n xs: () => \"pl-1\",\n sm: () => \"pl-2\",\n md: () => \"pl-4\",\n lg: () => \"pl-6\",\n xl: () => \"pl-8\",\n xxl: () => \"pl-12\"\n },\n right: {\n none: () => \"pr-0\",\n xs: () => \"pr-1\",\n sm: () => \"pr-2\",\n md: () => \"pr-4\",\n lg: () => \"pr-6\",\n xl: () => \"pr-8\",\n xxl: () => \"pr-12\"\n },\n horizontal: {\n none: () => \"px-0\",\n xs: () => \"px-1\",\n sm: () => \"px-2\",\n md: () => \"px-4\",\n lg: () => \"px-6\",\n xl: () => \"px-8\",\n xxl: () => \"px-12\"\n },\n vertical: {\n none: () => \"py-0\",\n xs: () => \"py-1\",\n sm: () => \"py-2\",\n md: () => \"py-4\",\n lg: () => \"py-6\",\n xl: () => \"py-8\",\n xxl: () => \"py-12\"\n }\n },\n // Common spacing combinations\n section: () => \"py-12 md:py-16 lg:py-20\",\n subsection: () => \"py-8 md:py-12\",\n cardSpacing: () => \"p-6 md:p-8\",\n listSpacing: () => \"space-y-4\",\n buttonSpacing: () => \"space-x-2\"\n },\n // Web3-specific layouts\n web3: {\n // Wallet interface layouts\n wallet: {\n connect: () => \"flex flex-col items-center space-y-4 p-6\",\n connected: () => \"flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg\",\n balance: () => \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\",\n portfolio: () => \"grid grid-cols-1 lg:grid-cols-3 gap-6\"\n },\n // Transaction layouts\n transaction: {\n form: () => \"space-y-6\",\n preview: () => \"bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-3\",\n history: () => \"space-y-2\",\n historyItem: () => \"flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700\",\n details: () => \"grid grid-cols-1 md:grid-cols-2 gap-4\"\n },\n // NFT layouts\n nft: {\n gallery: () => \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6\",\n card: () => \"bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden\",\n cardContent: () => \"p-4 space-y-3\",\n cardActions: () => \"flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700\",\n // Collection view\n collection: () => \"grid grid-cols-1 lg:grid-cols-4 gap-6\",\n collectionSidebar: () => \"lg:col-span-1 space-y-6\",\n collectionGrid: () => \"lg:col-span-3\"\n },\n // DeFi layouts\n defi: {\n dashboard: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\",\n pool: () => \"bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6\",\n poolStats: () => \"grid grid-cols-2 md:grid-cols-4 gap-4\",\n liquidity: () => \"space-y-4\",\n farming: () => \"grid grid-cols-1 lg:grid-cols-2 gap-6\"\n },\n // DAO layouts\n dao: {\n governance: () => \"grid grid-cols-1 lg:grid-cols-3 gap-6\",\n proposal: () => \"bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6\",\n proposalHeader: () => \"flex items-start justify-between mb-6\",\n proposalContent: () => \"space-y-6\",\n voting: () => \"grid grid-cols-1 md:grid-cols-2 gap-4\"\n }\n },\n // Positioning utilities\n position: {\n relative: () => \"relative\",\n absolute: () => \"absolute\",\n fixed: () => \"fixed\",\n sticky: () => \"sticky\",\n // Common absolute positions\n topLeft: () => \"absolute top-0 left-0\",\n topRight: () => \"absolute top-0 right-0\",\n bottomLeft: () => \"absolute bottom-0 left-0\",\n bottomRight: () => \"absolute bottom-0 right-0\",\n center: () => \"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\",\n // Overlay positions\n overlay: () => \"fixed inset-0 z-50\",\n backdrop: () => \"fixed inset-0 bg-black bg-opacity-50 z-40\"\n },\n // Overflow utilities\n overflow: {\n hidden: () => \"overflow-hidden\",\n auto: () => \"overflow-auto\",\n scroll: () => \"overflow-scroll\",\n xHidden: () => \"overflow-x-hidden\",\n yHidden: () => \"overflow-y-hidden\",\n xAuto: () => \"overflow-x-auto\",\n yAuto: () => \"overflow-y-auto\",\n xScroll: () => \"overflow-x-scroll\",\n yScroll: () => \"overflow-y-scroll\"\n },\n // Z-index utilities\n zIndex: {\n base: () => \"z-0\",\n dropdown: () => \"z-10\",\n sticky: () => \"z-20\",\n modal: () => \"z-50\",\n popover: () => \"z-60\",\n tooltip: () => \"z-70\"\n },\n // Display utilities\n display: {\n block: () => \"block\",\n inline: () => \"inline\",\n inlineBlock: () => \"inline-block\",\n flex: () => \"flex\",\n inlineFlex: () => \"inline-flex\",\n grid: () => \"grid\",\n inlineGrid: () => \"inline-grid\",\n hidden: () => \"hidden\",\n // Responsive display\n hiddenMobile: () => \"hidden sm:block\",\n hiddenTablet: () => \"hidden md:block\",\n hiddenDesktop: () => \"block md:hidden\",\n mobileOnly: () => \"block sm:hidden\",\n tabletOnly: () => \"hidden sm:block md:hidden\",\n desktopOnly: () => \"hidden md:block\"\n },\n // Common layout patterns\n patterns: {\n // Page layouts\n fullHeight: () => \"min-h-screen flex flex-col\",\n centeredPage: () => \"min-h-screen flex items-center justify-center\",\n // Header patterns\n header: () => \"sticky top-0 z-40 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700\",\n headerContent: () => \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\",\n // Sidebar patterns\n sidebarLayout: () => \"flex h-screen bg-gray-100 dark:bg-gray-900\",\n sidebar: () => \"w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700\",\n mainContent: () => \"flex-1 flex flex-col overflow-hidden\",\n // Modal patterns\n modalOverlay: () => \"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\",\n modalContent: () => \"bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden\",\n // Card patterns\n cardGrid: () => \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\",\n cardStack: () => \"space-y-6\",\n // List patterns\n dividedList: () => \"divide-y divide-gray-200 dark:divide-gray-700\",\n spacedList: () => \"space-y-4\",\n // Form patterns\n formStack: () => \"space-y-6\",\n formGrid: () => \"grid grid-cols-1 md:grid-cols-2 gap-6\",\n fieldset: () => \"space-y-4\",\n // Loading patterns\n loadingOverlay: () => \"absolute inset-0 bg-white bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center\",\n loadingInline: () => \"flex items-center space-x-2\",\n // Empty state patterns\n emptyState: () => \"text-center py-12\",\n emptyStateIcon: () => \"mx-auto h-12 w-12 text-gray-400 mb-4\"\n }\n },\n // Table variants\n table: {\n container: () => \"overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800\",\n table: () => \"min-w-full divide-y divide-gray-200 dark:divide-gray-700\",\n header: {\n row: () => \"bg-gray-50 dark:bg-gray-900/50\",\n cell: () => \"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider\",\n sortable: () => \"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 select-none group\"\n },\n body: {\n row: () => \"bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200\",\n rowSelected: () => \"bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200\",\n rowClickable: () => \"bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200 cursor-pointer\",\n cell: () => \"px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100\",\n cellMuted: () => \"px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400\",\n cellAction: () => \"px-6 py-4 whitespace-nowrap text-right text-sm font-medium\"\n },\n // Compact table variants\n compact: {\n header: {\n cell: () => \"px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider\",\n sortable: () => \"px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 select-none group\"\n },\n body: {\n cell: () => \"px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100\",\n cellMuted: () => \"px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400\",\n cellAction: () => \"px-4 py-3 whitespace-nowrap text-right text-sm font-medium\"\n }\n },\n // Table states\n states: {\n loading: () => \"opacity-50 pointer-events-none\",\n empty: () => \"text-center py-12 text-gray-500 dark:text-gray-400\",\n error: () => \"text-center py-12 text-red-500 dark:text-red-400\"\n },\n // Pagination styles\n pagination: {\n container: () => \"bg-white dark:bg-gray-800 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6\",\n info: () => \"flex-1 flex justify-between sm:hidden text-sm text-gray-700 dark:text-gray-300\",\n nav: () => \"hidden sm:flex-1 sm:flex sm:items-center sm:justify-between\",\n button: () => \"relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200\",\n buttonCurrent: () => \"relative inline-flex items-center px-4 py-2 border border-blue-500 dark:border-blue-400 text-sm font-medium rounded-md text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200\"\n },\n // Data grid specific variants\n grid: {\n container: () => \"overflow-auto rounded-lg border border-gray-200 dark:border-gray-700\",\n table: () => \"min-w-full table-fixed\",\n resizeHandle: () => \"absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-blue-500 dark:hover:bg-blue-400 transition-colors duration-200\",\n filterContainer: () => \"border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 p-3\",\n filterInput: () => \"block w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 focus:outline-none focus:ring-2\"\n },\n // Sorting indicators\n sort: {\n indicator: () => \"ml-2 h-4 w-4 flex-none rounded text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300\",\n ascending: () => \"ml-2 h-4 w-4 flex-none rounded text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300 transform rotate-0\",\n descending: () => \"ml-2 h-4 w-4 flex-none rounded text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300 transform rotate-180\"\n }\n },\n // Icon variants\n icon: {\n // Size variants\n size: {\n xs: () => \"h-3 w-3\",\n sm: () => \"h-4 w-4\",\n md: () => \"h-5 w-5\",\n lg: () => \"h-6 w-6\",\n xl: () => \"h-8 w-8\",\n xxl: () => \"h-10 w-10\",\n xxxl: () => \"h-12 w-12\"\n },\n // Color variants\n color: {\n // Neutral colors\n default: () => \"text-gray-500 dark:text-gray-400\",\n muted: () => \"text-gray-400 dark:text-gray-500\",\n subtle: () => \"text-gray-300 dark:text-gray-600\",\n primary: () => \"text-gray-900 dark:text-gray-100\",\n // Brand colors\n brand: () => \"text-blue-600 dark:text-blue-400\",\n brandMuted: () => \"text-blue-500 dark:text-blue-500\",\n // Semantic colors\n success: () => \"text-green-600 dark:text-green-400\",\n warning: () => \"text-amber-600 dark:text-amber-400\",\n error: () => \"text-red-600 dark:text-red-400\",\n info: () => \"text-blue-600 dark:text-blue-400\",\n // Interactive colors\n interactive: () => \"text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200\",\n interactiveSubtle: () => \"text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200\",\n // Web3 specific colors\n ethereum: () => \"text-blue-600 dark:text-blue-400\",\n solana: () => \"text-purple-600 dark:text-purple-400\",\n bitcoin: () => \"text-orange-600 dark:text-orange-400\"\n },\n // Combined size and color variants\n variant: {\n // Default variants (most common combinations)\n default: {\n xs: () => \"h-3 w-3 text-gray-500 dark:text-gray-400\",\n sm: () => \"h-4 w-4 text-gray-500 dark:text-gray-400\",\n md: () => \"h-5 w-5 text-gray-500 dark:text-gray-400\",\n lg: () => \"h-6 w-6 text-gray-500 dark:text-gray-400\",\n xl: () => \"h-8 w-8 text-gray-500 dark:text-gray-400\"\n },\n // Interactive variants\n interactive: {\n xs: () => \"h-3 w-3 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\",\n sm: () => \"h-4 w-4 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\",\n md: () => \"h-5 w-5 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\",\n lg: () => \"h-6 w-6 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\",\n xl: () => \"h-8 w-8 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer\"\n },\n // Success variants\n success: {\n xs: () => \"h-3 w-3 text-green-600 dark:text-green-400\",\n sm: () => \"h-4 w-4 text-green-600 dark:text-green-400\",\n md: () => \"h-5 w-5 text-green-600 dark:text-green-400\",\n lg: () => \"h-6 w-6 text-green-600 dark:text-green-400\",\n xl: () => \"h-8 w-8 text-green-600 dark:text-green-400\"\n },\n // Warning variants\n warning: {\n xs: () => \"h-3 w-3 text-amber-600 dark:text-amber-400\",\n sm: () => \"h-4 w-4 text-amber-600 dark:text-amber-400\",\n md: () => \"h-5 w-5 text-amber-600 dark:text-amber-400\",\n lg: () => \"h-6 w-6 text-amber-600 dark:text-amber-400\",\n xl: () => \"h-8 w-8 text-amber-600 dark:text-amber-400\"\n },\n // Error variants\n error: {\n xs: () => \"h-3 w-3 text-red-600 dark:text-red-400\",\n sm: () => \"h-4 w-4 text-red-600 dark:text-red-400\",\n md: () => \"h-5 w-5 text-red-600 dark:text-red-400\",\n lg: () => \"h-6 w-6 text-red-600 dark:text-red-400\",\n xl: () => \"h-8 w-8 text-red-600 dark:text-red-400\"\n },\n // Muted variants\n muted: {\n xs: () => \"h-3 w-3 text-gray-400 dark:text-gray-500\",\n sm: () => \"h-4 w-4 text-gray-400 dark:text-gray-500\",\n md: () => \"h-5 w-5 text-gray-400 dark:text-gray-500\",\n lg: () => \"h-6 w-6 text-gray-400 dark:text-gray-500\",\n xl: () => \"h-8 w-8 text-gray-400 dark:text-gray-500\"\n }\n },\n // Context-specific icon patterns\n context: {\n // Button icons\n button: {\n leading: () => \"h-4 w-4 mr-2 flex-shrink-0\",\n trailing: () => \"h-4 w-4 ml-2 flex-shrink-0\",\n only: () => \"h-4 w-4\",\n small: () => \"h-3 w-3\",\n large: () => \"h-5 w-5\"\n },\n // Input icons\n input: {\n leading: () => \"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none\",\n trailing: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\",\n interactive: () => \"absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 hover:text-gray-600 cursor-pointer transition-colors duration-200\"\n },\n // Navigation icons\n navigation: {\n menu: () => \"h-5 w-5 text-gray-600 dark:text-gray-400\",\n menuActive: () => \"h-5 w-5 text-blue-600 dark:text-blue-400\",\n breadcrumb: () => \"h-4 w-4 text-gray-400 mx-2\",\n tab: () => \"h-4 w-4 mr-2\"\n },\n // Status icons\n status: {\n success: () => \"h-5 w-5 text-green-500 flex-shrink-0\",\n warning: () => \"h-5 w-5 text-amber-500 flex-shrink-0\",\n error: () => \"h-5 w-5 text-red-500 flex-shrink-0\",\n info: () => \"h-5 w-5 text-blue-500 flex-shrink-0\",\n loading: () => \"h-5 w-5 text-gray-400 animate-spin flex-shrink-0\"\n },\n // Avatar/Profile icons\n avatar: {\n small: () => \"h-6 w-6 text-gray-400\",\n medium: () => \"h-8 w-8 text-gray-400\",\n large: () => \"h-10 w-10 text-gray-400\",\n fallback: () => \"h-full w-full text-gray-300\"\n },\n // Web3 context icons\n web3: {\n wallet: () => \"h-5 w-5 text-gray-600 dark:text-gray-400\",\n walletConnected: () => \"h-5 w-5 text-green-600 dark:text-green-400\",\n walletDisconnected: () => \"h-5 w-5 text-gray-400 dark:text-gray-500\",\n transaction: () => \"h-4 w-4 text-blue-600 dark:text-blue-400\",\n blockchain: {\n ethereum: () => \"h-5 w-5 text-blue-600 dark:text-blue-400\",\n solana: () => \"h-5 w-5 text-purple-600 dark:text-purple-400\",\n bitcoin: () => \"h-5 w-5 text-orange-600 dark:text-orange-400\"\n }\n },\n // Card and content icons\n card: {\n header: () => \"h-5 w-5 text-gray-600 dark:text-gray-400 mr-2\",\n action: () => \"h-4 w-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200\",\n feature: () => \"h-6 w-6 text-blue-600 dark:text-blue-400\",\n featureLarge: () => \"h-8 w-8 text-blue-600 dark:text-blue-400\"\n },\n // List and table icons\n list: {\n item: () => \"h-4 w-4 text-gray-500 dark:text-gray-400 mr-3 flex-shrink-0\",\n action: () => \"h-4 w-4 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200\",\n bullet: () => \"h-1.5 w-1.5 text-gray-400 mt-2 mr-3 flex-shrink-0\"\n }\n },\n // Decorative icon patterns\n decorative: {\n hero: {\n small: () => \"h-12 w-12 text-blue-600 dark:text-blue-400\",\n medium: () => \"h-16 w-16 text-blue-600 dark:text-blue-400\",\n large: () => \"h-20 w-20 text-blue-600 dark:text-blue-400\",\n xlarge: () => \"h-24 w-24 text-blue-600 dark:text-blue-400\"\n },\n feature: {\n small: () => \"h-8 w-8 text-gray-600 dark:text-gray-400\",\n medium: () => \"h-10 w-10 text-gray-600 dark:text-gray-400\",\n large: () => \"h-12 w-12 text-gray-600 dark:text-gray-400\"\n },\n background: {\n subtle: () => \"h-32 w-32 text-gray-100 dark:text-gray-800 opacity-50\",\n muted: () => \"h-24 w-24 text-gray-200 dark:text-gray-700 opacity-30\"\n },\n empty: {\n small: () => \"h-8 w-8 text-gray-400 dark:text-gray-500 mb-2\",\n medium: () => \"h-12 w-12 text-gray-400 dark:text-gray-500 mb-4\",\n large: () => \"h-16 w-16 text-gray-400 dark:text-gray-500 mb-6\"\n }\n }\n },\n // Overlays & Portals variants\n overlays: {\n // Modal/Dialog overlays\n modal: {\n backdrop: () => \"fixed inset-0 z-40 bg-black/50 dark:bg-black/70 backdrop-blur-sm transition-all duration-300 ease-out\",\n backdropEntering: () => \"opacity-0\",\n backdropEntered: () => \"opacity-100\",\n backdropExiting: () => \"opacity-0\",\n container: () => \"fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-300 ease-out\",\n containerEntering: () => \"opacity-0 scale-95\",\n containerEntered: () => \"opacity-100 scale-100\",\n containerExiting: () => \"opacity-0 scale-95\",\n content: () => \"relative w-full max-w-lg bg-white dark:bg-gray-900 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-h-[80vh] overflow-hidden\",\n // Size variants\n small: () => \"max-w-sm\",\n medium: () => \"max-w-lg\",\n large: () => \"max-w-2xl\",\n extraLarge: () => \"max-w-4xl\",\n fullWidth: () => \"max-w-[95vw]\",\n // Header and content areas\n header: () => \"flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700\",\n title: () => \"text-lg font-semibold text-gray-900 dark:text-gray-100\",\n closeButton: () => \"p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors\",\n body: () => \"p-4 sm:p-6 overflow-y-auto\",\n footer: () => \"flex items-center justify-end space-x-3 p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50\"\n },\n // Tooltip overlays\n tooltip: {\n container: () => \"absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 dark:bg-gray-800 rounded shadow-lg transition-all duration-200 pointer-events-none\",\n arrow: () => \"absolute w-2 h-2 bg-gray-900 dark:bg-gray-800 transform rotate-45\",\n // Position variants\n top: () => \"-translate-x-1/2 -translate-y-full left-1/2 bottom-full mb-2\",\n topArrow: () => \"top-full left-1/2 -translate-x-1/2 -translate-y-1/2\",\n bottom: () => \"-translate-x-1/2 translate-y-full left-1/2 top-full mt-2\",\n bottomArrow: () => \"bottom-full left-1/2 -translate-x-1/2 translate-y-1/2\",\n left: () => \"-translate-y-1/2 -translate-x-full top-1/2 right-full mr-2\",\n leftArrow: () => \"left-full top-1/2 -translate-y-1/2 -translate-x-1/2\",\n right: () => \"-translate-y-1/2 translate-x-full top-1/2 left-full ml-2\",\n rightArrow: () => \"right-full top-1/2 -translate-y-1/2 translate-x-1/2\",\n // Content variants\n light: () => \"text-gray-900 bg-white border border-gray-200 shadow-md\",\n dark: () => \"text-white bg-gray-900 dark:bg-gray-800\",\n info: () => \"text-blue-50 bg-blue-600\",\n success: () => \"text-green-50 bg-green-600\",\n warning: () => \"text-amber-50 bg-amber-600\",\n error: () => \"text-red-50 bg-red-600\"\n },\n // Popover overlays (more complex than tooltips)\n popover: {\n backdrop: () => \"fixed inset-0 z-30\",\n container: () => \"absolute z-40 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 transition-all duration-200\",\n arrow: () => \"absolute w-3 h-3 bg-white dark:bg-gray-800 border-l border-t border-gray-200 dark:border-gray-700 transform rotate-45\",\n // Size variants\n small: () => \"w-48\",\n medium: () => \"w-64\",\n large: () => \"w-80\",\n auto: () => \"w-auto min-w-48 max-w-xs\",\n // Position variants (similar to tooltip but adjusted for larger content)\n top: () => \"-translate-x-1/2 -translate-y-full left-1/2 bottom-full mb-3\",\n topArrow: () => \"top-full left-1/2 -translate-x-1/2 -translate-y-1/2\",\n bottom: () => \"-translate-x-1/2 translate-y-full left-1/2 top-full mt-3\",\n bottomArrow: () => \"bottom-full left-1/2 -translate-x-1/2 translate-y-1/2\",\n left: () => \"-translate-y-1/2 -translate-x-full top-1/2 right-full mr-3\",\n leftArrow: () => \"left-full top-1/2 -translate-y-1/2 -translate-x-1/2\",\n right: () => \"-translate-y-1/2 translate-x-full top-1/2 left-full ml-3\",\n rightArrow: () => \"right-full top-1/2 -translate-y-1/2 translate-x-1/2\",\n // Content areas\n header: () => \"px-4 py-3 border-b border-gray-200 dark:border-gray-700\",\n title: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n body: () => \"px-4 py-3\",\n footer: () => \"px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50\",\n // Animation states\n entering: () => \"opacity-0 scale-95 transform\",\n entered: () => \"opacity-100 scale-100 transform\",\n exiting: () => \"opacity-0 scale-95 transform\"\n },\n // Dropdown menus\n dropdown: {\n container: () => \"relative inline-block\",\n trigger: () => \"inline-flex justify-center items-center bg-transparent border-0 text-gray-900 dark:text-gray-100 focus:outline-none transition-colors\",\n triggerBordered: () => \"inline-flex justify-center items-center bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-950 transition-colors\",\n menu: () => \"absolute z-50 w-56 bg-white dark:bg-gray-800 rounded-md shadow-lg focus:outline-none transition-all duration-200\",\n menuSmall: () => \"w-40\",\n menuLarge: () => \"w-72\",\n menuAuto: () => \"w-auto min-w-40\",\n // Position variants\n menuTop: () => \"bottom-full mb-1\",\n menuBottom: () => \"top-full mt-1\",\n menuLeft: () => \"right-0\",\n menuRight: () => \"left-0\",\n // Animation states\n menuEntering: () => \"opacity-0 scale-95 transform origin-top\",\n menuEntered: () => \"opacity-100 scale-100 transform origin-top\",\n menuExiting: () => \"opacity-0 scale-95 transform origin-top\",\n // Menu items\n itemContainer: () => \"py-1 px-1\",\n item: () => \"flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:text-blue-700 dark:hover:text-blue-300 transition-all duration-200 cursor-pointer hover:shadow-sm rounded-sm\",\n itemActive: () => \"bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 shadow-sm\",\n itemDisabled: () => \"text-gray-400 dark:text-gray-600 cursor-not-allowed hover:bg-transparent hover:text-gray-400 dark:hover:text-gray-600\",\n // Special item types\n divider: () => \"my-1 border-t border-gray-200 dark:border-gray-700\",\n header: () => \"px-4 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\",\n // Icons in menu items\n itemIcon: () => \"mr-3 h-4 w-4 flex-shrink-0\",\n itemIconRight: () => \"ml-auto h-4 w-4 flex-shrink-0\"\n },\n // Drawer/Sidebar overlays\n drawer: {\n backdrop: () => \"fixed inset-0 z-40 bg-black/50 dark:bg-black/70 transition-opacity duration-300\",\n container: () => \"fixed inset-y-0 z-50 flex w-full justify-end transition-transform duration-300 ease-in-out\",\n // Position variants\n right: () => \"right-0\",\n left: () => \"left-0 justify-start\",\n // Size variants\n narrow: () => \"max-w-xs\",\n default: () => \"max-w-md\",\n wide: () => \"max-w-lg\",\n extraWide: () => \"max-w-2xl\",\n // Content\n content: () => \"relative flex w-full flex-col bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 shadow-xl\",\n contentLeft: () => \"border-r border-l-0 border-gray-200 dark:border-gray-700\",\n header: () => \"flex items-center justify-between px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700\",\n title: () => \"text-lg font-semibold text-gray-900 dark:text-gray-100\",\n closeButton: () => \"p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors\",\n body: () => \"flex-1 px-4 sm:px-6 py-4 overflow-y-auto\",\n footer: () => \"flex items-center justify-end space-x-3 px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50\",\n // Animation states\n entering: () => \"translate-x-full\",\n enteringLeft: () => \"-translate-x-full\",\n entered: () => \"translate-x-0\",\n exiting: () => \"translate-x-full\",\n exitingLeft: () => \"-translate-x-full\"\n },\n // Sheet overlays (bottom sheets, action sheets)\n sheet: {\n backdrop: () => \"fixed inset-0 z-40 bg-black/50 dark:bg-black/70 transition-opacity duration-300\",\n container: () => \"fixed inset-x-0 bottom-0 z-50 transition-transform duration-300 ease-out\",\n content: () => \"relative bg-white dark:bg-gray-900 rounded-t-lg shadow-xl border-t border-gray-200 dark:border-gray-700 max-h-[85vh] overflow-hidden\",\n handle: () => \"flex justify-center py-2\",\n handleBar: () => \"w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full\",\n header: () => \"flex items-center justify-between px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700\",\n title: () => \"text-lg font-semibold text-gray-900 dark:text-gray-100\",\n closeButton: () => \"p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors\",\n body: () => \"px-4 sm:px-6 py-4 overflow-y-auto\",\n footer: () => \"flex items-center justify-center space-x-3 px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50\",\n // Animation states\n entering: () => \"translate-y-full\",\n entered: () => \"translate-y-0\",\n exiting: () => \"translate-y-full\"\n },\n // Context menus (right-click menus)\n contextMenu: {\n backdrop: () => \"fixed inset-0 z-30\",\n container: () => \"absolute z-50 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-1 focus:outline-none transition-all duration-150\",\n item: () => \"flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 transition-colors cursor-pointer\",\n itemDisabled: () => \"text-gray-400 dark:text-gray-600 cursor-not-allowed hover:bg-transparent\",\n itemDanger: () => \"text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-700 dark:hover:text-red-300\",\n divider: () => \"my-1 border-t border-gray-200 dark:border-gray-700\",\n icon: () => \"mr-2 h-4 w-4 flex-shrink-0\",\n shortcut: () => \"ml-auto text-xs text-gray-400 dark:text-gray-500\",\n // Nested menu indicators\n submenuIndicator: () => \"ml-auto h-4 w-4 text-gray-400 dark:text-gray-500\",\n submenu: () => \"absolute left-full top-0 ml-1\"\n },\n // Loading overlays\n loading: {\n backdrop: () => \"fixed inset-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm flex items-center justify-center transition-all duration-300\",\n container: () => \"flex flex-col items-center space-y-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700\",\n spinner: () => \"w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin\",\n spinnerLarge: () => \"w-12 h-12 border-3 border-blue-600 border-t-transparent rounded-full animate-spin\",\n text: () => \"text-sm font-medium text-gray-900 dark:text-gray-100\",\n subtext: () => \"text-xs text-gray-500 dark:text-gray-400 text-center max-w-xs\"\n },\n // Portal utilities for managing overlay z-index and positioning\n portal: {\n // Z-index layers (ensure proper stacking)\n backdrop: () => \"z-40\",\n dropdown: () => \"z-50\",\n tooltip: () => \"z-50\",\n popover: () => \"z-40\",\n modal: () => \"z-50\",\n drawer: () => \"z-50\",\n sheet: () => \"z-50\",\n contextMenu: () => \"z-50\",\n loading: () => \"z-60\",\n notification: () => \"z-70\",\n // Focus trap utilities\n focusTrap: () => \"focus:outline-none\",\n focusVisible: () => \"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n // Screen reader utilities\n srOnly: () => \"sr-only\",\n ariaLabel: () => \"aria-label\"\n }\n },\n // Micro-Interactions & Animations variants\n animations: {\n // Hover effects\n hover: {\n // Card hover effects\n card: {\n subtle: () => \"transition-all duration-200 hover:shadow-md hover:-translate-y-0.5\",\n lift: () => \"transition-all duration-300 hover:shadow-lg hover:-translate-y-1\",\n glow: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/25 dark:hover:shadow-blue-400/25\",\n scale: () => \"transition-transform duration-200 hover:scale-105\",\n border: () => \"transition-all duration-200 hover:border-blue-300 dark:hover:border-blue-600\",\n // Web3 specific card hovers\n nft: () => \"transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/30 hover:scale-[1.02]\",\n wallet: () => \"transition-all duration-200 hover:shadow-md hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 dark:hover:from-blue-900/20 dark:hover:to-indigo-900/20\",\n transaction: () => \"transition-all duration-200 hover:shadow-md hover:border-green-300 dark:hover:border-green-600\"\n },\n // Button hover effects\n button: {\n lift: () => \"transition-all duration-150 hover:-translate-y-0.5 hover:shadow-md\",\n glow: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-current/25\",\n scale: () => \"transition-transform duration-150 hover:scale-105\",\n shimmer: () => \"relative overflow-hidden transition-all duration-200 before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent hover:before:translate-x-full\",\n // Web3 button hovers\n connect: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/30 hover:scale-[1.02]\",\n transaction: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-green-500/30\",\n disconnect: () => \"transition-all duration-200 hover:shadow-lg hover:shadow-red-500/30\"\n },\n // Icon hover effects\n icon: {\n bounce: () => \"transition-transform duration-200 hover:scale-110 hover:-translate-y-0.5\",\n rotate: () => \"transition-transform duration-200 hover:rotate-12\",\n pulse: () => \"transition-all duration-200 hover:scale-110 hover:text-blue-600 dark:hover:text-blue-400\",\n glow: () => \"transition-all duration-200 hover:text-blue-600 dark:hover:text-blue-400 hover:drop-shadow-sm\"\n }\n },\n // Loading animations\n loading: {\n // Spinner variants\n spinner: {\n default: () => \"animate-spin\",\n slow: () => \"animate-spin-slow\",\n fast: () => \"animate-spin-fast\",\n bounce: () => \"animate-bounce\",\n pulse: () => \"animate-pulse\",\n ping: () => \"animate-ping\"\n },\n // Skeleton loaders\n skeleton: {\n base: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded\",\n line: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 h-4 rounded\",\n circle: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded-full\",\n card: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg h-32\",\n // Shimmer effect\n shimmer: () => \"relative overflow-hidden bg-gray-200 dark:bg-gray-700 before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-gray-200 before:via-white before:to-gray-200 dark:before:from-gray-700 dark:before:via-gray-600 dark:before:to-gray-700\",\n // Progressive loading\n progressive: () => \"bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%] animate-shimmer-bg\"\n },\n // Progress indicators\n progress: {\n bar: () => \"transition-all duration-300 ease-out\",\n indeterminate: () => \"animate-progress-indeterminate bg-gradient-to-r from-blue-500 via-purple-500 to-blue-500 bg-[length:200%_100%]\",\n // Web3 progress indicators\n transaction: () => \"animate-progress-glow bg-gradient-to-r from-green-400 to-blue-500\",\n minting: () => \"animate-progress-rainbow bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500\"\n }\n },\n // Transition animations\n transitions: {\n // Slide transitions\n slide: {\n up: () => \"transition-transform duration-300 ease-out\",\n upEnter: () => \"translate-y-full\",\n upEntered: () => \"translate-y-0\",\n upExit: () => \"translate-y-full\",\n down: () => \"transition-transform duration-300 ease-out\",\n downEnter: () => \"-translate-y-full\",\n downEntered: () => \"translate-y-0\",\n downExit: () => \"-translate-y-full\",\n left: () => \"transition-transform duration-300 ease-out\",\n leftEnter: () => \"translate-x-full\",\n leftEntered: () => \"translate-x-0\",\n leftExit: () => \"translate-x-full\",\n right: () => \"transition-transform duration-300 ease-out\",\n rightEnter: () => \"-translate-x-full\",\n rightEntered: () => \"translate-x-0\",\n rightExit: () => \"-translate-x-full\"\n },\n // Fade transitions\n fade: {\n default: () => \"transition-opacity duration-300 ease-out\",\n enter: () => \"opacity-0\",\n entered: () => \"opacity-100\",\n exit: () => \"opacity-0\",\n fast: () => \"transition-opacity duration-150 ease-out\",\n slow: () => \"transition-opacity duration-500 ease-out\",\n // Fade with scale\n scale: () => \"transition-all duration-300 ease-out\",\n scaleEnter: () => \"opacity-0 scale-95\",\n scaleEntered: () => \"opacity-100 scale-100\",\n scaleExit: () => \"opacity-0 scale-95\"\n },\n // Page transitions\n page: {\n slideLeft: () => \"transition-transform duration-300 ease-in-out\",\n slideRight: () => \"transition-transform duration-300 ease-in-out\",\n fadeScale: () => \"transition-all duration-300 ease-in-out\"\n }\n },\n // Gesture feedback\n feedback: {\n // Click/tap feedback\n tap: {\n ripple: () => \"relative overflow-hidden transition-all duration-150 active:scale-95\",\n scale: () => \"transition-transform duration-100 active:scale-95\",\n glow: () => \"transition-all duration-150 active:shadow-lg active:shadow-current/30\",\n // Material Design ripple effect\n materialRipple: () => \"relative overflow-hidden after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:transition-opacity after:duration-300 after:opacity-0 active:after:opacity-100 active:after:bg-white/20\"\n },\n // Focus feedback\n focus: {\n ring: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n glow: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:shadow-lg focus-visible:shadow-blue-500/25\",\n scale: () => \"focus-visible:outline-none focus-visible:scale-105 focus-visible:ring-2 focus-visible:ring-blue-500\",\n // Web3 focus styles\n wallet: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:bg-blue-50 dark:focus-visible:bg-blue-900/20\"\n },\n // Drag feedback\n drag: {\n dragging: () => \"opacity-50 scale-95 rotate-3 shadow-xl z-50\",\n dropzone: () => \"transition-all duration-200 border-2 border-dashed\",\n dropzoneActive: () => \"border-blue-400 bg-blue-50 dark:bg-blue-900/20 scale-105\",\n dropzoneInactive: () => \"border-gray-300 dark:border-gray-600\"\n }\n },\n // Scroll animations\n scroll: {\n // Reveal animations\n reveal: {\n fadeUp: () => \"opacity-0 translate-y-8 transition-all duration-700 ease-out\",\n fadeUpVisible: () => \"opacity-100 translate-y-0\",\n fadeDown: () => \"opacity-0 -translate-y-8 transition-all duration-700 ease-out\",\n fadeDownVisible: () => \"opacity-100 translate-y-0\",\n fadeLeft: () => \"opacity-0 translate-x-8 transition-all duration-700 ease-out\",\n fadeLeftVisible: () => \"opacity-100 translate-x-0\",\n fadeRight: () => \"opacity-0 -translate-x-8 transition-all duration-700 ease-out\",\n fadeRightVisible: () => \"opacity-100 translate-x-0\",\n scale: () => \"opacity-0 scale-90 transition-all duration-700 ease-out\",\n scaleVisible: () => \"opacity-100 scale-100\"\n },\n // Parallax effects\n parallax: {\n slow: () => \"transform transition-transform duration-75\",\n medium: () => \"transform transition-transform duration-100\",\n fast: () => \"transform transition-transform duration-150\"\n },\n // Sticky animations\n sticky: {\n shrink: () => \"transition-all duration-300 ease-out\",\n shrinkActive: () => \"py-2 shadow-lg backdrop-blur-md\",\n shrinkInactive: () => \"py-4\"\n }\n },\n // Web3-specific animations\n web3: {\n // Wallet connection animations\n wallet: {\n connecting: () => \"animate-pulse bg-gradient-to-r from-blue-500 via-purple-500 to-blue-500 bg-[length:200%_100%] animate-shimmer-bg\",\n connected: () => \"animate-bounce-gentle bg-gradient-to-r from-green-400 to-blue-500\",\n disconnected: () => \"animate-fade-out opacity-50\",\n error: () => \"animate-shake bg-red-100 dark:bg-red-900/20\"\n },\n // Transaction animations\n transaction: {\n pending: () => \"animate-pulse border border-yellow-300 bg-yellow-50 dark:border-yellow-700 dark:bg-yellow-900/20\",\n confirming: () => \"animate-progress-dots bg-gradient-to-r from-blue-500 to-purple-500\",\n confirmed: () => \"animate-success-pulse border border-green-300 bg-green-50 dark:border-green-700 dark:bg-green-900/20\",\n failed: () => \"animate-error-flash border border-red-300 bg-red-50 dark:border-red-700 dark:bg-red-900/20\"\n },\n // Blockchain activity\n blockchain: {\n mining: () => \"animate-mining-pulse bg-gradient-to-r from-yellow-400 via-orange-500 to-yellow-400 bg-[length:200%_100%]\",\n minting: () => \"animate-rainbow bg-gradient-to-r from-pink-500 via-purple-500 via-blue-500 to-pink-500 bg-[length:300%_100%]\",\n staking: () => \"animate-glow-pulse bg-gradient-to-r from-green-400 to-emerald-500\",\n burning: () => \"animate-fire bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 bg-[length:200%_100%]\"\n }\n },\n // Utility animations\n utility: {\n // Attention grabbing\n attention: {\n bounce: () => \"animate-bounce\",\n pulse: () => \"animate-pulse\",\n ping: () => \"animate-ping\",\n shake: () => \"animate-shake\",\n wiggle: () => \"animate-wiggle\",\n heartbeat: () => \"animate-heartbeat\"\n },\n // State indicators\n state: {\n success: () => \"animate-success-checkmark\",\n error: () => \"animate-error-x\",\n warning: () => \"animate-warning-triangle\",\n info: () => \"animate-info-circle\"\n },\n // Performance considerations\n reduced: {\n // Reduced motion variants for accessibility\n fadeOnly: () => \"transition-opacity duration-300 ease-out\",\n scaleOnly: () => \"transition-transform duration-200 ease-out\",\n instant: () => \"transition-none\",\n respectPrefers: () => \"motion-safe:transition-all motion-safe:duration-300 motion-reduce:transition-none\"\n }\n }\n },\n // Accessibility & A11Y variants\n accessibility: {\n // Screen reader and assistive technology support\n screenReader: {\n // Visually hidden but accessible to screen readers\n only: () => \"sr-only\",\n focusable: () => \"sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-2 focus:bg-white focus:text-black focus:border focus:rounded\",\n // Skip links for navigation\n skipLink: () => \"sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded focus:m-2 focus:no-underline\"\n },\n // Focus management\n focus: {\n // Focus indicators\n ring: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\",\n ringInset: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500\",\n ringDark: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900\",\n // High contrast focus for better visibility\n highContrast: () => \"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-yellow-400 focus-visible:ring-offset-2 focus-visible:bg-yellow-50 dark:focus-visible:bg-yellow-900/20\",\n // Web3 specific focus styles\n wallet: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:bg-blue-50 dark:focus-visible:bg-blue-900/20\",\n transaction: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2\",\n error: () => \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2\"\n },\n // Color contrast and visibility\n contrast: {\n // High contrast text\n text: {\n high: () => \"text-gray-900 dark:text-gray-100\",\n medium: () => \"text-gray-700 dark:text-gray-300\",\n low: () => \"text-gray-600 dark:text-gray-400\",\n inverse: () => \"text-white dark:text-gray-900\"\n },\n // High contrast backgrounds\n background: {\n primary: () => \"bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900\",\n secondary: () => \"bg-gray-700 text-white dark:bg-gray-300 dark:text-gray-900\",\n success: () => \"bg-green-700 text-white dark:bg-green-300 dark:text-gray-900\",\n warning: () => \"bg-yellow-700 text-white dark:bg-yellow-300 dark:text-gray-900\",\n error: () => \"bg-red-700 text-white dark:bg-red-300 dark:text-gray-900\"\n },\n // Link contrast\n link: {\n default: () => \"text-blue-700 dark:text-blue-300 underline hover:text-blue-900 dark:hover:text-blue-100\",\n visited: () => \"text-purple-700 dark:text-purple-300 underline hover:text-purple-900 dark:hover:text-purple-100\"\n }\n },\n // Motion and animation preferences\n motion: {\n // Respect user's motion preferences\n respectPrefers: () => \"motion-safe:transition-all motion-safe:duration-300 motion-reduce:transition-none\",\n reduceMotion: () => \"motion-reduce:transition-none motion-reduce:animate-none\",\n // Safe animations that work with reduced motion\n safe: {\n fade: () => \"motion-safe:transition-opacity motion-safe:duration-300 motion-reduce:transition-none\",\n scale: () => \"motion-safe:transition-transform motion-safe:duration-200 motion-reduce:transition-none\",\n slide: () => \"motion-safe:transition-transform motion-safe:duration-300 motion-reduce:transition-none\"\n },\n // Loading animations that respect motion preferences\n loading: {\n spin: () => \"motion-safe:animate-spin motion-reduce:animate-none\",\n pulse: () => \"motion-safe:animate-pulse motion-reduce:animate-none\",\n bounce: () => \"motion-safe:animate-bounce motion-reduce:animate-none\"\n }\n },\n // Semantic HTML and roles\n semantic: {\n // Interactive roles\n interactive: {\n button: () => 'role=\"button\" tabindex=\"0\"',\n link: () => 'role=\"link\"',\n menuitem: () => 'role=\"menuitem\"',\n tab: () => 'role=\"tab\"',\n tabpanel: () => 'role=\"tabpanel\"',\n dialog: () => 'role=\"dialog\"'\n },\n // State roles\n states: {\n selected: (t) => `aria-selected=\"${t}\"`,\n checked: (t) => `aria-checked=\"${t}\"`,\n pressed: (t) => `aria-pressed=\"${t}\"`,\n expanded: (t) => `aria-expanded=\"${t}\"`,\n disabled: (t) => t ? 'aria-disabled=\"true\" tabindex=\"-1\"' : \"\"\n },\n // Web3 specific semantic patterns\n web3: {\n wallet: () => 'role=\"button\" aria-label=\"Connect Wallet\"',\n transaction: () => 'role=\"status\" aria-live=\"polite\"',\n balance: () => 'role=\"text\" aria-label=\"Account Balance\"',\n address: () => 'role=\"text\" aria-label=\"Wallet Address\"'\n }\n },\n // Form accessibility\n form: {\n // Required field indicators\n required: {\n indicator: () => \"text-red-500 dark:text-red-400\",\n text: () => 'aria-required=\"true\" required',\n visual: () => 'after:content-[\"*\"] after:ml-1 after:text-red-500 dark:after:text-red-400'\n },\n // Validation states\n validation: {\n valid: () => \"border-green-500 dark:border-green-400 focus:ring-green-500\",\n invalid: () => 'border-red-500 dark:border-red-400 focus:ring-red-500 aria-invalid=\"true\"',\n pending: () => \"border-yellow-500 dark:border-yellow-400 focus:ring-yellow-500\"\n }\n },\n // Interactive patterns\n interactive: {\n // Button patterns\n button: {\n primary: () => \"inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed\",\n secondary: () => \"inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed\",\n // Icon buttons with proper labels\n icon: () => \"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500\"\n },\n // Link patterns\n link: {\n default: () => \"text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\",\n external: () => 'text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 after:content-[\"↗\"] after:ml-1 after:text-xs'\n }\n },\n // Text and content accessibility\n content: {\n // Text sizing and scaling\n text: {\n minimum: () => \"text-sm min-h-[44px] min-w-[44px]\",\n // WCAG minimum touch target\n touch: () => \"min-h-[44px] min-w-[44px] touch-manipulation\"\n }\n },\n // Error handling and feedback\n feedback: {\n // Error messages\n error: {\n container: () => \"border border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/20 rounded-md p-4\",\n title: () => \"text-sm font-medium text-red-800 dark:text-red-200\",\n message: () => \"text-sm text-red-700 dark:text-red-300 mt-2\"\n },\n // Success messages\n success: {\n container: () => \"border border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/20 rounded-md p-4\",\n title: () => \"text-sm font-medium text-green-800 dark:text-green-200\",\n message: () => \"text-sm text-green-700 dark:text-green-300 mt-2\"\n },\n // Live regions for dynamic content\n liveRegion: {\n polite: () => 'sr-only aria-live=\"polite\"',\n assertive: () => 'sr-only aria-live=\"assertive\"',\n status: () => 'sr-only role=\"status\" aria-live=\"polite\"',\n alert: () => 'sr-only role=\"alert\" aria-live=\"assertive\"'\n }\n }\n },\n // Performance & Optimization variants\n performance: {\n // Bundle optimization patterns\n bundle: {\n // Lazy loading utilities\n lazy: {\n component: () => \"opacity-0 transition-opacity duration-300\",\n componentLoaded: () => \"opacity-100\",\n image: () => \"blur-sm transition-all duration-300\",\n imageLoaded: () => \"blur-none\",\n skeleton: () => \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded\"\n },\n // Code splitting indicators\n splitting: {\n loading: () => \"flex items-center justify-center py-8\",\n error: () => \"text-red-600 dark:text-red-400 text-center py-8\",\n fallback: () => \"bg-gray-100 dark:bg-gray-800 animate-pulse rounded\"\n }\n },\n // Rendering optimization\n rendering: {\n // GPU acceleration utilities\n gpu: {\n transform: () => \"transform-gpu\",\n layer: () => \"will-change-transform transform translate3d-0\",\n composite: () => \"backface-hidden\"\n },\n // Layout optimization\n layout: {\n // Prevent layout shifts\n stable: () => \"aspect-square\",\n containLayout: () => \"contain-layout\",\n containStyle: () => \"contain-style\",\n // Efficient positioning\n sticky: () => \"sticky top-0 z-40\",\n fixed: () => \"fixed inset-0 z-50\"\n },\n // Memory optimization\n memory: {\n // Efficient list rendering\n virtualList: () => \"overflow-hidden\",\n virtualItem: () => \"absolute left-0 right-0\",\n // Image optimization\n responsiveImage: () => \"max-w-full h-auto object-cover\",\n lazyImage: () => \"object-cover transition-opacity duration-300 opacity-0\",\n loadedImage: () => \"opacity-100\"\n }\n },\n // Network optimization\n network: {\n // Caching patterns\n cache: {\n // Service worker states\n cached: () => \"border-l-4 border-green-500 bg-green-50 dark:bg-green-900/20\",\n updating: () => \"border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20\",\n offline: () => \"border-l-4 border-gray-500 bg-gray-50 dark:bg-gray-900/20\",\n error: () => \"border-l-4 border-red-500 bg-red-50 dark:bg-red-900/20\",\n // Cache status indicators\n fresh: () => \"text-green-600 dark:text-green-400\",\n stale: () => \"text-yellow-600 dark:text-yellow-400\",\n expired: () => \"text-red-600 dark:text-red-400\"\n },\n // Connection quality\n connection: {\n fast: () => \"border-green-500 bg-green-50 dark:bg-green-900/20\",\n slow: () => \"border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20\",\n offline: () => \"border-red-500 bg-red-50 dark:bg-red-900/20\"\n }\n },\n // Core Web Vitals optimization\n webVitals: {\n // Largest Contentful Paint (LCP)\n lcp: {\n optimize: () => \"will-change-contents\",\n hero: () => \"contain-layout will-change-contents\",\n image: () => \"object-cover will-change-auto\"\n },\n // First Input Delay (FID) / Interaction to Next Paint (INP)\n interactivity: {\n optimize: () => \"touch-manipulation select-none\",\n debounced: () => \"transition-none\",\n throttled: () => \"pointer-events-none transition-opacity duration-100\",\n ready: () => \"pointer-events-auto opacity-100\"\n },\n // Cumulative Layout Shift (CLS)\n layoutStability: {\n // Prevent layout shifts\n stable: () => \"aspect-square contain-layout\",\n placeholder: () => \"min-h-[200px] bg-gray-100 dark:bg-gray-800\",\n skeleton: () => \"animate-pulse bg-gray-200 dark:bg-gray-700\",\n // Image container stability\n imageContainer: () => \"overflow-hidden relative\",\n imageStable: () => \"absolute inset-0 object-cover\"\n }\n },\n // Web3 Performance optimization\n web3: {\n // Wallet connection optimization\n wallet: {\n cached: () => \"opacity-100 transition-opacity duration-200\",\n connecting: () => \"opacity-75 cursor-wait\",\n staleData: () => \"opacity-75\",\n freshData: () => \"opacity-100\"\n },\n // Transaction optimization\n transaction: {\n // Batching indicators\n batched: () => \"border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20\",\n individual: () => \"border-l-4 border-gray-500 bg-gray-50 dark:bg-gray-900/20\",\n // Gas optimization\n gasOptimal: () => \"text-green-600 dark:text-green-400\",\n gasHigh: () => \"text-yellow-600 dark:text-yellow-400\",\n gasVeryHigh: () => \"text-red-600 dark:text-red-400\"\n },\n // Blockchain data optimization\n blockchain: {\n // Data freshness\n realtime: () => \"border-green-500 bg-green-50 dark:bg-green-900/20\",\n cached: () => \"border-blue-500 bg-blue-50 dark:bg-blue-900/20\",\n stale: () => \"border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20\",\n // Query optimization\n optimistic: () => \"opacity-75 transition-opacity duration-200\",\n confirmed: () => \"opacity-100\",\n refetching: () => \"animate-pulse\"\n }\n },\n // Monitoring and debugging\n monitoring: {\n // Performance metrics\n metrics: {\n good: () => \"text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/20\",\n needsImprovement: () => \"text-yellow-600 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-900/20\",\n poor: () => \"text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/20\"\n },\n // Error boundaries\n errorBoundary: {\n container: () => \"border border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/20 rounded-lg p-4\",\n title: () => \"text-lg font-semibold text-red-800 dark:text-red-200\",\n message: () => \"text-red-700 dark:text-red-300 mt-2\",\n retry: () => \"mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500\",\n fallback: () => \"text-center text-gray-500 dark:text-gray-400 py-8\"\n }\n },\n // Resource optimization\n resource: {\n // Image optimization\n image: {\n // Responsive images\n responsive: () => \"w-full h-auto object-cover\",\n hero: () => \"w-full h-[50vh] object-cover\",\n thumbnail: () => \"w-16 h-16 object-cover rounded\",\n avatar: () => \"w-10 h-10 object-cover rounded-full\",\n // Loading states\n placeholder: () => \"bg-gray-200 dark:bg-gray-700 animate-pulse\",\n blurred: () => \"filter blur-sm\",\n sharp: () => \"filter blur-none transition-all duration-300\"\n },\n // Critical resources\n critical: {\n // Above the fold\n aboveFold: () => \"will-change-contents\",\n belowFold: () => \"will-change-auto\"\n }\n },\n // Database and API optimization\n data: {\n // Query optimization\n query: {\n cached: () => \"opacity-100\",\n loading: () => \"opacity-75 animate-pulse\",\n error: () => \"opacity-50 text-red-600 dark:text-red-400\",\n // REST optimization\n fresh: () => \"border-l-2 border-green-500\",\n stale: () => \"border-l-2 border-yellow-500\",\n invalid: () => \"border-l-2 border-red-500\",\n // Optimistic updates\n optimistic: () => \"opacity-75\",\n confirmed: () => \"opacity-100\",\n reverted: () => \"opacity-50 line-through\"\n },\n // Real-time optimization\n realtime: {\n // WebSocket states\n connected: () => \"border-green-500 bg-green-50 dark:bg-green-900/20\",\n connecting: () => \"border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20\",\n disconnected: () => \"border-red-500 bg-red-50 dark:bg-red-900/20\",\n // Update indicators\n live: () => \"animate-pulse text-green-600 dark:text-green-400\",\n delayed: () => \"text-yellow-600 dark:text-yellow-400\",\n offline: () => \"text-gray-500 dark:text-gray-400\"\n }\n }\n }\n};\nclass k {\n /**\n * Creates a new SimpleVariants instance.\n *\n * @param designSystemVariants - Configuration object containing variant definitions\n * @example\n * ```typescript\n * const variants = new SimpleVariants({\n * button: {\n * primary: () => 'bg-blue-600 text-white px-4 py-2 rounded',\n * secondary: () => 'bg-gray-200 text-gray-900 px-4 py-2 rounded'\n * }\n * });\n * ```\n */\n constructor(r) {\n this.fallbacks = /* @__PURE__ */ new Map(), this.variants = r || {}, this.setupDefaultFallbacks(), this.validateConfiguration();\n }\n /**\n * Sets up default fallback styles for common component variants.\n * These fallbacks ensure that basic styling is available even when\n * specific variants are not defined in the design system.\n *\n * @private\n */\n setupDefaultFallbacks() {\n this.fallbacks.set(\"button.primary\", \"bg-blue-600 text-white px-4 py-2 rounded\"), this.fallbacks.set(\"button.secondary\", \"bg-gray-200 text-gray-900 px-4 py-2 rounded\"), this.fallbacks.set(\"button.outline\", \"border border-gray-300 text-gray-700 px-4 py-2 rounded\"), this.fallbacks.set(\n \"alert.default\",\n \"bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded\"\n ), this.fallbacks.set(\n \"alert.destructive\",\n \"bg-red-50 border border-red-200 text-red-800 p-4 rounded\"\n ), this.fallbacks.set(\n \"input.default\",\n \"border border-gray-300 px-3 py-2 rounded focus:ring-2 focus:ring-blue-500\"\n ), this.fallbacks.set(\"badge.default\", \"bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm\");\n }\n /**\n * Retrieves CSS classes for a specific component variant.\n *\n * This is the main API method for getting variant classes. It supports\n * both separate parameters and dot notation for convenience.\n *\n * @param component - The component name (e.g., 'button', 'input')\n * @param variant - The variant name (e.g., 'primary', 'outline'). Defaults to 'default'\n * @returns CSS class string for the specified variant\n * @throws {Error} When neither variant nor fallback is available\n *\n * @example\n * ```typescript\n * // Separate parameters\n * const classes1 = variants.get('button', 'primary');\n * // Returns: \"bg-blue-600 text-white px-4 py-2 rounded ...\"\n *\n * // Dot notation\n * const classes2 = variants.get('button.primary');\n * // Returns: same as above\n *\n * // Default variant\n * const classes3 = variants.get('input');\n * // Returns: default input styling\n * ```\n */\n get(r, a) {\n if (!a && r.includes(\".\")) {\n const [n, i] = r.split(\".\", 2);\n return this.get(n, i);\n }\n a || (a = \"default\");\n try {\n const n = this.variants[r];\n if (!n)\n return this.getFallback(r, a);\n const i = n[a];\n if (typeof i == \"function\")\n return i();\n if (typeof i == \"string\")\n return i;\n if (i && typeof i == \"object\") {\n if (typeof i.default == \"function\")\n return i.default();\n if (typeof i.default == \"string\")\n return i.default;\n }\n return this.getFallback(r, a);\n } catch (n) {\n const i = `Failed to resolve variant '${r}.${a}': ${n instanceof Error ? n.message : String(n)}`;\n return this.logStructuredError(\"VARIANT_RESOLUTION_ERROR\", i, {\n component: r,\n variant: a,\n error: n instanceof Error ? n.message : String(n),\n availableVariants: this.getAvailableVariants(r)\n }), this.getFallback(r, a);\n }\n }\n /**\n * Retrieves CSS classes for a specific component variant with size modifier.\n *\n * This method allows you to get size-specific variants (e.g., small, medium, large)\n * for components. If the sized variant doesn't exist, it falls back to the base variant.\n *\n * @param component - The component name (e.g., 'button', 'input')\n * @param variant - The variant name (e.g., 'primary', 'outline')\n * @param size - The size modifier (e.g., 'sm', 'md', 'lg')\n * @returns CSS class string for the specified sized variant\n *\n * @example\n * ```typescript\n * // Get a small primary button\n * const smallButton = variants.sized('button', 'primary', 'sm');\n * // Returns: \"bg-blue-600 text-white px-3 py-1.5 text-xs ...\"\n *\n * // Get a large secondary button\n * const largeButton = variants.sized('button', 'secondary', 'lg');\n * // Returns: \"bg-gray-100 text-gray-900 px-6 py-3 text-base ...\"\n * ```\n */\n sized(r, a, n) {\n try {\n const d = this.variants[r]?.[a];\n if (d && typeof d == \"object\" && d[n]) {\n const l = d[n];\n if (typeof l == \"function\")\n return l();\n if (typeof l == \"string\")\n return l;\n }\n return this.get(r, a);\n } catch (i) {\n return console.warn(`Failed to get sized variant ${r}.${a}.${n}:`, i), this.get(r, a);\n }\n }\n /**\n * Retrieves CSS classes for nested variant paths.\n *\n * This method allows you to access deeply nested variants using dot notation.\n * Useful for complex variant structures with multiple levels of nesting.\n *\n * @param path - Dot-separated path to the variant (e.g., 'button.gradient.primary')\n * @returns CSS class string for the nested variant\n *\n * @example\n * ```typescript\n * // Get a nested gradient button variant\n * const gradientButton = variants.nested('button.gradient.primary');\n * // Returns: \"bg-gradient-to-r from-blue-600 to-purple-600 ...\"\n *\n * // Access deeply nested variants\n * const cardHeader = variants.nested('card.header.elevated');\n * ```\n */\n nested(r) {\n try {\n const a = r.split(\".\");\n let n = this.variants;\n for (const i of a)\n if (n = n?.[i], !n) break;\n return typeof n == \"function\" ? n() : typeof n == \"string\" ? n : n && typeof n.default == \"function\" ? n.default() : n && typeof n.default == \"string\" ? n.default : this.getFallback(a[0], a.slice(1).join(\".\"));\n } catch (a) {\n return console.warn(`Failed to get nested variant ${r}:`, a), this.getFallback(r.split(\".\")[0], r.split(\".\").slice(1).join(\".\"));\n }\n }\n /**\n * Conditionally selects between two variants based on a boolean condition.\n *\n * This utility method helps with conditional styling, allowing you to\n * switch between different variants based on application state.\n *\n * @param condition - Boolean condition to evaluate\n * @param trueComponent - Component name when condition is true\n * @param trueVariant - Variant name when condition is true\n * @param falseComponent - Component name when condition is false (optional)\n * @param falseVariant - Variant name when condition is false (optional)\n * @returns CSS class string for the selected variant\n *\n * @example\n * ```typescript\n * // Show error or success alert based on validation\n * const alertClasses = variants.when(\n * hasError,\n * 'alert', 'destructive',\n * 'alert', 'success'\n * );\n *\n * // Simple boolean styling\n * const buttonClasses = variants.when(isLoading, 'button', 'disabled');\n * ```\n */\n when(r, a, n, i, d) {\n return r ? this.get(a, n) : i && d ? this.get(i, d) : \"\";\n }\n /**\n * Combines multiple variant classes into a single class string.\n *\n * This method allows you to merge variant classes with custom classes,\n * creating complex styling combinations. Supports both variant paths\n * and custom CSS classes.\n *\n * @param variants - Array of variant paths or custom CSS classes\n * @returns Combined CSS class string\n *\n * @example\n * ```typescript\n * // Combine variant with custom classes\n * const complexButton = variants.combine(\n * 'button.primary',\n * 'animations.hover',\n * 'custom-shadow',\n * 'my-2'\n * );\n * // Returns: \"bg-blue-600 text-white ... hover:scale-105 custom-shadow my-2\"\n *\n * // Mix variants and utilities\n * const styledCard = variants.combine(\n * 'card.elevated',\n * 'border-2',\n * 'border-blue-500'\n * );\n * ```\n */\n combine(...r) {\n return r.map((a) => a.includes(\".\") ? this.nested(a) : a).filter(Boolean).join(\" \");\n }\n /**\n * Gets fallback styles for when variants are not found.\n *\n * @private\n * @param component - Component name\n * @param variant - Variant name\n * @returns Fallback CSS classes or empty string\n */\n getFallback(r, a) {\n const n = `${r}.${a}`, i = this.fallbacks.get(n) || this.fallbacks.get(`${r}.default`) || \"\";\n return i || this.logStructuredError(\n \"FALLBACK_NOT_FOUND\",\n `No fallback found for '${r}.${a}'`,\n {\n component: r,\n variant: a,\n availableFallbacks: Array.from(this.fallbacks.keys()),\n suggestion: `Consider adding a fallback with addFallback('${r}.${a}', 'your-classes')`\n }\n ), i;\n }\n /**\n * Logs structured error messages for better debugging and AI assistance.\n *\n * @private\n * @param errorCode - Standardized error code\n * @param message - Human-readable error message\n * @param context - Additional context for debugging\n */\n logStructuredError(r, a, n) {\n const i = {\n timestamp: (/* @__PURE__ */ new Date()).toISOString(),\n code: r,\n message: a,\n context: n,\n source: \"SimpleVariants\"\n };\n console.warn(\"🎨 Design System Warning:\", i);\n }\n /**\n * Gets available variants for a component.\n *\n * @private\n * @param component - Component name\n * @returns Array of available variant names\n */\n getAvailableVariants(r) {\n try {\n const a = this.variants[r];\n return !a || typeof a != \"object\" ? [] : Object.keys(a);\n } catch {\n return [];\n }\n }\n /**\n * Validates variant configuration on initialization.\n *\n * @private\n */\n validateConfiguration() {\n if (!this.variants || typeof this.variants != \"object\") {\n this.logStructuredError(\n \"INVALID_CONFIGURATION\",\n \"Variant configuration is null, undefined, or not an object\",\n {\n configType: typeof this.variants,\n configValue: this.variants,\n suggestion: \"Provide a valid variant configuration object\"\n }\n );\n return;\n }\n const r = [];\n for (const [a, n] of Object.entries(this.variants))\n if (typeof n == \"object\" && n !== null) {\n \"default\" in n || r.push({\n type: \"warning\",\n message: `Component '${a}' has no 'default' variant`,\n component: a\n });\n for (const [i, d] of Object.entries(n))\n typeof d != \"function\" && typeof d != \"string\" && typeof d != \"object\" && r.push({\n type: \"error\",\n message: `Invalid variant type for '${a}.${i}': expected function, string, or object`,\n component: a\n });\n }\n r.length > 0 && this.logStructuredError(\"CONFIGURATION_VALIDATION\", \"Variant configuration has issues\", {\n issues: r,\n totalComponents: Object.keys(this.variants).length,\n recommendations: [\n \"Add default variants to all components\",\n \"Ensure all variants are functions, strings, or objects\",\n \"Consider using TypeScript for better type safety\"\n ]\n });\n }\n /**\n * Adds a custom fallback style for a specific variant.\n *\n * This method allows you to define fallback styles that will be used\n * when a specific variant is not found in the design system.\n *\n * @param key - The variant key in format 'component.variant'\n * @param classes - CSS classes to use as fallback\n *\n * @example\n * ```typescript\n * // Add custom fallback for a missing variant\n * variants.addFallback('button.special', 'bg-purple-600 text-white px-4 py-2 rounded');\n *\n * // Now this will use the fallback if 'special' variant doesn't exist\n * const specialButton = variants.get('button', 'special');\n * ```\n */\n addFallback(r, a) {\n this.fallbacks.set(r, a);\n }\n /**\n * Checks if a specific variant exists in the design system.\n *\n * This utility method helps you conditionally apply variants\n * based on their availability in the design system.\n *\n * @param component - The component name to check\n * @param variant - The variant name to check\n * @returns true if the variant exists, false otherwise\n *\n * @example\n * ```typescript\n * // Check before using a variant\n * if (variants.has('button', 'gradient')) {\n * const buttonClass = variants.get('button', 'gradient');\n * } else {\n * const buttonClass = variants.get('button', 'primary');\n * }\n *\n * // Conditional rendering logic\n * const showGradientOption = variants.has('button', 'gradient');\n * ```\n */\n has(r, a) {\n try {\n const n = this.variants[r];\n return !!(n && n[a]);\n } catch {\n return !1;\n }\n }\n}\nfunction X(t) {\n return new k(t);\n}\nfunction Z(t) {\n const r = new k(t);\n return {\n // Direct access functions\n button: (a, n) => n ? r.sized(\"button\", a, n) : r.get(\"button\", a),\n alert: (a) => r.get(\"alert\", a),\n input: (a) => r.get(\"input\", a),\n badge: (a) => r.get(\"badge\", a),\n // Generic access\n get: (a, n) => r.get(a, n),\n nested: (a) => r.nested(a),\n when: (a, n, i, d, l) => r.when(a, n, i, d, l),\n combine: (...a) => r.combine(...a)\n };\n}\nfunction x(...t) {\n return I(E(t));\n}\nfunction J(t, r) {\n if (t.startsWith(\"hsl(\"))\n return t.replace(\")\", ` / ${r})`);\n if (t.startsWith(\"#\")) {\n const a = t.slice(1), n = parseInt(a.slice(0, 2), 16), i = parseInt(a.slice(2, 4), 16), d = parseInt(a.slice(4, 6), 16);\n return `rgba(${n}, ${i}, ${d}, ${r})`;\n }\n return t;\n}\nfunction ee(t, r = {}) {\n const a = [t];\n return Object.entries(r).forEach(([n, i]) => {\n a.push(`${n}:${i}`);\n }), a.join(\" \");\n}\nfunction re(t, r) {\n return `${t} dark:${r}`;\n}\nfunction te(t, r = \"light\") {\n return t === \"primary\" ? r === \"dark\" ? \"#ffffff\" : \"#111827\" : t === \"secondary\" ? r === \"dark\" ? \"#9ca3af\" : \"#4b5563\" : r === \"dark\" ? \"#ffffff\" : \"#111827\";\n}\nfunction ae(t, r, a = \"to-r\") {\n return `bg-gradient-${a} from-${t} to-${r}`;\n}\nfunction oe(t) {\n return typeof t == \"number\" ? `${t * 0.25}rem` : t;\n}\nfunction ne(t = \"200ms\", r = \"ease-out\") {\n return `transition-all duration-${t.replace(\"ms\", \"\")} ${r}`;\n}\nconst O = {\n button: {\n xs: \"h-7 px-2 text-xs\",\n sm: \"h-8 px-3 text-sm\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-11 px-8 text-base\",\n xl: \"h-12 px-10 text-lg\"\n },\n input: {\n xs: \"h-7 px-2 text-xs\",\n sm: \"h-8 px-3 text-sm\",\n md: \"h-10 px-3 text-sm\",\n lg: \"h-11 px-4 text-base\",\n xl: \"h-12 px-4 text-lg\"\n },\n icon: {\n xs: \"w-3 h-3\",\n sm: \"w-4 h-4\",\n md: \"w-5 h-5\",\n lg: \"w-6 h-6\",\n xl: \"w-8 h-8\"\n }\n};\nfunction ie(t, r = \"md\") {\n return O[t][r];\n}\nconst D = \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\", W = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2\", w = {\n default: \"transition-colors duration-200\",\n all: \"transition-all duration-200\",\n fast: \"transition-all duration-100\",\n slow: \"transition-all duration-300\",\n colors: \"transition-colors duration-200\",\n opacity: \"transition-opacity duration-200\",\n transform: \"transition-transform duration-200\"\n};\nfunction de(t) {\n return t.split(\" \").map((r) => `hover:${r}`).join(\" \");\n}\nfunction le(t = \"opacity-50 cursor-not-allowed pointer-events-none\") {\n return `disabled:${t.replace(/\\s+/g, \" disabled:\")}`;\n}\nconst ge = \"opacity-70 cursor-wait pointer-events-none\";\nfunction se(t) {\n return x({\n default: \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800\",\n primary: \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800\",\n secondary: \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700\",\n destructive: \"bg-red-600 text-white hover:bg-red-700 active:bg-red-800\",\n outline: \"border border-gray-300 bg-transparent hover:bg-gray-50 active:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800\",\n ghost: \"bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-800\"\n }[t], w.default, W);\n}\nfunction be(t = \"default\") {\n return x(\"w-full rounded-md border bg-white px-3 py-2 text-sm placeholder:text-gray-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400\", {\n default: \"border-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-400\",\n error: \"border-red-300 dark:border-red-600 focus:border-red-500 dark:focus:border-red-400\",\n success: \"border-green-300 dark:border-green-600 focus:border-green-500 dark:focus:border-green-400\"\n }[t], D, w.colors);\n}\nfunction ue(t = \"default\") {\n const r = \"rounded-lg bg-white dark:bg-gray-800\";\n return {\n default: r,\n bordered: `${r} border border-gray-200 dark:border-gray-700`,\n elevated: `${r} shadow-md`\n }[t];\n}\nfunction ye(t = \"base\", r = \"normal\", a = \"default\") {\n const n = {\n xs: \"text-xs\",\n sm: \"text-sm\",\n base: \"text-base\",\n lg: \"text-lg\",\n xl: \"text-xl\",\n \"2xl\": \"text-2xl\"\n }, i = {\n normal: \"font-normal\",\n medium: \"font-medium\",\n semibold: \"font-semibold\",\n bold: \"font-bold\"\n }, d = {\n default: \"text-gray-900 dark:text-gray-100\",\n muted: \"text-gray-600 dark:text-gray-400\",\n primary: \"text-blue-600 dark:text-blue-400\"\n };\n return x(n[t], i[r], d[a]);\n}\nconst V = {\n success: \"bg-green-500\",\n error: \"bg-red-500\",\n warning: \"bg-orange-500\",\n attention: \"bg-amber-500\",\n info: \"bg-blue-500\",\n neutral: \"bg-gray-500\"\n};\nfunction ce(t) {\n return V[t];\n}\nconst B = {\n default: \"bg-white dark:bg-gray-800\",\n bordered: \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700\",\n elevated: \"bg-white dark:bg-gray-800 shadow-md\",\n info: \"bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-900 dark:text-blue-300\",\n success: \"bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-900 dark:text-green-300\",\n warning: \"bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 text-orange-900 dark:text-orange-300\",\n attention: \"bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-amber-900 dark:text-amber-300\",\n error: \"bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-900 dark:text-red-300\"\n};\nfunction xe(t) {\n return B[t];\n}\nconst F = {\n primary: {\n background: \"bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20\",\n text: \"text-blue-700 dark:text-blue-300\"\n },\n secondary: {\n background: \"bg-gradient-to-r from-gray-50 to-slate-50 dark:from-gray-800/50 dark:to-slate-800/50\",\n text: \"text-gray-700 dark:text-gray-300\"\n },\n success: {\n background: \"bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20\",\n text: \"text-green-700 dark:text-green-300\"\n },\n warning: {\n background: \"bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20\",\n text: \"text-orange-700 dark:text-orange-300\"\n },\n attention: {\n background: \"bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20\",\n text: \"text-amber-700 dark:text-amber-300\"\n },\n info: {\n background: \"bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-cyan-900/20 dark:to-blue-900/20\",\n text: \"text-blue-700 dark:text-blue-300\"\n },\n purple: {\n background: \"bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20\",\n text: \"text-purple-700 dark:text-purple-300\"\n }\n};\nfunction pe(t) {\n return F[t];\n}\nconst R = {\n default: {\n container: \"bg-gradient-to-r from-blue-600/10 to-purple-600/10 border border-blue-200 text-blue-600 backdrop-blur-sm\",\n icon: \"text-blue-600\"\n },\n premium: {\n container: \"bg-gradient-to-r from-blue-600/10 to-purple-600/10 border border-blue-200 text-blue-600 backdrop-blur-sm\",\n icon: \"text-blue-600\"\n },\n primary: {\n container: \"bg-gradient-to-r from-blue-600/10 to-purple-600/10 border border-blue-200 text-blue-600 backdrop-blur-sm\",\n icon: \"text-blue-600\"\n },\n light: {\n container: \"bg-white/20 border border-white/30 text-white backdrop-blur-sm\",\n icon: \"text-white\"\n }\n};\nfunction fe(t) {\n return R[t];\n}\nconst u = {\n // Background gradients\n backgrounds: {\n main: \"bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-indigo-900\",\n page: \"bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800\",\n pageDark: \"bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800\",\n section: \"bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900 dark:to-blue-900\",\n overlay: \"bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-blue-900/50 dark:to-purple-900/50\"\n },\n // Button gradients\n buttons: {\n primary: \"bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700\",\n primaryBlue: \"bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800\",\n primaryPurple: \"bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800\"\n },\n // Text gradients (use with bg-clip-text text-transparent)\n text: {\n primary: \"bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 dark:from-gray-100 dark:via-blue-200 dark:to-purple-200\",\n secondary: \"bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400\",\n accent: \"bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400\"\n },\n // Special effect gradients\n effects: {\n glow: \"bg-gradient-to-r from-blue-600 to-purple-600\",\n shimmer: \"bg-gradient-to-r from-transparent via-white/20 to-transparent\"\n }\n}, me = {\n // Primary action button with full styling\n primaryButton: `${u.buttons.primary} text-white shadow-lg hover:shadow-xl transition-all duration-200`,\n // Hero button with enhanced styling\n heroButton: `${u.buttons.primary} text-white px-8 py-4 rounded-xl font-bold text-lg transition-all duration-300 transform hover:scale-105 shadow-2xl hover:shadow-blue-500/25`,\n // Header button styling\n headerButton: `${u.buttons.primary} text-white px-4 py-2 rounded-md font-medium transition-all duration-200 transform hover:scale-105 shadow-lg`,\n // Page background with common layout\n pageLayout: `min-h-screen ${u.backgrounds.page}`,\n // Page background with dark mode support\n pageLayoutDark: `min-h-screen ${u.backgrounds.pageDark}`,\n // Text gradient styling\n gradientText: `${u.text.primary} bg-clip-text text-transparent`,\n gradientTextSecondary: `${u.text.secondary} bg-clip-text text-transparent`\n}, he = (t, r) => u[t][r] || \"\", ke = (t, r = \"\") => `${t} ${r}`.trim(), g = {\n // Common layout classes\n layout: {\n section: \"py-20\",\n sectionSm: \"py-16\",\n sectionLg: \"py-24\",\n container: \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\",\n containerSm: \"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\",\n containerLg: \"max-w-8xl mx-auto px-4 sm:px-6 lg:px-8\"\n },\n // Animation durations (in milliseconds)\n animation: {\n fast: 150,\n normal: 300,\n slow: 500,\n extraSlow: 1e3\n },\n // Common spacing patterns\n spacing: {\n sectionGap: \"space-y-20\",\n cardGap: \"space-y-8\",\n listGap: \"space-y-4\",\n inlineGap: \"space-x-4\"\n },\n // Grid patterns\n grid: {\n responsive2: \"grid md:grid-cols-2 gap-8\",\n responsive3: \"grid md:grid-cols-2 lg:grid-cols-3 gap-8\",\n responsive4: \"grid md:grid-cols-2 lg:grid-cols-4 gap-8\",\n autoFit: \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-auto-fit gap-8\"\n },\n // Typography patterns\n typography: {\n hero: \"text-4xl md:text-6xl lg:text-7xl font-bold\",\n heading1: \"text-3xl md:text-5xl font-bold\",\n heading2: \"text-2xl md:text-4xl font-bold\",\n heading3: \"text-xl md:text-2xl font-bold\",\n bodyLarge: \"text-xl md:text-2xl\",\n body: \"text-lg\",\n caption: \"text-sm text-gray-600 dark:text-gray-400\"\n },\n // Card patterns\n card: {\n base: \"bg-white dark:bg-gray-800 rounded-lg shadow-lg\",\n interactive: \"bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow\",\n border: \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg\"\n },\n // Button sizing patterns\n button: {\n sm: \"px-3 py-2 text-sm\",\n md: \"px-4 py-2\",\n lg: \"px-6 py-3 text-lg\",\n xl: \"px-8 py-4 text-xl\"\n },\n // Icon sizing\n icon: {\n xs: \"w-4 h-4\",\n sm: \"w-5 h-5\",\n md: \"w-6 h-6\",\n lg: \"w-8 h-8\",\n xl: \"w-10 h-10\",\n xxl: \"w-12 h-12\"\n },\n // Transition patterns\n transition: {\n base: \"transition-all duration-200\",\n slow: \"transition-all duration-300\",\n colors: \"transition-colors duration-200\",\n transform: \"transition-transform duration-200\",\n shadow: \"transition-shadow duration-200\"\n },\n // Common hover effects\n hover: {\n scale: \"hover:scale-105\",\n scaleSmall: \"hover:scale-102\",\n lift: \"hover:-translate-y-1\",\n glow: \"hover:shadow-lg\"\n },\n // Focus patterns\n focus: {\n ring: \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\",\n ringInset: \"focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500\"\n }\n}, we = {\n // Section with container\n section: `${g.layout.section} ${g.layout.container}`,\n sectionCentered: `${g.layout.section} ${g.layout.container} text-center`,\n // Interactive card\n interactiveCard: `${g.card.interactive} ${g.transition.base} ${g.hover.lift}`,\n // Primary button\n primaryButton: `${g.button.md} ${g.transition.base} ${g.hover.scale} ${g.focus.ring}`,\n // Hero text\n heroText: `${g.typography.hero} leading-tight`,\n // Feature grid\n featureGrid: `${g.grid.responsive4}`,\n // Icon container\n iconContainer: `${g.icon.lg} rounded-full flex items-center justify-center`\n}, y = [\n \"Web3 email platform\",\n \"wallet email\",\n \"ENS email\",\n \"SNS email\",\n \"smart contract integration\",\n \"decentralized email\",\n \"blockchain messaging\",\n \"crypto email\",\n \"Web3 communication\",\n \"secure email\"\n], v = [\n \"Web3 email for users\",\n \"wallet email address\",\n \"passwordless email\",\n \"secure Web3 communication\",\n \"ENS domain email\",\n \"SNS domain email\",\n \"crypto wallet email\",\n \"Web2 Web3 bridge\",\n \"decentralized identity\",\n \"blockchain email\"\n], $ = [\n \"Web3 email API\",\n \"smart contract email integration\",\n \"blockchain developer tools\",\n \"Web3 SDK\",\n \"decentralized messaging API\",\n \"smart contract notifications\",\n \"Web3 developer platform\",\n \"blockchain email service\",\n \"crypto developer tools\",\n \"Web3 infrastructure\"\n], N = [\n \"Web3 email documentation\",\n \"wallet email guide\",\n \"ENS email setup\",\n \"SNS email integration\",\n \"smart contract email API\",\n \"Web3 communication docs\",\n \"blockchain email tutorial\",\n \"crypto wallet email\",\n \"decentralized email guide\",\n \"Web3 developer documentation\"\n], j = (t) => [\n `about ${t}`,\n \"Web3 email team\",\n \"blockchain email company\",\n \"crypto email platform\",\n \"decentralized email team\",\n \"wallet email founders\",\n \"Web3 communication team\",\n \"blockchain messaging company\",\n \"ENS email team\",\n \"crypto startup team\"\n], f = [\n \"DeFi email notifications\",\n \"DAO communication platform\",\n \"NFT email alerts\",\n \"crypto airdrop notifications\",\n \"Web3 social platform\",\n \"blockchain KYC email\",\n \"DeFi yield farming alerts\",\n \"GameFi notification system\",\n \"Layer 2 email integration\",\n \"cross-chain messaging protocol\",\n \"multichain email support\",\n \"decentralized identity verification\",\n \"Web3 reputation system\",\n \"crypto compliance email\"\n], m = [\n \"EIP-712 signature authentication\",\n \"SIWE Sign-In with Ethereum\",\n \"multi-signature wallet email\",\n \"hardware wallet email support\",\n \"Web3 API integration\",\n \"smart contract event notifications\",\n \"IPFS email storage\",\n \"ENS subdomain email routing\",\n \"Chainlink oracle integration\",\n \"Web3 SDK documentation\",\n \"blockchain webhook notifications\",\n \"crypto API endpoints\",\n \"decentralized email protocol\",\n \"Web3 developer tools\"\n], S = [\n \"accessible Web3 email\",\n \"screen reader crypto wallet\",\n \"Web3 accessibility features\",\n \"inclusive blockchain platform\",\n \"accessible wallet integration\",\n \"Web3 WCAG compliance\",\n \"keyboard navigation Web3\",\n \"voice control crypto email\",\n \"high contrast Web3 interface\",\n \"accessible blockchain tools\"\n], c = (...t) => {\n const r = /* @__PURE__ */ new Set();\n return t.forEach((a) => a.forEach((n) => r.add(n))), Array.from(r);\n}, ve = () => c(y, v, f), $e = (t) => c(y, j(t)), je = () => c(y, N, m), Se = () => c(y, v, S), Ce = () => c(y, $, m), ze = () => c(y, $, f), Ee = () => c(y, f, m), Ie = (t) => c(y, j(t), S), p = (t) => ({\n \"@type\": \"Organization\",\n name: t,\n url: `https://${t}`,\n contactPoint: {\n \"@type\": \"ContactPoint\",\n contactType: \"customer service\",\n email: \"support@sudobility.com\"\n }\n}), Ae = (t, r = {}) => ({\n \"@context\": \"https://schema.org\",\n \"@type\": \"SoftwareApplication\",\n name: t,\n description: \"Web3 email platform connecting wallets to email addresses with ENS/SNS domain support and smart contract integration\",\n url: `https://${t}`,\n applicationCategory: \"BusinessApplication\",\n operatingSystem: \"Web\",\n offers: {\n \"@type\": \"Offer\",\n price: \"0\",\n priceCurrency: \"USD\",\n availability: \"https://schema.org/InStock\"\n },\n author: p(t),\n ...r\n}), Te = (t, r = {}) => ({\n \"@context\": \"https://schema.org\",\n \"@type\": \"WebPage\",\n name: t,\n description: \"Web3 email platform connecting wallets to email addresses\",\n url: `https://${t}`,\n ...r\n}), Le = (t, r = {}) => ({\n \"@context\": \"https://schema.org\",\n \"@type\": \"AboutPage\",\n name: `About ${t}`,\n description: `Learn about the team behind ${t}, the revolutionary Web3 email platform that connects wallets to email addresses without passwords.`,\n url: `https://${t}/about`,\n mainEntity: {\n ...p(t),\n \"@id\": `https://${t}/#organization`,\n foundingDate: \"2024\"\n },\n ...r\n}), Oe = (t, r = {}) => ({\n \"@context\": \"https://schema.org\",\n \"@type\": \"TechArticle\",\n name: \"Documentation\",\n headline: `${t} Documentation - Web3 Email Platform Guide`,\n description: `Complete documentation for ${t} Web3 email platform. Learn how to connect wallets, manage ENS/SNS domain emails, integrate smart contracts, and use Web3 communication features.`,\n url: `https://${t}/document`,\n datePublished: \"2025-01-12\",\n dateModified: \"2025-01-12\",\n author: p(t),\n publisher: p(t),\n ...r\n}), P = {\n // State colors\n success: \"text-green-700 dark:text-green-300\",\n error: \"text-red-700 dark:text-red-300\",\n warning: \"text-amber-700 dark:text-amber-300\",\n info: \"text-blue-700 dark:text-blue-300\",\n // Action colors\n primary: \"text-blue-600 dark:text-blue-400\",\n secondary: \"text-gray-600 dark:text-gray-400\",\n accent: \"text-purple-600 dark:text-purple-400\",\n // Content colors\n muted: \"text-gray-500 dark:text-gray-500\",\n emphasis: \"text-gray-900 dark:text-gray-100\",\n subtle: \"text-gray-600 dark:text-gray-400\"\n}, C = {\n // Layout patterns\n centeredContainer: \"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\",\n fullWidthSection: \"w-full py-8 sm:py-12 lg:py-16\",\n flexBetween: \"flex items-center justify-between\",\n flexCenter: \"flex items-center justify-center\",\n gridResponsive: \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\",\n // Interactive states\n clickable: \"cursor-pointer transition-colors duration-200 hover:opacity-80\",\n focusable: \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\",\n disabled: \"opacity-50 cursor-not-allowed pointer-events-none\",\n // Visual hierarchy\n cardShadow: \"shadow-md hover:shadow-lg transition-shadow duration-200\",\n elevatedCard: \"bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700\",\n subtleCard: \"bg-gray-50 dark:bg-gray-900 rounded-md border border-gray-200 dark:border-gray-800\",\n // Spacing patterns\n sectionSpacing: \"py-8 sm:py-12 lg:py-16\",\n componentSpacing: \"space-y-4\",\n tightSpacing: \"space-y-2\",\n looseSpacing: \"space-y-8\"\n}, z = {\n xs: { padding: \"px-2 py-1\", text: \"text-xs\", height: \"h-6\" },\n sm: { padding: \"px-3 py-1.5\", text: \"text-sm\", height: \"h-8\" },\n md: { padding: \"px-4 py-2\", text: \"text-base\", height: \"h-10\" },\n lg: { padding: \"px-6 py-3\", text: \"text-lg\", height: \"h-12\" },\n xl: { padding: \"px-8 py-4\", text: \"text-xl\", height: \"h-14\" }\n};\nfunction U(t) {\n return P[t];\n}\nfunction De(t, r) {\n return x(C[t], r);\n}\nfunction We(t, r) {\n const a = z[t];\n return x(r, a.padding, a.text, a.height);\n}\nfunction Ve(t) {\n const r = [];\n if (t.intent && r.push(U(t.intent)), t.pattern && r.push(C[t.pattern]), t.size) {\n const a = z[t.size];\n r.push(a.padding, a.text, a.height);\n }\n return t.additional && r.push(t.additional), x(...r);\n}\nfunction Be(t, r = {}) {\n const a = [], n = [], i = [];\n for (const [d, l] of Object.entries(t))\n if (r.allowedComponents && !r.allowedComponents.includes(d) && n.push(`Component '${d}' is not in the allowed components list`), r.requireDefault && typeof l == \"object\" && l !== null && (\"default\" in l || (a.push(`Component '${d}' is missing required 'default' variant`), i.push(`Add a 'default' variant to ${d}`))), r.checkTypes && typeof l == \"object\" && l !== null)\n for (const [s, b] of Object.entries(l))\n typeof b != \"function\" && typeof b != \"string\" && typeof b != \"object\" && a.push(\n `Invalid variant type for ${d}.${s}: expected function, string, or object`\n );\n return {\n isValid: a.length === 0,\n errors: a,\n warnings: n,\n suggestions: i\n };\n}\nfunction Fe(t, r, a = \"default\", n = {}) {\n const i = {\n classes: \"\",\n usedFallback: !1,\n warnings: [],\n requested: { component: r, variant: a }\n };\n try {\n const d = t[r];\n if (!d) {\n if (i.warnings?.push(`Component '${r}' not found in configuration`), n.fallback)\n i.classes = n.fallback(r, a), i.usedFallback = !0;\n else if (n.strict)\n throw new Error(`Component '${r}' not found`);\n return i;\n }\n if (typeof d == \"function\")\n return i.classes = d(), i;\n if (typeof d == \"string\")\n return i.classes = d, i;\n if (typeof d == \"object\" && d !== null) {\n const l = d[a];\n if (!l) {\n i.warnings?.push(`Variant '${a}' not found for component '${r}'`);\n const s = d.default;\n if (s)\n return i.classes = typeof s == \"function\" ? s() : String(s), i.usedFallback = !0, i.warnings?.push(\"Using 'default' variant instead\"), i;\n if (n.fallback)\n i.classes = n.fallback(r, a), i.usedFallback = !0;\n else if (n.strict)\n throw new Error(`Variant '${a}' not found for component '${r}'`);\n return i;\n }\n return i.classes = typeof l == \"function\" ? l() : String(l), i;\n }\n } catch (d) {\n i.warnings?.push(\n `Error resolving variant: ${d instanceof Error ? d.message : String(d)}`\n ), n.fallback && (i.classes = n.fallback(r, a), i.usedFallback = !0);\n }\n return i;\n}\nfunction Re(t, r, a = \"\") {\n const n = t[r];\n return !n || typeof n != \"object\" || n === null ? [] : Object.keys(n).filter((i) => i.toLowerCase().includes(a.toLowerCase())).sort();\n}\nfunction Ne(t) {\n const r = {\n componentCount: 0,\n variantCount: 0,\n missingDefaults: [],\n duplicatePatterns: [],\n optimizationSuggestions: []\n }, a = /* @__PURE__ */ new Map();\n for (const [n, i] of Object.entries(t))\n if (r.componentCount++, typeof i == \"object\" && i !== null) {\n const d = Object.keys(i);\n r.variantCount += d.length, d.includes(\"default\") || r.missingDefaults.push(n);\n for (const [l, s] of Object.entries(i)) {\n const b = typeof s == \"function\" ? s() : String(s);\n a.has(b) || a.set(b, []), a.get(b).push(`${n}.${l}`);\n }\n }\n for (const [n, i] of a.entries())\n i.length > 1 && r.duplicatePatterns.push({ pattern: n, components: i });\n return r.missingDefaults.length > 0 && r.optimizationSuggestions.push(\n `Consider adding 'default' variants to: ${r.missingDefaults.join(\", \")}`\n ), r.duplicatePatterns.length > 0 && r.optimizationSuggestions.push(\n `Consider extracting common patterns into shared utilities for: ${r.duplicatePatterns.slice(0, 3).map((n) => `${n.pattern.slice(0, 30)}...`).join(\", \")}`\n ), r;\n}\nconst Pe = {\n // Layout utilities\n layout: {\n container: \"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\",\n containerSmall: \"mx-auto max-w-3xl px-4 sm:px-6 lg:px-8\",\n containerLarge: \"mx-auto max-w-full px-4 sm:px-6 lg:px-8\",\n section: \"py-8 sm:py-12 lg:py-16\",\n sectionSmall: \"py-6 sm:py-8 lg:py-10\",\n flex: \"flex items-center justify-between\",\n flexCenter: \"flex items-center justify-center\",\n flexCol: \"flex flex-col\",\n grid: \"grid grid-cols-1 gap-6\",\n gridMd: \"grid grid-cols-1 md:grid-cols-2 gap-6\",\n gridLg: \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"\n },\n // Section styles with backgrounds\n section: {\n // Standard section with white/dark background\n default: \"py-8 sm:py-12 lg:py-16 bg-white dark:bg-gray-900\",\n // Hero sections (larger spacing)\n hero: \"py-20 bg-white dark:bg-gray-900\",\n // Subtle background sections\n subtle: \"py-8 sm:py-12 lg:py-16 bg-gray-50 dark:bg-gray-800\",\n // Accent background sections\n accent: \"py-8 sm:py-12 lg:py-16 bg-blue-50 dark:bg-blue-900\",\n // Gradient sections with dark mode support\n gradient: \"py-20 bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900 dark:to-blue-900\",\n gradientAmber: \"py-20 bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900 dark:to-yellow-900\",\n gradientBlue: \"py-20 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900 dark:to-purple-900\",\n // No background (transparent)\n transparent: \"py-8 sm:py-12 lg:py-16\"\n },\n // Background utilities\n background: {\n surface: \"bg-white dark:bg-gray-800\",\n subtle: \"bg-gray-50 dark:bg-gray-900\",\n muted: \"bg-gray-100 dark:bg-gray-700\",\n overlay: \"bg-black/50 dark:bg-black/70\"\n },\n // Border utilities\n border: {\n default: \"border-gray-200 dark:border-gray-700\",\n subtle: \"border-gray-100 dark:border-gray-800\",\n radius: \"rounded-lg\",\n radiusSm: \"rounded-md\",\n radiusLg: \"rounded-xl\",\n radiusFull: \"rounded-full\"\n },\n // Shadow utilities\n shadow: {\n sm: \"shadow-sm\",\n md: \"shadow-md\",\n lg: \"shadow-lg\",\n xl: \"shadow-xl\"\n },\n // Spacing utilities\n spacing: {\n card: {\n sm: \"p-4\",\n md: \"p-6\",\n lg: \"p-8\"\n },\n section: {\n sm: \"py-6 px-4\",\n md: \"py-8 px-6\",\n lg: \"py-12 px-8\"\n }\n },\n // Typography utilities - Enhanced with design system\n text: {\n // Headings\n h1: \"text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h2: \"text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h3: \"text-xl sm:text-2xl font-semibold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h4: \"text-lg sm:text-xl font-semibold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h5: \"text-base sm:text-lg font-semibold text-gray-900 dark:text-white leading-tight tracking-tight\",\n h6: \"text-base font-semibold text-gray-900 dark:text-white leading-tight tracking-tight\",\n // Display headings\n display: \"text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold text-gray-900 dark:text-white leading-none tracking-tight\",\n hero: \"text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-black text-gray-900 dark:text-white leading-none tracking-tight\",\n // Body text\n body: \"text-base font-normal text-gray-700 dark:text-gray-300 leading-relaxed\",\n bodyLarge: \"text-lg font-normal text-gray-700 dark:text-gray-300 leading-relaxed\",\n bodySmall: \"text-sm font-normal text-gray-600 dark:text-gray-400 leading-relaxed\",\n // Lead text (introductory paragraphs)\n lead: \"text-xl font-normal text-gray-700 dark:text-gray-300 leading-relaxed\",\n leadLarge: \"text-2xl font-normal text-gray-700 dark:text-gray-300 leading-relaxed\",\n // Specialized text\n caption: \"text-sm font-normal text-gray-500 dark:text-gray-500 leading-normal\",\n label: \"text-sm font-medium text-gray-700 dark:text-gray-300\",\n helper: \"text-sm font-normal text-gray-500 dark:text-gray-500\",\n // Links\n link: \"text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline underline-offset-2 decoration-blue-600 dark:decoration-blue-400 transition-colors duration-150\",\n linkSubtle: \"text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 no-underline hover:underline hover:underline-offset-2 transition-all duration-150\",\n linkMuted: \"text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline underline-offset-2 decoration-gray-400 hover:decoration-gray-600 transition-colors duration-150\",\n // Code text\n code: \"font-mono text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded\",\n codeBlock: \"font-mono text-sm font-normal text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto leading-relaxed\",\n // Status text\n success: \"text-green-700 dark:text-green-300 font-medium\",\n warning: \"text-orange-700 dark:text-orange-300 font-medium\",\n attention: \"text-amber-700 dark:text-amber-300 font-medium\",\n error: \"text-red-700 dark:text-red-300 font-medium\",\n info: \"text-blue-700 dark:text-blue-300 font-medium\",\n // Emphasis variants\n emphasis: \"font-medium text-gray-900 dark:text-gray-100\",\n strong: \"font-semibold text-gray-900 dark:text-gray-100\",\n muted: \"text-gray-500 dark:text-gray-500\",\n // Uppercase labels\n uppercase: \"text-xs font-semibold text-gray-500 dark:text-gray-500 uppercase tracking-wider\"\n },\n // Transition utilities\n transition: {\n default: \"transition-colors duration-200\",\n all: \"transition-all duration-200\",\n fast: \"transition-all duration-150\",\n slow: \"transition-all duration-300\",\n transform: \"transition-transform duration-200\"\n },\n // Interactive states\n states: {\n hover: \"hover:opacity-80 transition-opacity duration-200\",\n focus: \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\",\n disabled: \"disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none\",\n loading: \"animate-pulse\"\n },\n // Table utilities\n table: {\n // Table container\n container: \"bg-white dark:bg-gray-900 rounded-2xl shadow-xl overflow-hidden\",\n wrapper: \"overflow-x-auto\",\n base: \"w-full\",\n // Table header\n thead: \"bg-gray-50 dark:bg-gray-800\",\n th: \"px-6 py-4 text-left text-sm font-semibold text-gray-900 dark:text-gray-100\",\n // Table body\n tbody: \"divide-y divide-gray-200 dark:divide-gray-700\",\n // Table rows (alternating)\n tr: \"bg-white dark:bg-gray-900\",\n trAlt: \"bg-gray-50 dark:bg-gray-800\",\n // Table cells\n td: \"px-6 py-4 text-sm text-gray-900 dark:text-gray-100\"\n },\n // Card utilities\n card: {\n // Standard cards with shadow\n default: \"bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg\",\n large: \"bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl\",\n // Cards with border instead of shadow\n bordered: \"bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700\",\n // Cards with hover effects\n interactive: \"bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow\",\n // Feature cards (for grids)\n feature: \"bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow\"\n },\n // Badge utilities\n badge: {\n blue: \"inline-flex items-center bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 px-4 py-2 rounded-full\",\n green: \"inline-flex items-center bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 px-4 py-2 rounded-full\",\n purple: \"inline-flex items-center bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 px-4 py-2 rounded-full\",\n amber: \"inline-flex items-center bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 px-4 py-2 rounded-full\",\n gray: \"inline-flex items-center bg-gray-100 dark:bg-gray-900/30 text-gray-800 dark:text-gray-300 px-4 py-2 rounded-full\"\n },\n // Web3 specific utilities\n web3: {\n walletButton: \"bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium\",\n chainBadge: (t) => t === \"ethereum\" ? \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\" : \"bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\",\n addressText: \"font-mono text-sm text-gray-600 dark:text-gray-400\"\n }\n};\nexport {\n S as ACCESSIBILITY_KEYWORDS,\n y as BASE_KEYWORDS,\n G as Colors,\n $ as DEVELOPER_KEYWORDS,\n N as DOCUMENTATION_KEYWORDS,\n u as GRADIENTS,\n me as GRADIENT_CLASSES,\n P as SEMANTIC_COLOR_MAP,\n z as SIZE_SCALES,\n k as SimpleVariants,\n m as TECHNICAL_SEO_KEYWORDS,\n e as Tokens,\n K as Typography,\n g as UI_CONSTANTS,\n we as UI_CONSTANTS_PATTERNS,\n C as UI_PATTERNS,\n v as USER_FOCUSED_KEYWORDS,\n Q as Variants,\n f as WEB3_TRENDING_KEYWORDS,\n Ne as analyzeVariantUsage,\n ne as animation,\n De as applyUIPattern,\n L as buildColorClass,\n L as buildColorClassLegacy,\n se as buttonVariant,\n F as calloutVariantColors,\n ue as cardVariant,\n B as cardVariantColors,\n x as cn,\n G as colors,\n G as colorsLegacy,\n ke as combineGradient,\n c as combineKeywords,\n H as combineTextStyles,\n H as combineTextStylesLegacy,\n Le as createAboutPageData,\n p as createBaseOrganization,\n j as createCompanyKeywords,\n Ve as createComponentWithIntent,\n Z as createQuickVariants,\n Y as createResponsiveText,\n Y as createResponsiveTextLegacy,\n We as createSizedComponent,\n Ae as createSoftwareApplicationData,\n Oe as createTechArticleData,\n q as createTextStyle,\n q as createTextStyleLegacy,\n X as createVariants,\n Te as createWebPageData,\n e as designTokens,\n e as designTokensLegacy,\n le as disabledState,\n D as focusRing,\n W as focusVisible,\n $e as getAboutPageKeywords,\n pe as getCalloutVariantColors,\n xe as getCardVariantColors,\n T as getColorClasses,\n T as getColorClassesLegacy,\n Ie as getContactKeywords,\n Ce as getDeveloperPageKeywords,\n je as getDocumentationKeywords,\n he as getGradient,\n ve as getHomePageKeywords,\n fe as getSectionBadgeColors,\n U as getSemanticColor,\n ie as getSizeClasses,\n ce as getStatusIndicatorColor,\n Ee as getSubscriptionKeywords,\n te as getThemeSemanticColor,\n Se as getUserPageKeywords,\n Re as getVariantSuggestions,\n ze as getWeb3ProjectsKeywords,\n ae as gradient,\n de as hoverState,\n be as inputVariant,\n ge as loadingState,\n ee as responsive,\n Fe as safeResolveVariant,\n R as sectionBadgeColors,\n O as sizeClasses,\n oe as spacing,\n V as statusIndicatorColors,\n ye as textVariant,\n K as textVariants,\n K as textVariantsLegacy,\n re as themeColor,\n w as transitions,\n Pe as ui,\n Be as validateVariantConfig,\n Q as variants,\n Q as variantsLegacy,\n J as withOpacity\n};\n","import React from 'react';\nimport { variants, getStatusIndicatorColor } from '@sudobility/design';\n\nexport type StatusType =\n | 'verified'\n | 'connected'\n | 'disconnected'\n | 'pending'\n | 'error'\n | 'success'\n | 'warning';\n\n// Local ChainType enum to avoid @johnqh/lib dependency\nexport type ChainType = 'evm' | 'solana' | 'unknown';\n\nexport interface StatusBadgeProps {\n status: StatusType;\n label?: string;\n showDot?: boolean;\n size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface ChainBadgeProps {\n chainType: ChainType;\n size?: 'sm' | 'md' | 'lg';\n}\n\n// Map StatusType to design system status indicator types\nconst getStatusDotColor = (status: StatusType) => {\n switch (status) {\n case 'verified':\n case 'success':\n return getStatusIndicatorColor('success');\n case 'connected':\n case 'warning':\n return getStatusIndicatorColor('warning');\n case 'disconnected':\n case 'error':\n return getStatusIndicatorColor('error');\n case 'pending':\n return getStatusIndicatorColor('info');\n default:\n return getStatusIndicatorColor('neutral');\n }\n};\n\n// Dot size classes for different badge sizes\nconst getDotSizeClass = (size: 'sm' | 'md' | 'lg') => {\n switch (size) {\n case 'sm':\n return 'w-1.5 h-1.5';\n case 'lg':\n return 'w-3 h-3';\n default: // md\n return 'w-2 h-2';\n }\n};\n\nexport const StatusBadge: React.FC<StatusBadgeProps> = ({\n status,\n label,\n showDot = true,\n size = 'md',\n}) => {\n const defaultLabels: Record<StatusType, string> = {\n verified: 'Verified',\n connected: 'Connected',\n disconnected: 'Disconnected',\n pending: 'Pending',\n error: 'Error',\n success: 'Success',\n warning: 'Warning',\n };\n\n const displayLabel = label || defaultLabels[status];\n\n // Use design system badge variants for consistent styling\n const getDesignSystemVariant = (\n status: StatusType,\n size: 'sm' | 'md' | 'lg'\n ) => {\n const sizeMap = { sm: 'small', md: 'default', lg: 'large' } as const;\n const variantMap = {\n verified: 'success',\n success: 'success',\n connected: 'warning',\n warning: 'warning',\n disconnected: 'error',\n error: 'error',\n pending: 'primary',\n } as const;\n\n const variant = variantMap[status] || 'default';\n const badgeSize = sizeMap[size];\n\n if (badgeSize === 'default') {\n return variants.badge[variant as keyof typeof variants.badge]() as string;\n } else {\n return variants.badge[badgeSize](variant) as string;\n }\n };\n\n const badgeClass = getDesignSystemVariant(status, size);\n const dotColor = getStatusDotColor(status);\n const dotSize = getDotSizeClass(size);\n\n return (\n <span className={badgeClass}>\n {showDot && (\n <span\n className={`inline-block ${dotSize} rounded-full ${dotColor} mr-1`}\n />\n )}\n {displayLabel}\n </span>\n );\n};\n\nexport const ChainBadge: React.FC<ChainBadgeProps> = ({\n chainType,\n size = 'md',\n}) => {\n if (chainType === 'unknown') return null;\n\n const chainLabel = chainType === 'solana' ? 'SOL' : 'ETH';\n const sizeMap = { sm: 'small', md: 'default', lg: 'large' } as const;\n const badgeSize = sizeMap[size];\n\n // Use design system Web3 badge variants\n const getBadgeClass = () => {\n const badgeType = chainType === 'solana' ? 'solana' : 'ethereum';\n if (badgeSize === 'default') {\n return variants.badge[badgeType]();\n } else {\n return variants.badge[badgeSize](badgeType);\n }\n };\n\n return <span className={getBadgeClass() as string}>{chainLabel}</span>;\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UstickyUnote Component\n *\n * A reusable UstickyUnote component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UstickyUnote className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/sticky-note}\n */\n\nexport interface UstickyUnoteProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UstickyUnote = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UstickyUnoteProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UstickyUnote'\n >\n {children || 'UstickyUnote Component'}\n </div>\n );\n};\n","import { cn } from '@sudobility/components';\n\n/**\n * UsystemUstatus Component\n *\n * A reusable UsystemUstatus component with full dark mode support.\n * Optimized for accessibility and AI-assisted development.\n *\n * @component\n * @example\n * ```tsx\n * <UsystemUstatus className=\"custom-class\" />\n * ```\n *\n * @remarks\n * This component supports:\n * - Light and dark themes automatically\n * - Responsive design\n * - Accessibility features\n * - TypeScript type safety\n *\n * @see {@link https://docs.example.com/components/system-status}\n */\n\nexport interface UsystemUstatusProps {\n /** Additional CSS classes */\n className?: string;\n /** Component children */\n children?: React.ReactNode;\n /** Disabled state */\n disabled?: boolean;\n /** Callback when component is interacted with */\n onClick?: () => void;\n}\n\nexport const UsystemUstatus = ({\n className,\n children,\n disabled = false,\n onClick,\n}: UsystemUstatusProps) => {\n return (\n <div\n className={cn(\n 'p-4 rounded-lg border transition-colors',\n 'bg-white dark:bg-gray-900',\n 'border-gray-200 dark:border-gray-700',\n 'text-gray-900 dark:text-white',\n disabled && 'opacity-50 cursor-not-allowed',\n 'hover:bg-gray-50 dark:hover:bg-gray-800',\n className\n )}\n onClick={disabled ? undefined : onClick}\n role='region'\n aria-label='UsystemUstatus'\n >\n {children || 'UsystemUstatus Component'}\n </div>\n );\n};\n"],"names":["REACT_ELEMENT_TYPE","REACT_FRAGMENT_TYPE","jsxProd","type","config","maybeKey","key","propName","reactJsxRuntime_production","getComponentNameFromType","REACT_CLIENT_REFERENCE","REACT_PROFILER_TYPE","REACT_STRICT_MODE_TYPE","REACT_SUSPENSE_TYPE","REACT_SUSPENSE_LIST_TYPE","REACT_ACTIVITY_TYPE","REACT_PORTAL_TYPE","REACT_CONTEXT_TYPE","REACT_CONSUMER_TYPE","REACT_FORWARD_REF_TYPE","innerType","REACT_MEMO_TYPE","REACT_LAZY_TYPE","testStringCoercion","value","checkKeyStringCoercion","JSCompiler_inline_result","JSCompiler_temp_const","JSCompiler_inline_result$jscomp$0","getTaskName","name","getOwner","dispatcher","ReactSharedInternals","UnknownOwner","hasValidKey","hasOwnProperty","getter","defineKeyPropWarningGetter","props","displayName","warnAboutAccessingKey","specialPropKeyWarningShown","elementRefGetterWithDeprecationWarning","componentName","didWarnAboutElementRef","ReactElement","owner","debugStack","debugTask","refProp","jsxDEVImpl","isStaticChildren","children","isArrayImpl","validateChildKeys","keys","k","didWarnAboutKeySpread","node","isValidElement","object","React","require$$0","createTask","callStackForError","unknownOwnerDebugStack","unknownOwnerDebugTask","reactJsxRuntime_development","trackActualOwner","jsxRuntimeModule","require$$1","Blockquote","cite","variant","size","className","sizeClasses","citeSize","variantClasses","jsxs","cn","jsx","UchecklistUprogress","disabled","onClick","UformUbuilder","UformUtemplate","UformUvalidator","UnetworkUstatus","UprocessUdiagram","QuoteGenerator","SafetyChecklist","Q","t","r","V","ce","getStatusDotColor","status","getStatusIndicatorColor","getDotSizeClass","StatusBadge","label","showDot","displayLabel","badgeClass","sizeMap","badgeSize","variants","dotColor","dotSize","ChainBadge","chainType","chainLabel","getBadgeClass","badgeType","UstickyUnote","UsystemUstatus"],"mappings":"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","x_google_ignoreList":[0,1,2,12]}