@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.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react/jsx-runtime"),r=require("react"),t=require("react-dom");function e(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}function o(n){if(n&&n.__esModule)return n;var r=Object.create(null);return n&&Object.keys(n).forEach(function(t){if("default"!==t){var e=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(r,t,e.get?e:{enumerable:!0,get:function(){return n[t]}})}}),r.default=n,Object.freeze(r)}var a=e(r),i=o(r);const l=[50,100,200,300,400,500,600,700,800,900];function c(n){const r={};for(const[t,e]of Object.entries(n))"string"==typeof e?(r[t]={},l.forEach(n=>{r[t][n]=e})):"object"==typeof e&&null!==e&&(r[t]=e);return r}const s={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 v(){const n=[];return Object.entries(s.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(s.spacing).forEach(([r,t])=>{n.push(` --vtx-spacing-${r}: ${t};`)}),Object.entries(s.typography.fontFamily).forEach(([r,t])=>{n.push(` --vtx-font-family-${r}: ${t};`)}),Object.entries(s.typography.fontSize).forEach(([r,t])=>{n.push(` --vtx-font-size-${r}: ${t};`)}),Object.entries(s.typography.fontWeight).forEach(([r,t])=>{n.push(` --vtx-font-weight-${r}: ${t};`)}),Object.entries(s.typography.lineHeight).forEach(([r,t])=>{n.push(` --vtx-line-height-${r}: ${t};`)}),Object.entries(s.typography.letterSpacing).forEach(([r,t])=>{n.push(` --vtx-letter-spacing-${r}: ${t};`)}),Object.entries(s.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(s.borderRadius).forEach(([r,t])=>{n.push(` --vtx-radius-${r}: ${t};`)}),Object.entries(s.shadows).forEach(([r,t])=>{n.push(` --vtx-shadow-${r}: ${t};`)}),Object.entries(s.transitions).forEach(([r,t])=>{n.push(` --vtx-transition-${r}: ${t};`)}),Object.entries(s.zIndex).forEach(([r,t])=>{n.push(` --vtx-z-${r}: ${t};`)}),n.join("\n")}function d(){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=v();r.textContent=`:root {\n${t}\n}`}const x=a.default.createContext(void 0),p=a.default.forwardRef(({children:r,initialMode:t="light",customTokens:e,defaultSize:o="md",...i},l)=>{const[v,p]=a.default.useState(t),[m,u]=a.default.useState(o),h=a.default.useMemo(()=>{if(!e)return{tokens:s,mode:v,defaultSize:m};let n={...s,...e};return e.colors&&(n.colors={...s.colors,...c(e.colors)}),{tokens:n,mode:v,defaultSize:m}},[e,v,m]);a.default.useEffect(()=>{document.documentElement.setAttribute("data-theme",v),e&&d()},[v,e]);const g=a.default.useMemo(()=>({theme:h,setMode:p,setDefaultSize:u}),[h]);return n.jsx(x.Provider,{value:g,children:n.jsx("div",{ref:l,...i,children:r})})});p.displayName="ThemeProvider";const m=()=>{const n=a.default.useContext(x);if(!n)throw new Error("useThemeContext must be used within a ThemeProvider");return n};function u(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))}}u(".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 h=a.default.forwardRef(({children:r,variant:t="primary",size:e,fullWidth:o=!1,loading:a=!1,disabled:i=!1,leftIcon:l,rightIcon:c,iconOnly:s=!1,loadingText:v,asLink:d=!1,href:x,target:p,rel:u,className:h="",type:g="button",...f},b)=>{const{theme:w}=m(),y=["vtx-button",`vtx-button--${t}`,`vtx-button--${e||w.defaultSize||"md"}`,o&&"vtx-button--full-width",a&&"vtx-button--loading",s&&"vtx-button--icon-only",!0===f.darkText&&"vtx-button--dark-text",!1===f.darkText&&"vtx-button--light-text",h].filter(Boolean).join(" "),k=f.style?{...f.style}:{};f.textColor&&(k.color=f.textColor);const j=n.jsxs(n.Fragment,{children:[a&&n.jsx("span",{className:"vtx-button__spinner",role:"status","aria-label":"Loading",children:n.jsx("svg",{className:"vtx-button__spinner-icon",viewBox:"0 0 24 24",children:n.jsx("circle",{className:"vtx-button__spinner-circle",cx:"12",cy:"12",r:"10",fill:"none",strokeWidth:"3"})})}),!a&&l&&n.jsx("span",{className:"vtx-button__icon-left",children:l}),!s&&n.jsx("span",{className:"vtx-button__content",children:a&&v?v:r}),s&&!a&&r,!a&&c&&n.jsx("span",{className:"vtx-button__icon-right",children:c})]});return d&&x?n.jsx("a",{ref:b,href:x,target:p,rel:"_blank"===p?"noopener noreferrer":u,className:y,"aria-disabled":i||a,style:k,...f,children:j}):n.jsx("button",{ref:b,type:g,className:y,disabled:i||a,"aria-busy":a,"aria-disabled":i||a,style:k,...f,children:j})});h.displayName="Button";u("/* 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 g=a.default.forwardRef(({checked:t,indeterminate:e=!1,disabled:o=!1,label:a,size:i,variant:l="primary",error:c=!1,helperText:s,onChange:v,className:d="",inputClassName:x="",id:p,...u},h)=>{const{theme:g}=m(),f=i||g.defaultSize||"md",b=r.useId(),w=p||b,y=["vtx-checkbox",`vtx-checkbox--${f}`,`vtx-checkbox--${l}`,o&&"vtx-checkbox--disabled",c&&"vtx-checkbox--error",d].filter(Boolean).join(" "),k=["vtx-checkbox-input",x].filter(Boolean).join(" "),j=r.useRef(null);return r.useImperativeHandle(h,()=>j.current),r.useEffect(()=>{j.current&&(j.current.indeterminate=e)},[e]),n.jsxs("div",{className:y,children:[n.jsxs("label",{className:"vtx-checkbox-label",htmlFor:w,children:[n.jsxs("span",{className:"vtx-checkbox-wrapper",children:[n.jsx("input",{ref:j,type:"checkbox",id:w,className:k,checked:t,disabled:o,onChange:v,...u}),n.jsxs("span",{className:"vtx-checkbox-box",children:[n.jsx("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--check",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})}),n.jsx("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--indeterminate",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round"})})]})]}),a&&n.jsx("span",{className:"vtx-checkbox-label-text",children:a})]}),s&&n.jsx("div",{className:"vtx-checkbox-helper-text",children:s})]})});g.displayName="Checkbox";u("/* 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 f=a.default.forwardRef(({label:t,options:e,value:o,defaultValue:a,onChange:i,disabled:l=!1,error:c=!1,helperText:s,orientation:v="vertical",size:d,className:x="",...p},u)=>{const{theme:h}=m(),f=d||h.defaultSize||"md",[b,w]=r.useState(a||[]),y=void 0!==o,k=y?o:b,j=["vtx-checkbox-group",`vtx-checkbox-group--${v}`,c&&"vtx-checkbox-group--error",l&&"vtx-checkbox-group--disabled",x].filter(Boolean).join(" ");return n.jsxs("div",{ref:u,className:j,...p,children:[t&&n.jsx("div",{className:"vtx-checkbox-group-label",children:t}),n.jsx("div",{className:"vtx-checkbox-group-options",children:e.map(r=>{const t=k.includes(r.value),e=l||r.disabled;return n.jsx(g,{label:r.label,checked:t,disabled:e,error:c,size:f,onChange:n=>((n,r)=>{const t=r?[...k,n]:k.filter(r=>r!==n);y||w(t),null==i||i(t)})(r.value,n.target.checked)},r.value)})}),s&&n.jsx("div",{className:"vtx-checkbox-group-helper-text",children:s})]})});f.displayName="CheckboxGroup";const b=(n,t)=>{r.useEffect(()=>{if(!t)return;const r=n.current;if(!r)return;const e=r.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(),r.addEventListener("keydown",i),()=>{r.removeEventListener("keydown",i)}},[n,t])},w=n=>{r.useEffect(()=>{const r=r=>{"Escape"===r.key&&n()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[n])},y=n=>{r.useEffect(()=>{if(!n)return;const r=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=r}},[n])};let k=0;const j=(n="vtx")=>{const[t]=r.useState(()=>`${n}-${++k}`);return t};u(".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 z=a.default.forwardRef(({label:r,helperText:t,error:e,success:o,size:a="medium",fullWidth:i=!1,leftIcon:l,rightIcon:c,clearable:s=!1,onClear:v,showCount:d=!1,className:x="",wrapperClassName:p="",labelClassName:m="",inputClassName:u="",prefix:h,suffix:g,id:f,disabled:b=!1,required:w=!1,value:y,maxLength:k,...z},N)=>{const S=j("input"),C=f||S,_=`${C}-helper`,T=`${C}-error`,L=`${C}-success`,M=Boolean(e),$=Boolean(o)&&!M,B=s&&y&&String(y).length>0&&!b,E=[t&&!e&&!o&&_,e&&T,o&&L].filter(Boolean).join(" "),A=["vtx-input-wrapper",i&&"vtx-input-wrapper--full-width",p].filter(Boolean).join(" "),I=["vtx-input-container",`vtx-input-container--${a}`,M&&"vtx-input-container--error",$&&"vtx-input-container--success",b&&"vtx-input-container--disabled",(l||h)&&"vtx-input-container--with-left-element",(c||g||B)&&"vtx-input-container--with-right-element",x].filter(Boolean).join(" "),D=y?String(y).length:0,R=d&&k;return n.jsxs("div",{className:A,children:[r&&n.jsxs("label",{htmlFor:C,className:`vtx-input-label ${m}`.trim(),children:[r,w&&n.jsxs("span",{className:"vtx-input-label__required","aria-label":"required",children:[" ","*"]})]}),n.jsxs("div",{className:I,children:[l&&n.jsx("span",{className:"vtx-input-icon vtx-input-icon--left","aria-hidden":"true",children:l}),h&&n.jsx("span",{className:"vtx-input-prefix","aria-hidden":"true",children:h}),n.jsx("input",{ref:N,id:C,className:`vtx-input ${u}`.trim(),disabled:b,required:w,value:y,maxLength:k,"aria-invalid":M,"aria-describedby":E||void 0,...z}),g&&n.jsx("span",{className:"vtx-input-suffix","aria-hidden":"true",children:g}),B&&n.jsx("button",{type:"button",className:"vtx-input-clear",onClick:()=>{null==v||v()},"aria-label":"Clear input",tabIndex:-1,children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),c&&!B&&n.jsx("span",{className:"vtx-input-icon vtx-input-icon--right","aria-hidden":"true",children:c})]}),t&&!e&&!o&&n.jsx("p",{id:_,className:"vtx-input-helper",children:t}),e&&n.jsx("p",{id:T,className:"vtx-input-error",role:"alert",children:e}),o&&n.jsx("p",{id:L,className:"vtx-input-success",role:"status",children:o}),R&&n.jsxs("p",{className:"vtx-input-counter","aria-live":"polite",children:[D," / ",k]})]})});z.displayName="Input";u("/* 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 N=a.default.forwardRef(({label:r,size:t="md",variant:e="filled",color:o="default",icon:a,avatar:i,onDelete:l,onClick:c,disabled:s=!1,className:v="","aria-label":d,"data-testid":x},p)=>{const m=["vtx-chip",`vtx-chip--${t}`,`vtx-chip--${e}`,`vtx-chip--${o}`,c&&!s&&"vtx-chip--clickable",s&&"vtx-chip--disabled",v].filter(Boolean).join(" ");return n.jsxs("div",{ref:p,className:m,onClick:n=>{!s&&c&&c(n)},onKeyDown:n=>{s||!c||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),c(n))},role:c?"button":void 0,tabIndex:c&&!s?0:void 0,"aria-label":d||r,"aria-disabled":s,"data-testid":x,children:[i&&n.jsx("img",{src:i,alt:"",className:"vtx-chip__avatar","aria-hidden":"true"}),a&&!i&&n.jsx("span",{className:"vtx-chip__icon","aria-hidden":"true",children:a}),n.jsx("span",{className:"vtx-chip__label",children:r}),l&&n.jsx("button",{type:"button",className:"vtx-chip__delete",onClick:n=>{n.stopPropagation(),!s&&l&&l(n)},onKeyDown:n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),n.stopPropagation(),!s&&l&&l(n))},disabled:s,"aria-label":`Remove ${r}`,tabIndex:-1,children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})});N.displayName="Chip";u("/* 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 S=a.default.forwardRef(({label:t,helperText:e,error:o,success:a,size:i,fullWidth:l=!1,options:c,value:s,defaultValue:v=[],placeholder:d="Select...",className:x="",grouped:p=!1,getOptionLabel:u="label",getOptionValue:h="value",getOptionDisabled:g="disabled",getOptionGroup:f="group",onChange:b,disabled:w=!1,required:y=!1,id:k,name:z,selectionStyle:S="checkbox",searchable:C=!1,showSelectAll:_=!1,maxChipsDisplay:T,chipColor:L="primary",chipVariant:M="light",loading:$=!1},B)=>{const{theme:E}=m(),A=j("multiselect"),I=k||A,D=`${I}-helper`,R=`${I}-error`,O=`${I}-success`,[W,H]=r.useState(!1),[F,V]=r.useState(""),[Y,P]=r.useState(v),X=r.useRef(null),q=r.useRef(null),G=void 0!==s?s:Y,K=(n,r)=>"function"==typeof r?r(n):"object"==typeof n?n[r]:n,U=Boolean(o),Z=Boolean(a)&&!U,J=[e&&!o&&!a&&D,o&&R,a&&O].filter(Boolean).join(" ");r.useEffect(()=>{const n=n=>{X.current&&!X.current.contains(n.target)&&q.current&&!q.current.contains(n.target)&&(H(!1),V(""))};if(W)return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[W]);const Q=n=>{if(w)return;const r=G.includes(n)?G.filter(r=>r!==n):[...G,n];if(void 0===s&&P(r),b){const n=c.filter(n=>r.includes(K(n,h)));b(r,n)}},nn=F?c.filter(n=>K(n,u).toLowerCase().includes(F.toLowerCase())):c,rn=p?nn.reduce((n,r)=>{const t=K(r,f)||"Other";return n[t]||(n[t]=[]),n[t].push(r),n},{}):{"":nn},tn=c.filter(n=>G.includes(K(n,h))),en=T?tn.slice(0,T):tn,on=T?tn.length-T:0,an=["vtx-multiselect-wrapper",l&&"vtx-multiselect-wrapper--full-width",x].filter(Boolean).join(" "),ln=i||(null==E?void 0:E.defaultSize)||"md",cn=["vtx-multiselect-container",`vtx-multiselect-container--${ln}`,U&&"vtx-multiselect-container--error",Z&&"vtx-multiselect-container--success",w&&"vtx-multiselect-container--disabled",W&&"vtx-multiselect-container--open"].filter(Boolean).join(" "),sn=ln;return n.jsxs("div",{className:an,ref:B,children:[t&&n.jsxs("label",{htmlFor:I,className:"vtx-multiselect-label",children:[t,y&&n.jsxs("span",{className:"vtx-multiselect-label__required","aria-label":"required",children:[" ","*"]})]}),n.jsxs("div",{ref:X,className:cn,"aria-expanded":W,"aria-haspopup":"listbox","aria-labelledby":t?`${I}-label`:void 0,"aria-describedby":J||void 0,"aria-disabled":w,children:[n.jsx("div",{className:"vtx-multiselect-input-area",onClick:()=>!w&&H(!W),role:"button",tabIndex:w?-1:0,onKeyDown:n=>{w||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),H(!W))},children:0===tn.length?n.jsx("span",{className:"vtx-multiselect-placeholder",children:d}):n.jsxs("div",{className:"vtx-multiselect-chips",children:[en.map(r=>{const t=K(r,h),e=K(r,u);return n.jsx(N,{label:e,size:sn,color:L,variant:M,onDelete:n=>{n.stopPropagation(),(n=>{if(w)return;const r=G.filter(r=>r!==n);if(void 0===s&&P(r),b){const n=c.filter(n=>r.includes(K(n,h)));b(r,n)}})(t)}},t)}),on>0&&n.jsx(N,{label:`+${on} more`,size:sn,color:"default",variant:"outlined"})]})}),n.jsx("span",{className:"vtx-multiselect-icon","aria-hidden":"true",children:$?n.jsxs("svg",{className:"vtx-multiselect-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[n.jsx("circle",{className:"vtx-multiselect-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),n.jsx("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.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),W&&n.jsxs("div",{ref:q,className:"vtx-multiselect-dropdown",role:"listbox",children:[C&&n.jsx("div",{className:"vtx-multiselect-search",children:n.jsx("input",{type:"text",placeholder:"Search...",value:F,onChange:n=>V(n.target.value),onClick:n=>n.stopPropagation()})}),_&&n.jsxs("div",{className:"vtx-multiselect-actions",children:[n.jsx("button",{type:"button",className:"vtx-multiselect-action-button",onClick:n=>{n.stopPropagation(),(()=>{const n=c.filter(n=>!K(n,g)).map(n=>K(n,h));void 0===s&&P(n),b&&b(n,c.filter(n=>!K(n,g)))})()},children:"Select All"}),n.jsx("button",{type:"button",className:"vtx-multiselect-action-button",onClick:n=>{n.stopPropagation(),void 0===s&&P([]),b&&b([],[])},children:"Clear All"})]}),n.jsx("div",{className:"vtx-multiselect-options",children:0===nn.length?n.jsx("div",{className:"vtx-multiselect-empty",children:"No options found"}):Object.entries(rn).map(([r,t])=>n.jsxs("div",{children:[p&&r&&n.jsx("div",{className:"vtx-multiselect-optgroup",children:r}),t.map(r=>{const t=K(r,h),e=K(r,u),o=K(r,g),a=G.includes(t),i=["vtx-multiselect-option",a&&"vtx-multiselect-option--selected",o&&"vtx-multiselect-option--disabled"].filter(Boolean).join(" ");return n.jsxs("div",{className:i,onClick:()=>!o&&Q(t),role:"option","aria-selected":a,"aria-disabled":o,tabIndex:o?-1:0,onKeyDown:n=>{o||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),Q(t))},children:["checkbox"===S&&n.jsx("div",{className:"vtx-multiselect-checkbox "+(a?"vtx-multiselect-checkbox--checked":""),children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M3 8L6.5 11.5L13 5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),n.jsx("span",{className:"vtx-multiselect-option-label",children:e}),"checkmark"===S&&n.jsx("div",{className:"vtx-multiselect-checkmark",children:n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("path",{d:"M4 10L8 14L16 6",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]},t)})]},r))})]})]}),z&&n.jsx("select",{multiple:!0,name:z,value:G.map(String),onChange:()=>{},className:"vtx-multiselect-hidden-select",required:y,disabled:w,tabIndex:-1,"aria-hidden":"true",children:c.map(r=>{const t=K(r,h);return n.jsx("option",{value:String(t),children:K(r,u)},t)})}),e&&!o&&!a&&n.jsx("p",{id:D,className:"vtx-multiselect-helper",children:e}),o&&n.jsx("p",{id:R,className:"vtx-multiselect-error",role:"alert",children:o}),a&&n.jsx("p",{id:O,className:"vtx-multiselect-success",role:"status",children:a})]})});S.displayName="MultiSelect";u("/* 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 C=a.default.forwardRef(({checked:t,disabled:e=!1,label:o,size:a="medium",variant:i="primary",error:l=!1,helperText:c,onChange:s,className:v="",inputClassName:d="",id:x,...p},m)=>{const u=r.useId(),h=x||u,g=c?`${h}-helper-text`:void 0,f=["vtx-radio",`vtx-radio--${a}`,`vtx-radio--${i}`,e&&"vtx-radio--disabled",l&&"vtx-radio--error",v].filter(Boolean).join(" "),b=["vtx-radio-input",d].filter(Boolean).join(" "),w=n.jsxs("div",{className:"vtx-radio-wrapper",children:[n.jsx("input",{ref:m,type:"radio",id:h,className:b,checked:t,disabled:e,onChange:s,"aria-describedby":g,...p}),n.jsx("span",{className:"vtx-radio-circle",children:n.jsx("span",{className:"vtx-radio-dot"})})]});return o?n.jsxs("div",{className:f,children:[n.jsxs("label",{htmlFor:h,className:"vtx-radio-label",children:[w,n.jsx("span",{className:"vtx-radio-label-text",children:o})]}),c&&n.jsx("span",{id:g,className:"vtx-radio-helper-text",children:c})]}):n.jsxs("div",{className:f,children:[w,c&&n.jsx("span",{id:g,className:"vtx-radio-helper-text",children:c})]})});C.displayName="Radio";u("/* 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 _=a.default.forwardRef(({name:t,label:e,options:o,value:a,defaultValue:i,onChange:l,disabled:c=!1,error:s=!1,helperText:v,orientation:d="vertical",size:x="medium",variant:p="primary",className:m="",...u},h)=>{const[g,f]=r.useState(i),b=void 0!==a,w=b?a:g,y=["vtx-radio-group",`vtx-radio-group--${d}`,s&&"vtx-radio-group--error",c&&"vtx-radio-group--disabled",m].filter(Boolean).join(" ");return n.jsxs("div",{ref:h,className:y,role:"radiogroup","aria-label":"string"==typeof e?e:void 0,...u,children:[e&&n.jsx("div",{className:"vtx-radio-group-label",children:e}),n.jsx("div",{className:"vtx-radio-group-options",children:o.map(r=>{const e=w===r.value,o=c||r.disabled;return n.jsx(C,{name:t,value:r.value,label:r.label,checked:e,disabled:o,error:s,size:x,variant:p,onChange:()=>{return n=r.value,b||f(n),void(null==l||l(n));var n}},r.value)})}),v&&n.jsx("div",{className:"vtx-radio-group-helper-text",children:v})]})});_.displayName="RadioGroup";u(".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 T=a.default.forwardRef(({label:r,helperText:t,error:e,success:o,size:a="medium",fullWidth:i=!1,options:l,placeholder:c,className:s="",wrapperClassName:v="",id:d,disabled:x=!1,required:p=!1,grouped:m=!1,getOptionLabel:u="label",getOptionValue:h="value",getOptionDisabled:g="disabled",getOptionGroup:f="group",onSelectChange:b,onChange:w,loading:y=!1,...k},z)=>{const N=j("select"),S=d||N,C=`${S}-helper`,_=`${S}-error`,T=`${S}-success`,L=(n,r)=>"function"==typeof r?r(n):"object"==typeof n?n[r]:n,M=Boolean(e),$=Boolean(o)&&!M,B=[t&&!e&&!o&&C,e&&_,o&&T].filter(Boolean).join(" "),E=["vtx-select-wrapper",i&&"vtx-select-wrapper--full-width",v].filter(Boolean).join(" "),A=["vtx-select-container",`vtx-select-container--${a}`,M&&"vtx-select-container--error",$&&"vtx-select-container--success",x&&"vtx-select-container--disabled",s].filter(Boolean).join(" ");return n.jsxs("div",{className:E,children:[r&&n.jsxs("label",{htmlFor:S,className:"vtx-select-label",children:[r,p&&n.jsxs("span",{className:"vtx-select-label__required","aria-label":"required",children:[" ","*"]})]}),n.jsxs("div",{className:A,children:[n.jsxs("select",{ref:z,id:S,className:"vtx-select",disabled:x,required:p,"aria-invalid":M,"aria-describedby":B||void 0,onChange:n=>{if(null==w||w(n),b){const r=l.find(r=>String(L(r,h))===n.target.value);b(n.target.value,r)}},...k,children:[c&&n.jsx("option",{value:"",disabled:!0,children:c}),(()=>{if(!m)return l.map((r,t)=>{const e=L(r,h),o=L(r,u),a=L(r,g);return n.jsx("option",{value:e,disabled:a,children:o},e||t)});const r=l.reduce((n,r)=>{const t=L(r,f)||"Other";return n[t]||(n[t]=[]),n[t].push(r),n},{});return Object.entries(r).map(([r,t])=>n.jsx("optgroup",{label:r,children:t.map((r,t)=>{const e=L(r,h),o=L(r,u),a=L(r,g);return n.jsx("option",{value:e,disabled:a,children:o},e||t)})},r))})()]}),n.jsx("span",{className:"vtx-select-icon","aria-hidden":"true",children:y?n.jsxs("svg",{className:"vtx-select-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[n.jsx("circle",{className:"vtx-select-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),n.jsx("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.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),t&&!e&&!o&&n.jsx("p",{id:C,className:"vtx-select-helper",children:t}),e&&n.jsx("p",{id:_,className:"vtx-select-error",role:"alert",children:e}),o&&n.jsx("p",{id:T,className:"vtx-select-success",role:"status",children:o})]})});T.displayName="Select";const L=a.default.forwardRef(({item:t,isOpen:e,onToggle:o,variant:a="default",size:i="md",showChevron:l=!0,chevronPosition:c="right",expandedIcon:s,collapsedIcon:v,iconType:d="chevron",loading:x=!1,disabled:p=!1,disableAnimations:m=!1},u)=>{const h=r.useRef(null),{id:g,header:f,children:b,disabled:w,className:y,loading:k,status:j="default",icon:z,dataTestId:N}=t,S=p||w,C=x||k,_=()=>{S||C||o()},T=()=>z?n.jsx("div",{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${N||g}-custom-icon`,children:e?z.expanded:z.collapsed}):"custom"===d&&s&&v?n.jsx("div",{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${N||g}-custom-icon`,children:e?s:v}):"plus-minus"===d?n.jsx("div",{className:"accordion-item-chevron accordion-item-chevron--plus-minus "+(e?"open":""),"data-testid":`${N||g}-plus-minus-icon`,children:e?n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M4 8H12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})}):n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M8 4V12M4 8H12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}):n.jsx("div",{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${N||g}-chevron-icon`,children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})});return n.jsxs("div",{ref:u,className:`\n accordion-item\n accordion-item--${a}\n accordion-item--${i}\n ${e?"accordion-item--open":""}\n ${S?"accordion-item--disabled":""}\n ${C?"accordion-item--loading":""}\n ${"default"!==j?`accordion-item--${j}`:""}\n ${y||""}\n `.trim(),"data-testid":N,"aria-expanded":e,"aria-disabled":S,"aria-busy":C,children:[n.jsxs("div",{className:"accordion-item-header",role:"button",tabIndex:S||C?-1:0,"aria-expanded":e,"aria-controls":`accordion-content-${g}`,"aria-disabled":S,"aria-busy":C,"aria-describedby":"default"!==j?`accordion-status-${g}`:void 0,onClick:_,onKeyDown:n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),_())},"data-testid":`${N||g}-header`,children:["left"===c&&l&&T(),n.jsx("div",{className:"accordion-item-header-content",children:f}),"right"===c&&l&&T()]}),n.jsx("div",{id:`accordion-content-${g}`,className:"accordion-item-content "+(e?"accordion-item-content--open":""),role:"region","aria-labelledby":`accordion-header-${g}`,ref:h,style:{maxHeight:m?e?"none":"0":e?"500px":"0",transition:m?"none":void 0},"data-testid":`${N||g}-content`,children:n.jsxs("div",{className:"accordion-item-body",children:["default"!==j&&n.jsx("div",{id:`accordion-status-${g}`,className:`accordion-status accordion-status--${j}`,"aria-live":"polite",children:n.jsxs("span",{className:"visually-hidden",children:["Status: ",j]})}),b]})})]})});L.displayName="AccordionItem";u("/* =============================================================================\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 M=a.default.forwardRef(({items:t,children:e,allowMultiple:o=!1,defaultOpenItems:a=[],openItems:i,onToggle:l,variant:c="default",size:s="md",className:v="",style:d,showChevron:x=!0,chevronPosition:p="right",expandedIcon:m,collapsedIcon:u,iconType:h="chevron",showDivider:g=!0,collapsible:f=!0,loading:b=!1,disabled:w=!1,spacing:y="default",disableAnimations:k=!1,...j},z)=>{const[N,S]=r.useState(a),C=void 0!==i?i:N,_=void 0!==i,T=t||r.Children.toArray(e).filter(n=>r.isValidElement(n)).map((n,t)=>{if(r.isValidElement(n)&&n.props){const r=n;return{id:r.props.id||`accordion-item-${t}`,header:r.props.header||`Item ${t+1}`,children:r.props.children,disabled:r.props.disabled,className:r.props.className}}return{id:`accordion-item-${t}`,header:`Item ${t+1}`,children:n}}),M=r.useCallback(n=>{let r;r=o?C.includes(n)?C.filter(r=>r!==n):[...C,n]:C.includes(n)?f?[]:C:[n],_||S(r),null==l||l(r)},[o,f,C,_,l]);return n.jsx("div",{ref:z,className:`\n accordion\n accordion--${c}\n accordion--${s}\n ${g?"accordion--divider":""}\n ${"compact"===y?"accordion--compact":""}\n ${"spacious"===y?"accordion--spacious":""}\n ${k?"accordion--no-animation":""}\n ${b?"accordion--loading":""}\n ${w?"accordion--disabled":""}\n ${v}\n `.trim(),style:d,role:"presentation","aria-busy":b,...j,children:T.map(r=>n.jsx(L,{item:r,isOpen:C.includes(r.id),onToggle:()=>M(r.id),variant:c,size:s,showChevron:x,chevronPosition:p,expandedIcon:m,collapsedIcon:u,iconType:h,loading:b,disabled:w,spacing:y,disableAnimations:k},r.id))})});M.displayName="Accordion";u("/* 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 $=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M12 4L4 12M4 4l8 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),B={success:n.jsx(()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("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.jsx(()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("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.jsx(()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("path",{d:"M10 0L0 18h20L10 0zm1 15H9v-2h2v2zm0-4H9V7h2v4z",fill:"currentColor"})}),{}),info:n.jsx(()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("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.jsx(()=>n.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"10",cy:"10",r:"9",stroke:"currentColor",strokeWidth:"2",fill:"none"}),n.jsx("path",{d:"M10 6v5M10 13v1",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}),{})},E=a.default.forwardRef(({children:t,title:e,description:o,variant:a="info",alertStyle:i="subtle",size:l,icon:c,dismissible:s=!1,onClose:v,action:d,fullWidth:x=!1,className:p="",style:u,role:h="alert",...g},f)=>{const{theme:b}=m(),w=l||(null==b?void 0:b.defaultSize)||"md",[y,k]=r.useState(!0);if(!y)return null;const j=!1!==c,z=void 0===c?B[a]:c,N=t||o;return n.jsxs("div",{ref:f,className:`\n alert\n alert--${a}\n alert--${i}\n alert--${w}\n ${x?"alert--full-width":""}\n ${p}\n `.trim(),style:u,role:h,...g,children:[j&&n.jsx("div",{className:"alert-icon",children:z}),n.jsxs("div",{className:"alert-content",children:[e&&n.jsx("div",{className:"alert-title",children:e}),N&&n.jsx("div",{className:"alert-message",children:null!=t?t:o})]}),d&&n.jsx("div",{className:"alert-action",children:d}),s&&n.jsx("button",{type:"button",className:"alert-close",onClick:()=>{k(!1),null==v||v()},"aria-label":"Close alert",children:n.jsx($,{})})]})});E.displayName="Alert";u("/* 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 A=a.default.forwardRef(({children:r,direction:t="row",wrap:e="nowrap",justify:o="start",align:a="stretch",alignContent:i,gap:l,rowGap:c,columnGap:s,inline:v=!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",v&&"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!==s&&(k["--vtx-flex-column-gap"]="number"==typeof s?`${s}px`:s),void 0!==x&&(k.flexGrow=x),void 0!==p&&(k.flexShrink=p),void 0!==m&&(k.flexBasis="number"==typeof m?`${m}px`:m),n.jsx(w,{ref:b,className:y,style:k,...f,children:r})});A.displayName="Flex";u("/* ===== 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 I=i.forwardRef(({variant:n="body1",as:r,align:t,color:e,weight:o,transform:a,decoration:l,truncate:c=!1,lineClamp:s,breakWord:v=!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:j,...z},N)=>{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),C=["vtx-text",`vtx-text--${n}`,t&&`vtx-text--align-${t}`,o&&"string"==typeof o&&`vtx-text--weight-${o}`,a&&`vtx-text--transform-${a}`,l&&`vtx-text--decoration-${l}`,c&&"vtx-text--truncate",s&&"vtx-text--line-clamp",v&&"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(" "),_={...k};if(e)if(e.includes(".")){const[n,r]=e.split(".");_.color=`var(--vtx-color-${n}-${r})`}else _.color=e;if(o&&"number"==typeof o&&(_.fontWeight=o),s&&(_.WebkitLineClamp=s),m&&m.length>0){const n=1===m.length?m[0]:`linear-gradient(135deg, ${m.join(", ")})`;_.backgroundImage=n}return h&&(_.fontSize="number"==typeof h?`${h}px`:h),g&&(_.lineHeight="number"==typeof g?`${g}`:g),f&&(_.letterSpacing="number"==typeof f?`${f}px`:f),i.createElement(S,{ref:N,className:C,style:_,...z},j)});I.displayName="Text";u("/* 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 D=({isOpen:r})=>n.jsx("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.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),R=a.default.forwardRef(({label:t,onClick:e,icon:o,rightIcon:a,disabled:i=!1,active:l=!1,variant:c="default",shortcut:s,divider:v=!1,items:d},x)=>{const[p,m]=r.useState(!1),u=r.useRef(null),h=d&&d.length>0,g=a||(h?n.jsx(D,{isOpen:p}):null);return n.jsxs(n.Fragment,{children:[n.jsx("div",{ref:x||u,className:["vtx-menu-item",l&&"vtx-menu-item--active",i&&"vtx-menu-item--disabled","default"!==c&&`vtx-menu-item--${c}`,h&&"vtx-menu-item--has-submenu",p&&"vtx-menu-item--submenu-open"].filter(Boolean).join(" "),onClick:()=>{i||(h?m(!p):e&&e())},onKeyDown:n=>{i||("Enter"===n.key||" "===n.key?(n.preventDefault(),h?m(!p):null==e||e()):"ArrowDown"===n.key&&h&&!p?(n.preventDefault(),m(!0)):"ArrowUp"===n.key&&h&&p&&(n.preventDefault(),m(!1)))},role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i,"aria-haspopup":h?"menu":void 0,"aria-expanded":h?p:void 0,children:n.jsxs(A,{align:"center",gap:8,style:{flex:1},children:[o&&n.jsx("span",{className:"vtx-menu-item-icon",children:o}),n.jsx(I,{variant:"body2",noMargin:!0,style:{flex:1},children:t}),s&&n.jsx(I,{variant:"caption",color:"neutral.500",noMargin:!0,className:"vtx-menu-item-shortcut",children:s}),g&&n.jsx("span",{className:"vtx-menu-item-right-icon",children:g})]})}),h&&p&&n.jsx("div",{className:"vtx-submenu",role:"menu",children:d.map((r,t)=>n.jsx(R,{...r},t))}),v&&n.jsx("div",{className:"vtx-menu-divider",role:"separator"})]})});R.displayName="MenuItem";const O=a.default.forwardRef(({items:t,children:e,orientation:o="vertical",responsive:a=!0,className:i="",width:l},c)=>{const[s,v]=r.useState(!1),d=r.useRef(null);r.useEffect(()=>{if(!a||!s)return;const n=n=>{d.current&&!d.current.contains(n.target)&&v(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[a,s]),r.useEffect(()=>{if(!a||!s)return;const n=n=>{"Escape"===n.key&&v(!1)};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[a,s]);const x=t?t.map((r,t)=>n.jsx(R,{...r},t)):e,p=["vtx-menu",`vtx-menu--${o}`,a&&"vtx-menu--responsive",s&&"vtx-menu--mobile-open",i].filter(Boolean).join(" "),m={width:"vertical"===o&&l?"number"==typeof l?`${l}px`:l:void 0};return n.jsxs("div",{ref:d,className:"vtx-menu-container",children:[a&&n.jsx("button",{className:"vtx-menu-toggle",onClick:()=>v(!s),"aria-label":"Toggle menu","aria-expanded":s,children:n.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:s?n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"}):n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})}),n.jsx("div",{ref:c,className:p,role:"menu",style:m,children:x})]})});O.displayName="Menu";u("/* ===== 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 W=a.default.forwardRef(({isOpen:e,onClose:o,title:a,description:i,children:l,header:c,footer:s,footerButtons:v,size:d,closeOnBackdropClick:x=!0,closeOnEscape:p=!0,showCloseButton:u=!0,transparentBackdrop:g=!1,className:f="",backdropClassName:k="",preventScroll:j=!0,animation:z="fade",onAfterOpen:N,onAfterClose:S,scrollable:C=!1,centered:_=!0},T)=>{const L=r.useRef(null),M=r.useRef(null),{theme:$}=m();let B="md";if(d?B=d:(null==$?void 0:$.defaultSize)&&(B=$.defaultSize),b(L,e),y(j&&e),w(()=>{p&&e&&o()}),r.useEffect(()=>{e?(M.current=document.activeElement,null==N||N()):M.current&&(M.current.focus(),null==S||S())},[e,N,S]),!e)return null;const E=["vtx-modal-backdrop",g&&"vtx-modal-backdrop--transparent",_&&"vtx-modal-backdrop--centered",`vtx-modal-backdrop--${z}`,k].filter(Boolean).join(" "),D=["vtx-modal",`vtx-modal--${B}`,C&&"vtx-modal--scrollable",`vtx-modal--${z}`,f].filter(Boolean).join(" "),R=n.jsx("div",{className:E,onClick:n=>{x&&n.target===n.currentTarget&&o()},role:"presentation",children:n.jsxs("div",{ref:n=>{L.current=n,"function"==typeof T?T(n):T&&(T.current=n)},className:D,role:"dialog","aria-modal":"true","aria-labelledby":a?"vtx-modal-title":void 0,"aria-describedby":i?"vtx-modal-description":void 0,children:[c?n.jsx("div",{className:"vtx-modal-header",children:c}):a||u?n.jsxs(A,{className:"vtx-modal-header",justify:"between",align:"center",gap:8,children:[a&&n.jsxs(A,{direction:"column",gap:4,className:"vtx-modal-header-content",children:[n.jsx(I,{as:"h2",variant:"h6",weight:"semibold",id:"vtx-modal-title",noMargin:!0,children:a}),i&&n.jsx(I,{variant:"body2",color:"neutral.600",id:"vtx-modal-description",noMargin:!0,children:i})]}),u&&n.jsx(h,{variant:"ghost",iconOnly:!0,size:"sm",className:"vtx-modal-close",onClick:o,"aria-label":"Close modal",children:n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",children:n.jsx("path",{d:"M18 6L6 18M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}):null,n.jsx(A,{direction:"column",className:"vtx-modal-body",children:l}),(s||v)&&n.jsx(A,{className:"vtx-modal-footer",justify:"end",align:"center",gap:8,children:v?v.map((r,t)=>n.jsx(h,{variant:r.variant||"secondary",size:r.size||(null==$?void 0:$.defaultSize)||"md",loading:r.loading,disabled:r.disabled,onClick:r.onClick,children:r.label},t)):s})]})});return t.createPortal(R,document.body)});W.displayName="Modal";u("/* ===== 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 H={success:n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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"})})},F=n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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"})}),V=a.default.forwardRef(({children:t,onDismiss:e,id:o,variant:i="default",autoClose:l=5e3,closeButton:c=!0,progressBar:s=!0,pauseOnHover:v=!0,pauseOnFocusLoss:d=!0,icon:x,action:p,className:m="",style:u,title:h,description:g,animationDuration:f=300,isVisible:b,createdAt:w,onClose:y,onOpen:k,toastId:j,...z},N)=>{const[S,C]=r.useState(!1),[_,T]=r.useState(!1),[L,M]=r.useState(100),$=r.useRef(null),B=r.useRef(Date.now()),E=r.useRef(0),A=a.default.useCallback(()=>{C(!0),setTimeout(()=>{e()},f)},[e,f]);r.useEffect(()=>{if(!1===l||_)return;return $.current=setInterval(()=>{const n=Date.now()-B.current-E.current,r=Math.max(0,l-n);M(r/l*100),r<=0&&A()},16),()=>{$.current&&clearInterval($.current)}},[l,_,A]);const I=["vtx-toast",`vtx-toast--${i}`,S&&"vtx-toast--exiting",m].filter(Boolean).join(" ");return n.jsxs("div",{ref:N,className:I,style:{...u,"--vtx-toast-animation-duration":`${f}ms`},onMouseEnter:()=>{v&&!_&&(T(!0),E.current=Date.now())},onMouseLeave:()=>{if(v&&_){T(!1);const n=Date.now()-E.current;B.current+=n}},onFocus:()=>{if(d&&_){T(!1);const n=Date.now()-E.current;B.current+=n}},onBlur:()=>{d&&!_&&(T(!0),E.current=Date.now())},role:"alert","aria-live":"polite","data-toast-id":o,...z,children:[n.jsxs("div",{className:"vtx-toast__wrapper",children:[!1===x?null:x?n.jsx("div",{className:"vtx-toast__icon",children:x}):n.jsx("div",{className:"vtx-toast__icon",children:H[i]}),h||g?n.jsxs("div",{className:"vtx-toast__content",children:[h&&n.jsx("div",{className:"vtx-toast__title",children:h}),g&&n.jsx("div",{className:"vtx-toast__description",children:g}),t&&n.jsx("div",{className:"vtx-toast__body",children:t})]}):n.jsx("div",{className:"vtx-toast__content",children:t}),n.jsxs("div",{className:"vtx-toast__actions",children:[p&&n.jsx("button",{className:"vtx-toast__action",onClick:p.onClick,type:"button",children:p.label}),c&&n.jsx("button",{className:"vtx-toast__close",onClick:A,type:"button","aria-label":"Close notification",children:F})]})]}),s&&!1!==l&&n.jsx("div",{className:"vtx-toast__progress-container",children:n.jsx("div",{className:"vtx-toast__progress",style:{transform:`scaleX(${L/100})`,animationPlayState:_?"paused":"running"}})})]})});V.displayName="Toast";const Y=r.createContext(null),P=()=>{const n=r.useContext(Y);if(!n)throw new Error("useToast must be used within a ToastProvider");return n},X=({children:t})=>{const[e,o]=r.useState([]),a=r.useCallback(n=>{o(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)})},[]),i=r.useCallback((n,r={})=>{var t;const e=r.toastId||Date.now()+Math.random(),i={id:e,content:n,createdAt:Date.now(),isVisible:!0,autoClose:5e3,closeButton:!0,progressBar:!0,pauseOnHover:!0,pauseOnFocusLoss:!0,variant:"default",animationDuration:300,...r};return o(n=>{const r=n.filter(n=>n.id!==e);return[i,...r]}),!1!==i.autoClose&&setTimeout(()=>{a(e)},i.autoClose),null===(t=r.onOpen)||void 0===t||t.call(r),e},[a]),l=r.useCallback(()=>{o([])},[]),c=r.useCallback((n,r)=>{o(t=>t.map(t=>t.id===n?{...t,...r}:t))},[]),s={toasts:e,addToast:i,removeToast:a,clearAllToasts:l,updateToast:c};return n.jsx(Y.Provider,{value:s,children:t})};class q{constructor(){this.addToastFn=null,this.removeToastFn=null,this.clearAllToastsFn=null,this.updateToastFn=null}static getInstance(){return q.instance||(q.instance=new q),q.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 G=q.getInstance();u("/* ===== 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 K=({position:e="top-right",limit:o=5,gap:a=12,margin:i=16,className:l="",style:c,stacked:s=!0,theme:v="auto"})=>{const{toasts:d,removeToast:x,addToast:p,clearAllToasts:m,updateToast:u}=P(),h=r.useRef(null);r.useEffect(()=>{G.setMethods(p,x,m,u)},[p,x,m,u]),r.useEffect(()=>{if("auto"===v){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",v)},[v]);const g=d.slice(0,o),f=Math.max(0,d.length-o),b=["vtx-toast-container",`vtx-toast-container--${e}`,s&&"vtx-toast-container--stacked",l].filter(Boolean).join(" ");return 0===g.length?null:t.createPortal(n.jsxs("div",{ref:h,className:b,style:{...(n=>{const r={position:"fixed",zIndex:"var(--vtx-z-notification, 1400)",pointerEvents:"none"};switch(n){case"top-left":return{...r,top:i,left:i};case"top-center":return{...r,top:i,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...r,top:i,right:i};case"bottom-left":return{...r,bottom:i,left:i};case"bottom-center":return{...r,bottom:i,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:i,right:i}}})(e),"--vtx-toast-gap":`${a}px`,...c},"aria-live":"polite","aria-label":"Notifications",children:[f>0&&n.jsxs("div",{className:"vtx-toast-container__hidden-count",children:["+",f," more"]}),n.jsx("div",{className:"vtx-toast-container__list",children:g.map((r,t)=>n.jsx(V,{id:r.id,isVisible:r.isVisible,onDismiss:()=>x(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)};u(".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 U=a.default.forwardRef(({content:e,placement:o="top",delay:a=200,hideDelay:i=0,children:l,open:c,disabled:s=!1,arrow:v=!1,maxWidth:d="300px",variant:x="dark",dismissible:p=!1,onShow:m,onHide:u,onDismiss:h,className:g="",...f},b)=>{const[w,y]=r.useState(c||!1),[k,j]=r.useState(!1),[z,N]=r.useState({top:0,left:0}),S=r.useRef(null),C=r.useRef(null),_=r.useRef(null),T=r.useRef(null),L=r.useRef(!1),M=()=>{s||(L.current=!0,_.current&&clearTimeout(_.current),T.current&&clearTimeout(T.current),C.current=setTimeout(()=>{if(S.current&&L.current){const n=S.current.getBoundingClientRect(),r=B(n,o);N(r),j(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{y(!0),null==m||m()})})}},a))},$=()=>{L.current=!1,C.current&&clearTimeout(C.current),_.current=setTimeout(()=>{L.current||(y(!1),null==u||u(),T.current=setTimeout(()=>{j(!1)},150))},i)},B=(n,r)=>{const t=v?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}};r.useEffect(()=>{void 0!==c&&(c?(j(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{y(!0)})})):(y(!1),T.current=setTimeout(()=>{j(!1)},150)))},[c]),r.useEffect(()=>()=>{C.current&&clearTimeout(C.current),_.current&&clearTimeout(_.current),T.current&&clearTimeout(T.current)},[]);const E=["vtx-tooltip",`vtx-tooltip--${o}`,`vtx-tooltip--${x}`,v&&"vtx-tooltip--with-arrow",w&&"vtx-tooltip--visible",g].filter(Boolean).join(" "),A=void 0!==c&&c||k,I=r.cloneElement(l,{ref:n=>{S.current=n;const r=l.ref;"function"==typeof r?r(n):r&&"object"==typeof r&&"current"in r&&(r.current=n)},onMouseEnter:n=>{var r,t;void 0===c&&M(),null===(t=(r=l.props).onMouseEnter)||void 0===t||t.call(r,n)},onMouseLeave:n=>{var r,t;void 0===c&&$(),null===(t=(r=l.props).onMouseLeave)||void 0===t||t.call(r,n)},onFocus:n=>{var r,t;void 0===c&&M(),null===(t=(r=l.props).onFocus)||void 0===t||t.call(r,n)},onBlur:n=>{var r,t;void 0===c&&$(),null===(t=(r=l.props).onBlur)||void 0===t||t.call(r,n)},"aria-describedby":w?"vtx-tooltip-content":void 0});return n.jsxs(n.Fragment,{children:[I,A&&t.createPortal(n.jsxs("div",{ref:b,id:"vtx-tooltip-content",role:"tooltip",className:E,style:{top:`${z.top}px`,left:`${z.left}px`,maxWidth:d},onMouseEnter:()=>{s||void 0!==c||(L.current=!0,_.current&&clearTimeout(_.current))},onMouseLeave:()=>{s||void 0!==c||$()},...f,children:[v&&n.jsx("span",{className:"vtx-tooltip-arrow","aria-hidden":"true"}),n.jsxs("div",{className:"vtx-tooltip-inner",children:[n.jsx("span",{className:"vtx-tooltip-content",children:e}),p&&n.jsx("button",{type:"button",className:"vtx-tooltip-close",onClick:()=>{L.current=!1,y(!1),null==h||h(),null==u||u(),T.current=setTimeout(()=>{j(!1)},150)},"aria-label":"Dismiss tooltip",children:n.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M11 3L3 11M3 3L11 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]}),document.body)]})});U.displayName="Tooltip";u(".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 Z=a.default.forwardRef(({src:t,alt:e="",size:o,shape:a="circle",fallback:i="?",onImageError:l,onImageLoad:c,imgProps:s,statusIndicator:v,statusPosition:d="bottom-right",className:x="",...p},u)=>{const{theme:h}=m(),g=o||h.defaultSize||"md",[f,b]=r.useState(!1),w=["vtx-avatar",`vtx-avatar--${g}`,`vtx-avatar--${a}`,v&&"vtx-avatar--with-status",x].filter(Boolean).join(" "),y=t&&!f,k=i.slice(0,2).toUpperCase();return n.jsxs("div",{ref:u,className:w,role:"img","aria-label":e||i||"Avatar",...p,children:[y?n.jsx("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.jsx("span",{className:"vtx-avatar-fallback","aria-hidden":"true",children:k}),v&&n.jsx("span",{className:`vtx-avatar-status vtx-avatar-status--${d}`,"aria-label":"Status indicator",children:v})]})});Z.displayName="Avatar";u(".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 J=a.default.forwardRef(({variant:t="neutral",size:e="medium",pill:o=!1,dot:a=!1,outline:i=!1,maxLength:l,icon:c,children:s,className:v="",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",v].filter(Boolean).join(" "),u=r.useMemo(()=>l&&"string"==typeof s&&s.length>l?`${s.slice(0,l)}...`:s,[s,l]);return n.jsxs("span",{ref:p,className:m,...x,children:[a&&n.jsx("span",{className:"vtx-badge-dot","aria-hidden":"true"}),c&&n.jsx("span",{className:"vtx-badge-icon","aria-hidden":"true",children:c}),n.jsx("span",{className:"vtx-badge-content",children:u}),d&&n.jsx("button",{type:"button",className:"vtx-badge-remove",onClick:d,"aria-label":"Remove badge",children:n.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:n.jsx("path",{d:"M9 3L3 9M3 3L9 9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})});J.displayName="Badge";u(".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 Q=a.default.forwardRef(({children:r,variant:t="elevated",size:e,noPadding:o=!1,padding:a,hoverable:i=!1,clickable:l=!1,className:c="",header:s,footer:v,divider:d=!1,style:x,onClick:p,tabIndex:u,...h},g)=>{const{theme:f}=m(),b=["vtx-card",`vtx-card--${t}`,`vtx-card--${e||(null==f?void 0:f.defaultSize)||"md"}`,i?"vtx-card--hoverable":"",l?"vtx-card--clickable":"",o&&!a?"vtx-card--no-padding":"",c].filter(Boolean).join(" "),w={...x||{},...a?{"--vtx-card-padding":a}:{}},y=l?"number"==typeof u?u:0:u;return n.jsxs("div",{ref:g,className:b,style:w,onClick:p,tabIndex:y,...h,children:[s&&n.jsx("div",{className:"vtx-card-header"+(d?" vtx-card-header--divider":""),children:s}),n.jsx("div",{className:"vtx-card-content",children:r}),v&&n.jsx("div",{className:"vtx-card-footer"+(d?" vtx-card-footer--divider":""),children:v})]})});Q.displayName="Card";u("/* 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 nn=a.default.forwardRef(({textAlign:r="center",orientation:t="horizontal",variant:e="fullWidth",light:o=!1,flexItem:a=!1,children:i,component:l,className:c="",role:s,...v},d)=>{const x=l||(i||"vertical"===t?"div":"hr"),p=s||("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(" "),u="vertical"===t&&"hr"!==x?{"aria-orientation":"vertical"}:{};return n.jsx(x,{ref:d,className:m,role:p,...u,...v,children:i&&n.jsx("span",{className:"vtx-divider-wrapper",children:i})})});nn.displayName="Divider";u("/* 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 rn=()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n.jsx("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"})}),tn=()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n.jsx("path",{d:"M4 6h16M4 12h16M4 18h16",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),en=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n.jsx("path",{d:"M19 9l-7 7-7-7",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),on=a.default.forwardRef(({notifications:r,onNotificationClick:t,onMarkAllAsRead:e,onClose:o},a)=>{const i=r.filter(n=>!n.read).length;return n.jsxs("div",{ref:a,className:"vtx-header-notifications-panel",children:[n.jsx("div",{className:"vtx-header-notifications-header",children:n.jsxs(A,{justify:"between",align:"center",children:[n.jsx(I,{variant:"subtitle2",noMargin:!0,children:"Notifications"}),i>0&&e&&n.jsx("button",{className:"vtx-header-notifications-mark-read",onClick:()=>{e(),o()},children:"Mark all as read"})]})}),n.jsx("div",{className:"vtx-header-notifications-list",children:0===r.length?n.jsxs("div",{className:"vtx-header-notifications-empty",children:[n.jsx(rn,{}),n.jsx(I,{variant:"body2",color:"neutral.500",noMargin:!0,children:"No notifications"})]}):r.map(r=>n.jsxs("div",{className:`vtx-header-notification-item ${r.read?"":"vtx-header-notification-item--unread"} ${r.type?`vtx-header-notification-item--${r.type}`:""}`,onClick:()=>{null==t||t(r),o()},children:[r.icon&&n.jsx("div",{className:"vtx-header-notification-icon",children:r.icon}),n.jsxs("div",{className:"vtx-header-notification-content",children:[n.jsx(I,{variant:"body2",noMargin:!0,style:{fontWeight:r.read?400:600},children:r.title}),r.description&&n.jsx(I,{variant:"caption",color:"neutral.600",noMargin:!0,children:r.description}),n.jsx(I,{variant:"caption",color:"neutral.500",noMargin:!0,style:{marginTop:"4px"},children:r.time})]}),!r.read&&n.jsx("div",{className:"vtx-header-notification-dot"})]},r.id))})]})});on.displayName="NotificationPanel";const an=a.default.forwardRef(({logo:t,title:e,onToggleSidebar:o,showToggle:a=!0,notifications:i=[],onNotificationClick:l,onMarkAllAsRead:c,userName:s,userSubtitle:v,userAvatar:d,userMenuItems:x=[],actions:p,className:m="",sticky:u=!0},h)=>{const[g,f]=r.useState(!1),[b,w]=r.useState(!1),y=r.useRef(null),k=r.useRef(null),j=r.useRef(null),z=i.filter(n=>!n.read).length;r.useEffect(()=>{const n=n=>{y.current&&!y.current.contains(n.target)&&j.current&&!j.current.contains(n.target)&&f(!1),k.current&&!k.current.contains(n.target)&&w(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[]);const N=["vtx-header",u&&"vtx-header--sticky",m].filter(Boolean).join(" ");return n.jsxs("header",{ref:h,className:N,children:[n.jsxs(A,{align:"center",gap:16,style:{flex:1},children:[a&&o&&n.jsx("button",{className:"vtx-header-toggle",onClick:o,"aria-label":"Toggle sidebar",children:n.jsx(tn,{})}),t&&n.jsx("div",{className:"vtx-header-logo",children:t}),e&&n.jsx(I,{variant:"h6",noMargin:!0,className:"vtx-header-title",children:e})]}),p&&n.jsx("div",{className:"vtx-header-actions",children:p}),n.jsxs("div",{className:"vtx-header-right",children:[i&&i.length>0&&n.jsxs("div",{className:"vtx-header-notifications",ref:y,children:[n.jsxs("button",{className:"vtx-header-icon-button "+(g?"vtx-header-icon-button--active":""),onClick:()=>f(!g),"aria-label":"Notifications",children:[n.jsx(rn,{}),z>0&&n.jsx(J,{variant:"error",size:"small",style:{position:"absolute",top:"4px",right:"4px",minWidth:"18px",height:"18px",padding:"0 4px"},children:z>9?"9+":z})]}),g&&n.jsx(on,{ref:j,notifications:i,onNotificationClick:l,onMarkAllAsRead:c,onClose:()=>f(!1)})]}),s&&n.jsxs("div",{className:"vtx-header-user-menu",ref:k,children:[n.jsxs("button",{className:"vtx-header-user-button "+(b?"vtx-header-user-button--active":""),onClick:()=>w(!b),"aria-label":"User menu",children:[n.jsx(Z,{src:d,alt:s,size:"sm"}),!d&&n.jsx("span",{className:"vtx-header-avatar-fallback",children:s.split(" ").map(n=>n[0]).join("").slice(0,2)}),n.jsxs("div",{className:"vtx-header-user-info",children:[n.jsx(I,{variant:"body2",noMargin:!0,style:{fontWeight:600},children:s}),v&&n.jsx(I,{variant:"caption",color:"neutral.600",noMargin:!0,children:v})]}),n.jsx(en,{})]}),b&&n.jsx("div",{className:"vtx-header-user-dropdown",children:n.jsx(O,{items:x,responsive:!1})})]})]})]})});an.displayName="Header";u("/* 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 ln=({isOpen:r})=>n.jsx("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.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),cn=a.default.forwardRef(({label:t,onClick:e,icon:o,disabled:a=!1,active:i=!1,items:l,badge:c,href:s,collapsed:v=!1,level:d=0},x)=>{const[p,m]=r.useState(!1),u=l&&l.length>0,h=n.jsx(n.Fragment,{children:n.jsxs(A,{align:"center",gap:v?0:12,style:{flex:1,minWidth:0},children:[o&&n.jsx("span",{className:"vtx-sidemenu-item-icon",children:o}),!v&&n.jsxs(n.Fragment,{children:[n.jsx(I,{variant:"body2",noMargin:!0,style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t}),c&&n.jsx("span",{className:"vtx-sidemenu-item-badge",children:c}),u&&n.jsx(ln,{isOpen:p})]}),v&&c&&n.jsx("span",{className:"vtx-sidemenu-item-badge",children:c})]})}),g=["vtx-sidemenu-item",i&&"vtx-sidemenu-item--active",a&&"vtx-sidemenu-item--disabled",u&&"vtx-sidemenu-item--has-submenu",v&&"vtx-sidemenu-item--collapsed"].filter(Boolean).join(" "),f=s?"a":"div";return n.jsxs(n.Fragment,{children:[n.jsx(f,{ref:x,className:g,onClick:n=>{a||(u?(n.preventDefault(),m(!p)):e&&(n.preventDefault(),e()))},onKeyDown:n=>{a||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),u?m(!p):null==e||e())},role:"menuitem",tabIndex:a?-1:0,"aria-disabled":a,"aria-expanded":u?p:void 0,href:s,title:v?t:void 0,"data-label":v?t:void 0,children:h}),u&&p&&!v&&n.jsx("div",{className:"vtx-sidemenu-submenu",children:l.map((r,t)=>n.jsx(cn,{...r,collapsed:v,level:d+1},t))})]})});cn.displayName="SideMenuItem";const sn=a.default.forwardRef(({items:r,collapsed:t=!1,onCollapseToggle:e,className:o="",width:a="260px",collapsedWidth:i="80px",header:l,footer:c},s)=>{const v=t?"number"==typeof i?`${i}px`:i:"number"==typeof a?`${a}px`:a,d=["vtx-sidemenu",t&&"vtx-sidemenu--collapsed",o].filter(Boolean).join(" ");return n.jsxs("aside",{ref:s,className:d,style:{width:v},role:"navigation",children:[l&&n.jsx("div",{className:"vtx-sidemenu-header",children:l}),n.jsx("div",{className:"vtx-sidemenu-content",children:r.map((r,e)=>n.jsx(cn,{...r,collapsed:t},e))}),c&&n.jsx("div",{className:"vtx-sidemenu-footer",children:c}),e&&n.jsx("button",{className:"vtx-sidemenu-toggle",onClick:()=>e(!t),"aria-label":t?"Expand sidebar":"Collapse sidebar",title:t?"Expand sidebar":"Collapse sidebar",children:n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:t?"M9 5l7 7-7 7":"M15 19l-7-7 7-7"})})})]})});sn.displayName="SideMenu";function vn({columns:t,data:e,getRowKey:o,striped:a=!1,hoverable:i=!0,bordered:l=!1,size:c="medium",caption:s,emptyMessage:v="No data available",loading:d=!1,loadingContent:x,scrollable:p=!0,maxHeight:m,onRowClick:u,isRowSelected:h,onRowSelect:g,sortable:f=!1,sortConfig:b,onSortChange:w,className:y="",containerClassName:k="",...j}){const[z,N]=r.useState(b||null),S=b||z,C=n=>{if(!f)return;const r=(null==S?void 0:S.key)===n&&"asc"===S.direction?"desc":"asc",t={key:n,direction:r};w?w(n,r):N(t)},_=r.useMemo(()=>{if(!S||!f)return e;const n=t.find(n=>n.key===S.key),r=null==n?void 0:n.sortFn;return[...e].sort((n,t)=>{if(r)return"asc"===S.direction?r(n,t):r(t,n);const e=n[S.key],o=t[S.key];if("string"==typeof e&&"string"==typeof o)return"asc"===S.direction?e.localeCompare(o):o.localeCompare(e);if("number"==typeof e&&"number"==typeof o)return"asc"===S.direction?e-o:o-e;const a=String(e),i=String(o);return"asc"===S.direction?a.localeCompare(i):i.localeCompare(a)})},[e,S,t,f]),T=["vtx-table-container",p&&"vtx-table-container--scrollable",m&&"vtx-table-container--fixed-header",k].filter(Boolean).join(" "),L=["vtx-table",`vtx-table--${c}`,a&&"vtx-table--striped",i&&"vtx-table--hoverable",l&&"vtx-table--bordered",u&&"vtx-table--clickable",y].filter(Boolean).join(" "),M=(n,r,t)=>{g&&g(n,r),null==u||u(n,r,t)},$=r=>{if(!f)return null;const t=(null==S?void 0:S.key)===r,e=null==S?void 0:S.direction;return n.jsx("span",{className:"vtx-table-sort-icon","aria-hidden":"true",children:n.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:[n.jsx("path",{d:"M6 3L9 6H3L6 3Z",fill:t&&"asc"===e?"currentColor":"#ccc"}),n.jsx("path",{d:"M6 9L3 6H9L6 9Z",fill:t&&"desc"===e?"currentColor":"#ccc"})]})})};return n.jsx("div",{className:T,style:{maxHeight:m},children:n.jsxs("table",{className:L,...j,children:[s&&n.jsx("caption",{className:"vtx-table-caption",children:s}),n.jsx("thead",{className:"vtx-table-header",children:n.jsx("tr",{children:t.map(r=>{const t=f&&!1!==r.sortable,e=["vtx-table-header-cell",t&&"vtx-table-header-cell--sortable",r.sticky&&`vtx-table-header-cell--sticky-${r.sticky}`,r.headerClassName].filter(Boolean).join(" ");return n.jsx("th",{className:e,style:{width:r.width,minWidth:r.minWidth,maxWidth:r.maxWidth,textAlign:r.align||"left"},onClick:()=>t&&C(r.key),role:t?"button":void 0,tabIndex:t?0:void 0,onKeyDown:n=>{!t||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),C(r.key))},"aria-sort":(null==S?void 0:S.key)===r.key?"asc"===S.direction?"ascending":"descending":void 0,children:n.jsxs("span",{className:"vtx-table-header-content",children:[r.header,t&&$(r.key)]})},r.key)})})}),n.jsx("tbody",{className:"vtx-table-body",children:d?n.jsx("tr",{children:n.jsx("td",{colSpan:t.length,className:"vtx-table-loading",children:x||n.jsx("span",{className:"vtx-table-loading-spinner",children:"Loading..."})})}):0===_.length?n.jsx("tr",{children:n.jsx("td",{colSpan:t.length,className:"vtx-table-empty",children:v})}):_.map((r,e)=>{const a=null==h?void 0:h(r,e),i=["vtx-table-row",a&&"vtx-table-row--selected"].filter(Boolean).join(" ");return n.jsx("tr",{className:i,onClick:n=>M(r,e,n),role:u||g?"button":void 0,tabIndex:u||g?0:void 0,"aria-selected":a,onKeyDown:n=>{!u&&!g||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),M(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.jsx("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))})})]})})}u(".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"),vn.displayName="Table";u("/* 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 dn=a.default.forwardRef(({container:r=!1,item:t=!1,spacing:e,rowSpacing:o,columnSpacing:a,xs:i,sm:l,md:c,lg:s,xl:v,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!==s&&"vtx-grid-lg"+(!0===s?"":"auto"===s?"-auto":`-${s}`),void 0!==v&&"vtx-grid-xl"+(!0===v?"":"auto"===v?"-auto":`-${v}`),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.jsx("div",{ref:w,className:y,style:Object.keys(k).length>0?k:void 0,...b,children:g})});dn.displayName="Grid";u("/**\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"),exports.Accordion=M,exports.AccordionItem=L,exports.Alert=E,exports.Avatar=Z,exports.Badge=J,exports.Button=h,exports.Card=Q,exports.Checkbox=g,exports.CheckboxGroup=f,exports.Chip=N,exports.Divider=nn,exports.Flex=A,exports.Grid=dn,exports.Header=an,exports.Input=z,exports.Menu=O,exports.MenuItem=R,exports.Modal=W,exports.MultiSelect=S,exports.Radio=C,exports.RadioGroup=_,exports.Select=T,exports.SideMenu=sn,exports.SideMenuItem=cn,exports.Table=vn,exports.Text=I,exports.ThemeProvider=p,exports.Toast=V,exports.ToastContainer=({children:r,...t})=>n.jsxs(X,{children:[r,n.jsx(K,{...t})]}),exports.Tooltip=U,exports.generateCSSVariables=v,exports.injectCSSVariables=d,exports.toast=G,exports.tokens=s,exports.useBodyScrollLock=y,exports.useClickOutside=(n,t)=>{r.useEffect(()=>{const r=r=>{const e=null==n?void 0:n.current;e&&!e.contains(r.target)&&t(r)};return document.addEventListener("mousedown",r),document.addEventListener("touchstart",r),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("touchstart",r)}},[n,t])},exports.useDebounce=(n,t)=>{const[e,o]=r.useState(n);return r.useEffect(()=>{const r=setTimeout(()=>{o(n)},t);return()=>{clearTimeout(r)}},[n,t]),e},exports.useEscapeKey=w,exports.useFocusTrap=b,exports.useId=j,exports.useThemeContext=m,exports.useToast=P;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react/jsx-runtime"),r=require("react"),t=require("react-dom");function e(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}function o(n){if(n&&n.__esModule)return n;var r=Object.create(null);return n&&Object.keys(n).forEach(function(t){if("default"!==t){var e=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(r,t,e.get?e:{enumerable:!0,get:function(){return n[t]}})}}),r.default=n,Object.freeze(r)}var a=e(r),i=o(r);const l=[50,100,200,300,400,500,600,700,800,900];function c(n){const r={};for(const[t,e]of Object.entries(n))"string"==typeof e?(r[t]={},l.forEach(n=>{r[t][n]=e})):"object"==typeof e&&null!==e&&(r[t]=e);return r}const s={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 v(){const n=[];return Object.entries(s.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(s.spacing).forEach(([r,t])=>{n.push(` --vtx-spacing-${r}: ${t};`)}),Object.entries(s.typography.fontFamily).forEach(([r,t])=>{n.push(` --vtx-font-family-${r}: ${t};`)}),Object.entries(s.typography.fontSize).forEach(([r,t])=>{n.push(` --vtx-font-size-${r}: ${t};`)}),Object.entries(s.typography.fontWeight).forEach(([r,t])=>{n.push(` --vtx-font-weight-${r}: ${t};`)}),Object.entries(s.typography.lineHeight).forEach(([r,t])=>{n.push(` --vtx-line-height-${r}: ${t};`)}),Object.entries(s.typography.letterSpacing).forEach(([r,t])=>{n.push(` --vtx-letter-spacing-${r}: ${t};`)}),Object.entries(s.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(s.borderRadius).forEach(([r,t])=>{n.push(` --vtx-radius-${r}: ${t};`)}),Object.entries(s.shadows).forEach(([r,t])=>{n.push(` --vtx-shadow-${r}: ${t};`)}),Object.entries(s.transitions).forEach(([r,t])=>{n.push(` --vtx-transition-${r}: ${t};`)}),Object.entries(s.zIndex).forEach(([r,t])=>{n.push(` --vtx-z-${r}: ${t};`)}),n.join("\n")}function d(){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=v();r.textContent=`:root {\n${t}\n}`}const x=a.default.createContext(void 0),p=a.default.forwardRef(({children:r,initialMode:t="light",customTokens:e,defaultSize:o="md",...i},l)=>{const[v,p]=a.default.useState(t),[m,u]=a.default.useState(o),h=a.default.useMemo(()=>{if(!e)return{tokens:s,mode:v,defaultSize:m};let n={...s,...e};return e.colors&&(n.colors={...s.colors,...c(e.colors)}),{tokens:n,mode:v,defaultSize:m}},[e,v,m]);a.default.useEffect(()=>{document.documentElement.setAttribute("data-theme",v),e&&d()},[v,e]);const g=a.default.useMemo(()=>({theme:h,setMode:p,setDefaultSize:u}),[h]);return n.jsx(x.Provider,{value:g,children:n.jsx("div",{ref:l,...i,children:r})})});p.displayName="ThemeProvider";const m=()=>{const n=a.default.useContext(x);if(!n)throw new Error("useThemeContext must be used within a ThemeProvider");return n};function u(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))}}u(".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 h=a.default.forwardRef(({children:r,variant:t="primary",size:e,fullWidth:o=!1,loading:a=!1,disabled:i=!1,leftIcon:l,rightIcon:c,iconOnly:s=!1,loadingText:v,asLink:d=!1,href:x,target:p,rel:u,className:h="",type:g="button",...f},b)=>{const{theme:w}=m(),y=["vtx-button",`vtx-button--${t}`,`vtx-button--${e||w.defaultSize||"md"}`,o&&"vtx-button--full-width",a&&"vtx-button--loading",s&&"vtx-button--icon-only",!0===f.darkText&&"vtx-button--dark-text",!1===f.darkText&&"vtx-button--light-text",h].filter(Boolean).join(" "),k=f.style?{...f.style}:{};f.textColor&&(k.color=f.textColor);const j=n.jsxs(n.Fragment,{children:[a&&n.jsx("span",{className:"vtx-button__spinner",role:"status","aria-label":"Loading",children:n.jsx("svg",{className:"vtx-button__spinner-icon",viewBox:"0 0 24 24",children:n.jsx("circle",{className:"vtx-button__spinner-circle",cx:"12",cy:"12",r:"10",fill:"none",strokeWidth:"3"})})}),!a&&l&&n.jsx("span",{className:"vtx-button__icon-left",children:l}),!s&&n.jsx("span",{className:"vtx-button__content",children:a&&v?v:r}),s&&!a&&r,!a&&c&&n.jsx("span",{className:"vtx-button__icon-right",children:c})]});return d&&x?n.jsx("a",{ref:b,href:x,target:p,rel:"_blank"===p?"noopener noreferrer":u,className:y,"aria-disabled":i||a,style:k,...f,children:j}):n.jsx("button",{ref:b,type:g,className:y,disabled:i||a,"aria-busy":a,"aria-disabled":i||a,style:k,...f,children:j})});h.displayName="Button";u("/* 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 g=a.default.forwardRef(({checked:t,indeterminate:e=!1,disabled:o=!1,label:a,size:i,variant:l="primary",error:c=!1,helperText:s,onChange:v,className:d="",inputClassName:x="",id:p,...u},h)=>{const{theme:g}=m(),f=i||g.defaultSize||"md",b=r.useId(),w=p||b,y=["vtx-checkbox",`vtx-checkbox--${f}`,`vtx-checkbox--${l}`,o&&"vtx-checkbox--disabled",c&&"vtx-checkbox--error",d].filter(Boolean).join(" "),k=["vtx-checkbox-input",x].filter(Boolean).join(" "),j=r.useRef(null);return r.useImperativeHandle(h,()=>j.current),r.useEffect(()=>{j.current&&(j.current.indeterminate=e)},[e]),n.jsxs("div",{className:y,children:[n.jsxs("label",{className:"vtx-checkbox-label",htmlFor:w,children:[n.jsxs("span",{className:"vtx-checkbox-wrapper",children:[n.jsx("input",{ref:j,type:"checkbox",id:w,className:k,checked:t,disabled:o,onChange:v,...u}),n.jsxs("span",{className:"vtx-checkbox-box",children:[n.jsx("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--check",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})}),n.jsx("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--indeterminate",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round"})})]})]}),a&&n.jsx("span",{className:"vtx-checkbox-label-text",children:a})]}),s&&n.jsx("div",{className:"vtx-checkbox-helper-text",children:s})]})});g.displayName="Checkbox";u("/* 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 f=a.default.forwardRef(({label:t,options:e,value:o,defaultValue:a,onChange:i,disabled:l=!1,error:c=!1,helperText:s,orientation:v="vertical",size:d,className:x="",...p},u)=>{const{theme:h}=m(),f=d||h.defaultSize||"md",[b,w]=r.useState(a||[]),y=void 0!==o,k=y?o:b,j=["vtx-checkbox-group",`vtx-checkbox-group--${v}`,c&&"vtx-checkbox-group--error",l&&"vtx-checkbox-group--disabled",x].filter(Boolean).join(" ");return n.jsxs("div",{ref:u,className:j,...p,children:[t&&n.jsx("div",{className:"vtx-checkbox-group-label",children:t}),n.jsx("div",{className:"vtx-checkbox-group-options",children:e.map(r=>{const t=k.includes(r.value),e=l||r.disabled;return n.jsx(g,{label:r.label,checked:t,disabled:e,error:c,size:f,onChange:n=>((n,r)=>{const t=r?[...k,n]:k.filter(r=>r!==n);y||w(t),null==i||i(t)})(r.value,n.target.checked)},r.value)})}),s&&n.jsx("div",{className:"vtx-checkbox-group-helper-text",children:s})]})});f.displayName="CheckboxGroup";const b=(n,t)=>{r.useEffect(()=>{if(!t)return;const r=n.current;if(!r)return;const e=r.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(),r.addEventListener("keydown",i),()=>{r.removeEventListener("keydown",i)}},[n,t])},w=n=>{r.useEffect(()=>{const r=r=>{"Escape"===r.key&&n()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[n])},y=n=>{r.useEffect(()=>{if(!n)return;const r=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=r}},[n])};let k=0;const j=(n="vtx")=>{const[t]=r.useState(()=>`${n}-${++k}`);return t};u(".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 z=a.default.forwardRef(({label:r,helperText:t,error:e,success:o,size:a="medium",fullWidth:i=!1,leftIcon:l,rightIcon:c,clearable:s=!1,onClear:v,showCount:d=!1,className:x="",wrapperClassName:p="",labelClassName:m="",inputClassName:u="",prefix:h,suffix:g,id:f,disabled:b=!1,required:w=!1,value:y,maxLength:k,...z},N)=>{const S=j("input"),C=f||S,_=`${C}-helper`,T=`${C}-error`,$=`${C}-success`,L=Boolean(e),M=Boolean(o)&&!L,B=s&&y&&String(y).length>0&&!b,E=[t&&!e&&!o&&_,e&&T,o&&$].filter(Boolean).join(" "),I=["vtx-input-wrapper",i&&"vtx-input-wrapper--full-width",p].filter(Boolean).join(" "),A=["vtx-input-container",`vtx-input-container--${a}`,L&&"vtx-input-container--error",M&&"vtx-input-container--success",b&&"vtx-input-container--disabled",(l||h)&&"vtx-input-container--with-left-element",(c||g||B)&&"vtx-input-container--with-right-element",x].filter(Boolean).join(" "),D=y?String(y).length:0,R=d&&k;return n.jsxs("div",{className:I,children:[r&&n.jsxs("label",{htmlFor:C,className:`vtx-input-label ${m}`.trim(),children:[r,w&&n.jsxs("span",{className:"vtx-input-label__required","aria-label":"required",children:[" ","*"]})]}),n.jsxs("div",{className:A,children:[l&&n.jsx("span",{className:"vtx-input-icon vtx-input-icon--left","aria-hidden":"true",children:l}),h&&n.jsx("span",{className:"vtx-input-prefix","aria-hidden":"true",children:h}),n.jsx("input",{ref:N,id:C,className:`vtx-input ${u}`.trim(),disabled:b,required:w,value:y,maxLength:k,"aria-invalid":L,"aria-describedby":E||void 0,...z}),g&&n.jsx("span",{className:"vtx-input-suffix","aria-hidden":"true",children:g}),B&&n.jsx("button",{type:"button",className:"vtx-input-clear",onClick:()=>{null==v||v()},"aria-label":"Clear input",tabIndex:-1,children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),c&&!B&&n.jsx("span",{className:"vtx-input-icon vtx-input-icon--right","aria-hidden":"true",children:c})]}),t&&!e&&!o&&n.jsx("p",{id:_,className:"vtx-input-helper",children:t}),e&&n.jsx("p",{id:T,className:"vtx-input-error",role:"alert",children:e}),o&&n.jsx("p",{id:$,className:"vtx-input-success",role:"status",children:o}),R&&n.jsxs("p",{className:"vtx-input-counter","aria-live":"polite",children:[D," / ",k]})]})});z.displayName="Input";u("/* 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 N=a.default.forwardRef(({label:r,size:t="md",variant:e="filled",color:o="default",icon:a,avatar:i,onDelete:l,onClick:c,disabled:s=!1,className:v="","aria-label":d,"data-testid":x},p)=>{const m=["vtx-chip",`vtx-chip--${t}`,`vtx-chip--${e}`,`vtx-chip--${o}`,c&&!s&&"vtx-chip--clickable",s&&"vtx-chip--disabled",v].filter(Boolean).join(" ");return n.jsxs("div",{ref:p,className:m,onClick:n=>{!s&&c&&c(n)},onKeyDown:n=>{s||!c||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),c(n))},role:c?"button":void 0,tabIndex:c&&!s?0:void 0,"aria-label":d||r,"aria-disabled":s,"data-testid":x,children:[i&&n.jsx("img",{src:i,alt:"",className:"vtx-chip__avatar","aria-hidden":"true"}),a&&!i&&n.jsx("span",{className:"vtx-chip__icon","aria-hidden":"true",children:a}),n.jsx("span",{className:"vtx-chip__label",children:r}),l&&n.jsx("button",{type:"button",className:"vtx-chip__delete",onClick:n=>{n.stopPropagation(),!s&&l&&l(n)},onKeyDown:n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),n.stopPropagation(),!s&&l&&l(n))},disabled:s,"aria-label":`Remove ${r}`,tabIndex:-1,children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})});N.displayName="Chip";u("/* 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 S=a.default.forwardRef(({label:t,helperText:e,error:o,success:a,size:i,fullWidth:l=!1,options:c,value:s,defaultValue:v=[],placeholder:d="Select...",className:x="",grouped:p=!1,getOptionLabel:u="label",getOptionValue:h="value",getOptionDisabled:g="disabled",getOptionGroup:f="group",onChange:b,disabled:w=!1,required:y=!1,id:k,name:z,selectionStyle:S="checkbox",searchable:C=!1,showSelectAll:_=!1,maxChipsDisplay:T,chipColor:$="primary",chipVariant:L="light",loading:M=!1},B)=>{const{theme:E}=m(),I=j("multiselect"),A=k||I,D=`${A}-helper`,R=`${A}-error`,O=`${A}-success`,[W,H]=r.useState(!1),[F,V]=r.useState(""),[Y,P]=r.useState(v),X=r.useRef(null),q=r.useRef(null),G=void 0!==s?s:Y,K=(n,r)=>"function"==typeof r?r(n):"object"==typeof n?n[r]:n,U=Boolean(o),Z=Boolean(a)&&!U,J=[e&&!o&&!a&&D,o&&R,a&&O].filter(Boolean).join(" ");r.useEffect(()=>{const n=n=>{X.current&&!X.current.contains(n.target)&&q.current&&!q.current.contains(n.target)&&(H(!1),V(""))};if(W)return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[W]);const Q=n=>{if(w)return;const r=G.includes(n)?G.filter(r=>r!==n):[...G,n];if(void 0===s&&P(r),b){const n=c.filter(n=>r.includes(K(n,h)));b(r,n)}},nn=F?c.filter(n=>K(n,u).toLowerCase().includes(F.toLowerCase())):c,rn=p?nn.reduce((n,r)=>{const t=K(r,f)||"Other";return n[t]||(n[t]=[]),n[t].push(r),n},{}):{"":nn},tn=c.filter(n=>G.includes(K(n,h))),en=T?tn.slice(0,T):tn,on=T?tn.length-T:0,an=["vtx-multiselect-wrapper",l&&"vtx-multiselect-wrapper--full-width",x].filter(Boolean).join(" "),ln=i||(null==E?void 0:E.defaultSize)||"md",cn=["vtx-multiselect-container",`vtx-multiselect-container--${ln}`,U&&"vtx-multiselect-container--error",Z&&"vtx-multiselect-container--success",w&&"vtx-multiselect-container--disabled",W&&"vtx-multiselect-container--open"].filter(Boolean).join(" "),sn=ln;return n.jsxs("div",{className:an,ref:B,children:[t&&n.jsxs("label",{htmlFor:A,className:"vtx-multiselect-label",children:[t,y&&n.jsxs("span",{className:"vtx-multiselect-label__required","aria-label":"required",children:[" ","*"]})]}),n.jsxs("div",{ref:X,className:cn,"aria-expanded":W,"aria-haspopup":"listbox","aria-labelledby":t?`${A}-label`:void 0,"aria-describedby":J||void 0,"aria-disabled":w,children:[n.jsx("div",{className:"vtx-multiselect-input-area",onClick:()=>!w&&H(!W),role:"button",tabIndex:w?-1:0,onKeyDown:n=>{w||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),H(!W))},children:0===tn.length?n.jsx("span",{className:"vtx-multiselect-placeholder",children:d}):n.jsxs("div",{className:"vtx-multiselect-chips",children:[en.map(r=>{const t=K(r,h),e=K(r,u);return n.jsx(N,{label:e,size:sn,color:$,variant:L,onDelete:n=>{n.stopPropagation(),(n=>{if(w)return;const r=G.filter(r=>r!==n);if(void 0===s&&P(r),b){const n=c.filter(n=>r.includes(K(n,h)));b(r,n)}})(t)}},t)}),on>0&&n.jsx(N,{label:`+${on} more`,size:sn,color:"default",variant:"outlined"})]})}),n.jsx("span",{className:"vtx-multiselect-icon","aria-hidden":"true",children:M?n.jsxs("svg",{className:"vtx-multiselect-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[n.jsx("circle",{className:"vtx-multiselect-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),n.jsx("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.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),W&&n.jsxs("div",{ref:q,className:"vtx-multiselect-dropdown",role:"listbox",children:[C&&n.jsx("div",{className:"vtx-multiselect-search",children:n.jsx("input",{type:"text",placeholder:"Search...",value:F,onChange:n=>V(n.target.value),onClick:n=>n.stopPropagation()})}),_&&n.jsxs("div",{className:"vtx-multiselect-actions",children:[n.jsx("button",{type:"button",className:"vtx-multiselect-action-button",onClick:n=>{n.stopPropagation(),(()=>{const n=c.filter(n=>!K(n,g)).map(n=>K(n,h));void 0===s&&P(n),b&&b(n,c.filter(n=>!K(n,g)))})()},children:"Select All"}),n.jsx("button",{type:"button",className:"vtx-multiselect-action-button",onClick:n=>{n.stopPropagation(),void 0===s&&P([]),b&&b([],[])},children:"Clear All"})]}),n.jsx("div",{className:"vtx-multiselect-options",children:0===nn.length?n.jsx("div",{className:"vtx-multiselect-empty",children:"No options found"}):Object.entries(rn).map(([r,t])=>n.jsxs("div",{children:[p&&r&&n.jsx("div",{className:"vtx-multiselect-optgroup",children:r}),t.map(r=>{const t=K(r,h),e=K(r,u),o=K(r,g),a=G.includes(t),i=["vtx-multiselect-option",a&&"vtx-multiselect-option--selected",o&&"vtx-multiselect-option--disabled"].filter(Boolean).join(" ");return n.jsxs("div",{className:i,onClick:()=>!o&&Q(t),role:"option","aria-selected":a,"aria-disabled":o,tabIndex:o?-1:0,onKeyDown:n=>{o||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),Q(t))},children:["checkbox"===S&&n.jsx("div",{className:"vtx-multiselect-checkbox "+(a?"vtx-multiselect-checkbox--checked":""),children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M3 8L6.5 11.5L13 5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),n.jsx("span",{className:"vtx-multiselect-option-label",children:e}),"checkmark"===S&&n.jsx("div",{className:"vtx-multiselect-checkmark",children:n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("path",{d:"M4 10L8 14L16 6",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]},t)})]},r))})]})]}),z&&n.jsx("select",{multiple:!0,name:z,value:G.map(String),onChange:()=>{},className:"vtx-multiselect-hidden-select",required:y,disabled:w,tabIndex:-1,"aria-hidden":"true",children:c.map(r=>{const t=K(r,h);return n.jsx("option",{value:String(t),children:K(r,u)},t)})}),e&&!o&&!a&&n.jsx("p",{id:D,className:"vtx-multiselect-helper",children:e}),o&&n.jsx("p",{id:R,className:"vtx-multiselect-error",role:"alert",children:o}),a&&n.jsx("p",{id:O,className:"vtx-multiselect-success",role:"status",children:a})]})});S.displayName="MultiSelect";u("/* 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 C=a.default.forwardRef(({checked:t,disabled:e=!1,label:o,size:a="medium",variant:i="primary",error:l=!1,helperText:c,onChange:s,className:v="",inputClassName:d="",id:x,...p},m)=>{const u=r.useId(),h=x||u,g=c?`${h}-helper-text`:void 0,f=["vtx-radio",`vtx-radio--${a}`,`vtx-radio--${i}`,e&&"vtx-radio--disabled",l&&"vtx-radio--error",v].filter(Boolean).join(" "),b=["vtx-radio-input",d].filter(Boolean).join(" "),w=n.jsxs("div",{className:"vtx-radio-wrapper",children:[n.jsx("input",{ref:m,type:"radio",id:h,className:b,checked:t,disabled:e,onChange:s,"aria-describedby":g,...p}),n.jsx("span",{className:"vtx-radio-circle",children:n.jsx("span",{className:"vtx-radio-dot"})})]});return o?n.jsxs("div",{className:f,children:[n.jsxs("label",{htmlFor:h,className:"vtx-radio-label",children:[w,n.jsx("span",{className:"vtx-radio-label-text",children:o})]}),c&&n.jsx("span",{id:g,className:"vtx-radio-helper-text",children:c})]}):n.jsxs("div",{className:f,children:[w,c&&n.jsx("span",{id:g,className:"vtx-radio-helper-text",children:c})]})});C.displayName="Radio";u("/* 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 _=a.default.forwardRef(({name:t,label:e,options:o,value:a,defaultValue:i,onChange:l,disabled:c=!1,error:s=!1,helperText:v,orientation:d="vertical",size:x="medium",variant:p="primary",className:m="",...u},h)=>{const[g,f]=r.useState(i),b=void 0!==a,w=b?a:g,y=["vtx-radio-group",`vtx-radio-group--${d}`,s&&"vtx-radio-group--error",c&&"vtx-radio-group--disabled",m].filter(Boolean).join(" ");return n.jsxs("div",{ref:h,className:y,role:"radiogroup","aria-label":"string"==typeof e?e:void 0,...u,children:[e&&n.jsx("div",{className:"vtx-radio-group-label",children:e}),n.jsx("div",{className:"vtx-radio-group-options",children:o.map(r=>{const e=w===r.value,o=c||r.disabled;return n.jsx(C,{name:t,value:r.value,label:r.label,checked:e,disabled:o,error:s,size:x,variant:p,onChange:()=>{return n=r.value,b||f(n),void(null==l||l(n));var n}},r.value)})}),v&&n.jsx("div",{className:"vtx-radio-group-helper-text",children:v})]})});_.displayName="RadioGroup";u(".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 T=a.default.forwardRef(({label:r,helperText:t,error:e,success:o,size:a="medium",fullWidth:i=!1,options:l,placeholder:c,className:s="",wrapperClassName:v="",id:d,disabled:x=!1,required:p=!1,grouped:m=!1,getOptionLabel:u="label",getOptionValue:h="value",getOptionDisabled:g="disabled",getOptionGroup:f="group",onSelectChange:b,onChange:w,loading:y=!1,...k},z)=>{const N=j("select"),S=d||N,C=`${S}-helper`,_=`${S}-error`,T=`${S}-success`,$=(n,r)=>"function"==typeof r?r(n):"object"==typeof n?n[r]:n,L=Boolean(e),M=Boolean(o)&&!L,B=[t&&!e&&!o&&C,e&&_,o&&T].filter(Boolean).join(" "),E=["vtx-select-wrapper",i&&"vtx-select-wrapper--full-width",v].filter(Boolean).join(" "),I=["vtx-select-container",`vtx-select-container--${a}`,L&&"vtx-select-container--error",M&&"vtx-select-container--success",x&&"vtx-select-container--disabled",s].filter(Boolean).join(" ");return n.jsxs("div",{className:E,children:[r&&n.jsxs("label",{htmlFor:S,className:"vtx-select-label",children:[r,p&&n.jsxs("span",{className:"vtx-select-label__required","aria-label":"required",children:[" ","*"]})]}),n.jsxs("div",{className:I,children:[n.jsxs("select",{ref:z,id:S,className:"vtx-select",disabled:x,required:p,"aria-invalid":L,"aria-describedby":B||void 0,onChange:n=>{if(null==w||w(n),b){const r=l.find(r=>String($(r,h))===n.target.value);b(n.target.value,r)}},...k,children:[c&&n.jsx("option",{value:"",disabled:!0,children:c}),(()=>{if(!m)return l.map((r,t)=>{const e=$(r,h),o=$(r,u),a=$(r,g);return n.jsx("option",{value:e,disabled:a,children:o},e||t)});const r=l.reduce((n,r)=>{const t=$(r,f)||"Other";return n[t]||(n[t]=[]),n[t].push(r),n},{});return Object.entries(r).map(([r,t])=>n.jsx("optgroup",{label:r,children:t.map((r,t)=>{const e=$(r,h),o=$(r,u),a=$(r,g);return n.jsx("option",{value:e,disabled:a,children:o},e||t)})},r))})()]}),n.jsx("span",{className:"vtx-select-icon","aria-hidden":"true",children:y?n.jsxs("svg",{className:"vtx-select-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[n.jsx("circle",{className:"vtx-select-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),n.jsx("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.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),t&&!e&&!o&&n.jsx("p",{id:C,className:"vtx-select-helper",children:t}),e&&n.jsx("p",{id:_,className:"vtx-select-error",role:"alert",children:e}),o&&n.jsx("p",{id:T,className:"vtx-select-success",role:"status",children:o})]})});T.displayName="Select";const $=a.default.forwardRef(({item:t,isOpen:e,onToggle:o,variant:a="default",size:i="md",showChevron:l=!0,chevronPosition:c="right",expandedIcon:s,collapsedIcon:v,iconType:d="chevron",loading:x=!1,disabled:p=!1,disableAnimations:m=!1},u)=>{const h=r.useRef(null),{id:g,header:f,children:b,disabled:w,className:y,loading:k,status:j="default",icon:z,dataTestId:N}=t,S=p||w,C=x||k,_=()=>{S||C||o()},T=()=>z?n.jsx("div",{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${N||g}-custom-icon`,children:e?z.expanded:z.collapsed}):"custom"===d&&s&&v?n.jsx("div",{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${N||g}-custom-icon`,children:e?s:v}):"plus-minus"===d?n.jsx("div",{className:"accordion-item-chevron accordion-item-chevron--plus-minus "+(e?"open":""),"data-testid":`${N||g}-plus-minus-icon`,children:e?n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M4 8H12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})}):n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M8 4V12M4 8H12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}):n.jsx("div",{className:"accordion-item-chevron "+(e?"open":""),"data-testid":`${N||g}-chevron-icon`,children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})});return n.jsxs("div",{ref:u,className:`\n accordion-item\n accordion-item--${a}\n accordion-item--${i}\n ${e?"accordion-item--open":""}\n ${S?"accordion-item--disabled":""}\n ${C?"accordion-item--loading":""}\n ${"default"!==j?`accordion-item--${j}`:""}\n ${y||""}\n `.trim(),"data-testid":N,"aria-expanded":e,"aria-disabled":S,"aria-busy":C,children:[n.jsxs("div",{className:"accordion-item-header",role:"button",tabIndex:S||C?-1:0,"aria-expanded":e,"aria-controls":`accordion-content-${g}`,"aria-disabled":S,"aria-busy":C,"aria-describedby":"default"!==j?`accordion-status-${g}`:void 0,onClick:_,onKeyDown:n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),_())},"data-testid":`${N||g}-header`,children:["left"===c&&l&&T(),n.jsx("div",{className:"accordion-item-header-content",children:f}),"right"===c&&l&&T()]}),n.jsx("div",{id:`accordion-content-${g}`,className:"accordion-item-content "+(e?"accordion-item-content--open":""),role:"region","aria-labelledby":`accordion-header-${g}`,ref:h,style:{maxHeight:m?e?"none":"0":e?"500px":"0",transition:m?"none":void 0},"data-testid":`${N||g}-content`,children:n.jsxs("div",{className:"accordion-item-body",children:["default"!==j&&n.jsx("div",{id:`accordion-status-${g}`,className:`accordion-status accordion-status--${j}`,"aria-live":"polite",children:n.jsxs("span",{className:"visually-hidden",children:["Status: ",j]})}),b]})})]})});$.displayName="AccordionItem";u("/* =============================================================================\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 L=a.default.forwardRef(({items:t,children:e,allowMultiple:o=!1,defaultOpenItems:a=[],openItems:i,onToggle:l,variant:c="default",size:s="md",className:v="",style:d,showChevron:x=!0,chevronPosition:p="right",expandedIcon:m,collapsedIcon:u,iconType:h="chevron",showDivider:g=!0,collapsible:f=!0,loading:b=!1,disabled:w=!1,spacing:y="default",disableAnimations:k=!1,...j},z)=>{const[N,S]=r.useState(a),C=void 0!==i?i:N,_=void 0!==i,T=t||r.Children.toArray(e).filter(n=>r.isValidElement(n)).map((n,t)=>{if(r.isValidElement(n)&&n.props){const r=n;return{id:r.props.id||`accordion-item-${t}`,header:r.props.header||`Item ${t+1}`,children:r.props.children,disabled:r.props.disabled,className:r.props.className}}return{id:`accordion-item-${t}`,header:`Item ${t+1}`,children:n}}),L=r.useCallback(n=>{let r;r=o?C.includes(n)?C.filter(r=>r!==n):[...C,n]:C.includes(n)?f?[]:C:[n],_||S(r),null==l||l(r)},[o,f,C,_,l]);return n.jsx("div",{ref:z,className:`\n accordion\n accordion--${c}\n accordion--${s}\n ${g?"accordion--divider":""}\n ${"compact"===y?"accordion--compact":""}\n ${"spacious"===y?"accordion--spacious":""}\n ${k?"accordion--no-animation":""}\n ${b?"accordion--loading":""}\n ${w?"accordion--disabled":""}\n ${v}\n `.trim(),style:d,role:"presentation","aria-busy":b,...j,children:T.map(r=>n.jsx($,{item:r,isOpen:C.includes(r.id),onToggle:()=>L(r.id),variant:c,size:s,showChevron:x,chevronPosition:p,expandedIcon:m,collapsedIcon:u,iconType:h,loading:b,disabled:w,spacing:y,disableAnimations:k},r.id))})});L.displayName="Accordion";u("/* 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 M=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M12 4L4 12M4 4l8 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),B={success:n.jsx(()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("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.jsx(()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("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.jsx(()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("path",{d:"M10 0L0 18h20L10 0zm1 15H9v-2h2v2zm0-4H9V7h2v4z",fill:"currentColor"})}),{}),info:n.jsx(()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:n.jsx("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.jsx(()=>n.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"10",cy:"10",r:"9",stroke:"currentColor",strokeWidth:"2",fill:"none"}),n.jsx("path",{d:"M10 6v5M10 13v1",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}),{})},E=a.default.forwardRef(({children:t,title:e,description:o,variant:a="info",alertStyle:i="subtle",size:l,icon:c,dismissible:s=!1,onClose:v,action:d,fullWidth:x=!1,className:p="",style:u,role:h="alert",...g},f)=>{const{theme:b}=m(),w=l||(null==b?void 0:b.defaultSize)||"md",[y,k]=r.useState(!0);if(!y)return null;const j=!1!==c,z=void 0===c?B[a]:c,N=t||o;return n.jsxs("div",{ref:f,className:`\n alert\n alert--${a}\n alert--${i}\n alert--${w}\n ${x?"alert--full-width":""}\n ${p}\n `.trim(),style:u,role:h,...g,children:[j&&n.jsx("div",{className:"alert-icon",children:z}),n.jsxs("div",{className:"alert-content",children:[e&&n.jsx("div",{className:"alert-title",children:e}),N&&n.jsx("div",{className:"alert-message",children:null!=t?t:o})]}),d&&n.jsx("div",{className:"alert-action",children:d}),s&&n.jsx("button",{type:"button",className:"alert-close",onClick:()=>{k(!1),null==v||v()},"aria-label":"Close alert",children:n.jsx(M,{})})]})});E.displayName="Alert";u("/* 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 I=a.default.forwardRef(({children:r,direction:t="row",wrap:e="nowrap",justify:o="start",align:a="stretch",alignContent:i,gap:l,rowGap:c,columnGap:s,inline:v=!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",v&&"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!==s&&(k["--vtx-flex-column-gap"]="number"==typeof s?`${s}px`:s),void 0!==x&&(k.flexGrow=x),void 0!==p&&(k.flexShrink=p),void 0!==m&&(k.flexBasis="number"==typeof m?`${m}px`:m),n.jsx(w,{ref:b,className:y,style:k,...f,children:r})});I.displayName="Flex";u("/* ===== 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 A="dynamic-styles";const D=new Set;function R(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(!D.has(n)){(function(){let n=document.getElementById(A);return n||(n=document.createElement("style"),n.id=A,document.head.appendChild(n)),n})().appendChild(document.createTextNode(n)),D.add(n)}return e}}return n}const O=i.forwardRef(({variant:n="body1",as:r,align:t,color:e,weight:o,transform:a,decoration:l,truncate:c=!1,lineClamp:s,breakWord:v=!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:j,...z},N)=>{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),C=["vtx-text",`vtx-text--${n}`,t&&`vtx-text--align-${t}`,o&&"string"==typeof o&&`vtx-text--weight-${o}`,a&&`vtx-text--transform-${a}`,l&&`vtx-text--decoration-${l}`,c&&"vtx-text--truncate",s&&"vtx-text--line-clamp",v&&"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(" "),_={...k};if(e)if(e.includes(".")){const[n,r]=e.split(".");_.color=`var(--vtx-color-${n}-${r})`}else _.color=e;if(o&&"number"==typeof o&&(_.fontWeight=o),s&&(_.WebkitLineClamp=s),m&&m.length>0){const n=1===m.length?m[0]:`linear-gradient(135deg, ${m.join(", ")})`;_.backgroundImage=n}return h&&(_.fontSize="number"==typeof h?`${h}px`:h),g&&(_.lineHeight="number"==typeof g?`${g}`:g),f&&(_.letterSpacing="number"==typeof f?`${f}px`:f),i.createElement(S,{ref:N,className:C,style:_,...z},j)});O.displayName="Text";const W=(H=O,r=>{const t=(r.className||"").split(" ").map(n=>R(n)).join(" ");return n.jsx(H,{...r,className:t})});var H;u("/* 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 F=({isOpen:r})=>n.jsx("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.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),V=a.default.forwardRef(({label:t,onClick:e,icon:o,rightIcon:a,disabled:i=!1,active:l=!1,variant:c="default",shortcut:s,divider:v=!1,items:d},x)=>{const[p,m]=r.useState(!1),u=r.useRef(null),h=d&&d.length>0,g=a||(h?n.jsx(F,{isOpen:p}):null);return n.jsxs(n.Fragment,{children:[n.jsx("div",{ref:x||u,className:["vtx-menu-item",l&&"vtx-menu-item--active",i&&"vtx-menu-item--disabled","default"!==c&&`vtx-menu-item--${c}`,h&&"vtx-menu-item--has-submenu",p&&"vtx-menu-item--submenu-open"].filter(Boolean).join(" "),onClick:()=>{i||(h?m(!p):e&&e())},onKeyDown:n=>{i||("Enter"===n.key||" "===n.key?(n.preventDefault(),h?m(!p):null==e||e()):"ArrowDown"===n.key&&h&&!p?(n.preventDefault(),m(!0)):"ArrowUp"===n.key&&h&&p&&(n.preventDefault(),m(!1)))},role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i,"aria-haspopup":h?"menu":void 0,"aria-expanded":h?p:void 0,children:n.jsxs(I,{align:"center",gap:8,style:{flex:1},children:[o&&n.jsx("span",{className:"vtx-menu-item-icon",children:o}),n.jsx(W,{variant:"body2",noMargin:!0,style:{flex:1},children:t}),s&&n.jsx(W,{variant:"caption",color:"neutral.500",noMargin:!0,className:"vtx-menu-item-shortcut",children:s}),g&&n.jsx("span",{className:"vtx-menu-item-right-icon",children:g})]})}),h&&p&&n.jsx("div",{className:"vtx-submenu",role:"menu",children:d.map((r,t)=>n.jsx(V,{...r},t))}),v&&n.jsx("div",{className:"vtx-menu-divider",role:"separator"})]})});V.displayName="MenuItem";const Y=a.default.forwardRef(({items:t,children:e,orientation:o="vertical",responsive:a=!0,className:i="",width:l},c)=>{const[s,v]=r.useState(!1),d=r.useRef(null);r.useEffect(()=>{if(!a||!s)return;const n=n=>{d.current&&!d.current.contains(n.target)&&v(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[a,s]),r.useEffect(()=>{if(!a||!s)return;const n=n=>{"Escape"===n.key&&v(!1)};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[a,s]);const x=t?t.map((r,t)=>n.jsx(V,{...r},t)):e,p=["vtx-menu",`vtx-menu--${o}`,a&&"vtx-menu--responsive",s&&"vtx-menu--mobile-open",i].filter(Boolean).join(" "),m={width:"vertical"===o&&l?"number"==typeof l?`${l}px`:l:void 0};return n.jsxs("div",{ref:d,className:"vtx-menu-container",children:[a&&n.jsx("button",{className:"vtx-menu-toggle",onClick:()=>v(!s),"aria-label":"Toggle menu","aria-expanded":s,children:n.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:s?n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"}):n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})}),n.jsx("div",{ref:c,className:p,role:"menu",style:m,children:x})]})});Y.displayName="Menu";u("/* ===== 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 P=a.default.forwardRef(({isOpen:e,onClose:o,title:a,description:i,children:l,header:c,footer:s,footerButtons:v,size:d,closeOnBackdropClick:x=!0,closeOnEscape:p=!0,showCloseButton:u=!0,transparentBackdrop:g=!1,className:f="",backdropClassName:k="",preventScroll:j=!0,animation:z="fade",onAfterOpen:N,onAfterClose:S,scrollable:C=!1,centered:_=!0},T)=>{const $=r.useRef(null),L=r.useRef(null),{theme:M}=m();let B="md";if(d?B=d:(null==M?void 0:M.defaultSize)&&(B=M.defaultSize),b($,e),y(j&&e),w(()=>{p&&e&&o()}),r.useEffect(()=>{e?(L.current=document.activeElement,null==N||N()):L.current&&(L.current.focus(),null==S||S())},[e,N,S]),!e)return null;const E=["vtx-modal-backdrop",g&&"vtx-modal-backdrop--transparent",_&&"vtx-modal-backdrop--centered",`vtx-modal-backdrop--${z}`,k].filter(Boolean).join(" "),A=["vtx-modal",`vtx-modal--${B}`,C&&"vtx-modal--scrollable",`vtx-modal--${z}`,f].filter(Boolean).join(" "),D=n.jsx("div",{className:E,onClick:n=>{x&&n.target===n.currentTarget&&o()},role:"presentation",children:n.jsxs("div",{ref:n=>{$.current=n,"function"==typeof T?T(n):T&&(T.current=n)},className:A,role:"dialog","aria-modal":"true","aria-labelledby":a?"vtx-modal-title":void 0,"aria-describedby":i?"vtx-modal-description":void 0,children:[c?n.jsx("div",{className:"vtx-modal-header",children:c}):a||u?n.jsxs(I,{className:"vtx-modal-header",justify:"between",align:"center",gap:8,children:[a&&n.jsxs(I,{direction:"column",gap:4,className:"vtx-modal-header-content",children:[n.jsx(W,{as:"h2",variant:"h6",weight:"semibold",id:"vtx-modal-title",noMargin:!0,children:a}),i&&n.jsx(W,{variant:"body2",color:"neutral.600",id:"vtx-modal-description",noMargin:!0,children:i})]}),u&&n.jsx(h,{variant:"ghost",iconOnly:!0,size:"sm",className:"vtx-modal-close",onClick:o,"aria-label":"Close modal",children:n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",children:n.jsx("path",{d:"M18 6L6 18M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}):null,n.jsx(I,{direction:"column",className:"vtx-modal-body",children:l}),(s||v)&&n.jsx(I,{className:"vtx-modal-footer",justify:"end",align:"center",gap:8,children:v?v.map((r,t)=>n.jsx(h,{variant:r.variant||"secondary",size:r.size||(null==M?void 0:M.defaultSize)||"md",loading:r.loading,disabled:r.disabled,onClick:r.onClick,children:r.label},t)):s})]})});return t.createPortal(D,document.body)});P.displayName="Modal";u("/* ===== 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 X={success:n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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"})})},q=n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("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"})}),G=a.default.forwardRef(({children:t,onDismiss:e,id:o,variant:i="default",autoClose:l=5e3,closeButton:c=!0,progressBar:s=!0,pauseOnHover:v=!0,pauseOnFocusLoss:d=!0,icon:x,action:p,className:m="",style:u,title:h,description:g,animationDuration:f=300,isVisible:b,createdAt:w,onClose:y,onOpen:k,toastId:j,...z},N)=>{const[S,C]=r.useState(!1),[_,T]=r.useState(!1),[$,L]=r.useState(100),M=r.useRef(null),B=r.useRef(Date.now()),E=r.useRef(0),I=a.default.useCallback(()=>{C(!0),setTimeout(()=>{e()},f)},[e,f]);r.useEffect(()=>{if(!1===l||_)return;return M.current=setInterval(()=>{const n=Date.now()-B.current-E.current,r=Math.max(0,l-n);L(r/l*100),r<=0&&I()},16),()=>{M.current&&clearInterval(M.current)}},[l,_,I]);const A=["vtx-toast",`vtx-toast--${i}`,S&&"vtx-toast--exiting",m].filter(Boolean).join(" ");return n.jsxs("div",{ref:N,className:A,style:{...u,"--vtx-toast-animation-duration":`${f}ms`},onMouseEnter:()=>{v&&!_&&(T(!0),E.current=Date.now())},onMouseLeave:()=>{if(v&&_){T(!1);const n=Date.now()-E.current;B.current+=n}},onFocus:()=>{if(d&&_){T(!1);const n=Date.now()-E.current;B.current+=n}},onBlur:()=>{d&&!_&&(T(!0),E.current=Date.now())},role:"alert","aria-live":"polite","data-toast-id":o,...z,children:[n.jsxs("div",{className:"vtx-toast__wrapper",children:[!1===x?null:x?n.jsx("div",{className:"vtx-toast__icon",children:x}):n.jsx("div",{className:"vtx-toast__icon",children:X[i]}),h||g?n.jsxs("div",{className:"vtx-toast__content",children:[h&&n.jsx("div",{className:"vtx-toast__title",children:h}),g&&n.jsx("div",{className:"vtx-toast__description",children:g}),t&&n.jsx("div",{className:"vtx-toast__body",children:t})]}):n.jsx("div",{className:"vtx-toast__content",children:t}),n.jsxs("div",{className:"vtx-toast__actions",children:[p&&n.jsx("button",{className:"vtx-toast__action",onClick:p.onClick,type:"button",children:p.label}),c&&n.jsx("button",{className:"vtx-toast__close",onClick:I,type:"button","aria-label":"Close notification",children:q})]})]}),s&&!1!==l&&n.jsx("div",{className:"vtx-toast__progress-container",children:n.jsx("div",{className:"vtx-toast__progress",style:{transform:`scaleX(${$/100})`,animationPlayState:_?"paused":"running"}})})]})});G.displayName="Toast";const K=r.createContext(null),U=()=>{const n=r.useContext(K);if(!n)throw new Error("useToast must be used within a ToastProvider");return n},Z=({children:t})=>{const[e,o]=r.useState([]),a=r.useCallback(n=>{o(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)})},[]),i=r.useCallback((n,r={})=>{var t;const e=r.toastId||Date.now()+Math.random(),i={id:e,content:n,createdAt:Date.now(),isVisible:!0,autoClose:5e3,closeButton:!0,progressBar:!0,pauseOnHover:!0,pauseOnFocusLoss:!0,variant:"default",animationDuration:300,...r};return o(n=>{const r=n.filter(n=>n.id!==e);return[i,...r]}),!1!==i.autoClose&&setTimeout(()=>{a(e)},i.autoClose),null===(t=r.onOpen)||void 0===t||t.call(r),e},[a]),l=r.useCallback(()=>{o([])},[]),c=r.useCallback((n,r)=>{o(t=>t.map(t=>t.id===n?{...t,...r}:t))},[]),s={toasts:e,addToast:i,removeToast:a,clearAllToasts:l,updateToast:c};return n.jsx(K.Provider,{value:s,children:t})};class J{constructor(){this.addToastFn=null,this.removeToastFn=null,this.clearAllToastsFn=null,this.updateToastFn=null}static getInstance(){return J.instance||(J.instance=new J),J.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 Q=J.getInstance();u("/* ===== 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 nn=({position:e="top-right",limit:o=5,gap:a=12,margin:i=16,className:l="",style:c,stacked:s=!0,theme:v="auto"})=>{const{toasts:d,removeToast:x,addToast:p,clearAllToasts:m,updateToast:u}=U(),h=r.useRef(null);r.useEffect(()=>{Q.setMethods(p,x,m,u)},[p,x,m,u]),r.useEffect(()=>{if("auto"===v){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",v)},[v]);const g=d.slice(0,o),f=Math.max(0,d.length-o),b=["vtx-toast-container",`vtx-toast-container--${e}`,s&&"vtx-toast-container--stacked",l].filter(Boolean).join(" ");return 0===g.length?null:t.createPortal(n.jsxs("div",{ref:h,className:b,style:{...(n=>{const r={position:"fixed",zIndex:"var(--vtx-z-notification, 1400)",pointerEvents:"none"};switch(n){case"top-left":return{...r,top:i,left:i};case"top-center":return{...r,top:i,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...r,top:i,right:i};case"bottom-left":return{...r,bottom:i,left:i};case"bottom-center":return{...r,bottom:i,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...r,bottom:i,right:i}}})(e),"--vtx-toast-gap":`${a}px`,...c},"aria-live":"polite","aria-label":"Notifications",children:[f>0&&n.jsxs("div",{className:"vtx-toast-container__hidden-count",children:["+",f," more"]}),n.jsx("div",{className:"vtx-toast-container__list",children:g.map((r,t)=>n.jsx(G,{id:r.id,isVisible:r.isVisible,onDismiss:()=>x(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)};u(".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 rn=a.default.forwardRef(({content:e,placement:o="top",delay:a=200,hideDelay:i=0,children:l,open:c,disabled:s=!1,arrow:v=!1,maxWidth:d="300px",variant:x="dark",dismissible:p=!1,onShow:m,onHide:u,onDismiss:h,className:g="",...f},b)=>{const[w,y]=r.useState(c||!1),[k,j]=r.useState(!1),[z,N]=r.useState({top:0,left:0}),S=r.useRef(null),C=r.useRef(null),_=r.useRef(null),T=r.useRef(null),$=r.useRef(!1),L=()=>{s||($.current=!0,_.current&&clearTimeout(_.current),T.current&&clearTimeout(T.current),C.current=setTimeout(()=>{if(S.current&&$.current){const n=S.current.getBoundingClientRect(),r=B(n,o);N(r),j(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{y(!0),null==m||m()})})}},a))},M=()=>{$.current=!1,C.current&&clearTimeout(C.current),_.current=setTimeout(()=>{$.current||(y(!1),null==u||u(),T.current=setTimeout(()=>{j(!1)},150))},i)},B=(n,r)=>{const t=v?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}};r.useEffect(()=>{void 0!==c&&(c?(j(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{y(!0)})})):(y(!1),T.current=setTimeout(()=>{j(!1)},150)))},[c]),r.useEffect(()=>()=>{C.current&&clearTimeout(C.current),_.current&&clearTimeout(_.current),T.current&&clearTimeout(T.current)},[]);const E=["vtx-tooltip",`vtx-tooltip--${o}`,`vtx-tooltip--${x}`,v&&"vtx-tooltip--with-arrow",w&&"vtx-tooltip--visible",g].filter(Boolean).join(" "),I=void 0!==c&&c||k,A=r.cloneElement(l,{ref:n=>{S.current=n;const r=l.ref;"function"==typeof r?r(n):r&&"object"==typeof r&&"current"in r&&(r.current=n)},onMouseEnter:n=>{var r,t;void 0===c&&L(),null===(t=(r=l.props).onMouseEnter)||void 0===t||t.call(r,n)},onMouseLeave:n=>{var r,t;void 0===c&&M(),null===(t=(r=l.props).onMouseLeave)||void 0===t||t.call(r,n)},onFocus:n=>{var r,t;void 0===c&&L(),null===(t=(r=l.props).onFocus)||void 0===t||t.call(r,n)},onBlur:n=>{var r,t;void 0===c&&M(),null===(t=(r=l.props).onBlur)||void 0===t||t.call(r,n)},"aria-describedby":w?"vtx-tooltip-content":void 0});return n.jsxs(n.Fragment,{children:[A,I&&t.createPortal(n.jsxs("div",{ref:b,id:"vtx-tooltip-content",role:"tooltip",className:E,style:{top:`${z.top}px`,left:`${z.left}px`,maxWidth:d},onMouseEnter:()=>{s||void 0!==c||($.current=!0,_.current&&clearTimeout(_.current))},onMouseLeave:()=>{s||void 0!==c||M()},...f,children:[v&&n.jsx("span",{className:"vtx-tooltip-arrow","aria-hidden":"true"}),n.jsxs("div",{className:"vtx-tooltip-inner",children:[n.jsx("span",{className:"vtx-tooltip-content",children:e}),p&&n.jsx("button",{type:"button",className:"vtx-tooltip-close",onClick:()=>{$.current=!1,y(!1),null==h||h(),null==u||u(),T.current=setTimeout(()=>{j(!1)},150)},"aria-label":"Dismiss tooltip",children:n.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","aria-hidden":"true",children:n.jsx("path",{d:"M11 3L3 11M3 3L11 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]}),document.body)]})});rn.displayName="Tooltip";u(".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 tn=a.default.forwardRef(({src:t,alt:e="",size:o,shape:a="circle",fallback:i="?",onImageError:l,onImageLoad:c,imgProps:s,statusIndicator:v,statusPosition:d="bottom-right",className:x="",...p},u)=>{const{theme:h}=m(),g=o||h.defaultSize||"md",[f,b]=r.useState(!1),w=["vtx-avatar",`vtx-avatar--${g}`,`vtx-avatar--${a}`,v&&"vtx-avatar--with-status",x].filter(Boolean).join(" "),y=t&&!f,k=i.slice(0,2).toUpperCase();return n.jsxs("div",{ref:u,className:w,role:"img","aria-label":e||i||"Avatar",...p,children:[y?n.jsx("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.jsx("span",{className:"vtx-avatar-fallback","aria-hidden":"true",children:k}),v&&n.jsx("span",{className:`vtx-avatar-status vtx-avatar-status--${d}`,"aria-label":"Status indicator",children:v})]})});tn.displayName="Avatar";u(".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 en=a.default.forwardRef(({variant:t="neutral",size:e="medium",pill:o=!1,dot:a=!1,outline:i=!1,maxLength:l,icon:c,children:s,className:v="",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",v].filter(Boolean).join(" "),u=r.useMemo(()=>l&&"string"==typeof s&&s.length>l?`${s.slice(0,l)}...`:s,[s,l]);return n.jsxs("span",{ref:p,className:m,...x,children:[a&&n.jsx("span",{className:"vtx-badge-dot","aria-hidden":"true"}),c&&n.jsx("span",{className:"vtx-badge-icon","aria-hidden":"true",children:c}),n.jsx("span",{className:"vtx-badge-content",children:u}),d&&n.jsx("button",{type:"button",className:"vtx-badge-remove",onClick:d,"aria-label":"Remove badge",children:n.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:n.jsx("path",{d:"M9 3L3 9M3 3L9 9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})});en.displayName="Badge";u(".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 on=a.default.forwardRef(({children:r,variant:t="elevated",size:e,noPadding:o=!1,padding:a,hoverable:i=!1,clickable:l=!1,className:c="",header:s,footer:v,divider:d=!1,style:x,onClick:p,tabIndex:u,...h},g)=>{const{theme:f}=m(),b=["vtx-card",`vtx-card--${t}`,`vtx-card--${e||(null==f?void 0:f.defaultSize)||"md"}`,i?"vtx-card--hoverable":"",l?"vtx-card--clickable":"",o&&!a?"vtx-card--no-padding":"",c].filter(Boolean).join(" "),w={...x||{},...a?{"--vtx-card-padding":a}:{}},y=l?"number"==typeof u?u:0:u;return n.jsxs("div",{ref:g,className:b,style:w,onClick:p,tabIndex:y,...h,children:[s&&n.jsx("div",{className:"vtx-card-header"+(d?" vtx-card-header--divider":""),children:s}),n.jsx("div",{className:"vtx-card-content",children:r}),v&&n.jsx("div",{className:"vtx-card-footer"+(d?" vtx-card-footer--divider":""),children:v})]})});on.displayName="Card";u("/* 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 an=a.default.forwardRef(({textAlign:r="center",orientation:t="horizontal",variant:e="fullWidth",light:o=!1,flexItem:a=!1,children:i,component:l,className:c="",role:s,...v},d)=>{const x=l||(i||"vertical"===t?"div":"hr"),p=s||("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(" "),u="vertical"===t&&"hr"!==x?{"aria-orientation":"vertical"}:{};return n.jsx(x,{ref:d,className:m,role:p,...u,...v,children:i&&n.jsx("span",{className:"vtx-divider-wrapper",children:i})})});an.displayName="Divider";u("/* 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 ln=()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n.jsx("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"})}),cn=()=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n.jsx("path",{d:"M4 6h16M4 12h16M4 18h16",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),sn=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n.jsx("path",{d:"M19 9l-7 7-7-7",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),vn=a.default.forwardRef(({notifications:r,onNotificationClick:t,onMarkAllAsRead:e,onClose:o},a)=>{const i=r.filter(n=>!n.read).length;return n.jsxs("div",{ref:a,className:"vtx-header-notifications-panel",children:[n.jsx("div",{className:"vtx-header-notifications-header",children:n.jsxs(I,{justify:"between",align:"center",children:[n.jsx(W,{variant:"subtitle2",noMargin:!0,children:"Notifications"}),i>0&&e&&n.jsx("button",{className:"vtx-header-notifications-mark-read",onClick:()=>{e(),o()},children:"Mark all as read"})]})}),n.jsx("div",{className:"vtx-header-notifications-list",children:0===r.length?n.jsxs("div",{className:"vtx-header-notifications-empty",children:[n.jsx(ln,{}),n.jsx(W,{variant:"body2",color:"neutral.500",noMargin:!0,children:"No notifications"})]}):r.map(r=>n.jsxs("div",{className:`vtx-header-notification-item ${r.read?"":"vtx-header-notification-item--unread"} ${r.type?`vtx-header-notification-item--${r.type}`:""}`,onClick:()=>{null==t||t(r),o()},children:[r.icon&&n.jsx("div",{className:"vtx-header-notification-icon",children:r.icon}),n.jsxs("div",{className:"vtx-header-notification-content",children:[n.jsx(W,{variant:"body2",noMargin:!0,style:{fontWeight:r.read?400:600},children:r.title}),r.description&&n.jsx(W,{variant:"caption",color:"neutral.600",noMargin:!0,children:r.description}),n.jsx(W,{variant:"caption",color:"neutral.500",noMargin:!0,style:{marginTop:"4px"},children:r.time})]}),!r.read&&n.jsx("div",{className:"vtx-header-notification-dot"})]},r.id))})]})});vn.displayName="NotificationPanel";const dn=a.default.forwardRef(({logo:t,title:e,onToggleSidebar:o,showToggle:a=!0,notifications:i=[],onNotificationClick:l,onMarkAllAsRead:c,userName:s,userSubtitle:v,userAvatar:d,userMenuItems:x=[],actions:p,className:m="",sticky:u=!0},h)=>{const[g,f]=r.useState(!1),[b,w]=r.useState(!1),y=r.useRef(null),k=r.useRef(null),j=r.useRef(null),z=i.filter(n=>!n.read).length;r.useEffect(()=>{const n=n=>{y.current&&!y.current.contains(n.target)&&j.current&&!j.current.contains(n.target)&&f(!1),k.current&&!k.current.contains(n.target)&&w(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[]);const N=["vtx-header",u&&"vtx-header--sticky",m].filter(Boolean).join(" ");return n.jsxs("header",{ref:h,className:N,children:[n.jsxs(I,{align:"center",gap:16,style:{flex:1},children:[a&&o&&n.jsx("button",{className:"vtx-header-toggle",onClick:o,"aria-label":"Toggle sidebar",children:n.jsx(cn,{})}),t&&n.jsx("div",{className:"vtx-header-logo",children:t}),e&&n.jsx(W,{variant:"h6",noMargin:!0,className:"vtx-header-title",children:e})]}),p&&n.jsx("div",{className:"vtx-header-actions",children:p}),n.jsxs("div",{className:"vtx-header-right",children:[i&&i.length>0&&n.jsxs("div",{className:"vtx-header-notifications",ref:y,children:[n.jsxs("button",{className:"vtx-header-icon-button "+(g?"vtx-header-icon-button--active":""),onClick:()=>f(!g),"aria-label":"Notifications",children:[n.jsx(ln,{}),z>0&&n.jsx(en,{variant:"error",size:"small",style:{position:"absolute",top:"4px",right:"4px",minWidth:"18px",height:"18px",padding:"0 4px"},children:z>9?"9+":z})]}),g&&n.jsx(vn,{ref:j,notifications:i,onNotificationClick:l,onMarkAllAsRead:c,onClose:()=>f(!1)})]}),s&&n.jsxs("div",{className:"vtx-header-user-menu",ref:k,children:[n.jsxs("button",{className:"vtx-header-user-button "+(b?"vtx-header-user-button--active":""),onClick:()=>w(!b),"aria-label":"User menu",children:[n.jsx(tn,{src:d,alt:s,size:"sm"}),!d&&n.jsx("span",{className:"vtx-header-avatar-fallback",children:s.split(" ").map(n=>n[0]).join("").slice(0,2)}),n.jsxs("div",{className:"vtx-header-user-info",children:[n.jsx(W,{variant:"body2",noMargin:!0,style:{fontWeight:600},children:s}),v&&n.jsx(W,{variant:"caption",color:"neutral.600",noMargin:!0,children:v})]}),n.jsx(sn,{})]}),b&&n.jsx("div",{className:"vtx-header-user-dropdown",children:n.jsx(Y,{items:x,responsive:!1})})]})]})]})});dn.displayName="Header";u("/* 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 xn=({isOpen:r})=>n.jsx("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.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),pn=a.default.forwardRef(({label:t,onClick:e,icon:o,disabled:a=!1,active:i=!1,items:l,badge:c,href:s,collapsed:v=!1,level:d=0},x)=>{const[p,m]=r.useState(!1),u=l&&l.length>0,h=n.jsx(n.Fragment,{children:n.jsxs(I,{align:"center",gap:v?0:12,style:{flex:1,minWidth:0},children:[o&&n.jsx("span",{className:"vtx-sidemenu-item-icon",children:o}),!v&&n.jsxs(n.Fragment,{children:[n.jsx(W,{variant:"body2",noMargin:!0,style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t}),c&&n.jsx("span",{className:"vtx-sidemenu-item-badge",children:c}),u&&n.jsx(xn,{isOpen:p})]}),v&&c&&n.jsx("span",{className:"vtx-sidemenu-item-badge",children:c})]})}),g=["vtx-sidemenu-item",i&&"vtx-sidemenu-item--active",a&&"vtx-sidemenu-item--disabled",u&&"vtx-sidemenu-item--has-submenu",v&&"vtx-sidemenu-item--collapsed"].filter(Boolean).join(" "),f=s?"a":"div";return n.jsxs(n.Fragment,{children:[n.jsx(f,{ref:x,className:g,onClick:n=>{a||(u?(n.preventDefault(),m(!p)):e&&(n.preventDefault(),e()))},onKeyDown:n=>{a||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),u?m(!p):null==e||e())},role:"menuitem",tabIndex:a?-1:0,"aria-disabled":a,"aria-expanded":u?p:void 0,href:s,title:v?t:void 0,"data-label":v?t:void 0,children:h}),u&&p&&!v&&n.jsx("div",{className:"vtx-sidemenu-submenu",children:l.map((r,t)=>n.jsx(pn,{...r,collapsed:v,level:d+1},t))})]})});pn.displayName="SideMenuItem";const mn=a.default.forwardRef(({items:r,collapsed:t=!1,onCollapseToggle:e,className:o="",width:a="260px",collapsedWidth:i="80px",header:l,footer:c},s)=>{const v=t?"number"==typeof i?`${i}px`:i:"number"==typeof a?`${a}px`:a,d=["vtx-sidemenu",t&&"vtx-sidemenu--collapsed",o].filter(Boolean).join(" ");return n.jsxs("aside",{ref:s,className:d,style:{width:v},role:"navigation",children:[l&&n.jsx("div",{className:"vtx-sidemenu-header",children:l}),n.jsx("div",{className:"vtx-sidemenu-content",children:r.map((r,e)=>n.jsx(pn,{...r,collapsed:t},e))}),c&&n.jsx("div",{className:"vtx-sidemenu-footer",children:c}),e&&n.jsx("button",{className:"vtx-sidemenu-toggle",onClick:()=>e(!t),"aria-label":t?"Expand sidebar":"Collapse sidebar",title:t?"Expand sidebar":"Collapse sidebar",children:n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:t?"M9 5l7 7-7 7":"M15 19l-7-7 7-7"})})})]})});mn.displayName="SideMenu";function un({columns:t,data:e,getRowKey:o,striped:a=!1,hoverable:i=!0,bordered:l=!1,size:c="medium",caption:s,emptyMessage:v="No data available",loading:d=!1,loadingContent:x,scrollable:p=!0,maxHeight:m,onRowClick:u,isRowSelected:h,onRowSelect:g,sortable:f=!1,sortConfig:b,onSortChange:w,className:y="",containerClassName:k="",...j}){const[z,N]=r.useState(b||null),S=b||z,C=n=>{if(!f)return;const r=(null==S?void 0:S.key)===n&&"asc"===S.direction?"desc":"asc",t={key:n,direction:r};w?w(n,r):N(t)},_=r.useMemo(()=>{if(!S||!f)return e;const n=t.find(n=>n.key===S.key),r=null==n?void 0:n.sortFn;return[...e].sort((n,t)=>{if(r)return"asc"===S.direction?r(n,t):r(t,n);const e=n[S.key],o=t[S.key];if("string"==typeof e&&"string"==typeof o)return"asc"===S.direction?e.localeCompare(o):o.localeCompare(e);if("number"==typeof e&&"number"==typeof o)return"asc"===S.direction?e-o:o-e;const a=String(e),i=String(o);return"asc"===S.direction?a.localeCompare(i):i.localeCompare(a)})},[e,S,t,f]),T=["vtx-table-container",p&&"vtx-table-container--scrollable",m&&"vtx-table-container--fixed-header",k].filter(Boolean).join(" "),$=["vtx-table",`vtx-table--${c}`,a&&"vtx-table--striped",i&&"vtx-table--hoverable",l&&"vtx-table--bordered",u&&"vtx-table--clickable",y].filter(Boolean).join(" "),L=(n,r,t)=>{g&&g(n,r),null==u||u(n,r,t)},M=r=>{if(!f)return null;const t=(null==S?void 0:S.key)===r,e=null==S?void 0:S.direction;return n.jsx("span",{className:"vtx-table-sort-icon","aria-hidden":"true",children:n.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:[n.jsx("path",{d:"M6 3L9 6H3L6 3Z",fill:t&&"asc"===e?"currentColor":"#ccc"}),n.jsx("path",{d:"M6 9L3 6H9L6 9Z",fill:t&&"desc"===e?"currentColor":"#ccc"})]})})};return n.jsx("div",{className:T,style:{maxHeight:m},children:n.jsxs("table",{className:$,...j,children:[s&&n.jsx("caption",{className:"vtx-table-caption",children:s}),n.jsx("thead",{className:"vtx-table-header",children:n.jsx("tr",{children:t.map(r=>{const t=f&&!1!==r.sortable,e=["vtx-table-header-cell",t&&"vtx-table-header-cell--sortable",r.sticky&&`vtx-table-header-cell--sticky-${r.sticky}`,r.headerClassName].filter(Boolean).join(" ");return n.jsx("th",{className:e,style:{width:r.width,minWidth:r.minWidth,maxWidth:r.maxWidth,textAlign:r.align||"left"},onClick:()=>t&&C(r.key),role:t?"button":void 0,tabIndex:t?0:void 0,onKeyDown:n=>{!t||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),C(r.key))},"aria-sort":(null==S?void 0:S.key)===r.key?"asc"===S.direction?"ascending":"descending":void 0,children:n.jsxs("span",{className:"vtx-table-header-content",children:[r.header,t&&M(r.key)]})},r.key)})})}),n.jsx("tbody",{className:"vtx-table-body",children:d?n.jsx("tr",{children:n.jsx("td",{colSpan:t.length,className:"vtx-table-loading",children:x||n.jsx("span",{className:"vtx-table-loading-spinner",children:"Loading..."})})}):0===_.length?n.jsx("tr",{children:n.jsx("td",{colSpan:t.length,className:"vtx-table-empty",children:v})}):_.map((r,e)=>{const a=null==h?void 0:h(r,e),i=["vtx-table-row",a&&"vtx-table-row--selected"].filter(Boolean).join(" ");return n.jsx("tr",{className:i,onClick:n=>L(r,e,n),role:u||g?"button":void 0,tabIndex:u||g?0:void 0,"aria-selected":a,onKeyDown:n=>{!u&&!g||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),L(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.jsx("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))})})]})})}u(".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"),un.displayName="Table";u("/* 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 hn=a.default.forwardRef(({container:r=!1,item:t=!1,spacing:e,rowSpacing:o,columnSpacing:a,xs:i,sm:l,md:c,lg:s,xl:v,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!==s&&"vtx-grid-lg"+(!0===s?"":"auto"===s?"-auto":`-${s}`),void 0!==v&&"vtx-grid-xl"+(!0===v?"":"auto"===v?"-auto":`-${v}`),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.jsx("div",{ref:w,className:y,style:Object.keys(k).length>0?k:void 0,...b,children:g})});hn.displayName="Grid";u("/**\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"),exports.Accordion=L,exports.AccordionItem=$,exports.Alert=E,exports.Avatar=tn,exports.Badge=en,exports.Button=h,exports.Card=on,exports.Checkbox=g,exports.CheckboxGroup=f,exports.Chip=N,exports.Divider=an,exports.Flex=I,exports.Grid=hn,exports.Header=dn,exports.Input=z,exports.Menu=Y,exports.MenuItem=V,exports.Modal=P,exports.MultiSelect=S,exports.Radio=C,exports.RadioGroup=_,exports.Select=T,exports.SideMenu=mn,exports.SideMenuItem=pn,exports.Table=un,exports.Text=W,exports.ThemeProvider=p,exports.Toast=G,exports.ToastContainer=({children:r,...t})=>n.jsxs(Z,{children:[r,n.jsx(nn,{...t})]}),exports.Tooltip=rn,exports.generateCSSVariables=v,exports.injectCSSVariables=d,exports.toast=Q,exports.tokens=s,exports.useBodyScrollLock=y,exports.useClickOutside=(n,t)=>{r.useEffect(()=>{const r=r=>{const e=null==n?void 0:n.current;e&&!e.contains(r.target)&&t(r)};return document.addEventListener("mousedown",r),document.addEventListener("touchstart",r),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("touchstart",r)}},[n,t])},exports.useDebounce=(n,t)=>{const[e,o]=r.useState(n);return r.useEffect(()=>{const r=setTimeout(()=>{o(n)},t);return()=>{clearTimeout(r)}},[n,t]),e},exports.useEscapeKey=w,exports.useFocusTrap=b,exports.useId=j,exports.useThemeContext=m,exports.useToast=U;
2
2
  //# sourceMappingURL=index.cjs.js.map