@vtx-ui/react 0.0.1-beta.1 → 0.0.1-beta.3

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 (10) hide show
  1. package/dist/hoc/withParsedClasses.d.ts +4 -0
  2. package/dist/index.cjs.js +1 -1
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.esm.js +1 -1
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/types/components/Text/Text.d.ts +2 -51
  7. package/dist/types/hoc/withParsedClasses.d.ts +4 -0
  8. package/dist/types/utils/parseClass.d.ts +1 -0
  9. package/dist/utils/parseClass.d.ts +1 -0
  10. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsx as n,jsxs as r,Fragment as t}from"react/jsx-runtime";import*as e from"react";import o,{useId as a,useRef as i,useImperativeHandle as l,useEffect as c,useState as v,Children as s,isValidElement as d,useCallback as x,createContext as p,useContext as m,cloneElement as u,useMemo as h}from"react";import{createPortal as g}from"react-dom";const f=[50,100,200,300,400,500,600,700,800,900];function b(n){const r={};for(const[t,e]of Object.entries(n))"string"==typeof e?(r[t]={},f.forEach(n=>{r[t][n]=e})):"object"==typeof e&&null!==e&&(r[t]=e);return r}const w={colors:{primary:{50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a"},secondary:{50:"#f5f3ff",100:"#ede9fe",200:"#ddd6fe",300:"#c4b5fd",400:"#a78bfa",500:"#8b5cf6",600:"#7c3aed",700:"#6d28d9",800:"#5b21b6",900:"#4c1d95"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",600:"#525252",700:"#404040",800:"#262626",900:"#171717"},success:{50:"#f0fdf4",500:"#22c55e",600:"#16a34a",700:"#15803d"},warning:{50:"#fffbeb",500:"#f59e0b",600:"#d97706",700:"#b45309"},error:{50:"#fef2f2",500:"#ef4444",600:"#dc2626",700:"#b91c1c"},info:{50:"#eff6ff",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8"}},spacing:{0:"0",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem"},typography:{fontFamily:{sans:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',mono:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem","7xl":"4.5rem","8xl":"6rem","9xl":"8rem"},fontWeight:{thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"},lineHeight:{none:"1",tight:"1.25",snug:"1.375",normal:"1.5",relaxed:"1.625",loose:"2"},letterSpacing:{tighter:"-0.05em",tight:"-0.025em",normal:"0",wide:"0.025em",wider:"0.05em",widest:"0.1em"},textVariants:{h1:{fontSize:"3.75rem",fontWeight:"700",lineHeight:"1.2",letterSpacing:"-0.025em"},h2:{fontSize:"3rem",fontWeight:"700",lineHeight:"1.25",letterSpacing:"-0.025em"},h3:{fontSize:"2.25rem",fontWeight:"600",lineHeight:"1.3",letterSpacing:"-0.025em"},h4:{fontSize:"1.875rem",fontWeight:"600",lineHeight:"1.35",letterSpacing:"0"},h5:{fontSize:"1.5rem",fontWeight:"600",lineHeight:"1.4",letterSpacing:"0"},h6:{fontSize:"1.25rem",fontWeight:"600",lineHeight:"1.5",letterSpacing:"0"},body1:{fontSize:"1rem",fontWeight:"400",lineHeight:"1.5",letterSpacing:"0"},body2:{fontSize:"0.875rem",fontWeight:"400",lineHeight:"1.5",letterSpacing:"0"},subtitle1:{fontSize:"1.125rem",fontWeight:"500",lineHeight:"1.5",letterSpacing:"0"},subtitle2:{fontSize:"1rem",fontWeight:"500",lineHeight:"1.5",letterSpacing:"0"},caption:{fontSize:"0.75rem",fontWeight:"400",lineHeight:"1.5",letterSpacing:"0.025em"},overline:{fontSize:"0.75rem",fontWeight:"600",lineHeight:"1.5",letterSpacing:"0.1em",textTransform:"uppercase"},button:{fontSize:"0.875rem",fontWeight:"600",lineHeight:"1.5",letterSpacing:"0.025em"},label:{fontSize:"0.875rem",fontWeight:"500",lineHeight:"1.5",letterSpacing:"0"}}},borderRadius:{none:"0",sm:"0.125rem",base:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem",full:"9999px"},shadows:{sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",base:"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",none:"none"},transitions:{fast:"150ms cubic-bezier(0.4, 0, 0.2, 1)",base:"200ms cubic-bezier(0.4, 0, 0.2, 1)",slow:"300ms cubic-bezier(0.4, 0, 0.2, 1)"},zIndex:{dropdown:1e3,sticky:1100,modal:1200,tooltip:1300,notification:1400}};function y(){const n=[];return Object.entries(w.colors).forEach(([r,t])=>{"object"==typeof t?Object.entries(t).forEach(([t,e])=>{n.push(` --vtx-color-${r}-${t}: ${e};`)}):n.push(` --vtx-color-${r}: ${t};`)}),Object.entries(w.spacing).forEach(([r,t])=>{n.push(` --vtx-spacing-${r}: ${t};`)}),Object.entries(w.typography.fontFamily).forEach(([r,t])=>{n.push(` --vtx-font-family-${r}: ${t};`)}),Object.entries(w.typography.fontSize).forEach(([r,t])=>{n.push(` --vtx-font-size-${r}: ${t};`)}),Object.entries(w.typography.fontWeight).forEach(([r,t])=>{n.push(` --vtx-font-weight-${r}: ${t};`)}),Object.entries(w.typography.lineHeight).forEach(([r,t])=>{n.push(` --vtx-line-height-${r}: ${t};`)}),Object.entries(w.typography.letterSpacing).forEach(([r,t])=>{n.push(` --vtx-letter-spacing-${r}: ${t};`)}),Object.entries(w.typography.textVariants).forEach(([r,t])=>{Object.entries(t).forEach(([t,e])=>{const o=t.replace(/([A-Z])/g,"-$1").toLowerCase();n.push(` --vtx-text-${r}-${o}: ${e};`)})}),Object.entries(w.borderRadius).forEach(([r,t])=>{n.push(` --vtx-radius-${r}: ${t};`)}),Object.entries(w.shadows).forEach(([r,t])=>{n.push(` --vtx-shadow-${r}: ${t};`)}),Object.entries(w.transitions).forEach(([r,t])=>{n.push(` --vtx-transition-${r}: ${t};`)}),Object.entries(w.zIndex).forEach(([r,t])=>{n.push(` --vtx-z-${r}: ${t};`)}),n.join("\n")}function k(){if("undefined"==typeof document)return;const n="vtx-ui-variables";let r=document.getElementById(n);r||(r=document.createElement("style"),r.id=n,document.head.appendChild(r));const t=y();r.textContent=`:root {\n${t}\n}`}const z=o.createContext(void 0),N=o.forwardRef(({children:r,initialMode:t="light",customTokens:e,defaultSize:a="md",...i},l)=>{const[c,v]=o.useState(t),[s,d]=o.useState(a),x=o.useMemo(()=>{if(!e)return{tokens:w,mode:c,defaultSize:s};let n={...w,...e};return e.colors&&(n.colors={...w.colors,...b(e.colors)}),{tokens:n,mode:c,defaultSize:s}},[e,c,s]);o.useEffect(()=>{document.documentElement.setAttribute("data-theme",c),e&&k()},[c,e]);const p=o.useMemo(()=>({theme:x,setMode:v,setDefaultSize:d}),[x]);return n(z.Provider,{value:p,children:n("div",{ref:l,...i,children:r})})});N.displayName="ThemeProvider";const C=()=>{const n=o.useContext(z);if(!n)throw new Error("useThemeContext must be used within a ThemeProvider");return n};function S(n,r){void 0===r&&(r={});var t=r.insertAt;if(n&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}S(".vtx-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: var(--vtx-spacing-2);\r\n font-family: var(--vtx-font-family-sans);\r\n font-weight: var(--vtx-font-weight-medium);\r\n border: 1px solid transparent;\r\n border-radius: var(--vtx-radius-md);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-base);\r\n white-space: nowrap;\r\n user-select: none;\r\n text-decoration: none;\r\n position: relative;\r\n}\r\n\r\n.vtx-button:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n}\r\n\r\n.vtx-button:disabled,\r\n.vtx-button[aria-disabled='true'] {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n/* Sizes */\r\n.vtx-button--sm {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-3);\r\n font-size: var(--vtx-font-size-sm);\r\n min-height: 32px;\r\n}\r\n\r\n.vtx-button--md {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-base);\r\n min-height: 40px;\r\n}\r\n\r\n.vtx-button--lg {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-lg);\r\n min-height: 48px;\r\n}\r\n\r\n/* Variants */\r\n.vtx-button--primary {\r\n background-color: var(--vtx-color-primary-600);\r\n color: white;\r\n}\r\n\r\n.vtx-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-button--primary:active:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-primary-800);\r\n}\r\n\r\n.vtx-button--secondary {\r\n background-color: var(--vtx-color-secondary-600);\r\n color: white;\r\n}\r\n\r\n.vtx-button--secondary:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-secondary-700);\r\n}\r\n\r\n.vtx-button--secondary:active:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-secondary-800);\r\n}\r\n\r\n.vtx-button--outline {\r\n background-color: transparent;\r\n border-color: var(--vtx-color-neutral-300);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-neutral-50);\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-button--ghost {\r\n background-color: transparent;\r\n color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.vtx-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n.vtx-button--danger {\r\n background-color: var(--vtx-color-error-600);\r\n color: white;\r\n}\r\n\r\n.vtx-button--danger:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-error-700);\r\n}\r\n\r\n.vtx-button--success {\r\n background-color: var(--vtx-color-success-600, #16a34a);\r\n color: white;\r\n}\r\n\r\n.vtx-button--success:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-success-700, #15803d);\r\n}\r\n\r\n.vtx-button--success:active:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-success-800, #166534);\r\n}\r\n\r\n.vtx-button--warning {\r\n background-color: var(--vtx-color-warning-500, #f59e42);\r\n color: var(--vtx-color-warning-contrast, #1a1a1a);\r\n}\r\n\r\n.vtx-button--warning:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-warning-600, #d97706);\r\n}\r\n\r\n.vtx-button--warning:active:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-warning-700, #b45309);\r\n}\r\n\r\n/* Full width */\r\n.vtx-button--full-width {\r\n width: 100%;\r\n}\r\n\r\n/* Loading state */\r\n.vtx-button--loading .vtx-button__content {\r\n visibility: hidden;\r\n}\r\n\r\n.vtx-button__spinner {\r\n position: absolute;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.vtx-button__spinner-icon {\r\n width: 1em;\r\n height: 1em;\r\n animation: vtx-spin 0.6s linear infinite;\r\n}\r\n\r\n.vtx-button__spinner-circle {\r\n stroke: currentColor;\r\n stroke-linecap: round;\r\n stroke-dasharray: 50;\r\n stroke-dashoffset: 25;\r\n}\r\n\r\n@keyframes vtx-spin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Icons */\r\n.vtx-button__icon-left,\r\n.vtx-button__icon-right {\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-button__icon-left {\r\n margin-left: calc(var(--vtx-spacing-1) * -1);\r\n}\r\n\r\n.vtx-button__icon-right {\r\n margin-right: calc(var(--vtx-spacing-1) * -1);\r\n}\r\n\r\n/* Dark/Light text override */\r\n.vtx-button--dark-text {\r\n color: var(--vtx-color-dark-text, var(--vtx-color-neutral-900)) !important;\r\n}\r\n.vtx-button--light-text {\r\n color: var(--vtx-color-light-text, var(--vtx-color-white)) !important;\r\n}\r\n");const _=o.forwardRef(({children:e,variant:o="primary",size:a,fullWidth:i=!1,loading:l=!1,disabled:c=!1,leftIcon:v,rightIcon:s,iconOnly:d=!1,loadingText:x,asLink:p=!1,href:m,target:u,rel:h,className:g="",type:f="button",...b},w)=>{const{theme:y}=C(),k=["vtx-button",`vtx-button--${o}`,`vtx-button--${a||y.defaultSize||"md"}`,i&&"vtx-button--full-width",l&&"vtx-button--loading",d&&"vtx-button--icon-only",!0===b.darkText&&"vtx-button--dark-text",!1===b.darkText&&"vtx-button--light-text",g].filter(Boolean).join(" "),z=b.style?{...b.style}:{};b.textColor&&(z.color=b.textColor);const N=r(t,{children:[l&&n("span",{className:"vtx-button__spinner",role:"status","aria-label":"Loading",children:n("svg",{className:"vtx-button__spinner-icon",viewBox:"0 0 24 24",children:n("circle",{className:"vtx-button__spinner-circle",cx:"12",cy:"12",r:"10",fill:"none",strokeWidth:"3"})})}),!l&&v&&n("span",{className:"vtx-button__icon-left",children:v}),!d&&n("span",{className:"vtx-button__content",children:l&&x?x:e}),d&&!l&&e,!l&&s&&n("span",{className:"vtx-button__icon-right",children:s})]});return p&&m?n("a",{ref:w,href:m,target:u,rel:"_blank"===u?"noopener noreferrer":h,className:k,"aria-disabled":c||l,style:z,...b,children:N}):n("button",{ref:w,type:f,className:k,disabled:c||l,"aria-busy":l,"aria-disabled":c||l,style:z,...b,children:N})});_.displayName="Button";S("/* Checkbox Base Styles */\r\n.vtx-checkbox {\r\n display: inline-flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n}\r\n\r\n/* Label Container */\r\n.vtx-checkbox-label {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2);\r\n cursor: pointer;\r\n user-select: none;\r\n position: relative;\r\n}\r\n\r\n/* Wrapper for input and visual checkbox */\r\n.vtx-checkbox-wrapper {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Hidden input */\r\n.vtx-checkbox-input {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0;\r\n height: 0;\r\n margin: 0;\r\n padding: 0;\r\n pointer-events: none;\r\n}\r\n\r\n/* Visual checkbox box */\r\n.vtx-checkbox-box {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--vtx-checkbox-size, 20px);\r\n height: var(--vtx-checkbox-size, 20px);\r\n border: var(--vtx-checkbox-border-width, 2px) solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-checkbox-border-radius, 4px);\r\n background-color: white;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Icons */\r\n.vtx-checkbox-icon {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n color: white;\r\n opacity: 0;\r\n transform: scale(0.5);\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n/* Checked state */\r\n.vtx-checkbox-input:checked + .vtx-checkbox-box {\r\n background-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n border-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n}\r\n\r\n.vtx-checkbox-input:checked + .vtx-checkbox-box .vtx-checkbox-icon--check {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n/* Indeterminate state */\r\n.vtx-checkbox-input:indeterminate + .vtx-checkbox-box {\r\n background-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n border-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n}\r\n\r\n.vtx-checkbox-input:indeterminate + .vtx-checkbox-box .vtx-checkbox-icon--indeterminate {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n/* Hover state */\r\n.vtx-checkbox-label:hover .vtx-checkbox-box {\r\n border-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n}\r\n\r\n.vtx-checkbox-label:hover .vtx-checkbox-input:checked + .vtx-checkbox-box,\r\n.vtx-checkbox-label:hover .vtx-checkbox-input:indeterminate + .vtx-checkbox-box {\r\n background-color: var(--vtx-checkbox-hover-color, var(--vtx-color-primary-700));\r\n border-color: var(--vtx-checkbox-hover-color, var(--vtx-color-primary-700));\r\n}\r\n\r\n/* Focus state */\r\n.vtx-checkbox-input:focus-visible + .vtx-checkbox-box {\r\n outline: 2px solid var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Disabled state */\r\n.vtx-checkbox--disabled .vtx-checkbox-label {\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n}\r\n\r\n.vtx-checkbox--disabled .vtx-checkbox-box {\r\n background-color: var(--vtx-color-neutral-100);\r\n border-color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n.vtx-checkbox--disabled .vtx-checkbox-input:checked + .vtx-checkbox-box,\r\n.vtx-checkbox--disabled .vtx-checkbox-input:indeterminate + .vtx-checkbox-box {\r\n background-color: var(--vtx-color-neutral-300);\r\n border-color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n.vtx-checkbox--disabled .vtx-checkbox-label:hover .vtx-checkbox-box {\r\n border-color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n/* Error state */\r\n.vtx-checkbox--error .vtx-checkbox-box {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-checkbox--error .vtx-checkbox-input:checked + .vtx-checkbox-box,\r\n.vtx-checkbox--error .vtx-checkbox-input:indeterminate + .vtx-checkbox-box {\r\n background-color: var(--vtx-color-error-600);\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-checkbox--error .vtx-checkbox-label:hover .vtx-checkbox-input:checked + .vtx-checkbox-box,\r\n.vtx-checkbox--error\r\n .vtx-checkbox-label:hover\r\n .vtx-checkbox-input:indeterminate\r\n + .vtx-checkbox-box {\r\n background-color: var(--vtx-color-error-700);\r\n border-color: var(--vtx-color-error-700);\r\n}\r\n\r\n/* Label text */\r\n.vtx-checkbox-label-text {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-checkbox--disabled .vtx-checkbox-label-text {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n/* Helper text */\r\n.vtx-checkbox-helper-text {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-600);\r\n margin-left: calc(var(--vtx-checkbox-size, 20px) + var(--vtx-spacing-2));\r\n}\r\n\r\n.vtx-checkbox--error .vtx-checkbox-helper-text {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Size variants */\r\n.vtx-checkbox--sm {\r\n --vtx-checkbox-size: 16px;\r\n --vtx-checkbox-border-width: 2px;\r\n}\r\n\r\n.vtx-checkbox--sm .vtx-checkbox-label-text {\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-checkbox--sm .vtx-checkbox-helper-text {\r\n font-size: var(--vtx-font-size-xs);\r\n}\r\n\r\n.vtx-checkbox--md {\r\n --vtx-checkbox-size: 20px;\r\n --vtx-checkbox-border-width: 2px;\r\n}\r\n\r\n.vtx-checkbox--lg {\r\n --vtx-checkbox-size: 24px;\r\n --vtx-checkbox-border-width: 2px;\r\n}\r\n\r\n.vtx-checkbox--lg .vtx-checkbox-label-text {\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n/* Variants */\r\n.vtx-checkbox--primary {\r\n --vtx-checkbox-color: var(--vtx-color-primary-600);\r\n --vtx-checkbox-hover-color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-checkbox--secondary {\r\n --vtx-checkbox-color: var(--vtx-color-secondary-600, var(--vtx-color-neutral-600));\r\n --vtx-checkbox-hover-color: var(--vtx-color-secondary-700, var(--vtx-color-neutral-700));\r\n}\r\n\r\n.vtx-checkbox--success {\r\n --vtx-checkbox-color: var(--vtx-color-success-600, #16a34a);\r\n --vtx-checkbox-hover-color: var(--vtx-color-success-700, #15803d);\r\n}\r\n\r\n.vtx-checkbox--error {\r\n --vtx-checkbox-color: var(--vtx-color-error-600, #dc2626);\r\n --vtx-checkbox-hover-color: var(--vtx-color-error-700, #b91c1c);\r\n}\r\n\r\n.vtx-checkbox--warning {\r\n --vtx-checkbox-color: var(--vtx-color-warning-600, #d97706);\r\n --vtx-checkbox-hover-color: var(--vtx-color-warning-700, #b45309);\r\n}\r\n\r\n.vtx-checkbox--info {\r\n --vtx-checkbox-color: var(--vtx-color-info-600, #2563eb);\r\n --vtx-checkbox-hover-color: var(--vtx-color-info-700, #1d4ed8);\r\n}\r\n");const L=o.forwardRef(({checked:t,indeterminate:e=!1,disabled:o=!1,label:v,size:s,variant:d="primary",error:x=!1,helperText:p,onChange:m,className:u="",inputClassName:h="",id:g,...f},b)=>{const{theme:w}=C(),y=s||w.defaultSize||"md",k=a(),z=g||k,N=["vtx-checkbox",`vtx-checkbox--${y}`,`vtx-checkbox--${d}`,o&&"vtx-checkbox--disabled",x&&"vtx-checkbox--error",u].filter(Boolean).join(" "),S=["vtx-checkbox-input",h].filter(Boolean).join(" "),_=i(null);return l(b,()=>_.current),c(()=>{_.current&&(_.current.indeterminate=e)},[e]),r("div",{className:N,children:[r("label",{className:"vtx-checkbox-label",htmlFor:z,children:[r("span",{className:"vtx-checkbox-wrapper",children:[n("input",{ref:_,type:"checkbox",id:z,className:S,checked:t,disabled:o,onChange:m,...f}),r("span",{className:"vtx-checkbox-box",children:[n("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--check",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:n("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})}),n("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--indeterminate",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:n("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round"})})]})]}),v&&n("span",{className:"vtx-checkbox-label-text",children:v})]}),p&&n("div",{className:"vtx-checkbox-helper-text",children:p})]})});L.displayName="Checkbox";S("/* CheckboxGroup Base Styles */\n.vtx-checkbox-group {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-2);\n}\n\n/* Group Label */\n.vtx-checkbox-group-label {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n font-weight: var(--vtx-font-weight-medium);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-900);\n margin-bottom: var(--vtx-spacing-1);\n}\n\n.vtx-checkbox-group--disabled .vtx-checkbox-group-label {\n color: var(--vtx-color-neutral-500);\n}\n\n.vtx-checkbox-group--error .vtx-checkbox-group-label {\n color: var(--vtx-color-error-600);\n}\n\n/* Options Container */\n.vtx-checkbox-group-options {\n display: flex;\n gap: var(--vtx-spacing-3);\n}\n\n.vtx-checkbox-group--vertical .vtx-checkbox-group-options {\n flex-direction: column;\n}\n\n.vtx-checkbox-group--horizontal .vtx-checkbox-group-options {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n/* Helper Text */\n.vtx-checkbox-group-helper-text {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-600);\n margin-top: var(--vtx-spacing-1);\n}\n\n.vtx-checkbox-group--error .vtx-checkbox-group-helper-text {\n color: var(--vtx-color-error-600);\n}\n");const T=o.forwardRef(({label:t,options:e,value:o,defaultValue:a,onChange:i,disabled:l=!1,error:c=!1,helperText:s,orientation:d="vertical",size:x,className:p="",...m},u)=>{const{theme:h}=C(),g=x||h.defaultSize||"md",[f,b]=v(a||[]),w=void 0!==o,y=w?o:f,k=["vtx-checkbox-group",`vtx-checkbox-group--${d}`,c&&"vtx-checkbox-group--error",l&&"vtx-checkbox-group--disabled",p].filter(Boolean).join(" ");return r("div",{ref:u,className:k,...m,children:[t&&n("div",{className:"vtx-checkbox-group-label",children:t}),n("div",{className:"vtx-checkbox-group-options",children:e.map(r=>{const t=y.includes(r.value),e=l||r.disabled;return n(L,{label:r.label,checked:t,disabled:e,error:c,size:g,onChange:n=>((n,r)=>{const t=r?[...y,n]:y.filter(r=>r!==n);w||b(t),null==i||i(t)})(r.value,n.target.checked)},r.value)})}),s&&n("div",{className:"vtx-checkbox-group-helper-text",children:s})]})});T.displayName="CheckboxGroup";const $=(n,r)=>{c(()=>{const t=t=>{const e=null==n?void 0:n.current;e&&!e.contains(t.target)&&r(t)};return document.addEventListener("mousedown",t),document.addEventListener("touchstart",t),()=>{document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}},[n,r])},M=(n,r)=>{c(()=>{if(!r)return;const t=n.current;if(!t)return;const e=t.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(0===e.length)return;const o=e[0],a=e[e.length-1],i=n=>{"Tab"===n.key&&(n.shiftKey?document.activeElement===o&&(null==a||a.focus(),n.preventDefault()):document.activeElement===a&&(null==o||o.focus(),n.preventDefault()))};return null==o||o.focus(),t.addEventListener("keydown",i),()=>{t.removeEventListener("keydown",i)}},[n,r])},j=n=>{c(()=>{const r=r=>{"Escape"===r.key&&n()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[n])},B=n=>{c(()=>{if(!n)return;const r=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=r}},[n])};let A=0;const I=(n="vtx")=>{const[r]=v(()=>`${n}-${++A}`);return r},E=(n,r)=>{const[t,e]=v(n);return c(()=>{const t=setTimeout(()=>{e(n)},r);return()=>{clearTimeout(t)}},[n,r]),t};S(".vtx-input-wrapper {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-1);\n}\n\n.vtx-input-wrapper--full-width {\n width: 100%;\n}\n\n.vtx-input-label {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n color: var(--vtx-color-neutral-700);\n line-height: var(--vtx-line-height-tight);\n}\n\n.vtx-input-label__required {\n color: var(--vtx-color-error-600);\n margin-left: var(--vtx-spacing-1);\n}\n\n.vtx-input-container {\n position: relative;\n display: flex;\n align-items: center;\n background-color: white;\n border: 1px solid var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-md);\n transition: all var(--vtx-transition-base);\n}\n\n.vtx-input-container:focus-within {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 0;\n border-color: var(--vtx-color-primary-500);\n}\n\n.vtx-input-container--error {\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-input-container--error:focus-within {\n outline-color: var(--vtx-color-error-600);\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-input-container--disabled {\n background-color: var(--vtx-color-neutral-100);\n cursor: not-allowed;\n}\n\n/* Sizes */\n.vtx-input-container--small {\n min-height: 32px;\n}\n\n.vtx-input-container--medium {\n min-height: 40px;\n}\n\n.vtx-input-container--large {\n min-height: 48px;\n}\n\n.vtx-input {\n flex: 1;\n width: 100%;\n min-width: 0;\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n color: var(--vtx-color-neutral-900);\n background: transparent;\n border: none;\n outline: none;\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n}\n\n.vtx-input::placeholder {\n color: var(--vtx-color-neutral-400);\n}\n\n.vtx-input:disabled {\n cursor: not-allowed;\n color: var(--vtx-color-neutral-500);\n}\n\n.vtx-input-container--small .vtx-input {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-input-container--large .vtx-input {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n font-size: var(--vtx-font-size-lg);\n}\n\n/* Icons */\n.vtx-input-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--vtx-color-neutral-500);\n pointer-events: none;\n}\n\n.vtx-input-icon--left {\n padding-left: var(--vtx-spacing-3);\n}\n\n.vtx-input-icon--right {\n padding-right: var(--vtx-spacing-3);\n}\n\n.vtx-input-container--with-left-icon .vtx-input {\n padding-left: var(--vtx-spacing-1);\n}\n\n.vtx-input-container--with-right-icon .vtx-input {\n padding-right: var(--vtx-spacing-1);\n}\n\n/* Helper and error text */\n.vtx-input-helper,\n.vtx-input-error {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n margin: 0;\n}\n\n.vtx-input-helper {\n color: var(--vtx-color-neutral-600);\n}\n\n.vtx-input-error {\n color: var(--vtx-color-error-600);\n}\n");const D=o.forwardRef(({label:t,helperText:e,error:o,success:a,size:i="medium",fullWidth:l=!1,leftIcon:c,rightIcon:v,clearable:s=!1,onClear:d,showCount:x=!1,className:p="",wrapperClassName:m="",labelClassName:u="",inputClassName:h="",prefix:g,suffix:f,id:b,disabled:w=!1,required:y=!1,value:k,maxLength:z,...N},C)=>{const S=I("input"),_=b||S,L=`${_}-helper`,T=`${_}-error`,$=`${_}-success`,M=Boolean(o),j=Boolean(a)&&!M,B=s&&k&&String(k).length>0&&!w,A=[e&&!o&&!a&&L,o&&T,a&&$].filter(Boolean).join(" "),E=["vtx-input-wrapper",l&&"vtx-input-wrapper--full-width",m].filter(Boolean).join(" "),D=["vtx-input-container",`vtx-input-container--${i}`,M&&"vtx-input-container--error",j&&"vtx-input-container--success",w&&"vtx-input-container--disabled",(c||g)&&"vtx-input-container--with-left-element",(v||f||B)&&"vtx-input-container--with-right-element",p].filter(Boolean).join(" "),O=k?String(k).length:0,R=x&&z;return r("div",{className:E,children:[t&&r("label",{htmlFor:_,className:`vtx-input-label ${u}`.trim(),children:[t,y&&r("span",{className:"vtx-input-label__required","aria-label":"required",children:[" ","*"]})]}),r("div",{className:D,children:[c&&n("span",{className:"vtx-input-icon vtx-input-icon--left","aria-hidden":"true",children:c}),g&&n("span",{className:"vtx-input-prefix","aria-hidden":"true",children:g}),n("input",{ref:C,id:_,className:`vtx-input ${h}`.trim(),disabled:w,required:y,value:k,maxLength:z,"aria-invalid":M,"aria-describedby":A||void 0,...N}),f&&n("span",{className:"vtx-input-suffix","aria-hidden":"true",children:f}),B&&n("button",{type:"button",className:"vtx-input-clear",onClick:()=>{null==d||d()},"aria-label":"Clear input",tabIndex:-1,children:n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),v&&!B&&n("span",{className:"vtx-input-icon vtx-input-icon--right","aria-hidden":"true",children:v})]}),e&&!o&&!a&&n("p",{id:L,className:"vtx-input-helper",children:e}),o&&n("p",{id:T,className:"vtx-input-error",role:"alert",children:o}),a&&n("p",{id:$,className:"vtx-input-success",role:"status",children:a}),R&&r("p",{className:"vtx-input-counter","aria-live":"polite",children:[O," / ",z]})]})});D.displayName="Input";S("/* Chip Component Styles */\r\n\r\n.vtx-chip {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.375rem;\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 16px;\r\n font-family: var(--vtx-font-family);\r\n font-size: 0.875rem;\r\n line-height: 1.25rem;\r\n font-weight: 500;\r\n border: 1px solid transparent;\r\n transition: all 0.2s ease;\r\n cursor: default;\r\n white-space: nowrap;\r\n max-width: 100%;\r\n}\r\n\r\n/* Sizes */\r\n.vtx-chip--sm {\r\n padding: 0.125rem 0.5rem;\r\n font-size: 0.75rem;\r\n line-height: 1rem;\r\n gap: 0.25rem;\r\n border-radius: 12px;\r\n}\r\n\r\n.vtx-chip--md {\r\n padding: 0.25rem 0.75rem;\r\n font-size: 0.875rem;\r\n line-height: 1.25rem;\r\n gap: 0.375rem;\r\n border-radius: 16px;\r\n}\r\n\r\n.vtx-chip--lg {\r\n padding: 0.375rem 1rem;\r\n font-size: 1rem;\r\n line-height: 1.5rem;\r\n gap: 0.5rem;\r\n border-radius: 20px;\r\n}\r\n\r\n/* Variants */\r\n.vtx-chip--filled {\r\n background-color: var(--vtx-color-primary-600);\r\n color: white;\r\n border-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-chip--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-primary-600);\r\n border-color: var(--vtx-color-border);\r\n}\r\n\r\n.vtx-chip--light {\r\n background-color: var(--vtx-color-primary-light, rgba(59, 130, 246, 0.1));\r\n color: var(--vtx-color-primary-600);\r\n border-color: transparent;\r\n}\r\n\r\n/* Color Variants */\r\n.vtx-chip--primary.vtx-chip--filled {\r\n background-color: var(--vtx-color-primary-600);\r\n border-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-chip--primary.vtx-chip--outlined {\r\n color: var(--vtx-color-primary-600);\r\n border-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-chip--primary.vtx-chip--light {\r\n background-color: var(--vtx-color-primary-light, rgba(59, 130, 246, 0.1));\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-chip--success.vtx-chip--filled {\r\n background-color: var(--vtx-color-success-600);\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-chip--success.vtx-chip--outlined {\r\n color: var(--vtx-color-success-600);\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-chip--success.vtx-chip--light {\r\n background-color: var(--vtx-color-success-light, rgba(34, 197, 94, 0.1));\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-chip--error.vtx-chip--filled {\r\n background-color: var(--vtx-color-error-600);\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-chip--error.vtx-chip--outlined {\r\n color: var(--vtx-color-error-600);\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-chip--error.vtx-chip--light {\r\n background-color: var(--vtx-color-error-light, rgba(239, 68, 68, 0.1));\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-chip--warning.vtx-chip--filled {\r\n background-color: var(--vtx-color-warning-600);\r\n border-color: var(--vtx-color-warning-600);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-chip--warning.vtx-chip--outlined {\r\n color: var(--vtx-color-warning-600);\r\n border-color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-chip--warning.vtx-chip--light {\r\n background-color: var(--vtx-color-warning-light, rgba(251, 191, 36, 0.1));\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-chip--info.vtx-chip--filled {\r\n background-color: var(--vtx-color-info-600);\r\n border-color: var(--vtx-color-info-600);\r\n}\r\n\r\n.vtx-chip--info.vtx-chip--outlined {\r\n color: var(--vtx-color-info-600);\r\n border-color: var(--vtx-color-info-600);\r\n}\r\n\r\n.vtx-chip--info.vtx-chip--light {\r\n background-color: var(--vtx-color-info-light, rgba(6, 182, 212, 0.1));\r\n color: var(--vtx-color-info-600);\r\n}\r\n\r\n.vtx-chip--default.vtx-chip--filled {\r\n background-color: var(--vtx-color-neutral-600);\r\n border-color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-chip--default.vtx-chip--outlined {\r\n color: var(--vtx-color-neutral-900);\r\n border-color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n.vtx-chip--default.vtx-chip--light {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n/* Label */\r\n.vtx-chip__label {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n/* Avatar */\r\n.vtx-chip__avatar {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n flex-shrink: 0;\r\n margin-left: -0.25rem;\r\n}\r\n\r\n.vtx-chip--small .vtx-chip__avatar {\r\n width: 1rem;\r\n height: 1rem;\r\n margin-left: -0.125rem;\r\n}\r\n\r\n.vtx-chip--large .vtx-chip__avatar {\r\n width: 2rem;\r\n height: 2rem;\r\n margin-left: -0.375rem;\r\n}\r\n\r\n/* Icon */\r\n.vtx-chip__icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-chip--small .vtx-chip__icon svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.vtx-chip--medium .vtx-chip__icon svg {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.vtx-chip--large .vtx-chip__icon svg {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n/* Delete Button */\r\n.vtx-chip__delete {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n margin: 0;\r\n margin-right: -0.25rem;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n color: inherit;\r\n opacity: 0.6;\r\n transition:\r\n opacity 0.2s ease,\r\n transform 0.15s ease;\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-chip--small .vtx-chip__delete {\r\n margin-right: -0.125rem;\r\n}\r\n\r\n.vtx-chip--large .vtx-chip__delete {\r\n margin-right: -0.375rem;\r\n}\r\n\r\n.vtx-chip__delete:hover {\r\n opacity: 1;\r\n transform: scale(1.1);\r\n}\r\n\r\n.vtx-chip__delete:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n.vtx-chip__delete:focus-visible {\r\n outline: 2px solid currentColor;\r\n outline-offset: 2px;\r\n opacity: 1;\r\n}\r\n\r\n.vtx-chip--small .vtx-chip__delete svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.vtx-chip--medium .vtx-chip__delete svg {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.vtx-chip--large .vtx-chip__delete svg {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n/* Clickable */\r\n.vtx-chip--clickable {\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-chip--clickable:hover {\r\n opacity: 0.85;\r\n transform: translateY(-1px);\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-chip--clickable:active {\r\n transform: translateY(0);\r\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-chip--clickable:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-600);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Disabled */\r\n.vtx-chip--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n/* Dark mode support */\r\n@media (prefers-color-scheme: dark) {\r\n .vtx-chip--outlined {\r\n border-color: var(--vtx-color-neutral-700);\r\n }\r\n\r\n .vtx-chip--default.vtx-chip--light {\r\n background-color: var(--vtx-color-neutral-700);\r\n color: var(--vtx-color-neutral-50);\r\n }\r\n}\r\n");const O=o.forwardRef(({label:t,size:e="md",variant:o="filled",color:a="default",icon:i,avatar:l,onDelete:c,onClick:v,disabled:s=!1,className:d="","aria-label":x,"data-testid":p},m)=>{const u=["vtx-chip",`vtx-chip--${e}`,`vtx-chip--${o}`,`vtx-chip--${a}`,v&&!s&&"vtx-chip--clickable",s&&"vtx-chip--disabled",d].filter(Boolean).join(" ");return r("div",{ref:m,className:u,onClick:n=>{!s&&v&&v(n)},onKeyDown:n=>{s||!v||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),v(n))},role:v?"button":void 0,tabIndex:v&&!s?0:void 0,"aria-label":x||t,"aria-disabled":s,"data-testid":p,children:[l&&n("img",{src:l,alt:"",className:"vtx-chip__avatar","aria-hidden":"true"}),i&&!l&&n("span",{className:"vtx-chip__icon","aria-hidden":"true",children:i}),n("span",{className:"vtx-chip__label",children:t}),c&&n("button",{type:"button",className:"vtx-chip__delete",onClick:n=>{n.stopPropagation(),!s&&c&&c(n)},onKeyDown:n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),n.stopPropagation(),!s&&c&&c(n))},disabled:s,"aria-label":`Remove ${t}`,tabIndex:-1,children:n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})});O.displayName="Chip";S("/* MultiSelect Component Styles */\r\n\r\n.vtx-multiselect-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.375rem;\r\n font-family: var(--vtx-font-family);\r\n}\r\n\r\n.vtx-multiselect-wrapper--full-width {\r\n width: 100%;\r\n}\r\n\r\n/* Label */\r\n.vtx-multiselect-label {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-medium);\r\n color: var(--vtx-color-neutral-700);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-multiselect-label__required {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Container */\r\n.vtx-multiselect-container {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n background-color: white;\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-multiselect-container:focus-within {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 0;\r\n border-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n/* Sizes */\r\n.vtx-multiselect-container--sm {\r\n min-height: 2rem;\r\n}\r\n\r\n.vtx-multiselect-container--md {\r\n min-height: 2.5rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg {\r\n min-height: 3rem;\r\n}\r\n\r\n/* States */\r\n.vtx-multiselect-container--error {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-multiselect-container--error:focus-within {\r\n outline-color: var(--vtx-color-error-600);\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-multiselect-container--success {\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-multiselect-container--success:focus-within {\r\n outline-color: var(--vtx-color-success-600);\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-multiselect-container--disabled {\r\n background-color: var(--vtx-color-neutral-100);\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-multiselect-container--open {\r\n border-bottom-left-radius: 0;\r\n border-bottom-right-radius: 0;\r\n}\r\n\r\n/* Input Area */\r\n.vtx-multiselect-input-area {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 0.375rem;\r\n padding: 0.5rem 2.5rem 0.5rem 0.75rem;\r\n min-height: inherit;\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-multiselect-container--sm .vtx-multiselect-input-area {\r\n padding: 0.25rem 2rem 0.25rem 0.5rem;\r\n gap: 0.25rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg .vtx-multiselect-input-area {\r\n padding: 0.625rem 3rem 0.625rem 1rem;\r\n gap: 0.5rem;\r\n}\r\n\r\n.vtx-multiselect-container--disabled .vtx-multiselect-input-area {\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Chips Container */\r\n.vtx-multiselect-chips {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.375rem;\r\n align-items: center;\r\n}\r\n\r\n.vtx-multiselect-container--sm .vtx-multiselect-chips {\r\n gap: 0.25rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg .vtx-multiselect-chips {\r\n gap: 0.5rem;\r\n}\r\n\r\n/* Placeholder */\r\n.vtx-multiselect-placeholder {\r\n color: var(--vtx-color-neutral-500);\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n user-select: none;\r\n}\r\n\r\n.vtx-multiselect-container--sm .vtx-multiselect-placeholder {\r\n font-size: 0.8125rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg .vtx-multiselect-placeholder {\r\n font-size: 1rem;\r\n}\r\n\r\n/* Icon */\r\n.vtx-multiselect-icon {\r\n position: absolute;\r\n right: var(--vtx-spacing-3);\r\n top: 50%;\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n color: var(--vtx-color-neutral-500);\r\n transition: transform var(--vtx-transition-base);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-multiselect-container--sm .vtx-multiselect-icon {\r\n right: 0.5rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg .vtx-multiselect-icon {\r\n right: 1rem;\r\n}\r\n\r\n.vtx-multiselect-container--open .vtx-multiselect-icon {\r\n transform: translateY(-50%) rotate(180deg);\r\n}\r\n\r\n/* Dropdown */\r\n.vtx-multiselect-dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: -1px;\r\n right: -1px;\r\n max-height: 18rem;\r\n overflow-y: auto;\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-primary-500);\r\n border-top: none;\r\n border-bottom-left-radius: var(--vtx-radius-md);\r\n border-bottom-right-radius: var(--vtx-radius-md);\r\n box-shadow: var(--vtx-shadow-md);\r\n z-index: var(--vtx-z-index-dropdown);\r\n}\r\n\r\n/* Search Input */\r\n.vtx-multiselect-search {\r\n position: sticky;\r\n top: 0;\r\n padding: var(--vtx-spacing-3);\r\n background-color: white;\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n z-index: 1;\r\n}\r\n\r\n.vtx-multiselect-search input {\r\n width: 100%;\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n font-size: var(--vtx-font-size-sm);\r\n font-family: var(--vtx-font-family-sans);\r\n outline: none;\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-multiselect-search input:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 0;\r\n border-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n/* Options List */\r\n.vtx-multiselect-options {\r\n padding: 0.25rem;\r\n}\r\n\r\n/* Option Group */\r\n.vtx-multiselect-optgroup {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n color: var(--vtx-color-neutral-600);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n margin-top: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-multiselect-optgroup:first-child {\r\n margin-top: 0;\r\n}\r\n\r\n/* Option Item */\r\n.vtx-multiselect-option {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3);\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n cursor: pointer;\r\n border-radius: var(--vtx-radius-md);\r\n transition: all var(--vtx-transition-fast);\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-900);\r\n user-select: none;\r\n}\r\n\r\n.vtx-multiselect-option:hover {\r\n background-color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n.vtx-multiselect-option:active {\r\n background-color: var(--vtx-color-neutral-200);\r\n}\r\n\r\n.vtx-multiselect-option--selected {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-700);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n.vtx-multiselect-option--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n/* Checkbox Style (Style 1) */\r\n.vtx-multiselect-checkbox {\r\n width: 1.125rem;\r\n height: 1.125rem;\r\n border: 2px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-base);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all var(--vtx-transition-fast);\r\n background-color: white;\r\n}\r\n\r\n.vtx-multiselect-option:hover .vtx-multiselect-checkbox {\r\n border-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-multiselect-checkbox--checked {\r\n background-color: var(--vtx-color-primary-500);\r\n border-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-multiselect-checkbox svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n color: white;\r\n opacity: 0;\r\n transform: scale(0.8);\r\n transition: all var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-multiselect-checkbox--checked svg {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n/* Checkmark Style (Style 2) */\r\n.vtx-multiselect-checkmark {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-left: auto;\r\n}\r\n\r\n.vtx-multiselect-checkmark svg {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n color: var(--vtx-color-primary-600);\r\n opacity: 0;\r\n transform: scale(0.5);\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-multiselect-option--selected .vtx-multiselect-checkmark svg {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n/* Option Label */\r\n.vtx-multiselect-option-label {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Select All / Clear All */\r\n.vtx-multiselect-actions {\r\n display: flex;\r\n gap: var(--vtx-spacing-2);\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n background-color: var(--vtx-color-neutral-50);\r\n}\r\n\r\n.vtx-multiselect-action-button {\r\n font-size: var(--vtx-font-size-xs);\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n border: none;\r\n background: none;\r\n color: var(--vtx-color-primary-600);\r\n cursor: pointer;\r\n border-radius: var(--vtx-radius-base);\r\n font-weight: var(--vtx-font-weight-medium);\r\n transition: all var(--vtx-transition-fast);\r\n font-family: var(--vtx-font-family-sans);\r\n}\r\n\r\n.vtx-multiselect-action-button:hover {\r\n background-color: var(--vtx-color-primary-100);\r\n}\r\n\r\n.vtx-multiselect-action-button:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n/* Empty State */\r\n.vtx-multiselect-empty {\r\n padding: var(--vtx-spacing-8) var(--vtx-spacing-4);\r\n text-align: center;\r\n color: var(--vtx-color-neutral-500);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n/* Loading Spinner in Icon Area */\r\n.vtx-multiselect-icon-spinner {\r\n color: var(--vtx-multiselect-loader-color, var(--vtx-color-primary-500));\r\n animation: vtx-multiselect-spin var(--vtx-multiselect-loader-speed, 0.8s) linear infinite;\r\n}\r\n\r\n.vtx-multiselect-icon-spinner-track {\r\n opacity: var(--vtx-multiselect-loader-track-opacity, 0.25);\r\n}\r\n\r\n.vtx-multiselect-icon-spinner-path {\r\n opacity: var(--vtx-multiselect-loader-path-opacity, 1);\r\n}\r\n\r\n@keyframes vtx-multiselect-spin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Helper / Error / Success Text */\r\n.vtx-multiselect-helper {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-neutral-600);\r\n line-height: var(--vtx-line-height-normal);\r\n margin: 0;\r\n}\r\n\r\n.vtx-multiselect-error {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-error-600);\r\n line-height: var(--vtx-line-height-normal);\r\n margin: 0;\r\n}\r\n\r\n.vtx-multiselect-success {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-success-600);\r\n line-height: var(--vtx-line-height-normal);\r\n margin: 0;\r\n}\r\n\r\n/* Hidden Native Select for Form Integration */\r\n.vtx-multiselect-hidden-select {\r\n position: absolute;\r\n opacity: 0;\r\n pointer-events: none;\r\n width: 0;\r\n height: 0;\r\n}\r\n\r\n/* Scrollbar Styling */\r\n.vtx-multiselect-dropdown::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.vtx-multiselect-dropdown::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.vtx-multiselect-dropdown::-webkit-scrollbar-thumb {\r\n background: var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-base);\r\n}\r\n\r\n.vtx-multiselect-dropdown::-webkit-scrollbar-thumb:hover {\r\n background: var(--vtx-color-neutral-400);\r\n}\r\n");const R=o.forwardRef(({label:t,helperText:e,error:o,success:a,size:l,fullWidth:s=!1,options:d,value:x,defaultValue:p=[],placeholder:m="Select...",className:u="",grouped:h=!1,getOptionLabel:g="label",getOptionValue:f="value",getOptionDisabled:b="disabled",getOptionGroup:w="group",onChange:y,disabled:k=!1,required:z=!1,id:N,name:S,selectionStyle:_="checkbox",searchable:L=!1,showSelectAll:T=!1,maxChipsDisplay:$,chipColor:M="primary",chipVariant:j="light",loading:B=!1},A)=>{const{theme:E}=C(),D=I("multiselect"),R=N||D,W=`${R}-helper`,H=`${R}-error`,F=`${R}-success`,[V,Y]=v(!1),[P,X]=v(""),[q,G]=v(p),K=i(null),U=i(null),Z=void 0!==x?x:q,J=(n,r)=>"function"==typeof r?r(n):"object"==typeof n?n[r]:n,Q=Boolean(o),nn=Boolean(a)&&!Q,rn=[e&&!o&&!a&&W,o&&H,a&&F].filter(Boolean).join(" ");c(()=>{const n=n=>{K.current&&!K.current.contains(n.target)&&U.current&&!U.current.contains(n.target)&&(Y(!1),X(""))};if(V)return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[V]);const tn=n=>{if(k)return;const r=Z.includes(n)?Z.filter(r=>r!==n):[...Z,n];if(void 0===x&&G(r),y){const n=d.filter(n=>r.includes(J(n,f)));y(r,n)}},en=P?d.filter(n=>J(n,g).toLowerCase().includes(P.toLowerCase())):d,on=h?en.reduce((n,r)=>{const t=J(r,w)||"Other";return n[t]||(n[t]=[]),n[t].push(r),n},{}):{"":en},an=d.filter(n=>Z.includes(J(n,f))),ln=$?an.slice(0,$):an,cn=$?an.length-$:0,vn=["vtx-multiselect-wrapper",s&&"vtx-multiselect-wrapper--full-width",u].filter(Boolean).join(" "),sn=l||(null==E?void 0:E.defaultSize)||"md",dn=["vtx-multiselect-container",`vtx-multiselect-container--${sn}`,Q&&"vtx-multiselect-container--error",nn&&"vtx-multiselect-container--success",k&&"vtx-multiselect-container--disabled",V&&"vtx-multiselect-container--open"].filter(Boolean).join(" "),xn=sn;return r("div",{className:vn,ref:A,children:[t&&r("label",{htmlFor:R,className:"vtx-multiselect-label",children:[t,z&&r("span",{className:"vtx-multiselect-label__required","aria-label":"required",children:[" ","*"]})]}),r("div",{ref:K,className:dn,"aria-expanded":V,"aria-haspopup":"listbox","aria-labelledby":t?`${R}-label`:void 0,"aria-describedby":rn||void 0,"aria-disabled":k,children:[n("div",{className:"vtx-multiselect-input-area",onClick:()=>!k&&Y(!V),role:"button",tabIndex:k?-1:0,onKeyDown:n=>{k||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),Y(!V))},children:0===an.length?n("span",{className:"vtx-multiselect-placeholder",children:m}):r("div",{className:"vtx-multiselect-chips",children:[ln.map(r=>{const t=J(r,f),e=J(r,g);return n(O,{label:e,size:xn,color:M,variant:j,onDelete:n=>{n.stopPropagation(),(n=>{if(k)return;const r=Z.filter(r=>r!==n);if(void 0===x&&G(r),y){const n=d.filter(n=>r.includes(J(n,f)));y(r,n)}})(t)}},t)}),cn>0&&n(O,{label:`+${cn} more`,size:xn,color:"default",variant:"outlined"})]})}),n("span",{className:"vtx-multiselect-icon","aria-hidden":"true",children:B?r("svg",{className:"vtx-multiselect-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[n("circle",{className:"vtx-multiselect-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),n("path",{className:"vtx-multiselect-icon-spinner-path",fill:"currentColor",d:"M8 2C4.686 2 2 4.686 2 8h2c0-2.21 1.79-4 4-4V2z"})]}):n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),V&&r("div",{ref:U,className:"vtx-multiselect-dropdown",role:"listbox",children:[L&&n("div",{className:"vtx-multiselect-search",children:n("input",{type:"text",placeholder:"Search...",value:P,onChange:n=>X(n.target.value),onClick:n=>n.stopPropagation()})}),T&&r("div",{className:"vtx-multiselect-actions",children:[n("button",{type:"button",className:"vtx-multiselect-action-button",onClick:n=>{n.stopPropagation(),(()=>{const n=d.filter(n=>!J(n,b)).map(n=>J(n,f));void 0===x&&G(n),y&&y(n,d.filter(n=>!J(n,b)))})()},children:"Select All"}),n("button",{type:"button",className:"vtx-multiselect-action-button",onClick:n=>{n.stopPropagation(),void 0===x&&G([]),y&&y([],[])},children:"Clear All"})]}),n("div",{className:"vtx-multiselect-options",children:0===en.length?n("div",{className:"vtx-multiselect-empty",children:"No options found"}):Object.entries(on).map(([t,e])=>r("div",{children:[h&&t&&n("div",{className:"vtx-multiselect-optgroup",children:t}),e.map(t=>{const e=J(t,f),o=J(t,g),a=J(t,b),i=Z.includes(e),l=["vtx-multiselect-option",i&&"vtx-multiselect-option--selected",a&&"vtx-multiselect-option--disabled"].filter(Boolean).join(" ");return r("div",{className:l,onClick:()=>!a&&tn(e),role:"option","aria-selected":i,"aria-disabled":a,tabIndex:a?-1:0,onKeyDown:n=>{a||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),tn(e))},children:["checkbox"===_&&n("div",{className:"vtx-multiselect-checkbox "+(i?"vtx-multiselect-checkbox--checked":""),children:n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M3 8L6.5 11.5L13 5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),n("span",{className:"vtx-multiselect-option-label",children:o}),"checkmark"===_&&n("div",{className:"vtx-multiselect-checkmark",children:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M4 10L8 14L16 6",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]},e)})]},t))})]})]}),S&&n("select",{multiple:!0,name:S,value:Z.map(String),onChange:()=>{},className:"vtx-multiselect-hidden-select",required:z,disabled:k,tabIndex:-1,"aria-hidden":"true",children:d.map(r=>{const t=J(r,f);return n("option",{value:String(t),children:J(r,g)},t)})}),e&&!o&&!a&&n("p",{id:W,className:"vtx-multiselect-helper",children:e}),o&&n("p",{id:H,className:"vtx-multiselect-error",role:"alert",children:o}),a&&n("p",{id:F,className:"vtx-multiselect-success",role:"status",children:a})]})});R.displayName="MultiSelect";S("/* Radio Base Styles */\n.vtx-radio {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-1);\n}\n\n/* Label Container */\n.vtx-radio-label {\n display: inline-flex;\n align-items: center;\n gap: var(--vtx-spacing-2);\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n/* Wrapper for input and visual radio */\n.vtx-radio-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n/* Hidden input */\n.vtx-radio-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n margin: 0;\n padding: 0;\n pointer-events: none;\n}\n\n/* Visual radio circle */\n.vtx-radio-circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--vtx-radio-size, 20px);\n height: var(--vtx-radio-size, 20px);\n border: var(--vtx-radio-border-width, 2px) solid var(--vtx-color-neutral-300);\n border-radius: 50%;\n background-color: white;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n box-sizing: border-box;\n}\n\n/* Inner dot */\n.vtx-radio-dot {\n width: 50%;\n height: 50%;\n border-radius: 50%;\n background-color: white;\n opacity: 0;\n transform: scale(0);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Checked state */\n.vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-radio-color, var(--vtx-color-primary-600));\n border-color: var(--vtx-radio-color, var(--vtx-color-primary-600));\n}\n\n.vtx-radio-input:checked + .vtx-radio-circle .vtx-radio-dot {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Hover state */\n.vtx-radio-label:hover .vtx-radio-circle {\n border-color: var(--vtx-color-neutral-400);\n}\n\n.vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-radio-hover-color, var(--vtx-color-primary-700));\n border-color: var(--vtx-radio-hover-color, var(--vtx-color-primary-700));\n}\n\n/* Focus state */\n.vtx-radio-input:focus-visible + .vtx-radio-circle {\n outline: 2px solid var(--vtx-radio-color, var(--vtx-color-primary-600));\n outline-offset: 2px;\n}\n\n/* Label text */\n.vtx-radio-label-text {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-900);\n}\n\n/* Disabled state */\n.vtx-radio--disabled .vtx-radio-label {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.vtx-radio--disabled .vtx-radio-circle {\n background-color: var(--vtx-color-neutral-100);\n border-color: var(--vtx-color-neutral-300);\n}\n\n.vtx-radio--disabled .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-neutral-400);\n border-color: var(--vtx-color-neutral-400);\n}\n\n.vtx-radio--disabled .vtx-radio-label:hover .vtx-radio-circle,\n.vtx-radio--disabled .vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-neutral-100);\n border-color: var(--vtx-color-neutral-300);\n}\n\n.vtx-radio--disabled .vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-neutral-400);\n border-color: var(--vtx-color-neutral-400);\n}\n\n.vtx-radio--disabled .vtx-radio-label-text {\n color: var(--vtx-color-neutral-500);\n}\n\n/* Error state */\n.vtx-radio--error .vtx-radio-circle {\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-radio--error .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-error-600);\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-radio--error .vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-error-700);\n border-color: var(--vtx-color-error-700);\n}\n\n/* Helper text */\n.vtx-radio-helper-text {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-600);\n margin-left: calc(var(--vtx-radio-size, 20px) + var(--vtx-spacing-2));\n}\n\n.vtx-radio--error .vtx-radio-helper-text {\n color: var(--vtx-color-error-600);\n}\n\n/* Size variants */\n.vtx-radio--small {\n --vtx-radio-size: 16px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--small .vtx-radio-label-text {\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-radio--medium {\n --vtx-radio-size: 20px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--large {\n --vtx-radio-size: 24px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--large .vtx-radio-label-text {\n font-size: var(--vtx-font-size-lg);\n}\n\n/* Variants */\n.vtx-radio--primary {\n --vtx-radio-color: var(--vtx-color-primary-600);\n --vtx-radio-hover-color: var(--vtx-color-primary-700);\n}\n\n.vtx-radio--secondary {\n --vtx-radio-color: var(--vtx-color-neutral-600);\n --vtx-radio-hover-color: var(--vtx-color-neutral-700);\n}\n\n.vtx-radio--success {\n --vtx-radio-color: var(--vtx-color-success-600);\n --vtx-radio-hover-color: var(--vtx-color-success-700);\n}\n\n.vtx-radio--error {\n --vtx-radio-color: var(--vtx-color-error-600);\n --vtx-radio-hover-color: var(--vtx-color-error-700);\n}\n\n.vtx-radio--warning {\n --vtx-radio-color: var(--vtx-color-warning-600);\n --vtx-radio-hover-color: var(--vtx-color-warning-700);\n}\n\n.vtx-radio--info {\n --vtx-radio-color: var(--vtx-color-info-600);\n --vtx-radio-hover-color: var(--vtx-color-info-700);\n}\n");const W=o.forwardRef(({checked:t,disabled:e=!1,label:o,size:i="medium",variant:l="primary",error:c=!1,helperText:v,onChange:s,className:d="",inputClassName:x="",id:p,...m},u)=>{const h=a(),g=p||h,f=v?`${g}-helper-text`:void 0,b=["vtx-radio",`vtx-radio--${i}`,`vtx-radio--${l}`,e&&"vtx-radio--disabled",c&&"vtx-radio--error",d].filter(Boolean).join(" "),w=["vtx-radio-input",x].filter(Boolean).join(" "),y=r("div",{className:"vtx-radio-wrapper",children:[n("input",{ref:u,type:"radio",id:g,className:w,checked:t,disabled:e,onChange:s,"aria-describedby":f,...m}),n("span",{className:"vtx-radio-circle",children:n("span",{className:"vtx-radio-dot"})})]});return r("div",o?{className:b,children:[r("label",{htmlFor:g,className:"vtx-radio-label",children:[y,n("span",{className:"vtx-radio-label-text",children:o})]}),v&&n("span",{id:f,className:"vtx-radio-helper-text",children:v})]}:{className:b,children:[y,v&&n("span",{id:f,className:"vtx-radio-helper-text",children:v})]})});W.displayName="Radio";S("/* RadioGroup Base Styles */\n.vtx-radio-group {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-2);\n}\n\n/* Group Label */\n.vtx-radio-group-label {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n font-weight: var(--vtx-font-weight-medium);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-900);\n margin-bottom: var(--vtx-spacing-1);\n}\n\n.vtx-radio-group--disabled .vtx-radio-group-label {\n color: var(--vtx-color-neutral-500);\n}\n\n.vtx-radio-group--error .vtx-radio-group-label {\n color: var(--vtx-color-error-600);\n}\n\n/* Options Container */\n.vtx-radio-group-options {\n display: flex;\n gap: var(--vtx-spacing-3);\n}\n\n.vtx-radio-group--vertical .vtx-radio-group-options {\n flex-direction: column;\n}\n\n.vtx-radio-group--horizontal .vtx-radio-group-options {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n/* Helper Text */\n.vtx-radio-group-helper-text {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-600);\n margin-top: var(--vtx-spacing-1);\n}\n\n.vtx-radio-group--error .vtx-radio-group-helper-text {\n color: var(--vtx-color-error-600);\n}\n");const H=o.forwardRef(({name:t,label:e,options:o,value:a,defaultValue:i,onChange:l,disabled:c=!1,error:s=!1,helperText:d,orientation:x="vertical",size:p="medium",variant:m="primary",className:u="",...h},g)=>{const[f,b]=v(i),w=void 0!==a,y=w?a:f,k=["vtx-radio-group",`vtx-radio-group--${x}`,s&&"vtx-radio-group--error",c&&"vtx-radio-group--disabled",u].filter(Boolean).join(" ");return r("div",{ref:g,className:k,role:"radiogroup","aria-label":"string"==typeof e?e:void 0,...h,children:[e&&n("div",{className:"vtx-radio-group-label",children:e}),n("div",{className:"vtx-radio-group-options",children:o.map(r=>{const e=y===r.value,o=c||r.disabled;return n(W,{name:t,value:r.value,label:r.label,checked:e,disabled:o,error:s,size:p,variant:m,onChange:()=>{return n=r.value,w||b(n),void(null==l||l(n));var n}},r.value)})}),d&&n("div",{className:"vtx-radio-group-helper-text",children:d})]})});H.displayName="RadioGroup";S(".vtx-select-wrapper {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-1);\n}\n\n.vtx-select-wrapper--full-width {\n width: 100%;\n}\n\n.vtx-select-label {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n color: var(--vtx-color-neutral-700);\n line-height: var(--vtx-line-height-tight);\n}\n\n.vtx-select-label__required {\n color: var(--vtx-color-error-600);\n margin-left: var(--vtx-spacing-1);\n}\n\n.vtx-select-container {\n position: relative;\n display: flex;\n align-items: center;\n background-color: white;\n border: 1px solid var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-md);\n transition: all var(--vtx-transition-base);\n}\n\n.vtx-select-container:focus-within {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 0;\n border-color: var(--vtx-color-primary-500);\n}\n\n.vtx-select-container--error {\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-select-container--error:focus-within {\n outline-color: var(--vtx-color-error-600);\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-select-container--disabled {\n background-color: var(--vtx-color-neutral-100);\n cursor: not-allowed;\n}\n\n/* Sizes */\n.vtx-select-container--small {\n min-height: 32px;\n}\n\n.vtx-select-container--medium {\n min-height: 40px;\n}\n\n.vtx-select-container--large {\n min-height: 48px;\n}\n\n.vtx-select {\n flex: 1;\n width: 100%;\n min-width: 0;\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n color: var(--vtx-color-neutral-900);\n background: transparent;\n border: none;\n outline: none;\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n padding-right: var(--vtx-spacing-8);\n cursor: pointer;\n appearance: none;\n}\n\n.vtx-select:disabled {\n cursor: not-allowed;\n color: var(--vtx-color-neutral-500);\n}\n\n.vtx-select-container--small .vtx-select {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n padding-right: var(--vtx-spacing-6);\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-select-container--large .vtx-select {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n padding-right: var(--vtx-spacing-10);\n font-size: var(--vtx-font-size-lg);\n}\n\n/* Dropdown icon */\n.vtx-select-icon {\n position: absolute;\n right: var(--vtx-spacing-3);\n display: inline-flex;\n align-items: center;\n color: var(--vtx-color-neutral-500);\n pointer-events: none;\n}\n\n.vtx-select-container--disabled .vtx-select-icon {\n color: var(--vtx-color-neutral-400);\n}\n\n/* Loading Spinner in Icon Area */\n.vtx-select-icon-spinner {\n color: var(--vtx-select-loader-color, var(--vtx-color-primary-500));\n animation: vtx-select-spin var(--vtx-select-loader-speed, 0.8s) linear infinite;\n}\n\n.vtx-select-icon-spinner-track {\n opacity: var(--vtx-select-loader-track-opacity, 0.25);\n}\n\n.vtx-select-icon-spinner-path {\n opacity: var(--vtx-select-loader-path-opacity, 1);\n}\n\n@keyframes vtx-select-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Helper and error text */\n.vtx-select-helper,\n.vtx-select-error {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n margin: 0;\n}\n\n.vtx-select-helper {\n color: var(--vtx-color-neutral-600);\n}\n\n.vtx-select-error {\n color: var(--vtx-color-error-600);\n}\n");const F=o.forwardRef(({label:t,helperText:e,error:o,success:a,size:i="medium",fullWidth:l=!1,options:c,placeholder:v,className:s="",wrapperClassName:d="",id:x,disabled:p=!1,required:m=!1,grouped:u=!1,getOptionLabel:h="label",getOptionValue:g="value",getOptionDisabled:f="disabled",getOptionGroup:b="group",onSelectChange:w,onChange:y,loading:k=!1,...z},N)=>{const C=I("select"),S=x||C,_=`${S}-helper`,L=`${S}-error`,T=`${S}-success`,$=(n,r)=>"function"==typeof r?r(n):"object"==typeof n?n[r]:n,M=Boolean(o),j=Boolean(a)&&!M,B=[e&&!o&&!a&&_,o&&L,a&&T].filter(Boolean).join(" "),A=["vtx-select-wrapper",l&&"vtx-select-wrapper--full-width",d].filter(Boolean).join(" "),E=["vtx-select-container",`vtx-select-container--${i}`,M&&"vtx-select-container--error",j&&"vtx-select-container--success",p&&"vtx-select-container--disabled",s].filter(Boolean).join(" ");return r("div",{className:A,children:[t&&r("label",{htmlFor:S,className:"vtx-select-label",children:[t,m&&r("span",{className:"vtx-select-label__required","aria-label":"required",children:[" ","*"]})]}),r("div",{className:E,children:[r("select",{ref:N,id:S,className:"vtx-select",disabled:p,required:m,"aria-invalid":M,"aria-describedby":B||void 0,onChange:n=>{if(null==y||y(n),w){const r=c.find(r=>String($(r,g))===n.target.value);w(n.target.value,r)}},...z,children:[v&&n("option",{value:"",disabled:!0,children:v}),(()=>{if(!u)return c.map((r,t)=>{const e=$(r,g),o=$(r,h),a=$(r,f);return n("option",{value:e,disabled:a,children:o},e||t)});const r=c.reduce((n,r)=>{const t=$(r,b)||"Other";return n[t]||(n[t]=[]),n[t].push(r),n},{});return Object.entries(r).map(([r,t])=>n("optgroup",{label:r,children:t.map((r,t)=>{const e=$(r,g),o=$(r,h),a=$(r,f);return n("option",{value:e,disabled:a,children:o},e||t)})},r))})()]}),n("span",{className:"vtx-select-icon","aria-hidden":"true",children:k?r("svg",{className:"vtx-select-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[n("circle",{className:"vtx-select-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),n("path",{className:"vtx-select-icon-spinner-path",fill:"currentColor",d:"M8 2C4.686 2 2 4.686 2 8h2c0-2.21 1.79-4 4-4V2z"})]}):n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),e&&!o&&!a&&n("p",{id:_,className:"vtx-select-helper",children:e}),o&&n("p",{id:L,className:"vtx-select-error",role:"alert",children:o}),a&&n("p",{id:T,className:"vtx-select-success",role:"status",children:a})]})});F.displayName="Select";const V=o.forwardRef(({item:t,isOpen:e,onToggle:o,variant:a="default",size:l="md",showChevron:c=!0,chevronPosition:v="right",expandedIcon:s,collapsedIcon:d,iconType:x="chevron",loading:p=!1,disabled:m=!1,disableAnimations:u=!1},h)=>{const g=i(null),{id:f,header:b,children:w,disabled:y,className:k,loading:z,status:N="default",icon:C,dataTestId:S}=t,_=m||y,L=p||z,T=()=>{_||L||o()},$=()=>n("div",C?{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${S||f}-custom-icon`,children:e?C.expanded:C.collapsed}:"custom"===x&&s&&d?{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${S||f}-custom-icon`,children:e?s:d}:"plus-minus"===x?{className:"accordion-item-chevron accordion-item-chevron--plus-minus "+(e?"open":""),"data-testid":`${S||f}-plus-minus-icon`,children:n("svg",e?{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n("path",{d:"M4 8H12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})}:{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n("path",{d:"M8 4V12M4 8H12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}:{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${S||f}-chevron-icon`,children:n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})});return r("div",{ref:h,className:`\n accordion-item\n accordion-item--${a}\n accordion-item--${l}\n ${e?"accordion-item--open":""}\n ${_?"accordion-item--disabled":""}\n ${L?"accordion-item--loading":""}\n ${"default"!==N?`accordion-item--${N}`:""}\n ${k||""}\n `.trim(),"data-testid":S,"aria-expanded":e,"aria-disabled":_,"aria-busy":L,children:[r("div",{className:"accordion-item-header",role:"button",tabIndex:_||L?-1:0,"aria-expanded":e,"aria-controls":`accordion-content-${f}`,"aria-disabled":_,"aria-busy":L,"aria-describedby":"default"!==N?`accordion-status-${f}`:void 0,onClick:T,onKeyDown:n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),T())},"data-testid":`${S||f}-header`,children:["left"===v&&c&&$(),n("div",{className:"accordion-item-header-content",children:b}),"right"===v&&c&&$()]}),n("div",{id:`accordion-content-${f}`,className:"accordion-item-content "+(e?"accordion-item-content--open":""),role:"region","aria-labelledby":`accordion-header-${f}`,ref:g,style:{maxHeight:u?e?"none":"0":e?"500px":"0",transition:u?"none":void 0},"data-testid":`${S||f}-content`,children:r("div",{className:"accordion-item-body",children:["default"!==N&&n("div",{id:`accordion-status-${f}`,className:`accordion-status accordion-status--${N}`,"aria-live":"polite",children:r("span",{className:"visually-hidden",children:["Status: ",N]})}),w]})})]})});V.displayName="AccordionItem";S("/* =============================================================================\r\n * ACCORDION COMPONENT - VTX DESIGN SYSTEM\r\n * =============================================================================\r\n * \r\n * A modern, accessible accordion component that fully utilizes the VTX design \r\n * system tokens for consistent theming and beautiful visual states.\r\n * \r\n * Features:\r\n * - Complete VTX token integration\r\n * - Multiple visual variants (default, bordered, separated, flush)\r\n * - Responsive size variants (sm, md, lg)\r\n * - Enhanced hover, focus, and active states\r\n * - Dark mode support\r\n * - Accessibility features\r\n * - Smooth animations\r\n * ============================================================================= */\r\n\r\n.accordion {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n/* =============================================================================\r\n * VARIANT STYLES\r\n * ============================================================================= */\r\n\r\n/* Default Variant - Clean card-like appearance */\r\n.accordion--default {\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n border-radius: var(--vtx-radius-xl);\r\n overflow: hidden;\r\n box-shadow: var(--vtx-shadow-base);\r\n transition: box-shadow var(--vtx-transition-base);\r\n}\r\n\r\n.accordion--default:hover {\r\n box-shadow: var(--vtx-shadow-md);\r\n}\r\n\r\n.accordion--default.accordion--divider .accordion-item:not(:last-child) {\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n/* Bordered Variant - Individual cards with spacing */\r\n.accordion--bordered .accordion-item {\r\n background: white;\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n border-radius: var(--vtx-radius-lg);\r\n box-shadow: var(--vtx-shadow-sm);\r\n transition: \r\n box-shadow var(--vtx-transition-base),\r\n border-color var(--vtx-transition-base),\r\n transform var(--vtx-transition-fast);\r\n}\r\n\r\n.accordion--bordered .accordion-item:hover {\r\n border-color: var(--vtx-color-primary-300);\r\n box-shadow: var(--vtx-shadow-md);\r\n transform: translateY(-1px);\r\n}\r\n\r\n.accordion--bordered .accordion-item + .accordion-item {\r\n margin-top: var(--vtx-spacing-4);\r\n}\r\n\r\n/* Separated Variant - Floating cards with enhanced shadows */\r\n.accordion--separated .accordion-item {\r\n background: white;\r\n border: 1px solid var(--vtx-color-neutral-100);\r\n border-radius: var(--vtx-radius-xl);\r\n box-shadow: \r\n var(--vtx-shadow-base),\r\n 0 0 0 1px rgba(255, 255, 255, 0.8);\r\n transition: \r\n box-shadow var(--vtx-transition-base),\r\n transform var(--vtx-transition-base);\r\n backdrop-filter: blur(10px);\r\n}\r\n\r\n.accordion--separated .accordion-item:hover {\r\n box-shadow: \r\n var(--vtx-shadow-xl),\r\n 0 0 0 1px var(--vtx-color-primary-100);\r\n transform: translateY(-2px);\r\n}\r\n\r\n.accordion--separated .accordion-item + .accordion-item {\r\n margin-top: var(--vtx-spacing-6);\r\n}\r\n\r\n/* Flush Variant - Minimal design without borders */\r\n.accordion--flush {\r\n border: none;\r\n box-shadow: none;\r\n background: transparent;\r\n}\r\n\r\n.accordion--flush .accordion-item {\r\n background: transparent;\r\n border: none;\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n border-radius: 0;\r\n box-shadow: none;\r\n}\r\n\r\n.accordion--flush .accordion-item:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.accordion--flush .accordion-item:hover {\r\n background: var(--vtx-color-neutral-50);\r\n}\r\n\r\n/* Dividers for bordered variant */\r\n.accordion--bordered.accordion--divider .accordion-item:not(:last-child) {\r\n position: relative;\r\n margin-bottom: var(--accordion-divider-spacing, 12px);\r\n}\r\n\r\n.accordion--bordered.accordion--divider .accordion-item:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -10px;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background: var(--accordion-divider, var(--color-border, #e5e7eb));\r\n}\r\n\r\n.accordion--separated .accordion-item {\r\n background: var(--accordion-bg, var(--color-background, #ffffff));\r\n border-radius: var(--accordion-item-radius-lg, var(--radius-lg, 10px));\r\n box-shadow: var(\r\n --accordion-separated-shadow,\r\n var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06))\r\n );\r\n border: 1px solid var(--accordion-separated-border, var(--color-border-light, #f3f4f6));\r\n transition:\r\n transform var(--transition-duration, 0.2s) var(--transition-timing, ease),\r\n box-shadow var(--transition-duration, 0.2s) var(--transition-timing, ease);\r\n}\r\n\r\n.accordion--separated .accordion-item:hover {\r\n transform: translateY(-2px);\r\n box-shadow: var(\r\n --accordion-separated-shadow-hover,\r\n var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05))\r\n );\r\n}\r\n\r\n.accordion--separated .accordion-item + .accordion-item {\r\n margin-top: var(--accordion-spacing-lg, var(--spacing-4, 16px));\r\n}\r\n\r\n/* Dividers for separated variant */\r\n.accordion--separated.accordion--divider .accordion-item {\r\n position: relative;\r\n}\r\n\r\n.accordion--separated.accordion--divider .accordion-item:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -8px;\r\n left: 10%;\r\n right: 10%;\r\n height: 1px;\r\n background: var(\r\n --accordion-divider-gradient,\r\n linear-gradient(\r\n to right,\r\n transparent,\r\n var(--color-border-hover, #d1d5db) 20%,\r\n var(--color-border-hover, #d1d5db) 80%,\r\n transparent\r\n )\r\n );\r\n z-index: 1;\r\n}\r\n\r\n.accordion--flush {\r\n border: none;\r\n background: transparent;\r\n}\r\n\r\n.accordion--flush .accordion-item {\r\n border: none;\r\n border-radius: 0;\r\n background: transparent;\r\n border-bottom: 1px solid var(--accordion-divider, var(--color-border, #e5e7eb));\r\n}\r\n\r\n.accordion--flush .accordion-item:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n/* Accordion Item */\r\n.accordion-item {\r\n position: relative;\r\n background: inherit;\r\n transition: all var(--transition-duration, 0.2s) var(--transition-timing, ease);\r\n overflow: hidden;\r\n}\r\n\r\n.accordion-item--disabled {\r\n opacity: var(--accordion-disabled-opacity, 0.5);\r\n pointer-events: none;\r\n}\r\n\r\n.accordion-item--disabled .accordion-item-header {\r\n cursor: not-allowed;\r\n color: var(--accordion-disabled-color, var(--color-text-disabled, #9ca3af));\r\n}\r\n\r\n/* Accordion Item Header */\r\n.accordion-item-header {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n cursor: pointer;\r\n outline: none;\r\n transition: all var(--transition-duration, 0.2s) var(--transition-timing, ease);\r\n user-select: none;\r\n position: relative;\r\n border: none;\r\n background: transparent;\r\n text-align: left;\r\n}\r\n\r\n.accordion-item-header:hover:not(:disabled) {\r\n background: var(\r\n --accordion-header-hover-bg,\r\n var(--color-background-hover, linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%))\r\n );\r\n}\r\n\r\n.accordion-item-header:active {\r\n transform: translateY(1px);\r\n}\r\n\r\n.accordion-item-header:focus {\r\n outline: 2px solid var(--accordion-focus-color, var(--vtx-color-primary-500));\r\n outline-offset: -2px;\r\n border-radius: var(--accordion-focus-radius, var(--radius-sm, 4px));\r\n}\r\n\r\n.accordion-item-header:focus:not(:focus-visible) {\r\n outline: none;\r\n}\r\n\r\n.accordion-item-header-content {\r\n flex: 1;\r\n text-align: left;\r\n font-weight: var(--accordion-header-font-weight, var(--font-weight-semibold, 600));\r\n color: var(--accordion-header-color, var(--color-text-primary, #1f2937));\r\n line-height: var(--accordion-header-line-height, var(--line-height-normal, 1.5));\r\n}\r\n\r\n/* Chevron Icon */\r\n.accordion-item-chevron {\r\n transition: transform var(--accordion-icon-transition, var(--transition-duration-slow, 0.3s))\r\n var(--transition-timing-smooth, cubic-bezier(0.4, 0, 0.2, 1));\r\n color: var(--accordion-icon-color, var(--color-text-secondary, #6b7280));\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--accordion-icon-size, 24px);\r\n height: var(--accordion-icon-size, 24px);\r\n border-radius: var(--accordion-icon-radius, 50%);\r\n background: var(--accordion-icon-bg, rgba(59, 130, 246, 0.1));\r\n}\r\n\r\n.accordion-item-chevron.open {\r\n transform: rotate(180deg);\r\n background: var(--accordion-icon-bg-open, rgba(59, 130, 246, 0.2));\r\n color: var(--accordion-icon-color-open, var(--vtx-color-primary-500));\r\n}\r\n\r\n.accordion-item-header:hover .accordion-chevron {\r\n background: var(--accordion-icon-bg-hover, rgba(59, 130, 246, 0.15));\r\n color: var(--accordion-icon-color-hover, var(--vtx-color-primary-500));\r\n}\r\n\r\n/* Accordion Item Content */\r\n.accordion-item-content {\r\n overflow: hidden;\r\n transition: all var(--accordion-content-transition, var(--transition-duration-slow, 0.3s))\r\n var(--transition-timing-smooth, cubic-bezier(0.4, 0, 0.2, 1));\r\n max-height: 0;\r\n background: var(--accordion-content-bg, var(--color-background-alt, #fafbfc));\r\n border-top: 1px solid transparent;\r\n}\r\n\r\n.accordion-item-content--open {\r\n max-height: var(--accordion-content-max-height, 500px);\r\n border-top-color: var(--accordion-content-border, var(--color-border, #e5e7eb));\r\n}\r\n\r\n.accordion-item-body {\r\n color: var(--accordion-body-color, var(--color-text-secondary, #4b5563));\r\n line-height: var(--accordion-body-line-height, var(--line-height-relaxed, 1.7));\r\n font-size: var(--accordion-body-font-size, 0.95em);\r\n}\r\n\r\n/* =============================================================================\r\n * SIZE VARIANTS\r\n * ============================================================================= */\r\n\r\n/* Small Size */\r\n.accordion--sm .accordion-item-header {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-sm);\r\n min-height: 48px;\r\n}\r\n\r\n.accordion--sm .accordion-item-header-content {\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.accordion--sm .accordion-item-body {\r\n padding: var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-xs);\r\n}\r\n\r\n.accordion--sm .accordion-item-chevron {\r\n width: var(--vtx-spacing-5);\r\n height: var(--vtx-spacing-5);\r\n}\r\n\r\n.accordion--sm .accordion-item-chevron svg {\r\n width: var(--vtx-spacing-3);\r\n height: var(--vtx-spacing-3);\r\n}\r\n\r\n/* Medium Size (Default) */\r\n.accordion--md .accordion-item-header {\r\n padding: var(--vtx-spacing-4) var(--vtx-spacing-5);\r\n font-size: var(--vtx-font-size-base);\r\n min-height: 56px;\r\n}\r\n\r\n.accordion--md .accordion-item-header-content {\r\n font-size: var(--vtx-font-size-base);\r\n}\r\n\r\n.accordion--md .accordion-item-body {\r\n padding: var(--vtx-spacing-5);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.accordion--md .accordion-item-chevron {\r\n width: var(--vtx-spacing-6);\r\n height: var(--vtx-spacing-6);\r\n}\r\n\r\n.accordion--md .accordion-item-chevron svg {\r\n width: var(--vtx-spacing-4);\r\n height: var(--vtx-spacing-4);\r\n}\r\n\r\n/* Large Size */\r\n.accordion--lg .accordion-item-header {\r\n padding: var(--vtx-spacing-5) var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-lg);\r\n min-height: 64px;\r\n}\r\n\r\n.accordion--lg .accordion-item-header-content {\r\n font-size: var(--vtx-font-size-lg);\r\n font-weight: var(--vtx-font-weight-bold);\r\n}\r\n\r\n.accordion--lg .accordion-item-body {\r\n padding: var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-base);\r\n}\r\n\r\n.accordion--lg .accordion-item-chevron {\r\n width: var(--vtx-spacing-8);\r\n height: var(--vtx-spacing-8);\r\n}\r\n\r\n.accordion--lg .accordion-item-chevron svg {\r\n width: var(--vtx-spacing-5);\r\n height: var(--vtx-spacing-5);\r\n}\r\n\r\n/* =============================================================================\r\n * DARK MODE SUPPORT\r\n * ============================================================================= */\r\n\r\n[data-theme=\"dark\"] .accordion,\r\n@media (prefers-color-scheme: dark) {\r\n .accordion {\r\n color: var(--vtx-color-neutral-100);\r\n }\r\n\r\n /* Dark mode variants */\r\n .accordion--default {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-700);\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .accordion--bordered .accordion-item,\r\n .accordion--separated .accordion-item {\r\n background: var(--vtx-color-neutral-900);\r\n border-color: var(--vtx-color-neutral-700);\r\n }\r\n\r\n .accordion--flush .accordion-item:hover {\r\n background: var(--vtx-color-neutral-800);\r\n }\r\n\r\n /* Header dark mode */\r\n .accordion-item-header {\r\n background: var(--vtx-color-neutral-900);\r\n }\r\n\r\n .accordion-item-header:hover {\r\n background: linear-gradient(135deg, var(--vtx-color-neutral-800) 0%, var(--vtx-color-neutral-700) 100%);\r\n }\r\n\r\n .accordion-item-header-content {\r\n color: var(--vtx-color-neutral-100);\r\n }\r\n\r\n .accordion-item-header:hover .accordion-item-header-content {\r\n color: var(--vtx-color-primary-300);\r\n }\r\n\r\n .accordion-item--open .accordion-item-header {\r\n background: linear-gradient(135deg, var(--vtx-color-neutral-800) 0%, var(--vtx-color-primary-900) 100%);\r\n border-bottom-color: var(--vtx-color-neutral-600);\r\n }\r\n\r\n .accordion-item--open .accordion-item-header-content {\r\n color: var(--vtx-color-primary-200);\r\n }\r\n\r\n /* Content dark mode */\r\n .accordion-item-content {\r\n background: var(--vtx-color-neutral-800);\r\n border-top-color: var(--vtx-color-neutral-700);\r\n }\r\n\r\n .accordion-item-content--open {\r\n border-top-color: var(--vtx-color-neutral-600);\r\n }\r\n\r\n .accordion-item-body {\r\n color: var(--vtx-color-neutral-300);\r\n }\r\n\r\n /* Chevron dark mode */\r\n .accordion-item-chevron {\r\n background: var(--vtx-color-primary-900);\r\n color: var(--vtx-color-primary-300);\r\n }\r\n\r\n .accordion-item-chevron.open {\r\n background: var(--vtx-color-primary-800);\r\n color: var(--vtx-color-primary-200);\r\n }\r\n\r\n .accordion-item-header:hover .accordion-item-chevron {\r\n background: var(--vtx-color-primary-700);\r\n color: var(--vtx-color-primary-100);\r\n }\r\n}\r\n\r\n/* =============================================================================\r\n * ENHANCED STATES AND ANIMATIONS\r\n * ============================================================================= */\r\n\r\n/* Loading state */\r\n.accordion-item--loading {\r\n opacity: 0.6;\r\n pointer-events: none;\r\n}\r\n\r\n.accordion-item--loading .accordion-item-chevron {\r\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n\r\n/* Enhanced animations */\r\n@keyframes pulse {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.5;\r\n }\r\n}\r\n\r\n@keyframes slideDown {\r\n from {\r\n max-height: 0;\r\n opacity: 0;\r\n }\r\n to {\r\n max-height: 500px;\r\n opacity: 1;\r\n }\r\n}\r\n\r\n/* Enhanced visual feedback */\r\n.accordion-item-header:active {\r\n transform: scale(0.99);\r\n}\r\n\r\n/* Beautiful gradient accents for special states */\r\n.accordion-item--featured .accordion-item-header {\r\n background: linear-gradient(135deg, var(--vtx-color-primary-50) 0%, var(--vtx-color-secondary-50) 100%);\r\n border-left: 4px solid var(--vtx-color-primary-500);\r\n}\r\n\r\n/* Status indicators */\r\n.accordion-item--success .accordion-item-header {\r\n border-left: 4px solid var(--vtx-color-success-500);\r\n}\r\n\r\n.accordion-item--warning .accordion-item-header {\r\n border-left: 4px solid var(--vtx-color-warning-500);\r\n}\r\n\r\n.accordion-item--error .accordion-item-header {\r\n border-left: 4px solid var(--vtx-color-error-500);\r\n}\r\n\r\n/* =============================================================================\r\n * ACCESSIBILITY AND MOTION\r\n * ============================================================================= */\r\n\r\n/* High contrast mode */\r\n@media (prefers-contrast: high) {\r\n .accordion-item {\r\n border: 2px solid currentColor;\r\n }\r\n \r\n .accordion-item-header:focus-visible {\r\n outline: 4px solid currentColor;\r\n outline-offset: 2px;\r\n }\r\n \r\n .accordion-item-header-content {\r\n font-weight: var(--vtx-font-weight-bold);\r\n }\r\n}\r\n\r\n/* Reduced motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n .accordion-item,\r\n .accordion-item-header,\r\n .accordion-item-chevron,\r\n .accordion-item-content,\r\n .accordion-item-body {\r\n transition: none;\r\n animation: none;\r\n }\r\n \r\n .accordion-item-chevron.open {\r\n transform: none;\r\n }\r\n}\r\n\r\n/* Print styles */\r\n@media print {\r\n .accordion-item {\r\n page-break-inside: avoid;\r\n }\r\n \r\n .accordion-item-content {\r\n max-height: none !important;\r\n overflow: visible !important;\r\n }\r\n \r\n .accordion-item-chevron {\r\n display: none;\r\n }\r\n}\r\n\r\n/* =============================================================================\r\n * UTILITY CLASSES\r\n * ============================================================================= */\r\n\r\n/* Custom spacing */\r\n.accordion--compact .accordion-item-header {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-4);\r\n min-height: 40px;\r\n}\r\n\r\n.accordion--compact .accordion-item-body {\r\n padding: var(--vtx-spacing-3);\r\n}\r\n\r\n.accordion--spacious .accordion-item-header {\r\n padding: var(--vtx-spacing-6) var(--vtx-spacing-8);\r\n min-height: 72px;\r\n}\r\n\r\n.accordion--spacious .accordion-item-body {\r\n padding: var(--vtx-spacing-8);\r\n}\r\n\r\n/* No animations */\r\n.accordion--no-animation * {\r\n transition: none !important;\r\n animation: none !important;\r\n}\r\n\r\n\r\n");const Y=o.forwardRef(({items:r,children:t,allowMultiple:e=!1,defaultOpenItems:o=[],openItems:a,onToggle:i,variant:l="default",size:c="md",className:p="",style:m,showChevron:u=!0,chevronPosition:h="right",expandedIcon:g,collapsedIcon:f,iconType:b="chevron",showDivider:w=!0,collapsible:y=!0,loading:k=!1,disabled:z=!1,spacing:N="default",disableAnimations:C=!1,...S},_)=>{const[L,T]=v(o),$=void 0!==a?a:L,M=void 0!==a,j=r||s.toArray(t).filter(n=>d(n)).map((n,r)=>{if(d(n)&&n.props){const t=n;return{id:t.props.id||`accordion-item-${r}`,header:t.props.header||`Item ${r+1}`,children:t.props.children,disabled:t.props.disabled,className:t.props.className}}return{id:`accordion-item-${r}`,header:`Item ${r+1}`,children:n}}),B=x(n=>{let r;r=e?$.includes(n)?$.filter(r=>r!==n):[...$,n]:$.includes(n)?y?[]:$:[n],M||T(r),null==i||i(r)},[e,y,$,M,i]);return n("div",{ref:_,className:`\n accordion\n accordion--${l}\n accordion--${c}\n ${w?"accordion--divider":""}\n ${"compact"===N?"accordion--compact":""}\n ${"spacious"===N?"accordion--spacious":""}\n ${C?"accordion--no-animation":""}\n ${k?"accordion--loading":""}\n ${z?"accordion--disabled":""}\n ${p}\n `.trim(),style:m,role:"presentation","aria-busy":k,...S,children:j.map(r=>n(V,{item:r,isOpen:$.includes(r.id),onToggle:()=>B(r.id),variant:l,size:c,showChevron:u,chevronPosition:h,expandedIcon:g,collapsedIcon:f,iconType:b,loading:k,disabled:z,spacing:N,disableAnimations:C},r.id))})});Y.displayName="Accordion";S("/* Alert Component Styles */\r\n\r\n.alert {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-3);\r\n padding: var(--vtx-spacing-4);\r\n border-radius: var(--vtx-radius-md);\r\n font-family: var(--vtx-font-family-sans);\r\n transition: all var(--vtx-transition-base);\r\n position: relative;\r\n}\r\n\r\n.alert--full-width {\r\n width: 100%;\r\n}\r\n\r\n/* Sizes */\r\n.alert--sm {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n.alert--sm .alert-icon svg {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n.alert--md {\r\n padding: var(--vtx-spacing-4);\r\n gap: var(--vtx-spacing-3);\r\n}\r\n\r\n.alert--md .alert-icon svg {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n.alert--lg {\r\n padding: var(--vtx-spacing-5);\r\n gap: var(--vtx-spacing-4);\r\n}\r\n\r\n.alert--lg .alert-icon svg {\r\n width: 24px;\r\n height: 24px;\r\n}\r\n\r\n/* Icon */\r\n.alert-icon {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 0.125rem;\r\n}\r\n\r\n/* Content */\r\n.alert-content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.alert-title {\r\n font-weight: var(--vtx-font-weight-semibold);\r\n font-size: var(--vtx-font-size-base);\r\n line-height: var(--vtx-line-height-tight);\r\n margin-bottom: var(--vtx-spacing-1);\r\n}\r\n\r\n.alert--sm .alert-title {\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.alert--lg .alert-title {\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n.alert-message {\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n opacity: 0.9;\r\n}\r\n\r\n.alert--sm .alert-message {\r\n font-size: var(--vtx-font-size-xs);\r\n}\r\n\r\n.alert--lg .alert-message {\r\n font-size: var(--vtx-font-size-base);\r\n}\r\n\r\n/* Only title, no message */\r\n.alert-title:only-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n/* Action */\r\n.alert-action {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n margin-left: auto;\r\n}\r\n\r\n/* Close Button */\r\n.alert-close {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: var(--vtx-spacing-1);\r\n margin: calc(var(--vtx-spacing-1) * -1);\r\n border-radius: var(--vtx-radius-base);\r\n transition: all var(--vtx-transition-fast);\r\n opacity: 0.6;\r\n}\r\n\r\n.alert-close:hover {\r\n opacity: 1;\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.alert-close:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n.alert-close:focus-visible {\r\n outline: 2px solid currentColor;\r\n outline-offset: 2px;\r\n}\r\n\r\n/* ===== VARIANTS: SUCCESS ===== */\r\n\r\n/* Subtle */\r\n.alert--success.alert--subtle {\r\n background-color: var(--vtx-color-success-50);\r\n color: var(--vtx-color-success-700);\r\n border: 1px solid var(--vtx-color-success-200);\r\n}\r\n\r\n.alert--success.alert--subtle .alert-icon {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--success.alert--filled {\r\n background-color: var(--vtx-color-success-600);\r\n color: white;\r\n border: 1px solid var(--vtx-color-success-600);\r\n}\r\n\r\n.alert--success.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--success.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--success.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-success-700);\r\n border: 2px solid var(--vtx-color-success-500);\r\n}\r\n\r\n.alert--success.alert--outlined .alert-icon {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--success.alert--left-accent {\r\n background-color: var(--vtx-color-success-50);\r\n color: var(--vtx-color-success-700);\r\n border: 1px solid var(--vtx-color-success-200);\r\n border-left: 4px solid var(--vtx-color-success-600);\r\n}\r\n\r\n.alert--success.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n/* ===== VARIANTS: ERROR ===== */\r\n\r\n/* Subtle */\r\n.alert--error.alert--subtle {\r\n background-color: var(--vtx-color-error-50);\r\n color: var(--vtx-color-error-700);\r\n border: 1px solid var(--vtx-color-error-200);\r\n}\r\n\r\n.alert--error.alert--subtle .alert-icon {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--error.alert--filled {\r\n background-color: var(--vtx-color-error-600);\r\n color: white;\r\n border: 1px solid var(--vtx-color-error-600);\r\n}\r\n\r\n.alert--error.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--error.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--error.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-error-700);\r\n border: 2px solid var(--vtx-color-error-500);\r\n}\r\n\r\n.alert--error.alert--outlined .alert-icon {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--error.alert--left-accent {\r\n background-color: var(--vtx-color-error-50);\r\n color: var(--vtx-color-error-700);\r\n border: 1px solid var(--vtx-color-error-200);\r\n border-left: 4px solid var(--vtx-color-error-600);\r\n}\r\n\r\n.alert--error.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* ===== VARIANTS: WARNING ===== */\r\n\r\n/* Subtle */\r\n.alert--warning.alert--subtle {\r\n background-color: var(--vtx-color-warning-50);\r\n color: var(--vtx-color-warning-700);\r\n border: 1px solid var(--vtx-color-warning-200);\r\n}\r\n\r\n.alert--warning.alert--subtle .alert-icon {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--warning.alert--filled {\r\n background-color: var(--vtx-color-warning-600);\r\n color: white;\r\n border: 1px solid var(--vtx-color-warning-600);\r\n}\r\n\r\n.alert--warning.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--warning.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--warning.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-warning-700);\r\n border: 2px solid var(--vtx-color-warning-500);\r\n}\r\n\r\n.alert--warning.alert--outlined .alert-icon {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--warning.alert--left-accent {\r\n background-color: var(--vtx-color-warning-50);\r\n color: var(--vtx-color-warning-700);\r\n border: 1px solid var(--vtx-color-warning-200);\r\n border-left: 4px solid var(--vtx-color-warning-600);\r\n}\r\n\r\n.alert--warning.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n/* ===== VARIANTS: INFO ===== */\r\n\r\n/* Subtle */\r\n.alert--info.alert--subtle {\r\n background-color: var(--vtx-color-info-50);\r\n color: var(--vtx-color-info-700);\r\n border: 1px solid var(--vtx-color-info-200);\r\n}\r\n\r\n.alert--info.alert--subtle .alert-icon {\r\n color: var(--vtx-color-info-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--info.alert--filled {\r\n background-color: var(--vtx-color-info-600);\r\n color: white;\r\n border: 1px solid var(--vtx-color-info-600);\r\n}\r\n\r\n.alert--info.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--info.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--info.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-info-700);\r\n border: 2px solid var(--vtx-color-info-500);\r\n}\r\n\r\n.alert--info.alert--outlined .alert-icon {\r\n color: var(--vtx-color-info-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--info.alert--left-accent {\r\n background-color: var(--vtx-color-info-50);\r\n color: var(--vtx-color-info-700);\r\n border: 1px solid var(--vtx-color-info-200);\r\n border-left: 4px solid var(--vtx-color-info-600);\r\n}\r\n\r\n.alert--info.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-info-600);\r\n}\r\n\r\n/* ===== VARIANTS: NEUTRAL ===== */\r\n\r\n/* Subtle */\r\n.alert--neutral.alert--subtle {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-800);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n}\r\n\r\n.alert--neutral.alert--subtle .alert-icon {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--neutral.alert--filled {\r\n background-color: var(--vtx-color-neutral-700);\r\n color: white;\r\n border: 1px solid var(--vtx-color-neutral-700);\r\n}\r\n\r\n.alert--neutral.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--neutral.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--neutral.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-neutral-800);\r\n border: 2px solid var(--vtx-color-neutral-500);\r\n}\r\n\r\n.alert--neutral.alert--outlined .alert-icon {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--neutral.alert--left-accent {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-800);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-left: 4px solid var(--vtx-color-neutral-600);\r\n}\r\n\r\n.alert--neutral.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* Warning colors need adjustment for better contrast */\r\n.alert--warning {\r\n --vtx-color-warning-200: #fde68a;\r\n}\r\n");const P=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M12 4L4 12M4 4l8 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),X={success:n(()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm-1.293 14.707l-3.414-3.414 1.414-1.414L9 12.172l5.293-5.293 1.414 1.414-6.707 6.707z",fill:"currentColor"})}),{}),error:n(()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z",fill:"currentColor"})}),{}),warning:n(()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M10 0L0 18h20L10 0zm1 15H9v-2h2v2zm0-4H9V7h2v4z",fill:"currentColor"})}),{}),info:n(()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),{}),neutral:n(()=>r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[n("circle",{cx:"10",cy:"10",r:"9",stroke:"currentColor",strokeWidth:"2",fill:"none"}),n("path",{d:"M10 6v5M10 13v1",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}),{})},q=o.forwardRef(({children:t,title:e,description:o,variant:a="info",alertStyle:i="subtle",size:l,icon:c,dismissible:s=!1,onClose:d,action:x,fullWidth:p=!1,className:m="",style:u,role:h="alert",...g},f)=>{const{theme:b}=C(),w=l||(null==b?void 0:b.defaultSize)||"md",[y,k]=v(!0);if(!y)return null;const z=!1!==c,N=void 0===c?X[a]:c,S=t||o;return r("div",{ref:f,className:`\n alert\n alert--${a}\n alert--${i}\n alert--${w}\n ${p?"alert--full-width":""}\n ${m}\n `.trim(),style:u,role:h,...g,children:[z&&n("div",{className:"alert-icon",children:N}),r("div",{className:"alert-content",children:[e&&n("div",{className:"alert-title",children:e}),S&&n("div",{className:"alert-message",children:null!=t?t:o})]}),x&&n("div",{className:"alert-action",children:x}),s&&n("button",{type:"button",className:"alert-close",onClick:()=>{k(!1),null==d||d()},"aria-label":"Close alert",children:n(P,{})})]})});q.displayName="Alert";S("/* Flex Component */\n.vtx-flex {\n display: flex;\n gap: var(--vtx-flex-gap, 0);\n row-gap: var(--vtx-flex-row-gap, var(--vtx-flex-gap, 0));\n column-gap: var(--vtx-flex-column-gap, var(--vtx-flex-gap, 0));\n}\n\n/* Full width modifier */\n.vtx-flex--full-width {\n width: 100%;\n}\n\n/* Inline variant */\n.vtx-flex--inline {\n display: inline-flex;\n}\n\n/* Direction variants */\n.vtx-flex--column {\n flex-direction: column;\n}\n\n.vtx-flex--row-reverse {\n flex-direction: row-reverse;\n}\n\n.vtx-flex--column-reverse {\n flex-direction: column-reverse;\n}\n\n/* Wrap variants */\n.vtx-flex--wrap {\n flex-wrap: wrap;\n}\n\n.vtx-flex--wrap-reverse {\n flex-wrap: wrap-reverse;\n}\n\n/* Justify content variants */\n.vtx-flex--justify-start {\n justify-content: flex-start;\n}\n\n.vtx-flex--justify-end {\n justify-content: flex-end;\n}\n\n.vtx-flex--justify-center {\n justify-content: center;\n}\n\n.vtx-flex--justify-between {\n justify-content: space-between;\n}\n\n.vtx-flex--justify-around {\n justify-content: space-around;\n}\n\n.vtx-flex--justify-evenly {\n justify-content: space-evenly;\n}\n\n/* Align items variants */\n.vtx-flex--align-start {\n align-items: flex-start;\n}\n\n.vtx-flex--align-end {\n align-items: flex-end;\n}\n\n.vtx-flex--align-center {\n align-items: center;\n}\n\n.vtx-flex--align-baseline {\n align-items: baseline;\n}\n\n.vtx-flex--align-stretch {\n align-items: stretch;\n}\n\n/* Align content variants (for multi-line) */\n.vtx-flex--align-content-start {\n align-content: flex-start;\n}\n\n.vtx-flex--align-content-end {\n align-content: flex-end;\n}\n\n.vtx-flex--align-content-center {\n align-content: center;\n}\n\n.vtx-flex--align-content-between {\n align-content: space-between;\n}\n\n.vtx-flex--align-content-around {\n align-content: space-around;\n}\n\n.vtx-flex--align-content-stretch {\n align-content: stretch;\n}\n");const G=o.forwardRef(({children:r,direction:t="row",wrap:e="nowrap",justify:o="start",align:a="stretch",alignContent:i,gap:l,rowGap:c,columnGap:v,inline:s=!1,fullWidth:d=!0,grow:x,shrink:p,basis:m,className:u="",as:h="div",style:g,...f},b)=>{const w=h,y=["vtx-flex",s&&"vtx-flex--inline",d&&"vtx-flex--full-width","row"!==t&&`vtx-flex--${t}`,"nowrap"!==e&&`vtx-flex--${e}`,"start"!==o&&`vtx-flex--justify-${o}`,"stretch"!==a&&`vtx-flex--align-${a}`,i&&`vtx-flex--align-content-${i}`,u].filter(Boolean).join(" "),k={...g};return void 0!==l&&(k["--vtx-flex-gap"]="number"==typeof l?`${l}px`:l),void 0!==c&&(k["--vtx-flex-row-gap"]="number"==typeof c?`${c}px`:c),void 0!==v&&(k["--vtx-flex-column-gap"]="number"==typeof v?`${v}px`:v),void 0!==x&&(k.flexGrow=x),void 0!==p&&(k.flexShrink=p),void 0!==m&&(k.flexBasis="number"==typeof m?`${m}px`:m),n(w,{ref:b,className:y,style:k,...f,children:r})});G.displayName="Flex";S("/* ===== Text Component Base Styles ===== */\n.vtx-text {\n margin: 0;\n padding: 0;\n font-family: var(--vtx-font-family-sans);\n color: inherit;\n transition: color var(--vtx-transition-fast);\n}\n\n/* ===== Text Variants ===== */\n/* Headings */\n.vtx-text--h1 {\n font-size: var(--vtx-text-h1-font-size, 3.75rem);\n font-weight: var(--vtx-text-h1-font-weight, 700);\n line-height: var(--vtx-text-h1-line-height, 1.2);\n letter-spacing: var(--vtx-text-h1-letter-spacing, -0.025em);\n margin-bottom: var(--vtx-spacing-6, 1.5rem);\n}\n\n.vtx-text--h2 {\n font-size: var(--vtx-text-h2-font-size, 3rem);\n font-weight: var(--vtx-text-h2-font-weight, 700);\n line-height: var(--vtx-text-h2-line-height, 1.25);\n letter-spacing: var(--vtx-text-h2-letter-spacing, -0.025em);\n margin-bottom: var(--vtx-spacing-5, 1.25rem);\n}\n\n.vtx-text--h3 {\n font-size: var(--vtx-text-h3-font-size, 2.25rem);\n font-weight: var(--vtx-text-h3-font-weight, 600);\n line-height: var(--vtx-text-h3-line-height, 1.3);\n letter-spacing: var(--vtx-text-h3-letter-spacing, -0.025em);\n margin-bottom: var(--vtx-spacing-4, 1rem);\n}\n\n.vtx-text--h4 {\n font-size: var(--vtx-text-h4-font-size, 1.875rem);\n font-weight: var(--vtx-text-h4-font-weight, 600);\n line-height: var(--vtx-text-h4-line-height, 1.35);\n letter-spacing: var(--vtx-text-h4-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-4, 1rem);\n}\n\n.vtx-text--h5 {\n font-size: var(--vtx-text-h5-font-size, 1.5rem);\n font-weight: var(--vtx-text-h5-font-weight, 600);\n line-height: var(--vtx-text-h5-line-height, 1.4);\n letter-spacing: var(--vtx-text-h5-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-3, 0.75rem);\n}\n\n.vtx-text--h6 {\n font-size: var(--vtx-text-h6-font-size, 1.25rem);\n font-weight: var(--vtx-text-h6-font-weight, 600);\n line-height: var(--vtx-text-h6-line-height, 1.5);\n letter-spacing: var(--vtx-text-h6-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-3, 0.75rem);\n}\n\n/* Body Text */\n.vtx-text--body1 {\n font-size: var(--vtx-text-body1-font-size, 1rem);\n font-weight: var(--vtx-text-body1-font-weight, 400);\n line-height: var(--vtx-text-body1-line-height, 1.5);\n letter-spacing: var(--vtx-text-body1-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-3, 0.75rem);\n}\n\n.vtx-text--body2 {\n font-size: var(--vtx-text-body2-font-size, 0.875rem);\n font-weight: var(--vtx-text-body2-font-weight, 400);\n line-height: var(--vtx-text-body2-line-height, 1.5);\n letter-spacing: var(--vtx-text-body2-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-3, 0.75rem);\n}\n\n/* Subtitles */\n.vtx-text--subtitle1 {\n font-size: var(--vtx-text-subtitle1-font-size, 1.125rem);\n font-weight: var(--vtx-text-subtitle1-font-weight, 500);\n line-height: var(--vtx-text-subtitle1-line-height, 1.5);\n letter-spacing: var(--vtx-text-subtitle1-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-2, 0.5rem);\n}\n\n.vtx-text--subtitle2 {\n font-size: var(--vtx-text-subtitle2-font-size, 1rem);\n font-weight: var(--vtx-text-subtitle2-font-weight, 500);\n line-height: var(--vtx-text-subtitle2-line-height, 1.5);\n letter-spacing: var(--vtx-text-subtitle2-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-2, 0.5rem);\n}\n\n/* Caption */\n.vtx-text--caption {\n font-size: var(--vtx-text-caption-font-size, 0.75rem);\n font-weight: var(--vtx-text-caption-font-weight, 400);\n line-height: var(--vtx-text-caption-line-height, 1.5);\n letter-spacing: var(--vtx-text-caption-letter-spacing, 0.025em);\n color: var(--vtx-color-neutral-600);\n}\n\n/* Overline */\n.vtx-text--overline {\n font-size: var(--vtx-text-overline-font-size, 0.75rem);\n font-weight: var(--vtx-text-overline-font-weight, 600);\n line-height: var(--vtx-text-overline-line-height, 1.5);\n letter-spacing: var(--vtx-text-overline-letter-spacing, 0.1em);\n text-transform: uppercase;\n color: var(--vtx-color-neutral-600);\n}\n\n/* Button Text */\n.vtx-text--button {\n font-size: var(--vtx-text-button-font-size, 0.875rem);\n font-weight: var(--vtx-text-button-font-weight, 600);\n line-height: var(--vtx-text-button-line-height, 1.5);\n letter-spacing: var(--vtx-text-button-letter-spacing, 0.025em);\n}\n\n/* Label */\n.vtx-text--label {\n font-size: var(--vtx-text-label-font-size, 0.875rem);\n font-weight: var(--vtx-text-label-font-weight, 500);\n line-height: var(--vtx-text-label-line-height, 1.5);\n letter-spacing: var(--vtx-text-label-letter-spacing, 0);\n display: inline-block;\n margin-bottom: var(--vtx-spacing-2, 0.5rem);\n}\n\n/* ===== Text Alignment ===== */\n.vtx-text--align-left {\n text-align: left;\n}\n\n.vtx-text--align-center {\n text-align: center;\n}\n\n.vtx-text--align-right {\n text-align: right;\n}\n\n.vtx-text--align-justify {\n text-align: justify;\n}\n\n/* ===== Font Weights ===== */\n.vtx-text--weight-thin {\n font-weight: var(--vtx-font-weight-thin, 100);\n}\n\n.vtx-text--weight-extralight {\n font-weight: var(--vtx-font-weight-extralight, 200);\n}\n\n.vtx-text--weight-light {\n font-weight: var(--vtx-font-weight-light, 300);\n}\n\n.vtx-text--weight-normal {\n font-weight: var(--vtx-font-weight-normal, 400);\n}\n\n.vtx-text--weight-medium {\n font-weight: var(--vtx-font-weight-medium, 500);\n}\n\n.vtx-text--weight-semibold {\n font-weight: var(--vtx-font-weight-semibold, 600);\n}\n\n.vtx-text--weight-bold {\n font-weight: var(--vtx-font-weight-bold, 700);\n}\n\n.vtx-text--weight-extrabold {\n font-weight: var(--vtx-font-weight-extrabold, 800);\n}\n\n.vtx-text--weight-black {\n font-weight: var(--vtx-font-weight-black, 900);\n}\n\n/* ===== Text Transform ===== */\n.vtx-text--transform-none {\n text-transform: none;\n}\n\n.vtx-text--transform-uppercase {\n text-transform: uppercase;\n}\n\n.vtx-text--transform-lowercase {\n text-transform: lowercase;\n}\n\n.vtx-text--transform-capitalize {\n text-transform: capitalize;\n}\n\n/* ===== Text Decoration ===== */\n.vtx-text--decoration-none {\n text-decoration: none;\n}\n\n.vtx-text--decoration-underline {\n text-decoration: underline;\n}\n\n.vtx-text--decoration-line-through {\n text-decoration: line-through;\n}\n\n.vtx-text--decoration-overline {\n text-decoration: overline;\n}\n\n/* ===== Text Utilities ===== */\n/* Truncation */\n.vtx-text--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Line Clamp */\n.vtx-text--line-clamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Break Word */\n.vtx-text--break-word {\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n/* Italic */\n.vtx-text--italic {\n font-style: italic;\n}\n\n/* Underline */\n.vtx-text--underline {\n text-decoration: underline;\n}\n\n/* Strikethrough */\n.vtx-text--strikethrough {\n text-decoration: line-through;\n}\n\n/* Gradient Text */\n.vtx-text--gradient {\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-size: 100%;\n}\n\n/* No Select */\n.vtx-text--no-select {\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n/* ===== Dark Theme Support ===== */\n[data-theme='dark'] .vtx-text--caption,\n[data-theme='dark'] .vtx-text--overline {\n color: var(--vtx-color-neutral-400);\n}\n\n/* ===== Responsive Typography ===== */\n@media (max-width: 768px) {\n .vtx-text--h1 {\n font-size: clamp(2.5rem, 8vw, 3.75rem);\n }\n\n .vtx-text--h2 {\n font-size: clamp(2rem, 6vw, 3rem);\n }\n\n .vtx-text--h3 {\n font-size: clamp(1.75rem, 5vw, 2.25rem);\n }\n\n .vtx-text--h4 {\n font-size: clamp(1.5rem, 4vw, 1.875rem);\n }\n\n .vtx-text--h5 {\n font-size: clamp(1.25rem, 3.5vw, 1.5rem);\n }\n\n .vtx-text--h6 {\n font-size: clamp(1.125rem, 3vw, 1.25rem);\n }\n}\n\n/* ===== Print Styles ===== */\n@media print {\n .vtx-text {\n color: #000;\n }\n\n .vtx-text--gradient {\n -webkit-text-fill-color: initial;\n background-clip: initial;\n -webkit-background-clip: initial;\n }\n}\n\n/* ===== Utility Classes ===== */\n.vtx-text--no-margin {\n margin: 0 !important;\n}\n\n.vtx-text--no-padding {\n padding: 0 !important;\n}\n\n/* ===== Accessibility ===== */\n.vtx-text:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n border-radius: var(--vtx-radius-sm);\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .vtx-text {\n transition: none;\n }\n}\n");const K=e.forwardRef(({variant:n="body1",as:r,align:t,color:o,weight:a,transform:i,decoration:l,truncate:c=!1,lineClamp:v,breakWord:s=!1,italic:d=!1,underline:x=!1,strikethrough:p=!1,gradient:m,noSelect:u=!1,size:h,lineHeight:g,letterSpacing:f,noMargin:b=!1,noPadding:w=!1,className:y="",style:k,children:z,...N},C)=>{const S=r||(n=>({h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",body1:"p",body2:"p",subtitle1:"p",subtitle2:"p",caption:"span",overline:"span",button:"span",label:"label"}[n]))(n),_=["vtx-text",`vtx-text--${n}`,t&&`vtx-text--align-${t}`,a&&"string"==typeof a&&`vtx-text--weight-${a}`,i&&`vtx-text--transform-${i}`,l&&`vtx-text--decoration-${l}`,c&&"vtx-text--truncate",v&&"vtx-text--line-clamp",s&&"vtx-text--break-word",d&&"vtx-text--italic",x&&"vtx-text--underline",p&&"vtx-text--strikethrough",m&&"vtx-text--gradient",u&&"vtx-text--no-select",b&&"vtx-text--no-margin",w&&"vtx-text--no-padding",y].filter(Boolean).join(" "),L={...k};if(o)if(o.includes(".")){const[n,r]=o.split(".");L.color=`var(--vtx-color-${n}-${r})`}else L.color=o;if(a&&"number"==typeof a&&(L.fontWeight=a),v&&(L.WebkitLineClamp=v),m&&m.length>0){const n=1===m.length?m[0]:`linear-gradient(135deg, ${m.join(", ")})`;L.backgroundImage=n}return h&&(L.fontSize="number"==typeof h?`${h}px`:h),g&&(L.lineHeight="number"==typeof g?`${g}`:g),f&&(L.letterSpacing="number"==typeof f?`${f}px`:f),e.createElement(S,{ref:C,className:_,style:L,...N},z)});K.displayName="Text";S("/* Menu Component Styles */\n\n.vtx-menu-container {\n position: relative;\n}\n\n/* Menu Toggle (Hamburger) */\n.vtx-menu-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: var(--vtx-spacing-2);\n background: transparent;\n border: none;\n border-radius: var(--vtx-radius-md);\n color: var(--vtx-text-primary);\n cursor: pointer;\n transition: all var(--vtx-transition-normal);\n}\n\n.vtx-menu-toggle:hover {\n background: var(--vtx-background-hover);\n}\n\n.vtx-menu-toggle:active {\n background: var(--vtx-background-active);\n}\n\n.vtx-menu-toggle:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n/* Menu Container */\n.vtx-menu {\n display: flex;\n flex-direction: column;\n background: var(--vtx-background-primary);\n border-radius: var(--vtx-radius-lg);\n box-shadow: var(--vtx-shadow-sm);\n overflow: hidden;\n}\n\n/* Vertical Menu (Default) */\n.vtx-menu--vertical {\n flex-direction: column;\n min-width: 200px;\n padding: var(--vtx-spacing-2);\n gap: var(--vtx-spacing-1);\n}\n\n/* Horizontal Menu */\n.vtx-menu--horizontal {\n flex-direction: row;\n padding: var(--vtx-spacing-2);\n gap: var(--vtx-spacing-1);\n box-shadow: none;\n border-radius: 0;\n}\n\n/* Menu Item - Professional Sidebar Style */\n.vtx-menu-item {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-3);\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n margin-bottom: var(--vtx-spacing-1);\n border-radius: var(--vtx-radius-md);\n color: var(--vtx-color-neutral-700);\n background: transparent;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n user-select: none;\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n border-left: 3px solid transparent;\n}\n\n.vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item:active:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background: var(--vtx-color-neutral-200);\n transform: scale(0.98);\n}\n\n.vtx-menu-item:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n/* Active Menu Item - Professional Style */\n.vtx-menu-item--active {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item--active .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item--active:hover {\n background-color: var(--vtx-color-primary-100);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item--active:hover .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Disabled Menu Item */\n.vtx-menu-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Danger Variant */\n.vtx-menu-item--danger {\n color: var(--vtx-color-danger-600);\n}\n\n.vtx-menu-item--danger:hover:not(.vtx-menu-item--disabled) {\n background: var(--vtx-color-danger-50);\n}\n\n.vtx-menu-item--danger:active:not(.vtx-menu-item--disabled) {\n background: var(--vtx-color-danger-100);\n}\n\n/* Menu Item Icon */\n.vtx-menu-item-icon,\n.vtx-menu-item-right-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.vtx-menu-item-icon svg,\n.vtx-menu-item-right-icon svg {\n width: 100%;\n height: 100%;\n transition: inherit;\n}\n\n.vtx-menu-item-icon {\n color: var(--vtx-color-neutral-600);\n transition: color 0.15s ease-in-out;\n}\n\n.vtx-menu-item:hover .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Shortcut */\n.vtx-menu-item-shortcut {\n opacity: 0.6;\n font-size: var(--vtx-font-size-xs);\n white-space: nowrap;\n}\n\n/* Menu Divider */\n.vtx-menu-divider {\n height: 1px;\n margin: var(--vtx-spacing-2) 0;\n background: var(--vtx-border-color);\n}\n\n.vtx-menu--horizontal .vtx-menu-divider {\n width: 1px;\n height: auto;\n margin: 0 var(--vtx-spacing-2);\n}\n\n/* Submenu Styles - Inline Expansion for Sidebar */\n.vtx-menu-item--has-submenu {\n position: relative;\n}\n\n.vtx-submenu {\n display: flex;\n flex-direction: column;\n gap: 0;\n padding-left: var(--vtx-spacing-5);\n margin-top: var(--vtx-spacing-2);\n margin-bottom: var(--vtx-spacing-2);\n animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.vtx-submenu .vtx-menu-item {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-4);\n padding-left: var(--vtx-spacing-6);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-normal);\n margin-bottom: var(--vtx-spacing-1);\n}\n\n.vtx-submenu .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-submenu .vtx-menu-item--active {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-submenu .vtx-menu-item--active:hover {\n background-color: var(--vtx-color-primary-100);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-submenu .vtx-menu-item--active .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Nested submenu - additional indentation */\n.vtx-submenu .vtx-submenu {\n padding-left: var(--vtx-spacing-4);\n}\n\n/* Submenu Animation */\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n max-height: 1000px;\n transform: translateY(0);\n }\n}\n\n/* Responsive Styles */\n@media (max-width: 768px) {\n .vtx-menu--responsive .vtx-menu-toggle {\n display: flex;\n }\n\n .vtx-menu--responsive.vtx-menu {\n position: absolute;\n top: 48px;\n left: 0;\n right: 0;\n z-index: 1000;\n display: none;\n min-width: 100%;\n max-height: calc(100vh - 64px);\n overflow-y: auto;\n box-shadow: var(--vtx-shadow-lg);\n animation: slideDown 0.2s ease-out;\n }\n\n .vtx-menu--responsive.vtx-menu--mobile-open {\n display: flex;\n }\n\n /* Force vertical layout on mobile */\n .vtx-menu--responsive.vtx-menu--horizontal {\n flex-direction: column;\n padding: var(--vtx-spacing-2);\n gap: var(--vtx-spacing-1);\n border-radius: var(--vtx-radius-lg);\n }\n\n .vtx-menu--responsive.vtx-menu--horizontal .vtx-menu-divider {\n width: auto;\n height: 1px;\n margin: var(--vtx-spacing-2) 0;\n }\n}\n\n/* Slide Down Animation */\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Dark Mode - Professional Style */\n[data-theme='dark'] .vtx-menu {\n background: var(--vtx-background-primary);\n box-shadow: var(--vtx-shadow-lg);\n}\n\n[data-theme='dark'] .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark']\n .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active)\n .vtx-menu-item-icon {\n color: var(--vtx-color-primary-300);\n}\n\n[data-theme='dark'] .vtx-menu-item--active {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--active .vtx-menu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--active:hover {\n background-color: var(--vtx-color-primary-800);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--active:hover .vtx-menu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--danger {\n color: var(--vtx-color-danger-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--danger:hover:not(.vtx-menu-item--disabled) {\n background: rgba(var(--vtx-color-danger-rgb), 0.15);\n}\n\n[data-theme='dark']\n .vtx-submenu\n .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-submenu .vtx-menu-item--active {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-submenu .vtx-menu-item--active:hover {\n background-color: var(--vtx-color-primary-800);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-submenu .vtx-menu-item--active .vtx-menu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n .vtx-menu-item,\n .vtx-menu-toggle {\n transition: none;\n }\n\n .vtx-submenu {\n animation: none;\n }\n\n @keyframes slideDown {\n from,\n to {\n opacity: 1;\n max-height: 1000px;\n transform: translateY(0);\n }\n }\n}\n");const U=({isOpen:r})=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",style:{transition:"transform 0.2s ease",transform:r?"rotate(180deg)":"rotate(0deg)"},children:n("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),Z=o.forwardRef(({label:e,onClick:o,icon:a,rightIcon:l,disabled:c=!1,active:s=!1,variant:d="default",shortcut:x,divider:p=!1,items:m},u)=>{const[h,g]=v(!1),f=i(null),b=m&&m.length>0,w=l||(b?n(U,{isOpen:h}):null);return r(t,{children:[n("div",{ref:u||f,className:["vtx-menu-item",s&&"vtx-menu-item--active",c&&"vtx-menu-item--disabled","default"!==d&&`vtx-menu-item--${d}`,b&&"vtx-menu-item--has-submenu",h&&"vtx-menu-item--submenu-open"].filter(Boolean).join(" "),onClick:()=>{c||(b?g(!h):o&&o())},onKeyDown:n=>{c||("Enter"===n.key||" "===n.key?(n.preventDefault(),b?g(!h):null==o||o()):"ArrowDown"===n.key&&b&&!h?(n.preventDefault(),g(!0)):"ArrowUp"===n.key&&b&&h&&(n.preventDefault(),g(!1)))},role:"menuitem",tabIndex:c?-1:0,"aria-disabled":c,"aria-haspopup":b?"menu":void 0,"aria-expanded":b?h:void 0,children:r(G,{align:"center",gap:8,style:{flex:1},children:[a&&n("span",{className:"vtx-menu-item-icon",children:a}),n(K,{variant:"body2",noMargin:!0,style:{flex:1},children:e}),x&&n(K,{variant:"caption",color:"neutral.500",noMargin:!0,className:"vtx-menu-item-shortcut",children:x}),w&&n("span",{className:"vtx-menu-item-right-icon",children:w})]})}),b&&h&&n("div",{className:"vtx-submenu",role:"menu",children:m.map((r,t)=>n(Z,{...r},t))}),p&&n("div",{className:"vtx-menu-divider",role:"separator"})]})});Z.displayName="MenuItem";const J=o.forwardRef(({items:t,children:e,orientation:o="vertical",responsive:a=!0,className:l="",width:s},d)=>{const[x,p]=v(!1),m=i(null);c(()=>{if(!a||!x)return;const n=n=>{m.current&&!m.current.contains(n.target)&&p(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[a,x]),c(()=>{if(!a||!x)return;const n=n=>{"Escape"===n.key&&p(!1)};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[a,x]);const u=t?t.map((r,t)=>n(Z,{...r},t)):e,h=["vtx-menu",`vtx-menu--${o}`,a&&"vtx-menu--responsive",x&&"vtx-menu--mobile-open",l].filter(Boolean).join(" "),g={width:"vertical"===o&&s?"number"==typeof s?`${s}px`:s:void 0};return r("div",{ref:m,className:"vtx-menu-container",children:[a&&n("button",{className:"vtx-menu-toggle",onClick:()=>p(!x),"aria-label":"Toggle menu","aria-expanded":x,children:n("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",x?{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"}:{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})}),n("div",{ref:d,className:h,role:"menu",style:g,children:u})]})});J.displayName="Menu";S("/* ===== Modal Component - Professional Design ===== */\r\n\r\n/* Backdrop */\r\n.vtx-modal-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: var(--vtx-modal-backdrop-bg, rgba(15, 23, 42, 0.75));\r\n backdrop-filter: var(--vtx-modal-backdrop-blur, blur(4px));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: var(--vtx-z-modal, 1200);\r\n padding: var(--vtx-modal-backdrop-padding, var(--vtx-spacing-4));\r\n animation: vtx-modal-backdrop-fade-in var(--vtx-transition-slow, 300ms)\r\n cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-modal-backdrop--transparent {\r\n background: transparent;\r\n backdrop-filter: none;\r\n}\r\n\r\n@keyframes vtx-modal-backdrop-fade-in {\r\n from {\r\n opacity: 0;\r\n backdrop-filter: blur(0);\r\n }\r\n to {\r\n opacity: 1;\r\n backdrop-filter: blur(4px);\r\n }\r\n}\r\n\r\n/* Modal Container */\r\n.vtx-modal {\r\n position: relative;\r\n background: var(--vtx-modal-bg, var(--vtx-color-neutral-50));\r\n border-radius: var(--vtx-modal-radius, var(--vtx-radius-xl, 12px));\r\n box-shadow: var(\r\n --vtx-modal-shadow,\r\n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\r\n 0 10px 10px -5px rgba(0, 0, 0, 0.04),\r\n 0 0 0 1px rgba(0, 0, 0, 0.05)\r\n );\r\n display: flex;\r\n flex-direction: column;\r\n max-height: calc(100vh - var(--vtx-modal-max-height-offset, var(--vtx-spacing-8)));\r\n overflow: hidden;\r\n animation: vtx-modal-slide-up var(--vtx-transition-slow, 300ms) cubic-bezier(0.16, 1, 0.3, 1);\r\n transform-origin: center center;\r\n}\r\n\r\n@keyframes vtx-modal-slide-up {\r\n from {\r\n transform: translateY(var(--vtx-modal-slide-distance, 32px)) scale(0.96);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0) scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n/* Size Variants */\r\n.vtx-modal--sm {\r\n width: 100%;\r\n max-width: var(--vtx-modal-width-sm, 400px);\r\n}\r\n\r\n.vtx-modal--md {\r\n width: 100%;\r\n max-width: var(--vtx-modal-width-md, 600px);\r\n}\r\n\r\n.vtx-modal--lg {\r\n width: 100%;\r\n max-width: var(--vtx-modal-width-lg, 900px);\r\n}\r\n\r\n.vtx-modal--fullscreen {\r\n width: 100%;\r\n height: calc(100vh - var(--vtx-modal-max-height-offset, var(--vtx-spacing-8)));\r\n max-width: none;\r\n border-radius: var(--vtx-modal-fullscreen-radius, var(--vtx-radius-lg, 8px));\r\n}\r\n\r\n/* Header - Uses Flex component */\r\n.vtx-modal-header {\r\n padding: var(--vtx-modal-header-padding, var(--vtx-spacing-3));\r\n background: var(--vtx-modal-header-bg, transparent);\r\n border-bottom: var(--vtx-modal-header-border, 1px solid var(--vtx-color-neutral-200));\r\n}\r\n\r\n/* Close button alignment fix */\r\n.vtx-modal-close {\r\n margin-right: calc(var(--vtx-spacing-1) * -2);\r\n}\r\n\r\n/* Body */\r\n.vtx-modal-body {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: var(--vtx-modal-body-padding, var(--vtx-spacing-3));\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-modal-body-size, var(--vtx-font-size-base, 1rem));\r\n color: var(--vtx-modal-body-color, var(--vtx-color-neutral-700));\r\n line-height: var(--vtx-modal-body-line-height, var(--vtx-line-height-relaxed, 1.625));\r\n\r\n /* Custom scrollbar */\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--vtx-color-neutral-300) transparent;\r\n}\r\n\r\n.vtx-modal-body::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.vtx-modal-body::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.vtx-modal-body::-webkit-scrollbar-thumb {\r\n background: var(--vtx-color-neutral-300);\r\n border-radius: 4px;\r\n}\r\n\r\n.vtx-modal-body::-webkit-scrollbar-thumb:hover {\r\n background: var(--vtx-color-neutral-400);\r\n}\r\n\r\n/* Footer - Uses Flex component */\r\n.vtx-modal-footer {\r\n padding: var(--vtx-modal-footer-padding, var(--vtx-spacing-3));\r\n background: var(--vtx-modal-footer-bg, var(--vtx-color-neutral-50));\r\n border-top: var(--vtx-modal-footer-border, 1px solid var(--vtx-color-neutral-200));\r\n}\r\n\r\n/* Scrollable Variant */\r\n.vtx-modal--scrollable .vtx-modal-body {\r\n max-height: var(--vtx-modal-scrollable-max-height, 60vh);\r\n}\r\n\r\n/* Animation Variants */\r\n.vtx-modal--zoom {\r\n animation: vtx-modal-zoom var(--vtx-transition-slow, 300ms) cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n@keyframes vtx-modal-zoom {\r\n from {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.vtx-modal--slide-down {\r\n animation: vtx-modal-slide-down var(--vtx-transition-slow, 300ms) cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n@keyframes vtx-modal-slide-down {\r\n from {\r\n transform: translateY(-32px) scale(0.96);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0) scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.vtx-modal--fade {\r\n animation: vtx-modal-fade var(--vtx-transition-slow, 300ms) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n@keyframes vtx-modal-fade {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.vtx-modal--none {\r\n animation: none;\r\n}\r\n\r\n/* Dark Mode */\r\n@media (prefers-color-scheme: dark) {\r\n .vtx-modal {\r\n background: var(--vtx-modal-bg-dark, var(--vtx-color-neutral-800));\r\n box-shadow: var(\r\n --vtx-modal-shadow-dark,\r\n 0 20px 25px -5px rgba(0, 0, 0, 0.4),\r\n 0 10px 10px -5px rgba(0, 0, 0, 0.3),\r\n 0 0 0 1px rgba(255, 255, 255, 0.1)\r\n );\r\n }\r\n\r\n .vtx-modal-backdrop {\r\n background: var(--vtx-modal-backdrop-bg-dark, rgba(0, 0, 0, 0.85));\r\n }\r\n\r\n .vtx-modal-header {\r\n border-bottom-color: var(--vtx-modal-header-border-dark, var(--vtx-color-neutral-700));\r\n }\r\n\r\n .vtx-modal-body {\r\n color: var(--vtx-modal-body-color-dark, var(--vtx-color-neutral-300));\r\n }\r\n\r\n .vtx-modal-footer {\r\n background: var(--vtx-modal-footer-bg-dark, var(--vtx-color-neutral-800));\r\n border-top-color: var(--vtx-modal-footer-border-dark, var(--vtx-color-neutral-700));\r\n }\r\n\r\n .vtx-modal-close {\r\n color: var(--vtx-modal-close-color-dark, var(--vtx-color-neutral-400));\r\n }\r\n\r\n .vtx-modal-close:hover {\r\n background: var(--vtx-modal-close-hover-bg-dark, var(--vtx-color-neutral-700));\r\n color: var(--vtx-modal-close-hover-color-dark, var(--vtx-color-neutral-200));\r\n }\r\n\r\n .vtx-modal-body::-webkit-scrollbar-thumb {\r\n background: var(--vtx-color-neutral-600);\r\n }\r\n\r\n .vtx-modal-body::-webkit-scrollbar-thumb:hover {\r\n background: var(--vtx-color-neutral-500);\r\n }\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 640px) {\r\n .vtx-modal-backdrop {\r\n padding: 0;\r\n }\r\n\r\n .vtx-modal {\r\n width: 100%;\r\n max-width: 100%;\r\n min-height: 100vh;\r\n max-height: 100vh;\r\n border-radius: 0;\r\n animation: vtx-modal-slide-up-mobile var(--vtx-transition-slow, 300ms)\r\n cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n @keyframes vtx-modal-slide-up-mobile {\r\n from {\r\n transform: translateY(100%);\r\n }\r\n to {\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .vtx-modal--sm,\r\n .vtx-modal--md,\r\n .vtx-modal--lg {\r\n max-width: 100%;\r\n border-radius: 0;\r\n }\r\n\r\n .vtx-modal-header {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .vtx-modal-body {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .vtx-modal-footer {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n /* Stack footer buttons vertically on mobile */\r\n .vtx-modal-footer.vtx-flex {\r\n flex-direction: column;\r\n }\r\n\r\n .vtx-modal-footer > * {\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* High Contrast Mode */\r\n@media (prefers-contrast: high) {\r\n .vtx-modal {\r\n border: 2px solid currentColor;\r\n }\r\n\r\n .vtx-modal-close:focus-visible {\r\n outline-width: 3px;\r\n }\r\n}\r\n\r\n/* Reduced Motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-modal,\r\n .vtx-modal-backdrop {\r\n animation-duration: 1ms;\r\n }\r\n\r\n .vtx-modal-close:hover {\r\n transform: none;\r\n }\r\n}\r\n");const Q=o.forwardRef(({isOpen:t,onClose:e,title:o,description:a,children:l,header:v,footer:s,footerButtons:d,size:x,closeOnBackdropClick:p=!0,closeOnEscape:m=!0,showCloseButton:u=!0,transparentBackdrop:h=!1,className:f="",backdropClassName:b="",preventScroll:w=!0,animation:y="fade",onAfterOpen:k,onAfterClose:z,scrollable:N=!1,centered:S=!0},L)=>{const T=i(null),$=i(null),{theme:A}=C();let I="md";if(x?I=x:(null==A?void 0:A.defaultSize)&&(I=A.defaultSize),M(T,t),B(w&&t),j(()=>{m&&t&&e()}),c(()=>{t?($.current=document.activeElement,null==k||k()):$.current&&($.current.focus(),null==z||z())},[t,k,z]),!t)return null;const E=["vtx-modal-backdrop",h&&"vtx-modal-backdrop--transparent",S&&"vtx-modal-backdrop--centered",`vtx-modal-backdrop--${y}`,b].filter(Boolean).join(" "),D=["vtx-modal",`vtx-modal--${I}`,N&&"vtx-modal--scrollable",`vtx-modal--${y}`,f].filter(Boolean).join(" "),O=n("div",{className:E,onClick:n=>{p&&n.target===n.currentTarget&&e()},role:"presentation",children:r("div",{ref:n=>{T.current=n,"function"==typeof L?L(n):L&&(L.current=n)},className:D,role:"dialog","aria-modal":"true","aria-labelledby":o?"vtx-modal-title":void 0,"aria-describedby":a?"vtx-modal-description":void 0,children:[v?n("div",{className:"vtx-modal-header",children:v}):o||u?r(G,{className:"vtx-modal-header",justify:"between",align:"center",gap:8,children:[o&&r(G,{direction:"column",gap:4,className:"vtx-modal-header-content",children:[n(K,{as:"h2",variant:"h6",weight:"semibold",id:"vtx-modal-title",noMargin:!0,children:o}),a&&n(K,{variant:"body2",color:"neutral.600",id:"vtx-modal-description",noMargin:!0,children:a})]}),u&&n(_,{variant:"ghost",iconOnly:!0,size:"sm",className:"vtx-modal-close",onClick:e,"aria-label":"Close modal",children:n("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",children:n("path",{d:"M18 6L6 18M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}):null,n(G,{direction:"column",className:"vtx-modal-body",children:l}),(s||d)&&n(G,{className:"vtx-modal-footer",justify:"end",align:"center",gap:8,children:d?d.map((r,t)=>n(_,{variant:r.variant||"secondary",size:r.size||(null==A?void 0:A.defaultSize)||"md",loading:r.loading,disabled:r.disabled,onClick:r.onClick,children:r.label},t)):s})]})});return g(O,document.body)});Q.displayName="Modal";S("/* ===== Toast Component Styles ===== */\n.vtx-toast {\n --vtx-toast-animation-duration: 300ms;\n\n display: flex;\n flex-direction: column;\n min-width: 300px;\n max-width: 500px;\n padding: 0;\n margin: 0;\n background: var(--vtx-color-neutral-50);\n border: 1px solid var(--vtx-color-neutral-200);\n border-radius: var(--vtx-radius-lg);\n box-shadow: var(--vtx-shadow-lg);\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-900);\n pointer-events: auto;\n overflow: hidden;\n position: relative;\n animation: vtx-toast-enter var(--vtx-toast-animation-duration) cubic-bezier(0.4, 0, 0.2, 1)\n forwards;\n}\n\n.vtx-toast--exiting {\n animation: vtx-toast-exit var(--vtx-toast-animation-duration) cubic-bezier(0.4, 0, 0.2, 1)\n forwards;\n}\n\n/* ===== Toast Variants ===== */\n.vtx-toast--success {\n border-left: 4px solid var(--vtx-color-success-500);\n}\n\n.vtx-toast--error {\n border-left: 4px solid var(--vtx-color-error-500);\n}\n\n.vtx-toast--warning {\n border-left: 4px solid var(--vtx-color-warning-500);\n}\n\n.vtx-toast--info {\n border-left: 4px solid var(--vtx-color-info-500);\n}\n\n.vtx-toast--default {\n border-left: 4px solid var(--vtx-color-primary-500);\n}\n\n.vtx-toast--primary {\n background: var(--vtx-color-neutral-50);\n color: var(--vtx-color-primary-600);\n border: 1px solid var(--vtx-color-primary-200);\n border-left: 4px solid var(--vtx-color-primary-500);\n}\n\n/* ===== Toast Wrapper ===== */\n.vtx-toast__wrapper {\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-3);\n padding: var(--vtx-spacing-4);\n min-height: 64px;\n}\n\n/* ===== Toast Icon ===== */\n.vtx-toast__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.vtx-toast--success .vtx-toast__icon {\n color: var(--vtx-color-success-600);\n}\n\n.vtx-toast--error .vtx-toast__icon {\n color: var(--vtx-color-error-600);\n}\n\n.vtx-toast--warning .vtx-toast__icon {\n color: var(--vtx-color-warning-600);\n}\n\n.vtx-toast--info .vtx-toast__icon {\n color: var(--vtx-color-info-600);\n}\n\n.vtx-toast--default .vtx-toast__icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast--primary .vtx-toast__icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* ===== Toast Content ===== */\n.vtx-toast__content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--vtx-spacing-1);\n min-width: 0; /* Allow content to shrink */\n}\n\n.vtx-toast__title {\n font-weight: var(--vtx-font-weight-semibold);\n font-size: var(--vtx-font-size-sm);\n line-height: 1.4;\n color: var(--vtx-color-neutral-900);\n margin: 0;\n}\n\n.vtx-toast--primary .vtx-toast__title {\n color: var(--vtx-color-primary-700);\n}\n\n.vtx-toast__description {\n font-size: var(--vtx-font-size-sm);\n line-height: 1.5;\n color: var(--vtx-color-neutral-700);\n margin: 0;\n}\n\n.vtx-toast--primary .vtx-toast__description {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast__body {\n font-size: var(--vtx-font-size-sm);\n line-height: 1.5;\n color: var(--vtx-color-neutral-800);\n margin: 0;\n}\n\n.vtx-toast--primary .vtx-toast__body {\n color: var(--vtx-color-primary-700);\n}\n\n/* ===== Toast Actions ===== */\n.vtx-toast__actions {\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-2);\n flex-shrink: 0;\n}\n\n.vtx-toast__action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--vtx-spacing-1) var(--vtx-spacing-3);\n background: transparent;\n border: 1px solid var(--vtx-color-primary-500);\n border-radius: var(--vtx-radius-base);\n color: var(--vtx-color-primary-600);\n font-size: var(--vtx-font-size-xs);\n font-weight: var(--vtx-font-weight-medium);\n line-height: 1;\n cursor: pointer;\n transition: all var(--vtx-transition-fast);\n text-decoration: none;\n white-space: nowrap;\n}\n\n.vtx-toast__action:hover {\n background: var(--vtx-color-primary-50);\n border-color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast__action:focus {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n.vtx-toast--primary .vtx-toast__action {\n border-color: var(--vtx-color-primary-500);\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast--primary .vtx-toast__action:hover {\n background: var(--vtx-color-primary-50);\n border-color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast--primary .vtx-toast__action:focus {\n outline-color: var(--vtx-color-primary-500);\n}\n\n.vtx-toast__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--vtx-radius-base);\n color: var(--vtx-color-neutral-500);\n cursor: pointer;\n transition: all var(--vtx-transition-fast);\n flex-shrink: 0;\n}\n\n.vtx-toast__close:hover {\n background: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-700);\n}\n\n.vtx-toast__close:focus {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n.vtx-toast--primary .vtx-toast__close {\n color: var(--vtx-color-primary-500);\n}\n\n.vtx-toast--primary .vtx-toast__close:hover {\n background: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-700);\n}\n\n.vtx-toast--primary .vtx-toast__close:focus {\n outline-color: var(--vtx-color-primary-500);\n}\n\n/* ===== Progress Bar ===== */\n.vtx-toast__progress-container {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: var(--vtx-color-neutral-200);\n overflow: hidden;\n}\n\n.vtx-toast__progress {\n height: 100%;\n background: currentColor;\n transform-origin: left;\n transition: transform 16ms linear;\n}\n\n.vtx-toast--success .vtx-toast__progress {\n background: var(--vtx-color-success-500);\n}\n\n.vtx-toast--error .vtx-toast__progress {\n background: var(--vtx-color-error-500);\n}\n\n.vtx-toast--warning .vtx-toast__progress {\n background: var(--vtx-color-warning-500);\n}\n\n.vtx-toast--info .vtx-toast__progress {\n background: var(--vtx-color-info-500);\n}\n\n.vtx-toast--default .vtx-toast__progress {\n background: var(--vtx-color-primary-500);\n}\n\n.vtx-toast--primary .vtx-toast__progress {\n background: var(--vtx-color-primary-500);\n}\n\n/* ===== Toast Animations ===== */\n@keyframes vtx-toast-enter {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes vtx-toast-exit {\n from {\n opacity: 1;\n transform: translateX(0);\n max-height: 200px;\n margin-bottom: var(--vtx-toast-gap, 12px);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n max-height: 0;\n margin-bottom: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n}\n\n/* Position-specific animations */\n.vtx-toast-container--top-left .vtx-toast,\n.vtx-toast-container--bottom-left .vtx-toast {\n animation-name: vtx-toast-enter-left;\n}\n\n.vtx-toast-container--top-left .vtx-toast--exiting,\n.vtx-toast-container--bottom-left .vtx-toast--exiting {\n animation-name: vtx-toast-exit-left;\n}\n\n@keyframes vtx-toast-enter-left {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes vtx-toast-exit-left {\n from {\n opacity: 1;\n transform: translateX(0);\n max-height: 200px;\n margin-bottom: var(--vtx-toast-gap, 12px);\n }\n to {\n opacity: 0;\n transform: translateX(-100%);\n max-height: 0;\n margin-bottom: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n}\n\n.vtx-toast-container--top-center .vtx-toast,\n.vtx-toast-container--bottom-center .vtx-toast {\n animation-name: vtx-toast-enter-center;\n}\n\n.vtx-toast-container--top-center .vtx-toast--exiting,\n.vtx-toast-container--bottom-center .vtx-toast--exiting {\n animation-name: vtx-toast-exit-center;\n}\n\n@keyframes vtx-toast-enter-center {\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes vtx-toast-exit-center {\n from {\n opacity: 1;\n transform: translateY(0);\n max-height: 200px;\n margin-bottom: var(--vtx-toast-gap, 12px);\n }\n to {\n opacity: 0;\n transform: translateY(-100%);\n max-height: 0;\n margin-bottom: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n}\n\n/* ===== Dark Theme Support ===== */\n[data-vtx-toast-theme='dark'] .vtx-toast {\n background: var(--vtx-color-neutral-800);\n border-color: var(--vtx-color-neutral-700);\n color: var(--vtx-color-neutral-100);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__title {\n color: var(--vtx-color-neutral-100);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__description {\n color: var(--vtx-color-neutral-300);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__body {\n color: var(--vtx-color-neutral-200);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__close {\n color: var(--vtx-color-neutral-400);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__close:hover {\n background: var(--vtx-color-neutral-700);\n color: var(--vtx-color-neutral-200);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__progress-container {\n background: var(--vtx-color-neutral-600);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__action {\n border-color: var(--vtx-color-primary-400);\n color: var(--vtx-color-primary-400);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__action:hover {\n background: var(--vtx-color-primary-900);\n border-color: var(--vtx-color-primary-300);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary {\n background: var(--vtx-color-primary-500);\n color: white;\n border: 1px solid var(--vtx-color-primary-500);\n border-left: 4px solid var(--vtx-color-primary-600);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__icon {\n color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__title {\n color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__description {\n color: rgba(255, 255, 255, 0.9);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__body {\n color: rgba(255, 255, 255, 0.95);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__close {\n color: rgba(255, 255, 255, 0.8);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__close:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__close:focus {\n outline-color: rgba(255, 255, 255, 0.8);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__progress {\n background: rgba(255, 255, 255, 0.8);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__action {\n border-color: rgba(255, 255, 255, 0.6);\n color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__action:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__action:focus {\n outline-color: rgba(255, 255, 255, 0.8);\n}\n\n/* ===== Responsive Design ===== */\n@media (max-width: 640px) {\n .vtx-toast {\n min-width: 280px;\n max-width: calc(100vw - 32px);\n margin: 0;\n }\n\n .vtx-toast__wrapper {\n padding: var(--vtx-spacing-3);\n }\n\n .vtx-toast__actions {\n gap: var(--vtx-spacing-1);\n }\n\n .vtx-toast__action {\n font-size: var(--vtx-font-size-xs);\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n }\n}\n\n/* ===== High Contrast Mode ===== */\n@media (prefers-contrast: high) {\n .vtx-toast {\n border-width: 2px;\n }\n\n .vtx-toast__close:focus,\n .vtx-toast__action:focus {\n outline-width: 3px;\n }\n}\n\n/* ===== Reduced Motion ===== */\n@media (prefers-reduced-motion: reduce) {\n .vtx-toast {\n animation-duration: 1ms;\n }\n\n .vtx-toast__progress {\n transition: none;\n }\n}\n");const nn={success:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm-2 15l-5-5 1.414-1.414L8 12.172l7.586-7.586L17 6l-9 9z",fill:"currentColor"})}),error:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm5 13.59L13.59 15 10 11.41 6.41 15 5 13.59 8.59 10 5 6.41 6.41 5 10 8.59 13.59 5 15 6.41 11.41 10 15 13.59z",fill:"currentColor"})}),warning:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z",fill:"currentColor"})}),info:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),default:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),primary:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-6h2v6zm0-8H9V5h2v2z",fill:"currentColor"})})},rn=n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M12.854 4.854a.5.5 0 0 0-.708-.708L8 8.293 3.854 4.146a.5.5 0 1 0-.708.708L7.293 9l-4.147 4.146a.5.5 0 0 0 .708.708L8 9.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 9l4.147-4.146z",fill:"currentColor"})}),tn=o.forwardRef(({children:t,onDismiss:e,id:a,variant:l="default",autoClose:s=5e3,closeButton:d=!0,progressBar:x=!0,pauseOnHover:p=!0,pauseOnFocusLoss:m=!0,icon:u,action:h,className:g="",style:f,title:b,description:w,animationDuration:y=300,isVisible:k,createdAt:z,onClose:N,onOpen:C,toastId:S,..._},L)=>{const[T,$]=v(!1),[M,j]=v(!1),[B,A]=v(100),I=i(null),E=i(Date.now()),D=i(0),O=o.useCallback(()=>{$(!0),setTimeout(()=>{e()},y)},[e,y]);c(()=>{if(!1===s||M)return;return I.current=setInterval(()=>{const n=Date.now()-E.current-D.current,r=Math.max(0,s-n);A(r/s*100),r<=0&&O()},16),()=>{I.current&&clearInterval(I.current)}},[s,M,O]);const R=["vtx-toast",`vtx-toast--${l}`,T&&"vtx-toast--exiting",g].filter(Boolean).join(" ");return r("div",{ref:L,className:R,style:{...f,"--vtx-toast-animation-duration":`${y}ms`},onMouseEnter:()=>{p&&!M&&(j(!0),D.current=Date.now())},onMouseLeave:()=>{if(p&&M){j(!1);const n=Date.now()-D.current;E.current+=n}},onFocus:()=>{if(m&&M){j(!1);const n=Date.now()-D.current;E.current+=n}},onBlur:()=>{m&&!M&&(j(!0),D.current=Date.now())},role:"alert","aria-live":"polite","data-toast-id":a,..._,children:[r("div",{className:"vtx-toast__wrapper",children:[!1===u?null:n("div",u?{className:"vtx-toast__icon",children:u}:{className:"vtx-toast__icon",children:nn[l]}),b||w?r("div",{className:"vtx-toast__content",children:[b&&n("div",{className:"vtx-toast__title",children:b}),w&&n("div",{className:"vtx-toast__description",children:w}),t&&n("div",{className:"vtx-toast__body",children:t})]}):n("div",{className:"vtx-toast__content",children:t}),r("div",{className:"vtx-toast__actions",children:[h&&n("button",{className:"vtx-toast__action",onClick:h.onClick,type:"button",children:h.label}),d&&n("button",{className:"vtx-toast__close",onClick:O,type:"button","aria-label":"Close notification",children:rn})]})]}),x&&!1!==s&&n("div",{className:"vtx-toast__progress-container",children:n("div",{className:"vtx-toast__progress",style:{transform:`scaleX(${B/100})`,animationPlayState:M?"paused":"running"}})})]})});tn.displayName="Toast";const en=p(null),on=()=>{const n=m(en);if(!n)throw new Error("useToast must be used within a ToastProvider");return n},an=({children:r})=>{const[t,e]=v([]),o=x(n=>{e(r=>{var t;const e=r.find(r=>r.id===n);return e&&(null===(t=e.onClose)||void 0===t||t.call(e)),r.filter(r=>r.id!==n)})},[]),a=x((n,r={})=>{var t;const a=r.toastId||Date.now()+Math.random(),i={id:a,content:n,createdAt:Date.now(),isVisible:!0,autoClose:5e3,closeButton:!0,progressBar:!0,pauseOnHover:!0,pauseOnFocusLoss:!0,variant:"default",animationDuration:300,...r};return e(n=>{const r=n.filter(n=>n.id!==a);return[i,...r]}),!1!==i.autoClose&&setTimeout(()=>{o(a)},i.autoClose),null===(t=r.onOpen)||void 0===t||t.call(r),a},[o]),i=x(()=>{e([])},[]),l=x((n,r)=>{e(t=>t.map(t=>t.id===n?{...t,...r}:t))},[]),c={toasts:t,addToast:a,removeToast:o,clearAllToasts:i,updateToast:l};return n(en.Provider,{value:c,children:r})};class ln{constructor(){this.addToastFn=null,this.removeToastFn=null,this.clearAllToastsFn=null,this.updateToastFn=null}static getInstance(){return ln.instance||(ln.instance=new ln),ln.instance}setMethods(n,r,t,e){this.addToastFn=n,this.removeToastFn=r,this.clearAllToastsFn=t,this.updateToastFn=e}show(n,r){return this.addToastFn?this.addToastFn(n,r):(console.warn("Toast system not initialized. Make sure ToastContainer is mounted."),"")}success(n,r){return this.show(n,{...r,variant:"success"})}error(n,r){return this.show(n,{...r,variant:"error"})}warning(n,r){return this.show(n,{...r,variant:"warning"})}info(n,r){return this.show(n,{...r,variant:"info"})}primary(n,r){return this.show(n,{...r,variant:"primary"})}dismiss(n){this.removeToastFn?this.removeToastFn(n):console.warn("Toast system not initialized.")}dismissAll(){this.clearAllToastsFn?this.clearAllToastsFn():console.warn("Toast system not initialized.")}update(n,r){this.updateToastFn?this.updateToastFn(n,r):console.warn("Toast system not initialized.")}}const cn=ln.getInstance();S("/* ===== Toast Container Styles ===== */\n.vtx-toast-container {\n --vtx-toast-gap: 12px;\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n max-width: 100vw;\n pointer-events: none;\n}\n\n.vtx-toast-container__hidden-count {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n margin-bottom: var(--vtx-toast-gap);\n background: var(--vtx-color-neutral-100);\n border: 1px solid var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-full);\n color: var(--vtx-color-neutral-700);\n font-size: var(--vtx-font-size-xs);\n font-weight: var(--vtx-font-weight-medium);\n pointer-events: auto;\n backdrop-filter: blur(8px);\n animation: vtx-toast-fade-in 200ms ease-out;\n}\n\n.vtx-toast-container__list {\n display: flex;\n flex-direction: column;\n gap: var(--vtx-toast-gap);\n align-items: stretch;\n}\n\n/* ===== Position Variants ===== */\n.vtx-toast-container--top-left,\n.vtx-toast-container--top-center,\n.vtx-toast-container--top-right {\n flex-direction: column;\n}\n\n.vtx-toast-container--bottom-left,\n.vtx-toast-container--bottom-center,\n.vtx-toast-container--bottom-right {\n flex-direction: column-reverse;\n}\n\n.vtx-toast-container--bottom-left .vtx-toast-container__hidden-count,\n.vtx-toast-container--bottom-center .vtx-toast-container__hidden-count,\n.vtx-toast-container--bottom-right .vtx-toast-container__hidden-count {\n order: -1;\n margin-bottom: 0;\n margin-top: var(--vtx-toast-gap);\n}\n\n/* ===== Stacked Layout ===== */\n.vtx-toast-container--stacked .vtx-toast-container__list {\n position: relative;\n}\n\n.vtx-toast-container--stacked .vtx-toast:not(:first-child) {\n transform: translateY(-2px) scale(0.98);\n opacity: 0.9;\n z-index: -1;\n}\n\n.vtx-toast-container--stacked .vtx-toast:nth-child(3) {\n transform: translateY(-4px) scale(0.96);\n opacity: 0.8;\n}\n\n.vtx-toast-container--stacked .vtx-toast:nth-child(n + 4) {\n transform: translateY(-6px) scale(0.94);\n opacity: 0.7;\n}\n\n/* ===== Dark Theme Support ===== */\n[data-vtx-toast-theme='dark'] .vtx-toast-container__hidden-count {\n background: var(--vtx-color-neutral-800);\n border-color: var(--vtx-color-neutral-600);\n color: var(--vtx-color-neutral-300);\n}\n\n/* ===== Responsive Design ===== */\n@media (max-width: 640px) {\n .vtx-toast-container {\n left: var(--vtx-spacing-4) !important;\n right: var(--vtx-spacing-4) !important;\n transform: none !important;\n }\n\n .vtx-toast-container--stacked .vtx-toast:not(:first-child) {\n transform: translateY(-1px) scale(0.99);\n }\n\n .vtx-toast-container--stacked .vtx-toast:nth-child(3) {\n transform: translateY(-2px) scale(0.98);\n }\n\n .vtx-toast-container--stacked .vtx-toast:nth-child(n + 4) {\n transform: translateY(-3px) scale(0.97);\n }\n}\n\n/* ===== Animations ===== */\n@keyframes vtx-toast-fade-in {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* ===== Accessibility ===== */\n@media (prefers-reduced-motion: reduce) {\n .vtx-toast-container--stacked .vtx-toast:not(:first-child) {\n transform: none;\n opacity: 1;\n }\n\n .vtx-toast-container__hidden-count {\n animation: none;\n }\n}\n\n/* ===== Print Styles ===== */\n@media print {\n .vtx-toast-container {\n display: none;\n }\n}\n");const vn=({position:t="top-right",limit:e=5,gap:o=12,margin:a=16,className:l="",style:v,stacked:s=!0,theme:d="auto"})=>{const{toasts:x,removeToast:p,addToast:m,clearAllToasts:u,updateToast:h}=on(),f=i(null);c(()=>{cn.setMethods(m,p,u,h)},[m,p,u,h]),c(()=>{if("auto"===d){const n=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{document.documentElement.setAttribute("data-vtx-toast-theme",n.matches?"dark":"light")};return r(),n.addEventListener("change",r),()=>n.removeEventListener("change",r)}document.documentElement.setAttribute("data-vtx-toast-theme",d)},[d]);const b=x.slice(0,e),w=Math.max(0,x.length-e),y=["vtx-toast-container",`vtx-toast-container--${t}`,s&&"vtx-toast-container--stacked",l].filter(Boolean).join(" ");return 0===b.length?null:g(r("div",{ref:f,className:y,style:{...(n=>{const r={position:"fixed",zIndex:"var(--vtx-z-notification, 1400)",pointerEvents:"none"};switch(n){case"top-left":return{...r,top:a,left:a};case"top-center":return{...r,top:a,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...r,top:a,right:a};case"bottom-left":return{...r,bottom:a,left:a};case"bottom-center":return{...r,bottom:a,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:a,right:a}}})(t),"--vtx-toast-gap":`${o}px`,...v},"aria-live":"polite","aria-label":"Notifications",children:[w>0&&r("div",{className:"vtx-toast-container__hidden-count",children:["+",w," more"]}),n("div",{className:"vtx-toast-container__list",children:b.map((r,t)=>n(tn,{id:r.id,isVisible:r.isVisible,onDismiss:()=>p(r.id),variant:r.variant,autoClose:r.autoClose,closeButton:r.closeButton,progressBar:r.progressBar,pauseOnHover:r.pauseOnHover,pauseOnFocusLoss:r.pauseOnFocusLoss,icon:r.icon,action:r.action,className:r.className,style:r.style,title:r.title,description:r.description,animationDuration:r.animationDuration,createdAt:r.createdAt,onClose:r.onClose,onOpen:r.onOpen,"data-toast-index":t,children:r.content},r.id))})]}),document.body)},sn=({children:t,...e})=>r(an,{children:[t,n(vn,{...e})]});S(".vtx-tooltip {\n position: fixed;\n z-index: var(--vtx-z-tooltip);\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n background-color: var(--vtx-color-neutral-900);\n color: white;\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n border-radius: var(--vtx-radius-md);\n max-width: 300px;\n word-wrap: break-word;\n pointer-events: auto;\n box-shadow: var(--vtx-shadow-lg);\n opacity: 0;\n transition:\n opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform, opacity;\n}\n\n.vtx-tooltip--visible {\n opacity: 1;\n}\n\n/* Inner wrapper for content and close button */\n.vtx-tooltip-inner {\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-2);\n}\n\n.vtx-tooltip-content {\n flex: 1;\n min-width: 0;\n}\n\n/* Close button */\n.vtx-tooltip-close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n color: currentColor;\n cursor: pointer;\n border-radius: var(--vtx-radius-sm);\n transition: all var(--vtx-transition-base);\n opacity: 0.7;\n margin-top: -2px;\n}\n\n.vtx-tooltip-close:hover {\n opacity: 1;\n background: rgba(255, 255, 255, 0.1);\n}\n\n.vtx-tooltip-close:active {\n transform: scale(0.95);\n}\n\n.vtx-tooltip-close:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n opacity: 1;\n}\n\n/* Placement-specific transforms with entry animations */\n.vtx-tooltip--top {\n transform: translate(-50%, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom center;\n}\n\n.vtx-tooltip--top.vtx-tooltip--visible {\n transform: translate(-50%, -100%) scale(1);\n}\n\n.vtx-tooltip--bottom {\n transform: translate(-50%, 4px) scale(0.9);\n transform-origin: top center;\n}\n\n.vtx-tooltip--bottom.vtx-tooltip--visible {\n transform: translate(-50%, 0) scale(1);\n}\n\n.vtx-tooltip--left {\n transform: translate(calc(-100% - 4px), -50%) scale(0.9);\n transform-origin: right center;\n}\n\n.vtx-tooltip--left.vtx-tooltip--visible {\n transform: translate(-100%, -50%) scale(1);\n}\n\n.vtx-tooltip--right {\n transform: translate(4px, -50%) scale(0.9);\n transform-origin: left center;\n}\n\n.vtx-tooltip--right.vtx-tooltip--visible {\n transform: translate(0, -50%) scale(1);\n}\n\n/* Placement-start and placement-end variants */\n.vtx-tooltip--top-start {\n transform: translate(0, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom left;\n}\n\n.vtx-tooltip--top-start.vtx-tooltip--visible {\n transform: translate(0, -100%) scale(1);\n}\n\n.vtx-tooltip--top-end {\n transform: translate(-100%, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom right;\n}\n\n.vtx-tooltip--top-end.vtx-tooltip--visible {\n transform: translate(-100%, -100%) scale(1);\n}\n\n.vtx-tooltip--bottom-start {\n transform: translate(0, 4px) scale(0.9);\n transform-origin: top left;\n}\n\n.vtx-tooltip--bottom-start.vtx-tooltip--visible {\n transform: translate(0, 0) scale(1);\n}\n\n.vtx-tooltip--bottom-end {\n transform: translate(-100%, 4px) scale(0.9);\n transform-origin: top right;\n}\n\n.vtx-tooltip--bottom-end.vtx-tooltip--visible {\n transform: translate(-100%, 0) scale(1);\n}\n\n.vtx-tooltip--left-start {\n transform: translate(calc(-100% - 4px), 0) scale(0.9);\n transform-origin: right top;\n}\n\n.vtx-tooltip--left-start.vtx-tooltip--visible {\n transform: translate(-100%, 0) scale(1);\n}\n\n.vtx-tooltip--left-end {\n transform: translate(calc(-100% - 4px), -100%) scale(0.9);\n transform-origin: right bottom;\n}\n\n.vtx-tooltip--left-end.vtx-tooltip--visible {\n transform: translate(-100%, -100%) scale(1);\n}\n\n.vtx-tooltip--right-start {\n transform: translate(4px, 0) scale(0.9);\n transform-origin: left top;\n}\n\n.vtx-tooltip--right-start.vtx-tooltip--visible {\n transform: translate(0, 0) scale(1);\n}\n\n.vtx-tooltip--right-end {\n transform: translate(4px, -100%) scale(0.9);\n transform-origin: left bottom;\n}\n\n.vtx-tooltip--right-end.vtx-tooltip--visible {\n transform: translate(0, -100%) scale(1);\n}\n\n/* Variants */\n.vtx-tooltip--dark {\n background-color: var(--vtx-color-neutral-900);\n color: white;\n}\n\n.vtx-tooltip--light {\n background-color: white;\n color: var(--vtx-color-neutral-900);\n border: 1px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-tooltip--light .vtx-tooltip-close:hover {\n background: var(--vtx-color-neutral-100);\n}\n\n.vtx-tooltip--error {\n background-color: var(--vtx-color-error-600);\n color: white;\n}\n\n.vtx-tooltip--warning {\n background-color: var(--vtx-color-warning-500);\n color: var(--vtx-color-neutral-900);\n}\n\n.vtx-tooltip--success {\n background-color: var(--vtx-color-success-600);\n color: white;\n}\n\n.vtx-tooltip--info {\n background-color: var(--vtx-color-info-600);\n color: white;\n}\n\n/* Arrow */\n.vtx-tooltip--with-arrow .vtx-tooltip-arrow {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: inherit;\n transform: rotate(45deg);\n border: inherit;\n}\n\n.vtx-tooltip--top .vtx-tooltip-arrow {\n bottom: -4px;\n left: 50%;\n margin-left: -4px;\n}\n\n.vtx-tooltip--bottom .vtx-tooltip-arrow {\n top: -4px;\n left: 50%;\n margin-left: -4px;\n}\n\n.vtx-tooltip--left .vtx-tooltip-arrow {\n right: -4px;\n top: 50%;\n margin-top: -4px;\n}\n\n.vtx-tooltip--right .vtx-tooltip-arrow {\n left: -4px;\n top: 50%;\n margin-top: -4px;\n}\n");const dn=o.forwardRef(({content:e,placement:o="top",delay:a=200,hideDelay:l=0,children:s,open:d,disabled:x=!1,arrow:p=!1,maxWidth:m="300px",variant:h="dark",dismissible:f=!1,onShow:b,onHide:w,onDismiss:y,className:k="",...z},N)=>{const[C,S]=v(d||!1),[_,L]=v(!1),[T,$]=v({top:0,left:0}),M=i(null),j=i(null),B=i(null),A=i(null),I=i(!1),E=()=>{x||(I.current=!0,B.current&&clearTimeout(B.current),A.current&&clearTimeout(A.current),j.current=setTimeout(()=>{if(M.current&&I.current){const n=M.current.getBoundingClientRect(),r=O(n,o);$(r),L(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{S(!0),null==b||b()})})}},a))},D=()=>{I.current=!1,j.current&&clearTimeout(j.current),B.current=setTimeout(()=>{I.current||(S(!1),null==w||w(),A.current=setTimeout(()=>{L(!1)},150))},l)},O=(n,r)=>{const t=p?12:8;let e=0,o=0;return r.startsWith("top")?(e=n.top-t+window.scrollY,o=n.left+n.width/2+window.scrollX,"top-start"===r&&(o=n.left+window.scrollX),"top-end"===r&&(o=n.right+window.scrollX)):r.startsWith("bottom")?(e=n.bottom+t+window.scrollY,o=n.left+n.width/2+window.scrollX,"bottom-start"===r&&(o=n.left+window.scrollX),"bottom-end"===r&&(o=n.right+window.scrollX)):r.startsWith("left")?(e=n.top+n.height/2+window.scrollY,o=n.left-t+window.scrollX,"left-start"===r&&(e=n.top+window.scrollY),"left-end"===r&&(e=n.bottom+window.scrollY)):r.startsWith("right")&&(e=n.top+n.height/2+window.scrollY,o=n.right+t+window.scrollX,"right-start"===r&&(e=n.top+window.scrollY),"right-end"===r&&(e=n.bottom+window.scrollY)),{top:e,left:o}};c(()=>{void 0!==d&&(d?(L(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{S(!0)})})):(S(!1),A.current=setTimeout(()=>{L(!1)},150)))},[d]),c(()=>()=>{j.current&&clearTimeout(j.current),B.current&&clearTimeout(B.current),A.current&&clearTimeout(A.current)},[]);const R=["vtx-tooltip",`vtx-tooltip--${o}`,`vtx-tooltip--${h}`,p&&"vtx-tooltip--with-arrow",C&&"vtx-tooltip--visible",k].filter(Boolean).join(" "),W=void 0!==d&&d||_,H=u(s,{ref:n=>{M.current=n;const r=s.ref;"function"==typeof r?r(n):r&&"object"==typeof r&&"current"in r&&(r.current=n)},onMouseEnter:n=>{var r,t;void 0===d&&E(),null===(t=(r=s.props).onMouseEnter)||void 0===t||t.call(r,n)},onMouseLeave:n=>{var r,t;void 0===d&&D(),null===(t=(r=s.props).onMouseLeave)||void 0===t||t.call(r,n)},onFocus:n=>{var r,t;void 0===d&&E(),null===(t=(r=s.props).onFocus)||void 0===t||t.call(r,n)},onBlur:n=>{var r,t;void 0===d&&D(),null===(t=(r=s.props).onBlur)||void 0===t||t.call(r,n)},"aria-describedby":C?"vtx-tooltip-content":void 0});return r(t,{children:[H,W&&g(r("div",{ref:N,id:"vtx-tooltip-content",role:"tooltip",className:R,style:{top:`${T.top}px`,left:`${T.left}px`,maxWidth:m},onMouseEnter:()=>{x||void 0!==d||(I.current=!0,B.current&&clearTimeout(B.current))},onMouseLeave:()=>{x||void 0!==d||D()},...z,children:[p&&n("span",{className:"vtx-tooltip-arrow","aria-hidden":"true"}),r("div",{className:"vtx-tooltip-inner",children:[n("span",{className:"vtx-tooltip-content",children:e}),f&&n("button",{type:"button",className:"vtx-tooltip-close",onClick:()=>{I.current=!1,S(!1),null==y||y(),null==w||w(),A.current=setTimeout(()=>{L(!1)},150)},"aria-label":"Dismiss tooltip",children:n("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","aria-hidden":"true",children:n("path",{d:"M11 3L3 11M3 3L11 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]}),document.body)]})});dn.displayName="Tooltip";S(".vtx-avatar {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n background-color: var(--vtx-color-neutral-200);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-avatar-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.vtx-avatar-fallback {\r\n font-family: var(--vtx-font-family-sans);\r\n font-weight: var(--vtx-font-weight-medium);\r\n color: var(--vtx-color-neutral-700);\r\n user-select: none;\r\n}\r\n\r\n/* Sizes */\r\n\r\n.vtx-avatar--sm {\r\n width: 32px;\r\n height: 32px;\r\n}\r\n.vtx-avatar--sm .vtx-avatar-fallback {\r\n font-size: var(--vtx-font-size-xs);\r\n}\r\n\r\n.vtx-avatar--md {\r\n width: 40px;\r\n height: 40px;\r\n}\r\n.vtx-avatar--md .vtx-avatar-fallback {\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-avatar--lg {\r\n width: 56px;\r\n height: 56px;\r\n}\r\n.vtx-avatar--lg .vtx-avatar-fallback {\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n/* Shapes */\r\n.vtx-avatar--circle {\r\n border-radius: var(--vtx-radius-full);\r\n}\r\n\r\n.vtx-avatar--square {\r\n border-radius: var(--vtx-radius-md);\r\n}\r\n");const xn=o.forwardRef(({src:t,alt:e="",size:o,shape:a="circle",fallback:i="?",onImageError:l,onImageLoad:c,imgProps:s,statusIndicator:d,statusPosition:x="bottom-right",className:p="",...m},u)=>{const{theme:h}=C(),g=o||h.defaultSize||"md",[f,b]=v(!1),w=["vtx-avatar",`vtx-avatar--${g}`,`vtx-avatar--${a}`,d&&"vtx-avatar--with-status",p].filter(Boolean).join(" "),y=t&&!f,k=i.slice(0,2).toUpperCase();return r("div",{ref:u,className:w,role:"img","aria-label":e||i||"Avatar",...m,children:[y?n("img",{src:t,alt:e,className:"vtx-avatar-image",onError:n=>{b(!0),null==l||l(n)},onLoad:n=>{null==c||c(n)},loading:"lazy",...s}):n("span",{className:"vtx-avatar-fallback","aria-hidden":"true",children:k}),d&&n("span",{className:`vtx-avatar-status vtx-avatar-status--${x}`,"aria-label":"Status indicator",children:d})]})});xn.displayName="Avatar";S(".vtx-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--vtx-spacing-1);\n font-family: var(--vtx-font-family-sans);\n font-weight: var(--vtx-font-weight-medium);\n line-height: 1;\n white-space: nowrap;\n border-radius: var(--vtx-radius-base);\n transition: all var(--vtx-transition-base);\n}\n\n/* Sizes */\n.vtx-badge--small {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-xs);\n}\n\n.vtx-badge--medium {\n padding: calc(var(--vtx-spacing-1) + 1px) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-badge--large {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n font-size: var(--vtx-font-size-base);\n}\n\n/* Variants */\n.vtx-badge--neutral {\n background-color: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-800);\n}\n\n.vtx-badge--primary {\n background-color: var(--vtx-color-primary-100);\n color: var(--vtx-color-primary-800);\n}\n\n.vtx-badge--success {\n background-color: var(--vtx-color-success-50);\n color: var(--vtx-color-success-700);\n}\n\n.vtx-badge--warning {\n background-color: var(--vtx-color-warning-50);\n color: var(--vtx-color-warning-700);\n}\n\n.vtx-badge--error {\n background-color: var(--vtx-color-error-50);\n color: var(--vtx-color-error-700);\n}\n\n.vtx-badge--info {\n background-color: var(--vtx-color-info-50);\n color: var(--vtx-color-info-700);\n}\n\n/* Pill shape */\n.vtx-badge--pill {\n border-radius: var(--vtx-radius-full);\n}\n\n/* Dot indicator */\n.vtx-badge-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--vtx-radius-full);\n flex-shrink: 0;\n}\n\n.vtx-badge--neutral .vtx-badge-dot {\n background-color: var(--vtx-color-neutral-600);\n}\n\n.vtx-badge--primary .vtx-badge-dot {\n background-color: var(--vtx-color-primary-600);\n}\n\n.vtx-badge--success .vtx-badge-dot {\n background-color: var(--vtx-color-success-600);\n}\n\n.vtx-badge--warning .vtx-badge-dot {\n background-color: var(--vtx-color-warning-600);\n}\n\n.vtx-badge--error .vtx-badge-dot {\n background-color: var(--vtx-color-error-600);\n}\n\n.vtx-badge--info .vtx-badge-dot {\n background-color: var(--vtx-color-info-600);\n}\n");const pn=o.forwardRef(({variant:t="neutral",size:e="medium",pill:o=!1,dot:a=!1,outline:i=!1,maxLength:l,icon:c,children:v,className:s="",onRemove:d,...x},p)=>{const m=["vtx-badge",`vtx-badge--${t}`,`vtx-badge--${e}`,o&&"vtx-badge--pill",a&&"vtx-badge--with-dot",i&&"vtx-badge--outline",d&&"vtx-badge--removable",s].filter(Boolean).join(" "),u=h(()=>l&&"string"==typeof v&&v.length>l?`${v.slice(0,l)}...`:v,[v,l]);return r("span",{ref:p,className:m,...x,children:[a&&n("span",{className:"vtx-badge-dot","aria-hidden":"true"}),c&&n("span",{className:"vtx-badge-icon","aria-hidden":"true",children:c}),n("span",{className:"vtx-badge-content",children:u}),d&&n("button",{type:"button",className:"vtx-badge-remove",onClick:d,"aria-label":"Remove badge",children:n("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:n("path",{d:"M9 3L3 9M3 3L9 9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})});pn.displayName="Badge";S(".vtx-card {\r\n background-color: var(--vtx-color-white);\r\n border-radius: var(--vtx-radius-lg, 12px);\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n overflow: hidden;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n font-family: var(--vtx-font-family-sans);\r\n isolation: isolate; /* Create stacking context for better layering */\r\n box-sizing: border-box;\r\n width: 100%;\r\n}\r\n\r\n/* Sizes with refined spacing */\r\n.vtx-card--sm {\r\n --vtx-card-padding: var(--vtx-spacing-3, 12px);\r\n border-radius: var(--vtx-radius-md, 8px);\r\n}\r\n\r\n.vtx-card--md {\r\n --vtx-card-padding: var(--vtx-spacing-4, 16px);\r\n border-radius: var(--vtx-radius-lg, 12px);\r\n}\r\n\r\n.vtx-card--lg {\r\n --vtx-card-padding: var(--vtx-spacing-6, 24px);\r\n border-radius: var(--vtx-radius-xl, 16px);\r\n}\r\n\r\n/* Variants with enhanced visual design */\r\n.vtx-card--elevated {\r\n box-shadow: \r\n 0 1px 3px 0 rgba(0, 0, 0, 0.1),\r\n 0 1px 2px -1px rgba(0, 0, 0, 0.1);\r\n border: 1px solid rgba(0, 0, 0, 0.05);\r\n background-color: var(--vtx-color-white);\r\n}\r\n\r\n.vtx-card--outlined {\r\n box-shadow: none;\r\n border: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n background-color: var(--vtx-color-white);\r\n}\r\n\r\n.vtx-card--filled {\r\n box-shadow: none;\r\n border: 1px solid var(--vtx-color-neutral-100, #f5f5f5);\r\n background-color: var(--vtx-color-neutral-50, #fafafa);\r\n}\r\n\r\n/* Card Content with improved typography */\r\n.vtx-card-content {\r\n padding: var(--vtx-card-padding, 16px);\r\n flex: 1;\r\n line-height: 1.6;\r\n color: var(--vtx-color-neutral-900, #1a1a1a);\r\n}\r\n\r\n.vtx-card-content > *:first-child {\r\n margin-top: 0;\r\n}\r\n\r\n.vtx-card-content > *:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n/* No Padding Modifier */\r\n.vtx-card--no-padding .vtx-card-content {\r\n padding: 0;\r\n}\r\n\r\n/* Header and Footer with refined styling */\r\n.vtx-card-header,\r\n.vtx-card-footer {\r\n padding: var(--vtx-card-padding, 16px);\r\n}\r\n\r\n.vtx-card-header {\r\n color: var(--vtx-color-neutral-900, #1a1a1a);\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-card-footer {\r\n color: var(--vtx-color-neutral-700, #404040);\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n gap: var(--vtx-spacing-2, 8px);\r\n}\r\n\r\n.vtx-card-header--divider {\r\n border-bottom: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n background-color: var(--vtx-color-neutral-25, #fcfcfc);\r\n}\r\n\r\n.vtx-card-footer--divider {\r\n border-top: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n background-color: var(--vtx-color-neutral-25, #fcfcfc);\r\n}\r\n\r\n/* Maintain consistent padding when noPadding is set */\r\n.vtx-card--no-padding .vtx-card-header,\r\n.vtx-card--no-padding .vtx-card-footer {\r\n padding: var(--vtx-card-padding, 16px);\r\n}\r\n\r\n/* Enhanced Interactive States */\r\n.vtx-card--hoverable {\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-card--hoverable:hover {\r\n transform: translateY(-1px);\r\n}\r\n\r\n.vtx-card--elevated.vtx-card--hoverable:hover {\r\n box-shadow: \r\n 0 10px 15px -3px rgba(0, 0, 0, 0.1),\r\n 0 4px 6px -4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-card--outlined.vtx-card--hoverable:hover {\r\n border-color: var(--vtx-color-neutral-300, #d4d4d4);\r\n box-shadow: \r\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\r\n 0 2px 4px -2px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-card--filled.vtx-card--hoverable:hover {\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n box-shadow: \r\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\r\n 0 2px 4px -2px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-card--clickable {\r\n cursor: pointer;\r\n user-select: none;\r\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-card--clickable:active {\r\n transform: translateY(0) scale(0.98);\r\n}\r\n\r\n/* Enhanced Focus State for better accessibility */\r\n.vtx-card:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500, #3b82f6);\r\n outline-offset: 2px;\r\n box-shadow: \r\n 0 0 0 4px rgba(59, 130, 246, 0.1),\r\n 0 1px 3px 0 rgba(0, 0, 0, 0.1),\r\n 0 1px 2px -1px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* Loading state */\r\n.vtx-card--loading {\r\n position: relative;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-card--loading::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(2px);\r\n z-index: 1;\r\n}\r\n\r\n/* Media queries for responsive design */\r\n@media (max-width: 768px) {\r\n .vtx-card--sm {\r\n --vtx-card-padding: var(--vtx-spacing-2, 8px);\r\n }\r\n \r\n .vtx-card--md {\r\n --vtx-card-padding: var(--vtx-spacing-3, 12px);\r\n }\r\n \r\n .vtx-card--lg {\r\n --vtx-card-padding: var(--vtx-spacing-4, 16px);\r\n }\r\n \r\n .vtx-card-footer {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: var(--vtx-spacing-3, 12px);\r\n }\r\n}\r\n\r\n/* Reduced motion support */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-card,\r\n .vtx-card--hoverable,\r\n .vtx-card--clickable {\r\n transition: none;\r\n }\r\n \r\n .vtx-card--hoverable:hover,\r\n .vtx-card--clickable:active {\r\n transform: none;\r\n }\r\n}\r\n\r\n/* High contrast mode support */\r\n@media (prefers-contrast: high) {\r\n .vtx-card--outlined {\r\n border-width: 2px;\r\n border-color: var(--vtx-color-neutral-900, #000);\r\n }\r\n \r\n .vtx-card-header--divider,\r\n .vtx-card-footer--divider {\r\n border-width: 2px;\r\n border-color: var(--vtx-color-neutral-900, #000);\r\n }\r\n}\r\n");const mn=o.forwardRef(({children:t,variant:e="elevated",size:o,noPadding:a=!1,padding:i,hoverable:l=!1,clickable:c=!1,className:v="",header:s,footer:d,divider:x=!1,style:p,onClick:m,tabIndex:u,...h},g)=>{const{theme:f}=C(),b=["vtx-card",`vtx-card--${e}`,`vtx-card--${o||(null==f?void 0:f.defaultSize)||"md"}`,l?"vtx-card--hoverable":"",c?"vtx-card--clickable":"",a&&!i?"vtx-card--no-padding":"",v].filter(Boolean).join(" "),w={...p||{},...i?{"--vtx-card-padding":i}:{}};return r("div",{ref:g,className:b,style:w,onClick:m,tabIndex:c?"number"==typeof u?u:0:u,...h,children:[s&&n("div",{className:"vtx-card-header"+(x?" vtx-card-header--divider":""),children:s}),n("div",{className:"vtx-card-content",children:t}),d&&n("div",{className:"vtx-card-footer"+(x?" vtx-card-footer--divider":""),children:d})]})});mn.displayName="Card";S("/* Base divider styles */\n.vtx-divider {\n margin: 0;\n flex-shrink: 0;\n border-width: 0;\n border-style: solid;\n border-color: var(--vtx-divider-color, var(--vtx-color-neutral-200));\n border-bottom-width: thin;\n}\n\n/* Light variant */\n.vtx-divider--light {\n border-color: var(--vtx-divider-color-light, var(--vtx-color-neutral-100));\n}\n\n/* Horizontal orientation (default) */\n.vtx-divider--horizontal {\n width: 100%;\n border-bottom-width: 1px;\n}\n\n/* Vertical orientation */\n.vtx-divider--vertical {\n height: auto;\n align-self: stretch;\n border-bottom-width: 0;\n border-right-width: 1px;\n}\n\n/* Flex item variant */\n.vtx-divider--flex-item {\n height: auto;\n align-self: stretch;\n}\n\n.vtx-divider--flex-item.vtx-divider--horizontal {\n height: 1px;\n width: 100%;\n align-self: auto;\n}\n\n/* Variants */\n.vtx-divider--fullWidth {\n width: 100%;\n}\n\n.vtx-divider--inset {\n margin-left: var(--vtx-spacing-9);\n}\n\n.vtx-divider--middle {\n margin-left: var(--vtx-spacing-3);\n margin-right: var(--vtx-spacing-3);\n}\n\n.vtx-divider--vertical.vtx-divider--inset {\n margin-left: 0;\n margin-top: var(--vtx-spacing-2);\n}\n\n.vtx-divider--vertical.vtx-divider--middle {\n margin-left: 0;\n margin-right: 0;\n margin-top: var(--vtx-spacing-2);\n margin-bottom: var(--vtx-spacing-2);\n}\n\n/* With children */\n.vtx-divider--with-children {\n display: flex;\n white-space: nowrap;\n text-align: center;\n border: 0;\n border-color: var(--vtx-divider-color, var(--vtx-color-neutral-200));\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-divider-text-size, var(--vtx-font-size-sm));\n color: var(--vtx-divider-text-color, var(--vtx-color-neutral-600));\n font-weight: var(--vtx-divider-text-weight, var(--vtx-font-weight-medium));\n}\n\n.vtx-divider--with-children.vtx-divider--light {\n border-color: var(--vtx-divider-color-light, var(--vtx-color-neutral-100));\n color: var(--vtx-divider-text-color-light, var(--vtx-color-neutral-500));\n}\n\n.vtx-divider--with-children::before,\n.vtx-divider--with-children::after {\n content: '';\n align-self: center;\n border-top: thin solid;\n border-color: inherit;\n}\n\n/* Text alignment - horizontal only */\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-center::before {\n width: 100%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-center::after {\n width: 100%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-left::before {\n width: 5%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-left::after {\n width: 100%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-right::before {\n width: 100%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-right::after {\n width: 5%;\n}\n\n/* Wrapper for children content */\n.vtx-divider-wrapper {\n display: inline-flex;\n align-items: center;\n padding-left: var(--vtx-spacing-3);\n padding-right: var(--vtx-spacing-3);\n}\n\n/* Vertical divider with children (not commonly used but supported) */\n.vtx-divider--with-children.vtx-divider--vertical {\n flex-direction: column;\n}\n\n.vtx-divider--with-children.vtx-divider--vertical::before,\n.vtx-divider--with-children.vtx-divider--vertical::after {\n border-top: 0;\n border-left: thin solid;\n height: 100%;\n width: auto;\n}\n\n.vtx-divider--with-children.vtx-divider--vertical .vtx-divider-wrapper {\n padding-left: 0;\n padding-right: 0;\n padding-top: var(--vtx-spacing-2);\n padding-bottom: var(--vtx-spacing-2);\n}\n");const un=o.forwardRef(({textAlign:r="center",orientation:t="horizontal",variant:e="fullWidth",light:o=!1,flexItem:a=!1,children:i,component:l,className:c="",role:v,...s},d)=>{const x=l||(i||"vertical"===t?"div":"hr"),p=v||("hr"!==x?"separator":void 0),m=["vtx-divider",`vtx-divider--${t}`,`vtx-divider--${e}`,o&&"vtx-divider--light",a&&"vtx-divider--flex-item",i&&"vtx-divider--with-children",i&&`vtx-divider--text-${r}`,c].filter(Boolean).join(" ");return n(x,{ref:d,className:m,role:p,..."vertical"===t&&"hr"!==x?{"aria-orientation":"vertical"}:{},...s,children:i&&n("span",{className:"vtx-divider-wrapper",children:i})})});un.displayName="Divider";S("/* Header Component Styles */\n\n.vtx-header {\n display: flex;\n align-items: center;\n padding: 0 var(--vtx-spacing-6);\n background: var(--vtx-background-primary);\n border-bottom: 1px solid var(--vtx-border-color);\n height: 64px;\n gap: var(--vtx-spacing-4);\n z-index: var(--vtx-z-sticky);\n}\n\n.vtx-header--sticky {\n position: sticky;\n top: 0;\n}\n\n/* Toggle Button */\n.vtx-header-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n border: none;\n border-radius: var(--vtx-radius-md);\n background: transparent;\n color: var(--vtx-color-neutral-700);\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-header-toggle:hover {\n background: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-900);\n}\n\n.vtx-header-toggle:active {\n background: var(--vtx-color-neutral-200);\n transform: scale(0.95);\n}\n\n/* Logo */\n.vtx-header-logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n/* Title */\n.vtx-header-title {\n color: var(--vtx-color-neutral-900);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Actions */\n.vtx-header-actions {\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-3);\n margin-left: auto;\n margin-right: var(--vtx-spacing-4);\n}\n\n/* Right Section */\n.vtx-header-right {\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-2);\n margin-left: auto;\n padding-left: var(--vtx-spacing-4);\n border-left: 1px solid var(--vtx-border-color);\n height: 40px;\n}\n\n/* Icon Button */\n.vtx-header-icon-button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n border: none;\n border-radius: var(--vtx-radius-lg);\n background: transparent;\n color: var(--vtx-color-neutral-600);\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-header-icon-button:hover {\n background: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-900);\n transform: scale(1.05);\n}\n\n.vtx-header-icon-button:active {\n transform: scale(0.95);\n}\n\n.vtx-header-icon-button--active {\n background: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n}\n\n/* Notifications */\n.vtx-header-notifications {\n position: relative;\n}\n\n.vtx-header-notifications-panel {\n position: absolute;\n top: calc(100% + 12px);\n right: 0;\n width: 380px;\n max-height: 500px;\n background: var(--vtx-background-primary);\n border: 1px solid var(--vtx-color-neutral-200);\n border-radius: var(--vtx-radius-lg);\n box-shadow:\n 0 4px 20px rgba(0, 0, 0, 0.08),\n 0 0 1px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n animation: slideDown 0.2s ease-out;\n z-index: var(--vtx-z-dropdown);\n}\n\n.vtx-header-notifications-header {\n padding: var(--vtx-spacing-4);\n border-bottom: 1px solid var(--vtx-border-color);\n}\n\n.vtx-header-notifications-mark-read {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n border: none;\n border-radius: var(--vtx-radius-sm);\n background: transparent;\n color: var(--vtx-color-primary-600);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-header-notifications-mark-read:hover {\n background: var(--vtx-color-primary-50);\n}\n\n.vtx-header-notifications-list {\n max-height: 400px;\n overflow-y: auto;\n}\n\n.vtx-header-notifications-list::-webkit-scrollbar {\n width: 6px;\n}\n\n.vtx-header-notifications-list::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.vtx-header-notifications-list::-webkit-scrollbar-thumb {\n background: var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-full);\n}\n\n.vtx-header-notifications-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--vtx-spacing-2);\n padding: var(--vtx-spacing-8) var(--vtx-spacing-4);\n color: var(--vtx-color-neutral-400);\n}\n\n.vtx-header-notification-item {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-3);\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n border-bottom: 1px solid var(--vtx-border-color);\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-header-notification-item:last-child {\n border-bottom: none;\n}\n\n.vtx-header-notification-item:hover {\n background: var(--vtx-color-neutral-50);\n}\n\n.vtx-header-notification-item--unread {\n background: var(--vtx-color-primary-50);\n}\n\n.vtx-header-notification-item--unread:hover {\n background: var(--vtx-color-primary-100);\n}\n\n.vtx-header-notification-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: var(--vtx-radius-full);\n background: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-700);\n flex-shrink: 0;\n}\n\n.vtx-header-notification-item--info .vtx-header-notification-icon {\n background: var(--vtx-color-info-50);\n color: var(--vtx-color-info-600);\n}\n\n.vtx-header-notification-item--success .vtx-header-notification-icon {\n background: var(--vtx-color-success-50);\n color: var(--vtx-color-success-600);\n}\n\n.vtx-header-notification-item--warning .vtx-header-notification-icon {\n background: var(--vtx-color-warning-50);\n color: var(--vtx-color-warning-600);\n}\n\n.vtx-header-notification-item--error .vtx-header-notification-icon {\n background: var(--vtx-color-error-50);\n color: var(--vtx-color-error-600);\n}\n\n.vtx-header-notification-content {\n flex: 1;\n min-width: 0;\n}\n\n.vtx-header-notification-dot {\n width: 8px;\n height: 8px;\n border-radius: var(--vtx-radius-full);\n background: var(--vtx-color-primary-600);\n flex-shrink: 0;\n margin-top: 6px;\n}\n\n/* User Menu */\n.vtx-header-user-menu {\n position: relative;\n}\n\n.vtx-header-user-button {\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-2);\n padding: var(--vtx-spacing-1) var(--vtx-spacing-3);\n border: none;\n border-radius: var(--vtx-radius-lg);\n background: transparent;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n height: 40px;\n}\n\n.vtx-header-user-button:hover {\n background: var(--vtx-color-neutral-100);\n}\n\n.vtx-header-user-button:active {\n transform: scale(0.98);\n}\n\n.vtx-header-user-button--active {\n background: var(--vtx-color-primary-50);\n}\n\n.vtx-header-user-info {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: left;\n min-width: 0;\n}\n\n.vtx-header-user-info > * {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 150px;\n}\n\n.vtx-header-user-dropdown {\n position: absolute;\n top: calc(100% + 12px);\n right: 0;\n min-width: 220px;\n background: var(--vtx-background-primary);\n border: 1px solid var(--vtx-color-neutral-200);\n border-radius: var(--vtx-radius-lg);\n box-shadow:\n 0 4px 20px rgba(0, 0, 0, 0.08),\n 0 0 1px rgba(0, 0, 0, 0.1);\n animation: slideDown 0.2s ease-out;\n z-index: var(--vtx-z-dropdown);\n overflow: hidden;\n}\n\n/* Slide Down Animation */\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Dark Mode */\n[data-theme='dark'] .vtx-header {\n background: var(--vtx-background-primary);\n border-bottom-color: var(--vtx-border-color);\n}\n\n[data-theme='dark'] .vtx-header-toggle,\n[data-theme='dark'] .vtx-header-icon-button {\n color: var(--vtx-color-neutral-300);\n}\n\n[data-theme='dark'] .vtx-header-toggle:hover,\n[data-theme='dark'] .vtx-header-icon-button:hover {\n background: rgba(255, 255, 255, 0.05);\n color: var(--vtx-color-neutral-100);\n}\n\n[data-theme='dark'] .vtx-header-icon-button--active {\n background: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-header-notification-item {\n border-bottom-color: var(--vtx-border-color);\n}\n\n[data-theme='dark'] .vtx-header-notification-item:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n[data-theme='dark'] .vtx-header-notification-item--unread {\n background: var(--vtx-color-primary-900);\n}\n\n[data-theme='dark'] .vtx-header-notification-item--unread:hover {\n background: var(--vtx-color-primary-800);\n}\n\n[data-theme='dark'] .vtx-header-user-button:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n[data-theme='dark'] .vtx-header-user-button--active {\n background: var(--vtx-color-primary-900);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .vtx-header {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n height: 56px;\n }\n\n .vtx-header-title {\n font-size: var(--vtx-font-size-lg);\n }\n\n .vtx-header-user-info {\n display: none;\n }\n\n .vtx-header-notifications-panel {\n width: 320px;\n max-height: 400px;\n }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n .vtx-header-toggle,\n .vtx-header-icon-button,\n .vtx-header-user-button,\n .vtx-header-notification-item {\n transition: none;\n }\n\n .vtx-header-notifications-panel,\n .vtx-header-user-dropdown {\n animation: none;\n }\n}\n");const hn=()=>n("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",{d:"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),gn=()=>n("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",{d:"M4 6h16M4 12h16M4 18h16",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),fn=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",{d:"M19 9l-7 7-7-7",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),bn=o.forwardRef(({notifications:t,onNotificationClick:e,onMarkAllAsRead:o,onClose:a},i)=>{const l=t.filter(n=>!n.read).length;return r("div",{ref:i,className:"vtx-header-notifications-panel",children:[n("div",{className:"vtx-header-notifications-header",children:r(G,{justify:"between",align:"center",children:[n(K,{variant:"subtitle2",noMargin:!0,children:"Notifications"}),l>0&&o&&n("button",{className:"vtx-header-notifications-mark-read",onClick:()=>{o(),a()},children:"Mark all as read"})]})}),n("div",{className:"vtx-header-notifications-list",children:0===t.length?r("div",{className:"vtx-header-notifications-empty",children:[n(hn,{}),n(K,{variant:"body2",color:"neutral.500",noMargin:!0,children:"No notifications"})]}):t.map(t=>r("div",{className:`vtx-header-notification-item ${t.read?"":"vtx-header-notification-item--unread"} ${t.type?`vtx-header-notification-item--${t.type}`:""}`,onClick:()=>{null==e||e(t),a()},children:[t.icon&&n("div",{className:"vtx-header-notification-icon",children:t.icon}),r("div",{className:"vtx-header-notification-content",children:[n(K,{variant:"body2",noMargin:!0,style:{fontWeight:t.read?400:600},children:t.title}),t.description&&n(K,{variant:"caption",color:"neutral.600",noMargin:!0,children:t.description}),n(K,{variant:"caption",color:"neutral.500",noMargin:!0,style:{marginTop:"4px"},children:t.time})]}),!t.read&&n("div",{className:"vtx-header-notification-dot"})]},t.id))})]})});bn.displayName="NotificationPanel";const wn=o.forwardRef(({logo:t,title:e,onToggleSidebar:o,showToggle:a=!0,notifications:l=[],onNotificationClick:s,onMarkAllAsRead:d,userName:x,userSubtitle:p,userAvatar:m,userMenuItems:u=[],actions:h,className:g="",sticky:f=!0},b)=>{const[w,y]=v(!1),[k,z]=v(!1),N=i(null),C=i(null),S=i(null),_=l.filter(n=>!n.read).length;c(()=>{const n=n=>{N.current&&!N.current.contains(n.target)&&S.current&&!S.current.contains(n.target)&&y(!1),C.current&&!C.current.contains(n.target)&&z(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[]);const L=["vtx-header",f&&"vtx-header--sticky",g].filter(Boolean).join(" ");return r("header",{ref:b,className:L,children:[r(G,{align:"center",gap:16,style:{flex:1},children:[a&&o&&n("button",{className:"vtx-header-toggle",onClick:o,"aria-label":"Toggle sidebar",children:n(gn,{})}),t&&n("div",{className:"vtx-header-logo",children:t}),e&&n(K,{variant:"h6",noMargin:!0,className:"vtx-header-title",children:e})]}),h&&n("div",{className:"vtx-header-actions",children:h}),r("div",{className:"vtx-header-right",children:[l&&l.length>0&&r("div",{className:"vtx-header-notifications",ref:N,children:[r("button",{className:"vtx-header-icon-button "+(w?"vtx-header-icon-button--active":""),onClick:()=>y(!w),"aria-label":"Notifications",children:[n(hn,{}),_>0&&n(pn,{variant:"error",size:"small",style:{position:"absolute",top:"4px",right:"4px",minWidth:"18px",height:"18px",padding:"0 4px"},children:_>9?"9+":_})]}),w&&n(bn,{ref:S,notifications:l,onNotificationClick:s,onMarkAllAsRead:d,onClose:()=>y(!1)})]}),x&&r("div",{className:"vtx-header-user-menu",ref:C,children:[r("button",{className:"vtx-header-user-button "+(k?"vtx-header-user-button--active":""),onClick:()=>z(!k),"aria-label":"User menu",children:[n(xn,{src:m,alt:x,size:"sm"}),!m&&n("span",{className:"vtx-header-avatar-fallback",children:x.split(" ").map(n=>n[0]).join("").slice(0,2)}),r("div",{className:"vtx-header-user-info",children:[n(K,{variant:"body2",noMargin:!0,style:{fontWeight:600},children:x}),p&&n(K,{variant:"caption",color:"neutral.600",noMargin:!0,children:p})]}),n(fn,{})]}),k&&n("div",{className:"vtx-header-user-dropdown",children:n(J,{items:u,responsive:!1})})]})]})]})});wn.displayName="Header";S("/* SideMenu Component Styles */\n\n.vtx-sidemenu {\n display: flex;\n flex-direction: column;\n height: 100vh;\n background: var(--vtx-background-primary);\n border-right: 1px solid var(--vtx-border-color);\n transition: width 0.3s ease-in-out;\n position: relative;\n overflow: hidden;\n}\n\n/* Header Section */\n.vtx-sidemenu-header {\n padding: var(--vtx-spacing-4);\n border-bottom: 1px solid var(--vtx-border-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 64px;\n transition: padding 0.3s ease-in-out;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-header {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-2);\n}\n\n/* Content Section */\n.vtx-sidemenu-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: var(--vtx-spacing-3) var(--vtx-spacing-2);\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-content {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-1);\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar-thumb {\n background: var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-full);\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar-thumb:hover {\n background: var(--vtx-color-neutral-400);\n}\n\n/* Footer Section */\n.vtx-sidemenu-footer {\n padding: var(--vtx-spacing-4);\n border-top: 1px solid var(--vtx-border-color);\n transition: padding 0.3s ease-in-out;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-footer {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-2);\n}\n\n/* Menu Item */\n.vtx-sidemenu-item {\n display: flex;\n align-items: center;\n padding: var(--vtx-spacing-3) var(--vtx-spacing-3);\n margin-bottom: var(--vtx-spacing-1);\n border-radius: var(--vtx-radius-md);\n color: var(--vtx-color-neutral-700);\n background: transparent;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n user-select: none;\n text-decoration: none;\n border-left: 3px solid transparent;\n position: relative;\n}\n\n.vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active) {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--collapsed:hover:not(.vtx-sidemenu-item--disabled):not(\n .vtx-sidemenu-item--active\n ) {\n background-color: var(--vtx-color-primary-50);\n border-left-color: transparent;\n}\n\n.vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active)\n .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n/* Active State */\n.vtx-sidemenu-item--active {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--collapsed.vtx-sidemenu-item--active {\n background-color: var(--vtx-color-primary-50);\n box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);\n border-left-color: transparent;\n}\n\n.vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--active:hover {\n background-color: var(--vtx-color-primary-100);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--active:hover .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Disabled State */\n.vtx-sidemenu-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Collapsed State */\n.vtx-sidemenu-item--collapsed {\n justify-content: center;\n padding: var(--vtx-spacing-3);\n margin: var(--vtx-spacing-2) var(--vtx-spacing-2);\n border-left: none;\n position: relative;\n min-height: 48px;\n border-radius: var(--vtx-radius-lg);\n background: transparent;\n}\n\n.vtx-sidemenu-item--collapsed .vtx-sidemenu-item-icon {\n width: 24px;\n height: 24px;\n color: var(--vtx-color-neutral-700) !important;\n}\n\n.vtx-sidemenu-item--collapsed:hover .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600) !important;\n}\n\n.vtx-sidemenu-item--collapsed.vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600) !important;\n}\n\n.vtx-sidemenu-item--collapsed .vtx-sidemenu-item-icon svg {\n stroke: currentColor !important;\n}\n\n/* Active indicator for collapsed state */\n.vtx-sidemenu-item--collapsed::before {\n content: '';\n position: absolute;\n left: 50%;\n bottom: 4px;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: var(--vtx-color-primary-600);\n border-radius: var(--vtx-radius-full);\n transition: width 0.2s ease-in-out;\n}\n\n.vtx-sidemenu-item--collapsed:hover::before {\n width: 32px;\n}\n\n.vtx-sidemenu-item--collapsed.vtx-sidemenu-item--active::before {\n width: 32px;\n}\n\n/* Hover effect for collapsed items */\n.vtx-sidemenu-item--collapsed:hover:not(.vtx-sidemenu-item--disabled) {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.vtx-sidemenu-item--collapsed:active:not(.vtx-sidemenu-item--disabled) {\n transform: translateY(0);\n}\n\n/* Menu Item Icon */\n.vtx-sidemenu-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n flex-shrink: 0;\n color: var(--vtx-color-neutral-700);\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-sidemenu-item-icon svg {\n width: 100%;\n height: 100%;\n stroke: currentColor;\n fill: none;\n}\n\n/* Badge */\n.vtx-sidemenu-item-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 var(--vtx-spacing-1);\n background: var(--vtx-color-primary-500);\n color: white;\n font-size: var(--vtx-font-size-xs);\n font-weight: var(--vtx-font-weight-semibold);\n border-radius: var(--vtx-radius-full);\n line-height: 1;\n}\n\n/* Badge in collapsed state - show as dot indicator */\n.vtx-sidemenu-item--collapsed .vtx-sidemenu-item-badge {\n position: absolute;\n top: 8px;\n right: 8px;\n min-width: 10px;\n height: 10px;\n padding: 0;\n font-size: 0;\n border: 2px solid var(--vtx-background-primary);\n box-shadow: 0 0 0 1px var(--vtx-color-primary-500);\n}\n\n/* Chevron Icon */\n.vtx-sidemenu-chevron {\n transition: transform 0.2s ease-in-out;\n flex-shrink: 0;\n}\n\n.vtx-sidemenu-chevron--open {\n transform: rotate(180deg);\n}\n\n/* Submenu */\n.vtx-sidemenu-submenu {\n display: flex;\n flex-direction: column;\n margin-left: var(--vtx-spacing-4);\n margin-top: var(--vtx-spacing-1);\n margin-bottom: var(--vtx-spacing-2);\n padding-left: var(--vtx-spacing-4);\n border-left: 2px solid var(--vtx-color-neutral-200);\n animation: slideDown 0.2s ease-in-out;\n}\n\n.vtx-sidemenu-submenu .vtx-sidemenu-item {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n font-size: var(--vtx-font-size-sm);\n margin-bottom: var(--vtx-spacing-1);\n}\n\n/* Collapse Toggle Button */\n.vtx-sidemenu-toggle {\n position: absolute;\n top: 50%;\n right: -12px;\n transform: translateY(-50%);\n width: 24px;\n height: 24px;\n border-radius: var(--vtx-radius-full);\n border: 1px solid var(--vtx-border-color);\n background: var(--vtx-background-primary);\n color: var(--vtx-color-neutral-600);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n z-index: 10;\n}\n\n.vtx-sidemenu-toggle:hover {\n background: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n border-color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-toggle:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n/* Tooltip for collapsed items */\n.vtx-sidemenu-item--collapsed:hover::after {\n content: attr(data-label);\n position: absolute;\n left: calc(100% + 16px);\n top: 50%;\n transform: translateY(-50%);\n background: var(--vtx-color-neutral-900);\n color: white;\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n border-radius: var(--vtx-radius-md);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n white-space: nowrap;\n pointer-events: none;\n z-index: var(--vtx-z-tooltip);\n box-shadow:\n 0 4px 12px rgba(0, 0, 0, 0.15),\n 0 0 1px rgba(0, 0, 0, 0.2);\n animation: fadeIn 0.15s ease-in-out;\n}\n\n/* Tooltip arrow */\n.vtx-sidemenu-item--collapsed:hover::after {\n /* Add arrow using clip-path or border trick */\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-50%) translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\n }\n}\n\n/* Slide Down Animation */\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n max-height: 1000px;\n transform: translateY(0);\n }\n}\n\n/* Dark Mode */\n[data-theme='dark'] .vtx-sidemenu {\n background: var(--vtx-background-primary);\n border-right-color: var(--vtx-border-color);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item {\n color: var(--vtx-color-neutral-300);\n}\n\n[data-theme='dark']\n .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active) {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark']\n .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active)\n .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--active {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--active:hover {\n background-color: var(--vtx-color-primary-800);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--active:hover .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--collapsed .vtx-sidemenu-item-icon {\n color: var(--vtx-color-neutral-300) !important;\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--collapsed:hover .vtx-sidemenu-item-icon,\n[data-theme='dark']\n .vtx-sidemenu-item--collapsed.vtx-sidemenu-item--active\n .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-400) !important;\n}\n\n[data-theme='dark'] .vtx-sidemenu-toggle {\n background: var(--vtx-background-secondary);\n border-color: var(--vtx-border-color);\n}\n\n[data-theme='dark'] .vtx-sidemenu-toggle:hover {\n background: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n border-color: var(--vtx-color-primary-400);\n}\n\n/* Responsive - Mobile */\n@media (max-width: 768px) {\n .vtx-sidemenu {\n position: fixed;\n left: 0;\n top: 0;\n z-index: var(--vtx-z-modal);\n transform: translateX(-100%);\n transition: transform 0.3s ease-in-out;\n }\n\n .vtx-sidemenu--mobile-open {\n transform: translateX(0);\n box-shadow: var(--vtx-shadow-xl);\n }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n .vtx-sidemenu,\n .vtx-sidemenu-item,\n .vtx-sidemenu-toggle,\n .vtx-sidemenu-chevron {\n transition: none;\n }\n\n .vtx-sidemenu-submenu {\n animation: none;\n }\n}\n");const yn=({isOpen:r})=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",className:"vtx-sidemenu-chevron "+(r?"vtx-sidemenu-chevron--open":""),children:n("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),kn=o.forwardRef(({label:e,onClick:o,icon:a,disabled:i=!1,active:l=!1,items:c,badge:s,href:d,collapsed:x=!1,level:p=0},m)=>{const[u,h]=v(!1),g=c&&c.length>0,f=n(t,{children:r(G,{align:"center",gap:x?0:12,style:{flex:1,minWidth:0},children:[a&&n("span",{className:"vtx-sidemenu-item-icon",children:a}),!x&&r(t,{children:[n(K,{variant:"body2",noMargin:!0,style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:e}),s&&n("span",{className:"vtx-sidemenu-item-badge",children:s}),g&&n(yn,{isOpen:u})]}),x&&s&&n("span",{className:"vtx-sidemenu-item-badge",children:s})]})}),b=["vtx-sidemenu-item",l&&"vtx-sidemenu-item--active",i&&"vtx-sidemenu-item--disabled",g&&"vtx-sidemenu-item--has-submenu",x&&"vtx-sidemenu-item--collapsed"].filter(Boolean).join(" ");return r(t,{children:[n(d?"a":"div",{ref:m,className:b,onClick:n=>{i||(g?(n.preventDefault(),h(!u)):o&&(n.preventDefault(),o()))},onKeyDown:n=>{i||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),g?h(!u):null==o||o())},role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i,"aria-expanded":g?u:void 0,href:d,title:x?e:void 0,"data-label":x?e:void 0,children:f}),g&&u&&!x&&n("div",{className:"vtx-sidemenu-submenu",children:c.map((r,t)=>n(kn,{...r,collapsed:x,level:p+1},t))})]})});kn.displayName="SideMenuItem";const zn=o.forwardRef(({items:t,collapsed:e=!1,onCollapseToggle:o,className:a="",width:i="260px",collapsedWidth:l="80px",header:c,footer:v},s)=>{const d=e?"number"==typeof l?`${l}px`:l:"number"==typeof i?`${i}px`:i,x=["vtx-sidemenu",e&&"vtx-sidemenu--collapsed",a].filter(Boolean).join(" ");return r("aside",{ref:s,className:x,style:{width:d},role:"navigation",children:[c&&n("div",{className:"vtx-sidemenu-header",children:c}),n("div",{className:"vtx-sidemenu-content",children:t.map((r,t)=>n(kn,{...r,collapsed:e},t))}),v&&n("div",{className:"vtx-sidemenu-footer",children:v}),o&&n("button",{className:"vtx-sidemenu-toggle",onClick:()=>o(!e),"aria-label":e?"Expand sidebar":"Collapse sidebar",title:e?"Expand sidebar":"Collapse sidebar",children:n("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:e?"M9 5l7 7-7 7":"M15 19l-7-7 7-7"})})})]})});zn.displayName="SideMenu";function Nn({columns:t,data:e,getRowKey:o,striped:a=!1,hoverable:i=!0,bordered:l=!1,size:c="medium",caption:s,emptyMessage:d="No data available",loading:x=!1,loadingContent:p,scrollable:m=!0,maxHeight:u,onRowClick:g,isRowSelected:f,onRowSelect:b,sortable:w=!1,sortConfig:y,onSortChange:k,className:z="",containerClassName:N="",...C}){const[S,_]=v(y||null),L=y||S,T=n=>{if(!w)return;const r=(null==L?void 0:L.key)===n&&"asc"===L.direction?"desc":"asc",t={key:n,direction:r};k?k(n,r):_(t)},$=h(()=>{if(!L||!w)return e;const n=t.find(n=>n.key===L.key),r=null==n?void 0:n.sortFn;return[...e].sort((n,t)=>{if(r)return"asc"===L.direction?r(n,t):r(t,n);const e=n[L.key],o=t[L.key];if("string"==typeof e&&"string"==typeof o)return"asc"===L.direction?e.localeCompare(o):o.localeCompare(e);if("number"==typeof e&&"number"==typeof o)return"asc"===L.direction?e-o:o-e;const a=String(e),i=String(o);return"asc"===L.direction?a.localeCompare(i):i.localeCompare(a)})},[e,L,t,w]),M=["vtx-table-container",m&&"vtx-table-container--scrollable",u&&"vtx-table-container--fixed-header",N].filter(Boolean).join(" "),j=["vtx-table",`vtx-table--${c}`,a&&"vtx-table--striped",i&&"vtx-table--hoverable",l&&"vtx-table--bordered",g&&"vtx-table--clickable",z].filter(Boolean).join(" "),B=(n,r,t)=>{b&&b(n,r),null==g||g(n,r,t)},A=t=>{if(!w)return null;const e=(null==L?void 0:L.key)===t,o=null==L?void 0:L.direction;return n("span",{className:"vtx-table-sort-icon","aria-hidden":"true",children:r("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:[n("path",{d:"M6 3L9 6H3L6 3Z",fill:e&&"asc"===o?"currentColor":"#ccc"}),n("path",{d:"M6 9L3 6H9L6 9Z",fill:e&&"desc"===o?"currentColor":"#ccc"})]})})};return n("div",{className:M,style:{maxHeight:u},children:r("table",{className:j,...C,children:[s&&n("caption",{className:"vtx-table-caption",children:s}),n("thead",{className:"vtx-table-header",children:n("tr",{children:t.map(t=>{const e=w&&!1!==t.sortable,o=["vtx-table-header-cell",e&&"vtx-table-header-cell--sortable",t.sticky&&`vtx-table-header-cell--sticky-${t.sticky}`,t.headerClassName].filter(Boolean).join(" ");return n("th",{className:o,style:{width:t.width,minWidth:t.minWidth,maxWidth:t.maxWidth,textAlign:t.align||"left"},onClick:()=>e&&T(t.key),role:e?"button":void 0,tabIndex:e?0:void 0,onKeyDown:n=>{!e||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),T(t.key))},"aria-sort":(null==L?void 0:L.key)===t.key?"asc"===L.direction?"ascending":"descending":void 0,children:r("span",{className:"vtx-table-header-content",children:[t.header,e&&A(t.key)]})},t.key)})})}),n("tbody",{className:"vtx-table-body",children:x?n("tr",{children:n("td",{colSpan:t.length,className:"vtx-table-loading",children:p||n("span",{className:"vtx-table-loading-spinner",children:"Loading..."})})}):0===$.length?n("tr",{children:n("td",{colSpan:t.length,className:"vtx-table-empty",children:d})}):$.map((r,e)=>{const a=null==f?void 0:f(r,e),i=["vtx-table-row",a&&"vtx-table-row--selected"].filter(Boolean).join(" ");return n("tr",{className:i,onClick:n=>B(r,e,n),role:g||b?"button":void 0,tabIndex:g||b?0:void 0,"aria-selected":a,onKeyDown:n=>{!g&&!b||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),B(r,e,n))},children:t.map(t=>{const o=["vtx-table-cell",t.sticky&&`vtx-table-cell--sticky-${t.sticky}`,t.className].filter(Boolean).join(" ");return n("td",{className:o,style:{textAlign:t.align||"left",width:t.width,minWidth:t.minWidth,maxWidth:t.maxWidth},children:t.render?t.render(r,e):r[t.key]},t.key)})},o(r,e))})})]})})}S(".vtx-table-container {\n width: 100%;\n overflow-x: auto;\n border: 1px solid var(--vtx-color-neutral-200);\n border-radius: var(--vtx-radius-lg);\n}\n\n.vtx-table {\n width: 100%;\n border-collapse: collapse;\n font-family: var(--vtx-font-family-sans);\n background-color: white;\n}\n\n.vtx-table-caption {\n padding: var(--vtx-spacing-4);\n font-size: var(--vtx-font-size-lg);\n font-weight: var(--vtx-font-weight-semibold);\n text-align: left;\n color: var(--vtx-color-neutral-900);\n}\n\n/* Header */\n.vtx-table-header {\n background-color: var(--vtx-color-neutral-50);\n border-bottom: 2px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-table-header-cell {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-semibold);\n color: var(--vtx-color-neutral-700);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n white-space: nowrap;\n}\n\n/* Body */\n.vtx-table-body {\n background-color: white;\n}\n\n.vtx-table-row {\n border-bottom: 1px solid var(--vtx-color-neutral-200);\n transition: background-color var(--vtx-transition-fast);\n}\n\n.vtx-table-row:last-child {\n border-bottom: none;\n}\n\n.vtx-table-cell {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n font-size: var(--vtx-font-size-base);\n color: var(--vtx-color-neutral-900);\n}\n\n/* Sizes */\n.vtx-table--small .vtx-table-header-cell,\n.vtx-table--small .vtx-table-cell {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-table--large .vtx-table-header-cell,\n.vtx-table--large .vtx-table-cell {\n padding: var(--vtx-spacing-4) var(--vtx-spacing-6);\n font-size: var(--vtx-font-size-lg);\n}\n\n/* Striped */\n.vtx-table--striped .vtx-table-row:nth-child(even) {\n background-color: var(--vtx-color-neutral-50);\n}\n\n/* Hoverable */\n.vtx-table--hoverable .vtx-table-row:hover {\n background-color: var(--vtx-color-primary-50);\n}\n\n/* Empty state */\n.vtx-table-empty {\n padding: var(--vtx-spacing-12) var(--vtx-spacing-4);\n text-align: center;\n color: var(--vtx-color-neutral-500);\n font-style: italic;\n}\n"),Nn.displayName="Table";S("/* Grid Base Styles */\n.vtx-grid {\n box-sizing: border-box;\n}\n\n/* Container Styles */\n.vtx-grid-container {\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Item Styles */\n.vtx-grid-item {\n margin: 0;\n box-sizing: border-box;\n}\n\n/* Direction */\n.vtx-grid-direction-row {\n flex-direction: row;\n}\n\n.vtx-grid-direction-row-reverse {\n flex-direction: row-reverse;\n}\n\n.vtx-grid-direction-column {\n flex-direction: column;\n}\n\n.vtx-grid-direction-column-reverse {\n flex-direction: column-reverse;\n}\n\n/* Wrap */\n.vtx-grid-wrap-nowrap {\n flex-wrap: nowrap;\n}\n\n.vtx-grid-wrap-wrap {\n flex-wrap: wrap;\n}\n\n.vtx-grid-wrap-wrap-reverse {\n flex-wrap: wrap-reverse;\n}\n\n/* Spacing - Container */\n.vtx-grid-spacing-0 {\n margin: 0;\n}\n\n.vtx-grid-spacing-0 > .vtx-grid-item {\n padding: 0;\n}\n\n.vtx-grid-spacing-1 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-spacing-1 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n}\n\n.vtx-grid-spacing-2 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-spacing-2 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-spacing-3 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 3);\n}\n\n.vtx-grid-spacing-3 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n}\n\n.vtx-grid-spacing-4 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 4);\n}\n\n.vtx-grid-spacing-4 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-spacing-5 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 5);\n}\n\n.vtx-grid-spacing-5 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n}\n\n.vtx-grid-spacing-6 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -3);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 6);\n}\n\n.vtx-grid-spacing-6 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 3);\n}\n\n.vtx-grid-spacing-7 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -3.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 7);\n}\n\n.vtx-grid-spacing-7 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 3.5);\n}\n\n.vtx-grid-spacing-8 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -4);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 8);\n}\n\n.vtx-grid-spacing-8 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 4);\n}\n\n.vtx-grid-spacing-9 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -4.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 9);\n}\n\n.vtx-grid-spacing-9 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 4.5);\n}\n\n.vtx-grid-spacing-10 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 10);\n}\n\n.vtx-grid-spacing-10 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 5);\n}\n\n/* Row Spacing */\n.vtx-grid-row-spacing-1 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n}\n\n.vtx-grid-row-spacing-1 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n}\n\n.vtx-grid-row-spacing-2 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n}\n\n.vtx-grid-row-spacing-2 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-row-spacing-3 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n}\n\n.vtx-grid-row-spacing-3 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n}\n\n.vtx-grid-row-spacing-4 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n}\n\n.vtx-grid-row-spacing-4 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-row-spacing-5 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n}\n\n.vtx-grid-row-spacing-5 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n}\n\n/* Column Spacing */\n.vtx-grid-column-spacing-1 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-column-spacing-1 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n}\n\n.vtx-grid-column-spacing-2 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-column-spacing-2 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-column-spacing-3 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 3);\n}\n\n.vtx-grid-column-spacing-3 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n}\n\n.vtx-grid-column-spacing-4 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 4);\n}\n\n.vtx-grid-column-spacing-4 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-column-spacing-5 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 5);\n}\n\n.vtx-grid-column-spacing-5 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n}\n\n/* XS (Extra Small) - 0px and up */\n.vtx-grid-xs-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n}\n\n.vtx-grid-xs {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n}\n\n.vtx-grid-xs-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n}\n\n.vtx-grid-xs-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n}\n\n.vtx-grid-xs-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n}\n\n.vtx-grid-xs-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n}\n\n.vtx-grid-xs-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n}\n\n.vtx-grid-xs-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n}\n\n.vtx-grid-xs-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n}\n\n.vtx-grid-xs-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n}\n\n.vtx-grid-xs-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n}\n\n.vtx-grid-xs-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n}\n\n.vtx-grid-xs-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n}\n\n.vtx-grid-xs-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n}\n\n/* SM (Small) - 600px and up */\n@media (min-width: 600px) {\n .vtx-grid-sm-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n }\n\n .vtx-grid-sm {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n\n .vtx-grid-sm-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n }\n\n .vtx-grid-sm-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n }\n\n .vtx-grid-sm-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n\n .vtx-grid-sm-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n }\n\n .vtx-grid-sm-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n }\n\n .vtx-grid-sm-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n\n .vtx-grid-sm-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n }\n\n .vtx-grid-sm-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n }\n\n .vtx-grid-sm-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n\n .vtx-grid-sm-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n }\n\n .vtx-grid-sm-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n }\n\n .vtx-grid-sm-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n}\n\n/* MD (Medium) - 960px and up */\n@media (min-width: 960px) {\n .vtx-grid-md-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n }\n\n .vtx-grid-md {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n\n .vtx-grid-md-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n }\n\n .vtx-grid-md-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n }\n\n .vtx-grid-md-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n\n .vtx-grid-md-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n }\n\n .vtx-grid-md-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n }\n\n .vtx-grid-md-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n\n .vtx-grid-md-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n }\n\n .vtx-grid-md-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n }\n\n .vtx-grid-md-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n\n .vtx-grid-md-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n }\n\n .vtx-grid-md-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n }\n\n .vtx-grid-md-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n}\n\n/* LG (Large) - 1280px and up */\n@media (min-width: 1280px) {\n .vtx-grid-lg-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n }\n\n .vtx-grid-lg {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n\n .vtx-grid-lg-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n }\n\n .vtx-grid-lg-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n }\n\n .vtx-grid-lg-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n\n .vtx-grid-lg-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n }\n\n .vtx-grid-lg-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n }\n\n .vtx-grid-lg-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n\n .vtx-grid-lg-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n }\n\n .vtx-grid-lg-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n }\n\n .vtx-grid-lg-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n\n .vtx-grid-lg-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n }\n\n .vtx-grid-lg-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n }\n\n .vtx-grid-lg-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n}\n\n/* XL (Extra Large) - 1920px and up */\n@media (min-width: 1920px) {\n .vtx-grid-xl-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n }\n\n .vtx-grid-xl {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n\n .vtx-grid-xl-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n }\n\n .vtx-grid-xl-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n }\n\n .vtx-grid-xl-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n\n .vtx-grid-xl-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n }\n\n .vtx-grid-xl-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n }\n\n .vtx-grid-xl-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n\n .vtx-grid-xl-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n }\n\n .vtx-grid-xl-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n }\n\n .vtx-grid-xl-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n\n .vtx-grid-xl-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n }\n\n .vtx-grid-xl-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n }\n\n .vtx-grid-xl-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n}\n");const Cn=o.forwardRef(({container:r=!1,item:t=!1,spacing:e,rowSpacing:o,columnSpacing:a,xs:i,sm:l,md:c,lg:v,xl:s,justifyContent:d,alignItems:x,alignContent:p,direction:m="row",wrap:u="wrap",className:h="",children:g,style:f,...b},w)=>{const y=["vtx-grid",r&&"vtx-grid-container",t&&"vtx-grid-item",r&&void 0!==e&&`vtx-grid-spacing-${e}`,r&&void 0!==o&&`vtx-grid-row-spacing-${o}`,r&&void 0!==a&&`vtx-grid-column-spacing-${a}`,void 0!==i&&"vtx-grid-xs"+(!0===i?"":"auto"===i?"-auto":`-${i}`),void 0!==l&&"vtx-grid-sm"+(!0===l?"":"auto"===l?"-auto":`-${l}`),void 0!==c&&"vtx-grid-md"+(!0===c?"":"auto"===c?"-auto":`-${c}`),void 0!==v&&"vtx-grid-lg"+(!0===v?"":"auto"===v?"-auto":`-${v}`),void 0!==s&&"vtx-grid-xl"+(!0===s?"":"auto"===s?"-auto":`-${s}`),r&&"row"!==m&&`vtx-grid-direction-${m}`,r&&"wrap"!==u&&`vtx-grid-wrap-${u}`,h].filter(Boolean).join(" "),k={...f};return r&&(d&&(k.justifyContent=d),x&&(k.alignItems=x),p&&(k.alignContent=p)),n("div",{ref:w,className:y,style:Object.keys(k).length>0?k:void 0,...b,children:g})});Cn.displayName="Grid";S("/**\r\n * VTX UI Design System - Base CSS Variables\r\n * \r\n * This file defines all CSS custom properties with default values from our design tokens.\r\n * These variables can be overridden by users through ThemeProvider or custom CSS.\r\n * \r\n * Usage:\r\n * - Import this file in your app entry point or ThemeProvider\r\n * - Override variables using :root selector or data-theme attributes\r\n * - All components use these variables with fallback values\r\n */\r\n\r\n:root {\r\n /* ============================================\r\n * COLOR TOKENS\r\n * ============================================ */\r\n\r\n /* Primary Colors */\r\n --vtx-color-primary-50: #eff6ff;\r\n --vtx-color-primary-100: #dbeafe;\r\n --vtx-color-primary-200: #bfdbfe;\r\n --vtx-color-primary-300: #93c5fd;\r\n --vtx-color-primary-400: #60a5fa;\r\n --vtx-color-primary-500: #3b82f6;\r\n --vtx-color-primary-600: #2563eb;\r\n --vtx-color-primary-700: #1d4ed8;\r\n --vtx-color-primary-800: #1e40af;\r\n --vtx-color-primary-900: #1e3a8a;\r\n\r\n /* Secondary Colors */\r\n --vtx-color-secondary-50: #f5f3ff;\r\n --vtx-color-secondary-100: #ede9fe;\r\n --vtx-color-secondary-200: #ddd6fe;\r\n --vtx-color-secondary-300: #c4b5fd;\r\n --vtx-color-secondary-400: #a78bfa;\r\n --vtx-color-secondary-500: #8b5cf6;\r\n --vtx-color-secondary-600: #7c3aed;\r\n --vtx-color-secondary-700: #6d28d9;\r\n --vtx-color-secondary-800: #5b21b6;\r\n --vtx-color-secondary-900: #4c1d95;\r\n\r\n /* Neutral Colors */\r\n --vtx-color-neutral-50: #fafafa;\r\n --vtx-color-neutral-100: #f5f5f5;\r\n --vtx-color-neutral-200: #e5e5e5;\r\n --vtx-color-neutral-300: #d4d4d4;\r\n --vtx-color-neutral-400: #a3a3a3;\r\n --vtx-color-neutral-500: #737373;\r\n --vtx-color-neutral-600: #525252;\r\n --vtx-color-neutral-700: #404040;\r\n --vtx-color-neutral-800: #262626;\r\n --vtx-color-neutral-900: #171717;\r\n\r\n /* Success Colors */\r\n --vtx-color-success-50: #f0fdf4;\r\n --vtx-color-success-500: #22c55e;\r\n --vtx-color-success-600: #16a34a;\r\n --vtx-color-success-700: #15803d;\r\n\r\n /* Warning Colors */\r\n --vtx-color-warning-50: #fffbeb;\r\n --vtx-color-warning-500: #f59e0b;\r\n --vtx-color-warning-600: #d97706;\r\n --vtx-color-warning-700: #b45309;\r\n\r\n /* Error Colors */\r\n --vtx-color-error-50: #fef2f2;\r\n --vtx-color-error-500: #ef4444;\r\n --vtx-color-error-600: #dc2626;\r\n --vtx-color-error-700: #b91c1c;\r\n\r\n /* Info Colors */\r\n --vtx-color-info-50: #eff6ff;\r\n --vtx-color-info-500: #3b82f6;\r\n --vtx-color-info-600: #2563eb;\r\n --vtx-color-info-700: #1d4ed8;\r\n\r\n /* ============================================\r\n * SPACING TOKENS\r\n * ============================================ */\r\n --vtx-spacing-0: 0;\r\n --vtx-spacing-1: 0.25rem; /* 4px */\r\n --vtx-spacing-2: 0.5rem; /* 8px */\r\n --vtx-spacing-3: 0.75rem; /* 12px */\r\n --vtx-spacing-4: 1rem; /* 16px */\r\n --vtx-spacing-5: 1.25rem; /* 20px */\r\n --vtx-spacing-6: 1.5rem; /* 24px */\r\n --vtx-spacing-8: 2rem; /* 32px */\r\n --vtx-spacing-10: 2.5rem; /* 40px */\r\n --vtx-spacing-12: 3rem; /* 48px */\r\n --vtx-spacing-16: 4rem; /* 64px */\r\n --vtx-spacing-20: 5rem; /* 80px */\r\n --vtx-spacing-24: 6rem; /* 96px */\r\n\r\n /* ============================================\r\n * TYPOGRAPHY TOKENS\r\n * ============================================ */\r\n\r\n /* Font Families */\r\n --vtx-font-family-sans:\r\n -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n --vtx-font-family-mono:\r\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\r\n\r\n /* Font Sizes */\r\n --vtx-font-size-xs: 0.75rem; /* 12px */\r\n --vtx-font-size-sm: 0.875rem; /* 14px */\r\n --vtx-font-size-base: 1rem; /* 16px */\r\n --vtx-font-size-lg: 1.125rem; /* 18px */\r\n --vtx-font-size-xl: 1.25rem; /* 20px */\r\n --vtx-font-size-2xl: 1.5rem; /* 24px */\r\n --vtx-font-size-3xl: 1.875rem; /* 30px */\r\n --vtx-font-size-4xl: 2.25rem; /* 36px */\r\n\r\n /* Font Weights */\r\n --vtx-font-weight-normal: 400;\r\n --vtx-font-weight-medium: 500;\r\n --vtx-font-weight-semibold: 600;\r\n --vtx-font-weight-bold: 700;\r\n\r\n /* Line Heights */\r\n --vtx-line-height-tight: 1.25;\r\n --vtx-line-height-normal: 1.5;\r\n --vtx-line-height-relaxed: 1.75;\r\n\r\n /* ============================================\r\n * TEXT VARIANT TOKENS\r\n * ============================================ */\r\n\r\n /* Heading Variants */\r\n --vtx-text-h1-font-size: 3.75rem; /* 60px */\r\n --vtx-text-h1-font-weight: 700;\r\n --vtx-text-h1-line-height: 1.2;\r\n --vtx-text-h1-letter-spacing: -0.025em;\r\n\r\n --vtx-text-h2-font-size: 3rem; /* 48px */\r\n --vtx-text-h2-font-weight: 700;\r\n --vtx-text-h2-line-height: 1.25;\r\n --vtx-text-h2-letter-spacing: -0.025em;\r\n\r\n --vtx-text-h3-font-size: 2.25rem; /* 36px */\r\n --vtx-text-h3-font-weight: 600;\r\n --vtx-text-h3-line-height: 1.3;\r\n --vtx-text-h3-letter-spacing: -0.025em;\r\n\r\n --vtx-text-h4-font-size: 1.875rem; /* 30px */\r\n --vtx-text-h4-font-weight: 600;\r\n --vtx-text-h4-line-height: 1.35;\r\n --vtx-text-h4-letter-spacing: 0;\r\n\r\n --vtx-text-h5-font-size: 1.5rem; /* 24px */\r\n --vtx-text-h5-font-weight: 600;\r\n --vtx-text-h5-line-height: 1.4;\r\n --vtx-text-h5-letter-spacing: 0;\r\n\r\n --vtx-text-h6-font-size: 1.25rem; /* 20px */\r\n --vtx-text-h6-font-weight: 600;\r\n --vtx-text-h6-line-height: 1.5;\r\n --vtx-text-h6-letter-spacing: 0;\r\n\r\n /* Body Text Variants */\r\n --vtx-text-body1-font-size: 1rem; /* 16px - DEFAULT WEBSITE FONT SIZE */\r\n --vtx-text-body1-font-weight: 400;\r\n --vtx-text-body1-line-height: 1.5;\r\n --vtx-text-body1-letter-spacing: 0;\r\n\r\n --vtx-text-body2-font-size: 0.875rem; /* 14px */\r\n --vtx-text-body2-font-weight: 400;\r\n --vtx-text-body2-line-height: 1.5;\r\n --vtx-text-body2-letter-spacing: 0;\r\n\r\n /* Subtitle Variants */\r\n --vtx-text-subtitle1-font-size: 1.125rem; /* 18px */\r\n --vtx-text-subtitle1-font-weight: 500;\r\n --vtx-text-subtitle1-line-height: 1.5;\r\n --vtx-text-subtitle1-letter-spacing: 0;\r\n\r\n --vtx-text-subtitle2-font-size: 1rem; /* 16px */\r\n --vtx-text-subtitle2-font-weight: 500;\r\n --vtx-text-subtitle2-line-height: 1.5;\r\n --vtx-text-subtitle2-letter-spacing: 0;\r\n\r\n /* Utility Text Variants */\r\n --vtx-text-caption-font-size: 0.75rem; /* 12px */\r\n --vtx-text-caption-font-weight: 400;\r\n --vtx-text-caption-line-height: 1.5;\r\n --vtx-text-caption-letter-spacing: 0.025em;\r\n\r\n --vtx-text-overline-font-size: 0.75rem; /* 12px */\r\n --vtx-text-overline-font-weight: 600;\r\n --vtx-text-overline-line-height: 1.5;\r\n --vtx-text-overline-letter-spacing: 0.1em;\r\n\r\n --vtx-text-button-font-size: 0.875rem; /* 14px */\r\n --vtx-text-button-font-weight: 600;\r\n --vtx-text-button-line-height: 1.5;\r\n --vtx-text-button-letter-spacing: 0.025em;\r\n\r\n --vtx-text-label-font-size: 0.875rem; /* 14px */\r\n --vtx-text-label-font-weight: 500;\r\n --vtx-text-label-line-height: 1.5;\r\n --vtx-text-label-letter-spacing: 0;\r\n\r\n /* ============================================\r\n * BORDER RADIUS TOKENS\r\n * ============================================ */\r\n --vtx-radius-none: 0;\r\n --vtx-radius-sm: 0.125rem; /* 2px */\r\n --vtx-radius-base: 0.25rem; /* 4px */\r\n --vtx-radius-md: 0.375rem; /* 6px */\r\n --vtx-radius-lg: 0.5rem; /* 8px */\r\n --vtx-radius-xl: 0.75rem; /* 12px */\r\n --vtx-radius-2xl: 1rem; /* 16px */\r\n --vtx-radius-full: 9999px;\r\n\r\n /* ============================================\r\n * SHADOW TOKENS\r\n * ============================================ */\r\n --vtx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\r\n --vtx-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\r\n --vtx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\r\n --vtx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\r\n --vtx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\r\n --vtx-shadow-none: none;\r\n\r\n /* ============================================\r\n * TRANSITION TOKENS\r\n * ============================================ */\r\n --vtx-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n --vtx-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);\r\n --vtx-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n /* ============================================\r\n /* Z-INDEX TOKENS\r\n * ============================================ */\r\n --vtx-z-dropdown: 1000;\r\n --vtx-z-sticky: 1100;\r\n --vtx-z-modal: 1200;\r\n --vtx-z-tooltip: 1300;\r\n --vtx-z-notification: 1400;\r\n\r\n /* ============================================\r\n * SEMANTIC COLOR ALIASES\r\n * ============================================ */\r\n /* Text colors */\r\n --vtx-text-primary: var(--vtx-color-neutral-900);\r\n --vtx-text-secondary: var(--vtx-color-neutral-600);\r\n --vtx-text-tertiary: var(--vtx-color-neutral-500);\r\n --vtx-text-disabled: var(--vtx-color-neutral-400);\r\n\r\n /* Background colors */\r\n --vtx-background-primary: #ffffff;\r\n --vtx-background-secondary: var(--vtx-color-neutral-50);\r\n --vtx-background-hover: var(--vtx-color-neutral-100);\r\n --vtx-background-active: var(--vtx-color-neutral-200);\r\n\r\n /* Border colors */\r\n --vtx-border-color: var(--vtx-color-neutral-300);\r\n --vtx-border-color-light: var(--vtx-color-neutral-200);\r\n --vtx-border-color-dark: var(--vtx-color-neutral-400);\r\n\r\n /* Additional common aliases */\r\n --vtx-transition-normal: var(--vtx-transition-base);\r\n}\r\n\r\n/* ============================================\r\n * DARK THEME OVERRIDES\r\n * ============================================ */\r\n[data-theme='dark'] {\r\n /* Invert neutral colors for dark mode */\r\n --vtx-color-neutral-50: #171717;\r\n --vtx-color-neutral-100: #262626;\r\n --vtx-color-neutral-200: #404040;\r\n --vtx-color-neutral-300: #525252;\r\n --vtx-color-neutral-400: #737373;\r\n --vtx-color-neutral-500: #a3a3a3;\r\n --vtx-color-neutral-600: #d4d4d4;\r\n --vtx-color-neutral-700: #e5e5e5;\r\n --vtx-color-neutral-800: #f5f5f5;\r\n --vtx-color-neutral-900: #fafafa;\r\n\r\n /* Dark mode semantic colors */\r\n --vtx-text-primary: var(--vtx-color-neutral-50);\r\n --vtx-text-secondary: var(--vtx-color-neutral-400);\r\n --vtx-text-tertiary: var(--vtx-color-neutral-500);\r\n --vtx-text-disabled: var(--vtx-color-neutral-600);\r\n\r\n --vtx-background-primary: #0a0a0a;\r\n --vtx-background-secondary: var(--vtx-color-neutral-900);\r\n --vtx-background-hover: rgba(255, 255, 255, 0.05);\r\n --vtx-background-active: rgba(255, 255, 255, 0.1);\r\n\r\n --vtx-border-color: var(--vtx-color-neutral-700);\r\n --vtx-border-color-light: var(--vtx-color-neutral-800);\r\n --vtx-border-color-dark: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* ============================================\r\n * GLOBAL RESETS\r\n * ============================================ */\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Set root font size for rem calculations */\r\nhtml {\r\n font-size: 16px; /* 1rem = 16px base */\r\n}\r\n\r\n/* Set base font styles for entire website */\r\nbody {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base); /* 1rem = 16px */\r\n line-height: var(--vtx-line-height-normal); /* 1.5 */\r\n font-weight: var(--vtx-font-weight-normal); /* 400 */\r\n color: var(--vtx-color-neutral-900);\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n/* Apply default font to all elements unless overridden */\r\n*:not(code):not(pre):not(kbd):not(samp) {\r\n font-family: inherit;\r\n}\r\n\r\n/* Reset default margins and ensure consistent font inheritance */\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nblockquote,\r\npre,\r\nul,\r\nol,\r\nli,\r\ndl,\r\ndt,\r\ndd,\r\nfigure,\r\nfigcaption,\r\ntable,\r\nthead,\r\ntbody,\r\ntfoot,\r\ntr,\r\nth,\r\ntd {\r\n margin: 0;\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n font-weight: inherit;\r\n}\r\n\r\n/* Ensure form elements inherit typography */\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n}\r\n");export{Y as Accordion,V as AccordionItem,q as Alert,xn as Avatar,pn as Badge,_ as Button,mn as Card,L as Checkbox,T as CheckboxGroup,O as Chip,un as Divider,G as Flex,Cn as Grid,wn as Header,D as Input,J as Menu,Z as MenuItem,Q as Modal,R as MultiSelect,W as Radio,H as RadioGroup,F as Select,zn as SideMenu,kn as SideMenuItem,Nn as Table,K as Text,N as ThemeProvider,tn as Toast,sn as ToastContainer,dn as Tooltip,y as generateCSSVariables,k as injectCSSVariables,cn as toast,w as tokens,B as useBodyScrollLock,$ as useClickOutside,E as useDebounce,j as useEscapeKey,M as useFocusTrap,I as useId,C as useThemeContext,on as useToast};
1
+ import{jsx as n,jsxs as r,Fragment as t}from"react/jsx-runtime";import*as e from"react";import o,{useId as a,useRef as i,useImperativeHandle as l,useEffect as c,useState as v,Children as s,isValidElement as d,useCallback as x,createContext as p,useContext as m,cloneElement as u,useMemo as h}from"react";import{createPortal as g}from"react-dom";const f=[50,100,200,300,400,500,600,700,800,900];function b(n){const r={};for(const[t,e]of Object.entries(n))"string"==typeof e?(r[t]={},f.forEach(n=>{r[t][n]=e})):"object"==typeof e&&null!==e&&(r[t]=e);return r}const w={colors:{primary:{50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a"},secondary:{50:"#f5f3ff",100:"#ede9fe",200:"#ddd6fe",300:"#c4b5fd",400:"#a78bfa",500:"#8b5cf6",600:"#7c3aed",700:"#6d28d9",800:"#5b21b6",900:"#4c1d95"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",600:"#525252",700:"#404040",800:"#262626",900:"#171717"},success:{50:"#f0fdf4",500:"#22c55e",600:"#16a34a",700:"#15803d"},warning:{50:"#fffbeb",500:"#f59e0b",600:"#d97706",700:"#b45309"},error:{50:"#fef2f2",500:"#ef4444",600:"#dc2626",700:"#b91c1c"},info:{50:"#eff6ff",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8"}},spacing:{0:"0",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem"},typography:{fontFamily:{sans:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',mono:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem","7xl":"4.5rem","8xl":"6rem","9xl":"8rem"},fontWeight:{thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"},lineHeight:{none:"1",tight:"1.25",snug:"1.375",normal:"1.5",relaxed:"1.625",loose:"2"},letterSpacing:{tighter:"-0.05em",tight:"-0.025em",normal:"0",wide:"0.025em",wider:"0.05em",widest:"0.1em"},textVariants:{h1:{fontSize:"3.75rem",fontWeight:"700",lineHeight:"1.2",letterSpacing:"-0.025em"},h2:{fontSize:"3rem",fontWeight:"700",lineHeight:"1.25",letterSpacing:"-0.025em"},h3:{fontSize:"2.25rem",fontWeight:"600",lineHeight:"1.3",letterSpacing:"-0.025em"},h4:{fontSize:"1.875rem",fontWeight:"600",lineHeight:"1.35",letterSpacing:"0"},h5:{fontSize:"1.5rem",fontWeight:"600",lineHeight:"1.4",letterSpacing:"0"},h6:{fontSize:"1.25rem",fontWeight:"600",lineHeight:"1.5",letterSpacing:"0"},body1:{fontSize:"1rem",fontWeight:"400",lineHeight:"1.5",letterSpacing:"0"},body2:{fontSize:"0.875rem",fontWeight:"400",lineHeight:"1.5",letterSpacing:"0"},subtitle1:{fontSize:"1.125rem",fontWeight:"500",lineHeight:"1.5",letterSpacing:"0"},subtitle2:{fontSize:"1rem",fontWeight:"500",lineHeight:"1.5",letterSpacing:"0"},caption:{fontSize:"0.75rem",fontWeight:"400",lineHeight:"1.5",letterSpacing:"0.025em"},overline:{fontSize:"0.75rem",fontWeight:"600",lineHeight:"1.5",letterSpacing:"0.1em",textTransform:"uppercase"},button:{fontSize:"0.875rem",fontWeight:"600",lineHeight:"1.5",letterSpacing:"0.025em"},label:{fontSize:"0.875rem",fontWeight:"500",lineHeight:"1.5",letterSpacing:"0"}}},borderRadius:{none:"0",sm:"0.125rem",base:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem",full:"9999px"},shadows:{sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",base:"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",none:"none"},transitions:{fast:"150ms cubic-bezier(0.4, 0, 0.2, 1)",base:"200ms cubic-bezier(0.4, 0, 0.2, 1)",slow:"300ms cubic-bezier(0.4, 0, 0.2, 1)"},zIndex:{dropdown:1e3,sticky:1100,modal:1200,tooltip:1300,notification:1400}};function y(){const n=[];return Object.entries(w.colors).forEach(([r,t])=>{"object"==typeof t?Object.entries(t).forEach(([t,e])=>{n.push(` --vtx-color-${r}-${t}: ${e};`)}):n.push(` --vtx-color-${r}: ${t};`)}),Object.entries(w.spacing).forEach(([r,t])=>{n.push(` --vtx-spacing-${r}: ${t};`)}),Object.entries(w.typography.fontFamily).forEach(([r,t])=>{n.push(` --vtx-font-family-${r}: ${t};`)}),Object.entries(w.typography.fontSize).forEach(([r,t])=>{n.push(` --vtx-font-size-${r}: ${t};`)}),Object.entries(w.typography.fontWeight).forEach(([r,t])=>{n.push(` --vtx-font-weight-${r}: ${t};`)}),Object.entries(w.typography.lineHeight).forEach(([r,t])=>{n.push(` --vtx-line-height-${r}: ${t};`)}),Object.entries(w.typography.letterSpacing).forEach(([r,t])=>{n.push(` --vtx-letter-spacing-${r}: ${t};`)}),Object.entries(w.typography.textVariants).forEach(([r,t])=>{Object.entries(t).forEach(([t,e])=>{const o=t.replace(/([A-Z])/g,"-$1").toLowerCase();n.push(` --vtx-text-${r}-${o}: ${e};`)})}),Object.entries(w.borderRadius).forEach(([r,t])=>{n.push(` --vtx-radius-${r}: ${t};`)}),Object.entries(w.shadows).forEach(([r,t])=>{n.push(` --vtx-shadow-${r}: ${t};`)}),Object.entries(w.transitions).forEach(([r,t])=>{n.push(` --vtx-transition-${r}: ${t};`)}),Object.entries(w.zIndex).forEach(([r,t])=>{n.push(` --vtx-z-${r}: ${t};`)}),n.join("\n")}function k(){if("undefined"==typeof document)return;const n="vtx-ui-variables";let r=document.getElementById(n);r||(r=document.createElement("style"),r.id=n,document.head.appendChild(r));const t=y();r.textContent=`:root {\n${t}\n}`}const z=o.createContext(void 0),N=o.forwardRef(({children:r,initialMode:t="light",customTokens:e,defaultSize:a="md",...i},l)=>{const[c,v]=o.useState(t),[s,d]=o.useState(a),x=o.useMemo(()=>{if(!e)return{tokens:w,mode:c,defaultSize:s};let n={...w,...e};return e.colors&&(n.colors={...w.colors,...b(e.colors)}),{tokens:n,mode:c,defaultSize:s}},[e,c,s]);o.useEffect(()=>{document.documentElement.setAttribute("data-theme",c),e&&k()},[c,e]);const p=o.useMemo(()=>({theme:x,setMode:v,setDefaultSize:d}),[x]);return n(z.Provider,{value:p,children:n("div",{ref:l,...i,children:r})})});N.displayName="ThemeProvider";const C=()=>{const n=o.useContext(z);if(!n)throw new Error("useThemeContext must be used within a ThemeProvider");return n};function S(n,r){void 0===r&&(r={});var t=r.insertAt;if(n&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}S(".vtx-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: var(--vtx-spacing-2);\r\n font-family: var(--vtx-font-family-sans);\r\n font-weight: var(--vtx-font-weight-medium);\r\n border: 1px solid transparent;\r\n border-radius: var(--vtx-radius-md);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-base);\r\n white-space: nowrap;\r\n user-select: none;\r\n text-decoration: none;\r\n position: relative;\r\n}\r\n\r\n.vtx-button:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n}\r\n\r\n.vtx-button:disabled,\r\n.vtx-button[aria-disabled='true'] {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n/* Sizes */\r\n.vtx-button--sm {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-3);\r\n font-size: var(--vtx-font-size-sm);\r\n min-height: 32px;\r\n}\r\n\r\n.vtx-button--md {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-base);\r\n min-height: 40px;\r\n}\r\n\r\n.vtx-button--lg {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-lg);\r\n min-height: 48px;\r\n}\r\n\r\n/* Variants */\r\n.vtx-button--primary {\r\n background-color: var(--vtx-color-primary-600);\r\n color: white;\r\n}\r\n\r\n.vtx-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-button--primary:active:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-primary-800);\r\n}\r\n\r\n.vtx-button--secondary {\r\n background-color: var(--vtx-color-secondary-600);\r\n color: white;\r\n}\r\n\r\n.vtx-button--secondary:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-secondary-700);\r\n}\r\n\r\n.vtx-button--secondary:active:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-secondary-800);\r\n}\r\n\r\n.vtx-button--outline {\r\n background-color: transparent;\r\n border-color: var(--vtx-color-neutral-300);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-neutral-50);\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-button--ghost {\r\n background-color: transparent;\r\n color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.vtx-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n.vtx-button--danger {\r\n background-color: var(--vtx-color-error-600);\r\n color: white;\r\n}\r\n\r\n.vtx-button--danger:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-error-700);\r\n}\r\n\r\n.vtx-button--success {\r\n background-color: var(--vtx-color-success-600, #16a34a);\r\n color: white;\r\n}\r\n\r\n.vtx-button--success:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-success-700, #15803d);\r\n}\r\n\r\n.vtx-button--success:active:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-success-800, #166534);\r\n}\r\n\r\n.vtx-button--warning {\r\n background-color: var(--vtx-color-warning-500, #f59e42);\r\n color: var(--vtx-color-warning-contrast, #1a1a1a);\r\n}\r\n\r\n.vtx-button--warning:hover:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-warning-600, #d97706);\r\n}\r\n\r\n.vtx-button--warning:active:not(:disabled):not([aria-disabled='true']) {\r\n background-color: var(--vtx-color-warning-700, #b45309);\r\n}\r\n\r\n/* Full width */\r\n.vtx-button--full-width {\r\n width: 100%;\r\n}\r\n\r\n/* Loading state */\r\n.vtx-button--loading .vtx-button__content {\r\n visibility: hidden;\r\n}\r\n\r\n.vtx-button__spinner {\r\n position: absolute;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.vtx-button__spinner-icon {\r\n width: 1em;\r\n height: 1em;\r\n animation: vtx-spin 0.6s linear infinite;\r\n}\r\n\r\n.vtx-button__spinner-circle {\r\n stroke: currentColor;\r\n stroke-linecap: round;\r\n stroke-dasharray: 50;\r\n stroke-dashoffset: 25;\r\n}\r\n\r\n@keyframes vtx-spin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Icons */\r\n.vtx-button__icon-left,\r\n.vtx-button__icon-right {\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-button__icon-left {\r\n margin-left: calc(var(--vtx-spacing-1) * -1);\r\n}\r\n\r\n.vtx-button__icon-right {\r\n margin-right: calc(var(--vtx-spacing-1) * -1);\r\n}\r\n\r\n/* Dark/Light text override */\r\n.vtx-button--dark-text {\r\n color: var(--vtx-color-dark-text, var(--vtx-color-neutral-900)) !important;\r\n}\r\n.vtx-button--light-text {\r\n color: var(--vtx-color-light-text, var(--vtx-color-white)) !important;\r\n}\r\n");const _=o.forwardRef(({children:e,variant:o="primary",size:a,fullWidth:i=!1,loading:l=!1,disabled:c=!1,leftIcon:v,rightIcon:s,iconOnly:d=!1,loadingText:x,asLink:p=!1,href:m,target:u,rel:h,className:g="",type:f="button",...b},w)=>{const{theme:y}=C(),k=["vtx-button",`vtx-button--${o}`,`vtx-button--${a||y.defaultSize||"md"}`,i&&"vtx-button--full-width",l&&"vtx-button--loading",d&&"vtx-button--icon-only",!0===b.darkText&&"vtx-button--dark-text",!1===b.darkText&&"vtx-button--light-text",g].filter(Boolean).join(" "),z=b.style?{...b.style}:{};b.textColor&&(z.color=b.textColor);const N=r(t,{children:[l&&n("span",{className:"vtx-button__spinner",role:"status","aria-label":"Loading",children:n("svg",{className:"vtx-button__spinner-icon",viewBox:"0 0 24 24",children:n("circle",{className:"vtx-button__spinner-circle",cx:"12",cy:"12",r:"10",fill:"none",strokeWidth:"3"})})}),!l&&v&&n("span",{className:"vtx-button__icon-left",children:v}),!d&&n("span",{className:"vtx-button__content",children:l&&x?x:e}),d&&!l&&e,!l&&s&&n("span",{className:"vtx-button__icon-right",children:s})]});return p&&m?n("a",{ref:w,href:m,target:u,rel:"_blank"===u?"noopener noreferrer":h,className:k,"aria-disabled":c||l,style:z,...b,children:N}):n("button",{ref:w,type:f,className:k,disabled:c||l,"aria-busy":l,"aria-disabled":c||l,style:z,...b,children:N})});_.displayName="Button";S("/* Checkbox Base Styles */\r\n.vtx-checkbox {\r\n display: inline-flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n}\r\n\r\n/* Label Container */\r\n.vtx-checkbox-label {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2);\r\n cursor: pointer;\r\n user-select: none;\r\n position: relative;\r\n}\r\n\r\n/* Wrapper for input and visual checkbox */\r\n.vtx-checkbox-wrapper {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Hidden input */\r\n.vtx-checkbox-input {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0;\r\n height: 0;\r\n margin: 0;\r\n padding: 0;\r\n pointer-events: none;\r\n}\r\n\r\n/* Visual checkbox box */\r\n.vtx-checkbox-box {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--vtx-checkbox-size, 20px);\r\n height: var(--vtx-checkbox-size, 20px);\r\n border: var(--vtx-checkbox-border-width, 2px) solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-checkbox-border-radius, 4px);\r\n background-color: white;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Icons */\r\n.vtx-checkbox-icon {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n color: white;\r\n opacity: 0;\r\n transform: scale(0.5);\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n/* Checked state */\r\n.vtx-checkbox-input:checked + .vtx-checkbox-box {\r\n background-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n border-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n}\r\n\r\n.vtx-checkbox-input:checked + .vtx-checkbox-box .vtx-checkbox-icon--check {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n/* Indeterminate state */\r\n.vtx-checkbox-input:indeterminate + .vtx-checkbox-box {\r\n background-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n border-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n}\r\n\r\n.vtx-checkbox-input:indeterminate + .vtx-checkbox-box .vtx-checkbox-icon--indeterminate {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n/* Hover state */\r\n.vtx-checkbox-label:hover .vtx-checkbox-box {\r\n border-color: var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n}\r\n\r\n.vtx-checkbox-label:hover .vtx-checkbox-input:checked + .vtx-checkbox-box,\r\n.vtx-checkbox-label:hover .vtx-checkbox-input:indeterminate + .vtx-checkbox-box {\r\n background-color: var(--vtx-checkbox-hover-color, var(--vtx-color-primary-700));\r\n border-color: var(--vtx-checkbox-hover-color, var(--vtx-color-primary-700));\r\n}\r\n\r\n/* Focus state */\r\n.vtx-checkbox-input:focus-visible + .vtx-checkbox-box {\r\n outline: 2px solid var(--vtx-checkbox-color, var(--vtx-color-primary-600));\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Disabled state */\r\n.vtx-checkbox--disabled .vtx-checkbox-label {\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n}\r\n\r\n.vtx-checkbox--disabled .vtx-checkbox-box {\r\n background-color: var(--vtx-color-neutral-100);\r\n border-color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n.vtx-checkbox--disabled .vtx-checkbox-input:checked + .vtx-checkbox-box,\r\n.vtx-checkbox--disabled .vtx-checkbox-input:indeterminate + .vtx-checkbox-box {\r\n background-color: var(--vtx-color-neutral-300);\r\n border-color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n.vtx-checkbox--disabled .vtx-checkbox-label:hover .vtx-checkbox-box {\r\n border-color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n/* Error state */\r\n.vtx-checkbox--error .vtx-checkbox-box {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-checkbox--error .vtx-checkbox-input:checked + .vtx-checkbox-box,\r\n.vtx-checkbox--error .vtx-checkbox-input:indeterminate + .vtx-checkbox-box {\r\n background-color: var(--vtx-color-error-600);\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-checkbox--error .vtx-checkbox-label:hover .vtx-checkbox-input:checked + .vtx-checkbox-box,\r\n.vtx-checkbox--error\r\n .vtx-checkbox-label:hover\r\n .vtx-checkbox-input:indeterminate\r\n + .vtx-checkbox-box {\r\n background-color: var(--vtx-color-error-700);\r\n border-color: var(--vtx-color-error-700);\r\n}\r\n\r\n/* Label text */\r\n.vtx-checkbox-label-text {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-checkbox--disabled .vtx-checkbox-label-text {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n/* Helper text */\r\n.vtx-checkbox-helper-text {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-600);\r\n margin-left: calc(var(--vtx-checkbox-size, 20px) + var(--vtx-spacing-2));\r\n}\r\n\r\n.vtx-checkbox--error .vtx-checkbox-helper-text {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Size variants */\r\n.vtx-checkbox--sm {\r\n --vtx-checkbox-size: 16px;\r\n --vtx-checkbox-border-width: 2px;\r\n}\r\n\r\n.vtx-checkbox--sm .vtx-checkbox-label-text {\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-checkbox--sm .vtx-checkbox-helper-text {\r\n font-size: var(--vtx-font-size-xs);\r\n}\r\n\r\n.vtx-checkbox--md {\r\n --vtx-checkbox-size: 20px;\r\n --vtx-checkbox-border-width: 2px;\r\n}\r\n\r\n.vtx-checkbox--lg {\r\n --vtx-checkbox-size: 24px;\r\n --vtx-checkbox-border-width: 2px;\r\n}\r\n\r\n.vtx-checkbox--lg .vtx-checkbox-label-text {\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n/* Variants */\r\n.vtx-checkbox--primary {\r\n --vtx-checkbox-color: var(--vtx-color-primary-600);\r\n --vtx-checkbox-hover-color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-checkbox--secondary {\r\n --vtx-checkbox-color: var(--vtx-color-secondary-600, var(--vtx-color-neutral-600));\r\n --vtx-checkbox-hover-color: var(--vtx-color-secondary-700, var(--vtx-color-neutral-700));\r\n}\r\n\r\n.vtx-checkbox--success {\r\n --vtx-checkbox-color: var(--vtx-color-success-600, #16a34a);\r\n --vtx-checkbox-hover-color: var(--vtx-color-success-700, #15803d);\r\n}\r\n\r\n.vtx-checkbox--error {\r\n --vtx-checkbox-color: var(--vtx-color-error-600, #dc2626);\r\n --vtx-checkbox-hover-color: var(--vtx-color-error-700, #b91c1c);\r\n}\r\n\r\n.vtx-checkbox--warning {\r\n --vtx-checkbox-color: var(--vtx-color-warning-600, #d97706);\r\n --vtx-checkbox-hover-color: var(--vtx-color-warning-700, #b45309);\r\n}\r\n\r\n.vtx-checkbox--info {\r\n --vtx-checkbox-color: var(--vtx-color-info-600, #2563eb);\r\n --vtx-checkbox-hover-color: var(--vtx-color-info-700, #1d4ed8);\r\n}\r\n");const T=o.forwardRef(({checked:t,indeterminate:e=!1,disabled:o=!1,label:v,size:s,variant:d="primary",error:x=!1,helperText:p,onChange:m,className:u="",inputClassName:h="",id:g,...f},b)=>{const{theme:w}=C(),y=s||w.defaultSize||"md",k=a(),z=g||k,N=["vtx-checkbox",`vtx-checkbox--${y}`,`vtx-checkbox--${d}`,o&&"vtx-checkbox--disabled",x&&"vtx-checkbox--error",u].filter(Boolean).join(" "),S=["vtx-checkbox-input",h].filter(Boolean).join(" "),_=i(null);return l(b,()=>_.current),c(()=>{_.current&&(_.current.indeterminate=e)},[e]),r("div",{className:N,children:[r("label",{className:"vtx-checkbox-label",htmlFor:z,children:[r("span",{className:"vtx-checkbox-wrapper",children:[n("input",{ref:_,type:"checkbox",id:z,className:S,checked:t,disabled:o,onChange:m,...f}),r("span",{className:"vtx-checkbox-box",children:[n("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--check",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:n("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})}),n("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--indeterminate",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:n("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round"})})]})]}),v&&n("span",{className:"vtx-checkbox-label-text",children:v})]}),p&&n("div",{className:"vtx-checkbox-helper-text",children:p})]})});T.displayName="Checkbox";S("/* CheckboxGroup Base Styles */\n.vtx-checkbox-group {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-2);\n}\n\n/* Group Label */\n.vtx-checkbox-group-label {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n font-weight: var(--vtx-font-weight-medium);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-900);\n margin-bottom: var(--vtx-spacing-1);\n}\n\n.vtx-checkbox-group--disabled .vtx-checkbox-group-label {\n color: var(--vtx-color-neutral-500);\n}\n\n.vtx-checkbox-group--error .vtx-checkbox-group-label {\n color: var(--vtx-color-error-600);\n}\n\n/* Options Container */\n.vtx-checkbox-group-options {\n display: flex;\n gap: var(--vtx-spacing-3);\n}\n\n.vtx-checkbox-group--vertical .vtx-checkbox-group-options {\n flex-direction: column;\n}\n\n.vtx-checkbox-group--horizontal .vtx-checkbox-group-options {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n/* Helper Text */\n.vtx-checkbox-group-helper-text {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-600);\n margin-top: var(--vtx-spacing-1);\n}\n\n.vtx-checkbox-group--error .vtx-checkbox-group-helper-text {\n color: var(--vtx-color-error-600);\n}\n");const $=o.forwardRef(({label:t,options:e,value:o,defaultValue:a,onChange:i,disabled:l=!1,error:c=!1,helperText:s,orientation:d="vertical",size:x,className:p="",...m},u)=>{const{theme:h}=C(),g=x||h.defaultSize||"md",[f,b]=v(a||[]),w=void 0!==o,y=w?o:f,k=["vtx-checkbox-group",`vtx-checkbox-group--${d}`,c&&"vtx-checkbox-group--error",l&&"vtx-checkbox-group--disabled",p].filter(Boolean).join(" ");return r("div",{ref:u,className:k,...m,children:[t&&n("div",{className:"vtx-checkbox-group-label",children:t}),n("div",{className:"vtx-checkbox-group-options",children:e.map(r=>{const t=y.includes(r.value),e=l||r.disabled;return n(T,{label:r.label,checked:t,disabled:e,error:c,size:g,onChange:n=>((n,r)=>{const t=r?[...y,n]:y.filter(r=>r!==n);w||b(t),null==i||i(t)})(r.value,n.target.checked)},r.value)})}),s&&n("div",{className:"vtx-checkbox-group-helper-text",children:s})]})});$.displayName="CheckboxGroup";const L=(n,r)=>{c(()=>{const t=t=>{const e=null==n?void 0:n.current;e&&!e.contains(t.target)&&r(t)};return document.addEventListener("mousedown",t),document.addEventListener("touchstart",t),()=>{document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}},[n,r])},M=(n,r)=>{c(()=>{if(!r)return;const t=n.current;if(!t)return;const e=t.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(0===e.length)return;const o=e[0],a=e[e.length-1],i=n=>{"Tab"===n.key&&(n.shiftKey?document.activeElement===o&&(null==a||a.focus(),n.preventDefault()):document.activeElement===a&&(null==o||o.focus(),n.preventDefault()))};return null==o||o.focus(),t.addEventListener("keydown",i),()=>{t.removeEventListener("keydown",i)}},[n,r])},j=n=>{c(()=>{const r=r=>{"Escape"===r.key&&n()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[n])},B=n=>{c(()=>{if(!n)return;const r=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=r}},[n])};let A=0;const I=(n="vtx")=>{const[r]=v(()=>`${n}-${++A}`);return r},E=(n,r)=>{const[t,e]=v(n);return c(()=>{const t=setTimeout(()=>{e(n)},r);return()=>{clearTimeout(t)}},[n,r]),t};S(".vtx-input-wrapper {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-1);\n}\n\n.vtx-input-wrapper--full-width {\n width: 100%;\n}\n\n.vtx-input-label {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n color: var(--vtx-color-neutral-700);\n line-height: var(--vtx-line-height-tight);\n}\n\n.vtx-input-label__required {\n color: var(--vtx-color-error-600);\n margin-left: var(--vtx-spacing-1);\n}\n\n.vtx-input-container {\n position: relative;\n display: flex;\n align-items: center;\n background-color: white;\n border: 1px solid var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-md);\n transition: all var(--vtx-transition-base);\n}\n\n.vtx-input-container:focus-within {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 0;\n border-color: var(--vtx-color-primary-500);\n}\n\n.vtx-input-container--error {\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-input-container--error:focus-within {\n outline-color: var(--vtx-color-error-600);\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-input-container--disabled {\n background-color: var(--vtx-color-neutral-100);\n cursor: not-allowed;\n}\n\n/* Sizes */\n.vtx-input-container--small {\n min-height: 32px;\n}\n\n.vtx-input-container--medium {\n min-height: 40px;\n}\n\n.vtx-input-container--large {\n min-height: 48px;\n}\n\n.vtx-input {\n flex: 1;\n width: 100%;\n min-width: 0;\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n color: var(--vtx-color-neutral-900);\n background: transparent;\n border: none;\n outline: none;\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n}\n\n.vtx-input::placeholder {\n color: var(--vtx-color-neutral-400);\n}\n\n.vtx-input:disabled {\n cursor: not-allowed;\n color: var(--vtx-color-neutral-500);\n}\n\n.vtx-input-container--small .vtx-input {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-input-container--large .vtx-input {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n font-size: var(--vtx-font-size-lg);\n}\n\n/* Icons */\n.vtx-input-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--vtx-color-neutral-500);\n pointer-events: none;\n}\n\n.vtx-input-icon--left {\n padding-left: var(--vtx-spacing-3);\n}\n\n.vtx-input-icon--right {\n padding-right: var(--vtx-spacing-3);\n}\n\n.vtx-input-container--with-left-icon .vtx-input {\n padding-left: var(--vtx-spacing-1);\n}\n\n.vtx-input-container--with-right-icon .vtx-input {\n padding-right: var(--vtx-spacing-1);\n}\n\n/* Helper and error text */\n.vtx-input-helper,\n.vtx-input-error {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n margin: 0;\n}\n\n.vtx-input-helper {\n color: var(--vtx-color-neutral-600);\n}\n\n.vtx-input-error {\n color: var(--vtx-color-error-600);\n}\n");const D=o.forwardRef(({label:t,helperText:e,error:o,success:a,size:i="medium",fullWidth:l=!1,leftIcon:c,rightIcon:v,clearable:s=!1,onClear:d,showCount:x=!1,className:p="",wrapperClassName:m="",labelClassName:u="",inputClassName:h="",prefix:g,suffix:f,id:b,disabled:w=!1,required:y=!1,value:k,maxLength:z,...N},C)=>{const S=I("input"),_=b||S,T=`${_}-helper`,$=`${_}-error`,L=`${_}-success`,M=Boolean(o),j=Boolean(a)&&!M,B=s&&k&&String(k).length>0&&!w,A=[e&&!o&&!a&&T,o&&$,a&&L].filter(Boolean).join(" "),E=["vtx-input-wrapper",l&&"vtx-input-wrapper--full-width",m].filter(Boolean).join(" "),D=["vtx-input-container",`vtx-input-container--${i}`,M&&"vtx-input-container--error",j&&"vtx-input-container--success",w&&"vtx-input-container--disabled",(c||g)&&"vtx-input-container--with-left-element",(v||f||B)&&"vtx-input-container--with-right-element",p].filter(Boolean).join(" "),O=k?String(k).length:0,R=x&&z;return r("div",{className:E,children:[t&&r("label",{htmlFor:_,className:`vtx-input-label ${u}`.trim(),children:[t,y&&r("span",{className:"vtx-input-label__required","aria-label":"required",children:[" ","*"]})]}),r("div",{className:D,children:[c&&n("span",{className:"vtx-input-icon vtx-input-icon--left","aria-hidden":"true",children:c}),g&&n("span",{className:"vtx-input-prefix","aria-hidden":"true",children:g}),n("input",{ref:C,id:_,className:`vtx-input ${h}`.trim(),disabled:w,required:y,value:k,maxLength:z,"aria-invalid":M,"aria-describedby":A||void 0,...N}),f&&n("span",{className:"vtx-input-suffix","aria-hidden":"true",children:f}),B&&n("button",{type:"button",className:"vtx-input-clear",onClick:()=>{null==d||d()},"aria-label":"Clear input",tabIndex:-1,children:n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),v&&!B&&n("span",{className:"vtx-input-icon vtx-input-icon--right","aria-hidden":"true",children:v})]}),e&&!o&&!a&&n("p",{id:T,className:"vtx-input-helper",children:e}),o&&n("p",{id:$,className:"vtx-input-error",role:"alert",children:o}),a&&n("p",{id:L,className:"vtx-input-success",role:"status",children:a}),R&&r("p",{className:"vtx-input-counter","aria-live":"polite",children:[O," / ",z]})]})});D.displayName="Input";S("/* Chip Component Styles */\r\n\r\n.vtx-chip {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.375rem;\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 16px;\r\n font-family: var(--vtx-font-family);\r\n font-size: 0.875rem;\r\n line-height: 1.25rem;\r\n font-weight: 500;\r\n border: 1px solid transparent;\r\n transition: all 0.2s ease;\r\n cursor: default;\r\n white-space: nowrap;\r\n max-width: 100%;\r\n}\r\n\r\n/* Sizes */\r\n.vtx-chip--sm {\r\n padding: 0.125rem 0.5rem;\r\n font-size: 0.75rem;\r\n line-height: 1rem;\r\n gap: 0.25rem;\r\n border-radius: 12px;\r\n}\r\n\r\n.vtx-chip--md {\r\n padding: 0.25rem 0.75rem;\r\n font-size: 0.875rem;\r\n line-height: 1.25rem;\r\n gap: 0.375rem;\r\n border-radius: 16px;\r\n}\r\n\r\n.vtx-chip--lg {\r\n padding: 0.375rem 1rem;\r\n font-size: 1rem;\r\n line-height: 1.5rem;\r\n gap: 0.5rem;\r\n border-radius: 20px;\r\n}\r\n\r\n/* Variants */\r\n.vtx-chip--filled {\r\n background-color: var(--vtx-color-primary-600);\r\n color: white;\r\n border-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-chip--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-primary-600);\r\n border-color: var(--vtx-color-border);\r\n}\r\n\r\n.vtx-chip--light {\r\n background-color: var(--vtx-color-primary-light, rgba(59, 130, 246, 0.1));\r\n color: var(--vtx-color-primary-600);\r\n border-color: transparent;\r\n}\r\n\r\n/* Color Variants */\r\n.vtx-chip--primary.vtx-chip--filled {\r\n background-color: var(--vtx-color-primary-600);\r\n border-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-chip--primary.vtx-chip--outlined {\r\n color: var(--vtx-color-primary-600);\r\n border-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-chip--primary.vtx-chip--light {\r\n background-color: var(--vtx-color-primary-light, rgba(59, 130, 246, 0.1));\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-chip--success.vtx-chip--filled {\r\n background-color: var(--vtx-color-success-600);\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-chip--success.vtx-chip--outlined {\r\n color: var(--vtx-color-success-600);\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-chip--success.vtx-chip--light {\r\n background-color: var(--vtx-color-success-light, rgba(34, 197, 94, 0.1));\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-chip--error.vtx-chip--filled {\r\n background-color: var(--vtx-color-error-600);\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-chip--error.vtx-chip--outlined {\r\n color: var(--vtx-color-error-600);\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-chip--error.vtx-chip--light {\r\n background-color: var(--vtx-color-error-light, rgba(239, 68, 68, 0.1));\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-chip--warning.vtx-chip--filled {\r\n background-color: var(--vtx-color-warning-600);\r\n border-color: var(--vtx-color-warning-600);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-chip--warning.vtx-chip--outlined {\r\n color: var(--vtx-color-warning-600);\r\n border-color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-chip--warning.vtx-chip--light {\r\n background-color: var(--vtx-color-warning-light, rgba(251, 191, 36, 0.1));\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-chip--info.vtx-chip--filled {\r\n background-color: var(--vtx-color-info-600);\r\n border-color: var(--vtx-color-info-600);\r\n}\r\n\r\n.vtx-chip--info.vtx-chip--outlined {\r\n color: var(--vtx-color-info-600);\r\n border-color: var(--vtx-color-info-600);\r\n}\r\n\r\n.vtx-chip--info.vtx-chip--light {\r\n background-color: var(--vtx-color-info-light, rgba(6, 182, 212, 0.1));\r\n color: var(--vtx-color-info-600);\r\n}\r\n\r\n.vtx-chip--default.vtx-chip--filled {\r\n background-color: var(--vtx-color-neutral-600);\r\n border-color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-chip--default.vtx-chip--outlined {\r\n color: var(--vtx-color-neutral-900);\r\n border-color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n.vtx-chip--default.vtx-chip--light {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n/* Label */\r\n.vtx-chip__label {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n/* Avatar */\r\n.vtx-chip__avatar {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n flex-shrink: 0;\r\n margin-left: -0.25rem;\r\n}\r\n\r\n.vtx-chip--small .vtx-chip__avatar {\r\n width: 1rem;\r\n height: 1rem;\r\n margin-left: -0.125rem;\r\n}\r\n\r\n.vtx-chip--large .vtx-chip__avatar {\r\n width: 2rem;\r\n height: 2rem;\r\n margin-left: -0.375rem;\r\n}\r\n\r\n/* Icon */\r\n.vtx-chip__icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-chip--small .vtx-chip__icon svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.vtx-chip--medium .vtx-chip__icon svg {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.vtx-chip--large .vtx-chip__icon svg {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n/* Delete Button */\r\n.vtx-chip__delete {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n margin: 0;\r\n margin-right: -0.25rem;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n color: inherit;\r\n opacity: 0.6;\r\n transition:\r\n opacity 0.2s ease,\r\n transform 0.15s ease;\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-chip--small .vtx-chip__delete {\r\n margin-right: -0.125rem;\r\n}\r\n\r\n.vtx-chip--large .vtx-chip__delete {\r\n margin-right: -0.375rem;\r\n}\r\n\r\n.vtx-chip__delete:hover {\r\n opacity: 1;\r\n transform: scale(1.1);\r\n}\r\n\r\n.vtx-chip__delete:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n.vtx-chip__delete:focus-visible {\r\n outline: 2px solid currentColor;\r\n outline-offset: 2px;\r\n opacity: 1;\r\n}\r\n\r\n.vtx-chip--small .vtx-chip__delete svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.vtx-chip--medium .vtx-chip__delete svg {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.vtx-chip--large .vtx-chip__delete svg {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n/* Clickable */\r\n.vtx-chip--clickable {\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-chip--clickable:hover {\r\n opacity: 0.85;\r\n transform: translateY(-1px);\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-chip--clickable:active {\r\n transform: translateY(0);\r\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-chip--clickable:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-600);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Disabled */\r\n.vtx-chip--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n/* Dark mode support */\r\n@media (prefers-color-scheme: dark) {\r\n .vtx-chip--outlined {\r\n border-color: var(--vtx-color-neutral-700);\r\n }\r\n\r\n .vtx-chip--default.vtx-chip--light {\r\n background-color: var(--vtx-color-neutral-700);\r\n color: var(--vtx-color-neutral-50);\r\n }\r\n}\r\n");const O=o.forwardRef(({label:t,size:e="md",variant:o="filled",color:a="default",icon:i,avatar:l,onDelete:c,onClick:v,disabled:s=!1,className:d="","aria-label":x,"data-testid":p},m)=>{const u=["vtx-chip",`vtx-chip--${e}`,`vtx-chip--${o}`,`vtx-chip--${a}`,v&&!s&&"vtx-chip--clickable",s&&"vtx-chip--disabled",d].filter(Boolean).join(" ");return r("div",{ref:m,className:u,onClick:n=>{!s&&v&&v(n)},onKeyDown:n=>{s||!v||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),v(n))},role:v?"button":void 0,tabIndex:v&&!s?0:void 0,"aria-label":x||t,"aria-disabled":s,"data-testid":p,children:[l&&n("img",{src:l,alt:"",className:"vtx-chip__avatar","aria-hidden":"true"}),i&&!l&&n("span",{className:"vtx-chip__icon","aria-hidden":"true",children:i}),n("span",{className:"vtx-chip__label",children:t}),c&&n("button",{type:"button",className:"vtx-chip__delete",onClick:n=>{n.stopPropagation(),!s&&c&&c(n)},onKeyDown:n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),n.stopPropagation(),!s&&c&&c(n))},disabled:s,"aria-label":`Remove ${t}`,tabIndex:-1,children:n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})});O.displayName="Chip";S("/* MultiSelect Component Styles */\r\n\r\n.vtx-multiselect-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.375rem;\r\n font-family: var(--vtx-font-family);\r\n}\r\n\r\n.vtx-multiselect-wrapper--full-width {\r\n width: 100%;\r\n}\r\n\r\n/* Label */\r\n.vtx-multiselect-label {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-medium);\r\n color: var(--vtx-color-neutral-700);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-multiselect-label__required {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Container */\r\n.vtx-multiselect-container {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n background-color: white;\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-multiselect-container:focus-within {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 0;\r\n border-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n/* Sizes */\r\n.vtx-multiselect-container--sm {\r\n min-height: 2rem;\r\n}\r\n\r\n.vtx-multiselect-container--md {\r\n min-height: 2.5rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg {\r\n min-height: 3rem;\r\n}\r\n\r\n/* States */\r\n.vtx-multiselect-container--error {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-multiselect-container--error:focus-within {\r\n outline-color: var(--vtx-color-error-600);\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-multiselect-container--success {\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-multiselect-container--success:focus-within {\r\n outline-color: var(--vtx-color-success-600);\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-multiselect-container--disabled {\r\n background-color: var(--vtx-color-neutral-100);\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-multiselect-container--open {\r\n border-bottom-left-radius: 0;\r\n border-bottom-right-radius: 0;\r\n}\r\n\r\n/* Input Area */\r\n.vtx-multiselect-input-area {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 0.375rem;\r\n padding: 0.5rem 2.5rem 0.5rem 0.75rem;\r\n min-height: inherit;\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-multiselect-container--sm .vtx-multiselect-input-area {\r\n padding: 0.25rem 2rem 0.25rem 0.5rem;\r\n gap: 0.25rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg .vtx-multiselect-input-area {\r\n padding: 0.625rem 3rem 0.625rem 1rem;\r\n gap: 0.5rem;\r\n}\r\n\r\n.vtx-multiselect-container--disabled .vtx-multiselect-input-area {\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Chips Container */\r\n.vtx-multiselect-chips {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.375rem;\r\n align-items: center;\r\n}\r\n\r\n.vtx-multiselect-container--sm .vtx-multiselect-chips {\r\n gap: 0.25rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg .vtx-multiselect-chips {\r\n gap: 0.5rem;\r\n}\r\n\r\n/* Placeholder */\r\n.vtx-multiselect-placeholder {\r\n color: var(--vtx-color-neutral-500);\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n user-select: none;\r\n}\r\n\r\n.vtx-multiselect-container--sm .vtx-multiselect-placeholder {\r\n font-size: 0.8125rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg .vtx-multiselect-placeholder {\r\n font-size: 1rem;\r\n}\r\n\r\n/* Icon */\r\n.vtx-multiselect-icon {\r\n position: absolute;\r\n right: var(--vtx-spacing-3);\r\n top: 50%;\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n color: var(--vtx-color-neutral-500);\r\n transition: transform var(--vtx-transition-base);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-multiselect-container--sm .vtx-multiselect-icon {\r\n right: 0.5rem;\r\n}\r\n\r\n.vtx-multiselect-container--lg .vtx-multiselect-icon {\r\n right: 1rem;\r\n}\r\n\r\n.vtx-multiselect-container--open .vtx-multiselect-icon {\r\n transform: translateY(-50%) rotate(180deg);\r\n}\r\n\r\n/* Dropdown */\r\n.vtx-multiselect-dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: -1px;\r\n right: -1px;\r\n max-height: 18rem;\r\n overflow-y: auto;\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-primary-500);\r\n border-top: none;\r\n border-bottom-left-radius: var(--vtx-radius-md);\r\n border-bottom-right-radius: var(--vtx-radius-md);\r\n box-shadow: var(--vtx-shadow-md);\r\n z-index: var(--vtx-z-index-dropdown);\r\n}\r\n\r\n/* Search Input */\r\n.vtx-multiselect-search {\r\n position: sticky;\r\n top: 0;\r\n padding: var(--vtx-spacing-3);\r\n background-color: white;\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n z-index: 1;\r\n}\r\n\r\n.vtx-multiselect-search input {\r\n width: 100%;\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n font-size: var(--vtx-font-size-sm);\r\n font-family: var(--vtx-font-family-sans);\r\n outline: none;\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-multiselect-search input:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 0;\r\n border-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n/* Options List */\r\n.vtx-multiselect-options {\r\n padding: 0.25rem;\r\n}\r\n\r\n/* Option Group */\r\n.vtx-multiselect-optgroup {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n color: var(--vtx-color-neutral-600);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n margin-top: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-multiselect-optgroup:first-child {\r\n margin-top: 0;\r\n}\r\n\r\n/* Option Item */\r\n.vtx-multiselect-option {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3);\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n cursor: pointer;\r\n border-radius: var(--vtx-radius-md);\r\n transition: all var(--vtx-transition-fast);\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-900);\r\n user-select: none;\r\n}\r\n\r\n.vtx-multiselect-option:hover {\r\n background-color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n.vtx-multiselect-option:active {\r\n background-color: var(--vtx-color-neutral-200);\r\n}\r\n\r\n.vtx-multiselect-option--selected {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-700);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n.vtx-multiselect-option--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n/* Checkbox Style (Style 1) */\r\n.vtx-multiselect-checkbox {\r\n width: 1.125rem;\r\n height: 1.125rem;\r\n border: 2px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-base);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all var(--vtx-transition-fast);\r\n background-color: white;\r\n}\r\n\r\n.vtx-multiselect-option:hover .vtx-multiselect-checkbox {\r\n border-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-multiselect-checkbox--checked {\r\n background-color: var(--vtx-color-primary-500);\r\n border-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-multiselect-checkbox svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n color: white;\r\n opacity: 0;\r\n transform: scale(0.8);\r\n transition: all var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-multiselect-checkbox--checked svg {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n/* Checkmark Style (Style 2) */\r\n.vtx-multiselect-checkmark {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-left: auto;\r\n}\r\n\r\n.vtx-multiselect-checkmark svg {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n color: var(--vtx-color-primary-600);\r\n opacity: 0;\r\n transform: scale(0.5);\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-multiselect-option--selected .vtx-multiselect-checkmark svg {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n/* Option Label */\r\n.vtx-multiselect-option-label {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Select All / Clear All */\r\n.vtx-multiselect-actions {\r\n display: flex;\r\n gap: var(--vtx-spacing-2);\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n background-color: var(--vtx-color-neutral-50);\r\n}\r\n\r\n.vtx-multiselect-action-button {\r\n font-size: var(--vtx-font-size-xs);\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n border: none;\r\n background: none;\r\n color: var(--vtx-color-primary-600);\r\n cursor: pointer;\r\n border-radius: var(--vtx-radius-base);\r\n font-weight: var(--vtx-font-weight-medium);\r\n transition: all var(--vtx-transition-fast);\r\n font-family: var(--vtx-font-family-sans);\r\n}\r\n\r\n.vtx-multiselect-action-button:hover {\r\n background-color: var(--vtx-color-primary-100);\r\n}\r\n\r\n.vtx-multiselect-action-button:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n/* Empty State */\r\n.vtx-multiselect-empty {\r\n padding: var(--vtx-spacing-8) var(--vtx-spacing-4);\r\n text-align: center;\r\n color: var(--vtx-color-neutral-500);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n/* Loading Spinner in Icon Area */\r\n.vtx-multiselect-icon-spinner {\r\n color: var(--vtx-multiselect-loader-color, var(--vtx-color-primary-500));\r\n animation: vtx-multiselect-spin var(--vtx-multiselect-loader-speed, 0.8s) linear infinite;\r\n}\r\n\r\n.vtx-multiselect-icon-spinner-track {\r\n opacity: var(--vtx-multiselect-loader-track-opacity, 0.25);\r\n}\r\n\r\n.vtx-multiselect-icon-spinner-path {\r\n opacity: var(--vtx-multiselect-loader-path-opacity, 1);\r\n}\r\n\r\n@keyframes vtx-multiselect-spin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Helper / Error / Success Text */\r\n.vtx-multiselect-helper {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-neutral-600);\r\n line-height: var(--vtx-line-height-normal);\r\n margin: 0;\r\n}\r\n\r\n.vtx-multiselect-error {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-error-600);\r\n line-height: var(--vtx-line-height-normal);\r\n margin: 0;\r\n}\r\n\r\n.vtx-multiselect-success {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-success-600);\r\n line-height: var(--vtx-line-height-normal);\r\n margin: 0;\r\n}\r\n\r\n/* Hidden Native Select for Form Integration */\r\n.vtx-multiselect-hidden-select {\r\n position: absolute;\r\n opacity: 0;\r\n pointer-events: none;\r\n width: 0;\r\n height: 0;\r\n}\r\n\r\n/* Scrollbar Styling */\r\n.vtx-multiselect-dropdown::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.vtx-multiselect-dropdown::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.vtx-multiselect-dropdown::-webkit-scrollbar-thumb {\r\n background: var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-base);\r\n}\r\n\r\n.vtx-multiselect-dropdown::-webkit-scrollbar-thumb:hover {\r\n background: var(--vtx-color-neutral-400);\r\n}\r\n");const R=o.forwardRef(({label:t,helperText:e,error:o,success:a,size:l,fullWidth:s=!1,options:d,value:x,defaultValue:p=[],placeholder:m="Select...",className:u="",grouped:h=!1,getOptionLabel:g="label",getOptionValue:f="value",getOptionDisabled:b="disabled",getOptionGroup:w="group",onChange:y,disabled:k=!1,required:z=!1,id:N,name:S,selectionStyle:_="checkbox",searchable:T=!1,showSelectAll:$=!1,maxChipsDisplay:L,chipColor:M="primary",chipVariant:j="light",loading:B=!1},A)=>{const{theme:E}=C(),D=I("multiselect"),R=N||D,W=`${R}-helper`,H=`${R}-error`,F=`${R}-success`,[V,Y]=v(!1),[P,X]=v(""),[q,G]=v(p),K=i(null),U=i(null),Z=void 0!==x?x:q,J=(n,r)=>"function"==typeof r?r(n):"object"==typeof n?n[r]:n,Q=Boolean(o),nn=Boolean(a)&&!Q,rn=[e&&!o&&!a&&W,o&&H,a&&F].filter(Boolean).join(" ");c(()=>{const n=n=>{K.current&&!K.current.contains(n.target)&&U.current&&!U.current.contains(n.target)&&(Y(!1),X(""))};if(V)return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[V]);const tn=n=>{if(k)return;const r=Z.includes(n)?Z.filter(r=>r!==n):[...Z,n];if(void 0===x&&G(r),y){const n=d.filter(n=>r.includes(J(n,f)));y(r,n)}},en=P?d.filter(n=>J(n,g).toLowerCase().includes(P.toLowerCase())):d,on=h?en.reduce((n,r)=>{const t=J(r,w)||"Other";return n[t]||(n[t]=[]),n[t].push(r),n},{}):{"":en},an=d.filter(n=>Z.includes(J(n,f))),ln=L?an.slice(0,L):an,cn=L?an.length-L:0,vn=["vtx-multiselect-wrapper",s&&"vtx-multiselect-wrapper--full-width",u].filter(Boolean).join(" "),sn=l||(null==E?void 0:E.defaultSize)||"md",dn=["vtx-multiselect-container",`vtx-multiselect-container--${sn}`,Q&&"vtx-multiselect-container--error",nn&&"vtx-multiselect-container--success",k&&"vtx-multiselect-container--disabled",V&&"vtx-multiselect-container--open"].filter(Boolean).join(" "),xn=sn;return r("div",{className:vn,ref:A,children:[t&&r("label",{htmlFor:R,className:"vtx-multiselect-label",children:[t,z&&r("span",{className:"vtx-multiselect-label__required","aria-label":"required",children:[" ","*"]})]}),r("div",{ref:K,className:dn,"aria-expanded":V,"aria-haspopup":"listbox","aria-labelledby":t?`${R}-label`:void 0,"aria-describedby":rn||void 0,"aria-disabled":k,children:[n("div",{className:"vtx-multiselect-input-area",onClick:()=>!k&&Y(!V),role:"button",tabIndex:k?-1:0,onKeyDown:n=>{k||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),Y(!V))},children:0===an.length?n("span",{className:"vtx-multiselect-placeholder",children:m}):r("div",{className:"vtx-multiselect-chips",children:[ln.map(r=>{const t=J(r,f),e=J(r,g);return n(O,{label:e,size:xn,color:M,variant:j,onDelete:n=>{n.stopPropagation(),(n=>{if(k)return;const r=Z.filter(r=>r!==n);if(void 0===x&&G(r),y){const n=d.filter(n=>r.includes(J(n,f)));y(r,n)}})(t)}},t)}),cn>0&&n(O,{label:`+${cn} more`,size:xn,color:"default",variant:"outlined"})]})}),n("span",{className:"vtx-multiselect-icon","aria-hidden":"true",children:B?r("svg",{className:"vtx-multiselect-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[n("circle",{className:"vtx-multiselect-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),n("path",{className:"vtx-multiselect-icon-spinner-path",fill:"currentColor",d:"M8 2C4.686 2 2 4.686 2 8h2c0-2.21 1.79-4 4-4V2z"})]}):n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),V&&r("div",{ref:U,className:"vtx-multiselect-dropdown",role:"listbox",children:[T&&n("div",{className:"vtx-multiselect-search",children:n("input",{type:"text",placeholder:"Search...",value:P,onChange:n=>X(n.target.value),onClick:n=>n.stopPropagation()})}),$&&r("div",{className:"vtx-multiselect-actions",children:[n("button",{type:"button",className:"vtx-multiselect-action-button",onClick:n=>{n.stopPropagation(),(()=>{const n=d.filter(n=>!J(n,b)).map(n=>J(n,f));void 0===x&&G(n),y&&y(n,d.filter(n=>!J(n,b)))})()},children:"Select All"}),n("button",{type:"button",className:"vtx-multiselect-action-button",onClick:n=>{n.stopPropagation(),void 0===x&&G([]),y&&y([],[])},children:"Clear All"})]}),n("div",{className:"vtx-multiselect-options",children:0===en.length?n("div",{className:"vtx-multiselect-empty",children:"No options found"}):Object.entries(on).map(([t,e])=>r("div",{children:[h&&t&&n("div",{className:"vtx-multiselect-optgroup",children:t}),e.map(t=>{const e=J(t,f),o=J(t,g),a=J(t,b),i=Z.includes(e),l=["vtx-multiselect-option",i&&"vtx-multiselect-option--selected",a&&"vtx-multiselect-option--disabled"].filter(Boolean).join(" ");return r("div",{className:l,onClick:()=>!a&&tn(e),role:"option","aria-selected":i,"aria-disabled":a,tabIndex:a?-1:0,onKeyDown:n=>{a||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),tn(e))},children:["checkbox"===_&&n("div",{className:"vtx-multiselect-checkbox "+(i?"vtx-multiselect-checkbox--checked":""),children:n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M3 8L6.5 11.5L13 5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),n("span",{className:"vtx-multiselect-option-label",children:o}),"checkmark"===_&&n("div",{className:"vtx-multiselect-checkmark",children:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M4 10L8 14L16 6",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]},e)})]},t))})]})]}),S&&n("select",{multiple:!0,name:S,value:Z.map(String),onChange:()=>{},className:"vtx-multiselect-hidden-select",required:z,disabled:k,tabIndex:-1,"aria-hidden":"true",children:d.map(r=>{const t=J(r,f);return n("option",{value:String(t),children:J(r,g)},t)})}),e&&!o&&!a&&n("p",{id:W,className:"vtx-multiselect-helper",children:e}),o&&n("p",{id:H,className:"vtx-multiselect-error",role:"alert",children:o}),a&&n("p",{id:F,className:"vtx-multiselect-success",role:"status",children:a})]})});R.displayName="MultiSelect";S("/* Radio Base Styles */\n.vtx-radio {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-1);\n}\n\n/* Label Container */\n.vtx-radio-label {\n display: inline-flex;\n align-items: center;\n gap: var(--vtx-spacing-2);\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n/* Wrapper for input and visual radio */\n.vtx-radio-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n/* Hidden input */\n.vtx-radio-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n margin: 0;\n padding: 0;\n pointer-events: none;\n}\n\n/* Visual radio circle */\n.vtx-radio-circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--vtx-radio-size, 20px);\n height: var(--vtx-radio-size, 20px);\n border: var(--vtx-radio-border-width, 2px) solid var(--vtx-color-neutral-300);\n border-radius: 50%;\n background-color: white;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n box-sizing: border-box;\n}\n\n/* Inner dot */\n.vtx-radio-dot {\n width: 50%;\n height: 50%;\n border-radius: 50%;\n background-color: white;\n opacity: 0;\n transform: scale(0);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Checked state */\n.vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-radio-color, var(--vtx-color-primary-600));\n border-color: var(--vtx-radio-color, var(--vtx-color-primary-600));\n}\n\n.vtx-radio-input:checked + .vtx-radio-circle .vtx-radio-dot {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Hover state */\n.vtx-radio-label:hover .vtx-radio-circle {\n border-color: var(--vtx-color-neutral-400);\n}\n\n.vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-radio-hover-color, var(--vtx-color-primary-700));\n border-color: var(--vtx-radio-hover-color, var(--vtx-color-primary-700));\n}\n\n/* Focus state */\n.vtx-radio-input:focus-visible + .vtx-radio-circle {\n outline: 2px solid var(--vtx-radio-color, var(--vtx-color-primary-600));\n outline-offset: 2px;\n}\n\n/* Label text */\n.vtx-radio-label-text {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-900);\n}\n\n/* Disabled state */\n.vtx-radio--disabled .vtx-radio-label {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.vtx-radio--disabled .vtx-radio-circle {\n background-color: var(--vtx-color-neutral-100);\n border-color: var(--vtx-color-neutral-300);\n}\n\n.vtx-radio--disabled .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-neutral-400);\n border-color: var(--vtx-color-neutral-400);\n}\n\n.vtx-radio--disabled .vtx-radio-label:hover .vtx-radio-circle,\n.vtx-radio--disabled .vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-neutral-100);\n border-color: var(--vtx-color-neutral-300);\n}\n\n.vtx-radio--disabled .vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-neutral-400);\n border-color: var(--vtx-color-neutral-400);\n}\n\n.vtx-radio--disabled .vtx-radio-label-text {\n color: var(--vtx-color-neutral-500);\n}\n\n/* Error state */\n.vtx-radio--error .vtx-radio-circle {\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-radio--error .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-error-600);\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-radio--error .vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\n background-color: var(--vtx-color-error-700);\n border-color: var(--vtx-color-error-700);\n}\n\n/* Helper text */\n.vtx-radio-helper-text {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-600);\n margin-left: calc(var(--vtx-radio-size, 20px) + var(--vtx-spacing-2));\n}\n\n.vtx-radio--error .vtx-radio-helper-text {\n color: var(--vtx-color-error-600);\n}\n\n/* Size variants */\n.vtx-radio--small {\n --vtx-radio-size: 16px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--small .vtx-radio-label-text {\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-radio--medium {\n --vtx-radio-size: 20px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--large {\n --vtx-radio-size: 24px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--large .vtx-radio-label-text {\n font-size: var(--vtx-font-size-lg);\n}\n\n/* Variants */\n.vtx-radio--primary {\n --vtx-radio-color: var(--vtx-color-primary-600);\n --vtx-radio-hover-color: var(--vtx-color-primary-700);\n}\n\n.vtx-radio--secondary {\n --vtx-radio-color: var(--vtx-color-neutral-600);\n --vtx-radio-hover-color: var(--vtx-color-neutral-700);\n}\n\n.vtx-radio--success {\n --vtx-radio-color: var(--vtx-color-success-600);\n --vtx-radio-hover-color: var(--vtx-color-success-700);\n}\n\n.vtx-radio--error {\n --vtx-radio-color: var(--vtx-color-error-600);\n --vtx-radio-hover-color: var(--vtx-color-error-700);\n}\n\n.vtx-radio--warning {\n --vtx-radio-color: var(--vtx-color-warning-600);\n --vtx-radio-hover-color: var(--vtx-color-warning-700);\n}\n\n.vtx-radio--info {\n --vtx-radio-color: var(--vtx-color-info-600);\n --vtx-radio-hover-color: var(--vtx-color-info-700);\n}\n");const W=o.forwardRef(({checked:t,disabled:e=!1,label:o,size:i="medium",variant:l="primary",error:c=!1,helperText:v,onChange:s,className:d="",inputClassName:x="",id:p,...m},u)=>{const h=a(),g=p||h,f=v?`${g}-helper-text`:void 0,b=["vtx-radio",`vtx-radio--${i}`,`vtx-radio--${l}`,e&&"vtx-radio--disabled",c&&"vtx-radio--error",d].filter(Boolean).join(" "),w=["vtx-radio-input",x].filter(Boolean).join(" "),y=r("div",{className:"vtx-radio-wrapper",children:[n("input",{ref:u,type:"radio",id:g,className:w,checked:t,disabled:e,onChange:s,"aria-describedby":f,...m}),n("span",{className:"vtx-radio-circle",children:n("span",{className:"vtx-radio-dot"})})]});return r("div",o?{className:b,children:[r("label",{htmlFor:g,className:"vtx-radio-label",children:[y,n("span",{className:"vtx-radio-label-text",children:o})]}),v&&n("span",{id:f,className:"vtx-radio-helper-text",children:v})]}:{className:b,children:[y,v&&n("span",{id:f,className:"vtx-radio-helper-text",children:v})]})});W.displayName="Radio";S("/* RadioGroup Base Styles */\n.vtx-radio-group {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-2);\n}\n\n/* Group Label */\n.vtx-radio-group-label {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n font-weight: var(--vtx-font-weight-medium);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-900);\n margin-bottom: var(--vtx-spacing-1);\n}\n\n.vtx-radio-group--disabled .vtx-radio-group-label {\n color: var(--vtx-color-neutral-500);\n}\n\n.vtx-radio-group--error .vtx-radio-group-label {\n color: var(--vtx-color-error-600);\n}\n\n/* Options Container */\n.vtx-radio-group-options {\n display: flex;\n gap: var(--vtx-spacing-3);\n}\n\n.vtx-radio-group--vertical .vtx-radio-group-options {\n flex-direction: column;\n}\n\n.vtx-radio-group--horizontal .vtx-radio-group-options {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n/* Helper Text */\n.vtx-radio-group-helper-text {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-600);\n margin-top: var(--vtx-spacing-1);\n}\n\n.vtx-radio-group--error .vtx-radio-group-helper-text {\n color: var(--vtx-color-error-600);\n}\n");const H=o.forwardRef(({name:t,label:e,options:o,value:a,defaultValue:i,onChange:l,disabled:c=!1,error:s=!1,helperText:d,orientation:x="vertical",size:p="medium",variant:m="primary",className:u="",...h},g)=>{const[f,b]=v(i),w=void 0!==a,y=w?a:f,k=["vtx-radio-group",`vtx-radio-group--${x}`,s&&"vtx-radio-group--error",c&&"vtx-radio-group--disabled",u].filter(Boolean).join(" ");return r("div",{ref:g,className:k,role:"radiogroup","aria-label":"string"==typeof e?e:void 0,...h,children:[e&&n("div",{className:"vtx-radio-group-label",children:e}),n("div",{className:"vtx-radio-group-options",children:o.map(r=>{const e=y===r.value,o=c||r.disabled;return n(W,{name:t,value:r.value,label:r.label,checked:e,disabled:o,error:s,size:p,variant:m,onChange:()=>{return n=r.value,w||b(n),void(null==l||l(n));var n}},r.value)})}),d&&n("div",{className:"vtx-radio-group-helper-text",children:d})]})});H.displayName="RadioGroup";S(".vtx-select-wrapper {\n display: inline-flex;\n flex-direction: column;\n gap: var(--vtx-spacing-1);\n}\n\n.vtx-select-wrapper--full-width {\n width: 100%;\n}\n\n.vtx-select-label {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n color: var(--vtx-color-neutral-700);\n line-height: var(--vtx-line-height-tight);\n}\n\n.vtx-select-label__required {\n color: var(--vtx-color-error-600);\n margin-left: var(--vtx-spacing-1);\n}\n\n.vtx-select-container {\n position: relative;\n display: flex;\n align-items: center;\n background-color: white;\n border: 1px solid var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-md);\n transition: all var(--vtx-transition-base);\n}\n\n.vtx-select-container:focus-within {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 0;\n border-color: var(--vtx-color-primary-500);\n}\n\n.vtx-select-container--error {\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-select-container--error:focus-within {\n outline-color: var(--vtx-color-error-600);\n border-color: var(--vtx-color-error-600);\n}\n\n.vtx-select-container--disabled {\n background-color: var(--vtx-color-neutral-100);\n cursor: not-allowed;\n}\n\n/* Sizes */\n.vtx-select-container--small {\n min-height: 32px;\n}\n\n.vtx-select-container--medium {\n min-height: 40px;\n}\n\n.vtx-select-container--large {\n min-height: 48px;\n}\n\n.vtx-select {\n flex: 1;\n width: 100%;\n min-width: 0;\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-base);\n color: var(--vtx-color-neutral-900);\n background: transparent;\n border: none;\n outline: none;\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n padding-right: var(--vtx-spacing-8);\n cursor: pointer;\n appearance: none;\n}\n\n.vtx-select:disabled {\n cursor: not-allowed;\n color: var(--vtx-color-neutral-500);\n}\n\n.vtx-select-container--small .vtx-select {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n padding-right: var(--vtx-spacing-6);\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-select-container--large .vtx-select {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n padding-right: var(--vtx-spacing-10);\n font-size: var(--vtx-font-size-lg);\n}\n\n/* Dropdown icon */\n.vtx-select-icon {\n position: absolute;\n right: var(--vtx-spacing-3);\n display: inline-flex;\n align-items: center;\n color: var(--vtx-color-neutral-500);\n pointer-events: none;\n}\n\n.vtx-select-container--disabled .vtx-select-icon {\n color: var(--vtx-color-neutral-400);\n}\n\n/* Loading Spinner in Icon Area */\n.vtx-select-icon-spinner {\n color: var(--vtx-select-loader-color, var(--vtx-color-primary-500));\n animation: vtx-select-spin var(--vtx-select-loader-speed, 0.8s) linear infinite;\n}\n\n.vtx-select-icon-spinner-track {\n opacity: var(--vtx-select-loader-track-opacity, 0.25);\n}\n\n.vtx-select-icon-spinner-path {\n opacity: var(--vtx-select-loader-path-opacity, 1);\n}\n\n@keyframes vtx-select-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Helper and error text */\n.vtx-select-helper,\n.vtx-select-error {\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n margin: 0;\n}\n\n.vtx-select-helper {\n color: var(--vtx-color-neutral-600);\n}\n\n.vtx-select-error {\n color: var(--vtx-color-error-600);\n}\n");const F=o.forwardRef(({label:t,helperText:e,error:o,success:a,size:i="medium",fullWidth:l=!1,options:c,placeholder:v,className:s="",wrapperClassName:d="",id:x,disabled:p=!1,required:m=!1,grouped:u=!1,getOptionLabel:h="label",getOptionValue:g="value",getOptionDisabled:f="disabled",getOptionGroup:b="group",onSelectChange:w,onChange:y,loading:k=!1,...z},N)=>{const C=I("select"),S=x||C,_=`${S}-helper`,T=`${S}-error`,$=`${S}-success`,L=(n,r)=>"function"==typeof r?r(n):"object"==typeof n?n[r]:n,M=Boolean(o),j=Boolean(a)&&!M,B=[e&&!o&&!a&&_,o&&T,a&&$].filter(Boolean).join(" "),A=["vtx-select-wrapper",l&&"vtx-select-wrapper--full-width",d].filter(Boolean).join(" "),E=["vtx-select-container",`vtx-select-container--${i}`,M&&"vtx-select-container--error",j&&"vtx-select-container--success",p&&"vtx-select-container--disabled",s].filter(Boolean).join(" ");return r("div",{className:A,children:[t&&r("label",{htmlFor:S,className:"vtx-select-label",children:[t,m&&r("span",{className:"vtx-select-label__required","aria-label":"required",children:[" ","*"]})]}),r("div",{className:E,children:[r("select",{ref:N,id:S,className:"vtx-select",disabled:p,required:m,"aria-invalid":M,"aria-describedby":B||void 0,onChange:n=>{if(null==y||y(n),w){const r=c.find(r=>String(L(r,g))===n.target.value);w(n.target.value,r)}},...z,children:[v&&n("option",{value:"",disabled:!0,children:v}),(()=>{if(!u)return c.map((r,t)=>{const e=L(r,g),o=L(r,h),a=L(r,f);return n("option",{value:e,disabled:a,children:o},e||t)});const r=c.reduce((n,r)=>{const t=L(r,b)||"Other";return n[t]||(n[t]=[]),n[t].push(r),n},{});return Object.entries(r).map(([r,t])=>n("optgroup",{label:r,children:t.map((r,t)=>{const e=L(r,g),o=L(r,h),a=L(r,f);return n("option",{value:e,disabled:a,children:o},e||t)})},r))})()]}),n("span",{className:"vtx-select-icon","aria-hidden":"true",children:k?r("svg",{className:"vtx-select-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[n("circle",{className:"vtx-select-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),n("path",{className:"vtx-select-icon-spinner-path",fill:"currentColor",d:"M8 2C4.686 2 2 4.686 2 8h2c0-2.21 1.79-4 4-4V2z"})]}):n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),e&&!o&&!a&&n("p",{id:_,className:"vtx-select-helper",children:e}),o&&n("p",{id:T,className:"vtx-select-error",role:"alert",children:o}),a&&n("p",{id:$,className:"vtx-select-success",role:"status",children:a})]})});F.displayName="Select";const V=o.forwardRef(({item:t,isOpen:e,onToggle:o,variant:a="default",size:l="md",showChevron:c=!0,chevronPosition:v="right",expandedIcon:s,collapsedIcon:d,iconType:x="chevron",loading:p=!1,disabled:m=!1,disableAnimations:u=!1},h)=>{const g=i(null),{id:f,header:b,children:w,disabled:y,className:k,loading:z,status:N="default",icon:C,dataTestId:S}=t,_=m||y,T=p||z,$=()=>{_||T||o()},L=()=>n("div",C?{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${S||f}-custom-icon`,children:e?C.expanded:C.collapsed}:"custom"===x&&s&&d?{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${S||f}-custom-icon`,children:e?s:d}:"plus-minus"===x?{className:"accordion-item-chevron accordion-item-chevron--plus-minus "+(e?"open":""),"data-testid":`${S||f}-plus-minus-icon`,children:n("svg",e?{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n("path",{d:"M4 8H12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})}:{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n("path",{d:"M8 4V12M4 8H12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}:{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${S||f}-chevron-icon`,children:n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})});return r("div",{ref:h,className:`\n accordion-item\n accordion-item--${a}\n accordion-item--${l}\n ${e?"accordion-item--open":""}\n ${_?"accordion-item--disabled":""}\n ${T?"accordion-item--loading":""}\n ${"default"!==N?`accordion-item--${N}`:""}\n ${k||""}\n `.trim(),"data-testid":S,"aria-expanded":e,"aria-disabled":_,"aria-busy":T,children:[r("div",{className:"accordion-item-header",role:"button",tabIndex:_||T?-1:0,"aria-expanded":e,"aria-controls":`accordion-content-${f}`,"aria-disabled":_,"aria-busy":T,"aria-describedby":"default"!==N?`accordion-status-${f}`:void 0,onClick:$,onKeyDown:n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),$())},"data-testid":`${S||f}-header`,children:["left"===v&&c&&L(),n("div",{className:"accordion-item-header-content",children:b}),"right"===v&&c&&L()]}),n("div",{id:`accordion-content-${f}`,className:"accordion-item-content "+(e?"accordion-item-content--open":""),role:"region","aria-labelledby":`accordion-header-${f}`,ref:g,style:{maxHeight:u?e?"none":"0":e?"500px":"0",transition:u?"none":void 0},"data-testid":`${S||f}-content`,children:r("div",{className:"accordion-item-body",children:["default"!==N&&n("div",{id:`accordion-status-${f}`,className:`accordion-status accordion-status--${N}`,"aria-live":"polite",children:r("span",{className:"visually-hidden",children:["Status: ",N]})}),w]})})]})});V.displayName="AccordionItem";S("/* =============================================================================\r\n * ACCORDION COMPONENT - VTX DESIGN SYSTEM\r\n * =============================================================================\r\n * \r\n * A modern, accessible accordion component that fully utilizes the VTX design \r\n * system tokens for consistent theming and beautiful visual states.\r\n * \r\n * Features:\r\n * - Complete VTX token integration\r\n * - Multiple visual variants (default, bordered, separated, flush)\r\n * - Responsive size variants (sm, md, lg)\r\n * - Enhanced hover, focus, and active states\r\n * - Dark mode support\r\n * - Accessibility features\r\n * - Smooth animations\r\n * ============================================================================= */\r\n\r\n.accordion {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n/* =============================================================================\r\n * VARIANT STYLES\r\n * ============================================================================= */\r\n\r\n/* Default Variant - Clean card-like appearance */\r\n.accordion--default {\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n border-radius: var(--vtx-radius-xl);\r\n overflow: hidden;\r\n box-shadow: var(--vtx-shadow-base);\r\n transition: box-shadow var(--vtx-transition-base);\r\n}\r\n\r\n.accordion--default:hover {\r\n box-shadow: var(--vtx-shadow-md);\r\n}\r\n\r\n.accordion--default.accordion--divider .accordion-item:not(:last-child) {\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n/* Bordered Variant - Individual cards with spacing */\r\n.accordion--bordered .accordion-item {\r\n background: white;\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n border-radius: var(--vtx-radius-lg);\r\n box-shadow: var(--vtx-shadow-sm);\r\n transition: \r\n box-shadow var(--vtx-transition-base),\r\n border-color var(--vtx-transition-base),\r\n transform var(--vtx-transition-fast);\r\n}\r\n\r\n.accordion--bordered .accordion-item:hover {\r\n border-color: var(--vtx-color-primary-300);\r\n box-shadow: var(--vtx-shadow-md);\r\n transform: translateY(-1px);\r\n}\r\n\r\n.accordion--bordered .accordion-item + .accordion-item {\r\n margin-top: var(--vtx-spacing-4);\r\n}\r\n\r\n/* Separated Variant - Floating cards with enhanced shadows */\r\n.accordion--separated .accordion-item {\r\n background: white;\r\n border: 1px solid var(--vtx-color-neutral-100);\r\n border-radius: var(--vtx-radius-xl);\r\n box-shadow: \r\n var(--vtx-shadow-base),\r\n 0 0 0 1px rgba(255, 255, 255, 0.8);\r\n transition: \r\n box-shadow var(--vtx-transition-base),\r\n transform var(--vtx-transition-base);\r\n backdrop-filter: blur(10px);\r\n}\r\n\r\n.accordion--separated .accordion-item:hover {\r\n box-shadow: \r\n var(--vtx-shadow-xl),\r\n 0 0 0 1px var(--vtx-color-primary-100);\r\n transform: translateY(-2px);\r\n}\r\n\r\n.accordion--separated .accordion-item + .accordion-item {\r\n margin-top: var(--vtx-spacing-6);\r\n}\r\n\r\n/* Flush Variant - Minimal design without borders */\r\n.accordion--flush {\r\n border: none;\r\n box-shadow: none;\r\n background: transparent;\r\n}\r\n\r\n.accordion--flush .accordion-item {\r\n background: transparent;\r\n border: none;\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n border-radius: 0;\r\n box-shadow: none;\r\n}\r\n\r\n.accordion--flush .accordion-item:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.accordion--flush .accordion-item:hover {\r\n background: var(--vtx-color-neutral-50);\r\n}\r\n\r\n/* Dividers for bordered variant */\r\n.accordion--bordered.accordion--divider .accordion-item:not(:last-child) {\r\n position: relative;\r\n margin-bottom: var(--accordion-divider-spacing, 12px);\r\n}\r\n\r\n.accordion--bordered.accordion--divider .accordion-item:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -10px;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background: var(--accordion-divider, var(--color-border, #e5e7eb));\r\n}\r\n\r\n.accordion--separated .accordion-item {\r\n background: var(--accordion-bg, var(--color-background, #ffffff));\r\n border-radius: var(--accordion-item-radius-lg, var(--radius-lg, 10px));\r\n box-shadow: var(\r\n --accordion-separated-shadow,\r\n var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06))\r\n );\r\n border: 1px solid var(--accordion-separated-border, var(--color-border-light, #f3f4f6));\r\n transition:\r\n transform var(--transition-duration, 0.2s) var(--transition-timing, ease),\r\n box-shadow var(--transition-duration, 0.2s) var(--transition-timing, ease);\r\n}\r\n\r\n.accordion--separated .accordion-item:hover {\r\n transform: translateY(-2px);\r\n box-shadow: var(\r\n --accordion-separated-shadow-hover,\r\n var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05))\r\n );\r\n}\r\n\r\n.accordion--separated .accordion-item + .accordion-item {\r\n margin-top: var(--accordion-spacing-lg, var(--spacing-4, 16px));\r\n}\r\n\r\n/* Dividers for separated variant */\r\n.accordion--separated.accordion--divider .accordion-item {\r\n position: relative;\r\n}\r\n\r\n.accordion--separated.accordion--divider .accordion-item:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -8px;\r\n left: 10%;\r\n right: 10%;\r\n height: 1px;\r\n background: var(\r\n --accordion-divider-gradient,\r\n linear-gradient(\r\n to right,\r\n transparent,\r\n var(--color-border-hover, #d1d5db) 20%,\r\n var(--color-border-hover, #d1d5db) 80%,\r\n transparent\r\n )\r\n );\r\n z-index: 1;\r\n}\r\n\r\n.accordion--flush {\r\n border: none;\r\n background: transparent;\r\n}\r\n\r\n.accordion--flush .accordion-item {\r\n border: none;\r\n border-radius: 0;\r\n background: transparent;\r\n border-bottom: 1px solid var(--accordion-divider, var(--color-border, #e5e7eb));\r\n}\r\n\r\n.accordion--flush .accordion-item:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n/* Accordion Item */\r\n.accordion-item {\r\n position: relative;\r\n background: inherit;\r\n transition: all var(--transition-duration, 0.2s) var(--transition-timing, ease);\r\n overflow: hidden;\r\n}\r\n\r\n.accordion-item--disabled {\r\n opacity: var(--accordion-disabled-opacity, 0.5);\r\n pointer-events: none;\r\n}\r\n\r\n.accordion-item--disabled .accordion-item-header {\r\n cursor: not-allowed;\r\n color: var(--accordion-disabled-color, var(--color-text-disabled, #9ca3af));\r\n}\r\n\r\n/* Accordion Item Header */\r\n.accordion-item-header {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n cursor: pointer;\r\n outline: none;\r\n transition: all var(--transition-duration, 0.2s) var(--transition-timing, ease);\r\n user-select: none;\r\n position: relative;\r\n border: none;\r\n background: transparent;\r\n text-align: left;\r\n}\r\n\r\n.accordion-item-header:hover:not(:disabled) {\r\n background: var(\r\n --accordion-header-hover-bg,\r\n var(--color-background-hover, linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%))\r\n );\r\n}\r\n\r\n.accordion-item-header:active {\r\n transform: translateY(1px);\r\n}\r\n\r\n.accordion-item-header:focus {\r\n outline: 2px solid var(--accordion-focus-color, var(--vtx-color-primary-500));\r\n outline-offset: -2px;\r\n border-radius: var(--accordion-focus-radius, var(--radius-sm, 4px));\r\n}\r\n\r\n.accordion-item-header:focus:not(:focus-visible) {\r\n outline: none;\r\n}\r\n\r\n.accordion-item-header-content {\r\n flex: 1;\r\n text-align: left;\r\n font-weight: var(--accordion-header-font-weight, var(--font-weight-semibold, 600));\r\n color: var(--accordion-header-color, var(--color-text-primary, #1f2937));\r\n line-height: var(--accordion-header-line-height, var(--line-height-normal, 1.5));\r\n}\r\n\r\n/* Chevron Icon */\r\n.accordion-item-chevron {\r\n transition: transform var(--accordion-icon-transition, var(--transition-duration-slow, 0.3s))\r\n var(--transition-timing-smooth, cubic-bezier(0.4, 0, 0.2, 1));\r\n color: var(--accordion-icon-color, var(--color-text-secondary, #6b7280));\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--accordion-icon-size, 24px);\r\n height: var(--accordion-icon-size, 24px);\r\n border-radius: var(--accordion-icon-radius, 50%);\r\n background: var(--accordion-icon-bg, rgba(59, 130, 246, 0.1));\r\n}\r\n\r\n.accordion-item-chevron.open {\r\n transform: rotate(180deg);\r\n background: var(--accordion-icon-bg-open, rgba(59, 130, 246, 0.2));\r\n color: var(--accordion-icon-color-open, var(--vtx-color-primary-500));\r\n}\r\n\r\n.accordion-item-header:hover .accordion-chevron {\r\n background: var(--accordion-icon-bg-hover, rgba(59, 130, 246, 0.15));\r\n color: var(--accordion-icon-color-hover, var(--vtx-color-primary-500));\r\n}\r\n\r\n/* Accordion Item Content */\r\n.accordion-item-content {\r\n overflow: hidden;\r\n transition: all var(--accordion-content-transition, var(--transition-duration-slow, 0.3s))\r\n var(--transition-timing-smooth, cubic-bezier(0.4, 0, 0.2, 1));\r\n max-height: 0;\r\n background: var(--accordion-content-bg, var(--color-background-alt, #fafbfc));\r\n border-top: 1px solid transparent;\r\n}\r\n\r\n.accordion-item-content--open {\r\n max-height: var(--accordion-content-max-height, 500px);\r\n border-top-color: var(--accordion-content-border, var(--color-border, #e5e7eb));\r\n}\r\n\r\n.accordion-item-body {\r\n color: var(--accordion-body-color, var(--color-text-secondary, #4b5563));\r\n line-height: var(--accordion-body-line-height, var(--line-height-relaxed, 1.7));\r\n font-size: var(--accordion-body-font-size, 0.95em);\r\n}\r\n\r\n/* =============================================================================\r\n * SIZE VARIANTS\r\n * ============================================================================= */\r\n\r\n/* Small Size */\r\n.accordion--sm .accordion-item-header {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-sm);\r\n min-height: 48px;\r\n}\r\n\r\n.accordion--sm .accordion-item-header-content {\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.accordion--sm .accordion-item-body {\r\n padding: var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-xs);\r\n}\r\n\r\n.accordion--sm .accordion-item-chevron {\r\n width: var(--vtx-spacing-5);\r\n height: var(--vtx-spacing-5);\r\n}\r\n\r\n.accordion--sm .accordion-item-chevron svg {\r\n width: var(--vtx-spacing-3);\r\n height: var(--vtx-spacing-3);\r\n}\r\n\r\n/* Medium Size (Default) */\r\n.accordion--md .accordion-item-header {\r\n padding: var(--vtx-spacing-4) var(--vtx-spacing-5);\r\n font-size: var(--vtx-font-size-base);\r\n min-height: 56px;\r\n}\r\n\r\n.accordion--md .accordion-item-header-content {\r\n font-size: var(--vtx-font-size-base);\r\n}\r\n\r\n.accordion--md .accordion-item-body {\r\n padding: var(--vtx-spacing-5);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.accordion--md .accordion-item-chevron {\r\n width: var(--vtx-spacing-6);\r\n height: var(--vtx-spacing-6);\r\n}\r\n\r\n.accordion--md .accordion-item-chevron svg {\r\n width: var(--vtx-spacing-4);\r\n height: var(--vtx-spacing-4);\r\n}\r\n\r\n/* Large Size */\r\n.accordion--lg .accordion-item-header {\r\n padding: var(--vtx-spacing-5) var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-lg);\r\n min-height: 64px;\r\n}\r\n\r\n.accordion--lg .accordion-item-header-content {\r\n font-size: var(--vtx-font-size-lg);\r\n font-weight: var(--vtx-font-weight-bold);\r\n}\r\n\r\n.accordion--lg .accordion-item-body {\r\n padding: var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-base);\r\n}\r\n\r\n.accordion--lg .accordion-item-chevron {\r\n width: var(--vtx-spacing-8);\r\n height: var(--vtx-spacing-8);\r\n}\r\n\r\n.accordion--lg .accordion-item-chevron svg {\r\n width: var(--vtx-spacing-5);\r\n height: var(--vtx-spacing-5);\r\n}\r\n\r\n/* =============================================================================\r\n * DARK MODE SUPPORT\r\n * ============================================================================= */\r\n\r\n[data-theme=\"dark\"] .accordion,\r\n@media (prefers-color-scheme: dark) {\r\n .accordion {\r\n color: var(--vtx-color-neutral-100);\r\n }\r\n\r\n /* Dark mode variants */\r\n .accordion--default {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-700);\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .accordion--bordered .accordion-item,\r\n .accordion--separated .accordion-item {\r\n background: var(--vtx-color-neutral-900);\r\n border-color: var(--vtx-color-neutral-700);\r\n }\r\n\r\n .accordion--flush .accordion-item:hover {\r\n background: var(--vtx-color-neutral-800);\r\n }\r\n\r\n /* Header dark mode */\r\n .accordion-item-header {\r\n background: var(--vtx-color-neutral-900);\r\n }\r\n\r\n .accordion-item-header:hover {\r\n background: linear-gradient(135deg, var(--vtx-color-neutral-800) 0%, var(--vtx-color-neutral-700) 100%);\r\n }\r\n\r\n .accordion-item-header-content {\r\n color: var(--vtx-color-neutral-100);\r\n }\r\n\r\n .accordion-item-header:hover .accordion-item-header-content {\r\n color: var(--vtx-color-primary-300);\r\n }\r\n\r\n .accordion-item--open .accordion-item-header {\r\n background: linear-gradient(135deg, var(--vtx-color-neutral-800) 0%, var(--vtx-color-primary-900) 100%);\r\n border-bottom-color: var(--vtx-color-neutral-600);\r\n }\r\n\r\n .accordion-item--open .accordion-item-header-content {\r\n color: var(--vtx-color-primary-200);\r\n }\r\n\r\n /* Content dark mode */\r\n .accordion-item-content {\r\n background: var(--vtx-color-neutral-800);\r\n border-top-color: var(--vtx-color-neutral-700);\r\n }\r\n\r\n .accordion-item-content--open {\r\n border-top-color: var(--vtx-color-neutral-600);\r\n }\r\n\r\n .accordion-item-body {\r\n color: var(--vtx-color-neutral-300);\r\n }\r\n\r\n /* Chevron dark mode */\r\n .accordion-item-chevron {\r\n background: var(--vtx-color-primary-900);\r\n color: var(--vtx-color-primary-300);\r\n }\r\n\r\n .accordion-item-chevron.open {\r\n background: var(--vtx-color-primary-800);\r\n color: var(--vtx-color-primary-200);\r\n }\r\n\r\n .accordion-item-header:hover .accordion-item-chevron {\r\n background: var(--vtx-color-primary-700);\r\n color: var(--vtx-color-primary-100);\r\n }\r\n}\r\n\r\n/* =============================================================================\r\n * ENHANCED STATES AND ANIMATIONS\r\n * ============================================================================= */\r\n\r\n/* Loading state */\r\n.accordion-item--loading {\r\n opacity: 0.6;\r\n pointer-events: none;\r\n}\r\n\r\n.accordion-item--loading .accordion-item-chevron {\r\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n\r\n/* Enhanced animations */\r\n@keyframes pulse {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.5;\r\n }\r\n}\r\n\r\n@keyframes slideDown {\r\n from {\r\n max-height: 0;\r\n opacity: 0;\r\n }\r\n to {\r\n max-height: 500px;\r\n opacity: 1;\r\n }\r\n}\r\n\r\n/* Enhanced visual feedback */\r\n.accordion-item-header:active {\r\n transform: scale(0.99);\r\n}\r\n\r\n/* Beautiful gradient accents for special states */\r\n.accordion-item--featured .accordion-item-header {\r\n background: linear-gradient(135deg, var(--vtx-color-primary-50) 0%, var(--vtx-color-secondary-50) 100%);\r\n border-left: 4px solid var(--vtx-color-primary-500);\r\n}\r\n\r\n/* Status indicators */\r\n.accordion-item--success .accordion-item-header {\r\n border-left: 4px solid var(--vtx-color-success-500);\r\n}\r\n\r\n.accordion-item--warning .accordion-item-header {\r\n border-left: 4px solid var(--vtx-color-warning-500);\r\n}\r\n\r\n.accordion-item--error .accordion-item-header {\r\n border-left: 4px solid var(--vtx-color-error-500);\r\n}\r\n\r\n/* =============================================================================\r\n * ACCESSIBILITY AND MOTION\r\n * ============================================================================= */\r\n\r\n/* High contrast mode */\r\n@media (prefers-contrast: high) {\r\n .accordion-item {\r\n border: 2px solid currentColor;\r\n }\r\n \r\n .accordion-item-header:focus-visible {\r\n outline: 4px solid currentColor;\r\n outline-offset: 2px;\r\n }\r\n \r\n .accordion-item-header-content {\r\n font-weight: var(--vtx-font-weight-bold);\r\n }\r\n}\r\n\r\n/* Reduced motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n .accordion-item,\r\n .accordion-item-header,\r\n .accordion-item-chevron,\r\n .accordion-item-content,\r\n .accordion-item-body {\r\n transition: none;\r\n animation: none;\r\n }\r\n \r\n .accordion-item-chevron.open {\r\n transform: none;\r\n }\r\n}\r\n\r\n/* Print styles */\r\n@media print {\r\n .accordion-item {\r\n page-break-inside: avoid;\r\n }\r\n \r\n .accordion-item-content {\r\n max-height: none !important;\r\n overflow: visible !important;\r\n }\r\n \r\n .accordion-item-chevron {\r\n display: none;\r\n }\r\n}\r\n\r\n/* =============================================================================\r\n * UTILITY CLASSES\r\n * ============================================================================= */\r\n\r\n/* Custom spacing */\r\n.accordion--compact .accordion-item-header {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-4);\r\n min-height: 40px;\r\n}\r\n\r\n.accordion--compact .accordion-item-body {\r\n padding: var(--vtx-spacing-3);\r\n}\r\n\r\n.accordion--spacious .accordion-item-header {\r\n padding: var(--vtx-spacing-6) var(--vtx-spacing-8);\r\n min-height: 72px;\r\n}\r\n\r\n.accordion--spacious .accordion-item-body {\r\n padding: var(--vtx-spacing-8);\r\n}\r\n\r\n/* No animations */\r\n.accordion--no-animation * {\r\n transition: none !important;\r\n animation: none !important;\r\n}\r\n\r\n\r\n");const Y=o.forwardRef(({items:r,children:t,allowMultiple:e=!1,defaultOpenItems:o=[],openItems:a,onToggle:i,variant:l="default",size:c="md",className:p="",style:m,showChevron:u=!0,chevronPosition:h="right",expandedIcon:g,collapsedIcon:f,iconType:b="chevron",showDivider:w=!0,collapsible:y=!0,loading:k=!1,disabled:z=!1,spacing:N="default",disableAnimations:C=!1,...S},_)=>{const[T,$]=v(o),L=void 0!==a?a:T,M=void 0!==a,j=r||s.toArray(t).filter(n=>d(n)).map((n,r)=>{if(d(n)&&n.props){const t=n;return{id:t.props.id||`accordion-item-${r}`,header:t.props.header||`Item ${r+1}`,children:t.props.children,disabled:t.props.disabled,className:t.props.className}}return{id:`accordion-item-${r}`,header:`Item ${r+1}`,children:n}}),B=x(n=>{let r;r=e?L.includes(n)?L.filter(r=>r!==n):[...L,n]:L.includes(n)?y?[]:L:[n],M||$(r),null==i||i(r)},[e,y,L,M,i]);return n("div",{ref:_,className:`\n accordion\n accordion--${l}\n accordion--${c}\n ${w?"accordion--divider":""}\n ${"compact"===N?"accordion--compact":""}\n ${"spacious"===N?"accordion--spacious":""}\n ${C?"accordion--no-animation":""}\n ${k?"accordion--loading":""}\n ${z?"accordion--disabled":""}\n ${p}\n `.trim(),style:m,role:"presentation","aria-busy":k,...S,children:j.map(r=>n(V,{item:r,isOpen:L.includes(r.id),onToggle:()=>B(r.id),variant:l,size:c,showChevron:u,chevronPosition:h,expandedIcon:g,collapsedIcon:f,iconType:b,loading:k,disabled:z,spacing:N,disableAnimations:C},r.id))})});Y.displayName="Accordion";S("/* Alert Component Styles */\r\n\r\n.alert {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-3);\r\n padding: var(--vtx-spacing-4);\r\n border-radius: var(--vtx-radius-md);\r\n font-family: var(--vtx-font-family-sans);\r\n transition: all var(--vtx-transition-base);\r\n position: relative;\r\n}\r\n\r\n.alert--full-width {\r\n width: 100%;\r\n}\r\n\r\n/* Sizes */\r\n.alert--sm {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n.alert--sm .alert-icon svg {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n.alert--md {\r\n padding: var(--vtx-spacing-4);\r\n gap: var(--vtx-spacing-3);\r\n}\r\n\r\n.alert--md .alert-icon svg {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n.alert--lg {\r\n padding: var(--vtx-spacing-5);\r\n gap: var(--vtx-spacing-4);\r\n}\r\n\r\n.alert--lg .alert-icon svg {\r\n width: 24px;\r\n height: 24px;\r\n}\r\n\r\n/* Icon */\r\n.alert-icon {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 0.125rem;\r\n}\r\n\r\n/* Content */\r\n.alert-content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.alert-title {\r\n font-weight: var(--vtx-font-weight-semibold);\r\n font-size: var(--vtx-font-size-base);\r\n line-height: var(--vtx-line-height-tight);\r\n margin-bottom: var(--vtx-spacing-1);\r\n}\r\n\r\n.alert--sm .alert-title {\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.alert--lg .alert-title {\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n.alert-message {\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n opacity: 0.9;\r\n}\r\n\r\n.alert--sm .alert-message {\r\n font-size: var(--vtx-font-size-xs);\r\n}\r\n\r\n.alert--lg .alert-message {\r\n font-size: var(--vtx-font-size-base);\r\n}\r\n\r\n/* Only title, no message */\r\n.alert-title:only-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n/* Action */\r\n.alert-action {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n margin-left: auto;\r\n}\r\n\r\n/* Close Button */\r\n.alert-close {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: var(--vtx-spacing-1);\r\n margin: calc(var(--vtx-spacing-1) * -1);\r\n border-radius: var(--vtx-radius-base);\r\n transition: all var(--vtx-transition-fast);\r\n opacity: 0.6;\r\n}\r\n\r\n.alert-close:hover {\r\n opacity: 1;\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.alert-close:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n.alert-close:focus-visible {\r\n outline: 2px solid currentColor;\r\n outline-offset: 2px;\r\n}\r\n\r\n/* ===== VARIANTS: SUCCESS ===== */\r\n\r\n/* Subtle */\r\n.alert--success.alert--subtle {\r\n background-color: var(--vtx-color-success-50);\r\n color: var(--vtx-color-success-700);\r\n border: 1px solid var(--vtx-color-success-200);\r\n}\r\n\r\n.alert--success.alert--subtle .alert-icon {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--success.alert--filled {\r\n background-color: var(--vtx-color-success-600);\r\n color: white;\r\n border: 1px solid var(--vtx-color-success-600);\r\n}\r\n\r\n.alert--success.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--success.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--success.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-success-700);\r\n border: 2px solid var(--vtx-color-success-500);\r\n}\r\n\r\n.alert--success.alert--outlined .alert-icon {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--success.alert--left-accent {\r\n background-color: var(--vtx-color-success-50);\r\n color: var(--vtx-color-success-700);\r\n border: 1px solid var(--vtx-color-success-200);\r\n border-left: 4px solid var(--vtx-color-success-600);\r\n}\r\n\r\n.alert--success.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n/* ===== VARIANTS: ERROR ===== */\r\n\r\n/* Subtle */\r\n.alert--error.alert--subtle {\r\n background-color: var(--vtx-color-error-50);\r\n color: var(--vtx-color-error-700);\r\n border: 1px solid var(--vtx-color-error-200);\r\n}\r\n\r\n.alert--error.alert--subtle .alert-icon {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--error.alert--filled {\r\n background-color: var(--vtx-color-error-600);\r\n color: white;\r\n border: 1px solid var(--vtx-color-error-600);\r\n}\r\n\r\n.alert--error.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--error.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--error.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-error-700);\r\n border: 2px solid var(--vtx-color-error-500);\r\n}\r\n\r\n.alert--error.alert--outlined .alert-icon {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--error.alert--left-accent {\r\n background-color: var(--vtx-color-error-50);\r\n color: var(--vtx-color-error-700);\r\n border: 1px solid var(--vtx-color-error-200);\r\n border-left: 4px solid var(--vtx-color-error-600);\r\n}\r\n\r\n.alert--error.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* ===== VARIANTS: WARNING ===== */\r\n\r\n/* Subtle */\r\n.alert--warning.alert--subtle {\r\n background-color: var(--vtx-color-warning-50);\r\n color: var(--vtx-color-warning-700);\r\n border: 1px solid var(--vtx-color-warning-200);\r\n}\r\n\r\n.alert--warning.alert--subtle .alert-icon {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--warning.alert--filled {\r\n background-color: var(--vtx-color-warning-600);\r\n color: white;\r\n border: 1px solid var(--vtx-color-warning-600);\r\n}\r\n\r\n.alert--warning.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--warning.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--warning.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-warning-700);\r\n border: 2px solid var(--vtx-color-warning-500);\r\n}\r\n\r\n.alert--warning.alert--outlined .alert-icon {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--warning.alert--left-accent {\r\n background-color: var(--vtx-color-warning-50);\r\n color: var(--vtx-color-warning-700);\r\n border: 1px solid var(--vtx-color-warning-200);\r\n border-left: 4px solid var(--vtx-color-warning-600);\r\n}\r\n\r\n.alert--warning.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n/* ===== VARIANTS: INFO ===== */\r\n\r\n/* Subtle */\r\n.alert--info.alert--subtle {\r\n background-color: var(--vtx-color-info-50);\r\n color: var(--vtx-color-info-700);\r\n border: 1px solid var(--vtx-color-info-200);\r\n}\r\n\r\n.alert--info.alert--subtle .alert-icon {\r\n color: var(--vtx-color-info-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--info.alert--filled {\r\n background-color: var(--vtx-color-info-600);\r\n color: white;\r\n border: 1px solid var(--vtx-color-info-600);\r\n}\r\n\r\n.alert--info.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--info.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--info.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-info-700);\r\n border: 2px solid var(--vtx-color-info-500);\r\n}\r\n\r\n.alert--info.alert--outlined .alert-icon {\r\n color: var(--vtx-color-info-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--info.alert--left-accent {\r\n background-color: var(--vtx-color-info-50);\r\n color: var(--vtx-color-info-700);\r\n border: 1px solid var(--vtx-color-info-200);\r\n border-left: 4px solid var(--vtx-color-info-600);\r\n}\r\n\r\n.alert--info.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-info-600);\r\n}\r\n\r\n/* ===== VARIANTS: NEUTRAL ===== */\r\n\r\n/* Subtle */\r\n.alert--neutral.alert--subtle {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-800);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n}\r\n\r\n.alert--neutral.alert--subtle .alert-icon {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* Filled */\r\n.alert--neutral.alert--filled {\r\n background-color: var(--vtx-color-neutral-700);\r\n color: white;\r\n border: 1px solid var(--vtx-color-neutral-700);\r\n}\r\n\r\n.alert--neutral.alert--filled .alert-icon {\r\n color: white;\r\n}\r\n\r\n.alert--neutral.alert--filled .alert-close:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* Outlined */\r\n.alert--neutral.alert--outlined {\r\n background-color: transparent;\r\n color: var(--vtx-color-neutral-800);\r\n border: 2px solid var(--vtx-color-neutral-500);\r\n}\r\n\r\n.alert--neutral.alert--outlined .alert-icon {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* Left Accent */\r\n.alert--neutral.alert--left-accent {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-800);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-left: 4px solid var(--vtx-color-neutral-600);\r\n}\r\n\r\n.alert--neutral.alert--left-accent .alert-icon {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* Warning colors need adjustment for better contrast */\r\n.alert--warning {\r\n --vtx-color-warning-200: #fde68a;\r\n}\r\n");const P=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n("path",{d:"M12 4L4 12M4 4l8 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),X={success:n(()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm-1.293 14.707l-3.414-3.414 1.414-1.414L9 12.172l5.293-5.293 1.414 1.414-6.707 6.707z",fill:"currentColor"})}),{}),error:n(()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z",fill:"currentColor"})}),{}),warning:n(()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M10 0L0 18h20L10 0zm1 15H9v-2h2v2zm0-4H9V7h2v4z",fill:"currentColor"})}),{}),info:n(()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),{}),neutral:n(()=>r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[n("circle",{cx:"10",cy:"10",r:"9",stroke:"currentColor",strokeWidth:"2",fill:"none"}),n("path",{d:"M10 6v5M10 13v1",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}),{})},q=o.forwardRef(({children:t,title:e,description:o,variant:a="info",alertStyle:i="subtle",size:l,icon:c,dismissible:s=!1,onClose:d,action:x,fullWidth:p=!1,className:m="",style:u,role:h="alert",...g},f)=>{const{theme:b}=C(),w=l||(null==b?void 0:b.defaultSize)||"md",[y,k]=v(!0);if(!y)return null;const z=!1!==c,N=void 0===c?X[a]:c,S=t||o;return r("div",{ref:f,className:`\n alert\n alert--${a}\n alert--${i}\n alert--${w}\n ${p?"alert--full-width":""}\n ${m}\n `.trim(),style:u,role:h,...g,children:[z&&n("div",{className:"alert-icon",children:N}),r("div",{className:"alert-content",children:[e&&n("div",{className:"alert-title",children:e}),S&&n("div",{className:"alert-message",children:null!=t?t:o})]}),x&&n("div",{className:"alert-action",children:x}),s&&n("button",{type:"button",className:"alert-close",onClick:()=>{k(!1),null==d||d()},"aria-label":"Close alert",children:n(P,{})})]})});q.displayName="Alert";S("/* Flex Component */\n.vtx-flex {\n display: flex;\n gap: var(--vtx-flex-gap, 0);\n row-gap: var(--vtx-flex-row-gap, var(--vtx-flex-gap, 0));\n column-gap: var(--vtx-flex-column-gap, var(--vtx-flex-gap, 0));\n}\n\n/* Full width modifier */\n.vtx-flex--full-width {\n width: 100%;\n}\n\n/* Inline variant */\n.vtx-flex--inline {\n display: inline-flex;\n}\n\n/* Direction variants */\n.vtx-flex--column {\n flex-direction: column;\n}\n\n.vtx-flex--row-reverse {\n flex-direction: row-reverse;\n}\n\n.vtx-flex--column-reverse {\n flex-direction: column-reverse;\n}\n\n/* Wrap variants */\n.vtx-flex--wrap {\n flex-wrap: wrap;\n}\n\n.vtx-flex--wrap-reverse {\n flex-wrap: wrap-reverse;\n}\n\n/* Justify content variants */\n.vtx-flex--justify-start {\n justify-content: flex-start;\n}\n\n.vtx-flex--justify-end {\n justify-content: flex-end;\n}\n\n.vtx-flex--justify-center {\n justify-content: center;\n}\n\n.vtx-flex--justify-between {\n justify-content: space-between;\n}\n\n.vtx-flex--justify-around {\n justify-content: space-around;\n}\n\n.vtx-flex--justify-evenly {\n justify-content: space-evenly;\n}\n\n/* Align items variants */\n.vtx-flex--align-start {\n align-items: flex-start;\n}\n\n.vtx-flex--align-end {\n align-items: flex-end;\n}\n\n.vtx-flex--align-center {\n align-items: center;\n}\n\n.vtx-flex--align-baseline {\n align-items: baseline;\n}\n\n.vtx-flex--align-stretch {\n align-items: stretch;\n}\n\n/* Align content variants (for multi-line) */\n.vtx-flex--align-content-start {\n align-content: flex-start;\n}\n\n.vtx-flex--align-content-end {\n align-content: flex-end;\n}\n\n.vtx-flex--align-content-center {\n align-content: center;\n}\n\n.vtx-flex--align-content-between {\n align-content: space-between;\n}\n\n.vtx-flex--align-content-around {\n align-content: space-around;\n}\n\n.vtx-flex--align-content-stretch {\n align-content: stretch;\n}\n");const G=o.forwardRef(({children:r,direction:t="row",wrap:e="nowrap",justify:o="start",align:a="stretch",alignContent:i,gap:l,rowGap:c,columnGap:v,inline:s=!1,fullWidth:d=!0,grow:x,shrink:p,basis:m,className:u="",as:h="div",style:g,...f},b)=>{const w=h,y=["vtx-flex",s&&"vtx-flex--inline",d&&"vtx-flex--full-width","row"!==t&&`vtx-flex--${t}`,"nowrap"!==e&&`vtx-flex--${e}`,"start"!==o&&`vtx-flex--justify-${o}`,"stretch"!==a&&`vtx-flex--align-${a}`,i&&`vtx-flex--align-content-${i}`,u].filter(Boolean).join(" "),k={...g};return void 0!==l&&(k["--vtx-flex-gap"]="number"==typeof l?`${l}px`:l),void 0!==c&&(k["--vtx-flex-row-gap"]="number"==typeof c?`${c}px`:c),void 0!==v&&(k["--vtx-flex-column-gap"]="number"==typeof v?`${v}px`:v),void 0!==x&&(k.flexGrow=x),void 0!==p&&(k.flexShrink=p),void 0!==m&&(k.flexBasis="number"==typeof m?`${m}px`:m),n(w,{ref:b,className:y,style:k,...f,children:r})});G.displayName="Flex";S("/* ===== Text Component Base Styles ===== */\n.vtx-text {\n margin: 0;\n padding: 0;\n font-family: var(--vtx-font-family-sans);\n color: inherit;\n transition: color var(--vtx-transition-fast);\n}\n\n/* ===== Text Variants ===== */\n/* Headings */\n.vtx-text--h1 {\n font-size: var(--vtx-text-h1-font-size, 3.75rem);\n font-weight: var(--vtx-text-h1-font-weight, 700);\n line-height: var(--vtx-text-h1-line-height, 1.2);\n letter-spacing: var(--vtx-text-h1-letter-spacing, -0.025em);\n margin-bottom: var(--vtx-spacing-6, 1.5rem);\n}\n\n.vtx-text--h2 {\n font-size: var(--vtx-text-h2-font-size, 3rem);\n font-weight: var(--vtx-text-h2-font-weight, 700);\n line-height: var(--vtx-text-h2-line-height, 1.25);\n letter-spacing: var(--vtx-text-h2-letter-spacing, -0.025em);\n margin-bottom: var(--vtx-spacing-5, 1.25rem);\n}\n\n.vtx-text--h3 {\n font-size: var(--vtx-text-h3-font-size, 2.25rem);\n font-weight: var(--vtx-text-h3-font-weight, 600);\n line-height: var(--vtx-text-h3-line-height, 1.3);\n letter-spacing: var(--vtx-text-h3-letter-spacing, -0.025em);\n margin-bottom: var(--vtx-spacing-4, 1rem);\n}\n\n.vtx-text--h4 {\n font-size: var(--vtx-text-h4-font-size, 1.875rem);\n font-weight: var(--vtx-text-h4-font-weight, 600);\n line-height: var(--vtx-text-h4-line-height, 1.35);\n letter-spacing: var(--vtx-text-h4-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-4, 1rem);\n}\n\n.vtx-text--h5 {\n font-size: var(--vtx-text-h5-font-size, 1.5rem);\n font-weight: var(--vtx-text-h5-font-weight, 600);\n line-height: var(--vtx-text-h5-line-height, 1.4);\n letter-spacing: var(--vtx-text-h5-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-3, 0.75rem);\n}\n\n.vtx-text--h6 {\n font-size: var(--vtx-text-h6-font-size, 1.25rem);\n font-weight: var(--vtx-text-h6-font-weight, 600);\n line-height: var(--vtx-text-h6-line-height, 1.5);\n letter-spacing: var(--vtx-text-h6-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-3, 0.75rem);\n}\n\n/* Body Text */\n.vtx-text--body1 {\n font-size: var(--vtx-text-body1-font-size, 1rem);\n font-weight: var(--vtx-text-body1-font-weight, 400);\n line-height: var(--vtx-text-body1-line-height, 1.5);\n letter-spacing: var(--vtx-text-body1-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-3, 0.75rem);\n}\n\n.vtx-text--body2 {\n font-size: var(--vtx-text-body2-font-size, 0.875rem);\n font-weight: var(--vtx-text-body2-font-weight, 400);\n line-height: var(--vtx-text-body2-line-height, 1.5);\n letter-spacing: var(--vtx-text-body2-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-3, 0.75rem);\n}\n\n/* Subtitles */\n.vtx-text--subtitle1 {\n font-size: var(--vtx-text-subtitle1-font-size, 1.125rem);\n font-weight: var(--vtx-text-subtitle1-font-weight, 500);\n line-height: var(--vtx-text-subtitle1-line-height, 1.5);\n letter-spacing: var(--vtx-text-subtitle1-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-2, 0.5rem);\n}\n\n.vtx-text--subtitle2 {\n font-size: var(--vtx-text-subtitle2-font-size, 1rem);\n font-weight: var(--vtx-text-subtitle2-font-weight, 500);\n line-height: var(--vtx-text-subtitle2-line-height, 1.5);\n letter-spacing: var(--vtx-text-subtitle2-letter-spacing, 0);\n margin-bottom: var(--vtx-spacing-2, 0.5rem);\n}\n\n/* Caption */\n.vtx-text--caption {\n font-size: var(--vtx-text-caption-font-size, 0.75rem);\n font-weight: var(--vtx-text-caption-font-weight, 400);\n line-height: var(--vtx-text-caption-line-height, 1.5);\n letter-spacing: var(--vtx-text-caption-letter-spacing, 0.025em);\n color: var(--vtx-color-neutral-600);\n}\n\n/* Overline */\n.vtx-text--overline {\n font-size: var(--vtx-text-overline-font-size, 0.75rem);\n font-weight: var(--vtx-text-overline-font-weight, 600);\n line-height: var(--vtx-text-overline-line-height, 1.5);\n letter-spacing: var(--vtx-text-overline-letter-spacing, 0.1em);\n text-transform: uppercase;\n color: var(--vtx-color-neutral-600);\n}\n\n/* Button Text */\n.vtx-text--button {\n font-size: var(--vtx-text-button-font-size, 0.875rem);\n font-weight: var(--vtx-text-button-font-weight, 600);\n line-height: var(--vtx-text-button-line-height, 1.5);\n letter-spacing: var(--vtx-text-button-letter-spacing, 0.025em);\n}\n\n/* Label */\n.vtx-text--label {\n font-size: var(--vtx-text-label-font-size, 0.875rem);\n font-weight: var(--vtx-text-label-font-weight, 500);\n line-height: var(--vtx-text-label-line-height, 1.5);\n letter-spacing: var(--vtx-text-label-letter-spacing, 0);\n display: inline-block;\n margin-bottom: var(--vtx-spacing-2, 0.5rem);\n}\n\n/* ===== Text Alignment ===== */\n.vtx-text--align-left {\n text-align: left;\n}\n\n.vtx-text--align-center {\n text-align: center;\n}\n\n.vtx-text--align-right {\n text-align: right;\n}\n\n.vtx-text--align-justify {\n text-align: justify;\n}\n\n/* ===== Font Weights ===== */\n.vtx-text--weight-thin {\n font-weight: var(--vtx-font-weight-thin, 100);\n}\n\n.vtx-text--weight-extralight {\n font-weight: var(--vtx-font-weight-extralight, 200);\n}\n\n.vtx-text--weight-light {\n font-weight: var(--vtx-font-weight-light, 300);\n}\n\n.vtx-text--weight-normal {\n font-weight: var(--vtx-font-weight-normal, 400);\n}\n\n.vtx-text--weight-medium {\n font-weight: var(--vtx-font-weight-medium, 500);\n}\n\n.vtx-text--weight-semibold {\n font-weight: var(--vtx-font-weight-semibold, 600);\n}\n\n.vtx-text--weight-bold {\n font-weight: var(--vtx-font-weight-bold, 700);\n}\n\n.vtx-text--weight-extrabold {\n font-weight: var(--vtx-font-weight-extrabold, 800);\n}\n\n.vtx-text--weight-black {\n font-weight: var(--vtx-font-weight-black, 900);\n}\n\n/* ===== Text Transform ===== */\n.vtx-text--transform-none {\n text-transform: none;\n}\n\n.vtx-text--transform-uppercase {\n text-transform: uppercase;\n}\n\n.vtx-text--transform-lowercase {\n text-transform: lowercase;\n}\n\n.vtx-text--transform-capitalize {\n text-transform: capitalize;\n}\n\n/* ===== Text Decoration ===== */\n.vtx-text--decoration-none {\n text-decoration: none;\n}\n\n.vtx-text--decoration-underline {\n text-decoration: underline;\n}\n\n.vtx-text--decoration-line-through {\n text-decoration: line-through;\n}\n\n.vtx-text--decoration-overline {\n text-decoration: overline;\n}\n\n/* ===== Text Utilities ===== */\n/* Truncation */\n.vtx-text--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Line Clamp */\n.vtx-text--line-clamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Break Word */\n.vtx-text--break-word {\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n/* Italic */\n.vtx-text--italic {\n font-style: italic;\n}\n\n/* Underline */\n.vtx-text--underline {\n text-decoration: underline;\n}\n\n/* Strikethrough */\n.vtx-text--strikethrough {\n text-decoration: line-through;\n}\n\n/* Gradient Text */\n.vtx-text--gradient {\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-size: 100%;\n}\n\n/* No Select */\n.vtx-text--no-select {\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n/* ===== Dark Theme Support ===== */\n[data-theme='dark'] .vtx-text--caption,\n[data-theme='dark'] .vtx-text--overline {\n color: var(--vtx-color-neutral-400);\n}\n\n/* ===== Responsive Typography ===== */\n@media (max-width: 768px) {\n .vtx-text--h1 {\n font-size: clamp(2.5rem, 8vw, 3.75rem);\n }\n\n .vtx-text--h2 {\n font-size: clamp(2rem, 6vw, 3rem);\n }\n\n .vtx-text--h3 {\n font-size: clamp(1.75rem, 5vw, 2.25rem);\n }\n\n .vtx-text--h4 {\n font-size: clamp(1.5rem, 4vw, 1.875rem);\n }\n\n .vtx-text--h5 {\n font-size: clamp(1.25rem, 3.5vw, 1.5rem);\n }\n\n .vtx-text--h6 {\n font-size: clamp(1.125rem, 3vw, 1.25rem);\n }\n}\n\n/* ===== Print Styles ===== */\n@media print {\n .vtx-text {\n color: #000;\n }\n\n .vtx-text--gradient {\n -webkit-text-fill-color: initial;\n background-clip: initial;\n -webkit-background-clip: initial;\n }\n}\n\n/* ===== Utility Classes ===== */\n.vtx-text--no-margin {\n margin: 0 !important;\n}\n\n.vtx-text--no-padding {\n padding: 0 !important;\n}\n\n/* ===== Accessibility ===== */\n.vtx-text:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n border-radius: var(--vtx-radius-sm);\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .vtx-text {\n transition: none;\n }\n}\n");const K="dynamic-styles";const U=new Set;function Z(n){const r=n.match(/^([a-z]+)-\[(.+)\]$/);if(r){const n=r[1],t=r[2],e=`${n}-${t.replace(/[^a-z0-9]/gi,"")}`,o={m:"margin",mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",p:"padding",pt:"padding-top",pr:"padding-right",pb:"padding-bottom",pl:"padding-left",w:"width",h:"height",fs:"font-size",lh:"line-height",ls:"letter-spacing"}[n];if(o){const n=`.${e} { ${o}: ${t}; }`;if(!U.has(n)){(function(){let n=document.getElementById(K);return n||(n=document.createElement("style"),n.id=K,document.head.appendChild(n)),n})().appendChild(document.createTextNode(n)),U.add(n)}return e}}return n}const J=e.forwardRef(({variant:n="body1",as:r,align:t,color:o,weight:a,transform:i,decoration:l,truncate:c=!1,lineClamp:v,breakWord:s=!1,italic:d=!1,underline:x=!1,strikethrough:p=!1,gradient:m,noSelect:u=!1,size:h,lineHeight:g,letterSpacing:f,noMargin:b=!1,noPadding:w=!1,className:y="",style:k,children:z,...N},C)=>{const S=r||(n=>({h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",body1:"p",body2:"p",subtitle1:"p",subtitle2:"p",caption:"span",overline:"span",button:"span",label:"label"}[n]))(n),_=["vtx-text",`vtx-text--${n}`,t&&`vtx-text--align-${t}`,a&&"string"==typeof a&&`vtx-text--weight-${a}`,i&&`vtx-text--transform-${i}`,l&&`vtx-text--decoration-${l}`,c&&"vtx-text--truncate",v&&"vtx-text--line-clamp",s&&"vtx-text--break-word",d&&"vtx-text--italic",x&&"vtx-text--underline",p&&"vtx-text--strikethrough",m&&"vtx-text--gradient",u&&"vtx-text--no-select",b&&"vtx-text--no-margin",w&&"vtx-text--no-padding",y].filter(Boolean).join(" "),T={...k};if(o)if(o.includes(".")){const[n,r]=o.split(".");T.color=`var(--vtx-color-${n}-${r})`}else T.color=o;if(a&&"number"==typeof a&&(T.fontWeight=a),v&&(T.WebkitLineClamp=v),m&&m.length>0){const n=1===m.length?m[0]:`linear-gradient(135deg, ${m.join(", ")})`;T.backgroundImage=n}return h&&(T.fontSize="number"==typeof h?`${h}px`:h),g&&(T.lineHeight="number"==typeof g?`${g}`:g),f&&(T.letterSpacing="number"==typeof f?`${f}px`:f),e.createElement(S,{ref:C,className:_,style:T,...N},z)});J.displayName="Text";const Q=(nn=J,r=>{const t=(r.className||"").split(" ").map(n=>Z(n)).join(" ");return n(nn,{...r,className:t})});var nn;S("/* Menu Component Styles */\n\n.vtx-menu-container {\n position: relative;\n}\n\n/* Menu Toggle (Hamburger) */\n.vtx-menu-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: var(--vtx-spacing-2);\n background: transparent;\n border: none;\n border-radius: var(--vtx-radius-md);\n color: var(--vtx-text-primary);\n cursor: pointer;\n transition: all var(--vtx-transition-normal);\n}\n\n.vtx-menu-toggle:hover {\n background: var(--vtx-background-hover);\n}\n\n.vtx-menu-toggle:active {\n background: var(--vtx-background-active);\n}\n\n.vtx-menu-toggle:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n/* Menu Container */\n.vtx-menu {\n display: flex;\n flex-direction: column;\n background: var(--vtx-background-primary);\n border-radius: var(--vtx-radius-lg);\n box-shadow: var(--vtx-shadow-sm);\n overflow: hidden;\n}\n\n/* Vertical Menu (Default) */\n.vtx-menu--vertical {\n flex-direction: column;\n min-width: 200px;\n padding: var(--vtx-spacing-2);\n gap: var(--vtx-spacing-1);\n}\n\n/* Horizontal Menu */\n.vtx-menu--horizontal {\n flex-direction: row;\n padding: var(--vtx-spacing-2);\n gap: var(--vtx-spacing-1);\n box-shadow: none;\n border-radius: 0;\n}\n\n/* Menu Item - Professional Sidebar Style */\n.vtx-menu-item {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-3);\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n margin-bottom: var(--vtx-spacing-1);\n border-radius: var(--vtx-radius-md);\n color: var(--vtx-color-neutral-700);\n background: transparent;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n user-select: none;\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n border-left: 3px solid transparent;\n}\n\n.vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item:active:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background: var(--vtx-color-neutral-200);\n transform: scale(0.98);\n}\n\n.vtx-menu-item:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n/* Active Menu Item - Professional Style */\n.vtx-menu-item--active {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item--active .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item--active:hover {\n background-color: var(--vtx-color-primary-100);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-menu-item--active:hover .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Disabled Menu Item */\n.vtx-menu-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Danger Variant */\n.vtx-menu-item--danger {\n color: var(--vtx-color-danger-600);\n}\n\n.vtx-menu-item--danger:hover:not(.vtx-menu-item--disabled) {\n background: var(--vtx-color-danger-50);\n}\n\n.vtx-menu-item--danger:active:not(.vtx-menu-item--disabled) {\n background: var(--vtx-color-danger-100);\n}\n\n/* Menu Item Icon */\n.vtx-menu-item-icon,\n.vtx-menu-item-right-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.vtx-menu-item-icon svg,\n.vtx-menu-item-right-icon svg {\n width: 100%;\n height: 100%;\n transition: inherit;\n}\n\n.vtx-menu-item-icon {\n color: var(--vtx-color-neutral-600);\n transition: color 0.15s ease-in-out;\n}\n\n.vtx-menu-item:hover .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Shortcut */\n.vtx-menu-item-shortcut {\n opacity: 0.6;\n font-size: var(--vtx-font-size-xs);\n white-space: nowrap;\n}\n\n/* Menu Divider */\n.vtx-menu-divider {\n height: 1px;\n margin: var(--vtx-spacing-2) 0;\n background: var(--vtx-border-color);\n}\n\n.vtx-menu--horizontal .vtx-menu-divider {\n width: 1px;\n height: auto;\n margin: 0 var(--vtx-spacing-2);\n}\n\n/* Submenu Styles - Inline Expansion for Sidebar */\n.vtx-menu-item--has-submenu {\n position: relative;\n}\n\n.vtx-submenu {\n display: flex;\n flex-direction: column;\n gap: 0;\n padding-left: var(--vtx-spacing-5);\n margin-top: var(--vtx-spacing-2);\n margin-bottom: var(--vtx-spacing-2);\n animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.vtx-submenu .vtx-menu-item {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-4);\n padding-left: var(--vtx-spacing-6);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-normal);\n margin-bottom: var(--vtx-spacing-1);\n}\n\n.vtx-submenu .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-submenu .vtx-menu-item--active {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-submenu .vtx-menu-item--active:hover {\n background-color: var(--vtx-color-primary-100);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-submenu .vtx-menu-item--active .vtx-menu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Nested submenu - additional indentation */\n.vtx-submenu .vtx-submenu {\n padding-left: var(--vtx-spacing-4);\n}\n\n/* Submenu Animation */\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n max-height: 1000px;\n transform: translateY(0);\n }\n}\n\n/* Responsive Styles */\n@media (max-width: 768px) {\n .vtx-menu--responsive .vtx-menu-toggle {\n display: flex;\n }\n\n .vtx-menu--responsive.vtx-menu {\n position: absolute;\n top: 48px;\n left: 0;\n right: 0;\n z-index: 1000;\n display: none;\n min-width: 100%;\n max-height: calc(100vh - 64px);\n overflow-y: auto;\n box-shadow: var(--vtx-shadow-lg);\n animation: slideDown 0.2s ease-out;\n }\n\n .vtx-menu--responsive.vtx-menu--mobile-open {\n display: flex;\n }\n\n /* Force vertical layout on mobile */\n .vtx-menu--responsive.vtx-menu--horizontal {\n flex-direction: column;\n padding: var(--vtx-spacing-2);\n gap: var(--vtx-spacing-1);\n border-radius: var(--vtx-radius-lg);\n }\n\n .vtx-menu--responsive.vtx-menu--horizontal .vtx-menu-divider {\n width: auto;\n height: 1px;\n margin: var(--vtx-spacing-2) 0;\n }\n}\n\n/* Slide Down Animation */\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Dark Mode - Professional Style */\n[data-theme='dark'] .vtx-menu {\n background: var(--vtx-background-primary);\n box-shadow: var(--vtx-shadow-lg);\n}\n\n[data-theme='dark'] .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark']\n .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active)\n .vtx-menu-item-icon {\n color: var(--vtx-color-primary-300);\n}\n\n[data-theme='dark'] .vtx-menu-item--active {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--active .vtx-menu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--active:hover {\n background-color: var(--vtx-color-primary-800);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--active:hover .vtx-menu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--danger {\n color: var(--vtx-color-danger-400);\n}\n\n[data-theme='dark'] .vtx-menu-item--danger:hover:not(.vtx-menu-item--disabled) {\n background: rgba(var(--vtx-color-danger-rgb), 0.15);\n}\n\n[data-theme='dark']\n .vtx-submenu\n .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-submenu .vtx-menu-item--active {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-submenu .vtx-menu-item--active:hover {\n background-color: var(--vtx-color-primary-800);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-submenu .vtx-menu-item--active .vtx-menu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n .vtx-menu-item,\n .vtx-menu-toggle {\n transition: none;\n }\n\n .vtx-submenu {\n animation: none;\n }\n\n @keyframes slideDown {\n from,\n to {\n opacity: 1;\n max-height: 1000px;\n transform: translateY(0);\n }\n }\n}\n");const rn=({isOpen:r})=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",style:{transition:"transform 0.2s ease",transform:r?"rotate(180deg)":"rotate(0deg)"},children:n("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),tn=o.forwardRef(({label:e,onClick:o,icon:a,rightIcon:l,disabled:c=!1,active:s=!1,variant:d="default",shortcut:x,divider:p=!1,items:m},u)=>{const[h,g]=v(!1),f=i(null),b=m&&m.length>0,w=l||(b?n(rn,{isOpen:h}):null);return r(t,{children:[n("div",{ref:u||f,className:["vtx-menu-item",s&&"vtx-menu-item--active",c&&"vtx-menu-item--disabled","default"!==d&&`vtx-menu-item--${d}`,b&&"vtx-menu-item--has-submenu",h&&"vtx-menu-item--submenu-open"].filter(Boolean).join(" "),onClick:()=>{c||(b?g(!h):o&&o())},onKeyDown:n=>{c||("Enter"===n.key||" "===n.key?(n.preventDefault(),b?g(!h):null==o||o()):"ArrowDown"===n.key&&b&&!h?(n.preventDefault(),g(!0)):"ArrowUp"===n.key&&b&&h&&(n.preventDefault(),g(!1)))},role:"menuitem",tabIndex:c?-1:0,"aria-disabled":c,"aria-haspopup":b?"menu":void 0,"aria-expanded":b?h:void 0,children:r(G,{align:"center",gap:8,style:{flex:1},children:[a&&n("span",{className:"vtx-menu-item-icon",children:a}),n(Q,{variant:"body2",noMargin:!0,style:{flex:1},children:e}),x&&n(Q,{variant:"caption",color:"neutral.500",noMargin:!0,className:"vtx-menu-item-shortcut",children:x}),w&&n("span",{className:"vtx-menu-item-right-icon",children:w})]})}),b&&h&&n("div",{className:"vtx-submenu",role:"menu",children:m.map((r,t)=>n(tn,{...r},t))}),p&&n("div",{className:"vtx-menu-divider",role:"separator"})]})});tn.displayName="MenuItem";const en=o.forwardRef(({items:t,children:e,orientation:o="vertical",responsive:a=!0,className:l="",width:s},d)=>{const[x,p]=v(!1),m=i(null);c(()=>{if(!a||!x)return;const n=n=>{m.current&&!m.current.contains(n.target)&&p(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[a,x]),c(()=>{if(!a||!x)return;const n=n=>{"Escape"===n.key&&p(!1)};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[a,x]);const u=t?t.map((r,t)=>n(tn,{...r},t)):e,h=["vtx-menu",`vtx-menu--${o}`,a&&"vtx-menu--responsive",x&&"vtx-menu--mobile-open",l].filter(Boolean).join(" "),g={width:"vertical"===o&&s?"number"==typeof s?`${s}px`:s:void 0};return r("div",{ref:m,className:"vtx-menu-container",children:[a&&n("button",{className:"vtx-menu-toggle",onClick:()=>p(!x),"aria-label":"Toggle menu","aria-expanded":x,children:n("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",x?{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"}:{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})}),n("div",{ref:d,className:h,role:"menu",style:g,children:u})]})});en.displayName="Menu";S("/* ===== Modal Component - Professional Design ===== */\r\n\r\n/* Backdrop */\r\n.vtx-modal-backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: var(--vtx-modal-backdrop-bg, rgba(15, 23, 42, 0.75));\r\n backdrop-filter: var(--vtx-modal-backdrop-blur, blur(4px));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: var(--vtx-z-modal, 1200);\r\n padding: var(--vtx-modal-backdrop-padding, var(--vtx-spacing-4));\r\n animation: vtx-modal-backdrop-fade-in var(--vtx-transition-slow, 300ms)\r\n cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-modal-backdrop--transparent {\r\n background: transparent;\r\n backdrop-filter: none;\r\n}\r\n\r\n@keyframes vtx-modal-backdrop-fade-in {\r\n from {\r\n opacity: 0;\r\n backdrop-filter: blur(0);\r\n }\r\n to {\r\n opacity: 1;\r\n backdrop-filter: blur(4px);\r\n }\r\n}\r\n\r\n/* Modal Container */\r\n.vtx-modal {\r\n position: relative;\r\n background: var(--vtx-modal-bg, var(--vtx-color-neutral-50));\r\n border-radius: var(--vtx-modal-radius, var(--vtx-radius-xl, 12px));\r\n box-shadow: var(\r\n --vtx-modal-shadow,\r\n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\r\n 0 10px 10px -5px rgba(0, 0, 0, 0.04),\r\n 0 0 0 1px rgba(0, 0, 0, 0.05)\r\n );\r\n display: flex;\r\n flex-direction: column;\r\n max-height: calc(100vh - var(--vtx-modal-max-height-offset, var(--vtx-spacing-8)));\r\n overflow: hidden;\r\n animation: vtx-modal-slide-up var(--vtx-transition-slow, 300ms) cubic-bezier(0.16, 1, 0.3, 1);\r\n transform-origin: center center;\r\n}\r\n\r\n@keyframes vtx-modal-slide-up {\r\n from {\r\n transform: translateY(var(--vtx-modal-slide-distance, 32px)) scale(0.96);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0) scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n/* Size Variants */\r\n.vtx-modal--sm {\r\n width: 100%;\r\n max-width: var(--vtx-modal-width-sm, 400px);\r\n}\r\n\r\n.vtx-modal--md {\r\n width: 100%;\r\n max-width: var(--vtx-modal-width-md, 600px);\r\n}\r\n\r\n.vtx-modal--lg {\r\n width: 100%;\r\n max-width: var(--vtx-modal-width-lg, 900px);\r\n}\r\n\r\n.vtx-modal--fullscreen {\r\n width: 100%;\r\n height: calc(100vh - var(--vtx-modal-max-height-offset, var(--vtx-spacing-8)));\r\n max-width: none;\r\n border-radius: var(--vtx-modal-fullscreen-radius, var(--vtx-radius-lg, 8px));\r\n}\r\n\r\n/* Header - Uses Flex component */\r\n.vtx-modal-header {\r\n padding: var(--vtx-modal-header-padding, var(--vtx-spacing-3));\r\n background: var(--vtx-modal-header-bg, transparent);\r\n border-bottom: var(--vtx-modal-header-border, 1px solid var(--vtx-color-neutral-200));\r\n}\r\n\r\n/* Close button alignment fix */\r\n.vtx-modal-close {\r\n margin-right: calc(var(--vtx-spacing-1) * -2);\r\n}\r\n\r\n/* Body */\r\n.vtx-modal-body {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: var(--vtx-modal-body-padding, var(--vtx-spacing-3));\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-modal-body-size, var(--vtx-font-size-base, 1rem));\r\n color: var(--vtx-modal-body-color, var(--vtx-color-neutral-700));\r\n line-height: var(--vtx-modal-body-line-height, var(--vtx-line-height-relaxed, 1.625));\r\n\r\n /* Custom scrollbar */\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--vtx-color-neutral-300) transparent;\r\n}\r\n\r\n.vtx-modal-body::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.vtx-modal-body::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.vtx-modal-body::-webkit-scrollbar-thumb {\r\n background: var(--vtx-color-neutral-300);\r\n border-radius: 4px;\r\n}\r\n\r\n.vtx-modal-body::-webkit-scrollbar-thumb:hover {\r\n background: var(--vtx-color-neutral-400);\r\n}\r\n\r\n/* Footer - Uses Flex component */\r\n.vtx-modal-footer {\r\n padding: var(--vtx-modal-footer-padding, var(--vtx-spacing-3));\r\n background: var(--vtx-modal-footer-bg, var(--vtx-color-neutral-50));\r\n border-top: var(--vtx-modal-footer-border, 1px solid var(--vtx-color-neutral-200));\r\n}\r\n\r\n/* Scrollable Variant */\r\n.vtx-modal--scrollable .vtx-modal-body {\r\n max-height: var(--vtx-modal-scrollable-max-height, 60vh);\r\n}\r\n\r\n/* Animation Variants */\r\n.vtx-modal--zoom {\r\n animation: vtx-modal-zoom var(--vtx-transition-slow, 300ms) cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n@keyframes vtx-modal-zoom {\r\n from {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.vtx-modal--slide-down {\r\n animation: vtx-modal-slide-down var(--vtx-transition-slow, 300ms) cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n@keyframes vtx-modal-slide-down {\r\n from {\r\n transform: translateY(-32px) scale(0.96);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0) scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.vtx-modal--fade {\r\n animation: vtx-modal-fade var(--vtx-transition-slow, 300ms) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n@keyframes vtx-modal-fade {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.vtx-modal--none {\r\n animation: none;\r\n}\r\n\r\n/* Dark Mode */\r\n@media (prefers-color-scheme: dark) {\r\n .vtx-modal {\r\n background: var(--vtx-modal-bg-dark, var(--vtx-color-neutral-800));\r\n box-shadow: var(\r\n --vtx-modal-shadow-dark,\r\n 0 20px 25px -5px rgba(0, 0, 0, 0.4),\r\n 0 10px 10px -5px rgba(0, 0, 0, 0.3),\r\n 0 0 0 1px rgba(255, 255, 255, 0.1)\r\n );\r\n }\r\n\r\n .vtx-modal-backdrop {\r\n background: var(--vtx-modal-backdrop-bg-dark, rgba(0, 0, 0, 0.85));\r\n }\r\n\r\n .vtx-modal-header {\r\n border-bottom-color: var(--vtx-modal-header-border-dark, var(--vtx-color-neutral-700));\r\n }\r\n\r\n .vtx-modal-body {\r\n color: var(--vtx-modal-body-color-dark, var(--vtx-color-neutral-300));\r\n }\r\n\r\n .vtx-modal-footer {\r\n background: var(--vtx-modal-footer-bg-dark, var(--vtx-color-neutral-800));\r\n border-top-color: var(--vtx-modal-footer-border-dark, var(--vtx-color-neutral-700));\r\n }\r\n\r\n .vtx-modal-close {\r\n color: var(--vtx-modal-close-color-dark, var(--vtx-color-neutral-400));\r\n }\r\n\r\n .vtx-modal-close:hover {\r\n background: var(--vtx-modal-close-hover-bg-dark, var(--vtx-color-neutral-700));\r\n color: var(--vtx-modal-close-hover-color-dark, var(--vtx-color-neutral-200));\r\n }\r\n\r\n .vtx-modal-body::-webkit-scrollbar-thumb {\r\n background: var(--vtx-color-neutral-600);\r\n }\r\n\r\n .vtx-modal-body::-webkit-scrollbar-thumb:hover {\r\n background: var(--vtx-color-neutral-500);\r\n }\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 640px) {\r\n .vtx-modal-backdrop {\r\n padding: 0;\r\n }\r\n\r\n .vtx-modal {\r\n width: 100%;\r\n max-width: 100%;\r\n min-height: 100vh;\r\n max-height: 100vh;\r\n border-radius: 0;\r\n animation: vtx-modal-slide-up-mobile var(--vtx-transition-slow, 300ms)\r\n cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n @keyframes vtx-modal-slide-up-mobile {\r\n from {\r\n transform: translateY(100%);\r\n }\r\n to {\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .vtx-modal--sm,\r\n .vtx-modal--md,\r\n .vtx-modal--lg {\r\n max-width: 100%;\r\n border-radius: 0;\r\n }\r\n\r\n .vtx-modal-header {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .vtx-modal-body {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .vtx-modal-footer {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n /* Stack footer buttons vertically on mobile */\r\n .vtx-modal-footer.vtx-flex {\r\n flex-direction: column;\r\n }\r\n\r\n .vtx-modal-footer > * {\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* High Contrast Mode */\r\n@media (prefers-contrast: high) {\r\n .vtx-modal {\r\n border: 2px solid currentColor;\r\n }\r\n\r\n .vtx-modal-close:focus-visible {\r\n outline-width: 3px;\r\n }\r\n}\r\n\r\n/* Reduced Motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-modal,\r\n .vtx-modal-backdrop {\r\n animation-duration: 1ms;\r\n }\r\n\r\n .vtx-modal-close:hover {\r\n transform: none;\r\n }\r\n}\r\n");const on=o.forwardRef(({isOpen:t,onClose:e,title:o,description:a,children:l,header:v,footer:s,footerButtons:d,size:x,closeOnBackdropClick:p=!0,closeOnEscape:m=!0,showCloseButton:u=!0,transparentBackdrop:h=!1,className:f="",backdropClassName:b="",preventScroll:w=!0,animation:y="fade",onAfterOpen:k,onAfterClose:z,scrollable:N=!1,centered:S=!0},T)=>{const $=i(null),L=i(null),{theme:A}=C();let I="md";if(x?I=x:(null==A?void 0:A.defaultSize)&&(I=A.defaultSize),M($,t),B(w&&t),j(()=>{m&&t&&e()}),c(()=>{t?(L.current=document.activeElement,null==k||k()):L.current&&(L.current.focus(),null==z||z())},[t,k,z]),!t)return null;const E=["vtx-modal-backdrop",h&&"vtx-modal-backdrop--transparent",S&&"vtx-modal-backdrop--centered",`vtx-modal-backdrop--${y}`,b].filter(Boolean).join(" "),D=["vtx-modal",`vtx-modal--${I}`,N&&"vtx-modal--scrollable",`vtx-modal--${y}`,f].filter(Boolean).join(" "),O=n("div",{className:E,onClick:n=>{p&&n.target===n.currentTarget&&e()},role:"presentation",children:r("div",{ref:n=>{$.current=n,"function"==typeof T?T(n):T&&(T.current=n)},className:D,role:"dialog","aria-modal":"true","aria-labelledby":o?"vtx-modal-title":void 0,"aria-describedby":a?"vtx-modal-description":void 0,children:[v?n("div",{className:"vtx-modal-header",children:v}):o||u?r(G,{className:"vtx-modal-header",justify:"between",align:"center",gap:8,children:[o&&r(G,{direction:"column",gap:4,className:"vtx-modal-header-content",children:[n(Q,{as:"h2",variant:"h6",weight:"semibold",id:"vtx-modal-title",noMargin:!0,children:o}),a&&n(Q,{variant:"body2",color:"neutral.600",id:"vtx-modal-description",noMargin:!0,children:a})]}),u&&n(_,{variant:"ghost",iconOnly:!0,size:"sm",className:"vtx-modal-close",onClick:e,"aria-label":"Close modal",children:n("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",children:n("path",{d:"M18 6L6 18M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}):null,n(G,{direction:"column",className:"vtx-modal-body",children:l}),(s||d)&&n(G,{className:"vtx-modal-footer",justify:"end",align:"center",gap:8,children:d?d.map((r,t)=>n(_,{variant:r.variant||"secondary",size:r.size||(null==A?void 0:A.defaultSize)||"md",loading:r.loading,disabled:r.disabled,onClick:r.onClick,children:r.label},t)):s})]})});return g(O,document.body)});on.displayName="Modal";S("/* ===== Toast Component Styles ===== */\n.vtx-toast {\n --vtx-toast-animation-duration: 300ms;\n\n display: flex;\n flex-direction: column;\n min-width: 300px;\n max-width: 500px;\n padding: 0;\n margin: 0;\n background: var(--vtx-color-neutral-50);\n border: 1px solid var(--vtx-color-neutral-200);\n border-radius: var(--vtx-radius-lg);\n box-shadow: var(--vtx-shadow-lg);\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n color: var(--vtx-color-neutral-900);\n pointer-events: auto;\n overflow: hidden;\n position: relative;\n animation: vtx-toast-enter var(--vtx-toast-animation-duration) cubic-bezier(0.4, 0, 0.2, 1)\n forwards;\n}\n\n.vtx-toast--exiting {\n animation: vtx-toast-exit var(--vtx-toast-animation-duration) cubic-bezier(0.4, 0, 0.2, 1)\n forwards;\n}\n\n/* ===== Toast Variants ===== */\n.vtx-toast--success {\n border-left: 4px solid var(--vtx-color-success-500);\n}\n\n.vtx-toast--error {\n border-left: 4px solid var(--vtx-color-error-500);\n}\n\n.vtx-toast--warning {\n border-left: 4px solid var(--vtx-color-warning-500);\n}\n\n.vtx-toast--info {\n border-left: 4px solid var(--vtx-color-info-500);\n}\n\n.vtx-toast--default {\n border-left: 4px solid var(--vtx-color-primary-500);\n}\n\n.vtx-toast--primary {\n background: var(--vtx-color-neutral-50);\n color: var(--vtx-color-primary-600);\n border: 1px solid var(--vtx-color-primary-200);\n border-left: 4px solid var(--vtx-color-primary-500);\n}\n\n/* ===== Toast Wrapper ===== */\n.vtx-toast__wrapper {\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-3);\n padding: var(--vtx-spacing-4);\n min-height: 64px;\n}\n\n/* ===== Toast Icon ===== */\n.vtx-toast__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.vtx-toast--success .vtx-toast__icon {\n color: var(--vtx-color-success-600);\n}\n\n.vtx-toast--error .vtx-toast__icon {\n color: var(--vtx-color-error-600);\n}\n\n.vtx-toast--warning .vtx-toast__icon {\n color: var(--vtx-color-warning-600);\n}\n\n.vtx-toast--info .vtx-toast__icon {\n color: var(--vtx-color-info-600);\n}\n\n.vtx-toast--default .vtx-toast__icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast--primary .vtx-toast__icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* ===== Toast Content ===== */\n.vtx-toast__content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--vtx-spacing-1);\n min-width: 0; /* Allow content to shrink */\n}\n\n.vtx-toast__title {\n font-weight: var(--vtx-font-weight-semibold);\n font-size: var(--vtx-font-size-sm);\n line-height: 1.4;\n color: var(--vtx-color-neutral-900);\n margin: 0;\n}\n\n.vtx-toast--primary .vtx-toast__title {\n color: var(--vtx-color-primary-700);\n}\n\n.vtx-toast__description {\n font-size: var(--vtx-font-size-sm);\n line-height: 1.5;\n color: var(--vtx-color-neutral-700);\n margin: 0;\n}\n\n.vtx-toast--primary .vtx-toast__description {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast__body {\n font-size: var(--vtx-font-size-sm);\n line-height: 1.5;\n color: var(--vtx-color-neutral-800);\n margin: 0;\n}\n\n.vtx-toast--primary .vtx-toast__body {\n color: var(--vtx-color-primary-700);\n}\n\n/* ===== Toast Actions ===== */\n.vtx-toast__actions {\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-2);\n flex-shrink: 0;\n}\n\n.vtx-toast__action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--vtx-spacing-1) var(--vtx-spacing-3);\n background: transparent;\n border: 1px solid var(--vtx-color-primary-500);\n border-radius: var(--vtx-radius-base);\n color: var(--vtx-color-primary-600);\n font-size: var(--vtx-font-size-xs);\n font-weight: var(--vtx-font-weight-medium);\n line-height: 1;\n cursor: pointer;\n transition: all var(--vtx-transition-fast);\n text-decoration: none;\n white-space: nowrap;\n}\n\n.vtx-toast__action:hover {\n background: var(--vtx-color-primary-50);\n border-color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast__action:focus {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n.vtx-toast--primary .vtx-toast__action {\n border-color: var(--vtx-color-primary-500);\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast--primary .vtx-toast__action:hover {\n background: var(--vtx-color-primary-50);\n border-color: var(--vtx-color-primary-600);\n}\n\n.vtx-toast--primary .vtx-toast__action:focus {\n outline-color: var(--vtx-color-primary-500);\n}\n\n.vtx-toast__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--vtx-radius-base);\n color: var(--vtx-color-neutral-500);\n cursor: pointer;\n transition: all var(--vtx-transition-fast);\n flex-shrink: 0;\n}\n\n.vtx-toast__close:hover {\n background: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-700);\n}\n\n.vtx-toast__close:focus {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n.vtx-toast--primary .vtx-toast__close {\n color: var(--vtx-color-primary-500);\n}\n\n.vtx-toast--primary .vtx-toast__close:hover {\n background: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-700);\n}\n\n.vtx-toast--primary .vtx-toast__close:focus {\n outline-color: var(--vtx-color-primary-500);\n}\n\n/* ===== Progress Bar ===== */\n.vtx-toast__progress-container {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: var(--vtx-color-neutral-200);\n overflow: hidden;\n}\n\n.vtx-toast__progress {\n height: 100%;\n background: currentColor;\n transform-origin: left;\n transition: transform 16ms linear;\n}\n\n.vtx-toast--success .vtx-toast__progress {\n background: var(--vtx-color-success-500);\n}\n\n.vtx-toast--error .vtx-toast__progress {\n background: var(--vtx-color-error-500);\n}\n\n.vtx-toast--warning .vtx-toast__progress {\n background: var(--vtx-color-warning-500);\n}\n\n.vtx-toast--info .vtx-toast__progress {\n background: var(--vtx-color-info-500);\n}\n\n.vtx-toast--default .vtx-toast__progress {\n background: var(--vtx-color-primary-500);\n}\n\n.vtx-toast--primary .vtx-toast__progress {\n background: var(--vtx-color-primary-500);\n}\n\n/* ===== Toast Animations ===== */\n@keyframes vtx-toast-enter {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes vtx-toast-exit {\n from {\n opacity: 1;\n transform: translateX(0);\n max-height: 200px;\n margin-bottom: var(--vtx-toast-gap, 12px);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n max-height: 0;\n margin-bottom: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n}\n\n/* Position-specific animations */\n.vtx-toast-container--top-left .vtx-toast,\n.vtx-toast-container--bottom-left .vtx-toast {\n animation-name: vtx-toast-enter-left;\n}\n\n.vtx-toast-container--top-left .vtx-toast--exiting,\n.vtx-toast-container--bottom-left .vtx-toast--exiting {\n animation-name: vtx-toast-exit-left;\n}\n\n@keyframes vtx-toast-enter-left {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes vtx-toast-exit-left {\n from {\n opacity: 1;\n transform: translateX(0);\n max-height: 200px;\n margin-bottom: var(--vtx-toast-gap, 12px);\n }\n to {\n opacity: 0;\n transform: translateX(-100%);\n max-height: 0;\n margin-bottom: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n}\n\n.vtx-toast-container--top-center .vtx-toast,\n.vtx-toast-container--bottom-center .vtx-toast {\n animation-name: vtx-toast-enter-center;\n}\n\n.vtx-toast-container--top-center .vtx-toast--exiting,\n.vtx-toast-container--bottom-center .vtx-toast--exiting {\n animation-name: vtx-toast-exit-center;\n}\n\n@keyframes vtx-toast-enter-center {\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes vtx-toast-exit-center {\n from {\n opacity: 1;\n transform: translateY(0);\n max-height: 200px;\n margin-bottom: var(--vtx-toast-gap, 12px);\n }\n to {\n opacity: 0;\n transform: translateY(-100%);\n max-height: 0;\n margin-bottom: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n}\n\n/* ===== Dark Theme Support ===== */\n[data-vtx-toast-theme='dark'] .vtx-toast {\n background: var(--vtx-color-neutral-800);\n border-color: var(--vtx-color-neutral-700);\n color: var(--vtx-color-neutral-100);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__title {\n color: var(--vtx-color-neutral-100);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__description {\n color: var(--vtx-color-neutral-300);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__body {\n color: var(--vtx-color-neutral-200);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__close {\n color: var(--vtx-color-neutral-400);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__close:hover {\n background: var(--vtx-color-neutral-700);\n color: var(--vtx-color-neutral-200);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__progress-container {\n background: var(--vtx-color-neutral-600);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__action {\n border-color: var(--vtx-color-primary-400);\n color: var(--vtx-color-primary-400);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast__action:hover {\n background: var(--vtx-color-primary-900);\n border-color: var(--vtx-color-primary-300);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary {\n background: var(--vtx-color-primary-500);\n color: white;\n border: 1px solid var(--vtx-color-primary-500);\n border-left: 4px solid var(--vtx-color-primary-600);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__icon {\n color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__title {\n color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__description {\n color: rgba(255, 255, 255, 0.9);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__body {\n color: rgba(255, 255, 255, 0.95);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__close {\n color: rgba(255, 255, 255, 0.8);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__close:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__close:focus {\n outline-color: rgba(255, 255, 255, 0.8);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__progress {\n background: rgba(255, 255, 255, 0.8);\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__action {\n border-color: rgba(255, 255, 255, 0.6);\n color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__action:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: white;\n}\n\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__action:focus {\n outline-color: rgba(255, 255, 255, 0.8);\n}\n\n/* ===== Responsive Design ===== */\n@media (max-width: 640px) {\n .vtx-toast {\n min-width: 280px;\n max-width: calc(100vw - 32px);\n margin: 0;\n }\n\n .vtx-toast__wrapper {\n padding: var(--vtx-spacing-3);\n }\n\n .vtx-toast__actions {\n gap: var(--vtx-spacing-1);\n }\n\n .vtx-toast__action {\n font-size: var(--vtx-font-size-xs);\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n }\n}\n\n/* ===== High Contrast Mode ===== */\n@media (prefers-contrast: high) {\n .vtx-toast {\n border-width: 2px;\n }\n\n .vtx-toast__close:focus,\n .vtx-toast__action:focus {\n outline-width: 3px;\n }\n}\n\n/* ===== Reduced Motion ===== */\n@media (prefers-reduced-motion: reduce) {\n .vtx-toast {\n animation-duration: 1ms;\n }\n\n .vtx-toast__progress {\n transition: none;\n }\n}\n");const an={success:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm-2 15l-5-5 1.414-1.414L8 12.172l7.586-7.586L17 6l-9 9z",fill:"currentColor"})}),error:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm5 13.59L13.59 15 10 11.41 6.41 15 5 13.59 8.59 10 5 6.41 6.41 5 10 8.59 13.59 5 15 6.41 11.41 10 15 13.59z",fill:"currentColor"})}),warning:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z",fill:"currentColor"})}),info:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),default:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),primary:n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-6h2v6zm0-8H9V5h2v2z",fill:"currentColor"})})},ln=n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n("path",{d:"M12.854 4.854a.5.5 0 0 0-.708-.708L8 8.293 3.854 4.146a.5.5 0 1 0-.708.708L7.293 9l-4.147 4.146a.5.5 0 0 0 .708.708L8 9.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 9l4.147-4.146z",fill:"currentColor"})}),cn=o.forwardRef(({children:t,onDismiss:e,id:a,variant:l="default",autoClose:s=5e3,closeButton:d=!0,progressBar:x=!0,pauseOnHover:p=!0,pauseOnFocusLoss:m=!0,icon:u,action:h,className:g="",style:f,title:b,description:w,animationDuration:y=300,isVisible:k,createdAt:z,onClose:N,onOpen:C,toastId:S,..._},T)=>{const[$,L]=v(!1),[M,j]=v(!1),[B,A]=v(100),I=i(null),E=i(Date.now()),D=i(0),O=o.useCallback(()=>{L(!0),setTimeout(()=>{e()},y)},[e,y]);c(()=>{if(!1===s||M)return;return I.current=setInterval(()=>{const n=Date.now()-E.current-D.current,r=Math.max(0,s-n);A(r/s*100),r<=0&&O()},16),()=>{I.current&&clearInterval(I.current)}},[s,M,O]);const R=["vtx-toast",`vtx-toast--${l}`,$&&"vtx-toast--exiting",g].filter(Boolean).join(" ");return r("div",{ref:T,className:R,style:{...f,"--vtx-toast-animation-duration":`${y}ms`},onMouseEnter:()=>{p&&!M&&(j(!0),D.current=Date.now())},onMouseLeave:()=>{if(p&&M){j(!1);const n=Date.now()-D.current;E.current+=n}},onFocus:()=>{if(m&&M){j(!1);const n=Date.now()-D.current;E.current+=n}},onBlur:()=>{m&&!M&&(j(!0),D.current=Date.now())},role:"alert","aria-live":"polite","data-toast-id":a,..._,children:[r("div",{className:"vtx-toast__wrapper",children:[!1===u?null:n("div",u?{className:"vtx-toast__icon",children:u}:{className:"vtx-toast__icon",children:an[l]}),b||w?r("div",{className:"vtx-toast__content",children:[b&&n("div",{className:"vtx-toast__title",children:b}),w&&n("div",{className:"vtx-toast__description",children:w}),t&&n("div",{className:"vtx-toast__body",children:t})]}):n("div",{className:"vtx-toast__content",children:t}),r("div",{className:"vtx-toast__actions",children:[h&&n("button",{className:"vtx-toast__action",onClick:h.onClick,type:"button",children:h.label}),d&&n("button",{className:"vtx-toast__close",onClick:O,type:"button","aria-label":"Close notification",children:ln})]})]}),x&&!1!==s&&n("div",{className:"vtx-toast__progress-container",children:n("div",{className:"vtx-toast__progress",style:{transform:`scaleX(${B/100})`,animationPlayState:M?"paused":"running"}})})]})});cn.displayName="Toast";const vn=p(null),sn=()=>{const n=m(vn);if(!n)throw new Error("useToast must be used within a ToastProvider");return n},dn=({children:r})=>{const[t,e]=v([]),o=x(n=>{e(r=>{var t;const e=r.find(r=>r.id===n);return e&&(null===(t=e.onClose)||void 0===t||t.call(e)),r.filter(r=>r.id!==n)})},[]),a=x((n,r={})=>{var t;const a=r.toastId||Date.now()+Math.random(),i={id:a,content:n,createdAt:Date.now(),isVisible:!0,autoClose:5e3,closeButton:!0,progressBar:!0,pauseOnHover:!0,pauseOnFocusLoss:!0,variant:"default",animationDuration:300,...r};return e(n=>{const r=n.filter(n=>n.id!==a);return[i,...r]}),!1!==i.autoClose&&setTimeout(()=>{o(a)},i.autoClose),null===(t=r.onOpen)||void 0===t||t.call(r),a},[o]),i=x(()=>{e([])},[]),l=x((n,r)=>{e(t=>t.map(t=>t.id===n?{...t,...r}:t))},[]),c={toasts:t,addToast:a,removeToast:o,clearAllToasts:i,updateToast:l};return n(vn.Provider,{value:c,children:r})};class xn{constructor(){this.addToastFn=null,this.removeToastFn=null,this.clearAllToastsFn=null,this.updateToastFn=null}static getInstance(){return xn.instance||(xn.instance=new xn),xn.instance}setMethods(n,r,t,e){this.addToastFn=n,this.removeToastFn=r,this.clearAllToastsFn=t,this.updateToastFn=e}show(n,r){return this.addToastFn?this.addToastFn(n,r):(console.warn("Toast system not initialized. Make sure ToastContainer is mounted."),"")}success(n,r){return this.show(n,{...r,variant:"success"})}error(n,r){return this.show(n,{...r,variant:"error"})}warning(n,r){return this.show(n,{...r,variant:"warning"})}info(n,r){return this.show(n,{...r,variant:"info"})}primary(n,r){return this.show(n,{...r,variant:"primary"})}dismiss(n){this.removeToastFn?this.removeToastFn(n):console.warn("Toast system not initialized.")}dismissAll(){this.clearAllToastsFn?this.clearAllToastsFn():console.warn("Toast system not initialized.")}update(n,r){this.updateToastFn?this.updateToastFn(n,r):console.warn("Toast system not initialized.")}}const pn=xn.getInstance();S("/* ===== Toast Container Styles ===== */\n.vtx-toast-container {\n --vtx-toast-gap: 12px;\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n max-width: 100vw;\n pointer-events: none;\n}\n\n.vtx-toast-container__hidden-count {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n margin-bottom: var(--vtx-toast-gap);\n background: var(--vtx-color-neutral-100);\n border: 1px solid var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-full);\n color: var(--vtx-color-neutral-700);\n font-size: var(--vtx-font-size-xs);\n font-weight: var(--vtx-font-weight-medium);\n pointer-events: auto;\n backdrop-filter: blur(8px);\n animation: vtx-toast-fade-in 200ms ease-out;\n}\n\n.vtx-toast-container__list {\n display: flex;\n flex-direction: column;\n gap: var(--vtx-toast-gap);\n align-items: stretch;\n}\n\n/* ===== Position Variants ===== */\n.vtx-toast-container--top-left,\n.vtx-toast-container--top-center,\n.vtx-toast-container--top-right {\n flex-direction: column;\n}\n\n.vtx-toast-container--bottom-left,\n.vtx-toast-container--bottom-center,\n.vtx-toast-container--bottom-right {\n flex-direction: column-reverse;\n}\n\n.vtx-toast-container--bottom-left .vtx-toast-container__hidden-count,\n.vtx-toast-container--bottom-center .vtx-toast-container__hidden-count,\n.vtx-toast-container--bottom-right .vtx-toast-container__hidden-count {\n order: -1;\n margin-bottom: 0;\n margin-top: var(--vtx-toast-gap);\n}\n\n/* ===== Stacked Layout ===== */\n.vtx-toast-container--stacked .vtx-toast-container__list {\n position: relative;\n}\n\n.vtx-toast-container--stacked .vtx-toast:not(:first-child) {\n transform: translateY(-2px) scale(0.98);\n opacity: 0.9;\n z-index: -1;\n}\n\n.vtx-toast-container--stacked .vtx-toast:nth-child(3) {\n transform: translateY(-4px) scale(0.96);\n opacity: 0.8;\n}\n\n.vtx-toast-container--stacked .vtx-toast:nth-child(n + 4) {\n transform: translateY(-6px) scale(0.94);\n opacity: 0.7;\n}\n\n/* ===== Dark Theme Support ===== */\n[data-vtx-toast-theme='dark'] .vtx-toast-container__hidden-count {\n background: var(--vtx-color-neutral-800);\n border-color: var(--vtx-color-neutral-600);\n color: var(--vtx-color-neutral-300);\n}\n\n/* ===== Responsive Design ===== */\n@media (max-width: 640px) {\n .vtx-toast-container {\n left: var(--vtx-spacing-4) !important;\n right: var(--vtx-spacing-4) !important;\n transform: none !important;\n }\n\n .vtx-toast-container--stacked .vtx-toast:not(:first-child) {\n transform: translateY(-1px) scale(0.99);\n }\n\n .vtx-toast-container--stacked .vtx-toast:nth-child(3) {\n transform: translateY(-2px) scale(0.98);\n }\n\n .vtx-toast-container--stacked .vtx-toast:nth-child(n + 4) {\n transform: translateY(-3px) scale(0.97);\n }\n}\n\n/* ===== Animations ===== */\n@keyframes vtx-toast-fade-in {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* ===== Accessibility ===== */\n@media (prefers-reduced-motion: reduce) {\n .vtx-toast-container--stacked .vtx-toast:not(:first-child) {\n transform: none;\n opacity: 1;\n }\n\n .vtx-toast-container__hidden-count {\n animation: none;\n }\n}\n\n/* ===== Print Styles ===== */\n@media print {\n .vtx-toast-container {\n display: none;\n }\n}\n");const mn=({position:t="top-right",limit:e=5,gap:o=12,margin:a=16,className:l="",style:v,stacked:s=!0,theme:d="auto"})=>{const{toasts:x,removeToast:p,addToast:m,clearAllToasts:u,updateToast:h}=sn(),f=i(null);c(()=>{pn.setMethods(m,p,u,h)},[m,p,u,h]),c(()=>{if("auto"===d){const n=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{document.documentElement.setAttribute("data-vtx-toast-theme",n.matches?"dark":"light")};return r(),n.addEventListener("change",r),()=>n.removeEventListener("change",r)}document.documentElement.setAttribute("data-vtx-toast-theme",d)},[d]);const b=x.slice(0,e),w=Math.max(0,x.length-e),y=["vtx-toast-container",`vtx-toast-container--${t}`,s&&"vtx-toast-container--stacked",l].filter(Boolean).join(" ");return 0===b.length?null:g(r("div",{ref:f,className:y,style:{...(n=>{const r={position:"fixed",zIndex:"var(--vtx-z-notification, 1400)",pointerEvents:"none"};switch(n){case"top-left":return{...r,top:a,left:a};case"top-center":return{...r,top:a,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...r,top:a,right:a};case"bottom-left":return{...r,bottom:a,left:a};case"bottom-center":return{...r,bottom:a,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:a,right:a}}})(t),"--vtx-toast-gap":`${o}px`,...v},"aria-live":"polite","aria-label":"Notifications",children:[w>0&&r("div",{className:"vtx-toast-container__hidden-count",children:["+",w," more"]}),n("div",{className:"vtx-toast-container__list",children:b.map((r,t)=>n(cn,{id:r.id,isVisible:r.isVisible,onDismiss:()=>p(r.id),variant:r.variant,autoClose:r.autoClose,closeButton:r.closeButton,progressBar:r.progressBar,pauseOnHover:r.pauseOnHover,pauseOnFocusLoss:r.pauseOnFocusLoss,icon:r.icon,action:r.action,className:r.className,style:r.style,title:r.title,description:r.description,animationDuration:r.animationDuration,createdAt:r.createdAt,onClose:r.onClose,onOpen:r.onOpen,"data-toast-index":t,children:r.content},r.id))})]}),document.body)},un=({children:t,...e})=>r(dn,{children:[t,n(mn,{...e})]});S(".vtx-tooltip {\n position: fixed;\n z-index: var(--vtx-z-tooltip);\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n background-color: var(--vtx-color-neutral-900);\n color: white;\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n border-radius: var(--vtx-radius-md);\n max-width: 300px;\n word-wrap: break-word;\n pointer-events: auto;\n box-shadow: var(--vtx-shadow-lg);\n opacity: 0;\n transition:\n opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform, opacity;\n}\n\n.vtx-tooltip--visible {\n opacity: 1;\n}\n\n/* Inner wrapper for content and close button */\n.vtx-tooltip-inner {\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-2);\n}\n\n.vtx-tooltip-content {\n flex: 1;\n min-width: 0;\n}\n\n/* Close button */\n.vtx-tooltip-close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n color: currentColor;\n cursor: pointer;\n border-radius: var(--vtx-radius-sm);\n transition: all var(--vtx-transition-base);\n opacity: 0.7;\n margin-top: -2px;\n}\n\n.vtx-tooltip-close:hover {\n opacity: 1;\n background: rgba(255, 255, 255, 0.1);\n}\n\n.vtx-tooltip-close:active {\n transform: scale(0.95);\n}\n\n.vtx-tooltip-close:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n opacity: 1;\n}\n\n/* Placement-specific transforms with entry animations */\n.vtx-tooltip--top {\n transform: translate(-50%, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom center;\n}\n\n.vtx-tooltip--top.vtx-tooltip--visible {\n transform: translate(-50%, -100%) scale(1);\n}\n\n.vtx-tooltip--bottom {\n transform: translate(-50%, 4px) scale(0.9);\n transform-origin: top center;\n}\n\n.vtx-tooltip--bottom.vtx-tooltip--visible {\n transform: translate(-50%, 0) scale(1);\n}\n\n.vtx-tooltip--left {\n transform: translate(calc(-100% - 4px), -50%) scale(0.9);\n transform-origin: right center;\n}\n\n.vtx-tooltip--left.vtx-tooltip--visible {\n transform: translate(-100%, -50%) scale(1);\n}\n\n.vtx-tooltip--right {\n transform: translate(4px, -50%) scale(0.9);\n transform-origin: left center;\n}\n\n.vtx-tooltip--right.vtx-tooltip--visible {\n transform: translate(0, -50%) scale(1);\n}\n\n/* Placement-start and placement-end variants */\n.vtx-tooltip--top-start {\n transform: translate(0, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom left;\n}\n\n.vtx-tooltip--top-start.vtx-tooltip--visible {\n transform: translate(0, -100%) scale(1);\n}\n\n.vtx-tooltip--top-end {\n transform: translate(-100%, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom right;\n}\n\n.vtx-tooltip--top-end.vtx-tooltip--visible {\n transform: translate(-100%, -100%) scale(1);\n}\n\n.vtx-tooltip--bottom-start {\n transform: translate(0, 4px) scale(0.9);\n transform-origin: top left;\n}\n\n.vtx-tooltip--bottom-start.vtx-tooltip--visible {\n transform: translate(0, 0) scale(1);\n}\n\n.vtx-tooltip--bottom-end {\n transform: translate(-100%, 4px) scale(0.9);\n transform-origin: top right;\n}\n\n.vtx-tooltip--bottom-end.vtx-tooltip--visible {\n transform: translate(-100%, 0) scale(1);\n}\n\n.vtx-tooltip--left-start {\n transform: translate(calc(-100% - 4px), 0) scale(0.9);\n transform-origin: right top;\n}\n\n.vtx-tooltip--left-start.vtx-tooltip--visible {\n transform: translate(-100%, 0) scale(1);\n}\n\n.vtx-tooltip--left-end {\n transform: translate(calc(-100% - 4px), -100%) scale(0.9);\n transform-origin: right bottom;\n}\n\n.vtx-tooltip--left-end.vtx-tooltip--visible {\n transform: translate(-100%, -100%) scale(1);\n}\n\n.vtx-tooltip--right-start {\n transform: translate(4px, 0) scale(0.9);\n transform-origin: left top;\n}\n\n.vtx-tooltip--right-start.vtx-tooltip--visible {\n transform: translate(0, 0) scale(1);\n}\n\n.vtx-tooltip--right-end {\n transform: translate(4px, -100%) scale(0.9);\n transform-origin: left bottom;\n}\n\n.vtx-tooltip--right-end.vtx-tooltip--visible {\n transform: translate(0, -100%) scale(1);\n}\n\n/* Variants */\n.vtx-tooltip--dark {\n background-color: var(--vtx-color-neutral-900);\n color: white;\n}\n\n.vtx-tooltip--light {\n background-color: white;\n color: var(--vtx-color-neutral-900);\n border: 1px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-tooltip--light .vtx-tooltip-close:hover {\n background: var(--vtx-color-neutral-100);\n}\n\n.vtx-tooltip--error {\n background-color: var(--vtx-color-error-600);\n color: white;\n}\n\n.vtx-tooltip--warning {\n background-color: var(--vtx-color-warning-500);\n color: var(--vtx-color-neutral-900);\n}\n\n.vtx-tooltip--success {\n background-color: var(--vtx-color-success-600);\n color: white;\n}\n\n.vtx-tooltip--info {\n background-color: var(--vtx-color-info-600);\n color: white;\n}\n\n/* Arrow */\n.vtx-tooltip--with-arrow .vtx-tooltip-arrow {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: inherit;\n transform: rotate(45deg);\n border: inherit;\n}\n\n.vtx-tooltip--top .vtx-tooltip-arrow {\n bottom: -4px;\n left: 50%;\n margin-left: -4px;\n}\n\n.vtx-tooltip--bottom .vtx-tooltip-arrow {\n top: -4px;\n left: 50%;\n margin-left: -4px;\n}\n\n.vtx-tooltip--left .vtx-tooltip-arrow {\n right: -4px;\n top: 50%;\n margin-top: -4px;\n}\n\n.vtx-tooltip--right .vtx-tooltip-arrow {\n left: -4px;\n top: 50%;\n margin-top: -4px;\n}\n");const hn=o.forwardRef(({content:e,placement:o="top",delay:a=200,hideDelay:l=0,children:s,open:d,disabled:x=!1,arrow:p=!1,maxWidth:m="300px",variant:h="dark",dismissible:f=!1,onShow:b,onHide:w,onDismiss:y,className:k="",...z},N)=>{const[C,S]=v(d||!1),[_,T]=v(!1),[$,L]=v({top:0,left:0}),M=i(null),j=i(null),B=i(null),A=i(null),I=i(!1),E=()=>{x||(I.current=!0,B.current&&clearTimeout(B.current),A.current&&clearTimeout(A.current),j.current=setTimeout(()=>{if(M.current&&I.current){const n=M.current.getBoundingClientRect(),r=O(n,o);L(r),T(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{S(!0),null==b||b()})})}},a))},D=()=>{I.current=!1,j.current&&clearTimeout(j.current),B.current=setTimeout(()=>{I.current||(S(!1),null==w||w(),A.current=setTimeout(()=>{T(!1)},150))},l)},O=(n,r)=>{const t=p?12:8;let e=0,o=0;return r.startsWith("top")?(e=n.top-t+window.scrollY,o=n.left+n.width/2+window.scrollX,"top-start"===r&&(o=n.left+window.scrollX),"top-end"===r&&(o=n.right+window.scrollX)):r.startsWith("bottom")?(e=n.bottom+t+window.scrollY,o=n.left+n.width/2+window.scrollX,"bottom-start"===r&&(o=n.left+window.scrollX),"bottom-end"===r&&(o=n.right+window.scrollX)):r.startsWith("left")?(e=n.top+n.height/2+window.scrollY,o=n.left-t+window.scrollX,"left-start"===r&&(e=n.top+window.scrollY),"left-end"===r&&(e=n.bottom+window.scrollY)):r.startsWith("right")&&(e=n.top+n.height/2+window.scrollY,o=n.right+t+window.scrollX,"right-start"===r&&(e=n.top+window.scrollY),"right-end"===r&&(e=n.bottom+window.scrollY)),{top:e,left:o}};c(()=>{void 0!==d&&(d?(T(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{S(!0)})})):(S(!1),A.current=setTimeout(()=>{T(!1)},150)))},[d]),c(()=>()=>{j.current&&clearTimeout(j.current),B.current&&clearTimeout(B.current),A.current&&clearTimeout(A.current)},[]);const R=["vtx-tooltip",`vtx-tooltip--${o}`,`vtx-tooltip--${h}`,p&&"vtx-tooltip--with-arrow",C&&"vtx-tooltip--visible",k].filter(Boolean).join(" "),W=void 0!==d&&d||_,H=u(s,{ref:n=>{M.current=n;const r=s.ref;"function"==typeof r?r(n):r&&"object"==typeof r&&"current"in r&&(r.current=n)},onMouseEnter:n=>{var r,t;void 0===d&&E(),null===(t=(r=s.props).onMouseEnter)||void 0===t||t.call(r,n)},onMouseLeave:n=>{var r,t;void 0===d&&D(),null===(t=(r=s.props).onMouseLeave)||void 0===t||t.call(r,n)},onFocus:n=>{var r,t;void 0===d&&E(),null===(t=(r=s.props).onFocus)||void 0===t||t.call(r,n)},onBlur:n=>{var r,t;void 0===d&&D(),null===(t=(r=s.props).onBlur)||void 0===t||t.call(r,n)},"aria-describedby":C?"vtx-tooltip-content":void 0});return r(t,{children:[H,W&&g(r("div",{ref:N,id:"vtx-tooltip-content",role:"tooltip",className:R,style:{top:`${$.top}px`,left:`${$.left}px`,maxWidth:m},onMouseEnter:()=>{x||void 0!==d||(I.current=!0,B.current&&clearTimeout(B.current))},onMouseLeave:()=>{x||void 0!==d||D()},...z,children:[p&&n("span",{className:"vtx-tooltip-arrow","aria-hidden":"true"}),r("div",{className:"vtx-tooltip-inner",children:[n("span",{className:"vtx-tooltip-content",children:e}),f&&n("button",{type:"button",className:"vtx-tooltip-close",onClick:()=>{I.current=!1,S(!1),null==y||y(),null==w||w(),A.current=setTimeout(()=>{T(!1)},150)},"aria-label":"Dismiss tooltip",children:n("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","aria-hidden":"true",children:n("path",{d:"M11 3L3 11M3 3L11 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]}),document.body)]})});hn.displayName="Tooltip";S(".vtx-avatar {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n background-color: var(--vtx-color-neutral-200);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-avatar-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.vtx-avatar-fallback {\r\n font-family: var(--vtx-font-family-sans);\r\n font-weight: var(--vtx-font-weight-medium);\r\n color: var(--vtx-color-neutral-700);\r\n user-select: none;\r\n}\r\n\r\n/* Sizes */\r\n\r\n.vtx-avatar--sm {\r\n width: 32px;\r\n height: 32px;\r\n}\r\n.vtx-avatar--sm .vtx-avatar-fallback {\r\n font-size: var(--vtx-font-size-xs);\r\n}\r\n\r\n.vtx-avatar--md {\r\n width: 40px;\r\n height: 40px;\r\n}\r\n.vtx-avatar--md .vtx-avatar-fallback {\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-avatar--lg {\r\n width: 56px;\r\n height: 56px;\r\n}\r\n.vtx-avatar--lg .vtx-avatar-fallback {\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n/* Shapes */\r\n.vtx-avatar--circle {\r\n border-radius: var(--vtx-radius-full);\r\n}\r\n\r\n.vtx-avatar--square {\r\n border-radius: var(--vtx-radius-md);\r\n}\r\n");const gn=o.forwardRef(({src:t,alt:e="",size:o,shape:a="circle",fallback:i="?",onImageError:l,onImageLoad:c,imgProps:s,statusIndicator:d,statusPosition:x="bottom-right",className:p="",...m},u)=>{const{theme:h}=C(),g=o||h.defaultSize||"md",[f,b]=v(!1),w=["vtx-avatar",`vtx-avatar--${g}`,`vtx-avatar--${a}`,d&&"vtx-avatar--with-status",p].filter(Boolean).join(" "),y=t&&!f,k=i.slice(0,2).toUpperCase();return r("div",{ref:u,className:w,role:"img","aria-label":e||i||"Avatar",...m,children:[y?n("img",{src:t,alt:e,className:"vtx-avatar-image",onError:n=>{b(!0),null==l||l(n)},onLoad:n=>{null==c||c(n)},loading:"lazy",...s}):n("span",{className:"vtx-avatar-fallback","aria-hidden":"true",children:k}),d&&n("span",{className:`vtx-avatar-status vtx-avatar-status--${x}`,"aria-label":"Status indicator",children:d})]})});gn.displayName="Avatar";S(".vtx-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--vtx-spacing-1);\n font-family: var(--vtx-font-family-sans);\n font-weight: var(--vtx-font-weight-medium);\n line-height: 1;\n white-space: nowrap;\n border-radius: var(--vtx-radius-base);\n transition: all var(--vtx-transition-base);\n}\n\n/* Sizes */\n.vtx-badge--small {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-xs);\n}\n\n.vtx-badge--medium {\n padding: calc(var(--vtx-spacing-1) + 1px) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-badge--large {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n font-size: var(--vtx-font-size-base);\n}\n\n/* Variants */\n.vtx-badge--neutral {\n background-color: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-800);\n}\n\n.vtx-badge--primary {\n background-color: var(--vtx-color-primary-100);\n color: var(--vtx-color-primary-800);\n}\n\n.vtx-badge--success {\n background-color: var(--vtx-color-success-50);\n color: var(--vtx-color-success-700);\n}\n\n.vtx-badge--warning {\n background-color: var(--vtx-color-warning-50);\n color: var(--vtx-color-warning-700);\n}\n\n.vtx-badge--error {\n background-color: var(--vtx-color-error-50);\n color: var(--vtx-color-error-700);\n}\n\n.vtx-badge--info {\n background-color: var(--vtx-color-info-50);\n color: var(--vtx-color-info-700);\n}\n\n/* Pill shape */\n.vtx-badge--pill {\n border-radius: var(--vtx-radius-full);\n}\n\n/* Dot indicator */\n.vtx-badge-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--vtx-radius-full);\n flex-shrink: 0;\n}\n\n.vtx-badge--neutral .vtx-badge-dot {\n background-color: var(--vtx-color-neutral-600);\n}\n\n.vtx-badge--primary .vtx-badge-dot {\n background-color: var(--vtx-color-primary-600);\n}\n\n.vtx-badge--success .vtx-badge-dot {\n background-color: var(--vtx-color-success-600);\n}\n\n.vtx-badge--warning .vtx-badge-dot {\n background-color: var(--vtx-color-warning-600);\n}\n\n.vtx-badge--error .vtx-badge-dot {\n background-color: var(--vtx-color-error-600);\n}\n\n.vtx-badge--info .vtx-badge-dot {\n background-color: var(--vtx-color-info-600);\n}\n");const fn=o.forwardRef(({variant:t="neutral",size:e="medium",pill:o=!1,dot:a=!1,outline:i=!1,maxLength:l,icon:c,children:v,className:s="",onRemove:d,...x},p)=>{const m=["vtx-badge",`vtx-badge--${t}`,`vtx-badge--${e}`,o&&"vtx-badge--pill",a&&"vtx-badge--with-dot",i&&"vtx-badge--outline",d&&"vtx-badge--removable",s].filter(Boolean).join(" "),u=h(()=>l&&"string"==typeof v&&v.length>l?`${v.slice(0,l)}...`:v,[v,l]);return r("span",{ref:p,className:m,...x,children:[a&&n("span",{className:"vtx-badge-dot","aria-hidden":"true"}),c&&n("span",{className:"vtx-badge-icon","aria-hidden":"true",children:c}),n("span",{className:"vtx-badge-content",children:u}),d&&n("button",{type:"button",className:"vtx-badge-remove",onClick:d,"aria-label":"Remove badge",children:n("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:n("path",{d:"M9 3L3 9M3 3L9 9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})});fn.displayName="Badge";S(".vtx-card {\r\n background-color: var(--vtx-color-white);\r\n border-radius: var(--vtx-radius-lg, 12px);\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n overflow: hidden;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n font-family: var(--vtx-font-family-sans);\r\n isolation: isolate; /* Create stacking context for better layering */\r\n box-sizing: border-box;\r\n width: 100%;\r\n}\r\n\r\n/* Sizes with refined spacing */\r\n.vtx-card--sm {\r\n --vtx-card-padding: var(--vtx-spacing-3, 12px);\r\n border-radius: var(--vtx-radius-md, 8px);\r\n}\r\n\r\n.vtx-card--md {\r\n --vtx-card-padding: var(--vtx-spacing-4, 16px);\r\n border-radius: var(--vtx-radius-lg, 12px);\r\n}\r\n\r\n.vtx-card--lg {\r\n --vtx-card-padding: var(--vtx-spacing-6, 24px);\r\n border-radius: var(--vtx-radius-xl, 16px);\r\n}\r\n\r\n/* Variants with enhanced visual design */\r\n.vtx-card--elevated {\r\n box-shadow: \r\n 0 1px 3px 0 rgba(0, 0, 0, 0.1),\r\n 0 1px 2px -1px rgba(0, 0, 0, 0.1);\r\n border: 1px solid rgba(0, 0, 0, 0.05);\r\n background-color: var(--vtx-color-white);\r\n}\r\n\r\n.vtx-card--outlined {\r\n box-shadow: none;\r\n border: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n background-color: var(--vtx-color-white);\r\n}\r\n\r\n.vtx-card--filled {\r\n box-shadow: none;\r\n border: 1px solid var(--vtx-color-neutral-100, #f5f5f5);\r\n background-color: var(--vtx-color-neutral-50, #fafafa);\r\n}\r\n\r\n/* Card Content with improved typography */\r\n.vtx-card-content {\r\n padding: var(--vtx-card-padding, 16px);\r\n flex: 1;\r\n line-height: 1.6;\r\n color: var(--vtx-color-neutral-900, #1a1a1a);\r\n}\r\n\r\n.vtx-card-content > *:first-child {\r\n margin-top: 0;\r\n}\r\n\r\n.vtx-card-content > *:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n/* No Padding Modifier */\r\n.vtx-card--no-padding .vtx-card-content {\r\n padding: 0;\r\n}\r\n\r\n/* Header and Footer with refined styling */\r\n.vtx-card-header,\r\n.vtx-card-footer {\r\n padding: var(--vtx-card-padding, 16px);\r\n}\r\n\r\n.vtx-card-header {\r\n color: var(--vtx-color-neutral-900, #1a1a1a);\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-card-footer {\r\n color: var(--vtx-color-neutral-700, #404040);\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n gap: var(--vtx-spacing-2, 8px);\r\n}\r\n\r\n.vtx-card-header--divider {\r\n border-bottom: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n background-color: var(--vtx-color-neutral-25, #fcfcfc);\r\n}\r\n\r\n.vtx-card-footer--divider {\r\n border-top: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n background-color: var(--vtx-color-neutral-25, #fcfcfc);\r\n}\r\n\r\n/* Maintain consistent padding when noPadding is set */\r\n.vtx-card--no-padding .vtx-card-header,\r\n.vtx-card--no-padding .vtx-card-footer {\r\n padding: var(--vtx-card-padding, 16px);\r\n}\r\n\r\n/* Enhanced Interactive States */\r\n.vtx-card--hoverable {\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-card--hoverable:hover {\r\n transform: translateY(-1px);\r\n}\r\n\r\n.vtx-card--elevated.vtx-card--hoverable:hover {\r\n box-shadow: \r\n 0 10px 15px -3px rgba(0, 0, 0, 0.1),\r\n 0 4px 6px -4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-card--outlined.vtx-card--hoverable:hover {\r\n border-color: var(--vtx-color-neutral-300, #d4d4d4);\r\n box-shadow: \r\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\r\n 0 2px 4px -2px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-card--filled.vtx-card--hoverable:hover {\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n box-shadow: \r\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\r\n 0 2px 4px -2px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-card--clickable {\r\n cursor: pointer;\r\n user-select: none;\r\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-card--clickable:active {\r\n transform: translateY(0) scale(0.98);\r\n}\r\n\r\n/* Enhanced Focus State for better accessibility */\r\n.vtx-card:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500, #3b82f6);\r\n outline-offset: 2px;\r\n box-shadow: \r\n 0 0 0 4px rgba(59, 130, 246, 0.1),\r\n 0 1px 3px 0 rgba(0, 0, 0, 0.1),\r\n 0 1px 2px -1px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* Loading state */\r\n.vtx-card--loading {\r\n position: relative;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-card--loading::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(2px);\r\n z-index: 1;\r\n}\r\n\r\n/* Media queries for responsive design */\r\n@media (max-width: 768px) {\r\n .vtx-card--sm {\r\n --vtx-card-padding: var(--vtx-spacing-2, 8px);\r\n }\r\n \r\n .vtx-card--md {\r\n --vtx-card-padding: var(--vtx-spacing-3, 12px);\r\n }\r\n \r\n .vtx-card--lg {\r\n --vtx-card-padding: var(--vtx-spacing-4, 16px);\r\n }\r\n \r\n .vtx-card-footer {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: var(--vtx-spacing-3, 12px);\r\n }\r\n}\r\n\r\n/* Reduced motion support */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-card,\r\n .vtx-card--hoverable,\r\n .vtx-card--clickable {\r\n transition: none;\r\n }\r\n \r\n .vtx-card--hoverable:hover,\r\n .vtx-card--clickable:active {\r\n transform: none;\r\n }\r\n}\r\n\r\n/* High contrast mode support */\r\n@media (prefers-contrast: high) {\r\n .vtx-card--outlined {\r\n border-width: 2px;\r\n border-color: var(--vtx-color-neutral-900, #000);\r\n }\r\n \r\n .vtx-card-header--divider,\r\n .vtx-card-footer--divider {\r\n border-width: 2px;\r\n border-color: var(--vtx-color-neutral-900, #000);\r\n }\r\n}\r\n");const bn=o.forwardRef(({children:t,variant:e="elevated",size:o,noPadding:a=!1,padding:i,hoverable:l=!1,clickable:c=!1,className:v="",header:s,footer:d,divider:x=!1,style:p,onClick:m,tabIndex:u,...h},g)=>{const{theme:f}=C(),b=["vtx-card",`vtx-card--${e}`,`vtx-card--${o||(null==f?void 0:f.defaultSize)||"md"}`,l?"vtx-card--hoverable":"",c?"vtx-card--clickable":"",a&&!i?"vtx-card--no-padding":"",v].filter(Boolean).join(" "),w={...p||{},...i?{"--vtx-card-padding":i}:{}};return r("div",{ref:g,className:b,style:w,onClick:m,tabIndex:c?"number"==typeof u?u:0:u,...h,children:[s&&n("div",{className:"vtx-card-header"+(x?" vtx-card-header--divider":""),children:s}),n("div",{className:"vtx-card-content",children:t}),d&&n("div",{className:"vtx-card-footer"+(x?" vtx-card-footer--divider":""),children:d})]})});bn.displayName="Card";S("/* Base divider styles */\n.vtx-divider {\n margin: 0;\n flex-shrink: 0;\n border-width: 0;\n border-style: solid;\n border-color: var(--vtx-divider-color, var(--vtx-color-neutral-200));\n border-bottom-width: thin;\n}\n\n/* Light variant */\n.vtx-divider--light {\n border-color: var(--vtx-divider-color-light, var(--vtx-color-neutral-100));\n}\n\n/* Horizontal orientation (default) */\n.vtx-divider--horizontal {\n width: 100%;\n border-bottom-width: 1px;\n}\n\n/* Vertical orientation */\n.vtx-divider--vertical {\n height: auto;\n align-self: stretch;\n border-bottom-width: 0;\n border-right-width: 1px;\n}\n\n/* Flex item variant */\n.vtx-divider--flex-item {\n height: auto;\n align-self: stretch;\n}\n\n.vtx-divider--flex-item.vtx-divider--horizontal {\n height: 1px;\n width: 100%;\n align-self: auto;\n}\n\n/* Variants */\n.vtx-divider--fullWidth {\n width: 100%;\n}\n\n.vtx-divider--inset {\n margin-left: var(--vtx-spacing-9);\n}\n\n.vtx-divider--middle {\n margin-left: var(--vtx-spacing-3);\n margin-right: var(--vtx-spacing-3);\n}\n\n.vtx-divider--vertical.vtx-divider--inset {\n margin-left: 0;\n margin-top: var(--vtx-spacing-2);\n}\n\n.vtx-divider--vertical.vtx-divider--middle {\n margin-left: 0;\n margin-right: 0;\n margin-top: var(--vtx-spacing-2);\n margin-bottom: var(--vtx-spacing-2);\n}\n\n/* With children */\n.vtx-divider--with-children {\n display: flex;\n white-space: nowrap;\n text-align: center;\n border: 0;\n border-color: var(--vtx-divider-color, var(--vtx-color-neutral-200));\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-divider-text-size, var(--vtx-font-size-sm));\n color: var(--vtx-divider-text-color, var(--vtx-color-neutral-600));\n font-weight: var(--vtx-divider-text-weight, var(--vtx-font-weight-medium));\n}\n\n.vtx-divider--with-children.vtx-divider--light {\n border-color: var(--vtx-divider-color-light, var(--vtx-color-neutral-100));\n color: var(--vtx-divider-text-color-light, var(--vtx-color-neutral-500));\n}\n\n.vtx-divider--with-children::before,\n.vtx-divider--with-children::after {\n content: '';\n align-self: center;\n border-top: thin solid;\n border-color: inherit;\n}\n\n/* Text alignment - horizontal only */\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-center::before {\n width: 100%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-center::after {\n width: 100%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-left::before {\n width: 5%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-left::after {\n width: 100%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-right::before {\n width: 100%;\n}\n\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-right::after {\n width: 5%;\n}\n\n/* Wrapper for children content */\n.vtx-divider-wrapper {\n display: inline-flex;\n align-items: center;\n padding-left: var(--vtx-spacing-3);\n padding-right: var(--vtx-spacing-3);\n}\n\n/* Vertical divider with children (not commonly used but supported) */\n.vtx-divider--with-children.vtx-divider--vertical {\n flex-direction: column;\n}\n\n.vtx-divider--with-children.vtx-divider--vertical::before,\n.vtx-divider--with-children.vtx-divider--vertical::after {\n border-top: 0;\n border-left: thin solid;\n height: 100%;\n width: auto;\n}\n\n.vtx-divider--with-children.vtx-divider--vertical .vtx-divider-wrapper {\n padding-left: 0;\n padding-right: 0;\n padding-top: var(--vtx-spacing-2);\n padding-bottom: var(--vtx-spacing-2);\n}\n");const wn=o.forwardRef(({textAlign:r="center",orientation:t="horizontal",variant:e="fullWidth",light:o=!1,flexItem:a=!1,children:i,component:l,className:c="",role:v,...s},d)=>{const x=l||(i||"vertical"===t?"div":"hr"),p=v||("hr"!==x?"separator":void 0),m=["vtx-divider",`vtx-divider--${t}`,`vtx-divider--${e}`,o&&"vtx-divider--light",a&&"vtx-divider--flex-item",i&&"vtx-divider--with-children",i&&`vtx-divider--text-${r}`,c].filter(Boolean).join(" ");return n(x,{ref:d,className:m,role:p,..."vertical"===t&&"hr"!==x?{"aria-orientation":"vertical"}:{},...s,children:i&&n("span",{className:"vtx-divider-wrapper",children:i})})});wn.displayName="Divider";S("/* Header Component Styles */\n\n.vtx-header {\n display: flex;\n align-items: center;\n padding: 0 var(--vtx-spacing-6);\n background: var(--vtx-background-primary);\n border-bottom: 1px solid var(--vtx-border-color);\n height: 64px;\n gap: var(--vtx-spacing-4);\n z-index: var(--vtx-z-sticky);\n}\n\n.vtx-header--sticky {\n position: sticky;\n top: 0;\n}\n\n/* Toggle Button */\n.vtx-header-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n border: none;\n border-radius: var(--vtx-radius-md);\n background: transparent;\n color: var(--vtx-color-neutral-700);\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-header-toggle:hover {\n background: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-900);\n}\n\n.vtx-header-toggle:active {\n background: var(--vtx-color-neutral-200);\n transform: scale(0.95);\n}\n\n/* Logo */\n.vtx-header-logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n/* Title */\n.vtx-header-title {\n color: var(--vtx-color-neutral-900);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Actions */\n.vtx-header-actions {\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-3);\n margin-left: auto;\n margin-right: var(--vtx-spacing-4);\n}\n\n/* Right Section */\n.vtx-header-right {\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-2);\n margin-left: auto;\n padding-left: var(--vtx-spacing-4);\n border-left: 1px solid var(--vtx-border-color);\n height: 40px;\n}\n\n/* Icon Button */\n.vtx-header-icon-button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n border: none;\n border-radius: var(--vtx-radius-lg);\n background: transparent;\n color: var(--vtx-color-neutral-600);\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-header-icon-button:hover {\n background: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-900);\n transform: scale(1.05);\n}\n\n.vtx-header-icon-button:active {\n transform: scale(0.95);\n}\n\n.vtx-header-icon-button--active {\n background: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n}\n\n/* Notifications */\n.vtx-header-notifications {\n position: relative;\n}\n\n.vtx-header-notifications-panel {\n position: absolute;\n top: calc(100% + 12px);\n right: 0;\n width: 380px;\n max-height: 500px;\n background: var(--vtx-background-primary);\n border: 1px solid var(--vtx-color-neutral-200);\n border-radius: var(--vtx-radius-lg);\n box-shadow:\n 0 4px 20px rgba(0, 0, 0, 0.08),\n 0 0 1px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n animation: slideDown 0.2s ease-out;\n z-index: var(--vtx-z-dropdown);\n}\n\n.vtx-header-notifications-header {\n padding: var(--vtx-spacing-4);\n border-bottom: 1px solid var(--vtx-border-color);\n}\n\n.vtx-header-notifications-mark-read {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n border: none;\n border-radius: var(--vtx-radius-sm);\n background: transparent;\n color: var(--vtx-color-primary-600);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-header-notifications-mark-read:hover {\n background: var(--vtx-color-primary-50);\n}\n\n.vtx-header-notifications-list {\n max-height: 400px;\n overflow-y: auto;\n}\n\n.vtx-header-notifications-list::-webkit-scrollbar {\n width: 6px;\n}\n\n.vtx-header-notifications-list::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.vtx-header-notifications-list::-webkit-scrollbar-thumb {\n background: var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-full);\n}\n\n.vtx-header-notifications-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--vtx-spacing-2);\n padding: var(--vtx-spacing-8) var(--vtx-spacing-4);\n color: var(--vtx-color-neutral-400);\n}\n\n.vtx-header-notification-item {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-3);\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n border-bottom: 1px solid var(--vtx-border-color);\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-header-notification-item:last-child {\n border-bottom: none;\n}\n\n.vtx-header-notification-item:hover {\n background: var(--vtx-color-neutral-50);\n}\n\n.vtx-header-notification-item--unread {\n background: var(--vtx-color-primary-50);\n}\n\n.vtx-header-notification-item--unread:hover {\n background: var(--vtx-color-primary-100);\n}\n\n.vtx-header-notification-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: var(--vtx-radius-full);\n background: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-700);\n flex-shrink: 0;\n}\n\n.vtx-header-notification-item--info .vtx-header-notification-icon {\n background: var(--vtx-color-info-50);\n color: var(--vtx-color-info-600);\n}\n\n.vtx-header-notification-item--success .vtx-header-notification-icon {\n background: var(--vtx-color-success-50);\n color: var(--vtx-color-success-600);\n}\n\n.vtx-header-notification-item--warning .vtx-header-notification-icon {\n background: var(--vtx-color-warning-50);\n color: var(--vtx-color-warning-600);\n}\n\n.vtx-header-notification-item--error .vtx-header-notification-icon {\n background: var(--vtx-color-error-50);\n color: var(--vtx-color-error-600);\n}\n\n.vtx-header-notification-content {\n flex: 1;\n min-width: 0;\n}\n\n.vtx-header-notification-dot {\n width: 8px;\n height: 8px;\n border-radius: var(--vtx-radius-full);\n background: var(--vtx-color-primary-600);\n flex-shrink: 0;\n margin-top: 6px;\n}\n\n/* User Menu */\n.vtx-header-user-menu {\n position: relative;\n}\n\n.vtx-header-user-button {\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-2);\n padding: var(--vtx-spacing-1) var(--vtx-spacing-3);\n border: none;\n border-radius: var(--vtx-radius-lg);\n background: transparent;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n height: 40px;\n}\n\n.vtx-header-user-button:hover {\n background: var(--vtx-color-neutral-100);\n}\n\n.vtx-header-user-button:active {\n transform: scale(0.98);\n}\n\n.vtx-header-user-button--active {\n background: var(--vtx-color-primary-50);\n}\n\n.vtx-header-user-info {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: left;\n min-width: 0;\n}\n\n.vtx-header-user-info > * {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 150px;\n}\n\n.vtx-header-user-dropdown {\n position: absolute;\n top: calc(100% + 12px);\n right: 0;\n min-width: 220px;\n background: var(--vtx-background-primary);\n border: 1px solid var(--vtx-color-neutral-200);\n border-radius: var(--vtx-radius-lg);\n box-shadow:\n 0 4px 20px rgba(0, 0, 0, 0.08),\n 0 0 1px rgba(0, 0, 0, 0.1);\n animation: slideDown 0.2s ease-out;\n z-index: var(--vtx-z-dropdown);\n overflow: hidden;\n}\n\n/* Slide Down Animation */\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Dark Mode */\n[data-theme='dark'] .vtx-header {\n background: var(--vtx-background-primary);\n border-bottom-color: var(--vtx-border-color);\n}\n\n[data-theme='dark'] .vtx-header-toggle,\n[data-theme='dark'] .vtx-header-icon-button {\n color: var(--vtx-color-neutral-300);\n}\n\n[data-theme='dark'] .vtx-header-toggle:hover,\n[data-theme='dark'] .vtx-header-icon-button:hover {\n background: rgba(255, 255, 255, 0.05);\n color: var(--vtx-color-neutral-100);\n}\n\n[data-theme='dark'] .vtx-header-icon-button--active {\n background: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-header-notification-item {\n border-bottom-color: var(--vtx-border-color);\n}\n\n[data-theme='dark'] .vtx-header-notification-item:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n[data-theme='dark'] .vtx-header-notification-item--unread {\n background: var(--vtx-color-primary-900);\n}\n\n[data-theme='dark'] .vtx-header-notification-item--unread:hover {\n background: var(--vtx-color-primary-800);\n}\n\n[data-theme='dark'] .vtx-header-user-button:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n[data-theme='dark'] .vtx-header-user-button--active {\n background: var(--vtx-color-primary-900);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .vtx-header {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n height: 56px;\n }\n\n .vtx-header-title {\n font-size: var(--vtx-font-size-lg);\n }\n\n .vtx-header-user-info {\n display: none;\n }\n\n .vtx-header-notifications-panel {\n width: 320px;\n max-height: 400px;\n }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n .vtx-header-toggle,\n .vtx-header-icon-button,\n .vtx-header-user-button,\n .vtx-header-notification-item {\n transition: none;\n }\n\n .vtx-header-notifications-panel,\n .vtx-header-user-dropdown {\n animation: none;\n }\n}\n");const yn=()=>n("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",{d:"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),kn=()=>n("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",{d:"M4 6h16M4 12h16M4 18h16",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),zn=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",{d:"M19 9l-7 7-7-7",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),Nn=o.forwardRef(({notifications:t,onNotificationClick:e,onMarkAllAsRead:o,onClose:a},i)=>{const l=t.filter(n=>!n.read).length;return r("div",{ref:i,className:"vtx-header-notifications-panel",children:[n("div",{className:"vtx-header-notifications-header",children:r(G,{justify:"between",align:"center",children:[n(Q,{variant:"subtitle2",noMargin:!0,children:"Notifications"}),l>0&&o&&n("button",{className:"vtx-header-notifications-mark-read",onClick:()=>{o(),a()},children:"Mark all as read"})]})}),n("div",{className:"vtx-header-notifications-list",children:0===t.length?r("div",{className:"vtx-header-notifications-empty",children:[n(yn,{}),n(Q,{variant:"body2",color:"neutral.500",noMargin:!0,children:"No notifications"})]}):t.map(t=>r("div",{className:`vtx-header-notification-item ${t.read?"":"vtx-header-notification-item--unread"} ${t.type?`vtx-header-notification-item--${t.type}`:""}`,onClick:()=>{null==e||e(t),a()},children:[t.icon&&n("div",{className:"vtx-header-notification-icon",children:t.icon}),r("div",{className:"vtx-header-notification-content",children:[n(Q,{variant:"body2",noMargin:!0,style:{fontWeight:t.read?400:600},children:t.title}),t.description&&n(Q,{variant:"caption",color:"neutral.600",noMargin:!0,children:t.description}),n(Q,{variant:"caption",color:"neutral.500",noMargin:!0,style:{marginTop:"4px"},children:t.time})]}),!t.read&&n("div",{className:"vtx-header-notification-dot"})]},t.id))})]})});Nn.displayName="NotificationPanel";const Cn=o.forwardRef(({logo:t,title:e,onToggleSidebar:o,showToggle:a=!0,notifications:l=[],onNotificationClick:s,onMarkAllAsRead:d,userName:x,userSubtitle:p,userAvatar:m,userMenuItems:u=[],actions:h,className:g="",sticky:f=!0},b)=>{const[w,y]=v(!1),[k,z]=v(!1),N=i(null),C=i(null),S=i(null),_=l.filter(n=>!n.read).length;c(()=>{const n=n=>{N.current&&!N.current.contains(n.target)&&S.current&&!S.current.contains(n.target)&&y(!1),C.current&&!C.current.contains(n.target)&&z(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[]);const T=["vtx-header",f&&"vtx-header--sticky",g].filter(Boolean).join(" ");return r("header",{ref:b,className:T,children:[r(G,{align:"center",gap:16,style:{flex:1},children:[a&&o&&n("button",{className:"vtx-header-toggle",onClick:o,"aria-label":"Toggle sidebar",children:n(kn,{})}),t&&n("div",{className:"vtx-header-logo",children:t}),e&&n(Q,{variant:"h6",noMargin:!0,className:"vtx-header-title",children:e})]}),h&&n("div",{className:"vtx-header-actions",children:h}),r("div",{className:"vtx-header-right",children:[l&&l.length>0&&r("div",{className:"vtx-header-notifications",ref:N,children:[r("button",{className:"vtx-header-icon-button "+(w?"vtx-header-icon-button--active":""),onClick:()=>y(!w),"aria-label":"Notifications",children:[n(yn,{}),_>0&&n(fn,{variant:"error",size:"small",style:{position:"absolute",top:"4px",right:"4px",minWidth:"18px",height:"18px",padding:"0 4px"},children:_>9?"9+":_})]}),w&&n(Nn,{ref:S,notifications:l,onNotificationClick:s,onMarkAllAsRead:d,onClose:()=>y(!1)})]}),x&&r("div",{className:"vtx-header-user-menu",ref:C,children:[r("button",{className:"vtx-header-user-button "+(k?"vtx-header-user-button--active":""),onClick:()=>z(!k),"aria-label":"User menu",children:[n(gn,{src:m,alt:x,size:"sm"}),!m&&n("span",{className:"vtx-header-avatar-fallback",children:x.split(" ").map(n=>n[0]).join("").slice(0,2)}),r("div",{className:"vtx-header-user-info",children:[n(Q,{variant:"body2",noMargin:!0,style:{fontWeight:600},children:x}),p&&n(Q,{variant:"caption",color:"neutral.600",noMargin:!0,children:p})]}),n(zn,{})]}),k&&n("div",{className:"vtx-header-user-dropdown",children:n(en,{items:u,responsive:!1})})]})]})]})});Cn.displayName="Header";S("/* SideMenu Component Styles */\n\n.vtx-sidemenu {\n display: flex;\n flex-direction: column;\n height: 100vh;\n background: var(--vtx-background-primary);\n border-right: 1px solid var(--vtx-border-color);\n transition: width 0.3s ease-in-out;\n position: relative;\n overflow: hidden;\n}\n\n/* Header Section */\n.vtx-sidemenu-header {\n padding: var(--vtx-spacing-4);\n border-bottom: 1px solid var(--vtx-border-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 64px;\n transition: padding 0.3s ease-in-out;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-header {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-2);\n}\n\n/* Content Section */\n.vtx-sidemenu-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: var(--vtx-spacing-3) var(--vtx-spacing-2);\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-content {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-1);\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar-thumb {\n background: var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-full);\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar-thumb:hover {\n background: var(--vtx-color-neutral-400);\n}\n\n/* Footer Section */\n.vtx-sidemenu-footer {\n padding: var(--vtx-spacing-4);\n border-top: 1px solid var(--vtx-border-color);\n transition: padding 0.3s ease-in-out;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-footer {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-2);\n}\n\n/* Menu Item */\n.vtx-sidemenu-item {\n display: flex;\n align-items: center;\n padding: var(--vtx-spacing-3) var(--vtx-spacing-3);\n margin-bottom: var(--vtx-spacing-1);\n border-radius: var(--vtx-radius-md);\n color: var(--vtx-color-neutral-700);\n background: transparent;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n user-select: none;\n text-decoration: none;\n border-left: 3px solid transparent;\n position: relative;\n}\n\n.vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active) {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--collapsed:hover:not(.vtx-sidemenu-item--disabled):not(\n .vtx-sidemenu-item--active\n ) {\n background-color: var(--vtx-color-primary-50);\n border-left-color: transparent;\n}\n\n.vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active)\n .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n/* Active State */\n.vtx-sidemenu-item--active {\n background-color: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--collapsed.vtx-sidemenu-item--active {\n background-color: var(--vtx-color-primary-50);\n box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);\n border-left-color: transparent;\n}\n\n.vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--active:hover {\n background-color: var(--vtx-color-primary-100);\n color: var(--vtx-color-primary-600);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--active:hover .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Disabled State */\n.vtx-sidemenu-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Collapsed State */\n.vtx-sidemenu-item--collapsed {\n justify-content: center;\n padding: var(--vtx-spacing-3);\n margin: var(--vtx-spacing-2) var(--vtx-spacing-2);\n border-left: none;\n position: relative;\n min-height: 48px;\n border-radius: var(--vtx-radius-lg);\n background: transparent;\n}\n\n.vtx-sidemenu-item--collapsed .vtx-sidemenu-item-icon {\n width: 24px;\n height: 24px;\n color: var(--vtx-color-neutral-700) !important;\n}\n\n.vtx-sidemenu-item--collapsed:hover .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600) !important;\n}\n\n.vtx-sidemenu-item--collapsed.vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600) !important;\n}\n\n.vtx-sidemenu-item--collapsed .vtx-sidemenu-item-icon svg {\n stroke: currentColor !important;\n}\n\n/* Active indicator for collapsed state */\n.vtx-sidemenu-item--collapsed::before {\n content: '';\n position: absolute;\n left: 50%;\n bottom: 4px;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: var(--vtx-color-primary-600);\n border-radius: var(--vtx-radius-full);\n transition: width 0.2s ease-in-out;\n}\n\n.vtx-sidemenu-item--collapsed:hover::before {\n width: 32px;\n}\n\n.vtx-sidemenu-item--collapsed.vtx-sidemenu-item--active::before {\n width: 32px;\n}\n\n/* Hover effect for collapsed items */\n.vtx-sidemenu-item--collapsed:hover:not(.vtx-sidemenu-item--disabled) {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.vtx-sidemenu-item--collapsed:active:not(.vtx-sidemenu-item--disabled) {\n transform: translateY(0);\n}\n\n/* Menu Item Icon */\n.vtx-sidemenu-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n flex-shrink: 0;\n color: var(--vtx-color-neutral-700);\n transition: all 0.15s ease-in-out;\n}\n\n.vtx-sidemenu-item-icon svg {\n width: 100%;\n height: 100%;\n stroke: currentColor;\n fill: none;\n}\n\n/* Badge */\n.vtx-sidemenu-item-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 var(--vtx-spacing-1);\n background: var(--vtx-color-primary-500);\n color: white;\n font-size: var(--vtx-font-size-xs);\n font-weight: var(--vtx-font-weight-semibold);\n border-radius: var(--vtx-radius-full);\n line-height: 1;\n}\n\n/* Badge in collapsed state - show as dot indicator */\n.vtx-sidemenu-item--collapsed .vtx-sidemenu-item-badge {\n position: absolute;\n top: 8px;\n right: 8px;\n min-width: 10px;\n height: 10px;\n padding: 0;\n font-size: 0;\n border: 2px solid var(--vtx-background-primary);\n box-shadow: 0 0 0 1px var(--vtx-color-primary-500);\n}\n\n/* Chevron Icon */\n.vtx-sidemenu-chevron {\n transition: transform 0.2s ease-in-out;\n flex-shrink: 0;\n}\n\n.vtx-sidemenu-chevron--open {\n transform: rotate(180deg);\n}\n\n/* Submenu */\n.vtx-sidemenu-submenu {\n display: flex;\n flex-direction: column;\n margin-left: var(--vtx-spacing-4);\n margin-top: var(--vtx-spacing-1);\n margin-bottom: var(--vtx-spacing-2);\n padding-left: var(--vtx-spacing-4);\n border-left: 2px solid var(--vtx-color-neutral-200);\n animation: slideDown 0.2s ease-in-out;\n}\n\n.vtx-sidemenu-submenu .vtx-sidemenu-item {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n font-size: var(--vtx-font-size-sm);\n margin-bottom: var(--vtx-spacing-1);\n}\n\n/* Collapse Toggle Button */\n.vtx-sidemenu-toggle {\n position: absolute;\n top: 50%;\n right: -12px;\n transform: translateY(-50%);\n width: 24px;\n height: 24px;\n border-radius: var(--vtx-radius-full);\n border: 1px solid var(--vtx-border-color);\n background: var(--vtx-background-primary);\n color: var(--vtx-color-neutral-600);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n z-index: 10;\n}\n\n.vtx-sidemenu-toggle:hover {\n background: var(--vtx-color-primary-50);\n color: var(--vtx-color-primary-600);\n border-color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-toggle:focus-visible {\n outline: 2px solid var(--vtx-color-primary-500);\n outline-offset: 2px;\n}\n\n/* Tooltip for collapsed items */\n.vtx-sidemenu-item--collapsed:hover::after {\n content: attr(data-label);\n position: absolute;\n left: calc(100% + 16px);\n top: 50%;\n transform: translateY(-50%);\n background: var(--vtx-color-neutral-900);\n color: white;\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n border-radius: var(--vtx-radius-md);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-medium);\n white-space: nowrap;\n pointer-events: none;\n z-index: var(--vtx-z-tooltip);\n box-shadow:\n 0 4px 12px rgba(0, 0, 0, 0.15),\n 0 0 1px rgba(0, 0, 0, 0.2);\n animation: fadeIn 0.15s ease-in-out;\n}\n\n/* Tooltip arrow */\n.vtx-sidemenu-item--collapsed:hover::after {\n /* Add arrow using clip-path or border trick */\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-50%) translateX(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\n }\n}\n\n/* Slide Down Animation */\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n max-height: 1000px;\n transform: translateY(0);\n }\n}\n\n/* Dark Mode */\n[data-theme='dark'] .vtx-sidemenu {\n background: var(--vtx-background-primary);\n border-right-color: var(--vtx-border-color);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item {\n color: var(--vtx-color-neutral-300);\n}\n\n[data-theme='dark']\n .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active) {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark']\n .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active)\n .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--active {\n background-color: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--active:hover {\n background-color: var(--vtx-color-primary-800);\n color: var(--vtx-color-primary-400);\n font-weight: 600;\n border-left-color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--active:hover .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-400);\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--collapsed .vtx-sidemenu-item-icon {\n color: var(--vtx-color-neutral-300) !important;\n}\n\n[data-theme='dark'] .vtx-sidemenu-item--collapsed:hover .vtx-sidemenu-item-icon,\n[data-theme='dark']\n .vtx-sidemenu-item--collapsed.vtx-sidemenu-item--active\n .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-400) !important;\n}\n\n[data-theme='dark'] .vtx-sidemenu-toggle {\n background: var(--vtx-background-secondary);\n border-color: var(--vtx-border-color);\n}\n\n[data-theme='dark'] .vtx-sidemenu-toggle:hover {\n background: var(--vtx-color-primary-900);\n color: var(--vtx-color-primary-400);\n border-color: var(--vtx-color-primary-400);\n}\n\n/* Responsive - Mobile */\n@media (max-width: 768px) {\n .vtx-sidemenu {\n position: fixed;\n left: 0;\n top: 0;\n z-index: var(--vtx-z-modal);\n transform: translateX(-100%);\n transition: transform 0.3s ease-in-out;\n }\n\n .vtx-sidemenu--mobile-open {\n transform: translateX(0);\n box-shadow: var(--vtx-shadow-xl);\n }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n .vtx-sidemenu,\n .vtx-sidemenu-item,\n .vtx-sidemenu-toggle,\n .vtx-sidemenu-chevron {\n transition: none;\n }\n\n .vtx-sidemenu-submenu {\n animation: none;\n }\n}\n");const Sn=({isOpen:r})=>n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",className:"vtx-sidemenu-chevron "+(r?"vtx-sidemenu-chevron--open":""),children:n("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),_n=o.forwardRef(({label:e,onClick:o,icon:a,disabled:i=!1,active:l=!1,items:c,badge:s,href:d,collapsed:x=!1,level:p=0},m)=>{const[u,h]=v(!1),g=c&&c.length>0,f=n(t,{children:r(G,{align:"center",gap:x?0:12,style:{flex:1,minWidth:0},children:[a&&n("span",{className:"vtx-sidemenu-item-icon",children:a}),!x&&r(t,{children:[n(Q,{variant:"body2",noMargin:!0,style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:e}),s&&n("span",{className:"vtx-sidemenu-item-badge",children:s}),g&&n(Sn,{isOpen:u})]}),x&&s&&n("span",{className:"vtx-sidemenu-item-badge",children:s})]})}),b=["vtx-sidemenu-item",l&&"vtx-sidemenu-item--active",i&&"vtx-sidemenu-item--disabled",g&&"vtx-sidemenu-item--has-submenu",x&&"vtx-sidemenu-item--collapsed"].filter(Boolean).join(" ");return r(t,{children:[n(d?"a":"div",{ref:m,className:b,onClick:n=>{i||(g?(n.preventDefault(),h(!u)):o&&(n.preventDefault(),o()))},onKeyDown:n=>{i||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),g?h(!u):null==o||o())},role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i,"aria-expanded":g?u:void 0,href:d,title:x?e:void 0,"data-label":x?e:void 0,children:f}),g&&u&&!x&&n("div",{className:"vtx-sidemenu-submenu",children:c.map((r,t)=>n(_n,{...r,collapsed:x,level:p+1},t))})]})});_n.displayName="SideMenuItem";const Tn=o.forwardRef(({items:t,collapsed:e=!1,onCollapseToggle:o,className:a="",width:i="260px",collapsedWidth:l="80px",header:c,footer:v},s)=>{const d=e?"number"==typeof l?`${l}px`:l:"number"==typeof i?`${i}px`:i,x=["vtx-sidemenu",e&&"vtx-sidemenu--collapsed",a].filter(Boolean).join(" ");return r("aside",{ref:s,className:x,style:{width:d},role:"navigation",children:[c&&n("div",{className:"vtx-sidemenu-header",children:c}),n("div",{className:"vtx-sidemenu-content",children:t.map((r,t)=>n(_n,{...r,collapsed:e},t))}),v&&n("div",{className:"vtx-sidemenu-footer",children:v}),o&&n("button",{className:"vtx-sidemenu-toggle",onClick:()=>o(!e),"aria-label":e?"Expand sidebar":"Collapse sidebar",title:e?"Expand sidebar":"Collapse sidebar",children:n("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:e?"M9 5l7 7-7 7":"M15 19l-7-7 7-7"})})})]})});Tn.displayName="SideMenu";function $n({columns:t,data:e,getRowKey:o,striped:a=!1,hoverable:i=!0,bordered:l=!1,size:c="medium",caption:s,emptyMessage:d="No data available",loading:x=!1,loadingContent:p,scrollable:m=!0,maxHeight:u,onRowClick:g,isRowSelected:f,onRowSelect:b,sortable:w=!1,sortConfig:y,onSortChange:k,className:z="",containerClassName:N="",...C}){const[S,_]=v(y||null),T=y||S,$=n=>{if(!w)return;const r=(null==T?void 0:T.key)===n&&"asc"===T.direction?"desc":"asc",t={key:n,direction:r};k?k(n,r):_(t)},L=h(()=>{if(!T||!w)return e;const n=t.find(n=>n.key===T.key),r=null==n?void 0:n.sortFn;return[...e].sort((n,t)=>{if(r)return"asc"===T.direction?r(n,t):r(t,n);const e=n[T.key],o=t[T.key];if("string"==typeof e&&"string"==typeof o)return"asc"===T.direction?e.localeCompare(o):o.localeCompare(e);if("number"==typeof e&&"number"==typeof o)return"asc"===T.direction?e-o:o-e;const a=String(e),i=String(o);return"asc"===T.direction?a.localeCompare(i):i.localeCompare(a)})},[e,T,t,w]),M=["vtx-table-container",m&&"vtx-table-container--scrollable",u&&"vtx-table-container--fixed-header",N].filter(Boolean).join(" "),j=["vtx-table",`vtx-table--${c}`,a&&"vtx-table--striped",i&&"vtx-table--hoverable",l&&"vtx-table--bordered",g&&"vtx-table--clickable",z].filter(Boolean).join(" "),B=(n,r,t)=>{b&&b(n,r),null==g||g(n,r,t)},A=t=>{if(!w)return null;const e=(null==T?void 0:T.key)===t,o=null==T?void 0:T.direction;return n("span",{className:"vtx-table-sort-icon","aria-hidden":"true",children:r("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:[n("path",{d:"M6 3L9 6H3L6 3Z",fill:e&&"asc"===o?"currentColor":"#ccc"}),n("path",{d:"M6 9L3 6H9L6 9Z",fill:e&&"desc"===o?"currentColor":"#ccc"})]})})};return n("div",{className:M,style:{maxHeight:u},children:r("table",{className:j,...C,children:[s&&n("caption",{className:"vtx-table-caption",children:s}),n("thead",{className:"vtx-table-header",children:n("tr",{children:t.map(t=>{const e=w&&!1!==t.sortable,o=["vtx-table-header-cell",e&&"vtx-table-header-cell--sortable",t.sticky&&`vtx-table-header-cell--sticky-${t.sticky}`,t.headerClassName].filter(Boolean).join(" ");return n("th",{className:o,style:{width:t.width,minWidth:t.minWidth,maxWidth:t.maxWidth,textAlign:t.align||"left"},onClick:()=>e&&$(t.key),role:e?"button":void 0,tabIndex:e?0:void 0,onKeyDown:n=>{!e||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),$(t.key))},"aria-sort":(null==T?void 0:T.key)===t.key?"asc"===T.direction?"ascending":"descending":void 0,children:r("span",{className:"vtx-table-header-content",children:[t.header,e&&A(t.key)]})},t.key)})})}),n("tbody",{className:"vtx-table-body",children:x?n("tr",{children:n("td",{colSpan:t.length,className:"vtx-table-loading",children:p||n("span",{className:"vtx-table-loading-spinner",children:"Loading..."})})}):0===L.length?n("tr",{children:n("td",{colSpan:t.length,className:"vtx-table-empty",children:d})}):L.map((r,e)=>{const a=null==f?void 0:f(r,e),i=["vtx-table-row",a&&"vtx-table-row--selected"].filter(Boolean).join(" ");return n("tr",{className:i,onClick:n=>B(r,e,n),role:g||b?"button":void 0,tabIndex:g||b?0:void 0,"aria-selected":a,onKeyDown:n=>{!g&&!b||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),B(r,e,n))},children:t.map(t=>{const o=["vtx-table-cell",t.sticky&&`vtx-table-cell--sticky-${t.sticky}`,t.className].filter(Boolean).join(" ");return n("td",{className:o,style:{textAlign:t.align||"left",width:t.width,minWidth:t.minWidth,maxWidth:t.maxWidth},children:t.render?t.render(r,e):r[t.key]},t.key)})},o(r,e))})})]})})}S(".vtx-table-container {\n width: 100%;\n overflow-x: auto;\n border: 1px solid var(--vtx-color-neutral-200);\n border-radius: var(--vtx-radius-lg);\n}\n\n.vtx-table {\n width: 100%;\n border-collapse: collapse;\n font-family: var(--vtx-font-family-sans);\n background-color: white;\n}\n\n.vtx-table-caption {\n padding: var(--vtx-spacing-4);\n font-size: var(--vtx-font-size-lg);\n font-weight: var(--vtx-font-weight-semibold);\n text-align: left;\n color: var(--vtx-color-neutral-900);\n}\n\n/* Header */\n.vtx-table-header {\n background-color: var(--vtx-color-neutral-50);\n border-bottom: 2px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-table-header-cell {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n font-size: var(--vtx-font-size-sm);\n font-weight: var(--vtx-font-weight-semibold);\n color: var(--vtx-color-neutral-700);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n white-space: nowrap;\n}\n\n/* Body */\n.vtx-table-body {\n background-color: white;\n}\n\n.vtx-table-row {\n border-bottom: 1px solid var(--vtx-color-neutral-200);\n transition: background-color var(--vtx-transition-fast);\n}\n\n.vtx-table-row:last-child {\n border-bottom: none;\n}\n\n.vtx-table-cell {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n font-size: var(--vtx-font-size-base);\n color: var(--vtx-color-neutral-900);\n}\n\n/* Sizes */\n.vtx-table--small .vtx-table-header-cell,\n.vtx-table--small .vtx-table-cell {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-table--large .vtx-table-header-cell,\n.vtx-table--large .vtx-table-cell {\n padding: var(--vtx-spacing-4) var(--vtx-spacing-6);\n font-size: var(--vtx-font-size-lg);\n}\n\n/* Striped */\n.vtx-table--striped .vtx-table-row:nth-child(even) {\n background-color: var(--vtx-color-neutral-50);\n}\n\n/* Hoverable */\n.vtx-table--hoverable .vtx-table-row:hover {\n background-color: var(--vtx-color-primary-50);\n}\n\n/* Empty state */\n.vtx-table-empty {\n padding: var(--vtx-spacing-12) var(--vtx-spacing-4);\n text-align: center;\n color: var(--vtx-color-neutral-500);\n font-style: italic;\n}\n"),$n.displayName="Table";S("/* Grid Base Styles */\n.vtx-grid {\n box-sizing: border-box;\n}\n\n/* Container Styles */\n.vtx-grid-container {\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Item Styles */\n.vtx-grid-item {\n margin: 0;\n box-sizing: border-box;\n}\n\n/* Direction */\n.vtx-grid-direction-row {\n flex-direction: row;\n}\n\n.vtx-grid-direction-row-reverse {\n flex-direction: row-reverse;\n}\n\n.vtx-grid-direction-column {\n flex-direction: column;\n}\n\n.vtx-grid-direction-column-reverse {\n flex-direction: column-reverse;\n}\n\n/* Wrap */\n.vtx-grid-wrap-nowrap {\n flex-wrap: nowrap;\n}\n\n.vtx-grid-wrap-wrap {\n flex-wrap: wrap;\n}\n\n.vtx-grid-wrap-wrap-reverse {\n flex-wrap: wrap-reverse;\n}\n\n/* Spacing - Container */\n.vtx-grid-spacing-0 {\n margin: 0;\n}\n\n.vtx-grid-spacing-0 > .vtx-grid-item {\n padding: 0;\n}\n\n.vtx-grid-spacing-1 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-spacing-1 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n}\n\n.vtx-grid-spacing-2 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-spacing-2 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-spacing-3 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 3);\n}\n\n.vtx-grid-spacing-3 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n}\n\n.vtx-grid-spacing-4 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 4);\n}\n\n.vtx-grid-spacing-4 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-spacing-5 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 5);\n}\n\n.vtx-grid-spacing-5 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n}\n\n.vtx-grid-spacing-6 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -3);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 6);\n}\n\n.vtx-grid-spacing-6 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 3);\n}\n\n.vtx-grid-spacing-7 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -3.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 7);\n}\n\n.vtx-grid-spacing-7 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 3.5);\n}\n\n.vtx-grid-spacing-8 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -4);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 8);\n}\n\n.vtx-grid-spacing-8 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 4);\n}\n\n.vtx-grid-spacing-9 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -4.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 9);\n}\n\n.vtx-grid-spacing-9 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 4.5);\n}\n\n.vtx-grid-spacing-10 {\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 10);\n}\n\n.vtx-grid-spacing-10 > .vtx-grid-item {\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 5);\n}\n\n/* Row Spacing */\n.vtx-grid-row-spacing-1 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n}\n\n.vtx-grid-row-spacing-1 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n}\n\n.vtx-grid-row-spacing-2 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n}\n\n.vtx-grid-row-spacing-2 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-row-spacing-3 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n}\n\n.vtx-grid-row-spacing-3 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n}\n\n.vtx-grid-row-spacing-4 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n}\n\n.vtx-grid-row-spacing-4 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-row-spacing-5 {\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n}\n\n.vtx-grid-row-spacing-5 > .vtx-grid-item {\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n}\n\n/* Column Spacing */\n.vtx-grid-column-spacing-1 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-column-spacing-1 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\n}\n\n.vtx-grid-column-spacing-2 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-column-spacing-2 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\n}\n\n.vtx-grid-column-spacing-3 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 3);\n}\n\n.vtx-grid-column-spacing-3 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\n}\n\n.vtx-grid-column-spacing-4 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 4);\n}\n\n.vtx-grid-column-spacing-4 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\n}\n\n.vtx-grid-column-spacing-5 {\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 5);\n}\n\n.vtx-grid-column-spacing-5 > .vtx-grid-item {\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\n}\n\n/* XS (Extra Small) - 0px and up */\n.vtx-grid-xs-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n}\n\n.vtx-grid-xs {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n}\n\n.vtx-grid-xs-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n}\n\n.vtx-grid-xs-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n}\n\n.vtx-grid-xs-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n}\n\n.vtx-grid-xs-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n}\n\n.vtx-grid-xs-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n}\n\n.vtx-grid-xs-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n}\n\n.vtx-grid-xs-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n}\n\n.vtx-grid-xs-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n}\n\n.vtx-grid-xs-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n}\n\n.vtx-grid-xs-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n}\n\n.vtx-grid-xs-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n}\n\n.vtx-grid-xs-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n}\n\n/* SM (Small) - 600px and up */\n@media (min-width: 600px) {\n .vtx-grid-sm-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n }\n\n .vtx-grid-sm {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n\n .vtx-grid-sm-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n }\n\n .vtx-grid-sm-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n }\n\n .vtx-grid-sm-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n\n .vtx-grid-sm-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n }\n\n .vtx-grid-sm-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n }\n\n .vtx-grid-sm-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n\n .vtx-grid-sm-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n }\n\n .vtx-grid-sm-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n }\n\n .vtx-grid-sm-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n\n .vtx-grid-sm-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n }\n\n .vtx-grid-sm-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n }\n\n .vtx-grid-sm-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n}\n\n/* MD (Medium) - 960px and up */\n@media (min-width: 960px) {\n .vtx-grid-md-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n }\n\n .vtx-grid-md {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n\n .vtx-grid-md-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n }\n\n .vtx-grid-md-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n }\n\n .vtx-grid-md-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n\n .vtx-grid-md-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n }\n\n .vtx-grid-md-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n }\n\n .vtx-grid-md-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n\n .vtx-grid-md-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n }\n\n .vtx-grid-md-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n }\n\n .vtx-grid-md-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n\n .vtx-grid-md-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n }\n\n .vtx-grid-md-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n }\n\n .vtx-grid-md-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n}\n\n/* LG (Large) - 1280px and up */\n@media (min-width: 1280px) {\n .vtx-grid-lg-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n }\n\n .vtx-grid-lg {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n\n .vtx-grid-lg-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n }\n\n .vtx-grid-lg-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n }\n\n .vtx-grid-lg-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n\n .vtx-grid-lg-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n }\n\n .vtx-grid-lg-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n }\n\n .vtx-grid-lg-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n\n .vtx-grid-lg-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n }\n\n .vtx-grid-lg-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n }\n\n .vtx-grid-lg-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n\n .vtx-grid-lg-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n }\n\n .vtx-grid-lg-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n }\n\n .vtx-grid-lg-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n}\n\n/* XL (Extra Large) - 1920px and up */\n@media (min-width: 1920px) {\n .vtx-grid-xl-auto {\n flex-grow: 0;\n flex-basis: auto;\n max-width: none;\n }\n\n .vtx-grid-xl {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n\n .vtx-grid-xl-1 {\n flex-grow: 0;\n flex-basis: 8.333333%;\n max-width: 8.333333%;\n }\n\n .vtx-grid-xl-2 {\n flex-grow: 0;\n flex-basis: 16.666667%;\n max-width: 16.666667%;\n }\n\n .vtx-grid-xl-3 {\n flex-grow: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n\n .vtx-grid-xl-4 {\n flex-grow: 0;\n flex-basis: 33.333333%;\n max-width: 33.333333%;\n }\n\n .vtx-grid-xl-5 {\n flex-grow: 0;\n flex-basis: 41.666667%;\n max-width: 41.666667%;\n }\n\n .vtx-grid-xl-6 {\n flex-grow: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n\n .vtx-grid-xl-7 {\n flex-grow: 0;\n flex-basis: 58.333333%;\n max-width: 58.333333%;\n }\n\n .vtx-grid-xl-8 {\n flex-grow: 0;\n flex-basis: 66.666667%;\n max-width: 66.666667%;\n }\n\n .vtx-grid-xl-9 {\n flex-grow: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n\n .vtx-grid-xl-10 {\n flex-grow: 0;\n flex-basis: 83.333333%;\n max-width: 83.333333%;\n }\n\n .vtx-grid-xl-11 {\n flex-grow: 0;\n flex-basis: 91.666667%;\n max-width: 91.666667%;\n }\n\n .vtx-grid-xl-12 {\n flex-grow: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n}\n");const Ln=o.forwardRef(({container:r=!1,item:t=!1,spacing:e,rowSpacing:o,columnSpacing:a,xs:i,sm:l,md:c,lg:v,xl:s,justifyContent:d,alignItems:x,alignContent:p,direction:m="row",wrap:u="wrap",className:h="",children:g,style:f,...b},w)=>{const y=["vtx-grid",r&&"vtx-grid-container",t&&"vtx-grid-item",r&&void 0!==e&&`vtx-grid-spacing-${e}`,r&&void 0!==o&&`vtx-grid-row-spacing-${o}`,r&&void 0!==a&&`vtx-grid-column-spacing-${a}`,void 0!==i&&"vtx-grid-xs"+(!0===i?"":"auto"===i?"-auto":`-${i}`),void 0!==l&&"vtx-grid-sm"+(!0===l?"":"auto"===l?"-auto":`-${l}`),void 0!==c&&"vtx-grid-md"+(!0===c?"":"auto"===c?"-auto":`-${c}`),void 0!==v&&"vtx-grid-lg"+(!0===v?"":"auto"===v?"-auto":`-${v}`),void 0!==s&&"vtx-grid-xl"+(!0===s?"":"auto"===s?"-auto":`-${s}`),r&&"row"!==m&&`vtx-grid-direction-${m}`,r&&"wrap"!==u&&`vtx-grid-wrap-${u}`,h].filter(Boolean).join(" "),k={...f};return r&&(d&&(k.justifyContent=d),x&&(k.alignItems=x),p&&(k.alignContent=p)),n("div",{ref:w,className:y,style:Object.keys(k).length>0?k:void 0,...b,children:g})});Ln.displayName="Grid";S("/**\r\n * VTX UI Design System - Base CSS Variables\r\n * \r\n * This file defines all CSS custom properties with default values from our design tokens.\r\n * These variables can be overridden by users through ThemeProvider or custom CSS.\r\n * \r\n * Usage:\r\n * - Import this file in your app entry point or ThemeProvider\r\n * - Override variables using :root selector or data-theme attributes\r\n * - All components use these variables with fallback values\r\n */\r\n\r\n:root {\r\n /* ============================================\r\n * COLOR TOKENS\r\n * ============================================ */\r\n\r\n /* Primary Colors */\r\n --vtx-color-primary-50: #eff6ff;\r\n --vtx-color-primary-100: #dbeafe;\r\n --vtx-color-primary-200: #bfdbfe;\r\n --vtx-color-primary-300: #93c5fd;\r\n --vtx-color-primary-400: #60a5fa;\r\n --vtx-color-primary-500: #3b82f6;\r\n --vtx-color-primary-600: #2563eb;\r\n --vtx-color-primary-700: #1d4ed8;\r\n --vtx-color-primary-800: #1e40af;\r\n --vtx-color-primary-900: #1e3a8a;\r\n\r\n /* Secondary Colors */\r\n --vtx-color-secondary-50: #f5f3ff;\r\n --vtx-color-secondary-100: #ede9fe;\r\n --vtx-color-secondary-200: #ddd6fe;\r\n --vtx-color-secondary-300: #c4b5fd;\r\n --vtx-color-secondary-400: #a78bfa;\r\n --vtx-color-secondary-500: #8b5cf6;\r\n --vtx-color-secondary-600: #7c3aed;\r\n --vtx-color-secondary-700: #6d28d9;\r\n --vtx-color-secondary-800: #5b21b6;\r\n --vtx-color-secondary-900: #4c1d95;\r\n\r\n /* Neutral Colors */\r\n --vtx-color-neutral-50: #fafafa;\r\n --vtx-color-neutral-100: #f5f5f5;\r\n --vtx-color-neutral-200: #e5e5e5;\r\n --vtx-color-neutral-300: #d4d4d4;\r\n --vtx-color-neutral-400: #a3a3a3;\r\n --vtx-color-neutral-500: #737373;\r\n --vtx-color-neutral-600: #525252;\r\n --vtx-color-neutral-700: #404040;\r\n --vtx-color-neutral-800: #262626;\r\n --vtx-color-neutral-900: #171717;\r\n\r\n /* Success Colors */\r\n --vtx-color-success-50: #f0fdf4;\r\n --vtx-color-success-500: #22c55e;\r\n --vtx-color-success-600: #16a34a;\r\n --vtx-color-success-700: #15803d;\r\n\r\n /* Warning Colors */\r\n --vtx-color-warning-50: #fffbeb;\r\n --vtx-color-warning-500: #f59e0b;\r\n --vtx-color-warning-600: #d97706;\r\n --vtx-color-warning-700: #b45309;\r\n\r\n /* Error Colors */\r\n --vtx-color-error-50: #fef2f2;\r\n --vtx-color-error-500: #ef4444;\r\n --vtx-color-error-600: #dc2626;\r\n --vtx-color-error-700: #b91c1c;\r\n\r\n /* Info Colors */\r\n --vtx-color-info-50: #eff6ff;\r\n --vtx-color-info-500: #3b82f6;\r\n --vtx-color-info-600: #2563eb;\r\n --vtx-color-info-700: #1d4ed8;\r\n\r\n /* ============================================\r\n * SPACING TOKENS\r\n * ============================================ */\r\n --vtx-spacing-0: 0;\r\n --vtx-spacing-1: 0.25rem; /* 4px */\r\n --vtx-spacing-2: 0.5rem; /* 8px */\r\n --vtx-spacing-3: 0.75rem; /* 12px */\r\n --vtx-spacing-4: 1rem; /* 16px */\r\n --vtx-spacing-5: 1.25rem; /* 20px */\r\n --vtx-spacing-6: 1.5rem; /* 24px */\r\n --vtx-spacing-8: 2rem; /* 32px */\r\n --vtx-spacing-10: 2.5rem; /* 40px */\r\n --vtx-spacing-12: 3rem; /* 48px */\r\n --vtx-spacing-16: 4rem; /* 64px */\r\n --vtx-spacing-20: 5rem; /* 80px */\r\n --vtx-spacing-24: 6rem; /* 96px */\r\n\r\n /* ============================================\r\n * TYPOGRAPHY TOKENS\r\n * ============================================ */\r\n\r\n /* Font Families */\r\n --vtx-font-family-sans:\r\n -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n --vtx-font-family-mono:\r\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\r\n\r\n /* Font Sizes */\r\n --vtx-font-size-xs: 0.75rem; /* 12px */\r\n --vtx-font-size-sm: 0.875rem; /* 14px */\r\n --vtx-font-size-base: 1rem; /* 16px */\r\n --vtx-font-size-lg: 1.125rem; /* 18px */\r\n --vtx-font-size-xl: 1.25rem; /* 20px */\r\n --vtx-font-size-2xl: 1.5rem; /* 24px */\r\n --vtx-font-size-3xl: 1.875rem; /* 30px */\r\n --vtx-font-size-4xl: 2.25rem; /* 36px */\r\n\r\n /* Font Weights */\r\n --vtx-font-weight-normal: 400;\r\n --vtx-font-weight-medium: 500;\r\n --vtx-font-weight-semibold: 600;\r\n --vtx-font-weight-bold: 700;\r\n\r\n /* Line Heights */\r\n --vtx-line-height-tight: 1.25;\r\n --vtx-line-height-normal: 1.5;\r\n --vtx-line-height-relaxed: 1.75;\r\n\r\n /* ============================================\r\n * TEXT VARIANT TOKENS\r\n * ============================================ */\r\n\r\n /* Heading Variants */\r\n --vtx-text-h1-font-size: 3.75rem; /* 60px */\r\n --vtx-text-h1-font-weight: 700;\r\n --vtx-text-h1-line-height: 1.2;\r\n --vtx-text-h1-letter-spacing: -0.025em;\r\n\r\n --vtx-text-h2-font-size: 3rem; /* 48px */\r\n --vtx-text-h2-font-weight: 700;\r\n --vtx-text-h2-line-height: 1.25;\r\n --vtx-text-h2-letter-spacing: -0.025em;\r\n\r\n --vtx-text-h3-font-size: 2.25rem; /* 36px */\r\n --vtx-text-h3-font-weight: 600;\r\n --vtx-text-h3-line-height: 1.3;\r\n --vtx-text-h3-letter-spacing: -0.025em;\r\n\r\n --vtx-text-h4-font-size: 1.875rem; /* 30px */\r\n --vtx-text-h4-font-weight: 600;\r\n --vtx-text-h4-line-height: 1.35;\r\n --vtx-text-h4-letter-spacing: 0;\r\n\r\n --vtx-text-h5-font-size: 1.5rem; /* 24px */\r\n --vtx-text-h5-font-weight: 600;\r\n --vtx-text-h5-line-height: 1.4;\r\n --vtx-text-h5-letter-spacing: 0;\r\n\r\n --vtx-text-h6-font-size: 1.25rem; /* 20px */\r\n --vtx-text-h6-font-weight: 600;\r\n --vtx-text-h6-line-height: 1.5;\r\n --vtx-text-h6-letter-spacing: 0;\r\n\r\n /* Body Text Variants */\r\n --vtx-text-body1-font-size: 1rem; /* 16px - DEFAULT WEBSITE FONT SIZE */\r\n --vtx-text-body1-font-weight: 400;\r\n --vtx-text-body1-line-height: 1.5;\r\n --vtx-text-body1-letter-spacing: 0;\r\n\r\n --vtx-text-body2-font-size: 0.875rem; /* 14px */\r\n --vtx-text-body2-font-weight: 400;\r\n --vtx-text-body2-line-height: 1.5;\r\n --vtx-text-body2-letter-spacing: 0;\r\n\r\n /* Subtitle Variants */\r\n --vtx-text-subtitle1-font-size: 1.125rem; /* 18px */\r\n --vtx-text-subtitle1-font-weight: 500;\r\n --vtx-text-subtitle1-line-height: 1.5;\r\n --vtx-text-subtitle1-letter-spacing: 0;\r\n\r\n --vtx-text-subtitle2-font-size: 1rem; /* 16px */\r\n --vtx-text-subtitle2-font-weight: 500;\r\n --vtx-text-subtitle2-line-height: 1.5;\r\n --vtx-text-subtitle2-letter-spacing: 0;\r\n\r\n /* Utility Text Variants */\r\n --vtx-text-caption-font-size: 0.75rem; /* 12px */\r\n --vtx-text-caption-font-weight: 400;\r\n --vtx-text-caption-line-height: 1.5;\r\n --vtx-text-caption-letter-spacing: 0.025em;\r\n\r\n --vtx-text-overline-font-size: 0.75rem; /* 12px */\r\n --vtx-text-overline-font-weight: 600;\r\n --vtx-text-overline-line-height: 1.5;\r\n --vtx-text-overline-letter-spacing: 0.1em;\r\n\r\n --vtx-text-button-font-size: 0.875rem; /* 14px */\r\n --vtx-text-button-font-weight: 600;\r\n --vtx-text-button-line-height: 1.5;\r\n --vtx-text-button-letter-spacing: 0.025em;\r\n\r\n --vtx-text-label-font-size: 0.875rem; /* 14px */\r\n --vtx-text-label-font-weight: 500;\r\n --vtx-text-label-line-height: 1.5;\r\n --vtx-text-label-letter-spacing: 0;\r\n\r\n /* ============================================\r\n * BORDER RADIUS TOKENS\r\n * ============================================ */\r\n --vtx-radius-none: 0;\r\n --vtx-radius-sm: 0.125rem; /* 2px */\r\n --vtx-radius-base: 0.25rem; /* 4px */\r\n --vtx-radius-md: 0.375rem; /* 6px */\r\n --vtx-radius-lg: 0.5rem; /* 8px */\r\n --vtx-radius-xl: 0.75rem; /* 12px */\r\n --vtx-radius-2xl: 1rem; /* 16px */\r\n --vtx-radius-full: 9999px;\r\n\r\n /* ============================================\r\n * SHADOW TOKENS\r\n * ============================================ */\r\n --vtx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\r\n --vtx-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\r\n --vtx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\r\n --vtx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\r\n --vtx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\r\n --vtx-shadow-none: none;\r\n\r\n /* ============================================\r\n * TRANSITION TOKENS\r\n * ============================================ */\r\n --vtx-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n --vtx-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);\r\n --vtx-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n /* ============================================\r\n /* Z-INDEX TOKENS\r\n * ============================================ */\r\n --vtx-z-dropdown: 1000;\r\n --vtx-z-sticky: 1100;\r\n --vtx-z-modal: 1200;\r\n --vtx-z-tooltip: 1300;\r\n --vtx-z-notification: 1400;\r\n\r\n /* ============================================\r\n * SEMANTIC COLOR ALIASES\r\n * ============================================ */\r\n /* Text colors */\r\n --vtx-text-primary: var(--vtx-color-neutral-900);\r\n --vtx-text-secondary: var(--vtx-color-neutral-600);\r\n --vtx-text-tertiary: var(--vtx-color-neutral-500);\r\n --vtx-text-disabled: var(--vtx-color-neutral-400);\r\n\r\n /* Background colors */\r\n --vtx-background-primary: #ffffff;\r\n --vtx-background-secondary: var(--vtx-color-neutral-50);\r\n --vtx-background-hover: var(--vtx-color-neutral-100);\r\n --vtx-background-active: var(--vtx-color-neutral-200);\r\n\r\n /* Border colors */\r\n --vtx-border-color: var(--vtx-color-neutral-300);\r\n --vtx-border-color-light: var(--vtx-color-neutral-200);\r\n --vtx-border-color-dark: var(--vtx-color-neutral-400);\r\n\r\n /* Additional common aliases */\r\n --vtx-transition-normal: var(--vtx-transition-base);\r\n}\r\n\r\n/* ============================================\r\n * DARK THEME OVERRIDES\r\n * ============================================ */\r\n[data-theme='dark'] {\r\n /* Invert neutral colors for dark mode */\r\n --vtx-color-neutral-50: #171717;\r\n --vtx-color-neutral-100: #262626;\r\n --vtx-color-neutral-200: #404040;\r\n --vtx-color-neutral-300: #525252;\r\n --vtx-color-neutral-400: #737373;\r\n --vtx-color-neutral-500: #a3a3a3;\r\n --vtx-color-neutral-600: #d4d4d4;\r\n --vtx-color-neutral-700: #e5e5e5;\r\n --vtx-color-neutral-800: #f5f5f5;\r\n --vtx-color-neutral-900: #fafafa;\r\n\r\n /* Dark mode semantic colors */\r\n --vtx-text-primary: var(--vtx-color-neutral-50);\r\n --vtx-text-secondary: var(--vtx-color-neutral-400);\r\n --vtx-text-tertiary: var(--vtx-color-neutral-500);\r\n --vtx-text-disabled: var(--vtx-color-neutral-600);\r\n\r\n --vtx-background-primary: #0a0a0a;\r\n --vtx-background-secondary: var(--vtx-color-neutral-900);\r\n --vtx-background-hover: rgba(255, 255, 255, 0.05);\r\n --vtx-background-active: rgba(255, 255, 255, 0.1);\r\n\r\n --vtx-border-color: var(--vtx-color-neutral-700);\r\n --vtx-border-color-light: var(--vtx-color-neutral-800);\r\n --vtx-border-color-dark: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* ============================================\r\n * GLOBAL RESETS\r\n * ============================================ */\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Set root font size for rem calculations */\r\nhtml {\r\n font-size: 16px; /* 1rem = 16px base */\r\n}\r\n\r\n/* Set base font styles for entire website */\r\nbody {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base); /* 1rem = 16px */\r\n line-height: var(--vtx-line-height-normal); /* 1.5 */\r\n font-weight: var(--vtx-font-weight-normal); /* 400 */\r\n color: var(--vtx-color-neutral-900);\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n/* Apply default font to all elements unless overridden */\r\n*:not(code):not(pre):not(kbd):not(samp) {\r\n font-family: inherit;\r\n}\r\n\r\n/* Reset default margins and ensure consistent font inheritance */\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nblockquote,\r\npre,\r\nul,\r\nol,\r\nli,\r\ndl,\r\ndt,\r\ndd,\r\nfigure,\r\nfigcaption,\r\ntable,\r\nthead,\r\ntbody,\r\ntfoot,\r\ntr,\r\nth,\r\ntd {\r\n margin: 0;\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n font-weight: inherit;\r\n}\r\n\r\n/* Ensure form elements inherit typography */\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n}\r\n");export{Y as Accordion,V as AccordionItem,q as Alert,gn as Avatar,fn as Badge,_ as Button,bn as Card,T as Checkbox,$ as CheckboxGroup,O as Chip,wn as Divider,G as Flex,Ln as Grid,Cn as Header,D as Input,en as Menu,tn as MenuItem,on as Modal,R as MultiSelect,W as Radio,H as RadioGroup,F as Select,Tn as SideMenu,_n as SideMenuItem,$n as Table,Q as Text,N as ThemeProvider,cn as Toast,un as ToastContainer,hn as Tooltip,y as generateCSSVariables,k as injectCSSVariables,pn as toast,w as tokens,B as useBodyScrollLock,L as useClickOutside,E as useDebounce,j as useEscapeKey,M as useFocusTrap,I as useId,C as useThemeContext,sn as useToast};
2
2
  //# sourceMappingURL=index.esm.js.map