@vtx-ui/react 0.0.1-beta.6 → 0.0.1-beta.8

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 (9) hide show
  1. package/dist/index.cjs.js +1 -1
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1 -1
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/types/hooks/useTheme.d.ts +1 -244
  6. package/dist/types/theme/ThemeProvider.d.ts +2 -2
  7. package/dist/types/theme/index.d.ts +1 -1
  8. package/dist/types/theme/tokens.d.ts +265 -215
  9. package/package.json +37 -1
package/dist/index.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsx as r,jsxs as n,Fragment as e}from"react/jsx-runtime";import*as t from"react";import a,{useId as o,useRef as i,useImperativeHandle as l,useEffect as c,useState as d,Children as s,isValidElement as v,useCallback as x,createContext as p,useContext as m,cloneElement as h,useMemo as g}from"react";import{FiCheck as u,FiX as f,FiChevronDown as b,FiBell as w,FiMenu as y,FiCheckCircle as k,FiAlertCircle as _,FiAlertTriangle as z,FiInfo as N,FiMinusCircle as C,FiDownload as S,FiPackage as M,FiShoppingBag as T,FiShare2 as $,FiEye as I,FiCreditCard as j,FiMessageCircle as A,FiMapPin as D,FiPhone as L,FiTruck as B,FiCornerUpLeft as E,FiRefreshCw as R,FiStar as O,FiSearch as F,FiPlus as W,FiMinus as P,FiChevronUp as V,FiChevronLeft as H,FiChevronRight as Y,FiArrowUp as q,FiArrowDown as G,FiChevronsLeft as X,FiChevronsRight as U}from"react-icons/fi";import{createPortal as K}from"react-dom";const Q=[50,100,200,300,400,500,600,700,800,900];function Z(r){const n={};for(const[e,t]of Object.entries(r))"string"==typeof t?(n[e]={},Q.forEach(r=>{n[e][r]=t})):"object"==typeof t&&null!==t&&(n[e]=t);return n}const J={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 rr(){const r=[];return Object.entries(J.colors).forEach(([n,e])=>{"object"==typeof e?Object.entries(e).forEach(([e,t])=>{r.push(` --vtx-color-${n}-${e}: ${t};`)}):r.push(` --vtx-color-${n}: ${e};`)}),Object.entries(J.spacing).forEach(([n,e])=>{r.push(` --vtx-spacing-${n}: ${e};`)}),Object.entries(J.typography.fontFamily).forEach(([n,e])=>{r.push(` --vtx-font-family-${n}: ${e};`)}),Object.entries(J.typography.fontSize).forEach(([n,e])=>{r.push(` --vtx-font-size-${n}: ${e};`)}),Object.entries(J.typography.fontWeight).forEach(([n,e])=>{r.push(` --vtx-font-weight-${n}: ${e};`)}),Object.entries(J.typography.lineHeight).forEach(([n,e])=>{r.push(` --vtx-line-height-${n}: ${e};`)}),Object.entries(J.typography.letterSpacing).forEach(([n,e])=>{r.push(` --vtx-letter-spacing-${n}: ${e};`)}),Object.entries(J.typography.textVariants).forEach(([n,e])=>{Object.entries(e).forEach(([e,t])=>{const a=e.replace(/([A-Z])/g,"-$1").toLowerCase();r.push(` --vtx-text-${n}-${a}: ${t};`)})}),Object.entries(J.borderRadius).forEach(([n,e])=>{r.push(` --vtx-radius-${n}: ${e};`)}),Object.entries(J.shadows).forEach(([n,e])=>{r.push(` --vtx-shadow-${n}: ${e};`)}),Object.entries(J.transitions).forEach(([n,e])=>{r.push(` --vtx-transition-${n}: ${e};`)}),Object.entries(J.zIndex).forEach(([n,e])=>{r.push(` --vtx-z-${n}: ${e};`)}),r.join("\n")}function nr(){if("undefined"==typeof document)return;const r="vtx-ui-variables";let n=document.getElementById(r);n||(n=document.createElement("style"),n.id=r,document.head.appendChild(n));const e=rr();n.textContent=`:root {\n${e}\n}`}const er=a.createContext(void 0),tr=a.forwardRef(({children:n,initialMode:e="light",customTokens:t,defaultSize:o="md",...i},l)=>{const[c,d]=a.useState(e),[s,v]=a.useState(o),x=a.useMemo(()=>{if(!t)return{tokens:J,mode:c,defaultSize:s};let r={...J,...t};return t.colors&&(r.colors={...J.colors,...Z(t.colors)}),{tokens:r,mode:c,defaultSize:s}},[t,c,s]);a.useEffect(()=>{document.documentElement.setAttribute("data-theme",c),t&&nr()},[c,t]);const p=a.useMemo(()=>({theme:x,setMode:d,setDefaultSize:v}),[x]);return r(er.Provider,{value:p,children:r("div",{ref:l,...i,children:n})})});tr.displayName="ThemeProvider";const ar=()=>{const r=a.useContext(er);if(!r)throw new Error("useThemeContext must be used within a ThemeProvider");return r},or="dynamic-styles";function ir(){let r=document.getElementById(or);return r||(r=document.createElement("style"),r.id=or,document.head.appendChild(r)),r}const lr=new Set,cr={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",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem",px:"1px",.5:"0.125rem",1.5:"0.375rem",2.5:"0.625rem",3.5:"0.875rem"},dr={m:"margin",mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",mx:"margin-left, margin-right",my:"margin-top, margin-bottom",p:"padding",pt:"padding-top",pr:"padding-right",pb:"padding-bottom",pl:"padding-left",px:"padding-left, padding-right",py:"padding-top, padding-bottom",w:"width",h:"height",fs:"font-size",lh:"line-height",ls:"letter-spacing",gap:"gap",rounded:"border-radius"};function sr(n){const e=e=>{const t=(e.className||"").split(" ").map(r=>function(r){let n=r.match(/^([a-z]+)-\[(.+)\]$/);if(n){const r=n[1],e=n[2],t=`${r}-${e.replace(/[^a-z0-9]/gi,"")}`,a=dr[r];if(a){let n;return n="mx"===r?`.${t} { margin-left: ${e}; margin-right: ${e}; }`:"my"===r?`.${t} { margin-top: ${e}; margin-bottom: ${e}; }`:"px"===r?`.${t} { padding-left: ${e}; padding-right: ${e}; }`:"py"===r?`.${t} { padding-top: ${e}; padding-bottom: ${e}; }`:`.${t} { ${a}: ${e}; }`,lr.has(n)||(ir().appendChild(document.createTextNode(n)),lr.add(n)),t}}if(n=r.match(/^([a-z]+)-(.+)$/),n){const r=n[1],e=n[2],t=dr[r],a=cr[e];if(t&&a){const n=`${r}-${e.replace(/[^a-z0-9]/gi,"")}`;let o;return o="mx"===r?`.${n} { margin-left: ${a}; margin-right: ${a}; }`:"my"===r?`.${n} { margin-top: ${a}; margin-bottom: ${a}; }`:"px"===r?`.${n} { padding-left: ${a}; padding-right: ${a}; }`:"py"===r?`.${n} { padding-top: ${a}; padding-bottom: ${a}; }`:`.${n} { ${t}: ${a}; }`,lr.has(o)||(ir().appendChild(document.createTextNode(o)),lr.add(o)),n}}return r}(r)).join(" ");return r(n,{...e,className:t})};return e.displayName=n.displayName||n.name||"Component",e}function vr(r,n){void 0===n&&(n={});var e=n.insertAt;if(r&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=r:a.appendChild(document.createTextNode(r))}}vr(".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 xr=a.forwardRef(({children:t,variant:a="primary",size:o,fullWidth:i=!1,loading:l=!1,disabled:c=!1,leftIcon:d,rightIcon:s,iconOnly:v=!1,loadingText:x,asLink:p=!1,href:m,target:h,rel:g,className:u="",type:f="button",...b},w)=>{const{theme:y}=ar(),k=["vtx-button",`vtx-button--${a}`,`vtx-button--${o||y.defaultSize||"md"}`,i&&"vtx-button--full-width",l&&"vtx-button--loading",v&&"vtx-button--icon-only",!0===b.darkText&&"vtx-button--dark-text",!1===b.darkText&&"vtx-button--light-text",u].filter(Boolean).join(" "),_=b.style?{...b.style}:{};b.textColor&&(_.color=b.textColor);const z=n(e,{children:[l&&r("span",{className:"vtx-button__spinner",role:"status","aria-label":"Loading",children:r("svg",{className:"vtx-button__spinner-icon",viewBox:"0 0 24 24",children:r("circle",{className:"vtx-button__spinner-circle",cx:"12",cy:"12",r:"10",fill:"none",strokeWidth:"3"})})}),!l&&d&&r("span",{className:"vtx-button__icon-left",children:d}),!v&&r("span",{className:"vtx-button__content",children:l&&x?x:t}),v&&!l&&t,!l&&s&&r("span",{className:"vtx-button__icon-right",children:s})]});return p&&m?r("a",{ref:w,href:m,target:h,rel:"_blank"===h?"noopener noreferrer":g,className:k,"aria-disabled":c||l,style:_,...b,children:z}):r("button",{ref:w,type:f,className:k,disabled:c||l,"aria-busy":l,"aria-disabled":c||l,style:_,...b,children:z})});xr.displayName="Button";const pr=sr(xr);vr("/* 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 mr=a.forwardRef(({checked:e,indeterminate:t=!1,disabled:a=!1,label:d,size:s,variant:v="primary",error:x=!1,helperText:p,onChange:m,className:h="",inputClassName:g="",id:u,...f},b)=>{const{theme:w}=ar(),y=s||w.defaultSize||"md",k=o(),_=u||k,z=["vtx-checkbox",`vtx-checkbox--${y}`,`vtx-checkbox--${v}`,a&&"vtx-checkbox--disabled",x&&"vtx-checkbox--error",h].filter(Boolean).join(" "),N=["vtx-checkbox-input",g].filter(Boolean).join(" "),C=i(null);return l(b,()=>C.current),c(()=>{C.current&&(C.current.indeterminate=t)},[t]),n("div",{className:z,children:[n("label",{className:"vtx-checkbox-label",htmlFor:_,children:[n("span",{className:"vtx-checkbox-wrapper",children:[r("input",{ref:C,type:"checkbox",id:_,className:N,checked:e,disabled:a,onChange:m,...f}),n("span",{className:"vtx-checkbox-box",children:[r("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--check",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:r("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})}),r("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--indeterminate",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:r("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round"})})]})]}),d&&r("span",{className:"vtx-checkbox-label-text",children:d})]}),p&&r("div",{className:"vtx-checkbox-helper-text",children:p})]})});mr.displayName="Checkbox";const hr=sr(mr);vr("/* 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 gr=a.forwardRef(({label:e,options:t,value:a,defaultValue:o,onChange:i,disabled:l=!1,error:c=!1,helperText:s,orientation:v="vertical",size:x,className:p="",...m},h)=>{const{theme:g}=ar(),u=x||g.defaultSize||"md",[f,b]=d(o||[]),w=void 0!==a,y=w?a:f,k=["vtx-checkbox-group",`vtx-checkbox-group--${v}`,c&&"vtx-checkbox-group--error",l&&"vtx-checkbox-group--disabled",p].filter(Boolean).join(" ");return n("div",{ref:h,className:k,...m,children:[e&&r("div",{className:"vtx-checkbox-group-label",children:e}),r("div",{className:"vtx-checkbox-group-options",children:t.map(n=>{const e=y.includes(n.value),t=l||n.disabled;return r(hr,{label:n.label,checked:e,disabled:t,error:c,size:u,onChange:r=>((r,n)=>{const e=n?[...y,r]:y.filter(n=>n!==r);w||b(e),null==i||i(e)})(n.value,r.target.checked)},n.value)})}),s&&r("div",{className:"vtx-checkbox-group-helper-text",children:s})]})});gr.displayName="CheckboxGroup";const ur=sr(gr),fr=e=>n("svg",{className:"vtx-multiselect-icon-spinner",width:e.size||16,height:e.size||16,viewBox:"0 0 16 16",fill:"none",children:[r("circle",{className:"vtx-multiselect-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),r("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"})]}),br=u,wr=n=>r(f,{size:n.size||12,"aria-hidden":"true"}),yr=b,kr=W,_r=P,zr=w,Nr=y,Cr=V,Sr=H,Mr=Y,Tr=k,$r=_,Ir=z,jr=N,Ar=C,Dr=S,Lr=M,Br=T,Er=$,Rr=I,Or=j,Fr=A,Wr=D,Pr=L,Vr=B,Hr=f,Yr=E,qr=R,Gr=O,Xr=F,Ur=q,Kr=G,Qr=X,Zr=U,Jr=(r,n)=>{c(()=>{const e=e=>{const t=null==r?void 0:r.current;t&&!t.contains(e.target)&&n(e)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}},[r,n])},rn=(r,n)=>{c(()=>{if(!n)return;const e=r.current;if(!e)return;const t=e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(0===t.length)return;const a=t[0],o=t[t.length-1],i=r=>{"Tab"===r.key&&(r.shiftKey?document.activeElement===a&&(null==o||o.focus(),r.preventDefault()):document.activeElement===o&&(null==a||a.focus(),r.preventDefault()))};return null==a||a.focus(),e.addEventListener("keydown",i),()=>{e.removeEventListener("keydown",i)}},[r,n])},nn=r=>{c(()=>{const n=n=>{"Escape"===n.key&&r()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[r])},en=r=>{c(()=>{if(!r)return;const n=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=n}},[r])};let tn=0;const an=(r="vtx")=>{const[n]=d(()=>`${r}-${++tn}`);return n},on=(r,n)=>{const[e,t]=d(r);return c(()=>{const e=setTimeout(()=>{t(r)},n);return()=>{clearTimeout(e)}},[r,n]),e};vr("/**\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 --vtx-color-white: #ffffff;\r\n --vtx-color-black: #000000;\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");vr(".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--sm {\n min-height: 32px;\n}\n\n.vtx-input-container--md {\n min-height: 40px;\n}\n\n.vtx-input-container--lg {\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--sm .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--lg .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 ln=a.forwardRef(({label:e,helperText:t,error:a,success:o,size:i,fullWidth:l=!1,leftIcon:c,rightIcon:d,clearable:s=!1,onClear:v,showCount:x=!1,className:p="",wrapperClassName:m="",labelClassName:h="",inputClassName:g="",prefix:u,suffix:f,id:b,disabled:w=!1,required:y=!1,value:k,maxLength:_,...z},N)=>{const{theme:C}=ar(),S=i||C.defaultSize,M=an("input"),T=b||M,$=`${T}-helper`,I=`${T}-error`,j=`${T}-success`,A=Boolean(a),D=Boolean(o)&&!A,L=s&&k&&String(k).length>0&&!w,B=[t&&!a&&!o&&$,a&&I,o&&j].filter(Boolean).join(" "),E=["vtx-input-wrapper",l&&"vtx-input-wrapper--full-width",m].filter(Boolean).join(" "),R=["vtx-input-container",`vtx-input-container--${S}`,A&&"vtx-input-container--error",D&&"vtx-input-container--success",w&&"vtx-input-container--disabled",(c||u)&&"vtx-input-container--with-left-element",(d||f||L)&&"vtx-input-container--with-right-element",p].filter(Boolean).join(" "),O=k?String(k).length:0,F=x&&_;return n("div",{className:E,children:[e&&n("label",{htmlFor:T,className:`vtx-input-label ${h}`.trim(),children:[e,y&&n("span",{className:"vtx-input-label__required","aria-label":"required",children:[" ","*"]})]}),n("div",{className:R,children:[c&&r("span",{className:"vtx-input-icon vtx-input-icon--left","aria-hidden":"true",children:c}),u&&r("span",{className:"vtx-input-prefix","aria-hidden":"true",children:u}),r("input",{ref:N,id:T,className:`vtx-input ${g}`.trim(),disabled:w,required:y,value:k,maxLength:_,"aria-invalid":A,"aria-describedby":B||void 0,...z}),f&&r("span",{className:"vtx-input-suffix","aria-hidden":"true",children:f}),L&&r("button",{type:"button",className:"vtx-input-clear",onClick:()=>{null==v||v()},"aria-label":"Clear input",tabIndex:-1,children:r(wr,{size:16})}),d&&!L&&r("span",{className:"vtx-input-icon vtx-input-icon--right","aria-hidden":"true",children:d})]}),t&&!a&&!o&&r("p",{id:$,className:"vtx-input-helper",children:t}),a&&r("p",{id:I,className:"vtx-input-error",role:"alert",children:a}),o&&r("p",{id:j,className:"vtx-input-success",role:"status",children:o}),F&&n("p",{className:"vtx-input-counter","aria-live":"polite",children:[O," / ",_]})]})});ln.displayName="Input";const cn=sr(ln);vr("/* 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 dn=a.forwardRef(({label:e,size:t="md",variant:a="filled",color:o="default",icon:i,avatar:l,onDelete:c,onClick:d,disabled:s=!1,className:v="","aria-label":x,"data-testid":p},m)=>{const h=["vtx-chip",`vtx-chip--${t}`,`vtx-chip--${a}`,`vtx-chip--${o}`,d&&!s&&"vtx-chip--clickable",s&&"vtx-chip--disabled",v].filter(Boolean).join(" ");return n("div",{ref:m,className:h,onClick:r=>{!s&&d&&d(r)},onKeyDown:r=>{s||!d||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),d(r))},role:d?"button":void 0,tabIndex:d&&!s?0:void 0,"aria-label":x||e,"aria-disabled":s,"data-testid":p,children:[l&&r("img",{src:l,alt:"",className:"vtx-chip__avatar","aria-hidden":"true"}),i&&!l&&r("span",{className:"vtx-chip__icon","aria-hidden":"true",children:i}),r("span",{className:"vtx-chip__label",children:e}),c&&r("button",{type:"button",className:"vtx-chip__delete",onClick:r=>{r.stopPropagation(),!s&&c&&c(r)},onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),r.stopPropagation(),!s&&c&&c(r))},disabled:s,"aria-label":`Remove ${e}`,tabIndex:-1,children:r(wr,{size:16})})]})});dn.displayName="Chip";const sn=sr(dn);vr("/* 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 vn=a.forwardRef(({label:e,helperText:t,error:a,success:o,size:l,fullWidth:s=!1,options:v,value:x,defaultValue:p=[],placeholder:m="Select...",className:h="",grouped:g=!1,getOptionLabel:u="label",getOptionValue:f="value",getOptionDisabled:b="disabled",getOptionGroup:w="group",onChange:y,disabled:k=!1,required:_=!1,id:z,name:N,selectionStyle:C="checkbox",searchable:S=!1,showSelectAll:M=!1,maxChipsDisplay:T,chipColor:$="primary",chipVariant:I="light",loading:j=!1},A)=>{const{theme:D}=ar(),L=an("multiselect"),B=z||L,E=`${B}-helper`,R=`${B}-error`,O=`${B}-success`,[F,W]=d(!1),[P,V]=d(""),[H,Y]=d(p),q=i(null),G=i(null),X=void 0!==x?x:H,U=(r,n)=>"function"==typeof n?n(r):"object"==typeof r?r[n]:r,K=Boolean(a),Q=Boolean(o)&&!K,Z=[t&&!a&&!o&&E,a&&R,o&&O].filter(Boolean).join(" ");c(()=>{const r=r=>{q.current&&!q.current.contains(r.target)&&G.current&&!G.current.contains(r.target)&&(W(!1),V(""))};if(F)return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[F]);const J=r=>{if(k)return;const n=X.includes(r)?X.filter(n=>n!==r):[...X,r];if(void 0===x&&Y(n),y){const r=v.filter(r=>n.includes(U(r,f)));y(n,r)}},rr=P?v.filter(r=>U(r,u).toLowerCase().includes(P.toLowerCase())):v,nr=g?rr.reduce((r,n)=>{const e=U(n,w)||"Other";return r[e]||(r[e]=[]),r[e].push(n),r},{}):{"":rr},er=v.filter(r=>X.includes(U(r,f))),tr=T?er.slice(0,T):er,or=T?er.length-T:0,ir=["vtx-multiselect-wrapper",s&&"vtx-multiselect-wrapper--full-width",h].filter(Boolean).join(" "),lr=l||(null==D?void 0:D.defaultSize)||"md",cr=["vtx-multiselect-container",`vtx-multiselect-container--${lr}`,K&&"vtx-multiselect-container--error",Q&&"vtx-multiselect-container--success",k&&"vtx-multiselect-container--disabled",F&&"vtx-multiselect-container--open"].filter(Boolean).join(" "),dr=lr;return n("div",{className:ir,ref:A,children:[e&&n("label",{htmlFor:B,className:"vtx-multiselect-label",children:[e,_&&n("span",{className:"vtx-multiselect-label__required","aria-label":"required",children:[" ","*"]})]}),n("div",{ref:q,className:cr,"aria-expanded":F,"aria-haspopup":"listbox","aria-labelledby":e?`${B}-label`:void 0,"aria-describedby":Z||void 0,"aria-disabled":k,children:[r("div",{className:"vtx-multiselect-input-area",onClick:()=>!k&&W(!F),role:"button",tabIndex:k?-1:0,onKeyDown:r=>{k||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),W(!F))},children:0===er.length?r("span",{className:"vtx-multiselect-placeholder",children:m}):n("div",{className:"vtx-multiselect-chips",children:[tr.map(n=>{const e=U(n,f),t=U(n,u);return r(sn,{label:t,size:dr,color:$,variant:I,onDelete:r=>{r.stopPropagation(),(r=>{if(k)return;const n=X.filter(n=>n!==r);if(void 0===x&&Y(n),y){const r=v.filter(r=>n.includes(U(r,f)));y(n,r)}})(e)}},e)}),or>0&&r(sn,{label:`+${or} more`,size:dr,color:"default",variant:"outlined"})]})}),r("span",{className:"vtx-multiselect-icon","aria-hidden":"true",children:r(j?fr:yr,{size:16})}),F&&n("div",{ref:G,className:"vtx-multiselect-dropdown",role:"listbox",children:[S&&r("div",{className:"vtx-multiselect-search",children:r("input",{type:"text",placeholder:"Search...",value:P,onChange:r=>V(r.target.value),onClick:r=>r.stopPropagation()})}),M&&n("div",{className:"vtx-multiselect-actions",children:[r("button",{type:"button",className:"vtx-multiselect-action-button",onClick:r=>{r.stopPropagation(),(()=>{const r=v.filter(r=>!U(r,b)).map(r=>U(r,f));void 0===x&&Y(r),y&&y(r,v.filter(r=>!U(r,b)))})()},children:"Select All"}),r("button",{type:"button",className:"vtx-multiselect-action-button",onClick:r=>{r.stopPropagation(),void 0===x&&Y([]),y&&y([],[])},children:"Clear All"})]}),r("div",{className:"vtx-multiselect-options",children:0===rr.length?r("div",{className:"vtx-multiselect-empty",children:"No options found"}):Object.entries(nr).map(([e,t])=>n("div",{children:[g&&e&&r("div",{className:"vtx-multiselect-optgroup",children:e}),t.map(e=>{const t=U(e,f),a=U(e,u),o=U(e,b),i=X.includes(t),l=["vtx-multiselect-option",i&&"vtx-multiselect-option--selected",o&&"vtx-multiselect-option--disabled"].filter(Boolean).join(" ");return n("div",{className:l,onClick:()=>!o&&J(t),role:"option","aria-selected":i,"aria-disabled":o,tabIndex:o?-1:0,onKeyDown:r=>{o||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),J(t))},children:["checkbox"===C&&r("div",{className:"vtx-multiselect-checkbox "+(i?"vtx-multiselect-checkbox--checked":""),children:i&&r(br,{size:16})}),r("span",{className:"vtx-multiselect-option-label",children:a}),"checkmark"===C&&r("div",{className:"vtx-multiselect-checkmark",children:i&&r(br,{size:20})})]},t)})]},e))})]})]}),N&&r("select",{multiple:!0,name:N,value:X.map(String),onChange:()=>{},className:"vtx-multiselect-hidden-select",required:_,disabled:k,tabIndex:-1,"aria-hidden":"true",children:v.map(n=>{const e=U(n,f);return r("option",{value:String(e),children:U(n,u)},e)})}),t&&!a&&!o&&r("p",{id:E,className:"vtx-multiselect-helper",children:t}),a&&r("p",{id:R,className:"vtx-multiselect-error",role:"alert",children:a}),o&&r("p",{id:O,className:"vtx-multiselect-success",role:"status",children:o})]})});vn.displayName="MultiSelect";const xn=sr(vn);vr("/* 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--sm {\n --vtx-radio-size: 16px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--sm .vtx-radio-label-text {\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-radio--md {\n --vtx-radio-size: 20px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--lg {\n --vtx-radio-size: 24px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--lg .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 pn=a.forwardRef(({checked:e,disabled:t=!1,label:a,size:i,variant:l="primary",error:c=!1,helperText:d,onChange:s,className:v="",inputClassName:x="",id:p,...m},h)=>{const{theme:g}=ar(),u=i||g.defaultSize,f=o(),b=p||f,w=d?`${b}-helper-text`:void 0,y=["vtx-radio",`vtx-radio--${u}`,`vtx-radio--${l}`,t&&"vtx-radio--disabled",c&&"vtx-radio--error",v].filter(Boolean).join(" "),k=["vtx-radio-input",x].filter(Boolean).join(" "),_=n("div",{className:"vtx-radio-wrapper",children:[r("input",{ref:h,type:"radio",id:b,className:k,checked:e,disabled:t,onChange:s,"aria-describedby":w,...m}),r("span",{className:"vtx-radio-circle",children:r("span",{className:"vtx-radio-dot"})})]});return n("div",a?{className:y,children:[n("label",{htmlFor:b,className:"vtx-radio-label",children:[_,r("span",{className:"vtx-radio-label-text",children:a})]}),d&&r("span",{id:w,className:"vtx-radio-helper-text",children:d})]}:{className:y,children:[_,d&&r("span",{id:w,className:"vtx-radio-helper-text",children:d})]})});pn.displayName="Radio";const mn=sr(pn);vr("/* 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 hn=a.forwardRef(({name:e,label:t,options:a,value:o,defaultValue:i,onChange:l,disabled:c=!1,error:s=!1,helperText:v,orientation:x="vertical",size:p,variant:m="primary",className:h="",...g},u)=>{const{theme:f}=ar(),b=p||f.defaultSize,[w,y]=d(i),k=void 0!==o,_=k?o:w,z=["vtx-radio-group",`vtx-radio-group--${x}`,s&&"vtx-radio-group--error",c&&"vtx-radio-group--disabled",h].filter(Boolean).join(" ");return n("div",{ref:u,className:z,role:"radiogroup","aria-label":"string"==typeof t?t:void 0,...g,children:[t&&r("div",{className:"vtx-radio-group-label",children:t}),r("div",{className:"vtx-radio-group-options",children:a.map(n=>{const t=_===n.value,a=c||n.disabled;return r(mn,{name:e,value:n.value,label:n.label,checked:t,disabled:a,error:s,size:b,variant:m,onChange:()=>{return r=n.value,k||y(r),void(null==l||l(r));var r}},n.value)})}),v&&r("div",{className:"vtx-radio-group-helper-text",children:v})]})});hn.displayName="RadioGroup";const gn=sr(hn);vr(".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--sm {\n min-height: 32px;\n}\n\n.vtx-select-container--md {\n min-height: 40px;\n}\n\n.vtx-select-container--lg {\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--sm .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--lg .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 un=a.forwardRef(({label:e,helperText:t,error:a,success:o,size:i,fullWidth:l=!1,options:c,placeholder:d,className:s="",wrapperClassName:v="",id:x,disabled:p=!1,required:m=!1,grouped:h=!1,getOptionLabel:g="label",getOptionValue:u="value",getOptionDisabled:f="disabled",getOptionGroup:b="group",onSelectChange:w,onChange:y,loading:k=!1,..._},z)=>{const{theme:N}=ar(),C=i||N.defaultSize,S=an("select"),M=x||S,T=`${M}-helper`,$=`${M}-error`,I=`${M}-success`,j=(r,n)=>"function"==typeof n?n(r):"object"==typeof r?r[n]:r,A=Boolean(a),D=Boolean(o)&&!A,L=[t&&!a&&!o&&T,a&&$,o&&I].filter(Boolean).join(" "),B=["vtx-select-wrapper",l&&"vtx-select-wrapper--full-width",v].filter(Boolean).join(" "),E=["vtx-select-container",`vtx-select-container--${C}`,A&&"vtx-select-container--error",D&&"vtx-select-container--success",p&&"vtx-select-container--disabled",s].filter(Boolean).join(" ");return n("div",{className:B,children:[e&&n("label",{htmlFor:M,className:"vtx-select-label",children:[e,m&&n("span",{className:"vtx-select-label__required","aria-label":"required",children:[" ","*"]})]}),n("div",{className:E,children:[n("select",{ref:z,id:M,className:"vtx-select",disabled:p,required:m,"aria-invalid":A,"aria-describedby":L||void 0,onChange:r=>{if(null==y||y(r),w){const n=c.find(n=>String(j(n,u))===r.target.value);w(r.target.value,n)}},..._,children:[d&&r("option",{value:"",disabled:!0,children:d}),(()=>{if(!h)return c.map((n,e)=>{const t=j(n,u),a=j(n,g),o=j(n,f);return r("option",{value:t,disabled:o,children:a},t||e)});const n=c.reduce((r,n)=>{const e=j(n,b)||"Other";return r[e]||(r[e]=[]),r[e].push(n),r},{});return Object.entries(n).map(([n,e])=>r("optgroup",{label:n,children:e.map((n,e)=>{const t=j(n,u),a=j(n,g),o=j(n,f);return r("option",{value:t,disabled:o,children:a},t||e)})},n))})()]}),r("span",{className:"vtx-select-icon","aria-hidden":"true",children:k?n("svg",{className:"vtx-select-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[r("circle",{className:"vtx-select-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),r("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"})]}):r("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:r("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),t&&!a&&!o&&r("p",{id:T,className:"vtx-select-helper",children:t}),a&&r("p",{id:$,className:"vtx-select-error",role:"alert",children:a}),o&&r("p",{id:I,className:"vtx-select-success",role:"status",children:o})]})});un.displayName="Select";const fn=sr(un),bn=a.forwardRef(({item:t,isOpen:a,onToggle:o,variant:l="default",size:c="md",showChevron:d=!0,chevronPosition:s="right",expandedIcon:v,collapsedIcon:x,iconType:p="chevron",loading:m=!1,disabled:h=!1,disableAnimations:g=!1},u)=>{const f=i(null),{id:b,header:w,children:y,disabled:k,className:_,loading:z,status:N="default",icon:C,dataTestId:S}=t,M=h||k,T=m||z,$=()=>{M||T||o()},I=()=>r("div",C?{className:"accordion-item-chevron "+(a?"open":""),"data-testid":`${S||b}-custom-icon`,children:a?C.expanded:C.collapsed}:"custom"===p&&v&&x?{className:"accordion-item-chevron "+(a?"open":""),"data-testid":`${S||b}-custom-icon`,children:a?v:x}:"plus-minus"===p?{className:"accordion-item-chevron accordion-item-chevron--plus-minus "+(a?"open":""),"data-testid":`${S||b}-plus-minus-icon`,children:a?r(_r,{size:16,"aria-hidden":"true"}):r(e,{children:r(kr,{size:16,"aria-hidden":"true"})})}:{className:"accordion-item-chevron "+(a?"open":""),"data-testid":`${S||b}-chevron-icon`,children:r(yr,{size:16,"aria-hidden":"true",style:{transform:a?"rotate(180deg)":void 0,transition:"transform 0.2s"}})});return n("div",{ref:u,className:`\n accordion-item\n accordion-item--${l}\n accordion-item--${c}\n ${a?"accordion-item--open":""}\n ${M?"accordion-item--disabled":""}\n ${T?"accordion-item--loading":""}\n ${"default"!==N?`accordion-item--${N}`:""}\n ${_||""}\n `.trim(),"data-testid":S,"aria-expanded":a,"aria-disabled":M,"aria-busy":T,children:[n("div",{className:"accordion-item-header",role:"button",tabIndex:M||T?-1:0,"aria-expanded":a,"aria-controls":`accordion-content-${b}`,"aria-disabled":M,"aria-busy":T,"aria-describedby":"default"!==N?`accordion-status-${b}`:void 0,onClick:$,onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),$())},"data-testid":`${S||b}-header`,children:["left"===s&&d&&I(),r("div",{className:"accordion-item-header-content",children:w}),"right"===s&&d&&I()]}),r("div",{id:`accordion-content-${b}`,className:"accordion-item-content "+(a?"accordion-item-content--open":""),role:"region","aria-labelledby":`accordion-header-${b}`,ref:f,style:{maxHeight:g?a?"none":"0":a?"500px":"0",transition:g?"none":void 0},"data-testid":`${S||b}-content`,children:n("div",{className:"accordion-item-body",children:["default"!==N&&r("div",{id:`accordion-status-${b}`,className:`accordion-status accordion-status--${N}`,"aria-live":"polite",children:n("span",{className:"visually-hidden",children:["Status: ",N]})}),y]})})]})});bn.displayName="AccordionItem";vr("/* =============================================================================\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 wn=a.forwardRef(({items:n,children:e,allowMultiple:t=!1,defaultOpenItems:a=[],openItems:o,onToggle:i,variant:l="default",size:c="md",className:p="",style:m,showChevron:h=!0,chevronPosition:g="right",expandedIcon:u,collapsedIcon:f,iconType:b="chevron",showDivider:w=!0,collapsible:y=!0,loading:k=!1,disabled:_=!1,spacing:z="default",disableAnimations:N=!1,...C},S)=>{const[M,T]=d(a),$=void 0!==o?o:M,I=void 0!==o,j=n||s.toArray(e).filter(r=>v(r)).map((r,n)=>{if(v(r)&&r.props){const e=r;return{id:e.props.id||`accordion-item-${n}`,header:e.props.header||`Item ${n+1}`,children:e.props.children,disabled:e.props.disabled,className:e.props.className}}return{id:`accordion-item-${n}`,header:`Item ${n+1}`,children:r}}),A=x(r=>{let n;n=t?$.includes(r)?$.filter(n=>n!==r):[...$,r]:$.includes(r)?y?[]:$:[r],I||T(n),null==i||i(n)},[t,y,$,I,i]);return r("div",{ref:S,className:`\n accordion\n accordion--${l}\n accordion--${c}\n ${w?"accordion--divider":""}\n ${"compact"===z?"accordion--compact":""}\n ${"spacious"===z?"accordion--spacious":""}\n ${N?"accordion--no-animation":""}\n ${k?"accordion--loading":""}\n ${_?"accordion--disabled":""}\n ${p}\n `.trim(),style:m,role:"presentation","aria-busy":k,...C,children:j.map(n=>r(bn,{item:n,isOpen:$.includes(n.id),onToggle:()=>A(n.id),variant:l,size:c,showChevron:h,chevronPosition:g,expandedIcon:u,collapsedIcon:f,iconType:b,loading:k,disabled:_,spacing:z,disableAnimations:N},n.id))})});wn.displayName="Accordion";vr("/* 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 yn={success:r(Tr,{size:20}),error:r($r,{size:20}),warning:r(Ir,{size:20}),info:r(jr,{size:20}),neutral:r(Ar,{size:20})},kn=a.forwardRef(({children:e,title:t,description:a,variant:o="info",alertStyle:i="subtle",size:l,icon:c,dismissible:s=!1,onClose:v,action:x,fullWidth:p=!1,className:m="",style:h,role:g="alert",...u},f)=>{const{theme:b}=ar(),w=l||(null==b?void 0:b.defaultSize)||"md",[y,k]=d(!0);if(!y)return null;const _=!1!==c,z=void 0===c?yn[o]:c,N=e||a;return n("div",{ref:f,className:`\n alert\n alert--${o}\n alert--${i}\n alert--${w}\n ${p?"alert--full-width":""}\n ${m}\n `.trim(),style:h,role:g,...u,children:[_&&r("div",{className:"alert-icon",children:z}),n("div",{className:"alert-content",children:[t&&r("div",{className:"alert-title",children:t}),N&&r("div",{className:"alert-message",children:null!=e?e:a})]}),x&&r("div",{className:"alert-action",children:x}),s&&r("button",{type:"button",className:"alert-close",onClick:()=>{k(!1),null==v||v()},"aria-label":"Close alert",children:r(Hr,{size:16})})]})});kn.displayName="Alert";const _n=sr(kn);vr("/* 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 zn=a.forwardRef(({children:n,direction:e="row",wrap:t="nowrap",justify:a="start",align:o="stretch",alignContent:i,gap:l,rowGap:c,columnGap:d,inline:s=!1,fullWidth:v=!1,grow:x,shrink:p,basis:m,className:h="",as:g="div",style:u,...f},b)=>{const w=g,y=["vtx-flex",s&&"vtx-flex--inline",v&&"vtx-flex--full-width","row"!==e&&`vtx-flex--${e}`,"nowrap"!==t&&`vtx-flex--${t}`,"start"!==a&&`vtx-flex--justify-${a}`,"stretch"!==o&&`vtx-flex--align-${o}`,i&&`vtx-flex--align-content-${i}`,h].filter(Boolean).join(" "),k={...u};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!==d&&(k["--vtx-flex-column-gap"]="number"==typeof d?`${d}px`:d),void 0!==x&&(k.flexGrow=x),void 0!==p&&(k.flexShrink=p),void 0!==m&&(k.flexBasis="number"==typeof m?`${m}px`:m),r(w,{ref:b,className:y,style:k,...f,children:n})});zn.displayName="Flex";const Nn=sr(zn);vr("/* ===== 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/* ===== Typography Variants ===== */\n\n/* ===== Headings with Fluid Typography ===== */\n.vtx-text--h1 {\n font-size: clamp(2.25rem, 5vw + 1rem, 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: clamp(1rem, 2vw + 0.5rem, 1.5rem);\n}\n\n.vtx-text--h2 {\n font-size: clamp(1.875rem, 4vw + 0.75rem, 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: clamp(0.875rem, 1.75vw + 0.5rem, 1.25rem);\n}\n\n.vtx-text--h3 {\n font-size: clamp(1.5rem, 3vw + 0.5rem, 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: clamp(0.75rem, 1.5vw + 0.5rem, 1rem);\n}\n\n.vtx-text--h4 {\n font-size: clamp(1.25rem, 2.5vw + 0.5rem, 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: clamp(0.75rem, 1.5vw + 0.25rem, 1rem);\n}\n\n.vtx-text--h5 {\n font-size: clamp(1.125rem, 2vw + 0.25rem, 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: clamp(0.625rem, 1.25vw + 0.25rem, 0.75rem);\n}\n\n.vtx-text--h6 {\n font-size: clamp(1rem, 1.5vw + 0.25rem, 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: clamp(0.625rem, 1.25vw + 0.25rem, 0.75rem);\n}\n\n/* ===== Body Text with Responsive Sizing ===== */\n.vtx-text--body1 {\n font-size: clamp(0.9375rem, 1vw + 0.125rem, 1rem);\n font-weight: var(--vtx-text-body1-font-weight, 400);\n line-height: var(--vtx-text-body1-line-height, 1.6);\n letter-spacing: var(--vtx-text-body1-letter-spacing, 0);\n margin-bottom: clamp(0.625rem, 1vw + 0.25rem, 0.75rem);\n}\n\n.vtx-text--body2 {\n font-size: clamp(0.8125rem, 0.85vw + 0.125rem, 0.875rem);\n font-weight: var(--vtx-text-body2-font-weight, 400);\n line-height: var(--vtx-text-body2-line-height, 1.6);\n letter-spacing: var(--vtx-text-body2-letter-spacing, 0.01em);\n margin-bottom: clamp(0.625rem, 1vw + 0.25rem, 0.75rem);\n}\n\n/* ===== Subtitles with Responsive Sizing ===== */\n.vtx-text--subtitle1 {\n font-size: clamp(1rem, 1.25vw + 0.125rem, 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.0075em);\n margin-bottom: clamp(0.5rem, 0.75vw + 0.125rem, 0.625rem);\n}\n\n.vtx-text--subtitle2 {\n font-size: clamp(0.9375rem, 1vw + 0.0625rem, 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.01em);\n margin-bottom: clamp(0.5rem, 0.75vw + 0.125rem, 0.625rem);\n}\n\n/* ===== Caption with Responsive Sizing ===== */\n.vtx-text--caption {\n font-size: clamp(0.6875rem, 0.75vw + 0.0625rem, 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 with Responsive Sizing ===== */\n.vtx-text--overline {\n font-size: clamp(0.6875rem, 0.75vw + 0.0625rem, 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 with Responsive Sizing ===== */\n.vtx-text--button {\n font-size: clamp(0.8125rem, 0.85vw + 0.125rem, 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 with Responsive Sizing ===== */\n.vtx-text--label {\n font-size: clamp(0.8125rem, 0.85vw + 0.125rem, 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.0075em);\n display: inline-block;\n margin-bottom: clamp(0.375rem, 0.5vw + 0.125rem, 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 Breakpoint Adjustments ===== */\n\n/* Small Mobile: < 480px */\n@media (max-width: 479px) {\n .vtx-text--h1 {\n font-size: clamp(1.875rem, 8vw, 2.5rem);\n line-height: 1.15;\n margin-bottom: 0.875rem;\n }\n\n .vtx-text--h2 {\n font-size: clamp(1.625rem, 7vw, 2.125rem);\n line-height: 1.2;\n margin-bottom: 0.75rem;\n }\n\n .vtx-text--h3 {\n font-size: clamp(1.375rem, 6vw, 1.75rem);\n line-height: 1.25;\n margin-bottom: 0.625rem;\n }\n\n .vtx-text--h4,\n .vtx-text--h5,\n .vtx-text--h6 {\n margin-bottom: 0.5rem;\n }\n\n .vtx-text--body1,\n .vtx-text--body2 {\n line-height: 1.65;\n }\n}\n\n/* Mobile: 480px - 767px */\n@media (min-width: 480px) and (max-width: 767px) {\n .vtx-text--h1 {\n line-height: 1.15;\n }\n\n .vtx-text--h2 {\n line-height: 1.2;\n }\n\n .vtx-text--body1,\n .vtx-text--body2 {\n line-height: 1.65;\n }\n}\n/* Enhancements ===== */\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 animation: none;\n }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n .vtx-text {\n font-weight: 500;\n }\n\n .vtx-text--h1,\n .vtx-text--h2,\n .vtx-text--h3,\n .vtx-text--h4,\n .vtx-text--h5,\n .vtx-text--h6 {\n font-weight: 700;\n }\n\n .vtx-text--caption,\n .vtx-text--overline {\n opacity: 1;\n }\n}\n\n/* ===== Container Query Support (Modern Browsers) ===== */\n@supports (container-type: inline-size) {\n @container (max-width: 600px) {\n .vtx-text--h1 {\n font-size: clamp(1.875rem, 6vw, 2.5rem);\n }\n\n .vtx-text--h2 {\n font-size: clamp(1.625rem, 5vw, 2.125rem);\n }\n\n .vtx-text--h3 {\n font-size: clamp(1.375rem, 4vw, 1.75rem);\n }\n }\n}\n\n/* ===== Touch Device Optimizations ===== */\n@media (hover: none) and (pointer: coarse) {\n .vtx-text--body1,\n .vtx-text--body2 {\n line-height: 1.65;\n font-size: clamp(0.9375rem, 1.1vw + 0.125rem, 1.0625rem);\n }\n\n .vtx-text--button,\n .vtx-text--label {\n font-size: clamp(0.875rem, 1vw + 0.125rem, 0.9375rem);\n line-height: 1.6;\n }\n}\n\n/* ===== Very Small Screens (<= 320px) ===== */\n@media (max-width: 320px) {\n .vtx-text--h1 {\n font-size: 1.75rem;\n line-height: 1.1;\n }\n\n .vtx-text--h2 {\n font-size: 1.5rem;\n line-height: 1.15;\n }\n\n .vtx-text--h3 {\n font-size: 1.25rem;\n line-height: 1.2;\n }\n\n .vtx-text--h4 {\n font-size: 1.125rem;\n }\n\n .vtx-text--h5,\n .vtx-text--h6 {\n font-size: 1rem\n };\n}\n\n/* Desktop: 1024px - 1439px */\n@media (min-width: 1024px) and (max-width: 1439px) {\n .vtx-text--h1 {\n line-height: 1.2;\n }\n}\n\n/* Large Desktop: >= 1440px */\n@media (min-width: 1440px) {\n .vtx-text--h1 {\n letter-spacing: -0.03em;\n }\n\n .vtx-text--h2 {\n letter-spacing: -0.03em;\n }\n\n .vtx-text--h3 {\n letter-spacing: -0.03em;\n }\n}\n\n/* ===== Landscape Mode Adjustments ===== */\n@media (max-width: 1023px) and (orientation: landscape) {\n .vtx-text--h1,\n .vtx-text--h2,\n .vtx-text--h3 {\n margin-bottom: 0.5rem;\n }\n\n .vtx-text--body1,\n .vtx-text--body2 {\n margin-bottom: 0.5rem;\n }\n}\n\n/* ===== High Resolution Displays ===== */\n@media (min-resolution: 2dppx) {\n .vtx-text {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\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 Cn=t.forwardRef(({variant:r="body1",as:n,align:e,color:a,weight:o,transform:i,decoration:l,truncate:c=!1,lineClamp:d,breakWord:s=!1,italic:v=!1,underline:x=!1,strikethrough:p=!1,gradient:m,noSelect:h=!1,size:g,lineHeight:u,letterSpacing:f,noMargin:b=!1,noPadding:w=!1,className:y="",style:k,children:_,...z},N)=>{const C=n||(r=>({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"}[r]))(r),S=["vtx-text",`vtx-text--${r}`,e&&`vtx-text--align-${e}`,o&&"string"==typeof o&&`vtx-text--weight-${o}`,i&&`vtx-text--transform-${i}`,l&&`vtx-text--decoration-${l}`,c&&"vtx-text--truncate",d&&"vtx-text--line-clamp",s&&"vtx-text--break-word",v&&"vtx-text--italic",x&&"vtx-text--underline",p&&"vtx-text--strikethrough",m&&"vtx-text--gradient",h&&"vtx-text--no-select",b&&"vtx-text--no-margin",w&&"vtx-text--no-padding",y].filter(Boolean).join(" "),M={...k};if(a)if(a.includes(".")){const[r,n]=a.split(".");M.color=`var(--vtx-color-${r}-${n})`}else M.color=a;if(o&&"number"==typeof o&&(M.fontWeight=o),d&&(M.WebkitLineClamp=d),m&&m.length>0){const r=1===m.length?m[0]:`linear-gradient(135deg, ${m.join(", ")})`;M.backgroundImage=r}return g&&(M.fontSize="number"==typeof g?`${g}px`:g),u&&(M.lineHeight="number"==typeof u?`${u}`:u),f&&(M.letterSpacing="number"==typeof f?`${f}px`:f),t.createElement(C,{ref:N,className:S,style:M,...z},_)});Cn.displayName="Text";const Sn=sr(Cn);vr("/* 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 Mn=({isOpen:n})=>r(n?Cr:yr,{size:16}),Tn=a.forwardRef(({label:t,onClick:a,icon:o,rightIcon:l,disabled:c=!1,active:s=!1,variant:v="default",shortcut:x,divider:p=!1,items:m},h)=>{const[g,u]=d(!1),f=i(null),b=m&&m.length>0,w=l||(b?r(Mn,{isOpen:g}):null);return n(e,{children:[r("div",{ref:h||f,className:["vtx-menu-item",s&&"vtx-menu-item--active",c&&"vtx-menu-item--disabled","default"!==v&&`vtx-menu-item--${v}`,b&&"vtx-menu-item--has-submenu",g&&"vtx-menu-item--submenu-open"].filter(Boolean).join(" "),onClick:()=>{c||(b?u(!g):a&&a())},onKeyDown:r=>{c||("Enter"===r.key||" "===r.key?(r.preventDefault(),b?u(!g):null==a||a()):"ArrowDown"===r.key&&b&&!g?(r.preventDefault(),u(!0)):"ArrowUp"===r.key&&b&&g&&(r.preventDefault(),u(!1)))},role:"menuitem",tabIndex:c?-1:0,"aria-disabled":c,"aria-haspopup":b?"menu":void 0,"aria-expanded":b?g:void 0,children:n(Nn,{align:"center",gap:8,style:{flex:1},children:[o&&r("span",{className:"vtx-menu-item-icon",children:o}),r(Sn,{variant:"body2",noMargin:!0,style:{flex:1},children:t}),x&&r(Sn,{variant:"caption",color:"neutral.500",noMargin:!0,className:"vtx-menu-item-shortcut",children:x}),w&&r("span",{className:"vtx-menu-item-right-icon",children:w})]})}),b&&g&&r("div",{className:"vtx-submenu",role:"menu",children:m.map((n,e)=>r(Tn,{...n},e))}),p&&r("div",{className:"vtx-menu-divider",role:"separator"})]})});Tn.displayName="MenuItem";const $n=a.forwardRef(({items:e,children:t,orientation:a="vertical",responsive:o=!0,className:l="",width:s},v)=>{const[x,p]=d(!1),m=i(null);c(()=>{if(!o||!x)return;const r=r=>{m.current&&!m.current.contains(r.target)&&p(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[o,x]),c(()=>{if(!o||!x)return;const r=r=>{"Escape"===r.key&&p(!1)};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,x]);const h=e?e.map((n,e)=>r(Tn,{...n},e)):t,g=["vtx-menu",`vtx-menu--${a}`,o&&"vtx-menu--responsive",x&&"vtx-menu--mobile-open",l].filter(Boolean).join(" "),u={width:"vertical"===a&&s?"number"==typeof s?`${s}px`:s:void 0};return n("div",{ref:m,className:"vtx-menu-container",children:[o&&r("button",{className:"vtx-menu-toggle",onClick:()=>p(!x),"aria-label":"Toggle menu","aria-expanded":x,children:r(x?Hr:Nr,{size:24})}),r("div",{ref:v,className:g,role:"menu",style:u,children:h})]})});$n.displayName="Menu";const In=sr($n);vr("/* ===== 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 jn=a.forwardRef(({isOpen:e,onClose:t,title:a,description:o,children:l,header:d,footer:s,footerButtons:v,size:x,closeOnBackdropClick:p=!0,closeOnEscape:m=!0,showCloseButton:h=!0,transparentBackdrop:g=!1,className:u="",backdropClassName:f="",preventScroll:b=!0,animation:w="fade",onAfterOpen:y,onAfterClose:k,scrollable:_=!1,centered:z=!0},N)=>{const C=i(null),S=i(null),{theme:M}=ar();let T="md";if(x?T=x:(null==M?void 0:M.defaultSize)&&(T=M.defaultSize),rn(C,e),en(b&&e),nn(()=>{m&&e&&t()}),c(()=>{e?(S.current=document.activeElement,null==y||y()):S.current&&(S.current.focus(),null==k||k())},[e,y,k]),!e)return null;const $=["vtx-modal-backdrop",g&&"vtx-modal-backdrop--transparent",z&&"vtx-modal-backdrop--centered",`vtx-modal-backdrop--${w}`,f].filter(Boolean).join(" "),I=["vtx-modal",`vtx-modal--${T}`,_&&"vtx-modal--scrollable",`vtx-modal--${w}`,u].filter(Boolean).join(" "),j=r("div",{className:$,onClick:r=>{p&&r.target===r.currentTarget&&t()},role:"presentation",children:n("div",{ref:r=>{C.current=r,"function"==typeof N?N(r):N&&(N.current=r)},className:I,role:"dialog","aria-modal":"true","aria-labelledby":a?"vtx-modal-title":void 0,"aria-describedby":o?"vtx-modal-description":void 0,children:[d?r("div",{className:"vtx-modal-header",children:d}):a||h?n(Nn,{className:"vtx-modal-header",justify:"between",align:"center",gap:8,children:[a&&n(Nn,{direction:"column",gap:4,className:"vtx-modal-header-content",children:[r(Sn,{as:"h2",variant:"h6",weight:"semibold",id:"vtx-modal-title",noMargin:!0,children:a}),o&&r(Sn,{variant:"body2",color:"neutral.600",id:"vtx-modal-description",noMargin:!0,children:o})]}),h&&r(pr,{variant:"ghost",iconOnly:!0,size:"sm",className:"vtx-modal-close",onClick:t,"aria-label":"Close modal",children:r(Hr,{size:20})})]}):null,r(Nn,{direction:"column",className:"vtx-modal-body",children:l}),(s||v)&&r(Nn,{className:"vtx-modal-footer",justify:"end",align:"center",gap:8,children:v?v.map((n,e)=>r(pr,{variant:n.variant||"secondary",size:n.size||(null==M?void 0:M.defaultSize)||"md",loading:n.loading,disabled:n.disabled,onClick:n.onClick,children:n.label},e)):s})]})});return K(j,document.body)});jn.displayName="Modal";const An=sr(jn);vr("/* ===== 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 Dn={success:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-6h2v6zm0-8H9V5h2v2z",fill:"currentColor"})})},Ln=a.forwardRef(({children:e,onDismiss:t,id:o,variant:l="default",autoClose:s=5e3,closeButton:v=!0,progressBar:x=!0,pauseOnHover:p=!0,pauseOnFocusLoss:m=!0,icon:h,action:g,className:u="",style:f,title:b,description:w,animationDuration:y=300,isVisible:k,createdAt:_,onClose:z,onOpen:N,toastId:C,...S},M)=>{const[T,$]=d(!1),[I,j]=d(!1),[A,D]=d(100),L=i(null),B=i(Date.now()),E=i(0),R=a.useCallback(()=>{$(!0),setTimeout(()=>{t()},y)},[t,y]);c(()=>{if(!1===s||I)return;return L.current=setInterval(()=>{const r=Date.now()-B.current-E.current,n=Math.max(0,s-r);D(n/s*100),n<=0&&R()},16),()=>{L.current&&clearInterval(L.current)}},[s,I,R]);const O=["vtx-toast",`vtx-toast--${l}`,T&&"vtx-toast--exiting",u].filter(Boolean).join(" ");return n("div",{ref:M,className:O,style:{...f,"--vtx-toast-animation-duration":`${y}ms`},onMouseEnter:()=>{p&&!I&&(j(!0),E.current=Date.now())},onMouseLeave:()=>{if(p&&I){j(!1);const r=Date.now()-E.current;B.current+=r}},onFocus:()=>{if(m&&I){j(!1);const r=Date.now()-E.current;B.current+=r}},onBlur:()=>{m&&!I&&(j(!0),E.current=Date.now())},role:"alert","aria-live":"polite","data-toast-id":o,...S,children:[n("div",{className:"vtx-toast__wrapper",children:[!1===h?null:r("div",h?{className:"vtx-toast__icon",children:h}:{className:"vtx-toast__icon",children:Dn[l]}),b||w?n("div",{className:"vtx-toast__content",children:[b&&r("div",{className:"vtx-toast__title",children:b}),w&&r("div",{className:"vtx-toast__description",children:w}),e&&r("div",{className:"vtx-toast__body",children:e})]}):r("div",{className:"vtx-toast__content",children:e}),n("div",{className:"vtx-toast__actions",children:[g&&r("button",{className:"vtx-toast__action",onClick:g.onClick,type:"button",children:g.label}),v&&r("button",{className:"vtx-toast__close",onClick:R,type:"button","aria-label":"Close notification",children:r(wr,{size:16})})]})]}),x&&!1!==s&&r("div",{className:"vtx-toast__progress-container",children:r("div",{className:"vtx-toast__progress",style:{transform:`scaleX(${A/100})`,animationPlayState:I?"paused":"running"}})})]})});Ln.displayName="Toast";const Bn=sr(Ln),En=p(null),Rn=()=>{const r=m(En);if(!r)throw new Error("useToast must be used within a ToastProvider");return r},On=({children:n})=>{const[e,t]=d([]),a=x(r=>{t(n=>{var e;const t=n.find(n=>n.id===r);return t&&(null===(e=t.onClose)||void 0===e||e.call(t)),n.filter(n=>n.id!==r)})},[]),o=x((r,n={})=>{var e;const o=n.toastId||Date.now()+Math.random(),i={id:o,content:r,createdAt:Date.now(),isVisible:!0,autoClose:5e3,closeButton:!0,progressBar:!0,pauseOnHover:!0,pauseOnFocusLoss:!0,variant:"default",animationDuration:300,...n};return t(r=>{const n=r.filter(r=>r.id!==o);return[i,...n]}),!1!==i.autoClose&&setTimeout(()=>{a(o)},i.autoClose),null===(e=n.onOpen)||void 0===e||e.call(n),o},[a]),i=x(()=>{t([])},[]),l=x((r,n)=>{t(e=>e.map(e=>e.id===r?{...e,...n}:e))},[]),c={toasts:e,addToast:o,removeToast:a,clearAllToasts:i,updateToast:l};return r(En.Provider,{value:c,children:n})};class Fn{constructor(){this.addToastFn=null,this.removeToastFn=null,this.clearAllToastsFn=null,this.updateToastFn=null}static getInstance(){return Fn.instance||(Fn.instance=new Fn),Fn.instance}setMethods(r,n,e,t){this.addToastFn=r,this.removeToastFn=n,this.clearAllToastsFn=e,this.updateToastFn=t}show(r,n){return this.addToastFn?this.addToastFn(r,n):(console.warn("Toast system not initialized. Make sure ToastContainer is mounted."),"")}success(r,n){return this.show(r,{...n,variant:"success"})}error(r,n){return this.show(r,{...n,variant:"error"})}warning(r,n){return this.show(r,{...n,variant:"warning"})}info(r,n){return this.show(r,{...n,variant:"info"})}primary(r,n){return this.show(r,{...n,variant:"primary"})}dismiss(r){this.removeToastFn?this.removeToastFn(r):console.warn("Toast system not initialized.")}dismissAll(){this.clearAllToastsFn?this.clearAllToastsFn():console.warn("Toast system not initialized.")}update(r,n){this.updateToastFn?this.updateToastFn(r,n):console.warn("Toast system not initialized.")}}const Wn=Fn.getInstance();vr("/* ===== 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 Pn=({position:e="top-right",limit:t=5,gap:a=12,margin:o=16,className:l="",style:d,stacked:s=!0,theme:v="auto"})=>{const{toasts:x,removeToast:p,addToast:m,clearAllToasts:h,updateToast:g}=Rn(),u=i(null);c(()=>{Wn.setMethods(m,p,h,g)},[m,p,h,g]),c(()=>{if("auto"===v){const r=window.matchMedia("(prefers-color-scheme: dark)"),n=()=>{document.documentElement.setAttribute("data-vtx-toast-theme",r.matches?"dark":"light")};return n(),r.addEventListener("change",n),()=>r.removeEventListener("change",n)}document.documentElement.setAttribute("data-vtx-toast-theme",v)},[v]);const f=x.slice(0,t),b=Math.max(0,x.length-t),w=["vtx-toast-container",`vtx-toast-container--${e}`,s&&"vtx-toast-container--stacked",l].filter(Boolean).join(" ");return 0===f.length?null:K(n("div",{ref:u,className:w,style:{...(r=>{const n={position:"fixed",zIndex:"var(--vtx-z-notification, 1400)",pointerEvents:"none"};switch(r){case"top-left":return{...n,top:o,left:o};case"top-center":return{...n,top:o,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...n,top:o,right:o};case"bottom-left":return{...n,bottom:o,left:o};case"bottom-center":return{...n,bottom:o,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...n,bottom:o,right:o}}})(e),"--vtx-toast-gap":`${a}px`,...d},"aria-live":"polite","aria-label":"Notifications",children:[b>0&&n("div",{className:"vtx-toast-container__hidden-count",children:["+",b," more"]}),r("div",{className:"vtx-toast-container__list",children:f.map((n,e)=>r(Bn,{id:n.id,isVisible:n.isVisible,onDismiss:()=>p(n.id),variant:n.variant,autoClose:n.autoClose,closeButton:n.closeButton,progressBar:n.progressBar,pauseOnHover:n.pauseOnHover,pauseOnFocusLoss:n.pauseOnFocusLoss,icon:n.icon,action:n.action,className:n.className,style:n.style,title:n.title,description:n.description,animationDuration:n.animationDuration,createdAt:n.createdAt,onClose:n.onClose,onOpen:n.onOpen,"data-toast-index":e,children:n.content},n.id))})]}),document.body)},Vn=({children:e,...t})=>n(On,{children:[e,r(Pn,{...t})]});vr(".vtx-tooltip {\n position: fixed;\n z-index: var(--vtx-z-tooltip);\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n background-color: var(--vtx-color-neutral-900);\n color: white;\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n border-radius: var(--vtx-radius-md);\n max-width: 300px;\n word-wrap: break-word;\n pointer-events: auto;\n box-shadow: var(--vtx-shadow-lg);\n opacity: 0;\n transition:\n opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform, opacity;\n}\n\n.vtx-tooltip--visible {\n opacity: 1;\n}\n\n/* Inner wrapper for content and close button */\n.vtx-tooltip-inner {\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-2);\n}\n\n.vtx-tooltip-content {\n flex: 1;\n min-width: 0;\n}\n\n/* Close button */\n.vtx-tooltip-close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n color: currentColor;\n cursor: pointer;\n border-radius: var(--vtx-radius-sm);\n transition: all var(--vtx-transition-base);\n opacity: 0.7;\n margin-top: -2px;\n}\n\n.vtx-tooltip-close:hover {\n opacity: 1;\n background: rgba(255, 255, 255, 0.1);\n}\n\n.vtx-tooltip-close:active {\n transform: scale(0.95);\n}\n\n.vtx-tooltip-close:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n opacity: 1;\n}\n\n/* Placement-specific transforms with entry animations */\n.vtx-tooltip--top {\n transform: translate(-50%, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom center;\n}\n\n.vtx-tooltip--top.vtx-tooltip--visible {\n transform: translate(-50%, -100%) scale(1);\n}\n\n.vtx-tooltip--bottom {\n transform: translate(-50%, 4px) scale(0.9);\n transform-origin: top center;\n}\n\n.vtx-tooltip--bottom.vtx-tooltip--visible {\n transform: translate(-50%, 0) scale(1);\n}\n\n.vtx-tooltip--left {\n transform: translate(calc(-100% - 4px), -50%) scale(0.9);\n transform-origin: right center;\n}\n\n.vtx-tooltip--left.vtx-tooltip--visible {\n transform: translate(-100%, -50%) scale(1);\n}\n\n.vtx-tooltip--right {\n transform: translate(4px, -50%) scale(0.9);\n transform-origin: left center;\n}\n\n.vtx-tooltip--right.vtx-tooltip--visible {\n transform: translate(0, -50%) scale(1);\n}\n\n/* Placement-start and placement-end variants */\n.vtx-tooltip--top-start {\n transform: translate(0, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom left;\n}\n\n.vtx-tooltip--top-start.vtx-tooltip--visible {\n transform: translate(0, -100%) scale(1);\n}\n\n.vtx-tooltip--top-end {\n transform: translate(-100%, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom right;\n}\n\n.vtx-tooltip--top-end.vtx-tooltip--visible {\n transform: translate(-100%, -100%) scale(1);\n}\n\n.vtx-tooltip--bottom-start {\n transform: translate(0, 4px) scale(0.9);\n transform-origin: top left;\n}\n\n.vtx-tooltip--bottom-start.vtx-tooltip--visible {\n transform: translate(0, 0) scale(1);\n}\n\n.vtx-tooltip--bottom-end {\n transform: translate(-100%, 4px) scale(0.9);\n transform-origin: top right;\n}\n\n.vtx-tooltip--bottom-end.vtx-tooltip--visible {\n transform: translate(-100%, 0) scale(1);\n}\n\n.vtx-tooltip--left-start {\n transform: translate(calc(-100% - 4px), 0) scale(0.9);\n transform-origin: right top;\n}\n\n.vtx-tooltip--left-start.vtx-tooltip--visible {\n transform: translate(-100%, 0) scale(1);\n}\n\n.vtx-tooltip--left-end {\n transform: translate(calc(-100% - 4px), -100%) scale(0.9);\n transform-origin: right bottom;\n}\n\n.vtx-tooltip--left-end.vtx-tooltip--visible {\n transform: translate(-100%, -100%) scale(1);\n}\n\n.vtx-tooltip--right-start {\n transform: translate(4px, 0) scale(0.9);\n transform-origin: left top;\n}\n\n.vtx-tooltip--right-start.vtx-tooltip--visible {\n transform: translate(0, 0) scale(1);\n}\n\n.vtx-tooltip--right-end {\n transform: translate(4px, -100%) scale(0.9);\n transform-origin: left bottom;\n}\n\n.vtx-tooltip--right-end.vtx-tooltip--visible {\n transform: translate(0, -100%) scale(1);\n}\n\n/* Variants */\n.vtx-tooltip--dark {\n background-color: var(--vtx-color-neutral-900);\n color: white;\n}\n\n.vtx-tooltip--light {\n background-color: white;\n color: var(--vtx-color-neutral-900);\n border: 1px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-tooltip--light .vtx-tooltip-close:hover {\n background: var(--vtx-color-neutral-100);\n}\n\n.vtx-tooltip--error {\n background-color: var(--vtx-color-error-600);\n color: white;\n}\n\n.vtx-tooltip--warning {\n background-color: var(--vtx-color-warning-500);\n color: var(--vtx-color-neutral-900);\n}\n\n.vtx-tooltip--success {\n background-color: var(--vtx-color-success-600);\n color: white;\n}\n\n.vtx-tooltip--info {\n background-color: var(--vtx-color-info-600);\n color: white;\n}\n\n/* Arrow */\n.vtx-tooltip--with-arrow .vtx-tooltip-arrow {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: inherit;\n transform: rotate(45deg);\n border: inherit;\n}\n\n.vtx-tooltip--top .vtx-tooltip-arrow {\n bottom: -4px;\n left: 50%;\n margin-left: -4px;\n}\n\n.vtx-tooltip--bottom .vtx-tooltip-arrow {\n top: -4px;\n left: 50%;\n margin-left: -4px;\n}\n\n.vtx-tooltip--left .vtx-tooltip-arrow {\n right: -4px;\n top: 50%;\n margin-top: -4px;\n}\n\n.vtx-tooltip--right .vtx-tooltip-arrow {\n left: -4px;\n top: 50%;\n margin-top: -4px;\n}\n");const Hn=a.forwardRef(({content:t,placement:a="top",delay:o=200,hideDelay:l=0,children:s,open:v,disabled:x=!1,arrow:p=!1,maxWidth:m="300px",variant:g="dark",dismissible:u=!1,onShow:f,onHide:b,onDismiss:w,className:y="",...k},_)=>{const[z,N]=d(v||!1),[C,S]=d(!1),[M,T]=d({top:0,left:0}),$=i(null),I=i(null),j=i(null),A=i(null),D=i(!1),L=()=>{x||(D.current=!0,j.current&&clearTimeout(j.current),A.current&&clearTimeout(A.current),I.current=setTimeout(()=>{if($.current&&D.current){const r=$.current.getBoundingClientRect(),n=E(r,a);T(n),S(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{N(!0),null==f||f()})})}},o))},B=()=>{D.current=!1,I.current&&clearTimeout(I.current),j.current=setTimeout(()=>{D.current||(N(!1),null==b||b(),A.current=setTimeout(()=>{S(!1)},150))},l)},E=(r,n)=>{const e=p?12:8;let t=0,a=0;return n.startsWith("top")?(t=r.top-e+window.scrollY,a=r.left+r.width/2+window.scrollX,"top-start"===n&&(a=r.left+window.scrollX),"top-end"===n&&(a=r.right+window.scrollX)):n.startsWith("bottom")?(t=r.bottom+e+window.scrollY,a=r.left+r.width/2+window.scrollX,"bottom-start"===n&&(a=r.left+window.scrollX),"bottom-end"===n&&(a=r.right+window.scrollX)):n.startsWith("left")?(t=r.top+r.height/2+window.scrollY,a=r.left-e+window.scrollX,"left-start"===n&&(t=r.top+window.scrollY),"left-end"===n&&(t=r.bottom+window.scrollY)):n.startsWith("right")&&(t=r.top+r.height/2+window.scrollY,a=r.right+e+window.scrollX,"right-start"===n&&(t=r.top+window.scrollY),"right-end"===n&&(t=r.bottom+window.scrollY)),{top:t,left:a}};c(()=>{void 0!==v&&(v?(S(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{N(!0)})})):(N(!1),A.current=setTimeout(()=>{S(!1)},150)))},[v]),c(()=>()=>{I.current&&clearTimeout(I.current),j.current&&clearTimeout(j.current),A.current&&clearTimeout(A.current)},[]);const R=["vtx-tooltip",`vtx-tooltip--${a}`,`vtx-tooltip--${g}`,p&&"vtx-tooltip--with-arrow",z&&"vtx-tooltip--visible",y].filter(Boolean).join(" "),O=void 0!==v&&v||C,F=h(s,{ref:r=>{$.current=r;const n=s.ref;"function"==typeof n?n(r):n&&"object"==typeof n&&"current"in n&&(n.current=r)},onMouseEnter:r=>{var n,e;void 0===v&&L(),null===(e=(n=s.props).onMouseEnter)||void 0===e||e.call(n,r)},onMouseLeave:r=>{var n,e;void 0===v&&B(),null===(e=(n=s.props).onMouseLeave)||void 0===e||e.call(n,r)},onFocus:r=>{var n,e;void 0===v&&L(),null===(e=(n=s.props).onFocus)||void 0===e||e.call(n,r)},onBlur:r=>{var n,e;void 0===v&&B(),null===(e=(n=s.props).onBlur)||void 0===e||e.call(n,r)},"aria-describedby":z?"vtx-tooltip-content":void 0});return n(e,{children:[F,O&&K(n("div",{ref:_,id:"vtx-tooltip-content",role:"tooltip",className:R,style:{top:`${M.top}px`,left:`${M.left}px`,maxWidth:m},onMouseEnter:()=>{x||void 0!==v||(D.current=!0,j.current&&clearTimeout(j.current))},onMouseLeave:()=>{x||void 0!==v||B()},...k,children:[p&&r("span",{className:"vtx-tooltip-arrow","aria-hidden":"true"}),n("div",{className:"vtx-tooltip-inner",children:[r("span",{className:"vtx-tooltip-content",children:t}),u&&r("button",{type:"button",className:"vtx-tooltip-close",onClick:()=>{D.current=!1,N(!1),null==w||w(),null==b||b(),A.current=setTimeout(()=>{S(!1)},150)},"aria-label":"Dismiss tooltip",children:r(wr,{size:14})})]})]}),document.body)]})});Hn.displayName="Tooltip";vr(".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 Yn=a.forwardRef(({src:e,alt:t="",size:a,shape:o="circle",fallback:i="?",onImageError:l,onImageLoad:c,imgProps:s,statusIndicator:v,statusPosition:x="bottom-right",className:p="",...m},h)=>{const{theme:g}=ar(),u=a||g.defaultSize||"md",[f,b]=d(!1),w=["vtx-avatar",`vtx-avatar--${u}`,`vtx-avatar--${o}`,v&&"vtx-avatar--with-status",p].filter(Boolean).join(" "),y=e&&!f,k=i.slice(0,2).toUpperCase();return n("div",{ref:h,className:w,role:"img","aria-label":t||i||"Avatar",...m,children:[y?r("img",{src:e,alt:t,className:"vtx-avatar-image",onError:r=>{b(!0),null==l||l(r)},onLoad:r=>{null==c||c(r)},loading:"lazy",...s}):r("span",{className:"vtx-avatar-fallback","aria-hidden":"true",children:k}),v&&r("span",{className:`vtx-avatar-status vtx-avatar-status--${x}`,"aria-label":"Status indicator",children:v})]})});Yn.displayName="Avatar";const qn=sr(Yn);vr(".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--sm {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-xs);\n}\n\n.vtx-badge--md {\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--lg {\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 Gn=a.forwardRef(({variant:e="neutral",size:t,pill:a=!1,dot:o=!1,outline:i=!1,maxLength:l,icon:c,children:d,className:s="",onRemove:v,...x},p)=>{const{theme:m}=ar(),h=["vtx-badge",`vtx-badge--${e}`,`vtx-badge--${t||m.defaultSize}`,a&&"vtx-badge--pill",o&&"vtx-badge--with-dot",i&&"vtx-badge--outline",v&&"vtx-badge--removable",s].filter(Boolean).join(" "),u=g(()=>l&&"string"==typeof d&&d.length>l?`${d.slice(0,l)}...`:d,[d,l]);return n("span",{ref:p,className:h,...x,children:[o&&r("span",{className:"vtx-badge-dot","aria-hidden":"true"}),c&&r("span",{className:"vtx-badge-icon","aria-hidden":"true",children:c}),r("span",{className:"vtx-badge-content",children:u}),v&&r("button",{type:"button",className:"vtx-badge-remove",onClick:v,"aria-label":"Remove badge",children:r(wr,{})})]})});Gn.displayName="Badge";const Xn=sr(Gn);vr(".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 Un=a.forwardRef(({children:e,variant:t="elevated",size:a,noPadding:o=!1,padding:i,hoverable:l=!1,clickable:c=!1,className:d="",header:s,footer:v,divider:x=!1,style:p,onClick:m,tabIndex:h,...g},u)=>{const{theme:f}=ar(),b=["vtx-card",`vtx-card--${t}`,`vtx-card--${a||(null==f?void 0:f.defaultSize)||"md"}`,l?"vtx-card--hoverable":"",c?"vtx-card--clickable":"",o&&!i?"vtx-card--no-padding":"",d].filter(Boolean).join(" "),w={...p||{},...i?{"--vtx-card-padding":i}:{}};return n("div",{ref:u,className:b,style:w,onClick:m,tabIndex:c?"number"==typeof h?h:0:h,...g,children:[s&&r("div",{className:"vtx-card-header"+(x?" vtx-card-header--divider":""),children:s}),r("div",{className:"vtx-card-content",children:e}),v&&r("div",{className:"vtx-card-footer"+(x?" vtx-card-footer--divider":""),children:v})]})});Un.displayName="Card";const Kn=sr(Un);vr('/* ==========================================\r\n DataGrid - Professional MUI-inspired Design\r\n ========================================== */\r\n\r\n.vertex-datagrid {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n border: 1px solid rgba(224, 224, 224, 1);\r\n border-radius: 4px;\r\n background: #fff;\r\n overflow: hidden;\r\n font-family: "Roboto", "Helvetica", "Arial", sans-serif;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vertex-datagrid--auto-height {\r\n height: auto;\r\n}\r\n\r\n/* ==========================================\r\n Density Variants\r\n ========================================== */\r\n\r\n.vertex-datagrid--compact .vertex-datagrid-th,\r\n.vertex-datagrid--compact .vertex-datagrid-td {\r\n padding: 4px 16px;\r\n font-size: 0.8125rem;\r\n}\r\n\r\n.vertex-datagrid--standard .vertex-datagrid-th,\r\n.vertex-datagrid--standard .vertex-datagrid-td {\r\n padding: 8px 16px;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vertex-datagrid--comfortable .vertex-datagrid-th,\r\n.vertex-datagrid--comfortable .vertex-datagrid-td {\r\n padding: 12px 20px;\r\n font-size: 0.875rem;\r\n}\r\n\r\n/* ==========================================\r\n Size Variants\r\n ========================================== */\r\n\r\n.vertex-datagrid--sm .vertex-datagrid-th,\r\n.vertex-datagrid--sm .vertex-datagrid-td {\r\n font-size: 0.75rem;\r\n}\r\n\r\n.vertex-datagrid--md .vertex-datagrid-th,\r\n.vertex-datagrid--md .vertex-datagrid-td {\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vertex-datagrid--lg .vertex-datagrid-th,\r\n.vertex-datagrid--lg .vertex-datagrid-td {\r\n font-size: 1rem;\r\n}\r\n\r\n/* ==========================================\r\n Table Container\r\n ========================================== */\r\n\r\n.vertex-datagrid-container {\r\n overflow: auto;\r\n flex: 1;\r\n background: #fff;\r\n}\r\n\r\n.vertex-datagrid-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n}\r\n\r\n/* ==========================================\r\n Table Header\r\n ========================================== */\r\n\r\n.vertex-datagrid-thead {\r\n background: #fafafa;\r\n border-bottom: 1px solid rgba(224, 224, 224, 1);\r\n}\r\n\r\n.vertex-datagrid-th {\r\n text-align: left;\r\n font-weight: 600;\r\n color: rgba(0, 0, 0, 0.87);\r\n user-select: none;\r\n border-bottom: 1px solid rgba(224, 224, 224, 1);\r\n position: sticky;\r\n top: 0;\r\n background: #fafafa;\r\n z-index: 100;\r\n}\r\n\r\n.vertex-datagrid-th-content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 4px;\r\n min-height: 40px;\r\n}\r\n\r\n.vertex-datagrid-th-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n flex: 1;\r\n cursor: default;\r\n transition: color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-th--sortable .vertex-datagrid-th-label {\r\n cursor: pointer;\r\n}\r\n\r\n.vertex-datagrid-th--sortable:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n}\r\n\r\n.vertex-datagrid-th-text {\r\n font-size: 0.875rem;\r\n font-weight: 600;\r\n line-height: 1.5rem;\r\n letter-spacing: 0.01071em;\r\n}\r\n\r\n.vertex-datagrid-sort-icon {\r\n display: flex;\r\n align-items: center;\r\n color: rgba(0, 0, 0, 0.26);\r\n transition: color 0.2s, opacity 0.2s;\r\n}\r\n\r\n.vertex-datagrid-th--sortable .vertex-datagrid-sort-icon {\r\n opacity: 0;\r\n}\r\n\r\n.vertex-datagrid-th--sortable:hover .vertex-datagrid-sort-icon {\r\n opacity: 1;\r\n}\r\n\r\n.vertex-datagrid-sort-icon--active {\r\n opacity: 1 !important;\r\n color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n/* ==========================================\r\n Column Menu Button\r\n ========================================== */\r\n\r\n.vertex-datagrid-column-menu-btn {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 24px;\r\n height: 24px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.54);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n opacity: 0;\r\n transition: opacity 0.2s, background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-th:hover .vertex-datagrid-column-menu-btn {\r\n opacity: 1;\r\n}\r\n\r\n.vertex-datagrid-column-menu-btn:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-column-menu-btn--filtered {\r\n opacity: 1;\r\n color: #1976d2;\r\n}\r\n\r\n.vertex-datagrid-filter-badge {\r\n position: absolute;\r\n top: 2px;\r\n right: 2px;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #1976d2;\r\n}\r\n\r\n/* ==========================================\r\n Column Menu Dropdown\r\n ========================================== */\r\n\r\n.vertex-datagrid-column-menu {\r\n min-width: 200px;\r\n background: #fff;\r\n border-radius: 4px;\r\n box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), \r\n 0px 8px 10px 1px rgba(0,0,0,0.14), \r\n 0px 3px 14px 2px rgba(0,0,0,0.12);\r\n padding: 8px 0;\r\n}\r\n\r\n.vertex-datagrid-column-menu-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n width: 100%;\r\n padding: 8px 16px;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.87);\r\n font-size: 0.875rem;\r\n font-family: inherit;\r\n text-align: left;\r\n cursor: pointer;\r\n transition: background 0.2s;\r\n position: relative;\r\n}\r\n\r\n.vertex-datagrid-column-menu-item:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n}\r\n\r\n.vertex-datagrid-column-menu-item svg {\r\n flex-shrink: 0;\r\n}\r\n\r\n.vertex-datagrid-column-menu-divider {\r\n height: 1px;\r\n margin: 8px 0;\r\n background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.vertex-datagrid-menu-check {\r\n margin-left: auto;\r\n color: #1976d2;\r\n font-weight: 600;\r\n}\r\n\r\n.vertex-datagrid-menu-badge {\r\n margin-left: auto;\r\n color: #1976d2;\r\n font-size: 1.2rem;\r\n}\r\n\r\n/* ==========================================\r\n Filter Panel Overlay\r\n ========================================== */\r\n\r\n.vertex-datagrid-filter-panel-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.2);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1400;\r\n backdrop-filter: blur(2px);\r\n}\r\n\r\n.vertex-datagrid-filter-panel {\r\n width: 90%;\r\n max-width: 600px;\r\n max-height: 80vh;\r\n background: #fff;\r\n border-radius: 8px;\r\n box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), \r\n 0px 24px 38px 3px rgba(0,0,0,0.14), \r\n 0px 9px 46px 8px rgba(0,0,0,0.12);\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n}\r\n\r\n.vertex-datagrid-filter-panel-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 16px 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.vertex-datagrid-filter-close {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.54);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-close:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-filter-panel-body {\r\n flex: 1;\r\n padding: 20px;\r\n overflow-y: auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n}\r\n\r\n.vertex-datagrid-filter-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 16px;\r\n padding: 40px 20px;\r\n text-align: center;\r\n color: rgba(0, 0, 0, 0.38);\r\n}\r\n\r\n.vertex-datagrid-filter-row {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n}\r\n\r\n.vertex-datagrid-filter-logic-btn {\r\n align-self: flex-start;\r\n padding: 4px 12px;\r\n border: 1px solid #1976d2;\r\n background: transparent;\r\n color: #1976d2;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n border-radius: 16px;\r\n cursor: pointer;\r\n transition: background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-logic-btn:hover {\r\n background: rgba(25, 118, 210, 0.04);\r\n}\r\n\r\n.vertex-datagrid-filter-controls {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr auto;\r\n gap: 8px;\r\n align-items: start;\r\n}\r\n\r\n.vertex-datagrid-filter-select {\r\n padding: 8px 12px;\r\n border: 1px solid rgba(0, 0, 0, 0.23);\r\n border-radius: 4px;\r\n font-size: 0.875rem;\r\n font-family: inherit;\r\n background: #fff;\r\n color: rgba(0, 0, 0, 0.87);\r\n cursor: pointer;\r\n transition: border-color 0.2s, box-shadow 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-select:hover {\r\n border-color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-filter-select:focus {\r\n outline: none;\r\n border-color: #1976d2;\r\n box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);\r\n}\r\n\r\n.vertex-datagrid-filter-remove {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 36px;\r\n height: 36px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.54);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-remove:hover {\r\n background: rgba(211, 47, 47, 0.04);\r\n color: #d32f2f;\r\n}\r\n\r\n.vertex-datagrid-filter-actions {\r\n display: flex;\r\n gap: 8px;\r\n padding-top: 8px;\r\n}\r\n\r\n.vertex-datagrid-filter-panel-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n padding: 12px 20px;\r\n border-top: 1px solid rgba(0, 0, 0, 0.12);\r\n gap: 12px;\r\n}\r\n\r\n/* ==========================================\r\n Table Body\r\n ========================================== */\r\n\r\n.vertex-datagrid-tbody {\r\n background: #fff;\r\n}\r\n\r\n.vertex-datagrid-row {\r\n border-bottom: 1px solid rgba(224, 224, 224, 1);\r\n transition: background 0.15s;\r\n}\r\n\r\n.vertex-datagrid-row:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n}\r\n\r\n.vertex-datagrid-row--selected {\r\n background: rgba(25, 118, 210, 0.08);\r\n}\r\n\r\n.vertex-datagrid-row--selected:hover {\r\n background: rgba(25, 118, 210, 0.12);\r\n}\r\n\r\n.vertex-datagrid-td {\r\n color: rgba(0, 0, 0, 0.87);\r\n border-bottom: 1px solid rgba(224, 224, 224, 1);\r\n}\r\n\r\n.vertex-datagrid-checkbox-cell {\r\n width: 58px;\r\n padding-left: 16px !important;\r\n padding-right: 0 !important;\r\n position: sticky !important;\r\n left: 0 !important;\r\n z-index: 102 !important;\r\n background: #fafafa !important;\r\n}\r\n\r\n.vertex-datagrid-tbody .vertex-datagrid-checkbox-cell {\r\n background: #fff !important;\r\n z-index: 101 !important;\r\n}\r\n\r\n.vertex-datagrid-row:hover .vertex-datagrid-checkbox-cell {\r\n background: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected .vertex-datagrid-checkbox-cell {\r\n background: rgba(25, 118, 210, 0.08) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected:hover .vertex-datagrid-checkbox-cell {\r\n background: rgba(25, 118, 210, 0.12) !important;\r\n}\r\n\r\n/* ==========================================\r\n Pinned/Frozen Columns\r\n ========================================== */\r\n\r\n.vertex-datagrid-th--pinned-left,\r\n.vertex-datagrid-td--pinned-left {\r\n position: sticky !important;\r\n z-index: 100 !important;\r\n box-shadow: 2px 0 5px -1px rgba(0, 0, 0, 0.15) !important;\r\n}\r\n\r\n.vertex-datagrid-th--pinned-left {\r\n z-index: 101 !important;\r\n background: #fafafa !important;\r\n}\r\n\r\n.vertex-datagrid-td--pinned-left {\r\n background: #fff !important;\r\n}\r\n\r\n.vertex-datagrid-row:hover .vertex-datagrid-td--pinned-left {\r\n background: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected .vertex-datagrid-td--pinned-left {\r\n background: rgba(25, 118, 210, 0.08) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected:hover .vertex-datagrid-td--pinned-left {\r\n background: rgba(25, 118, 210, 0.12) !important;\r\n}\r\n\r\n.vertex-datagrid-th--pinned-right,\r\n.vertex-datagrid-td--pinned-right {\r\n position: sticky !important;\r\n z-index: 100 !important;\r\n box-shadow: -2px 0 5px -1px rgba(0, 0, 0, 0.15) !important;\r\n}\r\n\r\n.vertex-datagrid-th--pinned-right {\r\n z-index: 101 !important;\r\n background: #fafafa !important;\r\n}\r\n\r\n.vertex-datagrid-td--pinned-right {\r\n background: #fff !important;\r\n}\r\n\r\n.vertex-datagrid-row:hover .vertex-datagrid-td--pinned-right {\r\n background: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected .vertex-datagrid-td--pinned-right {\r\n background: rgba(25, 118, 210, 0.08) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected:hover .vertex-datagrid-td--pinned-right {\r\n background: rgba(25, 118, 210, 0.12) !important;\r\n}\r\n\r\n/* ==========================================\r\n Loading & Empty States\r\n ========================================== */\r\n\r\n.vertex-datagrid-loading,\r\n.vertex-datagrid-empty {\r\n padding: 0;\r\n text-align: center;\r\n border: none;\r\n}\r\n\r\n.vertex-datagrid-loading-content,\r\n.vertex-datagrid-empty-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 16px;\r\n padding: 64px 24px;\r\n color: rgba(0, 0, 0, 0.38);\r\n}\r\n\r\n.vertex-datagrid-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid rgba(25, 118, 210, 0.1);\r\n border-top-color: #1976d2;\r\n border-radius: 50%;\r\n animation: vertex-spinner-rotate 0.8s linear infinite;\r\n}\r\n\r\n@keyframes vertex-spinner-rotate {\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/* ==========================================\r\n Footer / Pagination\r\n ========================================== */\r\n\r\n.vertex-datagrid-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n min-height: 52px;\r\n padding: 0 16px;\r\n border-top: 1px solid rgba(224, 224, 224, 1);\r\n background: #fff;\r\n gap: 16px;\r\n}\r\n\r\n.vertex-datagrid-footer-left,\r\n.vertex-datagrid-footer-center,\r\n.vertex-datagrid-footer-right {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n}\r\n\r\n.vertex-datagrid-footer-center {\r\n flex: 1;\r\n justify-content: center;\r\n}\r\n\r\n.vertex-datagrid-filter-chip {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 4px 12px;\r\n border: 1px solid #1976d2;\r\n background: rgba(25, 118, 210, 0.08);\r\n color: #1976d2;\r\n font-size: 0.8125rem;\r\n font-weight: 500;\r\n border-radius: 16px;\r\n cursor: pointer;\r\n transition: background 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-chip:hover {\r\n background: rgba(25, 118, 210, 0.16);\r\n}\r\n\r\n.vertex-datagrid-pagesize-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n cursor: default;\r\n}\r\n\r\n.vertex-datagrid-pagesize-select {\r\n padding: 4px 28px 4px 8px;\r\n border: 1px solid rgba(0, 0, 0, 0.23);\r\n border-radius: 4px;\r\n font-size: 0.875rem;\r\n font-family: inherit;\r\n background: #fff url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.54)" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>\') no-repeat right 4px center;\r\n background-size: 16px;\r\n cursor: pointer;\r\n appearance: none;\r\n transition: border-color 0.2s;\r\n min-width: 70px;\r\n}\r\n\r\n.vertex-datagrid-pagesize-select:hover {\r\n border-color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-pagesize-select:focus {\r\n outline: none;\r\n border-color: #1976d2;\r\n}\r\n\r\n.vertex-datagrid-pagination {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n\r\n.vertex-datagrid-pagination-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.54);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-pagination-btn:hover:not(:disabled) {\r\n background: rgba(0, 0, 0, 0.04);\r\n color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-pagination-btn:disabled {\r\n color: rgba(0, 0, 0, 0.26);\r\n cursor: default;\r\n}\r\n\r\n/* ==========================================\r\n Scrollbar Styling\r\n ========================================== */\r\n\r\n.vertex-datagrid-container::-webkit-scrollbar {\r\n width: 12px;\r\n height: 12px;\r\n}\r\n\r\n.vertex-datagrid-container::-webkit-scrollbar-track {\r\n background: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vertex-datagrid-container::-webkit-scrollbar-thumb {\r\n background: rgba(0, 0, 0, 0.2);\r\n border-radius: 6px;\r\n border: 2px solid transparent;\r\n background-clip: padding-box;\r\n}\r\n\r\n.vertex-datagrid-container::-webkit-scrollbar-thumb:hover {\r\n background: rgba(0, 0, 0, 0.3);\r\n background-clip: padding-box;\r\n}\r\n\r\n/* ==========================================\r\n Responsive\r\n ========================================== */\r\n\r\n@media (max-width: 768px) {\r\n .vertex-datagrid-footer {\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n \r\n .vertex-datagrid-footer-left,\r\n .vertex-datagrid-footer-center,\r\n .vertex-datagrid-footer-right {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n \r\n .vertex-datagrid-filter-controls {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .vertex-datagrid-filter-panel {\r\n width: 95%;\r\n max-height: 90vh;\r\n }\r\n}\r\n');const Qn=(r="string")=>{switch(r){case"number":return[{label:"=",value:"=",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)===n}},{label:"!=",value:"!=",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)!==n}},{label:">",value:">",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)>n}},{label:">=",value:">=",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)>=n}},{label:"<",value:"<",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)<n}},{label:"<=",value:"<=",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)<=n}},{label:"is empty",value:"isEmpty",getApplyFilterFn:()=>r=>null==r||""===r},{label:"is not empty",value:"isNotEmpty",getApplyFilterFn:()=>r=>null!=r&&""!==r}];case"boolean":return[{label:"is",value:"is",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n="true"===r.value;return r=>Boolean(r)===n}}];case"date":return[{label:"is",value:"is",getApplyFilterFn:r=>{if(!r.value)return()=>!0;const n=new Date(r.value).toDateString();return r=>!!r&&new Date(r).toDateString()===n}},{label:"after",value:"after",getApplyFilterFn:r=>{if(!r.value)return()=>!0;const n=new Date(r.value);return r=>!!r&&new Date(r)>n}},{label:"before",value:"before",getApplyFilterFn:r=>{if(!r.value)return()=>!0;const n=new Date(r.value);return r=>!!r&&new Date(r)<n}}];default:return[{label:"contains",value:"contains",getApplyFilterFn:r=>r.value?n=>null!=n&&String(n).toLowerCase().includes(r.value.toLowerCase()):()=>!0},{label:"equals",value:"equals",getApplyFilterFn:r=>r.value?n=>null!=n&&String(n).toLowerCase()===r.value.toLowerCase():()=>!0},{label:"starts with",value:"startsWith",getApplyFilterFn:r=>r.value?n=>null!=n&&String(n).toLowerCase().startsWith(r.value.toLowerCase()):()=>!0},{label:"ends with",value:"endsWith",getApplyFilterFn:r=>r.value?n=>null!=n&&String(n).toLowerCase().endsWith(r.value.toLowerCase()):()=>!0},{label:"is empty",value:"isEmpty",getApplyFilterFn:()=>r=>null==r||""===String(r).trim()},{label:"is not empty",value:"isNotEmpty",getApplyFilterFn:()=>r=>null!=r&&""!==String(r).trim()}]}},Zn=({column:t,anchorEl:a,onClose:o,onSort:l,onFilter:d,currentSort:s,hasFilter:v})=>{const x=i(null);if(c(()=>{const r=r=>{x.current&&!x.current.contains(r.target)&&a&&!a.contains(r.target)&&o()};return a&&document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[a,o]),!a)return null;const p=a.getBoundingClientRect();return n("div",{ref:x,className:"vertex-datagrid-column-menu",style:{position:"fixed",top:p.bottom+4,left:p.left,zIndex:1300},children:[t.sortable&&n(e,{children:[n("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{l("asc"),o()},children:[r(Ur,{size:16}),r("span",{children:"Sort ascending"}),"asc"===s&&r("span",{className:"vertex-datagrid-menu-check",children:"✓"})]}),n("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{l("desc"),o()},children:[r(Kr,{size:16}),r("span",{children:"Sort descending"}),"desc"===s&&r("span",{className:"vertex-datagrid-menu-check",children:"✓"})]}),s&&n("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{l(null),o()},children:[r("span",{style:{width:16}}),r("span",{children:"Unsort"})]}),t.filterable&&r("div",{className:"vertex-datagrid-column-menu-divider"})]}),t.filterable&&n("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{d(),o()},children:[r("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r("span",{children:v?"Edit filter":"Filter"}),v&&r("span",{className:"vertex-datagrid-menu-badge",children:"●"})]})]})},Jn=({columns:t,filterModel:a,onFilterModelChange:o,onClose:l,targetColumn:d})=>{const s=t.filter(r=>!1!==r.filterable),v=i(null);c(()=>{const r=r=>{v.current&&!v.current.contains(r.target)&&l()};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[l]),c(()=>{d&&0===a.items.length&&x(d)},[d]);const x=r=>{var n,e;const i=r||(null===(n=s[0])||void 0===n?void 0:n.field)||"",l=t.find(r=>r.field===i),c=(null==l?void 0:l.filterOperators)||Qn(null==l?void 0:l.type),d={id:Date.now(),field:i,operator:(null===(e=c[0])||void 0===e?void 0:e.value)||"contains",value:""};o({...a,items:[...a.items,d]})},p=(r,n)=>{var e;const i=[...a.items],l=i[r];if(i[r]={...l,...n},n.field&&n.field!==l.field){const a=t.find(r=>r.field===n.field),o=(null==a?void 0:a.filterOperators)||Qn(null==a?void 0:a.type);i[r].operator=(null===(e=o[0])||void 0===e?void 0:e.value)||"contains"}o({...a,items:i})},m=()=>{o({...a,logicOperator:"and"===a.logicOperator?"or":"and"})};return r("div",{className:"vertex-datagrid-filter-panel-overlay",children:n("div",{ref:v,className:"vertex-datagrid-filter-panel",children:[n("div",{className:"vertex-datagrid-filter-panel-header",children:[r(Sn,{weight:"semibold",size:"sm",children:"Filters"}),r("button",{className:"vertex-datagrid-filter-close",onClick:l,children:n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[r("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),r("div",{className:"vertex-datagrid-filter-panel-body",children:0===a.items.length?n("div",{className:"vertex-datagrid-filter-empty",children:[r("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:r("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r(Sn,{size:"sm",color:"secondary",children:"No filters applied"}),r(pr,{variant:"outline",size:"sm",onClick:()=>x(),children:"Add filter"})]}):n(e,{children:[a.items.map((e,i)=>{var l;const c=t.find(r=>r.field===e.field),d=(null==c?void 0:c.filterOperators)||Qn(null==c?void 0:c.type),v=!["isEmpty","isNotEmpty"].includes(e.operator);return n("div",{className:"vertex-datagrid-filter-row",children:[i>0&&r("button",{className:"vertex-datagrid-filter-logic-btn",onClick:m,title:"Toggle AND/OR",children:(null===(l=a.logicOperator)||void 0===l?void 0:l.toUpperCase())||"OR"}),n("div",{className:"vertex-datagrid-filter-controls",children:[r("select",{value:e.field,onChange:r=>p(i,{field:r.target.value}),className:"vertex-datagrid-filter-select",children:s.map(n=>r("option",{value:n.field,children:n.headerName},n.field))}),r("select",{value:e.operator,onChange:r=>p(i,{operator:r.target.value}),className:"vertex-datagrid-filter-select",children:d.map(n=>r("option",{value:n.value,children:n.label},n.value))}),v&&r(cn,{value:e.value||"",onChange:r=>p(i,{value:r.target.value}),placeholder:"Value",size:"sm"}),r("button",{className:"vertex-datagrid-filter-remove",onClick:()=>(r=>{const n=a.items.filter((n,e)=>e!==r);o({...a,items:n})})(i),title:"Remove filter",children:n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[r("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})]},e.id||i)}),r("div",{className:"vertex-datagrid-filter-actions",children:r(pr,{variant:"ghost",size:"sm",onClick:()=>x(),children:"+ Add filter"})})]})}),a.items.length>0&&r("div",{className:"vertex-datagrid-filter-panel-footer",children:r(pr,{variant:"ghost",size:"sm",onClick:()=>o({items:[],logicOperator:"or"}),children:"Clear all"})})]})})},re=({columns:e,rows:t,getRowId:a=(r,n)=>{var e;return null!==(e=r.id)&&void 0!==e?e:n},filterModel:o,onFilterModelChange:i,initialState:l,disableColumnFilter:c=!1,ignoreDiacritics:s=!1,sortModel:v,onSortModelChange:p,checkboxSelection:m=!1,rowSelectionModel:h,onRowSelectionModelChange:u,pagination:f=!0,pageSize:b=10,pageSizeOptions:w=[5,10,25,50,100],loading:y=!1,autoHeight:k=!1,density:_="standard",disableColumnMenu:z=!1,hideFooter:N=!1,size:C,className:S,...M})=>{var T,$;const{theme:I}=ar(),j=C||I.defaultSize,[A,D]=d((null===(T=null==l?void 0:l.filter)||void 0===T?void 0:T.filterModel)||{items:[],logicOperator:"or"}),[L,B]=d([]),[E,R]=d([]),[O,F]=d(0),[W,P]=d(b),[V,H]=d(!1),[Y,q]=d(null),[G,X]=d(),U=null!=o?o:A,K=null!=v?v:L,Q=null!=h?h:E,Z=x(r=>{i?i(r):D(r)},[i]),J=x(r=>{p?p(r):B(r)},[p]),rr=x(r=>{u?u(r):R(r)},[u]),nr=g(()=>c||0===U.items.length?t:t.filter(r=>{const n=U.items.map(n=>{const t=e.find(r=>r.field===n.field);if(!t)return!0;const a=t.valueGetter?t.valueGetter(r):r[n.field],o=(t.filterOperators||Qn(t.type)).find(r=>r.value===n.operator);if(!o)return!0;return o.getApplyFilterFn(n)(a)});return"and"===U.logicOperator?n.every(r=>r):n.some(r=>r)}),[t,U,e,c]),er=g(()=>{if(0===K.length)return nr;const r=[...nr],n=K[0],t=e.find(r=>r.field===n.field);return t?(r.sort((r,e)=>{const a=t.valueGetter?t.valueGetter(r):r[n.field],o=t.valueGetter?t.valueGetter(e):e[n.field];if(null==a&&null==o)return 0;if(null==a)return 1;if(null==o)return-1;let i=0;return i="number"===t.type?Number(a)-Number(o):"date"===t.type?new Date(a).getTime()-new Date(o).getTime():String(a).localeCompare(String(o)),"asc"===n.sort?i:-i}),r):r},[nr,K,e]),tr=g(()=>{if(!f)return er;const r=O*W,n=r+W;return er.slice(r,n)},[er,O,W,f]),or=x((r,n)=>{if(!r.sortable)return;let e;e=null===n?[]:[{field:r.field,sort:n}],J(e)},[J]),ir=x(r=>{const n=Q.includes(r)?Q.filter(n=>n!==r):[...Q,r];rr(n)},[Q,rr]),lr=x(()=>{if(Q.length===tr.length)rr([]);else{const r=tr.map((r,n)=>a(r,n));rr(r)}},[Q,tr,rr,a]),cr=Math.ceil(er.length/W),dr=U.items.length>0,sr=(r,n,t=!1)=>{if(!r.pinned)return{};const a={position:"sticky",zIndex:t?101:100,background:t?"#fafafa":"inherit"};if("left"===r.pinned){let r=m?58:0;for(let t=0;t<n;t++)"left"===e[t].pinned&&(r+=e[t].width||150);a.left=r}else if("right"===r.pinned){let n=0;for(let t=e.indexOf(r)+1;t<e.length;t++)"right"===e[t].pinned&&(n+=e[t].width||150);a.right=n}return a};return n("div",{className:`vertex-datagrid ${`vertex-datagrid--${_}`} ${`vertex-datagrid--${j}`} ${k?"vertex-datagrid--auto-height":""} ${S||""}`,...M,children:[r("div",{className:"vertex-datagrid-container",children:n("table",{className:"vertex-datagrid-table",children:[r("thead",{className:"vertex-datagrid-thead",children:n("tr",{children:[m&&r("th",{className:"vertex-datagrid-th vertex-datagrid-checkbox-cell",children:r(hr,{checked:Q.length===tr.length&&tr.length>0,indeterminate:Q.length>0&&Q.length<tr.length,onChange:lr})}),e.map((e,t)=>{const a=K.find(r=>r.field===e.field),o=!!a,i=null==a?void 0:a.sort,l=U.items.some(r=>r.field===e.field),c=sr(e,t,!0);return r("th",{className:`vertex-datagrid-th ${e.sortable?"vertex-datagrid-th--sortable":""} ${e.pinned?`vertex-datagrid-th--pinned-${e.pinned}`:""}`,style:{width:e.width,minWidth:e.minWidth,maxWidth:e.maxWidth,textAlign:e.headerAlign||e.align||"left",flex:e.flex,...c},children:n("div",{className:"vertex-datagrid-th-content",children:[n("div",{className:"vertex-datagrid-th-label",onClick:()=>e.sortable&&or(e,o?"asc"===i?"desc":null:"asc"),children:[r("span",{className:"vertex-datagrid-th-text",children:e.headerName}),e.sortable&&r("div",{className:"vertex-datagrid-sort-icon "+(o?"vertex-datagrid-sort-icon--active":""),children:o?r("asc"===i?Ur:Kr,{size:18}):r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",opacity:"0.4",children:r("path",{d:"M12 5v14M5 12l7 7 7-7"})})})]}),!z&&(e.sortable||e.filterable)&&n("button",{className:"vertex-datagrid-column-menu-btn "+(l?"vertex-datagrid-column-menu-btn--filtered":""),onClick:r=>{r.stopPropagation(),q({column:e,anchorEl:r.currentTarget})},title:"Column options",children:[n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:[r("circle",{cx:"12",cy:"5",r:"2"}),r("circle",{cx:"12",cy:"12",r:"2"}),r("circle",{cx:"12",cy:"19",r:"2"})]}),l&&r("span",{className:"vertex-datagrid-filter-badge"})]})]})},e.field)})]})}),r("tbody",{className:"vertex-datagrid-tbody",children:y?r("tr",{children:r("td",{colSpan:e.length+(m?1:0),className:"vertex-datagrid-loading",children:n("div",{className:"vertex-datagrid-loading-content",children:[r("div",{className:"vertex-datagrid-spinner"}),r(Sn,{size:"sm",color:"secondary",children:"Loading..."})]})})}):0===tr.length?r("tr",{children:r("td",{colSpan:e.length+(m?1:0),className:"vertex-datagrid-empty",children:n("div",{className:"vertex-datagrid-empty-content",children:[n("svg",{width:"64",height:"64",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1",opacity:"0.3",children:[r("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),r("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),r("line",{x1:"9",y1:"21",x2:"9",y2:"9"})]}),r(Sn,{size:"sm",color:"secondary",children:"No rows"})]})})}):tr.map((t,o)=>{const i=a(t,o),l=Q.includes(i);return n("tr",{className:"vertex-datagrid-row "+(l?"vertex-datagrid-row--selected":""),children:[m&&r("td",{className:"vertex-datagrid-td vertex-datagrid-checkbox-cell",children:r(hr,{checked:l,onChange:()=>ir(i)})}),e.map((n,e)=>{const a=n.valueGetter?n.valueGetter(t):t[n.field],o=n.valueFormatter?n.valueFormatter(a):a,i=n.renderCell?n.renderCell({row:t,value:a,field:n.field}):o,l=sr(n,e,!1);return r("td",{className:"vertex-datagrid-td "+(n.pinned?`vertex-datagrid-td--pinned-${n.pinned}`:""),style:{textAlign:n.align||"left",...l},children:i},n.field)})]},i)})})]})}),!N&&f&&n("div",{className:"vertex-datagrid-footer",children:[r("div",{className:"vertex-datagrid-footer-left",children:dr&&n("button",{className:"vertex-datagrid-filter-chip",onClick:()=>H(!0),children:[r("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),n("span",{children:[U.items.length," ",1===U.items.length?"filter":"filters"]})]})}),r("div",{className:"vertex-datagrid-footer-center",children:r(Sn,{size:"sm",color:"secondary",children:0===er.length?"0 rows":`${O*W+1}–${Math.min((O+1)*W,er.length)} of ${er.length}`})}),n("div",{className:"vertex-datagrid-footer-right",children:[n("label",{className:"vertex-datagrid-pagesize-label",children:[r(Sn,{size:"sm",color:"secondary",children:"Rows per page:"}),r("select",{value:W,onChange:r=>{P(Number(r.target.value)),F(0)},className:"vertex-datagrid-pagesize-select",children:w.map(n=>r("option",{value:n,children:n},n))})]}),n("div",{className:"vertex-datagrid-pagination",children:[r("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>F(0),disabled:0===O,title:"First page",children:r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M11 17l-5-5 5-5M18 17l-5-5 5-5"})})}),r("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>F(r=>Math.max(0,r-1)),disabled:0===O,title:"Previous page",children:r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M15 18l-6-6 6-6"})})}),n(Sn,{size:"sm",color:"secondary",children:["Page ",O+1," of ",cr||1]}),r("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>F(r=>Math.min(cr-1,r+1)),disabled:O>=cr-1,title:"Next page",children:r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M9 18l6-6-6-6"})})}),r("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>F(cr-1),disabled:O>=cr-1,title:"Last page",children:r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M13 17l5-5-5-5M6 17l5-5-5-5"})})})]})]})]}),Y&&r(Zn,{column:Y.column,anchorEl:Y.anchorEl,onClose:()=>q(null),onSort:r=>or(Y.column,r),onFilter:()=>{X(Y.column.field),H(!0)},currentSort:null===($=K.find(r=>r.field===Y.column.field))||void 0===$?void 0:$.sort,hasFilter:U.items.some(r=>r.field===Y.column.field)}),V&&r(Jn,{columns:e,filterModel:U,onFilterModelChange:Z,onClose:()=>{H(!1),X(void 0)},targetColumn:G})]})};re.displayName="DataGrid";const ne=sr(re);vr("/* 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 ee=a.forwardRef(({textAlign:n="center",orientation:e="horizontal",variant:t="fullWidth",light:a=!1,flexItem:o=!1,children:i,component:l,className:c="",role:d,...s},v)=>{const x=l||(i||"vertical"===e?"div":"hr"),p=d||("hr"!==x?"separator":void 0),m=["vtx-divider",`vtx-divider--${e}`,`vtx-divider--${t}`,a&&"vtx-divider--light",o&&"vtx-divider--flex-item",i&&"vtx-divider--with-children",i&&`vtx-divider--text-${n}`,c].filter(Boolean).join(" ");return r(x,{ref:v,className:m,role:p,..."vertical"===e&&"hr"!==x?{"aria-orientation":"vertical"}:{},...s,children:i&&r("span",{className:"vtx-divider-wrapper",children:i})})});ee.displayName="Divider";const te=sr(ee);vr("/* 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 ae=a.forwardRef(({notifications:e,onNotificationClick:t,onMarkAllAsRead:a,onClose:o},i)=>{const l=e.filter(r=>!r.read).length;return n("div",{ref:i,className:"vtx-header-notifications-panel",children:[r("div",{className:"vtx-header-notifications-header",children:n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"subtitle2",noMargin:!0,children:"Notifications"}),l>0&&a&&r("button",{className:"vtx-header-notifications-mark-read",onClick:()=>{a(),o()},children:"Mark all as read"})]})}),r("div",{className:"vtx-header-notifications-list",children:0===e.length?n("div",{className:"vtx-header-notifications-empty",children:[r(zr,{}),r(Sn,{variant:"body2",color:"neutral.500",noMargin:!0,children:"No notifications"})]}):e.map(e=>n("div",{className:`vtx-header-notification-item ${e.read?"":"vtx-header-notification-item--unread"} ${e.type?`vtx-header-notification-item--${e.type}`:""}`,onClick:()=>{null==t||t(e),o()},children:[e.icon&&r("div",{className:"vtx-header-notification-icon",children:e.icon}),n("div",{className:"vtx-header-notification-content",children:[r(Sn,{variant:"body2",noMargin:!0,style:{fontWeight:e.read?400:600},children:e.title}),e.description&&r(Sn,{variant:"caption",color:"neutral.600",noMargin:!0,children:e.description}),r(Sn,{variant:"caption",color:"neutral.500",noMargin:!0,style:{marginTop:"4px"},children:e.time})]}),!e.read&&r("div",{className:"vtx-header-notification-dot"})]},e.id))})]})});ae.displayName="NotificationPanel";const oe=a.forwardRef(({logo:e,title:t,onToggleSidebar:a,showToggle:o=!0,notifications:l=[],onNotificationClick:s,onMarkAllAsRead:v,userName:x,userSubtitle:p,userAvatar:m,userMenuItems:h=[],actions:g,className:u="",sticky:f=!0},b)=>{const[w,y]=d(!1),[k,_]=d(!1),z=i(null),N=i(null),C=i(null),S=l.filter(r=>!r.read).length;c(()=>{const r=r=>{z.current&&!z.current.contains(r.target)&&C.current&&!C.current.contains(r.target)&&y(!1),N.current&&!N.current.contains(r.target)&&_(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]);const M=["vtx-header",f&&"vtx-header--sticky",u].filter(Boolean).join(" ");return n("header",{ref:b,className:M,children:[n(Nn,{align:"center",gap:16,style:{flex:1},children:[o&&a&&r("button",{className:"vtx-header-toggle",onClick:a,"aria-label":"Toggle sidebar",children:r(Nr,{})}),e&&r("div",{className:"vtx-header-logo",children:e}),t&&r(Sn,{variant:"h6",noMargin:!0,className:"vtx-header-title",children:t})]}),g&&r("div",{className:"vtx-header-actions",children:g}),n("div",{className:"vtx-header-right",children:[l&&l.length>0&&n("div",{className:"vtx-header-notifications",ref:z,children:[n("button",{className:"vtx-header-icon-button "+(w?"vtx-header-icon-button--active":""),onClick:()=>y(!w),"aria-label":"Notifications",children:[r(zr,{}),S>0&&r(Xn,{variant:"error",size:"sm",style:{position:"absolute",top:"4px",right:"4px",minWidth:"18px",height:"18px",padding:"0 4px"},children:S>9?"9+":S})]}),w&&r(ae,{ref:C,notifications:l,onNotificationClick:s,onMarkAllAsRead:v,onClose:()=>y(!1)})]}),x&&n("div",{className:"vtx-header-user-menu",ref:N,children:[n("button",{className:"vtx-header-user-button "+(k?"vtx-header-user-button--active":""),onClick:()=>_(!k),"aria-label":"User menu",children:[r(qn,{src:m,alt:x,size:"sm"}),!m&&r("span",{className:"vtx-header-avatar-fallback",children:x.split(" ").map(r=>r[0]).join("").slice(0,2)}),n("div",{className:"vtx-header-user-info",children:[r(Sn,{variant:"body2",noMargin:!0,style:{fontWeight:600},children:x}),p&&r(Sn,{variant:"caption",color:"neutral.600",noMargin:!0,children:p})]}),r(yr,{})]}),k&&r("div",{className:"vtx-header-user-dropdown",children:r(In,{items:h,responsive:!1})})]})]})]})});oe.displayName="Header";const ie=sr(oe);vr("/* ===================================\n SideMenu - Enterprise Sidebar Navigation\n =================================== */\n\n/* CSS Variables for Theming - Using Theme Tokens */\n:root {\n /* Default/Light Theme - Using theme token colors */\n --vtx-sidemenu-bg: var(--vtx-color-neutral-50, #ffffff);\n --vtx-sidemenu-border: var(--vtx-color-neutral-200, #e5e5e5);\n --vtx-sidemenu-shadow: var(--vtx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n \n --vtx-sidemenu-item-color: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-item-hover-bg: var(--vtx-color-neutral-100, #f5f5f5);\n --vtx-sidemenu-item-active-bg: var(--vtx-color-primary-50, #eff6ff);\n --vtx-sidemenu-item-active-color: var(--vtx-color-primary-600, #2563eb);\n --vtx-sidemenu-item-icon-color: var(--vtx-color-neutral-500, #737373);\n --vtx-sidemenu-item-icon-active-color: var(--vtx-color-primary-600, #2563eb);\n \n --vtx-sidemenu-submenu-bg: var(--vtx-color-neutral-50, #fafafa);\n --vtx-sidemenu-submenu-border: var(--vtx-color-neutral-100, #f5f5f5);\n \n --vtx-sidemenu-header-border: var(--vtx-color-neutral-200, #e5e5e5);\n --vtx-sidemenu-footer-border: var(--vtx-color-neutral-200, #e5e5e5);\n \n --vtx-sidemenu-toggle-bg: var(--vtx-color-neutral-100, #f5f5f5);\n --vtx-sidemenu-toggle-hover-bg: var(--vtx-color-neutral-200, #e5e5e5);\n --vtx-sidemenu-toggle-color: var(--vtx-color-neutral-500, #737373);\n \n --vtx-sidemenu-badge-bg: var(--vtx-color-error-500, #ef4444);\n --vtx-sidemenu-badge-color: var(--vtx-color-neutral-50, #ffffff);\n \n --vtx-sidemenu-transition-speed: var(--vtx-transition-base, 200ms);\n --vtx-sidemenu-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ===================================\n Base Sidebar Structure\n =================================== */\n\n.vtx-sidemenu {\n display: flex;\n flex-direction: column;\n background-color: var(--vtx-sidemenu-bg);\n height: 100vh;\n overflow: hidden;\n transition: width var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n position: relative;\n flex-shrink: 0;\n}\n\n.vtx-sidemenu--elevated {\n box-shadow: var(--vtx-sidemenu-shadow);\n}\n\n.vtx-sidemenu--bordered {\n border-right: 1px solid var(--vtx-sidemenu-border);\n}\n\n.vtx-sidemenu--right {\n border-right: none;\n border-left: 1px solid var(--vtx-sidemenu-border);\n}\n\n.vtx-sidemenu--collapsed {\n transition: width var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n}\n\n/* ===================================\n Header Section\n =================================== */\n\n.vtx-sidemenu-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px 16px;\n border-bottom: 1px solid var(--vtx-sidemenu-header-border);\n flex-shrink: 0;\n min-height: 72px;\n}\n\n.vtx-sidemenu-header-content {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-header {\n justify-content: center;\n padding: 20px 8px;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-header-content {\n display: none;\n}\n\n/* ===================================\n Content Section (Scrollable Menu Items)\n =================================== */\n\n.vtx-sidemenu-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 12px 12px;\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, #d4d4d4);\n border-radius: var(--vtx-border-radius-sm, 0.125rem);\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar-thumb:hover {\n background: var(--vtx-color-neutral-400, #a3a3a3);\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-content {\n padding: 12px 8px;\n}\n\n/* ===================================\n Footer Section\n =================================== */\n\n.vtx-sidemenu-footer {\n border-top: 1px solid var(--vtx-sidemenu-footer-border);\n padding: 16px 12px;\n flex-shrink: 0;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-footer {\n padding: 16px 8px;\n text-align: center;\n}\n\n/* ===================================\n Menu Items - Professional Style (Same as Menu component)\n =================================== */\n\n.vtx-sidemenu-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 text-decoration: none;\n outline: none;\n border-right: none;\n border-top: none;\n border-bottom: none;\n text-align: left;\n width: 100%;\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:active:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active) {\n background: var(--vtx-color-neutral-200);\n transform: scale(0.98);\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 Menu Item - Professional Style */\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--active:hover {\n background-color: var(--vtx-color-primary-100);\n}\n\n/* Disabled Menu Item */\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 gap: 0;\n}\n\n/* Icon Styling - Professional (Same as Menu) */\n.vtx-sidemenu-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n color: var(--vtx-color-neutral-600);\n transition: color 0.15s ease-in-out;\n}\n\n.vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled) .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item-icon svg {\n width: 100%;\n height: 100%;\n transition: inherit;\n}\n\n/* Text Content */\n.vtx-sidemenu-item-label {\n flex: 1;\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Badge */\n.vtx-sidemenu-item-badge {\n font-size: var(--vtx-font-size-xs);\n font-weight: var(--vtx-font-weight-semibold);\n min-width: 20px;\n height: 18px;\n padding: 0 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--vtx-radius-full);\n background: var(--vtx-color-error-500);\n color: white;\n line-height: 1;\n top: 8px;\n right: 8px;\n box-shadow: 0 0 0 2px var(--vtx-sidemenu-bg);\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.7;\n }\n}\n\n/* Chevron Icon */\n.vtx-sidemenu-chevron {\n display: flex;\n align-items: center;\n color: var(--vtx-color-neutral-400);\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.vtx-sidemenu-chevron--open {\n transform: rotate(180deg);\n}\n\n/* ===================================\n Submenu - Professional Style (Same as Menu)\n =================================== */\n\n.vtx-sidemenu-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-sidemenu-submenu .vtx-sidemenu-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-sidemenu-submenu .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-submenu .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-submenu .vtx-sidemenu-item--active:hover {\n background-color: var(--vtx-color-primary-100);\n}\n\n.vtx-sidemenu-submenu .vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Nested submenu - additional indentation */\n.vtx-sidemenu-submenu .vtx-sidemenu-submenu {\n padding-left: var(--vtx-spacing-4);\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* ===================================\n Collapse Toggle Button\n =================================== */\n\n.vtx-sidemenu-collapse-wrapper {\n padding: 12px 16px;\n display: flex;\n justify-content: center;\n border-top: 1px solid var(--vtx-sidemenu-header-border);\n}\n\n.vtx-sidemenu-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--vtx-sidemenu-toggle-bg);\n border: none;\n cursor: pointer;\n color: var(--vtx-sidemenu-toggle-color);\n transition: all var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n outline: none;\n}\n\n.vtx-sidemenu-toggle:hover {\n background-color: var(--vtx-sidemenu-toggle-hover-bg);\n}\n\n.vtx-sidemenu-toggle:focus-visible {\n outline: 2px solid var(--vtx-color-primary-600, #2563eb);\n outline-offset: 2px;\n}\n\n.vtx-sidemenu-toggle-icon {\n transition: transform var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n}\n\n.vtx-sidemenu-toggle-icon--rotated {\n transform: rotate(180deg);\n}\n\n/* ===================================\n VARIANT: Compact\n =================================== */\n\n.vtx-sidemenu--compact .vtx-sidemenu-item-content {\n padding: 8px 12px;\n}\n\n.vtx-sidemenu--compact .vtx-sidemenu-content {\n padding: 4px;\n}\n\n.vtx-sidemenu--compact .vtx-sidemenu-header {\n padding: 16px 12px;\n min-height: 56px;\n}\n\n.vtx-sidemenu--compact .vtx-sidemenu-item-label {\n font-size: 13px;\n}\n\n.vtx-sidemenu--compact .vtx-sidemenu-item-icon {\n width: 18px;\n height: 18px;\n}\n\n/* ===================================\n VARIANT: Modern\n =================================== */\n\n.vtx-sidemenu--modern .vtx-sidemenu-item {\n border-radius: 12px;\n position: relative;\n overflow: hidden;\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n opacity: 0;\n transition: opacity var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item--active::before {\n opacity: 1;\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled) {\n transform: translateX(2px);\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item-icon {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.7;\n }\n}\n\n/* ===================================\n VARIANT: Enterprise\n =================================== */\n\n.vtx-sidemenu--enterprise {\n border-right: 1px solid #e5e7eb;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-item {\n border-radius: 6px;\n margin-bottom: 2px;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-item-content {\n padding: 12px 16px;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-item-label {\n font-size: 14px;\n font-weight: 500;\n letter-spacing: -0.01em;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-item--active {\n background-color: var(--vtx-color-primary-50, #eff6ff);\n border-left: 3px solid var(--vtx-color-primary-600, #2563eb);\n padding-left: 13px;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-header {\n padding: var(--vtx-spacing-6, 1.5rem) var(--vtx-spacing-5, 1.25rem);\n border-bottom: 2px solid var(--vtx-color-neutral-200, #e5e5e5);\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-submenu {\n background-color: var(--vtx-color-neutral-50, #fafafa);\n border-left: 2px solid var(--vtx-color-neutral-200, #e5e5e5);\n margin-left: var(--vtx-spacing-3, 0.75rem);\n border-radius: 0 var(--vtx-border-radius-lg, 0.5rem) var(--vtx-border-radius-lg, 0.5rem) 0;\n}\n\n/* ===================================\n VARIANT: Minimal\n =================================== */\n\n.vtx-sidemenu--minimal {\n background-color: transparent;\n box-shadow: none;\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-item {\n border-radius: 4px;\n margin-bottom: 0;\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled) {\n background-color: rgba(0, 0, 0, 0.03);\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-item--active {\n background-color: rgba(37, 99, 235, 0.08);\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-header,\n.vtx-sidemenu--minimal .vtx-sidemenu-footer {\n border-color: transparent;\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-submenu {\n background-color: transparent;\n}\n\n/* ===================================\n THEME: Dark - Using Theme Tokens\n =================================== */\n\n.vtx-sidemenu--dark {\n --vtx-sidemenu-bg: var(--vtx-color-neutral-800, #262626);\n --vtx-sidemenu-border: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-shadow: var(--vtx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n \n --vtx-sidemenu-item-color: var(--vtx-color-neutral-200, #e5e5e5);\n --vtx-sidemenu-item-hover-bg: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-item-active-bg: var(--vtx-color-primary-600, #2563eb);\n --vtx-sidemenu-item-active-color: var(--vtx-color-neutral-50, #fafafa);\n --vtx-sidemenu-item-icon-color: var(--vtx-color-neutral-400, #a3a3a3);\n --vtx-sidemenu-item-icon-active-color: var(--vtx-color-neutral-50, #fafafa);\n \n --vtx-sidemenu-submenu-bg: var(--vtx-color-neutral-900, #171717);\n --vtx-sidemenu-submenu-border: var(--vtx-color-neutral-700, #404040);\n \n --vtx-sidemenu-header-border: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-footer-border: var(--vtx-color-neutral-700, #404040);\n \n --vtx-sidemenu-toggle-bg: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-toggle-hover-bg: var(--vtx-color-neutral-600, #525252);\n --vtx-sidemenu-toggle-color: var(--vtx-color-neutral-400, #a3a3a3);\n}\n\n/* ===================================\n THEME: Primary - Using Theme Tokens\n =================================== */\n\n.vtx-sidemenu--primary {\n --vtx-sidemenu-bg: var(--vtx-color-primary-800, #1e40af);\n --vtx-sidemenu-border: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-shadow: var(--vtx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n \n --vtx-sidemenu-item-color: var(--vtx-color-primary-100, #dbeafe);\n --vtx-sidemenu-item-hover-bg: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-item-active-bg: var(--vtx-color-primary-500, #3b82f6);\n --vtx-sidemenu-item-active-color: var(--vtx-color-neutral-50, #fafafa);\n --vtx-sidemenu-item-icon-color: var(--vtx-color-primary-300, #93c5fd);\n --vtx-sidemenu-item-icon-active-color: var(--vtx-color-neutral-50, #fafafa);\n \n --vtx-sidemenu-submenu-bg: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-submenu-border: var(--vtx-color-primary-800, #1e40af);\n \n --vtx-sidemenu-header-border: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-footer-border: var(--vtx-color-primary-900, #1e3a8a);\n \n --vtx-sidemenu-toggle-bg: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-toggle-hover-bg: var(--vtx-color-primary-700, #1d4ed8);\n --vtx-sidemenu-toggle-color: var(--vtx-color-primary-300, #93c5fd);\n}\n\n/* ===================================\n THEME: Gradient\n =================================== */\n\n.vtx-sidemenu--gradient {\n background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);\n --vtx-sidemenu-bg: transparent;\n --vtx-sidemenu-border: rgba(255, 255, 255, 0.1);\n --vtx-sidemenu-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);\n \n --vtx-sidemenu-item-color: rgba(255, 255, 255, 0.9);\n --vtx-sidemenu-item-hover-bg: rgba(255, 255, 255, 0.1);\n --vtx-sidemenu-item-active-bg: rgba(255, 255, 255, 0.2);\n --vtx-sidemenu-item-active-color: #ffffff;\n --vtx-sidemenu-item-icon-color: rgba(255, 255, 255, 0.7);\n --vtx-sidemenu-item-icon-active-color: #ffffff;\n \n --vtx-sidemenu-submenu-bg: rgba(0, 0, 0, 0.1);\n --vtx-sidemenu-submenu-border: rgba(255, 255, 255, 0.1);\n \n --vtx-sidemenu-header-border: rgba(255, 255, 255, 0.1);\n --vtx-sidemenu-footer-border: rgba(255, 255, 255, 0.1);\n \n --vtx-sidemenu-toggle-bg: rgba(255, 255, 255, 0.1);\n --vtx-sidemenu-toggle-hover-bg: rgba(255, 255, 255, 0.2);\n --vtx-sidemenu-toggle-color: rgba(255, 255, 255, 0.9);\n}\n\n/* ===================================\n Responsive Adjustments\n =================================== */\n\n/* Mobile Menu Button */\n.vtx-mobile-menu-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border: none;\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\n background-color: transparent;\n color: var(--vtx-color-neutral-700, #404040);\n cursor: pointer;\n transition: all var(--vtx-transition-base, 200ms) cubic-bezier(0.4, 0, 0.2, 1);\n outline: none;\n position: relative;\n overflow: hidden;\n}\n\n.vtx-mobile-menu-button::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--vtx-color-neutral-900, #171717);\n opacity: 0;\n transition: opacity var(--vtx-transition-base, 200ms) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.vtx-mobile-menu-button:hover::before {\n opacity: 0.05;\n}\n\n.vtx-mobile-menu-button:active::before {\n opacity: 0.1;\n}\n\n.vtx-mobile-menu-button:focus-visible {\n outline: 2px solid var(--vtx-color-primary-600, #2563eb);\n outline-offset: 2px;\n}\n\n.vtx-mobile-menu-button svg {\n position: relative;\n z-index: 1;\n}\n\n/* Button Variants */\n.vtx-mobile-menu-button--default {\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\n}\n\n.vtx-mobile-menu-button--default:hover {\n background-color: var(--vtx-color-neutral-200, #e5e5e5);\n}\n\n.vtx-mobile-menu-button--ghost {\n background-color: transparent;\n border: 1px solid var(--vtx-color-neutral-300, #d4d4d4);\n}\n\n.vtx-mobile-menu-button--ghost:hover {\n border-color: var(--vtx-color-neutral-400, #a3a3a3);\n background-color: var(--vtx-color-neutral-50, #fafafa);\n}\n\n.vtx-mobile-menu-button--minimal {\n background-color: transparent;\n}\n\n/* Hide on desktop by default */\n@media (min-width: 769px) {\n .vtx-mobile-menu-button {\n display: none;\n }\n}\n\n/* Mobile: Overlay Mode */\n.vtx-sidemenu--mobile {\n position: fixed;\n left: 0;\n top: 0;\n z-index: var(--vtx-z-index-modal, 1200);\n transform: translateX(-100%);\n transition: transform var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n box-shadow: var(--vtx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));\n}\n\n.vtx-sidemenu--mobile.vtx-sidemenu--right {\n left: auto;\n right: 0;\n transform: translateX(100%);\n}\n\n.vtx-sidemenu--mobile.vtx-sidemenu--mobile-open {\n transform: translateX(0);\n}\n\n/* Backdrop */\n.vtx-sidemenu-backdrop {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: calc(var(--vtx-z-index-modal, 1200) - 1);\n animation: fadeIn 200ms var(--vtx-sidemenu-transition-easing);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Mobile Close Button */\n.vtx-sidemenu-mobile-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\n background-color: transparent;\n border: none;\n cursor: pointer;\n color: var(--vtx-sidemenu-item-color);\n transition: all var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n outline: none;\n flex-shrink: 0;\n}\n\n.vtx-sidemenu-mobile-close:hover {\n background-color: var(--vtx-sidemenu-item-hover-bg);\n}\n\n.vtx-sidemenu-mobile-close:focus-visible {\n outline: 2px solid var(--vtx-color-primary-600, #2563eb);\n outline-offset: 2px;\n}\n\n/* Mobile: Larger touch targets */\n.vtx-sidemenu--mobile .vtx-sidemenu-item-content {\n padding: 14px 16px;\n min-height: 48px;\n}\n\n.vtx-sidemenu--mobile .vtx-sidemenu-item-icon {\n width: 24px;\n height: 24px;\n}\n\n.vtx-sidemenu--mobile .vtx-sidemenu-toggle {\n width: 44px;\n height: 44px;\n}\n\n.vtx-sidemenu--mobile .vtx-sidemenu-header {\n min-height: 64px;\n padding: var(--vtx-spacing-4, 1rem) var(--vtx-spacing-4, 1rem);\n}\n\n/* Desktop: Push Mode */\n@media (min-width: 769px) {\n .vtx-sidemenu {\n position: relative;\n transform: none !important;\n }\n}\n\n/* Tablet: Adjust for medium screens */\n@media (max-width: 1024px) and (min-width: 769px) {\n .vtx-sidemenu {\n width: 240px !important;\n }\n \n .vtx-sidemenu--collapsed {\n width: 64px !important;\n }\n}\n\n/* ===================================\n Accessibility\n =================================== */\n\n@media (prefers-reduced-motion: reduce) {\n .vtx-sidemenu,\n .vtx-sidemenu-item,\n .vtx-sidemenu-toggle,\n .vtx-sidemenu-item-icon,\n .vtx-sidemenu-item-chevron,\n .vtx-sidemenu-submenu {\n transition: none;\n animation: none;\n }\n}\n\n/* High Contrast Mode */\n@media (prefers-contrast: high) {\n .vtx-sidemenu {\n border: 2px solid currentColor;\n }\n \n .vtx-sidemenu-item--active {\n outline: 2px solid currentColor;\n outline-offset: -2px;\n }\n}\n");const le=({isOpen:n})=>r("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",className:"vtx-sidemenu-chevron "+(n?"vtx-sidemenu-chevron--open":""),children:r("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),ce=a.forwardRef(({label:t,onClick:a,icon:o,disabled:i=!1,active:l=!1,items:c,badge:s,href:v,collapsed:x=!1,level:p=0},m)=>{const[h,g]=d(!1),u=c&&c.length>0,f=r(e,{children:n(Nn,{align:"center",gap:x?0:12,style:{flex:1,minWidth:0},children:[o&&r("span",{className:"vtx-sidemenu-item-icon",children:o}),!x&&n(e,{children:[r(Sn,{variant:"body2",noMargin:!0,style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t}),s&&r("span",{className:"vtx-sidemenu-item-badge",children:s}),u&&r(le,{isOpen:h})]})]})}),b=["vtx-sidemenu-item",l&&"vtx-sidemenu-item--active",i&&"vtx-sidemenu-item--disabled",u&&"vtx-sidemenu-item--has-submenu",x&&"vtx-sidemenu-item--collapsed"].filter(Boolean).join(" ");return n(e,{children:[r(v?"a":"div",{ref:m,className:b,onClick:r=>{i||(u?(r.preventDefault(),g(!h)):a&&(r.preventDefault(),a()))},onKeyDown:r=>{i||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),u?g(!h):null==a||a())},role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i,"aria-expanded":u?h:void 0,href:v,title:x?t:void 0,"data-label":x?t:void 0,children:f}),u&&h&&!x&&r("div",{className:"vtx-sidemenu-submenu",children:c.map((n,e)=>r(ce,{...n,collapsed:x,level:p+1},e))})]})});ce.displayName="SideMenuItem";const de=a.forwardRef(({items:e,collapsed:t=!1,onCollapseToggle:a,className:o="",width:i="260px",collapsedWidth:l="80px",header:c,footer:d},s)=>{const v=t?"number"==typeof l?`${l}px`:l:"number"==typeof i?`${i}px`:i,x=["vtx-sidemenu",t&&"vtx-sidemenu--collapsed",o].filter(Boolean).join(" ");return n("aside",{ref:s,className:x,style:{width:v},role:"navigation",children:[c&&r("div",{className:"vtx-sidemenu-header",children:c}),r("div",{className:"vtx-sidemenu-content",children:e.map((n,e)=>r(ce,{...n,collapsed:t},e))}),d&&r("div",{className:"vtx-sidemenu-footer",children:d})]})});de.displayName="SideMenu";const se=sr(de);function ve({columns:t,data:o,getRowKey:i,striped:l=!1,hoverable:c=!0,bordered:s=!1,size:v,caption:p,emptyMessage:m="No data available",loading:h=!1,loadingContent:u,scrollable:f=!0,maxHeight:b,onRowClick:w,isRowSelected:y,onRowSelect:k,sortable:_=!1,sortConfig:z,onSortChange:N,className:C="",containerClassName:S="",selectable:M=!1,selectedRows:T=[],onSelectionChange:$,pagination:I=!1,page:j=0,rowsPerPage:A=10,rowsPerPageOptions:D=[5,10,25,50],onPageChange:L,onRowsPerPageChange:B,dense:E=!1,expandableRows:R=!1,renderExpandedRow:O,expandedRows:F=[],onExpandRow:W,stickyHeader:P=!1,toolbar:V,filterable:H=!1,filters:Y={},onFiltersChange:q,...G}){const{theme:X}=ar(),U=v||X.defaultSize,[K,Q]=d(z||null),[Z,J]=d(T),[rr,nr]=d(F),[er,tr]=d(j),[or,ir]=d(A),[lr,cr]=d(Y),dr=z||K,sr=T.length>0?T:Z,vr=F.length>0?F:rr,xr=L?j:er,pr=B?A:or,mr=Object.keys(Y).length>0?Y:lr,gr=r=>{if(!_)return;const n=(null==dr?void 0:dr.key)===r&&"asc"===dr.direction?"desc":"asc",e={key:r,direction:n};N?N(r,n):Q(e)},ur=g(()=>{if(!dr||!_)return o;const r=t.find(r=>r.key===dr.key),n=null==r?void 0:r.sortFn;return[...o].sort((r,e)=>{if(n)return"asc"===dr.direction?n(r,e):n(e,r);const t=r[dr.key],a=e[dr.key];if("string"==typeof t&&"string"==typeof a)return"asc"===dr.direction?t.localeCompare(a):a.localeCompare(t);if("number"==typeof t&&"number"==typeof a)return"asc"===dr.direction?t-a:a-t;const o=String(t),i=String(a);return"asc"===dr.direction?o.localeCompare(i):i.localeCompare(o)})},[o,dr,t,_]),fr=g(()=>H&&0!==Object.keys(mr).length?ur.filter(r=>Object.entries(mr).every(([n,e])=>{if(!e)return!0;const a=t.find(r=>r.key===n);if(null==a?void 0:a.filterFn)return a.filterFn(r,e);const o=r[n];return String(o||"").toLowerCase().includes(e.toLowerCase())})):ur,[ur,H,mr,t]),br=g(()=>{if(!I)return fr;const r=xr*pr;return fr.slice(r,r+pr)},[fr,I,xr,pr]),wr=I?br:fr,kr=x(r=>{if(!M)return;const n=r?wr.map((r,n)=>i(r,n)):[];$?$(n):J(n)},[M,wr,i,$]),_r=x((r,n)=>{if(!M)return;const e=n?[...sr,r]:sr.filter(n=>n!==r);$?$(e):J(e)},[M,sr,$]),zr=M&&wr.length>0&&wr.every((r,n)=>sr.includes(i(r,n))),Nr=M&&sr.length>0&&!zr,Tr=x(r=>{if(!R)return;const n=vr.includes(r)?vr.filter(n=>n!==r):[...vr,r];W?W(r):nr(n)},[R,vr,W]),$r=x(r=>{L?L(r):tr(r)},[L]),Ir=x(r=>{B?B(r):(ir(r),tr(0))},[B]),jr=x((r,n)=>{const e={...mr,[r]:n};n||delete e[r],q?q(e):cr(e),I&&(L?L(0):tr(0))},[mr,q,I,L]),Ar=["vtx-table-container",f&&"vtx-table-container--scrollable",b&&"vtx-table-container--fixed-header",P&&"vtx-table-container--sticky-header",S].filter(Boolean).join(" "),Dr=["vtx-table",`vtx-table--${U}`,E&&"vtx-table--dense",l&&"vtx-table--striped",c&&"vtx-table--hoverable",s&&"vtx-table--bordered",(w||M)&&"vtx-table--clickable",P&&"vtx-table--sticky-header",C].filter(Boolean).join(" "),Lr=(r,n,e)=>{k&&k(r,n),null==w||w(r,n,e)},Br=n=>{if(!_)return null;const e=(null==dr?void 0:dr.key)===n,t=null==dr?void 0:dr.direction;return r("span",e?{className:"vtx-table-sort-icon vtx-table-sort-icon--active",children:r("asc"===t?Ur:Kr,{size:14})}:{className:"vtx-table-sort-icon vtx-table-sort-icon--inactive",children:r(Ur,{size:14})})};return n("div",{className:"vtx-table-wrapper",children:[V&&r("div",{className:"vtx-table-toolbar",children:"object"==typeof V&&null!==V&&!a.isValidElement(V)&&"title"in V?n(Nn,{justify:"between",align:"center",style:{width:"100%"},children:[V.title&&r(Sn,{variant:"h6",noMargin:!0,children:V.title}),V.actions&&r("div",{className:"vtx-table-toolbar-actions",children:V.actions})]}):r(e,{children:V})}),M&&sr.length>0&&r("div",{className:"vtx-table-selection-toolbar",children:r(Nn,{align:"center",gap:16,children:n(Sn,{variant:"body2",noMargin:!0,children:[sr.length," selected"]})})}),r("div",{className:Ar,style:{maxHeight:b},children:n("table",{className:Dr,...G,children:[p&&r("caption",{className:"vtx-table-caption",children:p}),r("thead",{className:"vtx-table-header",children:n("tr",{children:[M&&r("th",{className:"vtx-table-header-cell vtx-table-cell--checkbox",children:r(hr,{checked:zr,indeterminate:Nr,onChange:r=>kr(r.target.checked),"aria-label":"Select all rows"})}),R&&r("th",{className:"vtx-table-header-cell vtx-table-cell--expand"}),t.map(e=>{const t=_&&!1!==e.sortable,a=H&&!1!==e.filterable,o=["vtx-table-header-cell",t&&"vtx-table-header-cell--sortable",e.sticky&&`vtx-table-header-cell--sticky-${e.sticky}`,e.headerClassName].filter(Boolean).join(" ");return r("th",{className:o,style:{width:e.width,minWidth:e.minWidth,maxWidth:e.maxWidth,textAlign:e.align||"left"},"aria-sort":(null==dr?void 0:dr.key)===e.key?"asc"===dr.direction?"ascending":"descending":void 0,children:n("div",{className:"vtx-table-header-content",children:[n("div",{className:"vtx-table-header-label",onClick:()=>t&&gr(e.key),onKeyDown:r=>{!t||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),gr(e.key))},role:t?"button":void 0,tabIndex:t?0:void 0,style:{cursor:t?"pointer":"default"},children:[r("span",{children:e.header}),t&&Br(e.key)]}),a&&r("div",{className:"vtx-table-filter",children:r(cn,{size:"sm",placeholder:e.filterPlaceholder||`Filter ${e.header}...`,value:mr[e.key]||"",onChange:r=>jr(e.key,r.target.value),className:"vtx-table-filter-input"})})]})},e.key)})]})}),r("tbody",{className:"vtx-table-body",children:h?r("tr",{children:r("td",{colSpan:t.length+(M?1:0)+(R?1:0),className:"vtx-table-loading",children:u||r("span",{className:"vtx-table-loading-spinner",children:"Loading..."})})}):0===wr.length?r("tr",{children:r("td",{colSpan:t.length+(M?1:0)+(R?1:0),className:"vtx-table-empty",children:m})}):wr.map((e,o)=>{const l=i(e,o),c=sr.includes(l),d=vr.includes(l),s=["vtx-table-row",c&&"vtx-table-row--selected",d&&"vtx-table-row--expanded"].filter(Boolean).join(" ");return n(a.Fragment,{children:[n("tr",{className:s,onClick:r=>{M&&!r.target.closest("input, button")||Lr(e,o,r)},role:w?"button":void 0,tabIndex:w?0:void 0,"aria-selected":c,onKeyDown:r=>{!w||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),Lr(e,o,r))},children:[M&&r("td",{className:"vtx-table-cell vtx-table-cell--checkbox",children:r(hr,{checked:c,onChange:r=>{r.stopPropagation(),_r(l,r.target.checked)},"aria-label":`Select row ${o+1}`})}),R&&r("td",{className:"vtx-table-cell vtx-table-cell--expand",children:r("button",{className:"vtx-table-expand-button",onClick:r=>{r.stopPropagation(),Tr(l)},"aria-label":d?"Collapse row":"Expand row","aria-expanded":d,children:r(d?Cr:yr,{size:16})})}),t.map(n=>{const t=["vtx-table-cell",n.sticky&&`vtx-table-cell--sticky-${n.sticky}`,n.className].filter(Boolean).join(" ");return r("td",{className:t,style:{textAlign:n.align||"left",width:n.width,minWidth:n.minWidth,maxWidth:n.maxWidth},children:n.render?n.render(e,o):e[n.key]},n.key)})]}),R&&d&&O&&r("tr",{className:"vtx-table-row-expanded",children:r("td",{colSpan:t.length+(M?1:0)+1,className:"vtx-table-cell-expanded",children:O(e,o)})})]},l)})})]})}),I&&r("div",{className:"vtx-table-pagination",children:n(Nn,{align:"center",justify:"between",style:{width:"100%"},children:[n(Nn,{align:"center",gap:8,children:[r(Sn,{variant:"body2",color:"neutral.600",noMargin:!0,children:"Rows per page:"}),r("select",{className:"vtx-table-pagination-select",value:pr,onChange:r=>Ir(Number(r.target.value)),"aria-label":"Rows per page",children:D.map(n=>r("option",{value:n,children:n},n))})]}),n(Nn,{align:"center",gap:16,children:[n(Sn,{variant:"body2",color:"neutral.600",noMargin:!0,children:[xr*pr+1,"–",Math.min((xr+1)*pr,fr.length)," of"," ",fr.length]}),n(Nn,{align:"center",gap:4,children:[r("button",{className:"vtx-table-pagination-button",onClick:()=>$r(0),disabled:0===xr,"aria-label":"First page",title:"First page",children:r(Qr,{size:18})}),r("button",{className:"vtx-table-pagination-button",onClick:()=>$r(xr-1),disabled:0===xr,"aria-label":"Previous page",title:"Previous page",children:r(Sr,{size:18})}),r("button",{className:"vtx-table-pagination-button",onClick:()=>$r(xr+1),disabled:(xr+1)*pr>=fr.length,"aria-label":"Next page",title:"Next page",children:r(Mr,{size:18})}),r("button",{className:"vtx-table-pagination-button",onClick:()=>$r(Math.ceil(fr.length/pr)-1),disabled:(xr+1)*pr>=fr.length,"aria-label":"Last page",title:"Last page",children:r(Zr,{size:18})})]})]})]})})]})}vr("/* Table Wrapper & Toolbar */\n.vtx-table-wrapper {\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: white;\n border-radius: var(--vtx-radius-lg);\n border: 1px solid var(--vtx-color-neutral-200);\n overflow: hidden;\n}\n\n.vtx-table-toolbar {\n padding: var(--vtx-spacing-4) var(--vtx-spacing-6);\n border-bottom: 1px solid var(--vtx-color-neutral-200);\n background-color: white;\n}\n\n.vtx-table-toolbar-actions {\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-2);\n}\n\n.vtx-table-selection-toolbar {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-6);\n background-color: var(--vtx-color-primary-50);\n border-bottom: 1px solid var(--vtx-color-primary-100);\n}\n\n.vtx-table-container {\n width: 100%;\n overflow-x: auto;\n}\n\n.vtx-table-container--fixed-header,\n.vtx-table-container--sticky-header {\n overflow-y: auto;\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--sticky-header .vtx-table-header {\n position: sticky;\n top: 0;\n z-index: 10;\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 background-color: var(--vtx-color-neutral-50);\n}\n\n.vtx-table-header-cell--sortable {\n cursor: pointer;\n user-select: none;\n transition: background-color var(--vtx-transition-fast);\n}\n\n.vtx-table-header-cell--sortable:hover {\n background-color: var(--vtx-color-neutral-100);\n}\n\n.vtx-table-header-content {\n display: flex;\n flex-direction: column;\n gap: var(--vtx-spacing-2);\n width: 100%;\n}\n\n.vtx-table-header-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--vtx-spacing-2);\n width: 100%;\n}\n\n.vtx-table-header-label > span {\n flex: 1;\n}\n\n.vtx-table-sort-icon {\n display: flex;\n align-items: center;\n color: var(--vtx-color-neutral-400);\n transition: color var(--vtx-transition-fast);\n flex-shrink: 0;\n}\n\n.vtx-table-sort-icon--active {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-table-sort-icon--inactive {\n opacity: 0.4;\n}\n\n.vtx-table-header-cell--sortable:hover .vtx-table-sort-icon--inactive {\n opacity: 0.7;\n color: var(--vtx-color-neutral-600);\n}\n\n/* Filter Input */\n.vtx-table-filter {\n margin-top: var(--vtx-spacing-1);\n}\n\n.vtx-table-filter-input {\n width: 100%;\n font-size: var(--vtx-font-size-sm);\n min-width: 0;\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-row--selected {\n background-color: var(--vtx-color-primary-50);\n}\n\n.vtx-table-row--expanded {\n border-bottom: none;\n}\n\n.vtx-table-row-expanded {\n border-bottom: 1px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-table-row-expanded:last-child {\n border-bottom: none;\n}\n\n.vtx-table-cell-expanded {\n padding: var(--vtx-spacing-4);\n background-color: var(--vtx-color-neutral-50);\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.vtx-table-cell--checkbox {\n width: 48px;\n padding: var(--vtx-spacing-2);\n}\n\n.vtx-table-cell--expand {\n width: 48px;\n padding: var(--vtx-spacing-2);\n}\n\n.vtx-table-expand-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: transparent;\n border-radius: var(--vtx-radius-md);\n cursor: pointer;\n color: var(--vtx-color-neutral-600);\n transition: all var(--vtx-transition-fast);\n}\n\n.vtx-table-expand-button:hover {\n background-color: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-900);\n}\n\n/* Sizes */\n.vtx-table--sm .vtx-table-header-cell,\n.vtx-table--sm .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--lg .vtx-table-header-cell,\n.vtx-table--lg .vtx-table-cell {\n padding: var(--vtx-spacing-4) var(--vtx-spacing-6);\n font-size: var(--vtx-font-size-lg);\n}\n\n.vtx-table--dense .vtx-table-header-cell,\n.vtx-table--dense .vtx-table-cell {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-sm);\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.vtx-table--hoverable .vtx-table-row--selected:hover {\n background-color: var(--vtx-color-primary-100);\n}\n\n/* Clickable */\n.vtx-table--clickable .vtx-table-row {\n cursor: pointer;\n}\n\n/* Bordered */\n.vtx-table--bordered .vtx-table-cell,\n.vtx-table--bordered .vtx-table-header-cell {\n border-right: 1px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-table--bordered .vtx-table-cell:last-child,\n.vtx-table--bordered .vtx-table-header-cell:last-child {\n border-right: none;\n}\n\n/* Empty state */\n.vtx-table-empty {\n padding: var(--vtx-spacing-12) var(--vtx-spacing-4);\n text-align: center;\n color: var(--vtx-color-neutral-500);\n font-style: italic;\n}\n\n/* Loading state */\n.vtx-table-loading {\n padding: var(--vtx-spacing-12) var(--vtx-spacing-4);\n text-align: center;\n color: var(--vtx-color-neutral-600);\n}\n\n.vtx-table-loading-spinner {\n display: inline-block;\n animation: vtx-spin 1s linear infinite;\n}\n\n@keyframes vtx-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Pagination */\n.vtx-table-pagination {\n display: flex;\n align-items: center;\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n border-top: 1px solid var(--vtx-color-neutral-200);\n background-color: white;\n}\n\n.vtx-table-pagination-select {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n border: 1px solid var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-md);\n font-size: var(--vtx-font-size-sm);\n color: var(--vtx-color-neutral-900);\n background-color: white;\n cursor: pointer;\n transition: border-color var(--vtx-transition-fast);\n}\n\n.vtx-table-pagination-select:hover {\n border-color: var(--vtx-color-neutral-400);\n}\n\n.vtx-table-pagination-select:focus {\n outline: none;\n border-color: var(--vtx-color-primary-500);\n box-shadow: 0 0 0 3px var(--vtx-color-primary-100);\n}\n\n.vtx-table-pagination-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: transparent;\n border-radius: var(--vtx-radius-md);\n color: var(--vtx-color-neutral-600);\n cursor: pointer;\n transition: all var(--vtx-transition-fast);\n}\n\n.vtx-table-pagination-button:hover:not(:disabled) {\n background-color: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-900);\n}\n\n.vtx-table-pagination-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n/* Sticky columns */\n.vtx-table-cell--sticky-left,\n.vtx-table-header-cell--sticky-left {\n position: sticky;\n left: 0;\n z-index: 2;\n background-color: white;\n box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);\n}\n\n.vtx-table-cell--sticky-right,\n.vtx-table-header-cell--sticky-right {\n position: sticky;\n right: 0;\n z-index: 2;\n background-color: white;\n box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);\n}\n\n.vtx-table-header-cell--sticky-left,\n.vtx-table-header-cell--sticky-right {\n z-index: 11;\n background-color: var(--vtx-color-neutral-50);\n}\n"),ve.displayName="Table";const xe=sr(ve);vr("/* ==================== Timeline Base ==================== */\r\n.timeline {\r\n display: flex;\r\n width: 100%;\r\n position: relative;\r\n}\r\n\r\n/* ==================== Orientation ==================== */\r\n.timeline--horizontal {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n}\r\n\r\n.timeline--vertical {\r\n flex-direction: column;\r\n align-items: stretch;\r\n}\r\n\r\n/* ==================== Timeline Step ==================== */\r\n.timeline-step {\r\n display: flex;\r\n position: relative;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n}\r\n\r\n.timeline--horizontal .timeline-step {\r\n flex-direction: column;\r\n align-items: center;\r\n flex: 1 1 0;\r\n min-width: 0;\r\n position: relative;\r\n}\r\n\r\n.timeline--vertical .timeline-step {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n padding: var(--vtx-spacing-2, 8px) 0;\r\n position: relative;\r\n}\r\n\r\n/* Clickable steps */\r\n.timeline-step--clickable {\r\n cursor: pointer;\r\n}\r\n\r\n.timeline-step--clickable:hover .timeline-step-icon-wrapper {\r\n transform: scale(1.1);\r\n}\r\n\r\n/* ==================== Step Indicator ==================== */\r\n.timeline-step-indicator {\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.timeline--horizontal .timeline-step-indicator {\r\n margin-bottom: var(--vtx-spacing-2, 8px);\r\n}\r\n\r\n.timeline--vertical .timeline-step-indicator {\r\n margin-right: var(--vtx-spacing-3, 12px);\r\n align-items: flex-start;\r\n}\r\n\r\n/* ==================== Step Icon Wrapper ==================== */\r\n.timeline-step-icon-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n background: var(--vtx-color-neutral-200, #e5e5e5);\r\n color: var(--vtx-color-neutral-600, #525252);\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n flex-shrink: 0;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n/* Size variants */\r\n.timeline--sm {\r\n --icon-size: 24px;\r\n}\r\n\r\n.timeline--sm .timeline-step-icon-wrapper {\r\n width: var(--icon-size);\r\n height: var(--icon-size);\r\n}\r\n\r\n.timeline--md {\r\n --icon-size: 32px;\r\n}\r\n\r\n.timeline--md .timeline-step-icon-wrapper {\r\n width: var(--icon-size);\r\n height: var(--icon-size);\r\n}\r\n\r\n.timeline--lg {\r\n --icon-size: 40px;\r\n}\r\n\r\n.timeline--lg .timeline-step-icon-wrapper {\r\n width: var(--icon-size);\r\n height: var(--icon-size);\r\n}\r\n\r\n/* ==================== Step States ==================== */\r\n\r\n/* Completed State */\r\n.timeline-step--completed .timeline-step-icon-wrapper {\r\n background: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n.timeline-step--completed .timeline-step-label {\r\n color: var(--vtx-color-neutral-700, #404040);\r\n}\r\n\r\n/* Active State */\r\n.timeline-step--active .timeline-step-icon-wrapper {\r\n background: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n box-shadow: 0 0 0 4px var(--step-color-light, var(--vtx-color-success-100, #dcfce7));\r\n}\r\n\r\n.timeline-step--active .timeline-step-label {\r\n color: var(--vtx-color-neutral-900, #171717);\r\n}\r\n\r\n/* Pending State */\r\n.timeline-step--pending .timeline-step-icon-wrapper {\r\n background: var(--vtx-color-neutral-200, #e5e5e5);\r\n color: var(--vtx-color-neutral-500, #737373);\r\n}\r\n\r\n.timeline-step--pending .timeline-step-label {\r\n color: var(--vtx-color-neutral-500, #737373);\r\n}\r\n\r\n/* ==================== Connector Lines ==================== */\r\n.timeline-connector {\r\n background: var(--vtx-color-neutral-300, #d4d4d4);\r\n position: absolute;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n z-index: 0;\r\n}\r\n\r\n/* Horizontal connectors */\r\n.timeline--horizontal .timeline-connector {\r\n height: 3px;\r\n top: calc(var(--icon-size) / 2);\r\n transform: translateY(-50%);\r\n left: calc(50% + var(--icon-size) / 2);\r\n right: calc(-50% + var(--icon-size) / 2);\r\n width: auto;\r\n}\r\n\r\n/* Vertical connectors */\r\n.timeline--vertical .timeline-connector {\r\n width: 3px;\r\n left: calc(var(--icon-size) / 2);\r\n transform: translateX(-50%);\r\n top: calc(var(--icon-size) + var(--vtx-spacing-2, 8px));\r\n bottom: calc(-100% + var(--vtx-spacing-2, 8px));\r\n height: auto;\r\n}\r\n\r\n/* Filled/Active connector */\r\n.timeline-connector--filled {\r\n background: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n}\r\n\r\n/* ==================== Icons ==================== */\r\n.timeline-step-checkmark {\r\n width: 60%;\r\n height: 60%;\r\n}\r\n\r\n.timeline-step-number {\r\n font-size: 0.75em;\r\n font-weight: 600;\r\n line-height: 1;\r\n}\r\n\r\n.timeline-step-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: currentColor;\r\n}\r\n\r\n.timeline-step-custom-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.875em;\r\n}\r\n\r\n/* ==================== Step Content ==================== */\r\n.timeline-step-content {\r\n text-align: center;\r\n min-width: 0;\r\n}\r\n\r\n.timeline--horizontal .timeline-step-content {\r\n width: 100%;\r\n}\r\n\r\n.timeline--vertical .timeline-step-content {\r\n flex: 1;\r\n text-align: left;\r\n}\r\n\r\n.timeline-step-label {\r\n word-wrap: break-word;\r\n overflow-wrap: break-word;\r\n hyphens: auto;\r\n}\r\n\r\n.timeline--horizontal .timeline-step-label {\r\n display: block;\r\n}\r\n\r\n.timeline-step-description {\r\n margin-top: var(--vtx-spacing-1, 4px);\r\n opacity: 0.8;\r\n}\r\n\r\n/* ==================== Variants ==================== */\r\n\r\n/* Circle Variant - Larger circles */\r\n.timeline--circle .timeline-step-icon-wrapper {\r\n border: 2px solid var(--vtx-color-neutral-300, #d4d4d4);\r\n}\r\n\r\n.timeline--circle .timeline-step--completed .timeline-step-icon-wrapper,\r\n.timeline--circle .timeline-step--active .timeline-step-icon-wrapper {\r\n border-color: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n}\r\n\r\n/* Simple Variant - Minimal style */\r\n.timeline--simple .timeline-step-icon-wrapper {\r\n background: transparent;\r\n border: 2px solid var(--vtx-color-neutral-300, #d4d4d4);\r\n}\r\n\r\n.timeline--simple .timeline-step--completed .timeline-step-icon-wrapper,\r\n.timeline--simple .timeline-step--active .timeline-step-icon-wrapper {\r\n border-color: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n background: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n}\r\n\r\n/* ==================== Color Variants ==================== */\r\n.timeline--primary {\r\n --step-color: var(--vtx-color-primary-600, #2563eb);\r\n --step-color-light: var(--vtx-color-primary-100, #dbeafe);\r\n}\r\n\r\n.timeline--success {\r\n --step-color: var(--vtx-color-success-600, #16a34a);\r\n --step-color-light: var(--vtx-color-success-50, #f0fdf4);\r\n}\r\n\r\n.timeline--info {\r\n --step-color: var(--vtx-color-info-600, #2563eb);\r\n --step-color-light: var(--vtx-color-info-50, #eff6ff);\r\n}\r\n\r\n.timeline--warning {\r\n --step-color: var(--vtx-color-warning-600, #d97706);\r\n --step-color-light: var(--vtx-color-warning-50, #fffbeb);\r\n}\r\n\r\n.timeline--error {\r\n --step-color: var(--vtx-color-error-600, #dc2626);\r\n --step-color-light: var(--vtx-color-error-50, #fef2f2);\r\n}\r\n\r\n/* ==================== Responsive Design ==================== */\r\n\r\n@media (max-width: 768px) {\r\n .timeline--horizontal .timeline-step-content {\r\n font-size: 0.875rem;\r\n }\r\n\r\n .timeline--horizontal .timeline-step-label {\r\n font-size: 0.875rem;\r\n }\r\n\r\n .timeline--md {\r\n --icon-size: 28px;\r\n }\r\n\r\n .timeline--lg {\r\n --icon-size: 36px;\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .timeline--horizontal .timeline-step {\r\n min-width: 70px;\r\n }\r\n\r\n .timeline--horizontal .timeline-step-label {\r\n font-size: 0.8125rem;\r\n }\r\n\r\n .timeline-step-description {\r\n font-size: 0.6875rem;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .timeline--horizontal {\r\n overflow-x: auto;\r\n -webkit-overflow-scrolling: touch;\r\n padding-bottom: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .timeline--horizontal .timeline-step {\r\n min-width: 60px;\r\n }\r\n\r\n .timeline--horizontal .timeline-step-label {\r\n font-size: 0.75rem;\r\n line-height: 1.3;\r\n }\r\n\r\n .timeline--sm {\r\n --icon-size: 20px;\r\n }\r\n\r\n .timeline--md {\r\n --icon-size: 24px;\r\n }\r\n\r\n .timeline--lg {\r\n --icon-size: 32px;\r\n }\r\n\r\n .timeline-step-description {\r\n display: none;\r\n }\r\n\r\n .timeline--vertical .timeline-step-content {\r\n font-size: 0.875rem;\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .timeline--horizontal .timeline-step {\r\n min-width: 50px;\r\n }\r\n\r\n .timeline--horizontal .timeline-step-label {\r\n font-size: 0.6875rem;\r\n }\r\n\r\n .timeline--sm {\r\n --icon-size: 18px;\r\n }\r\n\r\n .timeline--md {\r\n --icon-size: 22px;\r\n }\r\n\r\n .timeline--lg {\r\n --icon-size: 28px;\r\n }\r\n}\r\n");const pe=({steps:e,currentStep:t,orientation:a="horizontal",variant:o="default",showCheckmarks:i=!0,color:l="success",size:c="md",className:d="",style:s})=>{const v=e.map(r=>"string"==typeof r?{label:r}:r),x=(n,e,t)=>n.icon?r("span",{className:"timeline-step-custom-icon",children:n.icon}):"completed"===t&&i?r("svg",{className:"timeline-step-checkmark",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})}):r("span","numbered"===o?{className:"timeline-step-number",children:e+1}:{className:"timeline-step-dot"});return r("div",{className:`timeline timeline--${a} timeline--${o} timeline--${l} timeline--${c} ${d}`,style:s,children:v.map((e,a)=>{const o=(r=>r<t?"completed":r===t?"active":"pending")(a),i=a===v.length-1,l=!!e.onClick,c=(r=>r<t)(a);return n("div",{className:`timeline-step timeline-step--${o} ${l?"timeline-step--clickable":""}`,onClick:()=>(r=>{r.onClick&&r.onClick()})(e),children:[r("div",{className:"timeline-step-indicator",children:r("div",{className:"timeline-step-icon-wrapper",children:x(e,a,o)})}),!i&&r("div",{className:"timeline-connector "+(c?"timeline-connector--filled":"")}),n("div",{className:"timeline-step-content",children:[r(Sn,{variant:"body2",weight:"active"===o?"semibold":"medium",noMargin:!0,className:"timeline-step-label",children:e.label}),e.description&&r(Sn,{variant:"caption",noMargin:!0,className:"timeline-step-description",children:e.description})]})]},a)})})};pe.displayName="Timeline";vr("/* 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 me=a.forwardRef(({container:n=!1,item:e=!1,spacing:t,rowSpacing:a,columnSpacing:o,xs:i,sm:l,md:c,lg:d,xl:s,justifyContent:v,alignItems:x,alignContent:p,direction:m="row",wrap:h="wrap",className:g="",children:u,style:f,...b},w)=>{const y=["vtx-grid",n&&"vtx-grid-container",e&&"vtx-grid-item",n&&void 0!==t&&`vtx-grid-spacing-${t}`,n&&void 0!==a&&`vtx-grid-row-spacing-${a}`,n&&void 0!==o&&`vtx-grid-column-spacing-${o}`,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!==d&&"vtx-grid-lg"+(!0===d?"":"auto"===d?"-auto":`-${d}`),void 0!==s&&"vtx-grid-xl"+(!0===s?"":"auto"===s?"-auto":`-${s}`),n&&"row"!==m&&`vtx-grid-direction-${m}`,n&&"wrap"!==h&&`vtx-grid-wrap-${h}`,g].filter(Boolean).join(" "),k={...f};return n&&(v&&(k.justifyContent=v),x&&(k.alignItems=x),p&&(k.alignContent=p)),r("div",{ref:w,className:y,style:Object.keys(k).length>0?k:void 0,...b,children:u})});me.displayName="Grid";const he=sr(me);vr(".infocard-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2rem;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n\r\n.infocard-icon--primary {\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n.infocard-icon--secondary {\r\n background: var(--vtx-color-secondary-100, #f3e8ff);\r\n color: var(--vtx-color-secondary-600, #7c3aed);\r\n}\r\n.infocard-icon--success {\r\n background: var(--vtx-color-success-100, #e6f4ea);\r\n color: var(--vtx-color-success-600, #388e3c);\r\n}\r\n.infocard-icon--danger {\r\n background: var(--vtx-color-danger-100, #ffebee);\r\n color: var(--vtx-color-danger-600, #d32f2f);\r\n}\r\n.infocard-icon--warning {\r\n background: var(--vtx-color-warning-100, #fff8e1);\r\n color: var(--vtx-color-warning-600, #fbc02d);\r\n}\r\n.infocard-icon--info {\r\n background: var(--vtx-color-info-100, #e3f7fc);\r\n color: var(--vtx-color-info-600, #0288d1);\r\n}\r\n");const ge=a.forwardRef(({icon:e,iconVariant:t="primary",text:a,subText:o,className:i="",style:l,...c},d)=>r(Kn,{variant:"outlined",className:i,style:l,ref:d,...c,children:n(he,{container:!0,spacing:2,alignItems:"center",wrap:"nowrap",justifyContent:"center",children:[r(he,{item:!0,xs:"auto",children:r(Nn,{align:"center",justify:"center",children:r("span",{className:`infocard-icon infocard-icon--${t}`,children:e})})}),n(he,{item:!0,xs:!0,children:[r(Sn,{variant:"caption",children:a}),o&&r(Sn,{variant:"subtitle2",children:o})]})]})}));ge.displayName="InfoCardBase";const ue=a.forwardRef(({value:e,label:t,className:a="",style:o,...i},l)=>r(Kn,{variant:"outlined",className:a,style:o,ref:l,...i,children:n(Nn,{direction:"column",align:"center",justify:"center",style:{minHeight:80},children:[r(Sn,{variant:"h4",children:e}),t&&r(Sn,{variant:"caption",children:t})]})}));ue.displayName="InfoCardMetric";const fe={Base:sr(ge),Metric:sr(ue)};vr("/* Base InfoText Styles */\r\n.infotext-base {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n.infotext-stat {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n.infotext-feature {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n.infotext-compact {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n.infotext-vertical {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n/* Icon Wrapper */\r\n.infotext-icon-wrapper {\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Plain Icon (no circle background) */\r\n.infotext-icon-plain {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n width: 40px;\r\n height: 40px;\r\n transition: all 0.2s ease-in-out;\r\n}\r\n\r\n.infotext-icon-small-plain {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n width: 24px;\r\n height: 24px;\r\n transition: all 0.2s ease-in-out;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Icon Styles */\r\n.infotext-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n transition: all 0.2s ease-in-out;\r\n}\r\n\r\n.infotext-icon--primary {\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n\r\n.infotext-icon--secondary {\r\n background: var(--vtx-color-secondary-100, #f3e8ff);\r\n color: var(--vtx-color-secondary-600, #7c3aed);\r\n}\r\n\r\n.infotext-icon--success {\r\n background: var(--vtx-color-success-100, #e6f4ea);\r\n color: var(--vtx-color-success-600, #388e3c);\r\n}\r\n\r\n.infotext-icon--danger {\r\n background: var(--vtx-color-danger-100, #ffebee);\r\n color: var(--vtx-color-danger-600, #d32f2f);\r\n}\r\n\r\n.infotext-icon--warning {\r\n background: var(--vtx-color-warning-100, #fff8e1);\r\n color: var(--vtx-color-warning-600, #fbc02d);\r\n}\r\n\r\n.infotext-icon--info {\r\n background: var(--vtx-color-info-100, #e3f7fc);\r\n color: var(--vtx-color-info-600, #0288d1);\r\n}\r\n\r\n/* Small Icon Styles for Compact Variant */\r\n.infotext-icon-small {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n transition: all 0.2s ease-in-out;\r\n flex-shrink: 0;\r\n}\r\n\r\n.infotext-icon-small--primary {\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n\r\n.infotext-icon-small--secondary {\r\n background: var(--vtx-color-secondary-100, #f3e8ff);\r\n color: var(--vtx-color-secondary-600, #7c3aed);\r\n}\r\n\r\n.infotext-icon-small--success {\r\n background: var(--vtx-color-success-100, #e6f4ea);\r\n color: var(--vtx-color-success-600, #388e3c);\r\n}\r\n\r\n.infotext-icon-small--danger {\r\n background: var(--vtx-color-danger-100, #ffebee);\r\n color: var(--vtx-color-danger-600, #d32f2f);\r\n}\r\n\r\n.infotext-icon-small--warning {\r\n background: var(--vtx-color-warning-100, #fff8e1);\r\n color: var(--vtx-color-warning-600, #fbc02d);\r\n}\r\n\r\n.infotext-icon-small--info {\r\n background: var(--vtx-color-info-100, #e3f7fc);\r\n color: var(--vtx-color-info-600, #0288d1);\r\n}\r\n\r\n/* Badge Styles */\r\n.infotext-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2px 8px;\r\n border-radius: 12px;\r\n font-size: 0.75rem;\r\n font-weight: 500;\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n\r\n/* Hover Effects (Optional) */\r\n.infotext-base:hover .infotext-icon,\r\n.infotext-stat:hover .infotext-icon,\r\n.infotext-feature:hover .infotext-icon,\r\n.infotext-vertical:hover .infotext-icon {\r\n transform: scale(1.05);\r\n}\r\n\r\n.infotext-compact:hover .infotext-icon-small {\r\n transform: scale(1.1);\r\n}\r\n");const be=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,heading:o,subText:i,className:l="",style:c,...d},s)=>n(Nn,{direction:"row",align:"center",gap:8,className:`infotext-base ${l}`,style:c,ref:s,...d,children:[r(Nn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:r("span",a?{className:`infotext-icon infotext-icon--${t}`,children:e}:{className:"infotext-icon-plain",children:e})}),n(Nn,{direction:"column",gap:4,children:[r(Sn,{variant:"body1",weight:"medium",noMargin:!0,children:o}),i&&r(Sn,{variant:"caption",color:"text-secondary",noMargin:!0,children:i})]})]}));be.displayName="InfoTextBase";const we=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,value:o,label:i,subText:l,className:c="",style:d,...s},v)=>n(Nn,{direction:"row",align:"center",gap:8,className:`infotext-stat ${c}`,style:d,ref:v,...s,children:[e&&r(Nn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:r("span",a?{className:`infotext-icon infotext-icon--${t}`,children:e}:{className:"infotext-icon-plain",children:e})}),n(Nn,{direction:"column",gap:4,children:[r(Sn,{variant:"h5",weight:"bold",noMargin:!0,children:o}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:i}),l&&r(Sn,{variant:"caption",color:"text-secondary",noMargin:!0,children:l})]})]}));we.displayName="InfoTextStat";const ye=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,title:o,description:i,badge:l,className:c="",style:d,...s},v)=>n(Nn,{direction:"row",align:"start",gap:8,className:`infotext-feature ${c}`,style:d,ref:v,...s,children:[r(Nn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:r("span",a?{className:`infotext-icon infotext-icon--${t}`,children:e}:{className:"infotext-icon-plain",children:e})}),n(Nn,{direction:"column",gap:6,style:{flex:1},children:[n(Nn,{align:"center",gap:8,children:[r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:o}),l&&r("span",{className:"infotext-badge",children:l})]}),r(Sn,{variant:"body2",color:"text-secondary",noMargin:!0,children:i})]})]}));ye.displayName="InfoTextFeature";const ke=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,text:o,className:i="",style:l,...c},d)=>n(Nn,{direction:"row",align:"center",gap:8,className:`infotext-compact ${i}`,style:l,ref:d,...c,children:[r("span",a?{className:`infotext-icon-small infotext-icon-small--${t}`,children:e}:{className:"infotext-icon-small-plain",children:e}),r(Sn,{variant:"body2",noMargin:!0,children:o})]}));ke.displayName="InfoTextCompact";const _e=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,heading:o,subText:i,className:l="",style:c,...d},s)=>n(Nn,{direction:"column",align:"center",gap:10,className:`infotext-vertical ${l}`,style:c,ref:s,...d,children:[r(Nn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:r("span",a?{className:`infotext-icon infotext-icon--${t}`,children:e}:{className:"infotext-icon-plain",children:e})}),n(Nn,{direction:"column",gap:4,align:"center",children:[r(Sn,{variant:"body1",weight:"medium",align:"center",noMargin:!0,children:o}),i&&r(Sn,{variant:"caption",color:"text-secondary",align:"center",noMargin:!0,children:i})]})]}));_e.displayName="InfoTextVertical";const ze={Base:sr(be),Stat:sr(we),Feature:sr(ye),Compact:sr(ke),Vertical:sr(_e)};vr("/* ==================== Base ProductCard ==================== */\r\n.productcard {\r\n max-width: 320px;\r\n width: 100%;\r\n border: 1px solid var(--vtx-color-neutral-200, #e0e0e0);\r\n border-radius: var(--vtx-radius-lg, 12px);\r\n position: relative;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n overflow: hidden;\r\n}\r\n\r\n.productcard:hover {\r\n box-shadow: var(--vtx-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));\r\n transform: translateY(-4px);\r\n}\r\n\r\n.productcard-image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 200px;\r\n overflow: hidden;\r\n background: linear-gradient(135deg, var(--vtx-color-primary-50, #f5f5f5), var(--vtx-color-neutral-100, #fafafa));\r\n}\r\n\r\n.productcard-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: var(--vtx-transition-slow, transform 0.4s ease);\r\n}\r\n\r\n.productcard-image-wrapper:hover .productcard-image {\r\n transform: scale(1.08);\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .productcard {\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-image-wrapper {\r\n height: 180px;\r\n }\r\n}\r\n\r\n/* Badges */\r\n.productcard-badges {\r\n position: absolute;\r\n top: 12px;\r\n left: 12px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n z-index: 2;\r\n}\r\n\r\n.productcard-featured-badge {\r\n background: linear-gradient(135deg, var(--vtx-color-primary-600, #2563eb) 0%, var(--vtx-color-secondary-600, #7c3aed) 100%);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n font-size: 11px;\r\n font-weight: 600;\r\n padding: 4px 10px;\r\n border-radius: 4px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.15));\r\n}\r\n\r\n.productcard-discount-badge {\r\n background: var(--vtx-color-error-600, #dc2626);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n font-size: 12px;\r\n font-weight: 700;\r\n padding: 4px 10px;\r\n border-radius: 4px;\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 8px rgba(220, 38, 38, 0.3));\r\n}\r\n\r\n/* Wishlist Button */\r\n.productcard-wishlist-btn {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n border: none;\r\n background: rgba(255, 255, 255, 0.95);\r\n color: var(--vtx-color-neutral-500, #737373);\r\n font-size: 1.25rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: 3;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));\r\n}\r\n\r\n.productcard-wishlist-btn:hover {\r\n background: var(--vtx-color-neutral-50, #ffffff);\r\n color: var(--vtx-color-error-600, #dc2626);\r\n transform: scale(1.1);\r\n box-shadow: var(--vtx-shadow-md, 0 4px 12px rgba(220, 38, 38, 0.2));\r\n}\r\n\r\n.productcard-wishlist-btn--active {\r\n background: var(--vtx-color-error-600, #dc2626);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n.productcard-wishlist-btn--active:hover {\r\n background: var(--vtx-color-error-700, #b91c1c);\r\n transform: scale(1.1);\r\n}\r\n\r\n/* Hover Overlay for Quick View */\r\n.productcard-hover-overlay {\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n width: 100%;\r\n background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);\r\n opacity: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-end;\r\n padding: var(--vtx-spacing-4, 16px);\r\n z-index: 2;\r\n transition: var(--vtx-transition-normal, opacity 0.3s ease);\r\n pointer-events: none;\r\n}\r\n\r\n.productcard-image-wrapper:hover .productcard-hover-overlay {\r\n opacity: 1;\r\n pointer-events: all;\r\n}\r\n\r\n/* Category Chip */\r\n.productcard-category {\r\n font-size: 12px;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n}\r\n\r\n.productcard-category:hover {\r\n background-color: var(--vtx-color-primary-600, #1976d2);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n cursor: pointer;\r\n}\r\n\r\n/* Weight/Units */\r\n.productcard-weight {\r\n font-size: 14px;\r\n color: var(--vtx-color-neutral-600, #757575);\r\n}\r\n\r\n/* Rating */\r\n.productcard-rating-wrapper {\r\n font-size: 14px;\r\n}\r\n\r\n.productcard-rating {\r\n color: var(--vtx-color-warning-500, #fbc02d);\r\n font-size: 16px;\r\n line-height: 1;\r\n letter-spacing: 1px;\r\n}\r\n\r\n/* Price */\r\n.productcard-price {\r\n color: var(--vtx-color-error-600, #dc2626);\r\n font-size: 18px;\r\n font-weight: 700;\r\n}\r\n\r\n.productcard-original-price {\r\n color: var(--vtx-color-neutral-500, #999);\r\n text-decoration: line-through;\r\n font-size: 14px;\r\n}\r\n\r\n/* Quantity Selector */\r\n.productcard-quantity-selector {\r\n border-radius: 6px;\r\n width: 100%;\r\n height: 44px;\r\n border: 1px solid var(--vtx-color-neutral-300, #ddd);\r\n}\r\n\r\n.productcard-quantity-value {\r\n text-align: center;\r\n font-size: 16px;\r\n font-weight: 600;\r\n min-width: 40px;\r\n}\r\n\r\n/* ==================== Compact ProductCard ==================== */\r\n.productcard-compact {\r\n transition: box-shadow 0.2s ease-in-out;\r\n}\r\n\r\n.productcard-compact:hover {\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.productcard-image-compact-wrapper {\r\n position: relative;\r\n width: 100px;\r\n height: 100px;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n border-radius: 8px;\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n}\r\n\r\n.productcard-image-compact {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.3s ease-in-out;\r\n}\r\n\r\n.productcard-image-compact-wrapper:hover .productcard-image-compact {\r\n transform: scale(1.05);\r\n}\r\n\r\n.productcard-badge-compact {\r\n position: absolute;\r\n top: 6px;\r\n left: 6px;\r\n z-index: 1;\r\n}\r\n\r\n.productcard-rating-compact {\r\n color: var(--vtx-color-warning-500, #fbc02d);\r\n font-size: 0.875rem;\r\n line-height: 1;\r\n}\r\n\r\n/* ==================== List ProductCard ==================== */\r\n.productcard-list {\r\n padding: 16px;\r\n border-bottom: 1px solid var(--vtx-color-neutral-200, #e0e0e0);\r\n transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n.productcard-list:hover {\r\n background-color: var(--vtx-color-neutral-50, #fafafa);\r\n}\r\n\r\n.productcard-image-list-wrapper {\r\n position: relative;\r\n width: 120px;\r\n height: 120px;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n border-radius: 8px;\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n}\r\n\r\n.productcard-image-list {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.productcard-badge-list {\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n z-index: 1;\r\n}\r\n\r\n.productcard-quantity-btn {\r\n width: 32px;\r\n height: 32px;\r\n border: 1px solid var(--vtx-color-neutral-300, #d0d0d0);\r\n border-radius: 4px;\r\n background-color: var(--vtx-color-neutral-50, #fafafa);\r\n color: var(--vtx-color-text-primary, #212121);\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease-in-out;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.productcard-quantity-btn:hover {\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n border-color: var(--vtx-color-neutral-400, #bdbdbd);\r\n}\r\n\r\n.productcard-quantity-btn:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n/* ==================== Featured ProductCard ==================== */\r\n.productcard-featured {\r\n max-width: 100%;\r\n transition: box-shadow 0.2s ease-in-out;\r\n}\r\n\r\n.productcard-featured:hover {\r\n box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.productcard-image-featured-wrapper {\r\n position: relative;\r\n width: 300px;\r\n height: 300px;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n}\r\n\r\n.productcard-image-featured {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.3s ease-in-out;\r\n}\r\n\r\n.productcard-image-featured-wrapper:hover .productcard-image-featured {\r\n transform: scale(1.05);\r\n}\r\n\r\n.productcard-badge-featured {\r\n position: absolute;\r\n top: 16px;\r\n left: 16px;\r\n z-index: 1;\r\n}\r\n\r\n.productcard-rating-large {\r\n color: var(--vtx-color-warning-500, #fbc02d);\r\n font-size: 1.25rem;\r\n line-height: 1;\r\n}\r\n\r\n.productcard-feature-bullet {\r\n color: var(--vtx-color-success-600, #388e3c);\r\n font-size: 1.125rem;\r\n font-weight: bold;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ==================== Wide Variant (Horizontal Layout) ==================== */\r\n.productcard-wide {\r\n max-width: 100%;\r\n width: 100%;\r\n border: 1px solid var(--vtx-color-neutral-200, #e0e0e0);\r\n border-radius: var(--vtx-radius-lg, 12px);\r\n overflow: hidden;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n display: flex;\r\n}\r\n\r\n.productcard-wide:hover {\r\n box-shadow: var(--vtx-shadow-lg, 0 6px 20px rgba(0, 0, 0, 0.1));\r\n transform: translateY(-2px);\r\n}\r\n\r\n.productcard-wide-image-wrapper {\r\n position: relative;\r\n width: 240px;\r\n height: 100%;\r\n min-height: 200px;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n background: linear-gradient(135deg, var(--vtx-color-primary-50, #f5f5f5), var(--vtx-color-neutral-100, #fafafa));\r\n}\r\n\r\n.productcard-wide-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: var(--vtx-transition-slow, transform 0.4s ease);\r\n}\r\n\r\n.productcard-wide-image-wrapper:hover .productcard-wide-image {\r\n transform: scale(1.06);\r\n}\r\n\r\n/* Wide variant rating */\r\n.productcard-wide .productcard-rating {\r\n font-size: 18px;\r\n letter-spacing: 2px;\r\n}\r\n\r\n/* Wide variant cart actions */\r\n.productcard-wide .productcard-quantity-selector {\r\n width: 100%;\r\n height: 44px;\r\n}\r\n\r\n/* Wide variant content padding adjustments */\r\n.productcard-wide .productcard-category {\r\n font-size: 12px;\r\n padding: 4px 12px;\r\n}\r\n\r\n.productcard-wide .productcard-price {\r\n font-size: 24px;\r\n}\r\n\r\n/* ==================== Minimal Variant ==================== */\r\n.productcard-minimal {\r\n max-width: 240px;\r\n position: relative;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n}\r\n\r\n.productcard-minimal:hover {\r\n transform: translateY(-2px);\r\n}\r\n\r\n.productcard-minimal-image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 240px;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n background: linear-gradient(135deg, var(--vtx-color-primary-50, #f5f5f5), var(--vtx-color-neutral-100, #fafafa));\r\n margin-bottom: 12px;\r\n}\r\n\r\n.productcard-minimal-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: var(--vtx-transition-slow, transform 0.4s ease);\r\n}\r\n\r\n.productcard-minimal-image-wrapper:hover .productcard-minimal-image {\r\n transform: scale(1.08);\r\n}\r\n\r\n.productcard-minimal-discount {\r\n position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n background: var(--vtx-color-error-600, #dc2626);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n font-size: 11px;\r\n font-weight: 700;\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 6px rgba(220, 38, 38, 0.3));\r\n z-index: 2;\r\n}\r\n\r\n.productcard-minimal-wishlist {\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n border: none;\r\n background: rgba(255, 255, 255, 0.95);\r\n color: var(--vtx-color-neutral-500, #737373);\r\n font-size: 1.1rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: 3;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.1));\r\n}\r\n\r\n.productcard-minimal-wishlist:hover {\r\n background: var(--vtx-color-neutral-50, #ffffff);\r\n color: var(--vtx-color-error-600, #dc2626);\r\n transform: scale(1.1);\r\n}\r\n\r\n.productcard-minimal-wishlist--active {\r\n background: var(--vtx-color-error-600, #dc2626);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n.productcard-rating-minimal {\r\n color: var(--vtx-color-warning-500, #fbc02d);\r\n font-size: 15px;\r\n line-height: 1;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.productcard-quantity-selector-minimal {\r\n height: 36px;\r\n border-radius: 6px;\r\n border: 1px solid var(--vtx-color-neutral-300, #ddd);\r\n padding: 0 8px;\r\n}\r\n\r\n/* ==================== Responsive ==================== */\r\n\r\n/* Tablet and below */\r\n@media (max-width: 768px) {\r\n .productcard {\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-featured {\r\n flex-direction: column !important;\r\n }\r\n \r\n .productcard-image-featured-wrapper {\r\n width: 100%;\r\n max-width: 100%;\r\n height: 250px;\r\n }\r\n \r\n .productcard-wide {\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-wide > div {\r\n flex-direction: column !important;\r\n }\r\n \r\n .productcard-wide-image-wrapper {\r\n width: 100%;\r\n height: 220px;\r\n min-height: 220px;\r\n }\r\n \r\n .productcard-wide .productcard-rating {\r\n font-size: 16px;\r\n letter-spacing: 1.5px;\r\n }\r\n \r\n .productcard-wide .productcard-quantity-selector {\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-wide .productcard-price {\r\n font-size: 22px;\r\n }\r\n \r\n .productcard-minimal {\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-minimal-image-wrapper {\r\n height: 220px;\r\n }\r\n}\r\n\r\n/* Mobile */\r\n@media (max-width: 480px) {\r\n .productcard-image-wrapper {\r\n height: 180px;\r\n }\r\n \r\n .productcard-wide-image-wrapper {\r\n height: 200px;\r\n min-height: 200px;\r\n }\r\n \r\n .productcard-image-featured-wrapper {\r\n height: 200px;\r\n }\r\n \r\n .productcard-minimal-image-wrapper {\r\n height: 200px;\r\n }\r\n \r\n .productcard-image-list-wrapper {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n \r\n .productcard-rating {\r\n font-size: 15px;\r\n }\r\n \r\n .productcard-wide .productcard-rating {\r\n font-size: 15px;\r\n }\r\n}\r\n\r\n/* Small mobile */\r\n@media (max-width: 375px) {\r\n .productcard-image-wrapper {\r\n height: 160px;\r\n }\r\n \r\n .productcard-wide-image-wrapper {\r\n height: 180px;\r\n min-height: 180px;\r\n }\r\n \r\n .productcard-image-featured-wrapper {\r\n height: 180px;\r\n }\r\n \r\n .productcard-minimal-image-wrapper {\r\n height: 180px;\r\n }\r\n \r\n .productcard-rating {\r\n font-size: 14px;\r\n }\r\n}\r\n");const Ne=a.forwardRef(({id:e,image:t,imageAlt:a="Product",category:o,name:i,weight:l,units:c,price:s,originalPrice:v,discount:x,rating:p,initialQuantity:m=0,featured:h=!1,featuredText:g="Featured",showWishlist:u=!1,isWishlisted:f=!1,cartIcon:b,wishlistIcon:w,wishlistFilledIcon:y,quickViewIcon:k,onAddToCart:_,onIncrementCart:z,onDecrementCart:N,onWishlist:C,onQuickView:S,onClick:M,loading:T=!1,className:$="",style:I,...j},A)=>{const[D,L]=d(m),[B,E]=d(!1),R=B||T;return r(Kn,{variant:"outlined",className:`productcard ${$}`,style:{padding:0,...I},ref:A,...j,children:n(Nn,{direction:"column",children:[n("div",{className:"productcard-image-wrapper",onClick:M,style:{cursor:M?"pointer":"default"},children:[r("img",{src:t,alt:a,className:"productcard-image"}),n("div",{className:"productcard-badges",children:[h&&r("span",{className:"productcard-featured-badge",children:g}),x&&r("span",{className:"productcard-discount-badge",children:x})]}),u&&C&&r("button",{className:"productcard-wishlist-btn "+(f?"productcard-wishlist-btn--active":""),onClick:r=>{r.stopPropagation(),C()},"aria-label":f?"Remove from wishlist":"Add to wishlist",children:f?y||w||"♥":w||"♡"}),S&&r("div",{className:"productcard-hover-overlay",children:r(pr,{variant:"secondary",size:"sm",leftIcon:k||"👁",onClick:r=>{r.stopPropagation(),S()},children:"Quick View"})})]}),n(Nn,{direction:"column",gap:5,style:{padding:"12px"},children:[o&&r("div",{style:{display:"inline-flex",alignSelf:"flex-start"},children:r(sn,{label:o,variant:"outlined",className:"productcard-category"})}),r(Sn,{variant:"body1",noMargin:!0,onClick:M,style:{cursor:M?"pointer":"default"},children:i}),(void 0!==l||c)&&r(Sn,{variant:"body1",noMargin:!0,className:"productcard-weight",children:void 0!==l&&c?`${l} ${c}`:void 0!==l?l:"-"}),void 0!==p&&n(Nn,{align:"center",gap:5,className:"productcard-rating-wrapper",children:[n("div",{className:"productcard-rating",children:["★".repeat(Math.floor(p)),"☆".repeat(5-Math.floor(p))]}),r(Sn,{variant:"caption",noMargin:!0,children:p})]}),n(Nn,{align:"center",gap:8,children:[n(Sn,{variant:"h5",noMargin:!0,className:"productcard-price",children:["$",Number(s).toFixed(2)]}),v&&v>s&&n(Sn,{variant:"body2",noMargin:!0,className:"productcard-original-price",children:["$",Number(v).toFixed(2)]})]}),R?r(pr,{fullWidth:!0,loading:!0,variant:"primary",children:"Loading"}):0===D?r(pr,{fullWidth:!0,variant:"primary",leftIcon:b,onClick:async()=>{if(_){E(!0);try{await _(e,1),L(1)}catch(r){console.error("Add to cart error:",r)}finally{E(!1)}}},children:"Add to cart"}):n(Nn,{align:"center",direction:"row",justify:"between",className:"productcard-quantity-selector",children:[r(pr,{variant:"secondary",onClick:async()=>{if(N&&!(D<=0)){E(!0);try{await N(e,D),L(D-1)}catch(r){console.error("Decrement error:",r)}finally{E(!1)}}},children:"-"}),r(Sn,{noMargin:!0,className:"productcard-quantity-value",children:D}),r(pr,{variant:"secondary",onClick:async()=>{if(z){E(!0);try{await z(e,D),L(D+1)}catch(r){console.error("Increment error:",r)}finally{E(!1)}}},children:"+"})]})]})]})})});Ne.displayName="ProductCardBase";const Ce=a.forwardRef(({imagePosition:e="left",...t},a)=>{const{id:o,image:i,imageAlt:l="Product",category:c,name:s,weight:v,units:x,price:p,originalPrice:m,discount:h,rating:g,initialQuantity:u=0,featured:f=!1,featuredText:b="Featured",showWishlist:w=!1,isWishlisted:y=!1,cartIcon:k,wishlistIcon:_,wishlistFilledIcon:z,quickViewIcon:N,onAddToCart:C,onIncrementCart:S,onDecrementCart:M,onWishlist:T,onQuickView:$,onClick:I,loading:j=!1,className:A="",style:D}=t,[L,B]=d(u),[E,R]=d(!1),O=E||j;return r(Kn,{variant:"outlined",className:`productcard-wide ${A}`,style:{padding:0,...D},ref:a,children:n(Nn,{direction:"left"===e?"row":"row-reverse",children:[n("div",{className:"productcard-wide-image-wrapper",onClick:I,style:{cursor:I?"pointer":"default"},children:[r("img",{src:i,alt:l,className:"productcard-wide-image"}),n("div",{className:"productcard-badges",children:[f&&r("span",{className:"productcard-featured-badge",children:b}),h&&r("span",{className:"productcard-discount-badge",children:h})]}),w&&T&&r("button",{className:"productcard-wishlist-btn "+(y?"productcard-wishlist-btn--active":""),onClick:r=>{r.stopPropagation(),T()},children:y?z||_||"♥":_||"♡"})]}),n(Nn,{direction:"column",gap:12,style:{padding:"16px 20px",flex:1,minWidth:0},children:[c&&r("div",{style:{display:"inline-flex",alignSelf:"flex-start"},children:r(sn,{label:c,variant:"outlined",className:"productcard-category"})}),n(Nn,{direction:"column",gap:6,children:[r(Sn,{variant:"h5",weight:"bold",noMargin:!0,onClick:I,style:{cursor:I?"pointer":"default",wordBreak:"break-word"},children:s}),(void 0!==v||x)&&r(Sn,{variant:"body2",noMargin:!0,className:"productcard-weight",children:void 0!==v&&x?`${v} ${x}`:void 0!==v?v:"-"})]}),void 0!==g&&n(Nn,{align:"center",gap:6,children:[n("div",{className:"productcard-rating",children:["★".repeat(Math.floor(g)),"☆".repeat(5-Math.floor(g))]}),r(Sn,{variant:"caption",noMargin:!0,children:g})]}),n(Nn,{align:"center",gap:8,wrap:"wrap",style:{marginTop:"auto"},children:[n(Sn,{variant:"h4",weight:"bold",noMargin:!0,className:"productcard-price",children:["$",Number(p).toFixed(2)]}),m&&m>p&&n(Sn,{variant:"body1",noMargin:!0,className:"productcard-original-price",children:["$",Number(m).toFixed(2)]})]}),n(Nn,{gap:12,align:"center",direction:"row",wrap:"wrap",children:[r("div",{style:{flex:"1 1 auto",minWidth:"140px"},children:O?r(pr,{fullWidth:!0,loading:!0,variant:"primary",children:"Loading"}):0===L?r(pr,{fullWidth:!0,variant:"primary",leftIcon:k,onClick:async()=>{if(C){R(!0);try{await C(o,1),B(1)}catch(r){console.error("Add to cart error:",r)}finally{R(!1)}}},children:"Add to cart"}):n(Nn,{align:"center",direction:"row",justify:"between",className:"productcard-quantity-selector",children:[r(pr,{variant:"secondary",onClick:async()=>{if(M&&!(L<=0)){R(!0);try{await M(o,L),B(L-1)}catch(r){console.error("Decrement error:",r)}finally{R(!1)}}},children:"-"}),r(Sn,{noMargin:!0,className:"productcard-quantity-value",children:L}),r(pr,{variant:"primary",onClick:async()=>{if(S){R(!0);try{await S(o,L),B(L+1)}catch(r){console.error("Increment error:",r)}finally{R(!1)}}},children:"+"})]})}),$&&r(pr,{variant:"outline",size:"md",leftIcon:N||"👁",onClick:$,children:"View"})]})]})]})})});Ce.displayName="ProductCardWide";const Se=a.forwardRef((e,t)=>{const{id:a,image:o,imageAlt:i="Product",name:l,price:c,originalPrice:s,discount:v,rating:x,initialQuantity:p=0,showWishlist:m=!1,isWishlisted:h=!1,cartIcon:g,wishlistIcon:u,wishlistFilledIcon:f,onAddToCart:b,onIncrementCart:w,onDecrementCart:y,onWishlist:k,onClick:_,loading:z=!1,className:N="",style:C}=e,[S,M]=d(p),[T,$]=d(!1),I=T||z;return n("div",{className:`productcard-minimal ${N}`,style:C,ref:t,children:[n("div",{className:"productcard-minimal-image-wrapper",onClick:_,style:{cursor:_?"pointer":"default"},children:[r("img",{src:o,alt:i,className:"productcard-minimal-image"}),v&&r("span",{className:"productcard-minimal-discount",children:v}),m&&k&&r("button",{className:"productcard-minimal-wishlist "+(h?"productcard-minimal-wishlist--active":""),onClick:r=>{r.stopPropagation(),k()},children:h?f||u||"♥":u||"♡"})]}),n(Nn,{direction:"column",gap:8,style:{padding:"12px 0"},children:[r(Sn,{variant:"body1",weight:"medium",noMargin:!0,onClick:_,style:{cursor:_?"pointer":"default"},children:l}),n(Nn,{align:"center",gap:8,children:[n(Sn,{variant:"h6",weight:"bold",noMargin:!0,className:"productcard-price",children:["$",Number(c).toFixed(2)]}),s&&s>c&&n(Sn,{variant:"caption",noMargin:!0,className:"productcard-original-price",children:["$",Number(s).toFixed(2)]})]}),void 0!==x&&n("div",{className:"productcard-rating-minimal",children:["★".repeat(Math.floor(x)),"☆".repeat(5-Math.floor(x))]}),I?r(pr,{loading:!0,variant:"primary",size:"sm",children:"Loading"}):0===S?r(pr,{variant:"primary",size:"sm",leftIcon:g,onClick:async()=>{if(b){$(!0);try{await b(a,1),M(1)}catch(r){console.error("Add to cart error:",r)}finally{$(!1)}}},fullWidth:!0,children:"Add"}):n(Nn,{align:"center",justify:"between",className:"productcard-quantity-selector-minimal",children:[r(pr,{variant:"secondary",size:"sm",onClick:async()=>{if(y&&!(S<=0)){$(!0);try{await y(a,S),M(S-1)}catch(r){console.error("Decrement error:",r)}finally{$(!1)}}},children:"-"}),r(Sn,{variant:"body2",noMargin:!0,weight:"medium",children:S}),r(pr,{variant:"primary",size:"sm",onClick:async()=>{if(w){$(!0);try{await w(a,S),M(S+1)}catch(r){console.error("Increment error:",r)}finally{$(!1)}}},children:"+"})]})]})]})});Se.displayName="ProductCardMinimal";const Me={Base:sr(Ne),Wide:sr(Ce),Minimal:sr(Se)};vr("/* ==================== Order Card ==================== */\r\n.ordercard {\r\n width: 100%;\r\n max-width: 100%;\r\n padding: var(--vtx-spacing-3, 12px);\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n cursor: pointer;\r\n}\r\n\r\n.ordercard:hover {\r\n box-shadow: var(--vtx-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));\r\n transform: translateY(-2px);\r\n}\r\n\r\n/* Header Section */\r\n.ordercard-header {\r\n padding-bottom: var(--vtx-spacing-2, 8px);\r\n margin-bottom: var(--vtx-spacing-2, 8px);\r\n border-bottom: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n}\r\n\r\n/* Image Wrapper */\r\n.ordercard-image-wrapper {\r\n width: 56px;\r\n height: 56px;\r\n flex-shrink: 0;\r\n border-radius: var(--vtx-radius-md, 8px);\r\n overflow: hidden;\r\n background: var(--vtx-color-neutral-100, #f5f5f5);\r\n}\r\n\r\n.ordercard-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n/* Product Name */\r\n.ordercard-product-name {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n line-height: 1.5;\r\n word-break: break-word;\r\n color: var(--vtx-color-neutral-800, #262626);\r\n}\r\n\r\n/* More Items Text */\r\n.ordercard-more-items {\r\n opacity: 0.8;\r\n}\r\n\r\n/* Delivery Date */\r\n.ordercard-delivery {\r\n opacity: 0.85;\r\n}\r\n\r\n/* Price */\r\n.ordercard-price {\r\n color: var(--vtx-color-neutral-900, #171717);\r\n font-size: 1.125rem;\r\n}\r\n\r\n/* Track Button */\r\n.ordercard-track-btn {\r\n flex-shrink: 0;\r\n min-width: 110px;\r\n}\r\n\r\n/* Content Section */\r\n.ordercard-content {\r\n align-items: flex-start;\r\n padding: var(--vtx-spacing-2, 8px) 0;\r\n}\r\n\r\n/* Footer Section */\r\n.ordercard-footer {\r\n padding-top: var(--vtx-spacing-2, 8px);\r\n margin-top: var(--vtx-spacing-2, 8px);\r\n border-top: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n}\r\n\r\n/* ==================== Responsive Design ==================== */\r\n\r\n/* Tablet and below */\r\n@media (max-width: 768px) {\r\n .ordercard {\r\n padding: var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .ordercard-image-wrapper {\r\n width: 52px;\r\n height: 52px;\r\n }\r\n\r\n .ordercard-track-btn {\r\n min-width: 100px;\r\n }\r\n}\r\n\r\n/* Mobile */\r\n@media (max-width: 480px) {\r\n .ordercard {\r\n padding: var(--vtx-spacing-2, 8px) var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .ordercard-image-wrapper {\r\n width: 48px;\r\n height: 48px;\r\n }\r\n\r\n .ordercard-content {\r\n padding: var(--vtx-spacing-1, 4px) 0;\r\n }\r\n\r\n .ordercard-footer {\r\n flex-direction: column;\r\n align-items: stretch !important;\r\n gap: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .ordercard-track-btn {\r\n width: 100%;\r\n min-width: unset;\r\n }\r\n\r\n .ordercard-price {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n/* Small mobile - very compact */\r\n@media (max-width: 375px) {\r\n .ordercard {\r\n padding: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .ordercard-image-wrapper {\r\n width: 46px;\r\n height: 46px;\r\n }\r\n\r\n .ordercard-header {\r\n padding-bottom: var(--vtx-spacing-1, 4px);\r\n margin-bottom: var(--vtx-spacing-1, 4px);\r\n }\r\n\r\n .ordercard-content {\r\n gap: var(--vtx-spacing-2, 8px);\r\n }\r\n}\r\n\r\n/* ==================== Long Text Handling ==================== */\r\n\r\n/* Ensure long text doesn't break layout */\r\n.ordercard * {\r\n min-width: 0;\r\n}\r\n\r\n/* Status badge should not wrap */\r\n.ordercard .vtx-badge {\r\n flex-shrink: 0;\r\n white-space: nowrap;\r\n}\r\n\r\n/* ==================== Print Styles ==================== */\r\n@media print {\r\n .ordercard {\r\n box-shadow: none !important;\r\n border: 1px solid var(--vtx-color-neutral-300, #d4d4d4);\r\n }\r\n\r\n .ordercard:hover {\r\n transform: none;\r\n }\r\n\r\n .ordercard-track-btn {\r\n display: none;\r\n }\r\n}\r\n");const Te=a.forwardRef(({orderId:e,orderNumber:t,status:a="pending",statusText:o,items:i,deliveryDate:l,deliveryLabel:c="Delivered on",totalAmount:d,currency:s="₹",onTrackOrder:v,onViewDetails:x,trackButtonText:p="Track Order",className:m="",style:h,...g},u)=>{const f=i[0],b=i.length-1;return r(Kn,{variant:"outlined",className:`ordercard ${m}`,style:h,onClick:x?()=>x(e):void 0,ref:u,...g,children:n(Nn,{direction:"column",gap:0,children:[n(Nn,{align:"center",justify:"between",wrap:"wrap",gap:8,className:"ordercard-header",children:[r(Sn,{variant:"body1",weight:"semibold",noMargin:!0,children:t||`Order #${e}`}),r(Xn,{variant:(()=>{switch(a){case"delivered":return"success";case"cancelled":return"error";case"processing":case"shipped":return"info";case"pending":return"warning";default:return"neutral"}})(),children:o||a.charAt(0).toUpperCase()+a.slice(1)})]}),n(Nn,{direction:"row",gap:10,className:"ordercard-content",children:[f.image&&r("div",{className:"ordercard-image-wrapper",children:r("img",{src:f.image,alt:f.name,className:"ordercard-image"})}),n(Nn,{direction:"column",gap:2,style:{flex:1,minWidth:0},children:[n(Sn,{variant:"body2",weight:"medium",noMargin:!0,className:"ordercard-product-name",children:[f.name,f.quantity&&f.quantity>1&&` × ${f.quantity}`]}),b>0&&n(Sn,{variant:"caption",noMargin:!0,className:"ordercard-more-items",children:["+ ",b," more ",1===b?"item":"items"]})]})]}),n(Nn,{direction:"row",align:"center",justify:"between",wrap:"wrap",gap:8,className:"ordercard-footer",children:[n(Nn,{direction:"column",gap:2,style:{flex:"1 1 auto",minWidth:"140px"},children:[l&&n(Sn,{variant:"caption",noMargin:!0,className:"ordercard-delivery",children:[c,": ",l]}),n(Sn,{variant:"body1",weight:"bold",noMargin:!0,className:"ordercard-price",children:[s,d.toLocaleString()]})]}),v&&r(pr,{variant:"primary",size:"sm",onClick:r=>{null==r||r.stopPropagation(),v(e)},className:"ordercard-track-btn",children:p})]})]})})});Te.displayName="OrderCard";const $e=sr(Te);vr("/* ==================== Info List Card ==================== */\r\n.info-list-card {\r\n padding: var(--vtx-spacing-4, 16px);\r\n width: 100%;\r\n max-width: 100%;\r\n}\r\n\r\n.info-list-card--compact {\r\n padding: var(--vtx-spacing-3, 12px);\r\n}\r\n\r\n/* ==================== Heading ==================== */\r\n.info-list-card-heading {\r\n color: var(--vtx-color-neutral-900, #171717);\r\n line-height: 1.3;\r\n word-break: break-word;\r\n}\r\n\r\n/* ==================== Items Container ==================== */\r\n.info-list-card-items {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-3, 12px);\r\n}\r\n\r\n.info-list-card--compact .info-list-card-items {\r\n gap: var(--vtx-spacing-2, 8px);\r\n}\r\n\r\n/* ==================== Individual Item ==================== */\r\n.info-list-card-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-4, 16px);\r\n min-height: 24px;\r\n}\r\n\r\n/* ==================== Label ==================== */\r\n.info-list-card-label {\r\n color: var(--vtx-color-neutral-600, #525252);\r\n flex: 0 0 auto;\r\n max-width: 50%;\r\n word-break: break-word;\r\n line-height: 1.5;\r\n}\r\n\r\n/* ==================== Value ==================== */\r\n.info-list-card-value {\r\n color: var(--vtx-color-neutral-900, #171717);\r\n text-align: right;\r\n flex: 1 1 auto;\r\n word-break: break-word;\r\n line-height: 1.5;\r\n min-width: 0;\r\n}\r\n\r\n/* ==================== Value Variants ==================== */\r\n.info-list-card-value.value-primary {\r\n color: var(--vtx-color-primary-600, #2563eb);\r\n}\r\n\r\n.info-list-card-value.value-success {\r\n color: var(--vtx-color-success-600, #16a34a);\r\n}\r\n\r\n.info-list-card-value.value-warning {\r\n color: var(--vtx-color-warning-600, #d97706);\r\n}\r\n\r\n.info-list-card-value.value-error {\r\n color: var(--vtx-color-error-600, #dc2626);\r\n}\r\n\r\n.info-list-card-value.value-muted {\r\n color: var(--vtx-color-neutral-500, #737373);\r\n}\r\n\r\n.info-list-card-value.value-bold {\r\n font-weight: var(--vtx-font-weight-semibold, 600);\r\n}\r\n\r\n.info-list-card-value.value-large {\r\n font-size: 1.125rem;\r\n font-weight: var(--vtx-font-weight-bold, 700);\r\n}\r\n\r\n/* ==================== Responsive Design ==================== */\r\n\r\n/* Tablet */\r\n@media (max-width: 768px) {\r\n .info-list-card {\r\n padding: var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .info-list-card-item {\r\n gap: var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .info-list-card-label {\r\n max-width: 45%;\r\n font-size: 0.875rem;\r\n }\r\n\r\n .info-list-card-value {\r\n font-size: 0.875rem;\r\n }\r\n}\r\n\r\n/* Mobile */\r\n@media (max-width: 480px) {\r\n .info-list-card {\r\n padding: var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .info-list-card--compact {\r\n padding: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .info-list-card-items {\r\n gap: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .info-list-card--compact .info-list-card-items {\r\n gap: var(--vtx-spacing-1, 4px);\r\n }\r\n\r\n .info-list-card-item {\r\n gap: var(--vtx-spacing-2, 8px);\r\n min-height: 20px;\r\n }\r\n\r\n .info-list-card-label {\r\n max-width: 48%;\r\n font-size: 0.8125rem;\r\n }\r\n\r\n .info-list-card-value {\r\n font-size: 0.8125rem;\r\n }\r\n\r\n .info-list-card-value.value-large {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n/* Small Mobile */\r\n@media (max-width: 375px) {\r\n .info-list-card-item {\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1, 4px);\r\n align-items: stretch;\r\n }\r\n\r\n .info-list-card-label {\r\n max-width: 100%;\r\n }\r\n\r\n .info-list-card-value {\r\n text-align: left;\r\n }\r\n}\r\n\r\n/* ==================== Long Text Handling ==================== */\r\n\r\n/* Ensure long text doesn't break layout */\r\n.info-list-card-item * {\r\n min-width: 0;\r\n overflow-wrap: break-word;\r\n word-wrap: break-word;\r\n hyphens: auto;\r\n}\r\n\r\n/* ==================== Print Styles ==================== */\r\n@media print {\r\n .info-list-card {\r\n box-shadow: none !important;\r\n border: 1px solid var(--vtx-color-neutral-300, #d4d4d4);\r\n page-break-inside: avoid;\r\n }\r\n\r\n .info-list-card-item {\r\n page-break-inside: avoid;\r\n }\r\n}\r\n");const Ie=a.forwardRef(({heading:t,items:o,showDividers:i=!1,compact:l=!1,variant:c="outlined",className:d="",style:s,...v},x)=>{const p=o.filter(r=>!r.hidden);return n(Kn,{variant:"flat"===c?"filled":c,className:`info-list-card ${l?"info-list-card--compact":""} ${d}`,style:s,ref:x,...v,children:[t&&n(e,{children:[r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,className:"info-list-card-heading",children:t}),r(te,{style:{margin:"12px 0 16px 0"}})]}),r("div",{className:"info-list-card-items",children:p.map((e,t)=>n(a.Fragment,{children:[n("div",{className:"info-list-card-item",children:[r("div",{className:`info-list-card-label ${e.labelClass||""}`,children:"string"==typeof e.label?r(Sn,{variant:"body2",noMargin:!0,children:e.label}):e.label}),r("div",{className:`info-list-card-value ${e.valueClass||""}`,children:"string"==typeof e.value||"number"==typeof e.value?r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:e.value}):e.value})]}),i&&t<p.length-1&&r(te,{style:{margin:l?"8px 0":"12px 0"}})]},t))})]})});Ie.displayName="InfoListCard";const je=sr(Ie);vr(".orderconfirmation {\r\n width: 100%;\r\n max-width: 100%;\r\n}\r\n\r\n/* Header */\r\n.orderconfirmation-header {\r\n background: linear-gradient(135deg, var(--vtx-color-success-50) 0%, var(--vtx-color-success-100) 100%);\r\n border: 1px solid var(--vtx-color-success-200);\r\n padding: var(--vtx-spacing-6);\r\n}\r\n\r\n.orderconfirmation-success-icon {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-success-500);\r\n color: var(--vtx-color-white);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 32px;\r\n font-weight: bold;\r\n box-shadow: var(--vtx-shadow-md);\r\n}\r\n\r\n.orderconfirmation-subtitle {\r\n color: var(--vtx-color-neutral-600);\r\n max-width: 400px;\r\n}\r\n\r\n/* Items Card */\r\n.orderconfirmation-items-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderconfirmation-item {\r\n width: 100%;\r\n}\r\n\r\n.orderconfirmation-item-image-wrapper {\r\n width: 64px;\r\n height: 64px;\r\n flex-shrink: 0;\r\n border-radius: var(--vtx-radius-md);\r\n overflow: hidden;\r\n background: var(--vtx-color-neutral-100);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.orderconfirmation-item-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.orderconfirmation-item-name {\r\n color: var(--vtx-color-neutral-900);\r\n word-break: break-word;\r\n overflow-wrap: break-word;\r\n hyphens: auto;\r\n}\r\n\r\n.orderconfirmation-item-variant {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.orderconfirmation-item-unit-price {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n/* Summary Card */\r\n.orderconfirmation-summary-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderconfirmation-discount {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n.orderconfirmation-total {\r\n color: var(--vtx-color-primary-600);\r\n font-size: 1.125rem;\r\n}\r\n\r\n/* Address Card */\r\n.orderconfirmation-address-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderconfirmation-address {\r\n color: var(--vtx-color-neutral-700);\r\n line-height: 1.6;\r\n}\r\n\r\n.orderconfirmation-address-name {\r\n font-weight: 600;\r\n color: var(--vtx-color-neutral-900);\r\n margin-bottom: 4px;\r\n}\r\n\r\n/* Actions Card */\r\n.orderconfirmation-actions-card {\r\n padding: var(--vtx-spacing-4);\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n/* Help Card */\r\n.orderconfirmation-help-card {\r\n padding: var(--vtx-spacing-3);\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.orderconfirmation-help-text {\r\n color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.orderconfirmation-help-email {\r\n color: var(--vtx-color-neutral-600);\r\n font-weight: 500;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 640px) {\r\n .orderconfirmation-header {\r\n padding: var(--vtx-spacing-4);\r\n }\r\n\r\n .orderconfirmation-success-icon {\r\n width: 48px;\r\n height: 48px;\r\n font-size: 28px;\r\n }\r\n\r\n .orderconfirmation-items-card,\r\n .orderconfirmation-summary-card,\r\n .orderconfirmation-address-card {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .orderconfirmation-item-image-wrapper {\r\n width: 56px;\r\n height: 56px;\r\n }\r\n\r\n .orderconfirmation-item {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .orderconfirmation-total {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .orderconfirmation-success-icon {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 24px;\r\n }\r\n\r\n .orderconfirmation-item-image-wrapper {\r\n width: 48px;\r\n height: 48px;\r\n }\r\n}\r\n");const Ae=a.forwardRef(({orderId:t,orderNumber:a,orderDate:o,status:i="confirmed",statusText:l,headerText:c="Order Confirmed!",headerSubtitle:d="Thank you for your order. We'll send you a confirmation email shortly.",customerEmail:s,customerPhone:v,shippingAddress:x,billingAddress:p,items:m,subtotal:h,shippingCost:g=0,tax:u=0,discount:f=0,total:b,currency:w="₹",paymentMethod:y,transactionId:k,estimatedDelivery:_,trackingNumber:z,onDownloadInvoice:N,onContinueShopping:C,onTrackOrder:S,onViewDetails:M,onContactSupport:T,onShareOrder:$,downloadInvoiceText:I="Download Invoice",continueShoppingText:j="Continue Shopping",trackOrderText:A="Track Order",viewDetailsText:D="View Details",contactSupportText:L="Contact Support",shareOrderText:B="Share",showActions:E=!0,hideDownloadInvoice:R=!1,hideContinueShopping:O=!1,hideTrackOrder:F=!1,hideContactSupport:W=!1,className:P="",style:V,...H},Y)=>{const q=e=>n("div",{className:"orderconfirmation-address",children:[r("div",{className:"orderconfirmation-address-name",children:e.name}),r("div",{children:e.addressLine1}),e.addressLine2&&r("div",{children:e.addressLine2}),n("div",{children:[e.city,", ",e.state," ",e.zipCode]}),e.phone&&n("div",{children:["Phone: ",e.phone]})]}),G=[{label:"Order Number",value:a||`#${t}`,valueClass:"value-bold"},o?{label:"Order Date",value:o}:{label:"",value:"",hidden:!0},{label:"Status",value:r(Xn,{variant:(()=>{switch(i){case"confirmed":case"delivered":return"success";case"cancelled":return"error";case"processing":return"info";case"pending":return"warning";default:return"neutral"}})(),children:l||i.charAt(0).toUpperCase()+i.slice(1)})},_?{label:"Estimated Delivery",value:_,valueClass:"value-primary"}:{label:"",value:"",hidden:!0},z?{label:"Tracking Number",value:z,valueClass:"value-bold"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),X=[s?{label:"Email",value:s}:{label:"",value:"",hidden:!0},v?{label:"Phone",value:v}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),U=[y?{label:"Payment Method",value:y}:{label:"",value:"",hidden:!0},k?{label:"Transaction ID",value:k,valueClass:"value-muted"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden);return r("div",{className:`orderconfirmation ${P}`,style:V,ref:Y,...H,children:n(Nn,{direction:"column",gap:20,children:[r(Kn,{variant:"filled",className:"orderconfirmation-header",children:n(Nn,{direction:"column",align:"center",gap:12,children:[r("span",{className:"orderconfirmation-success-icon",children:r(Tr,{size:32})}),r(Sn,{variant:"h4",weight:"bold",align:"center",noMargin:!0,children:c}),r(Sn,{variant:"body1",align:"center",noMargin:!0,className:"orderconfirmation-subtitle",children:d}),n(Xn,{variant:"success",style:{padding:"8px 20px",borderRadius:"20px",fontWeight:600,marginTop:"8px"},children:["Order ",a||`#${t}`]})]})}),r(je,{heading:"Order Details",items:G,variant:"outlined",showDividers:!0}),X.length>0&&r(je,{heading:"Customer Information",items:X,variant:"outlined",showDividers:!0}),n(Kn,{variant:"outlined",className:"orderconfirmation-items-card",children:[n(Sn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:["Order Items (",m.length,")"]}),r(Nn,{direction:"column",gap:12,children:m.map((e,t)=>n("div",{children:[n(Nn,{direction:"row",gap:12,className:"orderconfirmation-item",children:[e.image&&r("div",{className:"orderconfirmation-item-image-wrapper",children:r("img",{src:e.image,alt:e.name,className:"orderconfirmation-item-image"})}),n(Nn,{direction:"column",gap:4,style:{flex:1,minWidth:0},children:[r(Sn,{variant:"body2",weight:"medium",noMargin:!0,className:"orderconfirmation-item-name",children:e.name}),e.variant&&r(Sn,{variant:"caption",noMargin:!0,className:"orderconfirmation-item-variant",children:e.variant}),n(Sn,{variant:"caption",noMargin:!0,children:["Qty: ",e.quantity]})]}),n(Nn,{direction:"column",align:"end",gap:2,children:[n(Sn,{variant:"body2",weight:"semibold",noMargin:!0,children:[w,(e.price*e.quantity).toLocaleString()]}),n(Sn,{variant:"caption",noMargin:!0,className:"orderconfirmation-item-unit-price",children:[w,e.price.toLocaleString()," each"]})]})]}),t<m.length-1&&r(te,{style:{margin:"12px 0"}})]},e.id))})]}),n(Kn,{variant:"outlined",className:"orderconfirmation-summary-card",children:[r(Sn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:"Payment Summary"}),n(Nn,{direction:"column",gap:8,children:[n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Subtotal"}),n(Sn,{variant:"body2",noMargin:!0,children:[w,h.toLocaleString()]})]}),g>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Shipping"}),n(Sn,{variant:"body2",noMargin:!0,children:[w,g.toLocaleString()]})]}),u>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Tax"}),n(Sn,{variant:"body2",noMargin:!0,children:[w,u.toLocaleString()]})]}),f>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,className:"orderconfirmation-discount",children:"Discount"}),n(Sn,{variant:"body2",noMargin:!0,className:"orderconfirmation-discount",children:["-",w,f.toLocaleString()]})]}),r(te,{style:{margin:"8px 0"}}),n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body1",weight:"bold",noMargin:!0,children:"Total"}),n(Sn,{variant:"body1",weight:"bold",noMargin:!0,className:"orderconfirmation-total",children:[w,b.toLocaleString()]})]})]}),U.length>0&&n(e,{children:[r(te,{style:{margin:"12px 0"}}),r(Nn,{direction:"column",gap:8,children:U.map((e,t)=>n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:e.label}),r(Sn,{variant:"body2",noMargin:!0,className:e.valueClass,children:e.value})]},t))})]})]}),n(Nn,{direction:"row",gap:16,wrap:"wrap",children:[r(Kn,{variant:"outlined",className:"orderconfirmation-address-card",style:{flex:"1 1 280px"},children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Wr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Address"})]}),r(te,{}),q(x)]})}),p&&r(Kn,{variant:"outlined",className:"orderconfirmation-address-card",style:{flex:"1 1 280px"},children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Or,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Billing Address"})]}),r(te,{}),q(p)]})})]}),E&&r(Kn,{variant:"outlined",className:"orderconfirmation-actions-card",children:n(Nn,{direction:"column",gap:16,children:[r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"What's Next?"}),r(te,{}),n(Nn,{direction:"row",gap:12,wrap:"wrap",children:[!R&&N&&r(pr,{variant:"primary",size:"md",onClick:()=>N(t),leftIcon:r(Dr,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:I}),!F&&S&&z&&r(pr,{variant:"primary",size:"md",onClick:()=>S(t),leftIcon:r(Lr,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:A})]}),n(Nn,{direction:"row",gap:12,wrap:"wrap",children:[!O&&C&&r(pr,{variant:"outline",size:"md",onClick:C,leftIcon:r(Br,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:j}),M&&r(pr,{variant:"outline",size:"md",onClick:()=>M(t),leftIcon:r(Rr,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:D})]}),n(Nn,{direction:"row",gap:12,wrap:"wrap",justify:"center",children:[!W&&T&&r(pr,{variant:"ghost",size:"md",onClick:()=>T(t),leftIcon:r(Fr,{size:18}),children:L}),$&&r(pr,{variant:"ghost",size:"md",onClick:()=>$(t),leftIcon:r(Er,{size:18}),children:B})]})]})}),r(Kn,{variant:"filled",className:"orderconfirmation-help-card",style:{background:"var(--vtx-color-primary-50)",border:"1px solid var(--vtx-color-primary-100)"},children:n(Nn,{direction:"column",gap:12,align:"center",children:[n(Nn,{align:"center",gap:8,children:[r(Fr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Need Help?"})]}),r(Sn,{variant:"body2",align:"center",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)"},children:"Our support team is available 24/7 to assist you with your order"}),n(Nn,{direction:"row",gap:16,wrap:"wrap",justify:"center",style:{marginTop:"4px"},children:[n(Nn,{align:"center",gap:6,children:[r(Fr,{size:16}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:"support@example.com"})]}),n(Nn,{align:"center",gap:6,children:[r(Pr,{size:16}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:"1-800-123-4567"})]})]})]})})]})})});Ae.displayName="OrderConfirmation";const De=sr(Ae);vr(".orderdetails {\r\n width: 100%;\r\n max-width: 100%;\r\n}\r\n\r\n/* Header */\r\n.orderdetails-header {\r\n padding: var(--vtx-spacing-4);\r\n background: var(--vtx-color-neutral-50);\r\n border: 2px solid var(--vtx-color-neutral-300);\r\n}\r\n\r\n.orderdetails-date {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* Items Card */\r\n.orderdetails-items-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderdetails-item {\r\n width: 100%;\r\n}\r\n\r\n.orderdetails-item-image-wrapper {\r\n width: 64px;\r\n height: 64px;\r\n flex-shrink: 0;\r\n border-radius: var(--vtx-radius-md);\r\n overflow: hidden;\r\n background: var(--vtx-color-neutral-100);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.orderdetails-item-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.orderdetails-item-name {\r\n color: var(--vtx-color-neutral-900);\r\n word-break: break-word;\r\n overflow-wrap: break-word;\r\n hyphens: auto;\r\n}\r\n\r\n.orderdetails-item-variant,\r\n.orderdetails-item-sku {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.orderdetails-item-unit-price {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n/* Summary Card */\r\n.orderdetails-summary-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderdetails-discount {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n.orderdetails-total {\r\n color: var(--vtx-color-primary-600);\r\n font-size: 1.125rem;\r\n}\r\n\r\n/* Address Card */\r\n.orderdetails-address-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderdetails-address {\r\n color: var(--vtx-color-neutral-700);\r\n line-height: 1.6;\r\n}\r\n\r\n.orderdetails-address-name {\r\n font-weight: 600;\r\n color: var(--vtx-color-neutral-900);\r\n margin-bottom: 4px;\r\n}\r\n\r\n/* Actions Card */\r\n.orderdetails-actions-card {\r\n padding: var(--vtx-spacing-4);\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n/* Help Card */\r\n.orderdetails-help-card {\r\n padding: var(--vtx-spacing-3);\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.orderdetails-help-text {\r\n color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.orderdetails-help-email {\r\n color: var(--vtx-color-neutral-600);\r\n font-weight: 500;\r\n}\r\n\r\n/* Tracking Link */\r\n.orderdetails-tracking-link {\r\n color: var(--vtx-color-primary-600);\r\n text-decoration: none;\r\n font-weight: 600;\r\n transition: color var(--vtx-transition-base);\r\n}\r\n\r\n.orderdetails-tracking-link:hover {\r\n color: var(--vtx-color-primary-700);\r\n text-decoration: underline;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 640px) {\r\n .orderdetails-header {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .orderdetails-items-card,\r\n .orderdetails-summary-card,\r\n .orderdetails-address-card,\r\n .orderdetails-actions-card {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .orderdetails-item-image-wrapper {\r\n width: 56px;\r\n height: 56px;\r\n }\r\n\r\n .orderdetails-item {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .orderdetails-total {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .orderdetails-item-image-wrapper {\r\n width: 48px;\r\n height: 48px;\r\n }\r\n}\r\n");const Le=a.forwardRef(({orderId:t,orderNumber:a,orderDate:o,status:i,statusText:l,customerName:c,customerEmail:d,customerPhone:s,shippingAddress:v,billingAddress:x,items:p,subtotal:m,shippingCost:h=0,tax:g=0,discount:u=0,total:f,currency:b="₹",couponCode:w,paymentMethod:y,paymentStatus:k,transactionId:_,estimatedDelivery:z,deliveredDate:N,trackingNumber:C,trackingUrl:S,carrier:M,onDownloadInvoice:T,onTrackOrder:$,onCancelOrder:I,onReturnOrder:j,onReorder:A,onContactSupport:D,onWriteReview:L,downloadInvoiceText:B="Download Invoice",trackOrderText:E="Track Package",cancelOrderText:R="Cancel Order",returnOrderText:O="Return Items",reorderText:F="Reorder",contactSupportText:W="Contact Support",writeReviewText:P="Write Review",showActions:V=!0,allowCancel:H=!0,allowReturn:Y=!0,allowReorder:q=!0,className:G="",style:X,...U},K)=>{const Q=()=>{switch(k){case"paid":return"success";case"failed":return"error";case"pending":return"warning";case"refunded":return"info";default:return"neutral"}},Z=e=>n("div",{className:"orderdetails-address",children:[r("div",{className:"orderdetails-address-name",children:e.name}),r("div",{children:e.addressLine1}),e.addressLine2&&r("div",{children:e.addressLine2}),n("div",{children:[e.city,", ",e.state," ",e.zipCode]}),e.phone&&n("div",{children:["Phone: ",e.phone]})]}),J=H&&("pending"===i||"processing"===i),rr=Y&&"delivered"===i,nr=C&&("shipped"===i||"delivered"===i),er=[c?{label:"Name",value:c}:{label:"",value:"",hidden:!0},d?{label:"Email",value:d}:{label:"",value:"",hidden:!0},s?{label:"Phone",value:s}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),tr=[y?{label:"Payment Method",value:y}:{label:"",value:"",hidden:!0},k?{label:"Payment Status",value:r(Xn,{variant:Q(),children:k.charAt(0).toUpperCase()+k.slice(1)})}:{label:"",value:"",hidden:!0},_?{label:"Transaction ID",value:_,valueClass:"value-muted"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden);return r("div",{className:`orderdetails ${G}`,style:X,ref:K,...U,children:n(Nn,{direction:"column",gap:24,children:[n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"h3",weight:"bold",noMargin:!0,children:"Order Details"}),n(Sn,{variant:"body1",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)"},children:["Placed on ",o]})]}),r(Kn,{variant:"outlined",style:{padding:"32px 24px"},children:r(pe,{steps:["Order Placed","Packed","Shipped","Delivered"],currentStep:(()=>{switch(i){case"pending":case"cancelled":case"returned":default:return 0;case"processing":case"confirmed":return 1;case"shipped":return 2;case"delivered":return 3}})(),orientation:"horizontal",variant:"circle",showCheckmarks:!0,color:"success",size:"md"})}),n(Nn,{direction:"row",gap:16,wrap:"wrap",children:[r(Kn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Order Number"}),r(Sn,{variant:"h6",weight:"bold",noMargin:!0,children:a||`#${t}`})]})}),r(Kn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Status"}),r(Xn,{variant:(()=>{switch(i){case"delivered":return"success";case"cancelled":case"returned":return"error";case"shipped":case"processing":return"info";case"pending":return"warning";default:return"neutral"}})(),style:{alignSelf:"flex-start",padding:"4px 12px"},children:l||i.charAt(0).toUpperCase()+i.slice(1)})]})}),(N||z)&&r(Kn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:N?"Delivered On":"Estimated Delivery"}),r(Sn,{variant:"h6",weight:"bold",noMargin:!0,style:{color:N?"var(--vtx-color-success-600)":"inherit"},children:N||z})]})}),k&&r(Kn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Payment"}),r(Xn,{variant:Q(),style:{alignSelf:"flex-start",padding:"4px 12px"},children:k.charAt(0).toUpperCase()+k.slice(1)})]})})]}),V&&(T||nr&&$)&&n(Nn,{direction:"row",gap:12,wrap:"wrap",children:[T&&r(pr,{variant:"outline",size:"md",onClick:()=>T(t),leftIcon:r(Dr,{size:18}),style:{flex:"1 1 auto",minWidth:"180px"},children:B}),nr&&$&&r(pr,{variant:"primary",size:"md",onClick:()=>$(t),leftIcon:r(Lr,{size:18}),style:{flex:"1 1 auto",minWidth:"180px"},children:E})]}),(C||M)&&r(Kn,{variant:"outlined",children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Vr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Information"})]}),r(te,{}),n(Nn,{direction:"column",gap:12,children:[C&&n(Nn,{direction:"column",gap:4,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",fontSize:"0.75rem"},children:"Tracking Number"}),S?r("a",{href:S,target:"_blank",rel:"noopener noreferrer",style:{color:"var(--vtx-color-primary-600)",fontWeight:600,textDecoration:"none"},children:C}):r(Sn,{variant:"body2",weight:"semibold",noMargin:!0,children:C})]}),M&&n(Nn,{direction:"column",gap:4,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",fontSize:"0.75rem"},children:"Carrier"}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:M})]})]})]})}),n(Kn,{variant:"outlined",className:"orderdetails-items-card",children:[n(Sn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:["Items (",p.length,")"]}),r(Nn,{direction:"column",gap:12,children:p.map((e,t)=>n("div",{children:[n(Nn,{direction:"row",gap:12,className:"orderdetails-item",children:[e.image&&r("div",{className:"orderdetails-item-image-wrapper",children:r("img",{src:e.image,alt:e.name,className:"orderdetails-item-image"})}),n(Nn,{direction:"column",gap:4,style:{flex:1,minWidth:0},children:[r(Sn,{variant:"body2",weight:"medium",noMargin:!0,className:"orderdetails-item-name",children:e.name}),e.variant&&r(Sn,{variant:"caption",noMargin:!0,className:"orderdetails-item-variant",children:e.variant}),n(Sn,{variant:"caption",noMargin:!0,children:["Qty: ",e.quantity]})]}),n(Nn,{direction:"column",align:"end",gap:2,children:[n(Sn,{variant:"body2",weight:"semibold",noMargin:!0,children:[b,(e.price*e.quantity).toLocaleString()]}),n(Sn,{variant:"caption",noMargin:!0,className:"orderdetails-item-unit-price",children:[b,e.price.toLocaleString()," each"]})]})]}),t<p.length-1&&r(te,{style:{margin:"12px 0"}})]},e.id))})]}),n(Kn,{variant:"outlined",className:"orderdetails-summary-card",children:[r(Sn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:"Order Summary"}),n(Nn,{direction:"column",gap:8,children:[n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Subtotal"}),n(Sn,{variant:"body2",noMargin:!0,children:[b,m.toLocaleString()]})]}),h>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Shipping"}),n(Sn,{variant:"body2",noMargin:!0,children:[b,h.toLocaleString()]})]}),g>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Tax"}),n(Sn,{variant:"body2",noMargin:!0,children:[b,g.toLocaleString()]})]}),w&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,className:"orderdetails-coupon",children:"Coupon Applied"}),r(Sn,{variant:"body2",noMargin:!0,className:"orderdetails-coupon",children:w})]}),u>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,className:"orderdetails-discount",children:"Discount"}),n(Sn,{variant:"body2",noMargin:!0,className:"orderdetails-discount",children:["-",b,u.toLocaleString()]})]}),r(te,{style:{margin:"8px 0"}}),n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body1",weight:"bold",noMargin:!0,children:"Total"}),n(Sn,{variant:"body1",weight:"bold",noMargin:!0,className:"orderdetails-total",children:[b,f.toLocaleString()]})]})]}),tr.length>0&&n(e,{children:[r(te,{style:{margin:"12px 0"}}),r(Nn,{direction:"column",gap:8,children:tr.map((e,t)=>n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:e.label}),r(Sn,{variant:"body2",noMargin:!0,className:e.valueClass,children:e.value})]},t))})]})]}),er.length>0&&r(je,{heading:"Customer Information",items:er,variant:"outlined",showDividers:!0}),n(Nn,{direction:"row",gap:16,wrap:"wrap",children:[r(Kn,{variant:"outlined",className:"orderdetails-address-card",style:{flex:"1 1 280px"},children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Wr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Address"})]}),r(te,{}),Z(v)]})}),x&&r(Kn,{variant:"outlined",className:"orderdetails-address-card",style:{flex:"1 1 280px"},children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Or,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Billing Address"})]}),r(te,{}),Z(x)]})})]}),V&&r(Kn,{variant:"outlined",className:"orderdetails-actions-card",children:n(Nn,{direction:"column",gap:16,children:[r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Order Actions"}),r(te,{}),n(Nn,{direction:"row",gap:12,wrap:"wrap",children:[J&&I&&r(pr,{variant:"outline",size:"md",onClick:()=>I(t),leftIcon:r(Hr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px",borderColor:"var(--vtx-color-error-500)",color:"var(--vtx-color-error-600)"},children:R}),rr&&j&&r(pr,{variant:"outline",size:"md",onClick:()=>j(t),leftIcon:r(Yr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:O}),q&&A&&r(pr,{variant:"outline",size:"md",onClick:()=>A(t),leftIcon:r(qr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:F})]}),n(Nn,{direction:"row",gap:12,wrap:"wrap",children:["delivered"===i&&L&&r(pr,{variant:"ghost",size:"md",onClick:()=>L(t),leftIcon:r(Gr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:P}),D&&r(pr,{variant:"ghost",size:"md",onClick:()=>D(t),leftIcon:r(Fr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:W})]})]})}),r(Kn,{variant:"filled",className:"orderdetails-help-card",style:{background:"var(--vtx-color-primary-50)",border:"1px solid var(--vtx-color-primary-100)"},children:n(Nn,{direction:"column",gap:12,align:"center",children:[n(Nn,{align:"center",gap:8,children:[r(Fr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Need Help?"})]}),r(Sn,{variant:"body2",align:"center",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)"},children:"Our support team is available 24/7 to assist you with your order"}),n(Nn,{direction:"row",gap:16,wrap:"wrap",justify:"center",style:{marginTop:"4px"},children:[n(Nn,{align:"center",gap:6,children:[r(Fr,{size:16}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:"support@example.com"})]}),n(Nn,{align:"center",gap:6,children:[r(Pr,{size:16}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:"1-800-123-4567"})]})]})]})})]})})});Le.displayName="OrderDetails";const Be=sr(Le);vr("/* ===================================================================\r\n Header - Professional Design System\r\n =================================================================== */\r\n\r\n.vtx-header {\r\n width: 100%;\r\n position: relative;\r\n z-index: 1000;\r\n}\r\n\r\n.vtx-header__container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: var(--vtx-header-height, 64px);\r\n padding: 0 var(--vtx-spacing-lg, 24px);\r\n max-width: var(--vtx-header-max-width, 1440px);\r\n margin: 0 auto;\r\n background-color: var(--header-bg, #ffffff);\r\n color: var(--header-color, #1f2937);\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.vtx-header--full-width .vtx-header__container {\r\n max-width: 100%;\r\n}\r\n\r\n.vtx-header--elevated .vtx-header__container {\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-header--sticky {\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n/* ===================================================================\r\n Scroll Behavior - Transparent to Solid\r\n =================================================================== */\r\n\r\n/* Initial state: transparent background + white text */\r\n.vtx-header--scroll-behavior .vtx-header__container {\r\n background-color: transparent;\r\n color: #ffffff;\r\n box-shadow: none;\r\n}\r\n\r\n/* Nav links, search, and icons white initially */\r\n.vtx-header--scroll-behavior .vtx-header__nav-link {\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--scroll-behavior .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--scroll-behavior .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n.vtx-header--scroll-behavior .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.vtx-header--scroll-behavior .vtx-header__logo {\r\n color: #ffffff;\r\n}\r\n\r\n/* Scrolled state: white background + dark text */\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__container {\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__nav-link {\r\n color: #1f2937;\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__search-input {\r\n background-color: rgba(0, 0, 0, 0.03);\r\n border-color: rgba(0, 0, 0, 0.1);\r\n color: #1f2937;\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__search-input::placeholder {\r\n color: #9ca3af;\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__search-icon {\r\n color: #9ca3af;\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__logo {\r\n color: #1f2937;\r\n}\r\n\r\n/* Two-row layout scroll behavior */\r\n.vtx-header--scroll-behavior.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n background-color: transparent;\r\n color: #ffffff;\r\n border-bottom-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n border-bottom-color: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n/* Override theme colors when using scroll behavior - force transparent + white initially */\r\n.vtx-header--scroll-behavior.vtx-header--primary .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--secondary .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--dark .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--light .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--gradient .vtx-header__container {\r\n background-color: transparent !important;\r\n background: transparent !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n/* Scrolled state for all themes - white background + dark text */\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--primary .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--secondary .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--dark .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--light .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--gradient .vtx-header__container {\r\n background-color: #ffffff !important;\r\n background: #ffffff !important;\r\n color: #1f2937 !important;\r\n}\r\n\r\n/* ===================================================================\r\n Top Bar\r\n =================================================================== */\r\n\r\n.vtx-header__topbar {\r\n width: 100%;\r\n min-height: 36px;\r\n display: flex;\r\n align-items: center;\r\n font-size: 0.8125rem;\r\n line-height: 1.4;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n}\r\n\r\n.vtx-header__topbar-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n max-width: var(--vtx-header-max-width, 1440px);\r\n margin: 0 auto;\r\n padding: 0 var(--vtx-spacing-lg, 24px);\r\n gap: var(--vtx-spacing-md, 16px);\r\n}\r\n\r\n.vtx-header--full-width .vtx-header__topbar-container {\r\n max-width: 100%;\r\n}\r\n\r\n.vtx-header__topbar-left,\r\n.vtx-header__topbar-right {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-md, 16px);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-header__topbar-content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n text-align: center;\r\n gap: var(--vtx-spacing-sm, 8px);\r\n}\r\n\r\n.vtx-header__topbar-dismiss {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: all 0.2s ease;\r\n color: inherit;\r\n opacity: 0.7;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-header__topbar-dismiss:hover {\r\n opacity: 1;\r\n background-color: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n/* Top Bar Variants */\r\n.vtx-header__topbar--subtle {\r\n background-color: #f8f9fa;\r\n color: #495057;\r\n}\r\n\r\n.vtx-header__topbar--bold {\r\n background-color: #343a40;\r\n color: #ffffff;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.vtx-header__topbar--bold .vtx-header__topbar-dismiss:hover {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n.vtx-header__topbar--accent {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: #ffffff;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.vtx-header__topbar--accent .vtx-header__topbar-dismiss:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.vtx-header__topbar--dark {\r\n background-color: #1a1a1a;\r\n color: #e9ecef;\r\n border-bottom-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.vtx-header__topbar--dark .vtx-header__topbar-dismiss:hover {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.vtx-header__topbar--gradient {\r\n background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);\r\n color: #ffffff;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.vtx-header__topbar--gradient .vtx-header__topbar-dismiss:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* ===================================================================\r\n Logo\r\n =================================================================== */\r\n\r\n.vtx-header__logo {\r\n display: flex;\r\n align-items: center;\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n flex-shrink: 0;\r\n color: inherit;\r\n}\r\n\r\n.vtx-header__logo img {\r\n max-height: 40px;\r\n height: auto;\r\n}\r\n\r\n/* ===================================================================\r\n Desktop Navigation\r\n =================================================================== */\r\n\r\n.vtx-header--desktop .vtx-header__nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n flex: 1;\r\n margin: 0 32px;\r\n}\r\n\r\n.vtx-header__nav-item {\r\n position: relative;\r\n}\r\n\r\n.vtx-header__nav-link {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n padding: 8px 16px;\r\n text-decoration: none;\r\n color: inherit;\r\n border-radius: 8px;\r\n font-size: 0.9375rem;\r\n font-weight: 500;\r\n transition: all 0.2s ease;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-header__nav-link:hover {\r\n background-color: var(--hover-bg, rgba(0, 0, 0, 0.05));\r\n}\r\n\r\n.vtx-header__nav-link--active {\r\n background-color: var(--active-bg, rgba(0, 0, 0, 0.08));\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-header__nav-link--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__nav-icon,\r\n.vtx-header__nav-label,\r\n.vtx-header__nav-badge,\r\n.vtx-header__nav-chevron {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-header__nav-label {\r\n flex: 1;\r\n}\r\n\r\n.vtx-header__nav-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n margin-left: 4px;\r\n}\r\n\r\n/* Badge component styling overrides for header context */\r\n.vtx-header__nav-badge .vtx-badge,\r\n.vtx-header__dropdown-badge .vtx-badge,\r\n.vtx-header__mega-menu-badge .vtx-badge,\r\n.vtx-header__mobile-nav-badge .vtx-badge {\r\n margin: 0;\r\n}\r\n\r\n/* ===================================================================\r\n Dropdown Menus\r\n =================================================================== */\r\n\r\n.vtx-header__dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n margin-top: 8px;\r\n min-width: 200px;\r\n background-color: #ffffff;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\r\n padding: 8px;\r\n z-index: 1001;\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header__dropdown-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 12px;\r\n text-decoration: none;\r\n color: #1f2937;\r\n border-radius: 6px;\r\n font-size: 0.875rem;\r\n transition: all 0.2s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-header__dropdown-item:hover {\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-header__dropdown-item--active {\r\n background-color: rgba(59, 130, 246, 0.1);\r\n color: #3b82f6;\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-header__dropdown-item--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__dropdown-icon,\r\n.vtx-header__dropdown-label,\r\n.vtx-header__dropdown-badge {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-header__dropdown-label {\r\n flex: 1;\r\n}\r\n\r\n/* ===================================================================\r\n Mega Menu\r\n =================================================================== */\r\n\r\n.vtx-header__mega-menu {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n margin-top: 8px;\r\n background-color: #ffffff;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\r\n padding: 24px;\r\n z-index: 1001;\r\n min-width: 600px;\r\n max-width: 900px;\r\n}\r\n\r\n.vtx-header__mega-menu-container {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 32px;\r\n}\r\n\r\n.vtx-header__mega-menu-column-title {\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: #6b7280;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.vtx-header__mega-menu-items {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.vtx-header__mega-menu-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n padding: 12px;\r\n text-decoration: none;\r\n color: #1f2937;\r\n border-radius: 8px;\r\n transition: all 0.2s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-header__mega-menu-item:hover {\r\n background-color: rgba(0, 0, 0, 0.03);\r\n}\r\n\r\n.vtx-header__mega-menu-item--active {\r\n background-color: rgba(59, 130, 246, 0.08);\r\n color: #3b82f6;\r\n}\r\n\r\n.vtx-header__mega-menu-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n background-color: rgba(59, 130, 246, 0.1);\r\n border-radius: 8px;\r\n flex-shrink: 0;\r\n color: #3b82f6;\r\n}\r\n\r\n.vtx-header__mega-menu-item-content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.vtx-header__mega-menu-item-label {\r\n display: block;\r\n font-size: 0.875rem;\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.vtx-header__mega-menu-item-description {\r\n display: block;\r\n font-size: 0.8125rem;\r\n color: #6b7280;\r\n line-height: 1.4;\r\n}\r\n\r\n.vtx-header__mega-menu-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n margin-top: 2px;\r\n}\r\n\r\n/* ===================================================================\r\n Search\r\n =================================================================== */\r\n\r\n.vtx-header__search {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n max-width: 400px;\r\n}\r\n\r\n.vtx-header__search-icon {\r\n position: absolute;\r\n left: 12px;\r\n color: #9ca3af;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__search-input {\r\n width: 100%;\r\n height: 40px;\r\n padding: 0 16px 0 40px;\r\n border: 1px solid rgba(0, 0, 0, 0.1);\r\n border-radius: 8px;\r\n font-size: 0.875rem;\r\n background-color: rgba(0, 0, 0, 0.03);\r\n color: inherit;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header__search-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n background-color: #ffffff;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.vtx-header__search-input::placeholder {\r\n color: #9ca3af;\r\n}\r\n\r\n/* ===================================================================\r\n Actions\r\n =================================================================== */\r\n\r\n.vtx-header__actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.vtx-header__actions-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n/* ===================================================================\r\n Two-Row Layout\r\n =================================================================== */\r\n\r\n.vtx-header--layout-two-row {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__top-row {\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n height: 64px;\r\n justify-content: space-between;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__bottom-row {\r\n background-color: rgba(0, 0, 0, 0.03);\r\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__bottom-row .vtx-header__container {\r\n height: 56px;\r\n justify-content: center;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav {\r\n margin: 0;\r\n flex: 1;\r\n max-width: 1400px;\r\n justify-content: space-evenly;\r\n gap: 0;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-item {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-item:not(:last-child)::after {\r\n content: '|';\r\n color: rgba(0, 0, 0, 0.15);\r\n margin: 0 16px;\r\n font-weight: 300;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-link {\r\n padding: 8px 24px;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n letter-spacing: 0.01em;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-link:hover {\r\n background-color: rgba(0, 0, 0, 0.04);\r\n transform: translateY(-1px);\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-link--active {\r\n background-color: rgba(0, 0, 0, 0.06);\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-link--active::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -14px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 60%;\r\n height: 3px;\r\n background-color: currentColor;\r\n border-radius: 3px 3px 0 0;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__search--expanded {\r\n flex: 1;\r\n max-width: 600px;\r\n margin: 0 32px;\r\n}\r\n\r\n/* Two-Row Bottom Style Variants */\r\n.vtx-header--layout-two-row.vtx-header--divider .vtx-header__top-row {\r\n border-bottom: 2px solid rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--divider .vtx-header__bottom-row {\r\n background-color: transparent;\r\n box-shadow: none;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--dark-bottom .vtx-header__bottom-row {\r\n background-color: rgba(0, 0, 0, 0.08);\r\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--dark-bottom .vtx-header__nav-link {\r\n color: rgba(0, 0, 0, 0.85);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--dark-bottom .vtx-header__nav-link:hover {\r\n background-color: rgba(0, 0, 0, 0.06);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--gradient-bottom .vtx-header__bottom-row {\r\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.05) 100%);\r\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--elevated-bottom .vtx-header__bottom-row {\r\n background-color: #ffffff;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--elevated-bottom .vtx-header__top-row {\r\n border-bottom: none;\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--elevated-bottom .vtx-header__nav-link--active {\r\n background-color: transparent;\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--elevated-bottom .vtx-header__nav-link:hover {\r\n background-color: rgba(0, 0, 0, 0.02);\r\n}\r\n\r\n/* ===================================================================\r\n Centered Layout\r\n =================================================================== */\r\n\r\n.vtx-header--layout-centered .vtx-header__container {\r\n justify-content: center;\r\n gap: 32px;\r\n}\r\n\r\n.vtx-header--layout-centered .vtx-header__logo {\r\n position: absolute;\r\n left: 24px;\r\n}\r\n\r\n.vtx-header--layout-centered .vtx-header__actions {\r\n position: absolute;\r\n right: 24px;\r\n}\r\n\r\n.vtx-header--layout-centered .vtx-header__nav {\r\n margin: 0;\r\n flex: 0;\r\n}\r\n\r\n/* ===================================================================\r\n Mobile Styles\r\n =================================================================== */\r\n\r\n.vtx-header--mobile .vtx-header__menu-toggle {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n cursor: pointer;\r\n border-radius: 8px;\r\n color: inherit;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header--mobile .vtx-header__menu-toggle:hover {\r\n background-color: var(--hover-bg, rgba(0, 0, 0, 0.05));\r\n}\r\n\r\n.vtx-header__overlay {\r\n position: fixed;\r\n inset: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n z-index: 999;\r\n animation: fadeIn 0.3s ease;\r\n}\r\n\r\n@keyframes fadeIn {\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-header__mobile-menu {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n bottom: 0;\r\n width: 280px;\r\n background-color: #ffffff;\r\n box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);\r\n z-index: 1000;\r\n transform: translateX(-100%);\r\n transition: transform 0.3s ease;\r\n overflow-y: auto;\r\n}\r\n\r\n.vtx-header__mobile-menu--open {\r\n transform: translateX(0);\r\n}\r\n\r\n.vtx-header__mobile-menu-content {\r\n padding: 24px;\r\n}\r\n\r\n.vtx-header__mobile-search {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.vtx-header__mobile-search-icon {\r\n position: absolute;\r\n left: 12px;\r\n color: #9ca3af;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__mobile-search-input {\r\n width: 100%;\r\n height: 40px;\r\n padding: 0 16px 0 40px;\r\n border: 1px solid rgba(0, 0, 0, 0.1);\r\n border-radius: 8px;\r\n font-size: 0.875rem;\r\n background-color: rgba(0, 0, 0, 0.03);\r\n color: #1f2937;\r\n}\r\n\r\n.vtx-header__mobile-search-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n background-color: #ffffff;\r\n}\r\n\r\n.vtx-header__mobile-nav {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.vtx-header__mobile-nav-item {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-header__mobile-nav-link-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.vtx-header__mobile-nav-link {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px;\r\n text-decoration: none;\r\n color: #1f2937;\r\n border-radius: 8px;\r\n font-size: 0.9375rem;\r\n font-weight: 500;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header__mobile-nav-link:hover {\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-header__mobile-nav-link--active {\r\n background-color: rgba(59, 130, 246, 0.1);\r\n color: #3b82f6;\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-header__mobile-nav-link--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__mobile-nav-icon,\r\n.vtx-header__mobile-nav-label,\r\n.vtx-header__mobile-nav-badge {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-header__mobile-nav-label {\r\n flex: 1;\r\n}\r\n\r\n.vtx-header__mobile-nav-toggle {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n cursor: pointer;\r\n border-radius: 6px;\r\n color: #6b7280;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header__mobile-nav-toggle:hover {\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-header__mobile-nav-toggle--expanded {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.vtx-header__mobile-nav-children {\r\n padding-left: 20px;\r\n margin-top: 4px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.vtx-header__mobile-nav-item--level-1 .vtx-header__mobile-nav-link {\r\n padding-left: 24px;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vtx-header__mobile-actions {\r\n margin-top: 24px;\r\n padding-top: 24px;\r\n border-top: 1px solid rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* ===================================================================\r\n Theme Variants\r\n =================================================================== */\r\n\r\n/* Primary */\r\n.vtx-header--primary {\r\n --header-bg: #3b82f6;\r\n --header-color: #ffffff;\r\n --hover-bg: rgba(255, 255, 255, 0.1);\r\n --active-bg: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n/* Apply theme to single-row container */\r\n.vtx-header--primary.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--primary.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--primary.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n.vtx-header--primary .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--primary .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n.vtx-header--primary .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n/* Secondary */\r\n.vtx-header--secondary {\r\n --header-bg: #6366f1;\r\n --header-color: #ffffff;\r\n --hover-bg: rgba(255, 255, 255, 0.1);\r\n --active-bg: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n.vtx-header--secondary.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--secondary.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--secondary.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n.vtx-header--secondary .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--secondary .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n.vtx-header--secondary .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n/* Dark */\r\n.vtx-header--dark {\r\n --header-bg: #1f2937;\r\n --header-color: #ffffff;\r\n --hover-bg: rgba(255, 255, 255, 0.1);\r\n --active-bg: rgba(255, 255, 255, 0.15);\r\n}.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--dark.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--dark.vtx-header--layout-two-row .vtx-header__top-row\r\n\r\n.vtx-header--dark .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n.vtx-header--dark .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--dark .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.6);\r\n}\r\n\r\n.vtx-header--dark .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.6);\r\n}\r\n\r\n/* Light */\r\n.vtx-header--light {\r\n --header-bg: #f9fafb;\r\n --header-color: #1f2937;\r\n --hover-bg: rgba(0, 0, 0, 0.05);\r\n --active-bg: rgba(0, 0, 0, 0.08);\r\n}.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--light.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--light.vtx-header--layout-two-row .vtx-header__top-row\r\n\r\n.vtx-header--light .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n/* Transparent */\r\n.vtx-header--transparent {\r\n --header-bg: transparent;\r\n --header-color: #1f2937;\r\n --hover-bg: rgba(0, 0, 0, 0.05);\r\n --active-bg: rgba(0, 0, 0, 0.08);\r\n}.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--transparent.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--transparent.vtx-header--layout-two-row .vtx-header__top-row\r\n\r\n.vtx-header--transparent .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n/* Gradient */\r\n.vtx-header--gradient {\r\n --header-color: #ffffff;\r\n --hover-bg: rgba(255, 255, 255, 0.1);\r\n --active-bg: rgba(255, 255, 255, 0.15);\r\n}.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--gradient.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--gradient.vtx-header--layout-two-row .vtx-header__top-row\r\n\r\n.vtx-header--gradient .vtx-header__container {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: var(--header-color);\r\n}\r\n\r\n.vtx-header--gradient .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--gradient .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n.vtx-header--gradient .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n/* ===================================================================\r\n Responsive Adjustments\r\n =================================================================== */\r\n\r\n@media (max-width: 768px) {\r\n .vtx-header__container {\r\n padding: 0 16px;\r\n }\r\n\r\n .vtx-header__topbar-container {\r\n padding: 0 16px;\r\n }\r\n}\r\n");const Ee=a.forwardRef(({logo:e,navItems:t=[],actions:o,variant:i="primary",elevated:l=!1,sticky:c=!1,fullWidth:s=!1,searchEnabled:v=!1,searchPlaceholder:x="Search...",onSearch:p,onLogoClick:m,layout:h="single-row",twoRowBottomStyle:g="default",topBar:u,scrollBehavior:f,scrollThreshold:b=50,onScrollStateChange:w,className:y="",style:k,..._},z)=>{const[N,C]=d(""),[S,M]=d(null),[T,$]=d(!1),[I,j]=d(!1);a.useEffect(()=>{if(!f)return;const r=()=>{const r=window.scrollY>b;j(n=>(n!==r&&(null==w||w(r)),r))};return window.addEventListener("scroll",r,{passive:!0}),()=>window.removeEventListener("scroll",r)},[f,b,w]);const A=["vtx-header","vtx-header--desktop",`vtx-header--${i}`,`vtx-header--layout-${h}`,"two-row"===h&&"default"!==g&&`vtx-header--${g}`,l&&"vtx-header--elevated",c&&"vtx-header--sticky",s&&"vtx-header--full-width",u&&!T&&"vtx-header--has-topbar",f&&"vtx-header--scroll-behavior",f&&I&&"vtx-header--scrolled",y].filter(Boolean).join(" "),D=r=>{r.preventDefault(),p&&p(N)},L=e=>{const t=e.children&&e.children.length>0,a=e.megaMenu&&e.megaMenuColumns&&e.megaMenuColumns.length>0,o=S===e.id;return n("div",{className:`vtx-header__nav-item ${t||a?"vtx-header__nav-item--has-dropdown":""} ${a?"vtx-header__nav-item--mega":""}`,onMouseEnter:()=>(t||a)&&M(e.id),onMouseLeave:()=>(t||a)&&M(null),children:[n("a",{href:e.href,onClick:r=>{e.onClick&&(r.preventDefault(),e.onClick())},className:`vtx-header__nav-link ${e.active?"vtx-header__nav-link--active":""} ${e.disabled?"vtx-header__nav-link--disabled":""}`,"aria-current":e.active?"page":void 0,"aria-disabled":e.disabled,children:[e.icon&&r("span",{className:"vtx-header__nav-icon",children:e.icon}),r("span",{className:"vtx-header__nav-label",children:e.label}),e.badge&&r(Xn,{size:"sm",variant:"error",className:"vtx-header__nav-badge",children:e.badge}),(t||a)&&r(yr,{className:"vtx-header__nav-chevron",size:16})]}),a&&o&&r("div",{className:"vtx-header__mega-menu",children:r("div",{className:"vtx-header__mega-menu-container",children:e.megaMenuColumns.map((e,t)=>n("div",{className:"vtx-header__mega-menu-column",children:[e.title&&r(Sn,{variant:"overline",weight:"bold",className:"vtx-header__mega-menu-column-title",children:e.title}),r("div",{className:"vtx-header__mega-menu-items",children:e.items.map(e=>n("a",{href:e.href,onClick:r=>{e.onClick&&(r.preventDefault(),e.onClick())},className:"vtx-header__mega-menu-item "+(e.active?"vtx-header__mega-menu-item--active":""),children:[e.icon&&r("span",{className:"vtx-header__mega-menu-icon",children:e.icon}),n("div",{className:"vtx-header__mega-menu-item-content",children:[r(Sn,{variant:"body2",weight:"semibold",className:"vtx-header__mega-menu-item-label",children:e.label}),e.description&&r(Sn,{variant:"caption",color:"#6b7280",className:"vtx-header__mega-menu-item-description",children:e.description})]}),e.badge&&r(Xn,{size:"sm",variant:"error",className:"vtx-header__mega-menu-badge",children:e.badge})]},e.id))})]},t))})}),t&&!a&&o&&r("div",{className:"vtx-header__dropdown",children:e.children.map(e=>n("a",{href:e.href,onClick:r=>{e.onClick&&(r.preventDefault(),e.onClick())},className:`vtx-header__dropdown-item ${e.active?"vtx-header__dropdown-item--active":""} ${e.disabled?"vtx-header__dropdown-item--disabled":""}`,children:[e.icon&&r("span",{className:"vtx-header__dropdown-icon",children:e.icon}),r("span",{className:"vtx-header__dropdown-label",children:e.label}),e.badge&&r(Xn,{size:"sm",variant:"error",className:"vtx-header__dropdown-badge",children:e.badge})]},e.id))})]},e.id)},B=()=>{if(!u||T)return null;const e=u.variant||"subtle";return r("div",{className:`vtx-header__topbar vtx-header__topbar--${e}`,children:n("div",{className:"vtx-header__topbar-container",children:[u.leftContent&&r("div",{className:"vtx-header__topbar-left",children:u.leftContent}),u.content&&r("div",{className:"vtx-header__topbar-content",children:u.content}),u.rightContent&&r("div",{className:"vtx-header__topbar-right",children:u.rightContent}),u.dismissible&&r("button",{className:"vtx-header__topbar-dismiss",onClick:()=>{var r;$(!0),null===(r=u.onDismiss)||void 0===r||r.call(u)},"aria-label":"Dismiss",children:r(Hr,{size:14})})]})})};return n("header","single-row"===h?{ref:z,className:A,style:k,..._,children:[B(),n("div",{className:"vtx-header__container",children:[e&&r("div",{className:"vtx-header__logo",onClick:m,style:{cursor:m?"pointer":"default"},children:e}),t.length>0&&r("nav",{className:"vtx-header__nav","aria-label":"Main navigation",children:t.map(L)}),n("div",{className:"vtx-header__actions",children:[v&&n("form",{onSubmit:D,className:"vtx-header__search",children:[r(Xr,{className:"vtx-header__search-icon",size:18}),r("input",{type:"search",placeholder:x,value:N,onChange:r=>C(r.target.value),className:"vtx-header__search-input","aria-label":"Search"})]}),o&&r("div",{className:"vtx-header__actions-group",children:o})]})]})]}:"two-row"===h?{ref:z,className:A,style:k,..._,children:[B(),r("div",{className:"vtx-header__top-row",children:n("div",{className:"vtx-header__container",children:[e&&r("div",{className:"vtx-header__logo",onClick:m,style:{cursor:m?"pointer":"default"},children:e}),v&&n("form",{onSubmit:D,className:"vtx-header__search vtx-header__search--expanded",children:[r(Xr,{className:"vtx-header__search-icon",size:18}),r("input",{type:"search",placeholder:x,value:N,onChange:r=>C(r.target.value),className:"vtx-header__search-input","aria-label":"Search"})]}),o&&r("div",{className:"vtx-header__actions-group",children:o})]})}),t.length>0&&r("div",{className:"vtx-header__bottom-row",children:r("div",{className:"vtx-header__container",children:r("nav",{className:"vtx-header__nav","aria-label":"Main navigation",children:t.map(L)})})})]}:{ref:z,className:A,style:k,..._,children:[B(),n("div",{className:"vtx-header__container",children:[e&&r("div",{className:"vtx-header__logo",onClick:m,style:{cursor:m?"pointer":"default"},children:e}),t.length>0&&r("nav",{className:"vtx-header__nav","aria-label":"Main navigation",children:t.map(L)}),n("div",{className:"vtx-header__actions",children:[v&&n("form",{onSubmit:D,className:"vtx-header__search",children:[r(Xr,{className:"vtx-header__search-icon",size:18}),r("input",{type:"search",placeholder:x,value:N,onChange:r=>C(r.target.value),className:"vtx-header__search-input","aria-label":"Search"})]}),o&&r("div",{className:"vtx-header__actions-group",children:o})]})]})]})});Ee.displayName="HeaderDesktop";const Re=a.forwardRef(({logo:t,navItems:a=[],actions:o,variant:i="primary",elevated:l=!1,sticky:c=!1,searchEnabled:s=!1,searchPlaceholder:v="Search...",onSearch:x,onLogoClick:p,menuOpen:m,onMenuOpenChange:h,className:g="",style:u,...f},b)=>{const[w,y]=d(!1),[k,_]=d(""),[z,N]=d(new Set),C=void 0!==m,S=C?m:w,M=r=>{C?null==h||h(r):y(r)},T=["vtx-header","vtx-header--mobile",`vtx-header--${i}`,l&&"vtx-header--elevated",c&&"vtx-header--sticky",S&&"vtx-header--menu-open",g].filter(Boolean).join(" "),$=r=>{const n=new Set(z);n.has(r)?n.delete(r):n.add(r),N(n)},I=(e,t=0)=>{const a=e.children&&e.children.length>0,o=z.has(e.id);return n("div",{className:`vtx-header__mobile-nav-item vtx-header__mobile-nav-item--level-${t}`,children:[n("div",{className:"vtx-header__mobile-nav-link-wrapper",children:[n("a",{href:e.href,onClick:r=>{a?(r.preventDefault(),$(e.id)):e.onClick?(r.preventDefault(),e.onClick(),M(!1)):M(!1)},className:`vtx-header__mobile-nav-link ${e.active?"vtx-header__mobile-nav-link--active":""} ${e.disabled?"vtx-header__mobile-nav-link--disabled":""}`,"aria-current":e.active?"page":void 0,"aria-disabled":e.disabled,children:[e.icon&&r("span",{className:"vtx-header__mobile-nav-icon",children:e.icon}),r("span",{className:"vtx-header__mobile-nav-label",children:e.label}),e.badge&&r(Xn,{size:"sm",variant:"error",className:"vtx-header__mobile-nav-badge",children:e.badge})]}),a&&r("button",{className:"vtx-header__mobile-nav-toggle "+(o?"vtx-header__mobile-nav-toggle--expanded":""),onClick:()=>$(e.id),"aria-label":`Toggle ${e.label} submenu`,"aria-expanded":o,children:r(yr,{size:16})})]}),a&&o&&r("div",{className:"vtx-header__mobile-nav-children",children:e.children.map(r=>I(r,t+1))})]},e.id)};return n(e,{children:[r("header",{ref:b,className:T,style:u,...f,children:n("div",{className:"vtx-header__container",children:[r("button",{className:"vtx-header__menu-toggle",onClick:()=>M(!S),"aria-label":"Toggle menu","aria-expanded":S,children:r(S?Hr:Nr,{size:24})}),t&&r("div",{className:"vtx-header__logo",onClick:p,style:{cursor:p?"pointer":"default"},children:t}),o&&r("div",{className:"vtx-header__actions-group",children:o})]})}),S&&r("div",{className:"vtx-header__overlay",onClick:()=>M(!1),"aria-hidden":"true"}),r("div",{className:"vtx-header__mobile-menu "+(S?"vtx-header__mobile-menu--open":""),children:n("div",{className:"vtx-header__mobile-menu-content",children:[s&&n("form",{onSubmit:r=>{r.preventDefault(),x&&x(k)},className:"vtx-header__mobile-search",children:[r(Xr,{className:"vtx-header__mobile-search-icon",size:18}),r("input",{type:"search",placeholder:v,value:k,onChange:r=>_(r.target.value),className:"vtx-header__mobile-search-input","aria-label":"Search"})]}),a.length>0&&r("nav",{className:"vtx-header__mobile-nav","aria-label":"Mobile navigation",children:a.map(r=>I(r))}),o&&r("div",{className:"vtx-header__mobile-actions",children:o})]})})]})});Re.displayName="HeaderMobile";const Oe=({desktopProps:n,mobileProps:e,breakpoint:t=768})=>{const[o,i]=d(!1);return a.useEffect(()=>{const r=()=>{i(window.innerWidth<t)};return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[t]),o?r(Re,{...e}):r(Ee,{...n})};Oe.displayName="HeaderResponsive";const Fe={Desktop:sr(Ee),Mobile:sr(Re),Responsive:Oe};export{wn as Accordion,bn as AccordionItem,_n as Alert,qn as Avatar,Xn as Badge,pr as Button,Kn as Card,hr as Checkbox,ur as CheckboxGroup,sn as Chip,ne as DataGrid,te as Divider,Nn as Flex,he as Grid,ie as Header,Fe as HomeHeader,fe as InfoCard,je as InfoListCard,ze as InfoText,cn as Input,In as Menu,Tn as MenuItem,An as Modal,xn as MultiSelect,$e as OrderCard,De as OrderConfirmation,Be as OrderDetails,Me as ProductCard,mn as Radio,gn as RadioGroup,fn as Select,se as SideMenu,xe as Table,Sn as Text,tr as ThemeProvider,pe as Timeline,Bn as Toast,Vn as ToastContainer,Hn as Tooltip,rr as generateCSSVariables,nr as injectCSSVariables,Wn as toast,J as tokens,en as useBodyScrollLock,Jr as useClickOutside,on as useDebounce,nn as useEscapeKey,rn as useFocusTrap,an as useId,ar as useThemeContext,Rn as useToast};
1
+ import{jsx as r,jsxs as n,Fragment as e}from"react/jsx-runtime";import*as t from"react";import a,{useId as o,useRef as i,useImperativeHandle as l,useEffect as c,useState as d,Children as s,isValidElement as v,useCallback as x,createContext as p,useContext as m,cloneElement as h,useMemo as g}from"react";import{FiCheck as u,FiX as f,FiChevronDown as b,FiBell as w,FiMenu as y,FiCheckCircle as k,FiAlertCircle as _,FiAlertTriangle as z,FiInfo as N,FiMinusCircle as C,FiDownload as S,FiPackage as M,FiShoppingBag as T,FiShare2 as $,FiEye as I,FiCreditCard as j,FiMessageCircle as A,FiMapPin as D,FiPhone as L,FiTruck as B,FiCornerUpLeft as E,FiRefreshCw as R,FiStar as O,FiSearch as F,FiPlus as W,FiMinus as P,FiChevronUp as V,FiChevronLeft as H,FiChevronRight as Y,FiArrowUp as q,FiArrowDown as G,FiChevronsLeft as X,FiChevronsRight as U}from"react-icons/fi";import{createPortal as K}from"react-dom";function Q(r){const n=r.replace("#",""),e=parseInt(n.substring(0,2),16),t=parseInt(n.substring(2,4),16),a=parseInt(n.substring(4,6),16),o={},i={50:.95,100:.9,200:.75,300:.6,400:.3,500:0,600:-.15,700:-.3,800:-.45,900:-.6};for(const[n,l]of Object.entries(i))if(0===l)o[Number(n)]=r.startsWith("#")?r:`#${r}`;else{let r,i,c;l>0?(r=Math.round(e+(255-e)*l),i=Math.round(t+(255-t)*l),c=Math.round(a+(255-a)*l)):(r=Math.round(e*(1+l)),i=Math.round(t*(1+l)),c=Math.round(a*(1+l))),r=Math.max(0,Math.min(255,r)),i=Math.max(0,Math.min(255,i)),c=Math.max(0,Math.min(255,c));const d=`#${r.toString(16).padStart(2,"0")}${i.toString(16).padStart(2,"0")}${c.toString(16).padStart(2,"0")}`;o[Number(n)]=d}return o}function Z(r){const n={};for(const[e,t]of Object.entries(r))if("string"==typeof t)n[e]=Q(t);else if("object"==typeof t&&null!==t)if(t[500]){const r=Q(t[500]);n[e]={...r,...t}}else n[e]=t;return n}const J={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 rr(){const r=[];return Object.entries(J.colors).forEach(([n,e])=>{"object"==typeof e?Object.entries(e).forEach(([e,t])=>{r.push(` --vtx-color-${n}-${e}: ${t};`)}):r.push(` --vtx-color-${n}: ${e};`)}),Object.entries(J.spacing).forEach(([n,e])=>{r.push(` --vtx-spacing-${n}: ${e};`)}),Object.entries(J.typography.fontFamily).forEach(([n,e])=>{r.push(` --vtx-font-family-${n}: ${e};`)}),Object.entries(J.typography.fontSize).forEach(([n,e])=>{r.push(` --vtx-font-size-${n}: ${e};`)}),Object.entries(J.typography.fontWeight).forEach(([n,e])=>{r.push(` --vtx-font-weight-${n}: ${e};`)}),Object.entries(J.typography.lineHeight).forEach(([n,e])=>{r.push(` --vtx-line-height-${n}: ${e};`)}),Object.entries(J.typography.letterSpacing).forEach(([n,e])=>{r.push(` --vtx-letter-spacing-${n}: ${e};`)}),Object.entries(J.typography.textVariants).forEach(([n,e])=>{Object.entries(e).forEach(([e,t])=>{const a=e.replace(/([A-Z])/g,"-$1").toLowerCase();r.push(` --vtx-text-${n}-${a}: ${t};`)})}),Object.entries(J.borderRadius).forEach(([n,e])=>{r.push(` --vtx-radius-${n}: ${e};`)}),Object.entries(J.shadows).forEach(([n,e])=>{r.push(` --vtx-shadow-${n}: ${e};`)}),Object.entries(J.transitions).forEach(([n,e])=>{r.push(` --vtx-transition-${n}: ${e};`)}),Object.entries(J.zIndex).forEach(([n,e])=>{r.push(` --vtx-z-${n}: ${e};`)}),r.join("\n")}function nr(){if("undefined"==typeof document)return;const r="vtx-ui-variables";let n=document.getElementById(r);n||(n=document.createElement("style"),n.id=r,document.head.appendChild(n));const e=rr();n.textContent=`:root {\n${e}\n}`}const er=a.createContext(void 0),tr=a.forwardRef(({children:n,initialMode:e="light",customTokens:t,defaultSize:o="md",...i},l)=>{const[c,d]=a.useState(e),[s,v]=a.useState(o),x=a.useMemo(()=>{if(!t)return{tokens:J,mode:c,defaultSize:s};let r={...J,...t};return t.colors&&(r.colors={...J.colors,...Z(t.colors)}),{tokens:r,mode:c,defaultSize:s}},[t,c,s]);a.useEffect(()=>{document.documentElement.setAttribute("data-theme",c),t&&nr()},[c,t]);const p=a.useMemo(()=>({theme:x,setMode:d,setDefaultSize:v}),[x]);return r(er.Provider,{value:p,children:r("div",{ref:l,...i,children:n})})});tr.displayName="ThemeProvider";const ar=()=>{const r=a.useContext(er);if(!r)throw new Error("useThemeContext must be used within a ThemeProvider");return r},or="dynamic-styles";function ir(){let r=document.getElementById(or);return r||(r=document.createElement("style"),r.id=or,document.head.appendChild(r)),r}const lr=new Set,cr={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",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem",px:"1px",.5:"0.125rem",1.5:"0.375rem",2.5:"0.625rem",3.5:"0.875rem"},dr={m:"margin",mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",mx:"margin-left, margin-right",my:"margin-top, margin-bottom",p:"padding",pt:"padding-top",pr:"padding-right",pb:"padding-bottom",pl:"padding-left",px:"padding-left, padding-right",py:"padding-top, padding-bottom",w:"width",h:"height",fs:"font-size",lh:"line-height",ls:"letter-spacing",gap:"gap",rounded:"border-radius"};function sr(n){const e=e=>{const t=(e.className||"").split(" ").map(r=>function(r){let n=r.match(/^([a-z]+)-\[(.+)\]$/);if(n){const r=n[1],e=n[2],t=`${r}-${e.replace(/[^a-z0-9]/gi,"")}`,a=dr[r];if(a){let n;return n="mx"===r?`.${t} { margin-left: ${e}; margin-right: ${e}; }`:"my"===r?`.${t} { margin-top: ${e}; margin-bottom: ${e}; }`:"px"===r?`.${t} { padding-left: ${e}; padding-right: ${e}; }`:"py"===r?`.${t} { padding-top: ${e}; padding-bottom: ${e}; }`:`.${t} { ${a}: ${e}; }`,lr.has(n)||(ir().appendChild(document.createTextNode(n)),lr.add(n)),t}}if(n=r.match(/^([a-z]+)-(.+)$/),n){const r=n[1],e=n[2],t=dr[r],a=cr[e];if(t&&a){const n=`${r}-${e.replace(/[^a-z0-9]/gi,"")}`;let o;return o="mx"===r?`.${n} { margin-left: ${a}; margin-right: ${a}; }`:"my"===r?`.${n} { margin-top: ${a}; margin-bottom: ${a}; }`:"px"===r?`.${n} { padding-left: ${a}; padding-right: ${a}; }`:"py"===r?`.${n} { padding-top: ${a}; padding-bottom: ${a}; }`:`.${n} { ${t}: ${a}; }`,lr.has(o)||(ir().appendChild(document.createTextNode(o)),lr.add(o)),n}}return r}(r)).join(" ");return r(n,{...e,className:t})};return e.displayName=n.displayName||n.name||"Component",e}function vr(r,n){void 0===n&&(n={});var e=n.insertAt;if(r&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=r:a.appendChild(document.createTextNode(r))}}vr(".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 xr=a.forwardRef(({children:t,variant:a="primary",size:o,fullWidth:i=!1,loading:l=!1,disabled:c=!1,leftIcon:d,rightIcon:s,iconOnly:v=!1,loadingText:x,asLink:p=!1,href:m,target:h,rel:g,className:u="",type:f="button",...b},w)=>{const{theme:y}=ar(),k=["vtx-button",`vtx-button--${a}`,`vtx-button--${o||y.defaultSize||"md"}`,i&&"vtx-button--full-width",l&&"vtx-button--loading",v&&"vtx-button--icon-only",!0===b.darkText&&"vtx-button--dark-text",!1===b.darkText&&"vtx-button--light-text",u].filter(Boolean).join(" "),_=b.style?{...b.style}:{};b.textColor&&(_.color=b.textColor);const z=n(e,{children:[l&&r("span",{className:"vtx-button__spinner",role:"status","aria-label":"Loading",children:r("svg",{className:"vtx-button__spinner-icon",viewBox:"0 0 24 24",children:r("circle",{className:"vtx-button__spinner-circle",cx:"12",cy:"12",r:"10",fill:"none",strokeWidth:"3"})})}),!l&&d&&r("span",{className:"vtx-button__icon-left",children:d}),!v&&r("span",{className:"vtx-button__content",children:l&&x?x:t}),v&&!l&&t,!l&&s&&r("span",{className:"vtx-button__icon-right",children:s})]});return p&&m?r("a",{ref:w,href:m,target:h,rel:"_blank"===h?"noopener noreferrer":g,className:k,"aria-disabled":c||l,style:_,...b,children:z}):r("button",{ref:w,type:f,className:k,disabled:c||l,"aria-busy":l,"aria-disabled":c||l,style:_,...b,children:z})});xr.displayName="Button";const pr=sr(xr);vr("/* 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 mr=a.forwardRef(({checked:e,indeterminate:t=!1,disabled:a=!1,label:d,size:s,variant:v="primary",error:x=!1,helperText:p,onChange:m,className:h="",inputClassName:g="",id:u,...f},b)=>{const{theme:w}=ar(),y=s||w.defaultSize||"md",k=o(),_=u||k,z=["vtx-checkbox",`vtx-checkbox--${y}`,`vtx-checkbox--${v}`,a&&"vtx-checkbox--disabled",x&&"vtx-checkbox--error",h].filter(Boolean).join(" "),N=["vtx-checkbox-input",g].filter(Boolean).join(" "),C=i(null);return l(b,()=>C.current),c(()=>{C.current&&(C.current.indeterminate=t)},[t]),n("div",{className:z,children:[n("label",{className:"vtx-checkbox-label",htmlFor:_,children:[n("span",{className:"vtx-checkbox-wrapper",children:[r("input",{ref:C,type:"checkbox",id:_,className:N,checked:e,disabled:a,onChange:m,...f}),n("span",{className:"vtx-checkbox-box",children:[r("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--check",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:r("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})}),r("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--indeterminate",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:r("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round"})})]})]}),d&&r("span",{className:"vtx-checkbox-label-text",children:d})]}),p&&r("div",{className:"vtx-checkbox-helper-text",children:p})]})});mr.displayName="Checkbox";const hr=sr(mr);vr("/* 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 gr=a.forwardRef(({label:e,options:t,value:a,defaultValue:o,onChange:i,disabled:l=!1,error:c=!1,helperText:s,orientation:v="vertical",size:x,className:p="",...m},h)=>{const{theme:g}=ar(),u=x||g.defaultSize||"md",[f,b]=d(o||[]),w=void 0!==a,y=w?a:f,k=["vtx-checkbox-group",`vtx-checkbox-group--${v}`,c&&"vtx-checkbox-group--error",l&&"vtx-checkbox-group--disabled",p].filter(Boolean).join(" ");return n("div",{ref:h,className:k,...m,children:[e&&r("div",{className:"vtx-checkbox-group-label",children:e}),r("div",{className:"vtx-checkbox-group-options",children:t.map(n=>{const e=y.includes(n.value),t=l||n.disabled;return r(hr,{label:n.label,checked:e,disabled:t,error:c,size:u,onChange:r=>((r,n)=>{const e=n?[...y,r]:y.filter(n=>n!==r);w||b(e),null==i||i(e)})(n.value,r.target.checked)},n.value)})}),s&&r("div",{className:"vtx-checkbox-group-helper-text",children:s})]})});gr.displayName="CheckboxGroup";const ur=sr(gr),fr=e=>n("svg",{className:"vtx-multiselect-icon-spinner",width:e.size||16,height:e.size||16,viewBox:"0 0 16 16",fill:"none",children:[r("circle",{className:"vtx-multiselect-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),r("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"})]}),br=u,wr=n=>r(f,{size:n.size||12,"aria-hidden":"true"}),yr=b,kr=W,_r=P,zr=w,Nr=y,Cr=V,Sr=H,Mr=Y,Tr=k,$r=_,Ir=z,jr=N,Ar=C,Dr=S,Lr=M,Br=T,Er=$,Rr=I,Or=j,Fr=A,Wr=D,Pr=L,Vr=B,Hr=f,Yr=E,qr=R,Gr=O,Xr=F,Ur=q,Kr=G,Qr=X,Zr=U,Jr=(r,n)=>{c(()=>{const e=e=>{const t=null==r?void 0:r.current;t&&!t.contains(e.target)&&n(e)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}},[r,n])},rn=(r,n)=>{c(()=>{if(!n)return;const e=r.current;if(!e)return;const t=e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(0===t.length)return;const a=t[0],o=t[t.length-1],i=r=>{"Tab"===r.key&&(r.shiftKey?document.activeElement===a&&(null==o||o.focus(),r.preventDefault()):document.activeElement===o&&(null==a||a.focus(),r.preventDefault()))};return null==a||a.focus(),e.addEventListener("keydown",i),()=>{e.removeEventListener("keydown",i)}},[r,n])},nn=r=>{c(()=>{const n=n=>{"Escape"===n.key&&r()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[r])},en=r=>{c(()=>{if(!r)return;const n=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=n}},[r])};let tn=0;const an=(r="vtx")=>{const[n]=d(()=>`${r}-${++tn}`);return n},on=(r,n)=>{const[e,t]=d(r);return c(()=>{const e=setTimeout(()=>{t(r)},n);return()=>{clearTimeout(e)}},[r,n]),e};vr("/**\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 --vtx-color-white: #ffffff;\r\n --vtx-color-black: #000000;\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");vr(".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--sm {\n min-height: 32px;\n}\n\n.vtx-input-container--md {\n min-height: 40px;\n}\n\n.vtx-input-container--lg {\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--sm .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--lg .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 ln=a.forwardRef(({label:e,helperText:t,error:a,success:o,size:i,fullWidth:l=!1,leftIcon:c,rightIcon:d,clearable:s=!1,onClear:v,showCount:x=!1,className:p="",wrapperClassName:m="",labelClassName:h="",inputClassName:g="",prefix:u,suffix:f,id:b,disabled:w=!1,required:y=!1,value:k,maxLength:_,...z},N)=>{const{theme:C}=ar(),S=i||C.defaultSize,M=an("input"),T=b||M,$=`${T}-helper`,I=`${T}-error`,j=`${T}-success`,A=Boolean(a),D=Boolean(o)&&!A,L=s&&k&&String(k).length>0&&!w,B=[t&&!a&&!o&&$,a&&I,o&&j].filter(Boolean).join(" "),E=["vtx-input-wrapper",l&&"vtx-input-wrapper--full-width",m].filter(Boolean).join(" "),R=["vtx-input-container",`vtx-input-container--${S}`,A&&"vtx-input-container--error",D&&"vtx-input-container--success",w&&"vtx-input-container--disabled",(c||u)&&"vtx-input-container--with-left-element",(d||f||L)&&"vtx-input-container--with-right-element",p].filter(Boolean).join(" "),O=k?String(k).length:0,F=x&&_;return n("div",{className:E,children:[e&&n("label",{htmlFor:T,className:`vtx-input-label ${h}`.trim(),children:[e,y&&n("span",{className:"vtx-input-label__required","aria-label":"required",children:[" ","*"]})]}),n("div",{className:R,children:[c&&r("span",{className:"vtx-input-icon vtx-input-icon--left","aria-hidden":"true",children:c}),u&&r("span",{className:"vtx-input-prefix","aria-hidden":"true",children:u}),r("input",{ref:N,id:T,className:`vtx-input ${g}`.trim(),disabled:w,required:y,value:k,maxLength:_,"aria-invalid":A,"aria-describedby":B||void 0,...z}),f&&r("span",{className:"vtx-input-suffix","aria-hidden":"true",children:f}),L&&r("button",{type:"button",className:"vtx-input-clear",onClick:()=>{null==v||v()},"aria-label":"Clear input",tabIndex:-1,children:r(wr,{size:16})}),d&&!L&&r("span",{className:"vtx-input-icon vtx-input-icon--right","aria-hidden":"true",children:d})]}),t&&!a&&!o&&r("p",{id:$,className:"vtx-input-helper",children:t}),a&&r("p",{id:I,className:"vtx-input-error",role:"alert",children:a}),o&&r("p",{id:j,className:"vtx-input-success",role:"status",children:o}),F&&n("p",{className:"vtx-input-counter","aria-live":"polite",children:[O," / ",_]})]})});ln.displayName="Input";const cn=sr(ln);vr("/* 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 dn=a.forwardRef(({label:e,size:t="md",variant:a="filled",color:o="default",icon:i,avatar:l,onDelete:c,onClick:d,disabled:s=!1,className:v="","aria-label":x,"data-testid":p},m)=>{const h=["vtx-chip",`vtx-chip--${t}`,`vtx-chip--${a}`,`vtx-chip--${o}`,d&&!s&&"vtx-chip--clickable",s&&"vtx-chip--disabled",v].filter(Boolean).join(" ");return n("div",{ref:m,className:h,onClick:r=>{!s&&d&&d(r)},onKeyDown:r=>{s||!d||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),d(r))},role:d?"button":void 0,tabIndex:d&&!s?0:void 0,"aria-label":x||e,"aria-disabled":s,"data-testid":p,children:[l&&r("img",{src:l,alt:"",className:"vtx-chip__avatar","aria-hidden":"true"}),i&&!l&&r("span",{className:"vtx-chip__icon","aria-hidden":"true",children:i}),r("span",{className:"vtx-chip__label",children:e}),c&&r("button",{type:"button",className:"vtx-chip__delete",onClick:r=>{r.stopPropagation(),!s&&c&&c(r)},onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),r.stopPropagation(),!s&&c&&c(r))},disabled:s,"aria-label":`Remove ${e}`,tabIndex:-1,children:r(wr,{size:16})})]})});dn.displayName="Chip";const sn=sr(dn);vr("/* 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 vn=a.forwardRef(({label:e,helperText:t,error:a,success:o,size:l,fullWidth:s=!1,options:v,value:x,defaultValue:p=[],placeholder:m="Select...",className:h="",grouped:g=!1,getOptionLabel:u="label",getOptionValue:f="value",getOptionDisabled:b="disabled",getOptionGroup:w="group",onChange:y,disabled:k=!1,required:_=!1,id:z,name:N,selectionStyle:C="checkbox",searchable:S=!1,showSelectAll:M=!1,maxChipsDisplay:T,chipColor:$="primary",chipVariant:I="light",loading:j=!1},A)=>{const{theme:D}=ar(),L=an("multiselect"),B=z||L,E=`${B}-helper`,R=`${B}-error`,O=`${B}-success`,[F,W]=d(!1),[P,V]=d(""),[H,Y]=d(p),q=i(null),G=i(null),X=void 0!==x?x:H,U=(r,n)=>"function"==typeof n?n(r):"object"==typeof r?r[n]:r,K=Boolean(a),Q=Boolean(o)&&!K,Z=[t&&!a&&!o&&E,a&&R,o&&O].filter(Boolean).join(" ");c(()=>{const r=r=>{q.current&&!q.current.contains(r.target)&&G.current&&!G.current.contains(r.target)&&(W(!1),V(""))};if(F)return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[F]);const J=r=>{if(k)return;const n=X.includes(r)?X.filter(n=>n!==r):[...X,r];if(void 0===x&&Y(n),y){const r=v.filter(r=>n.includes(U(r,f)));y(n,r)}},rr=P?v.filter(r=>U(r,u).toLowerCase().includes(P.toLowerCase())):v,nr=g?rr.reduce((r,n)=>{const e=U(n,w)||"Other";return r[e]||(r[e]=[]),r[e].push(n),r},{}):{"":rr},er=v.filter(r=>X.includes(U(r,f))),tr=T?er.slice(0,T):er,or=T?er.length-T:0,ir=["vtx-multiselect-wrapper",s&&"vtx-multiselect-wrapper--full-width",h].filter(Boolean).join(" "),lr=l||(null==D?void 0:D.defaultSize)||"md",cr=["vtx-multiselect-container",`vtx-multiselect-container--${lr}`,K&&"vtx-multiselect-container--error",Q&&"vtx-multiselect-container--success",k&&"vtx-multiselect-container--disabled",F&&"vtx-multiselect-container--open"].filter(Boolean).join(" "),dr=lr;return n("div",{className:ir,ref:A,children:[e&&n("label",{htmlFor:B,className:"vtx-multiselect-label",children:[e,_&&n("span",{className:"vtx-multiselect-label__required","aria-label":"required",children:[" ","*"]})]}),n("div",{ref:q,className:cr,"aria-expanded":F,"aria-haspopup":"listbox","aria-labelledby":e?`${B}-label`:void 0,"aria-describedby":Z||void 0,"aria-disabled":k,children:[r("div",{className:"vtx-multiselect-input-area",onClick:()=>!k&&W(!F),role:"button",tabIndex:k?-1:0,onKeyDown:r=>{k||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),W(!F))},children:0===er.length?r("span",{className:"vtx-multiselect-placeholder",children:m}):n("div",{className:"vtx-multiselect-chips",children:[tr.map(n=>{const e=U(n,f),t=U(n,u);return r(sn,{label:t,size:dr,color:$,variant:I,onDelete:r=>{r.stopPropagation(),(r=>{if(k)return;const n=X.filter(n=>n!==r);if(void 0===x&&Y(n),y){const r=v.filter(r=>n.includes(U(r,f)));y(n,r)}})(e)}},e)}),or>0&&r(sn,{label:`+${or} more`,size:dr,color:"default",variant:"outlined"})]})}),r("span",{className:"vtx-multiselect-icon","aria-hidden":"true",children:r(j?fr:yr,{size:16})}),F&&n("div",{ref:G,className:"vtx-multiselect-dropdown",role:"listbox",children:[S&&r("div",{className:"vtx-multiselect-search",children:r("input",{type:"text",placeholder:"Search...",value:P,onChange:r=>V(r.target.value),onClick:r=>r.stopPropagation()})}),M&&n("div",{className:"vtx-multiselect-actions",children:[r("button",{type:"button",className:"vtx-multiselect-action-button",onClick:r=>{r.stopPropagation(),(()=>{const r=v.filter(r=>!U(r,b)).map(r=>U(r,f));void 0===x&&Y(r),y&&y(r,v.filter(r=>!U(r,b)))})()},children:"Select All"}),r("button",{type:"button",className:"vtx-multiselect-action-button",onClick:r=>{r.stopPropagation(),void 0===x&&Y([]),y&&y([],[])},children:"Clear All"})]}),r("div",{className:"vtx-multiselect-options",children:0===rr.length?r("div",{className:"vtx-multiselect-empty",children:"No options found"}):Object.entries(nr).map(([e,t])=>n("div",{children:[g&&e&&r("div",{className:"vtx-multiselect-optgroup",children:e}),t.map(e=>{const t=U(e,f),a=U(e,u),o=U(e,b),i=X.includes(t),l=["vtx-multiselect-option",i&&"vtx-multiselect-option--selected",o&&"vtx-multiselect-option--disabled"].filter(Boolean).join(" ");return n("div",{className:l,onClick:()=>!o&&J(t),role:"option","aria-selected":i,"aria-disabled":o,tabIndex:o?-1:0,onKeyDown:r=>{o||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),J(t))},children:["checkbox"===C&&r("div",{className:"vtx-multiselect-checkbox "+(i?"vtx-multiselect-checkbox--checked":""),children:i&&r(br,{size:16})}),r("span",{className:"vtx-multiselect-option-label",children:a}),"checkmark"===C&&r("div",{className:"vtx-multiselect-checkmark",children:i&&r(br,{size:20})})]},t)})]},e))})]})]}),N&&r("select",{multiple:!0,name:N,value:X.map(String),onChange:()=>{},className:"vtx-multiselect-hidden-select",required:_,disabled:k,tabIndex:-1,"aria-hidden":"true",children:v.map(n=>{const e=U(n,f);return r("option",{value:String(e),children:U(n,u)},e)})}),t&&!a&&!o&&r("p",{id:E,className:"vtx-multiselect-helper",children:t}),a&&r("p",{id:R,className:"vtx-multiselect-error",role:"alert",children:a}),o&&r("p",{id:O,className:"vtx-multiselect-success",role:"status",children:o})]})});vn.displayName="MultiSelect";const xn=sr(vn);vr("/* 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--sm {\n --vtx-radio-size: 16px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--sm .vtx-radio-label-text {\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-radio--md {\n --vtx-radio-size: 20px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--lg {\n --vtx-radio-size: 24px;\n --vtx-radio-border-width: 2px;\n}\n\n.vtx-radio--lg .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 pn=a.forwardRef(({checked:e,disabled:t=!1,label:a,size:i,variant:l="primary",error:c=!1,helperText:d,onChange:s,className:v="",inputClassName:x="",id:p,...m},h)=>{const{theme:g}=ar(),u=i||g.defaultSize,f=o(),b=p||f,w=d?`${b}-helper-text`:void 0,y=["vtx-radio",`vtx-radio--${u}`,`vtx-radio--${l}`,t&&"vtx-radio--disabled",c&&"vtx-radio--error",v].filter(Boolean).join(" "),k=["vtx-radio-input",x].filter(Boolean).join(" "),_=n("div",{className:"vtx-radio-wrapper",children:[r("input",{ref:h,type:"radio",id:b,className:k,checked:e,disabled:t,onChange:s,"aria-describedby":w,...m}),r("span",{className:"vtx-radio-circle",children:r("span",{className:"vtx-radio-dot"})})]});return n("div",a?{className:y,children:[n("label",{htmlFor:b,className:"vtx-radio-label",children:[_,r("span",{className:"vtx-radio-label-text",children:a})]}),d&&r("span",{id:w,className:"vtx-radio-helper-text",children:d})]}:{className:y,children:[_,d&&r("span",{id:w,className:"vtx-radio-helper-text",children:d})]})});pn.displayName="Radio";const mn=sr(pn);vr("/* 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 hn=a.forwardRef(({name:e,label:t,options:a,value:o,defaultValue:i,onChange:l,disabled:c=!1,error:s=!1,helperText:v,orientation:x="vertical",size:p,variant:m="primary",className:h="",...g},u)=>{const{theme:f}=ar(),b=p||f.defaultSize,[w,y]=d(i),k=void 0!==o,_=k?o:w,z=["vtx-radio-group",`vtx-radio-group--${x}`,s&&"vtx-radio-group--error",c&&"vtx-radio-group--disabled",h].filter(Boolean).join(" ");return n("div",{ref:u,className:z,role:"radiogroup","aria-label":"string"==typeof t?t:void 0,...g,children:[t&&r("div",{className:"vtx-radio-group-label",children:t}),r("div",{className:"vtx-radio-group-options",children:a.map(n=>{const t=_===n.value,a=c||n.disabled;return r(mn,{name:e,value:n.value,label:n.label,checked:t,disabled:a,error:s,size:b,variant:m,onChange:()=>{return r=n.value,k||y(r),void(null==l||l(r));var r}},n.value)})}),v&&r("div",{className:"vtx-radio-group-helper-text",children:v})]})});hn.displayName="RadioGroup";const gn=sr(hn);vr(".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--sm {\n min-height: 32px;\n}\n\n.vtx-select-container--md {\n min-height: 40px;\n}\n\n.vtx-select-container--lg {\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--sm .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--lg .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 un=a.forwardRef(({label:e,helperText:t,error:a,success:o,size:i,fullWidth:l=!1,options:c,placeholder:d,className:s="",wrapperClassName:v="",id:x,disabled:p=!1,required:m=!1,grouped:h=!1,getOptionLabel:g="label",getOptionValue:u="value",getOptionDisabled:f="disabled",getOptionGroup:b="group",onSelectChange:w,onChange:y,loading:k=!1,..._},z)=>{const{theme:N}=ar(),C=i||N.defaultSize,S=an("select"),M=x||S,T=`${M}-helper`,$=`${M}-error`,I=`${M}-success`,j=(r,n)=>"function"==typeof n?n(r):"object"==typeof r?r[n]:r,A=Boolean(a),D=Boolean(o)&&!A,L=[t&&!a&&!o&&T,a&&$,o&&I].filter(Boolean).join(" "),B=["vtx-select-wrapper",l&&"vtx-select-wrapper--full-width",v].filter(Boolean).join(" "),E=["vtx-select-container",`vtx-select-container--${C}`,A&&"vtx-select-container--error",D&&"vtx-select-container--success",p&&"vtx-select-container--disabled",s].filter(Boolean).join(" ");return n("div",{className:B,children:[e&&n("label",{htmlFor:M,className:"vtx-select-label",children:[e,m&&n("span",{className:"vtx-select-label__required","aria-label":"required",children:[" ","*"]})]}),n("div",{className:E,children:[n("select",{ref:z,id:M,className:"vtx-select",disabled:p,required:m,"aria-invalid":A,"aria-describedby":L||void 0,onChange:r=>{if(null==y||y(r),w){const n=c.find(n=>String(j(n,u))===r.target.value);w(r.target.value,n)}},..._,children:[d&&r("option",{value:"",disabled:!0,children:d}),(()=>{if(!h)return c.map((n,e)=>{const t=j(n,u),a=j(n,g),o=j(n,f);return r("option",{value:t,disabled:o,children:a},t||e)});const n=c.reduce((r,n)=>{const e=j(n,b)||"Other";return r[e]||(r[e]=[]),r[e].push(n),r},{});return Object.entries(n).map(([n,e])=>r("optgroup",{label:n,children:e.map((n,e)=>{const t=j(n,u),a=j(n,g),o=j(n,f);return r("option",{value:t,disabled:o,children:a},t||e)})},n))})()]}),r("span",{className:"vtx-select-icon","aria-hidden":"true",children:k?n("svg",{className:"vtx-select-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[r("circle",{className:"vtx-select-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),r("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"})]}):r("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:r("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),t&&!a&&!o&&r("p",{id:T,className:"vtx-select-helper",children:t}),a&&r("p",{id:$,className:"vtx-select-error",role:"alert",children:a}),o&&r("p",{id:I,className:"vtx-select-success",role:"status",children:o})]})});un.displayName="Select";const fn=sr(un),bn=a.forwardRef(({item:t,isOpen:a,onToggle:o,variant:l="default",size:c="md",showChevron:d=!0,chevronPosition:s="right",expandedIcon:v,collapsedIcon:x,iconType:p="chevron",loading:m=!1,disabled:h=!1,disableAnimations:g=!1},u)=>{const f=i(null),{id:b,header:w,children:y,disabled:k,className:_,loading:z,status:N="default",icon:C,dataTestId:S}=t,M=h||k,T=m||z,$=()=>{M||T||o()},I=()=>r("div",C?{className:"accordion-item-chevron "+(a?"open":""),"data-testid":`${S||b}-custom-icon`,children:a?C.expanded:C.collapsed}:"custom"===p&&v&&x?{className:"accordion-item-chevron "+(a?"open":""),"data-testid":`${S||b}-custom-icon`,children:a?v:x}:"plus-minus"===p?{className:"accordion-item-chevron accordion-item-chevron--plus-minus "+(a?"open":""),"data-testid":`${S||b}-plus-minus-icon`,children:a?r(_r,{size:16,"aria-hidden":"true"}):r(e,{children:r(kr,{size:16,"aria-hidden":"true"})})}:{className:"accordion-item-chevron "+(a?"open":""),"data-testid":`${S||b}-chevron-icon`,children:r(yr,{size:16,"aria-hidden":"true",style:{transform:a?"rotate(180deg)":void 0,transition:"transform 0.2s"}})});return n("div",{ref:u,className:`\n accordion-item\n accordion-item--${l}\n accordion-item--${c}\n ${a?"accordion-item--open":""}\n ${M?"accordion-item--disabled":""}\n ${T?"accordion-item--loading":""}\n ${"default"!==N?`accordion-item--${N}`:""}\n ${_||""}\n `.trim(),"data-testid":S,"aria-expanded":a,"aria-disabled":M,"aria-busy":T,children:[n("div",{className:"accordion-item-header",role:"button",tabIndex:M||T?-1:0,"aria-expanded":a,"aria-controls":`accordion-content-${b}`,"aria-disabled":M,"aria-busy":T,"aria-describedby":"default"!==N?`accordion-status-${b}`:void 0,onClick:$,onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),$())},"data-testid":`${S||b}-header`,children:["left"===s&&d&&I(),r("div",{className:"accordion-item-header-content",children:w}),"right"===s&&d&&I()]}),r("div",{id:`accordion-content-${b}`,className:"accordion-item-content "+(a?"accordion-item-content--open":""),role:"region","aria-labelledby":`accordion-header-${b}`,ref:f,style:{maxHeight:g?a?"none":"0":a?"500px":"0",transition:g?"none":void 0},"data-testid":`${S||b}-content`,children:n("div",{className:"accordion-item-body",children:["default"!==N&&r("div",{id:`accordion-status-${b}`,className:`accordion-status accordion-status--${N}`,"aria-live":"polite",children:n("span",{className:"visually-hidden",children:["Status: ",N]})}),y]})})]})});bn.displayName="AccordionItem";vr("/* =============================================================================\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 wn=a.forwardRef(({items:n,children:e,allowMultiple:t=!1,defaultOpenItems:a=[],openItems:o,onToggle:i,variant:l="default",size:c="md",className:p="",style:m,showChevron:h=!0,chevronPosition:g="right",expandedIcon:u,collapsedIcon:f,iconType:b="chevron",showDivider:w=!0,collapsible:y=!0,loading:k=!1,disabled:_=!1,spacing:z="default",disableAnimations:N=!1,...C},S)=>{const[M,T]=d(a),$=void 0!==o?o:M,I=void 0!==o,j=n||s.toArray(e).filter(r=>v(r)).map((r,n)=>{if(v(r)&&r.props){const e=r;return{id:e.props.id||`accordion-item-${n}`,header:e.props.header||`Item ${n+1}`,children:e.props.children,disabled:e.props.disabled,className:e.props.className}}return{id:`accordion-item-${n}`,header:`Item ${n+1}`,children:r}}),A=x(r=>{let n;n=t?$.includes(r)?$.filter(n=>n!==r):[...$,r]:$.includes(r)?y?[]:$:[r],I||T(n),null==i||i(n)},[t,y,$,I,i]);return r("div",{ref:S,className:`\n accordion\n accordion--${l}\n accordion--${c}\n ${w?"accordion--divider":""}\n ${"compact"===z?"accordion--compact":""}\n ${"spacious"===z?"accordion--spacious":""}\n ${N?"accordion--no-animation":""}\n ${k?"accordion--loading":""}\n ${_?"accordion--disabled":""}\n ${p}\n `.trim(),style:m,role:"presentation","aria-busy":k,...C,children:j.map(n=>r(bn,{item:n,isOpen:$.includes(n.id),onToggle:()=>A(n.id),variant:l,size:c,showChevron:h,chevronPosition:g,expandedIcon:u,collapsedIcon:f,iconType:b,loading:k,disabled:_,spacing:z,disableAnimations:N},n.id))})});wn.displayName="Accordion";vr("/* 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 yn={success:r(Tr,{size:20}),error:r($r,{size:20}),warning:r(Ir,{size:20}),info:r(jr,{size:20}),neutral:r(Ar,{size:20})},kn=a.forwardRef(({children:e,title:t,description:a,variant:o="info",alertStyle:i="subtle",size:l,icon:c,dismissible:s=!1,onClose:v,action:x,fullWidth:p=!1,className:m="",style:h,role:g="alert",...u},f)=>{const{theme:b}=ar(),w=l||(null==b?void 0:b.defaultSize)||"md",[y,k]=d(!0);if(!y)return null;const _=!1!==c,z=void 0===c?yn[o]:c,N=e||a;return n("div",{ref:f,className:`\n alert\n alert--${o}\n alert--${i}\n alert--${w}\n ${p?"alert--full-width":""}\n ${m}\n `.trim(),style:h,role:g,...u,children:[_&&r("div",{className:"alert-icon",children:z}),n("div",{className:"alert-content",children:[t&&r("div",{className:"alert-title",children:t}),N&&r("div",{className:"alert-message",children:null!=e?e:a})]}),x&&r("div",{className:"alert-action",children:x}),s&&r("button",{type:"button",className:"alert-close",onClick:()=>{k(!1),null==v||v()},"aria-label":"Close alert",children:r(Hr,{size:16})})]})});kn.displayName="Alert";const _n=sr(kn);vr("/* 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 zn=a.forwardRef(({children:n,direction:e="row",wrap:t="nowrap",justify:a="start",align:o="stretch",alignContent:i,gap:l,rowGap:c,columnGap:d,inline:s=!1,fullWidth:v=!1,grow:x,shrink:p,basis:m,className:h="",as:g="div",style:u,...f},b)=>{const w=g,y=["vtx-flex",s&&"vtx-flex--inline",v&&"vtx-flex--full-width","row"!==e&&`vtx-flex--${e}`,"nowrap"!==t&&`vtx-flex--${t}`,"start"!==a&&`vtx-flex--justify-${a}`,"stretch"!==o&&`vtx-flex--align-${o}`,i&&`vtx-flex--align-content-${i}`,h].filter(Boolean).join(" "),k={...u};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!==d&&(k["--vtx-flex-column-gap"]="number"==typeof d?`${d}px`:d),void 0!==x&&(k.flexGrow=x),void 0!==p&&(k.flexShrink=p),void 0!==m&&(k.flexBasis="number"==typeof m?`${m}px`:m),r(w,{ref:b,className:y,style:k,...f,children:n})});zn.displayName="Flex";const Nn=sr(zn);vr("/* ===== 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/* ===== Typography Variants ===== */\n\n/* ===== Headings with Fluid Typography ===== */\n.vtx-text--h1 {\n font-size: clamp(2.25rem, 5vw + 1rem, 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: clamp(1rem, 2vw + 0.5rem, 1.5rem);\n}\n\n.vtx-text--h2 {\n font-size: clamp(1.875rem, 4vw + 0.75rem, 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: clamp(0.875rem, 1.75vw + 0.5rem, 1.25rem);\n}\n\n.vtx-text--h3 {\n font-size: clamp(1.5rem, 3vw + 0.5rem, 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: clamp(0.75rem, 1.5vw + 0.5rem, 1rem);\n}\n\n.vtx-text--h4 {\n font-size: clamp(1.25rem, 2.5vw + 0.5rem, 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: clamp(0.75rem, 1.5vw + 0.25rem, 1rem);\n}\n\n.vtx-text--h5 {\n font-size: clamp(1.125rem, 2vw + 0.25rem, 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: clamp(0.625rem, 1.25vw + 0.25rem, 0.75rem);\n}\n\n.vtx-text--h6 {\n font-size: clamp(1rem, 1.5vw + 0.25rem, 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: clamp(0.625rem, 1.25vw + 0.25rem, 0.75rem);\n}\n\n/* ===== Body Text with Responsive Sizing ===== */\n.vtx-text--body1 {\n font-size: clamp(0.9375rem, 1vw + 0.125rem, 1rem);\n font-weight: var(--vtx-text-body1-font-weight, 400);\n line-height: var(--vtx-text-body1-line-height, 1.6);\n letter-spacing: var(--vtx-text-body1-letter-spacing, 0);\n margin-bottom: clamp(0.625rem, 1vw + 0.25rem, 0.75rem);\n}\n\n.vtx-text--body2 {\n font-size: clamp(0.8125rem, 0.85vw + 0.125rem, 0.875rem);\n font-weight: var(--vtx-text-body2-font-weight, 400);\n line-height: var(--vtx-text-body2-line-height, 1.6);\n letter-spacing: var(--vtx-text-body2-letter-spacing, 0.01em);\n margin-bottom: clamp(0.625rem, 1vw + 0.25rem, 0.75rem);\n}\n\n/* ===== Subtitles with Responsive Sizing ===== */\n.vtx-text--subtitle1 {\n font-size: clamp(1rem, 1.25vw + 0.125rem, 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.0075em);\n margin-bottom: clamp(0.5rem, 0.75vw + 0.125rem, 0.625rem);\n}\n\n.vtx-text--subtitle2 {\n font-size: clamp(0.9375rem, 1vw + 0.0625rem, 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.01em);\n margin-bottom: clamp(0.5rem, 0.75vw + 0.125rem, 0.625rem);\n}\n\n/* ===== Caption with Responsive Sizing ===== */\n.vtx-text--caption {\n font-size: clamp(0.6875rem, 0.75vw + 0.0625rem, 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 with Responsive Sizing ===== */\n.vtx-text--overline {\n font-size: clamp(0.6875rem, 0.75vw + 0.0625rem, 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 with Responsive Sizing ===== */\n.vtx-text--button {\n font-size: clamp(0.8125rem, 0.85vw + 0.125rem, 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 with Responsive Sizing ===== */\n.vtx-text--label {\n font-size: clamp(0.8125rem, 0.85vw + 0.125rem, 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.0075em);\n display: inline-block;\n margin-bottom: clamp(0.375rem, 0.5vw + 0.125rem, 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 Breakpoint Adjustments ===== */\n\n/* Small Mobile: < 480px */\n@media (max-width: 479px) {\n .vtx-text--h1 {\n font-size: clamp(1.875rem, 8vw, 2.5rem);\n line-height: 1.15;\n margin-bottom: 0.875rem;\n }\n\n .vtx-text--h2 {\n font-size: clamp(1.625rem, 7vw, 2.125rem);\n line-height: 1.2;\n margin-bottom: 0.75rem;\n }\n\n .vtx-text--h3 {\n font-size: clamp(1.375rem, 6vw, 1.75rem);\n line-height: 1.25;\n margin-bottom: 0.625rem;\n }\n\n .vtx-text--h4,\n .vtx-text--h5,\n .vtx-text--h6 {\n margin-bottom: 0.5rem;\n }\n\n .vtx-text--body1,\n .vtx-text--body2 {\n line-height: 1.65;\n }\n}\n\n/* Mobile: 480px - 767px */\n@media (min-width: 480px) and (max-width: 767px) {\n .vtx-text--h1 {\n line-height: 1.15;\n }\n\n .vtx-text--h2 {\n line-height: 1.2;\n }\n\n .vtx-text--body1,\n .vtx-text--body2 {\n line-height: 1.65;\n }\n}\n/* Enhancements ===== */\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 animation: none;\n }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n .vtx-text {\n font-weight: 500;\n }\n\n .vtx-text--h1,\n .vtx-text--h2,\n .vtx-text--h3,\n .vtx-text--h4,\n .vtx-text--h5,\n .vtx-text--h6 {\n font-weight: 700;\n }\n\n .vtx-text--caption,\n .vtx-text--overline {\n opacity: 1;\n }\n}\n\n/* ===== Container Query Support (Modern Browsers) ===== */\n@supports (container-type: inline-size) {\n @container (max-width: 600px) {\n .vtx-text--h1 {\n font-size: clamp(1.875rem, 6vw, 2.5rem);\n }\n\n .vtx-text--h2 {\n font-size: clamp(1.625rem, 5vw, 2.125rem);\n }\n\n .vtx-text--h3 {\n font-size: clamp(1.375rem, 4vw, 1.75rem);\n }\n }\n}\n\n/* ===== Touch Device Optimizations ===== */\n@media (hover: none) and (pointer: coarse) {\n .vtx-text--body1,\n .vtx-text--body2 {\n line-height: 1.65;\n font-size: clamp(0.9375rem, 1.1vw + 0.125rem, 1.0625rem);\n }\n\n .vtx-text--button,\n .vtx-text--label {\n font-size: clamp(0.875rem, 1vw + 0.125rem, 0.9375rem);\n line-height: 1.6;\n }\n}\n\n/* ===== Very Small Screens (<= 320px) ===== */\n@media (max-width: 320px) {\n .vtx-text--h1 {\n font-size: 1.75rem;\n line-height: 1.1;\n }\n\n .vtx-text--h2 {\n font-size: 1.5rem;\n line-height: 1.15;\n }\n\n .vtx-text--h3 {\n font-size: 1.25rem;\n line-height: 1.2;\n }\n\n .vtx-text--h4 {\n font-size: 1.125rem;\n }\n\n .vtx-text--h5,\n .vtx-text--h6 {\n font-size: 1rem\n };\n}\n\n/* Desktop: 1024px - 1439px */\n@media (min-width: 1024px) and (max-width: 1439px) {\n .vtx-text--h1 {\n line-height: 1.2;\n }\n}\n\n/* Large Desktop: >= 1440px */\n@media (min-width: 1440px) {\n .vtx-text--h1 {\n letter-spacing: -0.03em;\n }\n\n .vtx-text--h2 {\n letter-spacing: -0.03em;\n }\n\n .vtx-text--h3 {\n letter-spacing: -0.03em;\n }\n}\n\n/* ===== Landscape Mode Adjustments ===== */\n@media (max-width: 1023px) and (orientation: landscape) {\n .vtx-text--h1,\n .vtx-text--h2,\n .vtx-text--h3 {\n margin-bottom: 0.5rem;\n }\n\n .vtx-text--body1,\n .vtx-text--body2 {\n margin-bottom: 0.5rem;\n }\n}\n\n/* ===== High Resolution Displays ===== */\n@media (min-resolution: 2dppx) {\n .vtx-text {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\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 Cn=t.forwardRef(({variant:r="body1",as:n,align:e,color:a,weight:o,transform:i,decoration:l,truncate:c=!1,lineClamp:d,breakWord:s=!1,italic:v=!1,underline:x=!1,strikethrough:p=!1,gradient:m,noSelect:h=!1,size:g,lineHeight:u,letterSpacing:f,noMargin:b=!1,noPadding:w=!1,className:y="",style:k,children:_,...z},N)=>{const C=n||(r=>({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"}[r]))(r),S=["vtx-text",`vtx-text--${r}`,e&&`vtx-text--align-${e}`,o&&"string"==typeof o&&`vtx-text--weight-${o}`,i&&`vtx-text--transform-${i}`,l&&`vtx-text--decoration-${l}`,c&&"vtx-text--truncate",d&&"vtx-text--line-clamp",s&&"vtx-text--break-word",v&&"vtx-text--italic",x&&"vtx-text--underline",p&&"vtx-text--strikethrough",m&&"vtx-text--gradient",h&&"vtx-text--no-select",b&&"vtx-text--no-margin",w&&"vtx-text--no-padding",y].filter(Boolean).join(" "),M={...k};if(a)if(a.includes(".")){const[r,n]=a.split(".");M.color=`var(--vtx-color-${r}-${n})`}else M.color=a;if(o&&"number"==typeof o&&(M.fontWeight=o),d&&(M.WebkitLineClamp=d),m&&m.length>0){const r=1===m.length?m[0]:`linear-gradient(135deg, ${m.join(", ")})`;M.backgroundImage=r}return g&&(M.fontSize="number"==typeof g?`${g}px`:g),u&&(M.lineHeight="number"==typeof u?`${u}`:u),f&&(M.letterSpacing="number"==typeof f?`${f}px`:f),t.createElement(C,{ref:N,className:S,style:M,...z},_)});Cn.displayName="Text";const Sn=sr(Cn);vr("/* 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 Mn=({isOpen:n})=>r(n?Cr:yr,{size:16}),Tn=a.forwardRef(({label:t,onClick:a,icon:o,rightIcon:l,disabled:c=!1,active:s=!1,variant:v="default",shortcut:x,divider:p=!1,items:m},h)=>{const[g,u]=d(!1),f=i(null),b=m&&m.length>0,w=l||(b?r(Mn,{isOpen:g}):null);return n(e,{children:[r("div",{ref:h||f,className:["vtx-menu-item",s&&"vtx-menu-item--active",c&&"vtx-menu-item--disabled","default"!==v&&`vtx-menu-item--${v}`,b&&"vtx-menu-item--has-submenu",g&&"vtx-menu-item--submenu-open"].filter(Boolean).join(" "),onClick:()=>{c||(b?u(!g):a&&a())},onKeyDown:r=>{c||("Enter"===r.key||" "===r.key?(r.preventDefault(),b?u(!g):null==a||a()):"ArrowDown"===r.key&&b&&!g?(r.preventDefault(),u(!0)):"ArrowUp"===r.key&&b&&g&&(r.preventDefault(),u(!1)))},role:"menuitem",tabIndex:c?-1:0,"aria-disabled":c,"aria-haspopup":b?"menu":void 0,"aria-expanded":b?g:void 0,children:n(Nn,{align:"center",gap:8,style:{flex:1},children:[o&&r("span",{className:"vtx-menu-item-icon",children:o}),r(Sn,{variant:"body2",noMargin:!0,style:{flex:1},children:t}),x&&r(Sn,{variant:"caption",color:"neutral.500",noMargin:!0,className:"vtx-menu-item-shortcut",children:x}),w&&r("span",{className:"vtx-menu-item-right-icon",children:w})]})}),b&&g&&r("div",{className:"vtx-submenu",role:"menu",children:m.map((n,e)=>r(Tn,{...n},e))}),p&&r("div",{className:"vtx-menu-divider",role:"separator"})]})});Tn.displayName="MenuItem";const $n=a.forwardRef(({items:e,children:t,orientation:a="vertical",responsive:o=!0,className:l="",width:s},v)=>{const[x,p]=d(!1),m=i(null);c(()=>{if(!o||!x)return;const r=r=>{m.current&&!m.current.contains(r.target)&&p(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[o,x]),c(()=>{if(!o||!x)return;const r=r=>{"Escape"===r.key&&p(!1)};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,x]);const h=e?e.map((n,e)=>r(Tn,{...n},e)):t,g=["vtx-menu",`vtx-menu--${a}`,o&&"vtx-menu--responsive",x&&"vtx-menu--mobile-open",l].filter(Boolean).join(" "),u={width:"vertical"===a&&s?"number"==typeof s?`${s}px`:s:void 0};return n("div",{ref:m,className:"vtx-menu-container",children:[o&&r("button",{className:"vtx-menu-toggle",onClick:()=>p(!x),"aria-label":"Toggle menu","aria-expanded":x,children:r(x?Hr:Nr,{size:24})}),r("div",{ref:v,className:g,role:"menu",style:u,children:h})]})});$n.displayName="Menu";const In=sr($n);vr("/* ===== 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 jn=a.forwardRef(({isOpen:e,onClose:t,title:a,description:o,children:l,header:d,footer:s,footerButtons:v,size:x,closeOnBackdropClick:p=!0,closeOnEscape:m=!0,showCloseButton:h=!0,transparentBackdrop:g=!1,className:u="",backdropClassName:f="",preventScroll:b=!0,animation:w="fade",onAfterOpen:y,onAfterClose:k,scrollable:_=!1,centered:z=!0},N)=>{const C=i(null),S=i(null),{theme:M}=ar();let T="md";if(x?T=x:(null==M?void 0:M.defaultSize)&&(T=M.defaultSize),rn(C,e),en(b&&e),nn(()=>{m&&e&&t()}),c(()=>{e?(S.current=document.activeElement,null==y||y()):S.current&&(S.current.focus(),null==k||k())},[e,y,k]),!e)return null;const $=["vtx-modal-backdrop",g&&"vtx-modal-backdrop--transparent",z&&"vtx-modal-backdrop--centered",`vtx-modal-backdrop--${w}`,f].filter(Boolean).join(" "),I=["vtx-modal",`vtx-modal--${T}`,_&&"vtx-modal--scrollable",`vtx-modal--${w}`,u].filter(Boolean).join(" "),j=r("div",{className:$,onClick:r=>{p&&r.target===r.currentTarget&&t()},role:"presentation",children:n("div",{ref:r=>{C.current=r,"function"==typeof N?N(r):N&&(N.current=r)},className:I,role:"dialog","aria-modal":"true","aria-labelledby":a?"vtx-modal-title":void 0,"aria-describedby":o?"vtx-modal-description":void 0,children:[d?r("div",{className:"vtx-modal-header",children:d}):a||h?n(Nn,{className:"vtx-modal-header",justify:"between",align:"center",gap:8,children:[a&&n(Nn,{direction:"column",gap:4,className:"vtx-modal-header-content",children:[r(Sn,{as:"h2",variant:"h6",weight:"semibold",id:"vtx-modal-title",noMargin:!0,children:a}),o&&r(Sn,{variant:"body2",color:"neutral.600",id:"vtx-modal-description",noMargin:!0,children:o})]}),h&&r(pr,{variant:"ghost",iconOnly:!0,size:"sm",className:"vtx-modal-close",onClick:t,"aria-label":"Close modal",children:r(Hr,{size:20})})]}):null,r(Nn,{direction:"column",className:"vtx-modal-body",children:l}),(s||v)&&r(Nn,{className:"vtx-modal-footer",justify:"end",align:"center",gap:8,children:v?v.map((n,e)=>r(pr,{variant:n.variant||"secondary",size:n.size||(null==M?void 0:M.defaultSize)||"md",loading:n.loading,disabled:n.disabled,onClick:n.onClick,children:n.label},e)):s})]})});return K(j,document.body)});jn.displayName="Modal";const An=sr(jn);vr("/* ===== 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 Dn={success:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("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:r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-6h2v6zm0-8H9V5h2v2z",fill:"currentColor"})})},Ln=a.forwardRef(({children:e,onDismiss:t,id:o,variant:l="default",autoClose:s=5e3,closeButton:v=!0,progressBar:x=!0,pauseOnHover:p=!0,pauseOnFocusLoss:m=!0,icon:h,action:g,className:u="",style:f,title:b,description:w,animationDuration:y=300,isVisible:k,createdAt:_,onClose:z,onOpen:N,toastId:C,...S},M)=>{const[T,$]=d(!1),[I,j]=d(!1),[A,D]=d(100),L=i(null),B=i(Date.now()),E=i(0),R=a.useCallback(()=>{$(!0),setTimeout(()=>{t()},y)},[t,y]);c(()=>{if(!1===s||I)return;return L.current=setInterval(()=>{const r=Date.now()-B.current-E.current,n=Math.max(0,s-r);D(n/s*100),n<=0&&R()},16),()=>{L.current&&clearInterval(L.current)}},[s,I,R]);const O=["vtx-toast",`vtx-toast--${l}`,T&&"vtx-toast--exiting",u].filter(Boolean).join(" ");return n("div",{ref:M,className:O,style:{...f,"--vtx-toast-animation-duration":`${y}ms`},onMouseEnter:()=>{p&&!I&&(j(!0),E.current=Date.now())},onMouseLeave:()=>{if(p&&I){j(!1);const r=Date.now()-E.current;B.current+=r}},onFocus:()=>{if(m&&I){j(!1);const r=Date.now()-E.current;B.current+=r}},onBlur:()=>{m&&!I&&(j(!0),E.current=Date.now())},role:"alert","aria-live":"polite","data-toast-id":o,...S,children:[n("div",{className:"vtx-toast__wrapper",children:[!1===h?null:r("div",h?{className:"vtx-toast__icon",children:h}:{className:"vtx-toast__icon",children:Dn[l]}),b||w?n("div",{className:"vtx-toast__content",children:[b&&r("div",{className:"vtx-toast__title",children:b}),w&&r("div",{className:"vtx-toast__description",children:w}),e&&r("div",{className:"vtx-toast__body",children:e})]}):r("div",{className:"vtx-toast__content",children:e}),n("div",{className:"vtx-toast__actions",children:[g&&r("button",{className:"vtx-toast__action",onClick:g.onClick,type:"button",children:g.label}),v&&r("button",{className:"vtx-toast__close",onClick:R,type:"button","aria-label":"Close notification",children:r(wr,{size:16})})]})]}),x&&!1!==s&&r("div",{className:"vtx-toast__progress-container",children:r("div",{className:"vtx-toast__progress",style:{transform:`scaleX(${A/100})`,animationPlayState:I?"paused":"running"}})})]})});Ln.displayName="Toast";const Bn=sr(Ln),En=p(null),Rn=()=>{const r=m(En);if(!r)throw new Error("useToast must be used within a ToastProvider");return r},On=({children:n})=>{const[e,t]=d([]),a=x(r=>{t(n=>{var e;const t=n.find(n=>n.id===r);return t&&(null===(e=t.onClose)||void 0===e||e.call(t)),n.filter(n=>n.id!==r)})},[]),o=x((r,n={})=>{var e;const o=n.toastId||Date.now()+Math.random(),i={id:o,content:r,createdAt:Date.now(),isVisible:!0,autoClose:5e3,closeButton:!0,progressBar:!0,pauseOnHover:!0,pauseOnFocusLoss:!0,variant:"default",animationDuration:300,...n};return t(r=>{const n=r.filter(r=>r.id!==o);return[i,...n]}),!1!==i.autoClose&&setTimeout(()=>{a(o)},i.autoClose),null===(e=n.onOpen)||void 0===e||e.call(n),o},[a]),i=x(()=>{t([])},[]),l=x((r,n)=>{t(e=>e.map(e=>e.id===r?{...e,...n}:e))},[]),c={toasts:e,addToast:o,removeToast:a,clearAllToasts:i,updateToast:l};return r(En.Provider,{value:c,children:n})};class Fn{constructor(){this.addToastFn=null,this.removeToastFn=null,this.clearAllToastsFn=null,this.updateToastFn=null}static getInstance(){return Fn.instance||(Fn.instance=new Fn),Fn.instance}setMethods(r,n,e,t){this.addToastFn=r,this.removeToastFn=n,this.clearAllToastsFn=e,this.updateToastFn=t}show(r,n){return this.addToastFn?this.addToastFn(r,n):(console.warn("Toast system not initialized. Make sure ToastContainer is mounted."),"")}success(r,n){return this.show(r,{...n,variant:"success"})}error(r,n){return this.show(r,{...n,variant:"error"})}warning(r,n){return this.show(r,{...n,variant:"warning"})}info(r,n){return this.show(r,{...n,variant:"info"})}primary(r,n){return this.show(r,{...n,variant:"primary"})}dismiss(r){this.removeToastFn?this.removeToastFn(r):console.warn("Toast system not initialized.")}dismissAll(){this.clearAllToastsFn?this.clearAllToastsFn():console.warn("Toast system not initialized.")}update(r,n){this.updateToastFn?this.updateToastFn(r,n):console.warn("Toast system not initialized.")}}const Wn=Fn.getInstance();vr("/* ===== 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 Pn=({position:e="top-right",limit:t=5,gap:a=12,margin:o=16,className:l="",style:d,stacked:s=!0,theme:v="auto"})=>{const{toasts:x,removeToast:p,addToast:m,clearAllToasts:h,updateToast:g}=Rn(),u=i(null);c(()=>{Wn.setMethods(m,p,h,g)},[m,p,h,g]),c(()=>{if("auto"===v){const r=window.matchMedia("(prefers-color-scheme: dark)"),n=()=>{document.documentElement.setAttribute("data-vtx-toast-theme",r.matches?"dark":"light")};return n(),r.addEventListener("change",n),()=>r.removeEventListener("change",n)}document.documentElement.setAttribute("data-vtx-toast-theme",v)},[v]);const f=x.slice(0,t),b=Math.max(0,x.length-t),w=["vtx-toast-container",`vtx-toast-container--${e}`,s&&"vtx-toast-container--stacked",l].filter(Boolean).join(" ");return 0===f.length?null:K(n("div",{ref:u,className:w,style:{...(r=>{const n={position:"fixed",zIndex:"var(--vtx-z-notification, 1400)",pointerEvents:"none"};switch(r){case"top-left":return{...n,top:o,left:o};case"top-center":return{...n,top:o,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...n,top:o,right:o};case"bottom-left":return{...n,bottom:o,left:o};case"bottom-center":return{...n,bottom:o,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...n,bottom:o,right:o}}})(e),"--vtx-toast-gap":`${a}px`,...d},"aria-live":"polite","aria-label":"Notifications",children:[b>0&&n("div",{className:"vtx-toast-container__hidden-count",children:["+",b," more"]}),r("div",{className:"vtx-toast-container__list",children:f.map((n,e)=>r(Bn,{id:n.id,isVisible:n.isVisible,onDismiss:()=>p(n.id),variant:n.variant,autoClose:n.autoClose,closeButton:n.closeButton,progressBar:n.progressBar,pauseOnHover:n.pauseOnHover,pauseOnFocusLoss:n.pauseOnFocusLoss,icon:n.icon,action:n.action,className:n.className,style:n.style,title:n.title,description:n.description,animationDuration:n.animationDuration,createdAt:n.createdAt,onClose:n.onClose,onOpen:n.onOpen,"data-toast-index":e,children:n.content},n.id))})]}),document.body)},Vn=({children:e,...t})=>n(On,{children:[e,r(Pn,{...t})]});vr(".vtx-tooltip {\n position: fixed;\n z-index: var(--vtx-z-tooltip);\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n background-color: var(--vtx-color-neutral-900);\n color: white;\n font-family: var(--vtx-font-family-sans);\n font-size: var(--vtx-font-size-sm);\n line-height: var(--vtx-line-height-normal);\n border-radius: var(--vtx-radius-md);\n max-width: 300px;\n word-wrap: break-word;\n pointer-events: auto;\n box-shadow: var(--vtx-shadow-lg);\n opacity: 0;\n transition:\n opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform, opacity;\n}\n\n.vtx-tooltip--visible {\n opacity: 1;\n}\n\n/* Inner wrapper for content and close button */\n.vtx-tooltip-inner {\n display: flex;\n align-items: flex-start;\n gap: var(--vtx-spacing-2);\n}\n\n.vtx-tooltip-content {\n flex: 1;\n min-width: 0;\n}\n\n/* Close button */\n.vtx-tooltip-close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n color: currentColor;\n cursor: pointer;\n border-radius: var(--vtx-radius-sm);\n transition: all var(--vtx-transition-base);\n opacity: 0.7;\n margin-top: -2px;\n}\n\n.vtx-tooltip-close:hover {\n opacity: 1;\n background: rgba(255, 255, 255, 0.1);\n}\n\n.vtx-tooltip-close:active {\n transform: scale(0.95);\n}\n\n.vtx-tooltip-close:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n opacity: 1;\n}\n\n/* Placement-specific transforms with entry animations */\n.vtx-tooltip--top {\n transform: translate(-50%, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom center;\n}\n\n.vtx-tooltip--top.vtx-tooltip--visible {\n transform: translate(-50%, -100%) scale(1);\n}\n\n.vtx-tooltip--bottom {\n transform: translate(-50%, 4px) scale(0.9);\n transform-origin: top center;\n}\n\n.vtx-tooltip--bottom.vtx-tooltip--visible {\n transform: translate(-50%, 0) scale(1);\n}\n\n.vtx-tooltip--left {\n transform: translate(calc(-100% - 4px), -50%) scale(0.9);\n transform-origin: right center;\n}\n\n.vtx-tooltip--left.vtx-tooltip--visible {\n transform: translate(-100%, -50%) scale(1);\n}\n\n.vtx-tooltip--right {\n transform: translate(4px, -50%) scale(0.9);\n transform-origin: left center;\n}\n\n.vtx-tooltip--right.vtx-tooltip--visible {\n transform: translate(0, -50%) scale(1);\n}\n\n/* Placement-start and placement-end variants */\n.vtx-tooltip--top-start {\n transform: translate(0, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom left;\n}\n\n.vtx-tooltip--top-start.vtx-tooltip--visible {\n transform: translate(0, -100%) scale(1);\n}\n\n.vtx-tooltip--top-end {\n transform: translate(-100%, calc(-100% - 4px)) scale(0.9);\n transform-origin: bottom right;\n}\n\n.vtx-tooltip--top-end.vtx-tooltip--visible {\n transform: translate(-100%, -100%) scale(1);\n}\n\n.vtx-tooltip--bottom-start {\n transform: translate(0, 4px) scale(0.9);\n transform-origin: top left;\n}\n\n.vtx-tooltip--bottom-start.vtx-tooltip--visible {\n transform: translate(0, 0) scale(1);\n}\n\n.vtx-tooltip--bottom-end {\n transform: translate(-100%, 4px) scale(0.9);\n transform-origin: top right;\n}\n\n.vtx-tooltip--bottom-end.vtx-tooltip--visible {\n transform: translate(-100%, 0) scale(1);\n}\n\n.vtx-tooltip--left-start {\n transform: translate(calc(-100% - 4px), 0) scale(0.9);\n transform-origin: right top;\n}\n\n.vtx-tooltip--left-start.vtx-tooltip--visible {\n transform: translate(-100%, 0) scale(1);\n}\n\n.vtx-tooltip--left-end {\n transform: translate(calc(-100% - 4px), -100%) scale(0.9);\n transform-origin: right bottom;\n}\n\n.vtx-tooltip--left-end.vtx-tooltip--visible {\n transform: translate(-100%, -100%) scale(1);\n}\n\n.vtx-tooltip--right-start {\n transform: translate(4px, 0) scale(0.9);\n transform-origin: left top;\n}\n\n.vtx-tooltip--right-start.vtx-tooltip--visible {\n transform: translate(0, 0) scale(1);\n}\n\n.vtx-tooltip--right-end {\n transform: translate(4px, -100%) scale(0.9);\n transform-origin: left bottom;\n}\n\n.vtx-tooltip--right-end.vtx-tooltip--visible {\n transform: translate(0, -100%) scale(1);\n}\n\n/* Variants */\n.vtx-tooltip--dark {\n background-color: var(--vtx-color-neutral-900);\n color: white;\n}\n\n.vtx-tooltip--light {\n background-color: white;\n color: var(--vtx-color-neutral-900);\n border: 1px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-tooltip--light .vtx-tooltip-close:hover {\n background: var(--vtx-color-neutral-100);\n}\n\n.vtx-tooltip--error {\n background-color: var(--vtx-color-error-600);\n color: white;\n}\n\n.vtx-tooltip--warning {\n background-color: var(--vtx-color-warning-500);\n color: var(--vtx-color-neutral-900);\n}\n\n.vtx-tooltip--success {\n background-color: var(--vtx-color-success-600);\n color: white;\n}\n\n.vtx-tooltip--info {\n background-color: var(--vtx-color-info-600);\n color: white;\n}\n\n/* Arrow */\n.vtx-tooltip--with-arrow .vtx-tooltip-arrow {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: inherit;\n transform: rotate(45deg);\n border: inherit;\n}\n\n.vtx-tooltip--top .vtx-tooltip-arrow {\n bottom: -4px;\n left: 50%;\n margin-left: -4px;\n}\n\n.vtx-tooltip--bottom .vtx-tooltip-arrow {\n top: -4px;\n left: 50%;\n margin-left: -4px;\n}\n\n.vtx-tooltip--left .vtx-tooltip-arrow {\n right: -4px;\n top: 50%;\n margin-top: -4px;\n}\n\n.vtx-tooltip--right .vtx-tooltip-arrow {\n left: -4px;\n top: 50%;\n margin-top: -4px;\n}\n");const Hn=a.forwardRef(({content:t,placement:a="top",delay:o=200,hideDelay:l=0,children:s,open:v,disabled:x=!1,arrow:p=!1,maxWidth:m="300px",variant:g="dark",dismissible:u=!1,onShow:f,onHide:b,onDismiss:w,className:y="",...k},_)=>{const[z,N]=d(v||!1),[C,S]=d(!1),[M,T]=d({top:0,left:0}),$=i(null),I=i(null),j=i(null),A=i(null),D=i(!1),L=()=>{x||(D.current=!0,j.current&&clearTimeout(j.current),A.current&&clearTimeout(A.current),I.current=setTimeout(()=>{if($.current&&D.current){const r=$.current.getBoundingClientRect(),n=E(r,a);T(n),S(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{N(!0),null==f||f()})})}},o))},B=()=>{D.current=!1,I.current&&clearTimeout(I.current),j.current=setTimeout(()=>{D.current||(N(!1),null==b||b(),A.current=setTimeout(()=>{S(!1)},150))},l)},E=(r,n)=>{const e=p?12:8;let t=0,a=0;return n.startsWith("top")?(t=r.top-e+window.scrollY,a=r.left+r.width/2+window.scrollX,"top-start"===n&&(a=r.left+window.scrollX),"top-end"===n&&(a=r.right+window.scrollX)):n.startsWith("bottom")?(t=r.bottom+e+window.scrollY,a=r.left+r.width/2+window.scrollX,"bottom-start"===n&&(a=r.left+window.scrollX),"bottom-end"===n&&(a=r.right+window.scrollX)):n.startsWith("left")?(t=r.top+r.height/2+window.scrollY,a=r.left-e+window.scrollX,"left-start"===n&&(t=r.top+window.scrollY),"left-end"===n&&(t=r.bottom+window.scrollY)):n.startsWith("right")&&(t=r.top+r.height/2+window.scrollY,a=r.right+e+window.scrollX,"right-start"===n&&(t=r.top+window.scrollY),"right-end"===n&&(t=r.bottom+window.scrollY)),{top:t,left:a}};c(()=>{void 0!==v&&(v?(S(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{N(!0)})})):(N(!1),A.current=setTimeout(()=>{S(!1)},150)))},[v]),c(()=>()=>{I.current&&clearTimeout(I.current),j.current&&clearTimeout(j.current),A.current&&clearTimeout(A.current)},[]);const R=["vtx-tooltip",`vtx-tooltip--${a}`,`vtx-tooltip--${g}`,p&&"vtx-tooltip--with-arrow",z&&"vtx-tooltip--visible",y].filter(Boolean).join(" "),O=void 0!==v&&v||C,F=h(s,{ref:r=>{$.current=r;const n=s.ref;"function"==typeof n?n(r):n&&"object"==typeof n&&"current"in n&&(n.current=r)},onMouseEnter:r=>{var n,e;void 0===v&&L(),null===(e=(n=s.props).onMouseEnter)||void 0===e||e.call(n,r)},onMouseLeave:r=>{var n,e;void 0===v&&B(),null===(e=(n=s.props).onMouseLeave)||void 0===e||e.call(n,r)},onFocus:r=>{var n,e;void 0===v&&L(),null===(e=(n=s.props).onFocus)||void 0===e||e.call(n,r)},onBlur:r=>{var n,e;void 0===v&&B(),null===(e=(n=s.props).onBlur)||void 0===e||e.call(n,r)},"aria-describedby":z?"vtx-tooltip-content":void 0});return n(e,{children:[F,O&&K(n("div",{ref:_,id:"vtx-tooltip-content",role:"tooltip",className:R,style:{top:`${M.top}px`,left:`${M.left}px`,maxWidth:m},onMouseEnter:()=>{x||void 0!==v||(D.current=!0,j.current&&clearTimeout(j.current))},onMouseLeave:()=>{x||void 0!==v||B()},...k,children:[p&&r("span",{className:"vtx-tooltip-arrow","aria-hidden":"true"}),n("div",{className:"vtx-tooltip-inner",children:[r("span",{className:"vtx-tooltip-content",children:t}),u&&r("button",{type:"button",className:"vtx-tooltip-close",onClick:()=>{D.current=!1,N(!1),null==w||w(),null==b||b(),A.current=setTimeout(()=>{S(!1)},150)},"aria-label":"Dismiss tooltip",children:r(wr,{size:14})})]})]}),document.body)]})});Hn.displayName="Tooltip";vr(".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 Yn=a.forwardRef(({src:e,alt:t="",size:a,shape:o="circle",fallback:i="?",onImageError:l,onImageLoad:c,imgProps:s,statusIndicator:v,statusPosition:x="bottom-right",className:p="",...m},h)=>{const{theme:g}=ar(),u=a||g.defaultSize||"md",[f,b]=d(!1),w=["vtx-avatar",`vtx-avatar--${u}`,`vtx-avatar--${o}`,v&&"vtx-avatar--with-status",p].filter(Boolean).join(" "),y=e&&!f,k=i.slice(0,2).toUpperCase();return n("div",{ref:h,className:w,role:"img","aria-label":t||i||"Avatar",...m,children:[y?r("img",{src:e,alt:t,className:"vtx-avatar-image",onError:r=>{b(!0),null==l||l(r)},onLoad:r=>{null==c||c(r)},loading:"lazy",...s}):r("span",{className:"vtx-avatar-fallback","aria-hidden":"true",children:k}),v&&r("span",{className:`vtx-avatar-status vtx-avatar-status--${x}`,"aria-label":"Status indicator",children:v})]})});Yn.displayName="Avatar";const qn=sr(Yn);vr(".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--sm {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-xs);\n}\n\n.vtx-badge--md {\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--lg {\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 Gn=a.forwardRef(({variant:e="neutral",size:t,pill:a=!1,dot:o=!1,outline:i=!1,maxLength:l,icon:c,children:d,className:s="",onRemove:v,...x},p)=>{const{theme:m}=ar(),h=["vtx-badge",`vtx-badge--${e}`,`vtx-badge--${t||m.defaultSize}`,a&&"vtx-badge--pill",o&&"vtx-badge--with-dot",i&&"vtx-badge--outline",v&&"vtx-badge--removable",s].filter(Boolean).join(" "),u=g(()=>l&&"string"==typeof d&&d.length>l?`${d.slice(0,l)}...`:d,[d,l]);return n("span",{ref:p,className:h,...x,children:[o&&r("span",{className:"vtx-badge-dot","aria-hidden":"true"}),c&&r("span",{className:"vtx-badge-icon","aria-hidden":"true",children:c}),r("span",{className:"vtx-badge-content",children:u}),v&&r("button",{type:"button",className:"vtx-badge-remove",onClick:v,"aria-label":"Remove badge",children:r(wr,{})})]})});Gn.displayName="Badge";const Xn=sr(Gn);vr(".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 Un=a.forwardRef(({children:e,variant:t="elevated",size:a,noPadding:o=!1,padding:i,hoverable:l=!1,clickable:c=!1,className:d="",header:s,footer:v,divider:x=!1,style:p,onClick:m,tabIndex:h,...g},u)=>{const{theme:f}=ar(),b=["vtx-card",`vtx-card--${t}`,`vtx-card--${a||(null==f?void 0:f.defaultSize)||"md"}`,l?"vtx-card--hoverable":"",c?"vtx-card--clickable":"",o&&!i?"vtx-card--no-padding":"",d].filter(Boolean).join(" "),w={...p||{},...i?{"--vtx-card-padding":i}:{}};return n("div",{ref:u,className:b,style:w,onClick:m,tabIndex:c?"number"==typeof h?h:0:h,...g,children:[s&&r("div",{className:"vtx-card-header"+(x?" vtx-card-header--divider":""),children:s}),r("div",{className:"vtx-card-content",children:e}),v&&r("div",{className:"vtx-card-footer"+(x?" vtx-card-footer--divider":""),children:v})]})});Un.displayName="Card";const Kn=sr(Un);vr('/* ==========================================\r\n DataGrid - Professional MUI-inspired Design\r\n ========================================== */\r\n\r\n.vertex-datagrid {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n border: 1px solid rgba(224, 224, 224, 1);\r\n border-radius: 4px;\r\n background: #fff;\r\n overflow: hidden;\r\n font-family: "Roboto", "Helvetica", "Arial", sans-serif;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vertex-datagrid--auto-height {\r\n height: auto;\r\n}\r\n\r\n/* ==========================================\r\n Density Variants\r\n ========================================== */\r\n\r\n.vertex-datagrid--compact .vertex-datagrid-th,\r\n.vertex-datagrid--compact .vertex-datagrid-td {\r\n padding: 4px 16px;\r\n font-size: 0.8125rem;\r\n}\r\n\r\n.vertex-datagrid--standard .vertex-datagrid-th,\r\n.vertex-datagrid--standard .vertex-datagrid-td {\r\n padding: 8px 16px;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vertex-datagrid--comfortable .vertex-datagrid-th,\r\n.vertex-datagrid--comfortable .vertex-datagrid-td {\r\n padding: 12px 20px;\r\n font-size: 0.875rem;\r\n}\r\n\r\n/* ==========================================\r\n Size Variants\r\n ========================================== */\r\n\r\n.vertex-datagrid--sm .vertex-datagrid-th,\r\n.vertex-datagrid--sm .vertex-datagrid-td {\r\n font-size: 0.75rem;\r\n}\r\n\r\n.vertex-datagrid--md .vertex-datagrid-th,\r\n.vertex-datagrid--md .vertex-datagrid-td {\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vertex-datagrid--lg .vertex-datagrid-th,\r\n.vertex-datagrid--lg .vertex-datagrid-td {\r\n font-size: 1rem;\r\n}\r\n\r\n/* ==========================================\r\n Table Container\r\n ========================================== */\r\n\r\n.vertex-datagrid-container {\r\n overflow: auto;\r\n flex: 1;\r\n background: #fff;\r\n}\r\n\r\n.vertex-datagrid-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n}\r\n\r\n/* ==========================================\r\n Table Header\r\n ========================================== */\r\n\r\n.vertex-datagrid-thead {\r\n background: #fafafa;\r\n border-bottom: 1px solid rgba(224, 224, 224, 1);\r\n}\r\n\r\n.vertex-datagrid-th {\r\n text-align: left;\r\n font-weight: 600;\r\n color: rgba(0, 0, 0, 0.87);\r\n user-select: none;\r\n border-bottom: 1px solid rgba(224, 224, 224, 1);\r\n position: sticky;\r\n top: 0;\r\n background: #fafafa;\r\n z-index: 100;\r\n}\r\n\r\n.vertex-datagrid-th-content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 4px;\r\n min-height: 40px;\r\n}\r\n\r\n.vertex-datagrid-th-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n flex: 1;\r\n cursor: default;\r\n transition: color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-th--sortable .vertex-datagrid-th-label {\r\n cursor: pointer;\r\n}\r\n\r\n.vertex-datagrid-th--sortable:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n}\r\n\r\n.vertex-datagrid-th-text {\r\n font-size: 0.875rem;\r\n font-weight: 600;\r\n line-height: 1.5rem;\r\n letter-spacing: 0.01071em;\r\n}\r\n\r\n.vertex-datagrid-sort-icon {\r\n display: flex;\r\n align-items: center;\r\n color: rgba(0, 0, 0, 0.26);\r\n transition: color 0.2s, opacity 0.2s;\r\n}\r\n\r\n.vertex-datagrid-th--sortable .vertex-datagrid-sort-icon {\r\n opacity: 0;\r\n}\r\n\r\n.vertex-datagrid-th--sortable:hover .vertex-datagrid-sort-icon {\r\n opacity: 1;\r\n}\r\n\r\n.vertex-datagrid-sort-icon--active {\r\n opacity: 1 !important;\r\n color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n/* ==========================================\r\n Column Menu Button\r\n ========================================== */\r\n\r\n.vertex-datagrid-column-menu-btn {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 24px;\r\n height: 24px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.54);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n opacity: 0;\r\n transition: opacity 0.2s, background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-th:hover .vertex-datagrid-column-menu-btn {\r\n opacity: 1;\r\n}\r\n\r\n.vertex-datagrid-column-menu-btn:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-column-menu-btn--filtered {\r\n opacity: 1;\r\n color: #1976d2;\r\n}\r\n\r\n.vertex-datagrid-filter-badge {\r\n position: absolute;\r\n top: 2px;\r\n right: 2px;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #1976d2;\r\n}\r\n\r\n/* ==========================================\r\n Column Menu Dropdown\r\n ========================================== */\r\n\r\n.vertex-datagrid-column-menu {\r\n min-width: 200px;\r\n background: #fff;\r\n border-radius: 4px;\r\n box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), \r\n 0px 8px 10px 1px rgba(0,0,0,0.14), \r\n 0px 3px 14px 2px rgba(0,0,0,0.12);\r\n padding: 8px 0;\r\n}\r\n\r\n.vertex-datagrid-column-menu-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n width: 100%;\r\n padding: 8px 16px;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.87);\r\n font-size: 0.875rem;\r\n font-family: inherit;\r\n text-align: left;\r\n cursor: pointer;\r\n transition: background 0.2s;\r\n position: relative;\r\n}\r\n\r\n.vertex-datagrid-column-menu-item:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n}\r\n\r\n.vertex-datagrid-column-menu-item svg {\r\n flex-shrink: 0;\r\n}\r\n\r\n.vertex-datagrid-column-menu-divider {\r\n height: 1px;\r\n margin: 8px 0;\r\n background: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.vertex-datagrid-menu-check {\r\n margin-left: auto;\r\n color: #1976d2;\r\n font-weight: 600;\r\n}\r\n\r\n.vertex-datagrid-menu-badge {\r\n margin-left: auto;\r\n color: #1976d2;\r\n font-size: 1.2rem;\r\n}\r\n\r\n/* ==========================================\r\n Filter Panel Overlay\r\n ========================================== */\r\n\r\n.vertex-datagrid-filter-panel-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.2);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1400;\r\n backdrop-filter: blur(2px);\r\n}\r\n\r\n.vertex-datagrid-filter-panel {\r\n width: 90%;\r\n max-width: 600px;\r\n max-height: 80vh;\r\n background: #fff;\r\n border-radius: 8px;\r\n box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), \r\n 0px 24px 38px 3px rgba(0,0,0,0.14), \r\n 0px 9px 46px 8px rgba(0,0,0,0.12);\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n}\r\n\r\n.vertex-datagrid-filter-panel-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 16px 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.vertex-datagrid-filter-close {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.54);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-close:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-filter-panel-body {\r\n flex: 1;\r\n padding: 20px;\r\n overflow-y: auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n}\r\n\r\n.vertex-datagrid-filter-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 16px;\r\n padding: 40px 20px;\r\n text-align: center;\r\n color: rgba(0, 0, 0, 0.38);\r\n}\r\n\r\n.vertex-datagrid-filter-row {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n}\r\n\r\n.vertex-datagrid-filter-logic-btn {\r\n align-self: flex-start;\r\n padding: 4px 12px;\r\n border: 1px solid #1976d2;\r\n background: transparent;\r\n color: #1976d2;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n border-radius: 16px;\r\n cursor: pointer;\r\n transition: background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-logic-btn:hover {\r\n background: rgba(25, 118, 210, 0.04);\r\n}\r\n\r\n.vertex-datagrid-filter-controls {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr auto;\r\n gap: 8px;\r\n align-items: start;\r\n}\r\n\r\n.vertex-datagrid-filter-select {\r\n padding: 8px 12px;\r\n border: 1px solid rgba(0, 0, 0, 0.23);\r\n border-radius: 4px;\r\n font-size: 0.875rem;\r\n font-family: inherit;\r\n background: #fff;\r\n color: rgba(0, 0, 0, 0.87);\r\n cursor: pointer;\r\n transition: border-color 0.2s, box-shadow 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-select:hover {\r\n border-color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-filter-select:focus {\r\n outline: none;\r\n border-color: #1976d2;\r\n box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);\r\n}\r\n\r\n.vertex-datagrid-filter-remove {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 36px;\r\n height: 36px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.54);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-remove:hover {\r\n background: rgba(211, 47, 47, 0.04);\r\n color: #d32f2f;\r\n}\r\n\r\n.vertex-datagrid-filter-actions {\r\n display: flex;\r\n gap: 8px;\r\n padding-top: 8px;\r\n}\r\n\r\n.vertex-datagrid-filter-panel-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n padding: 12px 20px;\r\n border-top: 1px solid rgba(0, 0, 0, 0.12);\r\n gap: 12px;\r\n}\r\n\r\n/* ==========================================\r\n Table Body\r\n ========================================== */\r\n\r\n.vertex-datagrid-tbody {\r\n background: #fff;\r\n}\r\n\r\n.vertex-datagrid-row {\r\n border-bottom: 1px solid rgba(224, 224, 224, 1);\r\n transition: background 0.15s;\r\n}\r\n\r\n.vertex-datagrid-row:hover {\r\n background: rgba(0, 0, 0, 0.04);\r\n}\r\n\r\n.vertex-datagrid-row--selected {\r\n background: rgba(25, 118, 210, 0.08);\r\n}\r\n\r\n.vertex-datagrid-row--selected:hover {\r\n background: rgba(25, 118, 210, 0.12);\r\n}\r\n\r\n.vertex-datagrid-td {\r\n color: rgba(0, 0, 0, 0.87);\r\n border-bottom: 1px solid rgba(224, 224, 224, 1);\r\n}\r\n\r\n.vertex-datagrid-checkbox-cell {\r\n width: 58px;\r\n padding-left: 16px !important;\r\n padding-right: 0 !important;\r\n position: sticky !important;\r\n left: 0 !important;\r\n z-index: 102 !important;\r\n background: #fafafa !important;\r\n}\r\n\r\n.vertex-datagrid-tbody .vertex-datagrid-checkbox-cell {\r\n background: #fff !important;\r\n z-index: 101 !important;\r\n}\r\n\r\n.vertex-datagrid-row:hover .vertex-datagrid-checkbox-cell {\r\n background: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected .vertex-datagrid-checkbox-cell {\r\n background: rgba(25, 118, 210, 0.08) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected:hover .vertex-datagrid-checkbox-cell {\r\n background: rgba(25, 118, 210, 0.12) !important;\r\n}\r\n\r\n/* ==========================================\r\n Pinned/Frozen Columns\r\n ========================================== */\r\n\r\n.vertex-datagrid-th--pinned-left,\r\n.vertex-datagrid-td--pinned-left {\r\n position: sticky !important;\r\n z-index: 100 !important;\r\n box-shadow: 2px 0 5px -1px rgba(0, 0, 0, 0.15) !important;\r\n}\r\n\r\n.vertex-datagrid-th--pinned-left {\r\n z-index: 101 !important;\r\n background: #fafafa !important;\r\n}\r\n\r\n.vertex-datagrid-td--pinned-left {\r\n background: #fff !important;\r\n}\r\n\r\n.vertex-datagrid-row:hover .vertex-datagrid-td--pinned-left {\r\n background: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected .vertex-datagrid-td--pinned-left {\r\n background: rgba(25, 118, 210, 0.08) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected:hover .vertex-datagrid-td--pinned-left {\r\n background: rgba(25, 118, 210, 0.12) !important;\r\n}\r\n\r\n.vertex-datagrid-th--pinned-right,\r\n.vertex-datagrid-td--pinned-right {\r\n position: sticky !important;\r\n z-index: 100 !important;\r\n box-shadow: -2px 0 5px -1px rgba(0, 0, 0, 0.15) !important;\r\n}\r\n\r\n.vertex-datagrid-th--pinned-right {\r\n z-index: 101 !important;\r\n background: #fafafa !important;\r\n}\r\n\r\n.vertex-datagrid-td--pinned-right {\r\n background: #fff !important;\r\n}\r\n\r\n.vertex-datagrid-row:hover .vertex-datagrid-td--pinned-right {\r\n background: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected .vertex-datagrid-td--pinned-right {\r\n background: rgba(25, 118, 210, 0.08) !important;\r\n}\r\n\r\n.vertex-datagrid-row--selected:hover .vertex-datagrid-td--pinned-right {\r\n background: rgba(25, 118, 210, 0.12) !important;\r\n}\r\n\r\n/* ==========================================\r\n Loading & Empty States\r\n ========================================== */\r\n\r\n.vertex-datagrid-loading,\r\n.vertex-datagrid-empty {\r\n padding: 0;\r\n text-align: center;\r\n border: none;\r\n}\r\n\r\n.vertex-datagrid-loading-content,\r\n.vertex-datagrid-empty-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 16px;\r\n padding: 64px 24px;\r\n color: rgba(0, 0, 0, 0.38);\r\n}\r\n\r\n.vertex-datagrid-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid rgba(25, 118, 210, 0.1);\r\n border-top-color: #1976d2;\r\n border-radius: 50%;\r\n animation: vertex-spinner-rotate 0.8s linear infinite;\r\n}\r\n\r\n@keyframes vertex-spinner-rotate {\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/* ==========================================\r\n Footer / Pagination\r\n ========================================== */\r\n\r\n.vertex-datagrid-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n min-height: 52px;\r\n padding: 0 16px;\r\n border-top: 1px solid rgba(224, 224, 224, 1);\r\n background: #fff;\r\n gap: 16px;\r\n}\r\n\r\n.vertex-datagrid-footer-left,\r\n.vertex-datagrid-footer-center,\r\n.vertex-datagrid-footer-right {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n}\r\n\r\n.vertex-datagrid-footer-center {\r\n flex: 1;\r\n justify-content: center;\r\n}\r\n\r\n.vertex-datagrid-filter-chip {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 4px 12px;\r\n border: 1px solid #1976d2;\r\n background: rgba(25, 118, 210, 0.08);\r\n color: #1976d2;\r\n font-size: 0.8125rem;\r\n font-weight: 500;\r\n border-radius: 16px;\r\n cursor: pointer;\r\n transition: background 0.2s;\r\n}\r\n\r\n.vertex-datagrid-filter-chip:hover {\r\n background: rgba(25, 118, 210, 0.16);\r\n}\r\n\r\n.vertex-datagrid-pagesize-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n cursor: default;\r\n}\r\n\r\n.vertex-datagrid-pagesize-select {\r\n padding: 4px 28px 4px 8px;\r\n border: 1px solid rgba(0, 0, 0, 0.23);\r\n border-radius: 4px;\r\n font-size: 0.875rem;\r\n font-family: inherit;\r\n background: #fff url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.54)" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>\') no-repeat right 4px center;\r\n background-size: 16px;\r\n cursor: pointer;\r\n appearance: none;\r\n transition: border-color 0.2s;\r\n min-width: 70px;\r\n}\r\n\r\n.vertex-datagrid-pagesize-select:hover {\r\n border-color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-pagesize-select:focus {\r\n outline: none;\r\n border-color: #1976d2;\r\n}\r\n\r\n.vertex-datagrid-pagination {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n\r\n.vertex-datagrid-pagination-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n color: rgba(0, 0, 0, 0.54);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: background 0.2s, color 0.2s;\r\n}\r\n\r\n.vertex-datagrid-pagination-btn:hover:not(:disabled) {\r\n background: rgba(0, 0, 0, 0.04);\r\n color: rgba(0, 0, 0, 0.87);\r\n}\r\n\r\n.vertex-datagrid-pagination-btn:disabled {\r\n color: rgba(0, 0, 0, 0.26);\r\n cursor: default;\r\n}\r\n\r\n/* ==========================================\r\n Scrollbar Styling\r\n ========================================== */\r\n\r\n.vertex-datagrid-container::-webkit-scrollbar {\r\n width: 12px;\r\n height: 12px;\r\n}\r\n\r\n.vertex-datagrid-container::-webkit-scrollbar-track {\r\n background: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vertex-datagrid-container::-webkit-scrollbar-thumb {\r\n background: rgba(0, 0, 0, 0.2);\r\n border-radius: 6px;\r\n border: 2px solid transparent;\r\n background-clip: padding-box;\r\n}\r\n\r\n.vertex-datagrid-container::-webkit-scrollbar-thumb:hover {\r\n background: rgba(0, 0, 0, 0.3);\r\n background-clip: padding-box;\r\n}\r\n\r\n/* ==========================================\r\n Responsive\r\n ========================================== */\r\n\r\n@media (max-width: 768px) {\r\n .vertex-datagrid-footer {\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n \r\n .vertex-datagrid-footer-left,\r\n .vertex-datagrid-footer-center,\r\n .vertex-datagrid-footer-right {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n \r\n .vertex-datagrid-filter-controls {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .vertex-datagrid-filter-panel {\r\n width: 95%;\r\n max-height: 90vh;\r\n }\r\n}\r\n');const Qn=(r="string")=>{switch(r){case"number":return[{label:"=",value:"=",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)===n}},{label:"!=",value:"!=",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)!==n}},{label:">",value:">",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)>n}},{label:">=",value:">=",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)>=n}},{label:"<",value:"<",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)<n}},{label:"<=",value:"<=",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n=Number(r.value);return r=>Number(r)<=n}},{label:"is empty",value:"isEmpty",getApplyFilterFn:()=>r=>null==r||""===r},{label:"is not empty",value:"isNotEmpty",getApplyFilterFn:()=>r=>null!=r&&""!==r}];case"boolean":return[{label:"is",value:"is",getApplyFilterFn:r=>{if(null==r.value)return()=>!0;const n="true"===r.value;return r=>Boolean(r)===n}}];case"date":return[{label:"is",value:"is",getApplyFilterFn:r=>{if(!r.value)return()=>!0;const n=new Date(r.value).toDateString();return r=>!!r&&new Date(r).toDateString()===n}},{label:"after",value:"after",getApplyFilterFn:r=>{if(!r.value)return()=>!0;const n=new Date(r.value);return r=>!!r&&new Date(r)>n}},{label:"before",value:"before",getApplyFilterFn:r=>{if(!r.value)return()=>!0;const n=new Date(r.value);return r=>!!r&&new Date(r)<n}}];default:return[{label:"contains",value:"contains",getApplyFilterFn:r=>r.value?n=>null!=n&&String(n).toLowerCase().includes(r.value.toLowerCase()):()=>!0},{label:"equals",value:"equals",getApplyFilterFn:r=>r.value?n=>null!=n&&String(n).toLowerCase()===r.value.toLowerCase():()=>!0},{label:"starts with",value:"startsWith",getApplyFilterFn:r=>r.value?n=>null!=n&&String(n).toLowerCase().startsWith(r.value.toLowerCase()):()=>!0},{label:"ends with",value:"endsWith",getApplyFilterFn:r=>r.value?n=>null!=n&&String(n).toLowerCase().endsWith(r.value.toLowerCase()):()=>!0},{label:"is empty",value:"isEmpty",getApplyFilterFn:()=>r=>null==r||""===String(r).trim()},{label:"is not empty",value:"isNotEmpty",getApplyFilterFn:()=>r=>null!=r&&""!==String(r).trim()}]}},Zn=({column:t,anchorEl:a,onClose:o,onSort:l,onFilter:d,currentSort:s,hasFilter:v})=>{const x=i(null);if(c(()=>{const r=r=>{x.current&&!x.current.contains(r.target)&&a&&!a.contains(r.target)&&o()};return a&&document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[a,o]),!a)return null;const p=a.getBoundingClientRect();return n("div",{ref:x,className:"vertex-datagrid-column-menu",style:{position:"fixed",top:p.bottom+4,left:p.left,zIndex:1300},children:[t.sortable&&n(e,{children:[n("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{l("asc"),o()},children:[r(Ur,{size:16}),r("span",{children:"Sort ascending"}),"asc"===s&&r("span",{className:"vertex-datagrid-menu-check",children:"✓"})]}),n("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{l("desc"),o()},children:[r(Kr,{size:16}),r("span",{children:"Sort descending"}),"desc"===s&&r("span",{className:"vertex-datagrid-menu-check",children:"✓"})]}),s&&n("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{l(null),o()},children:[r("span",{style:{width:16}}),r("span",{children:"Unsort"})]}),t.filterable&&r("div",{className:"vertex-datagrid-column-menu-divider"})]}),t.filterable&&n("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{d(),o()},children:[r("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r("span",{children:v?"Edit filter":"Filter"}),v&&r("span",{className:"vertex-datagrid-menu-badge",children:"●"})]})]})},Jn=({columns:t,filterModel:a,onFilterModelChange:o,onClose:l,targetColumn:d})=>{const s=t.filter(r=>!1!==r.filterable),v=i(null);c(()=>{const r=r=>{v.current&&!v.current.contains(r.target)&&l()};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[l]),c(()=>{d&&0===a.items.length&&x(d)},[d]);const x=r=>{var n,e;const i=r||(null===(n=s[0])||void 0===n?void 0:n.field)||"",l=t.find(r=>r.field===i),c=(null==l?void 0:l.filterOperators)||Qn(null==l?void 0:l.type),d={id:Date.now(),field:i,operator:(null===(e=c[0])||void 0===e?void 0:e.value)||"contains",value:""};o({...a,items:[...a.items,d]})},p=(r,n)=>{var e;const i=[...a.items],l=i[r];if(i[r]={...l,...n},n.field&&n.field!==l.field){const a=t.find(r=>r.field===n.field),o=(null==a?void 0:a.filterOperators)||Qn(null==a?void 0:a.type);i[r].operator=(null===(e=o[0])||void 0===e?void 0:e.value)||"contains"}o({...a,items:i})},m=()=>{o({...a,logicOperator:"and"===a.logicOperator?"or":"and"})};return r("div",{className:"vertex-datagrid-filter-panel-overlay",children:n("div",{ref:v,className:"vertex-datagrid-filter-panel",children:[n("div",{className:"vertex-datagrid-filter-panel-header",children:[r(Sn,{weight:"semibold",size:"sm",children:"Filters"}),r("button",{className:"vertex-datagrid-filter-close",onClick:l,children:n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[r("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),r("div",{className:"vertex-datagrid-filter-panel-body",children:0===a.items.length?n("div",{className:"vertex-datagrid-filter-empty",children:[r("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:r("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r(Sn,{size:"sm",color:"secondary",children:"No filters applied"}),r(pr,{variant:"outline",size:"sm",onClick:()=>x(),children:"Add filter"})]}):n(e,{children:[a.items.map((e,i)=>{var l;const c=t.find(r=>r.field===e.field),d=(null==c?void 0:c.filterOperators)||Qn(null==c?void 0:c.type),v=!["isEmpty","isNotEmpty"].includes(e.operator);return n("div",{className:"vertex-datagrid-filter-row",children:[i>0&&r("button",{className:"vertex-datagrid-filter-logic-btn",onClick:m,title:"Toggle AND/OR",children:(null===(l=a.logicOperator)||void 0===l?void 0:l.toUpperCase())||"OR"}),n("div",{className:"vertex-datagrid-filter-controls",children:[r("select",{value:e.field,onChange:r=>p(i,{field:r.target.value}),className:"vertex-datagrid-filter-select",children:s.map(n=>r("option",{value:n.field,children:n.headerName},n.field))}),r("select",{value:e.operator,onChange:r=>p(i,{operator:r.target.value}),className:"vertex-datagrid-filter-select",children:d.map(n=>r("option",{value:n.value,children:n.label},n.value))}),v&&r(cn,{value:e.value||"",onChange:r=>p(i,{value:r.target.value}),placeholder:"Value",size:"sm"}),r("button",{className:"vertex-datagrid-filter-remove",onClick:()=>(r=>{const n=a.items.filter((n,e)=>e!==r);o({...a,items:n})})(i),title:"Remove filter",children:n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[r("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})]},e.id||i)}),r("div",{className:"vertex-datagrid-filter-actions",children:r(pr,{variant:"ghost",size:"sm",onClick:()=>x(),children:"+ Add filter"})})]})}),a.items.length>0&&r("div",{className:"vertex-datagrid-filter-panel-footer",children:r(pr,{variant:"ghost",size:"sm",onClick:()=>o({items:[],logicOperator:"or"}),children:"Clear all"})})]})})},re=({columns:e,rows:t,getRowId:a=(r,n)=>{var e;return null!==(e=r.id)&&void 0!==e?e:n},filterModel:o,onFilterModelChange:i,initialState:l,disableColumnFilter:c=!1,ignoreDiacritics:s=!1,sortModel:v,onSortModelChange:p,checkboxSelection:m=!1,rowSelectionModel:h,onRowSelectionModelChange:u,pagination:f=!0,pageSize:b=10,pageSizeOptions:w=[5,10,25,50,100],loading:y=!1,autoHeight:k=!1,density:_="standard",disableColumnMenu:z=!1,hideFooter:N=!1,size:C,className:S,...M})=>{var T,$;const{theme:I}=ar(),j=C||I.defaultSize,[A,D]=d((null===(T=null==l?void 0:l.filter)||void 0===T?void 0:T.filterModel)||{items:[],logicOperator:"or"}),[L,B]=d([]),[E,R]=d([]),[O,F]=d(0),[W,P]=d(b),[V,H]=d(!1),[Y,q]=d(null),[G,X]=d(),U=null!=o?o:A,K=null!=v?v:L,Q=null!=h?h:E,Z=x(r=>{i?i(r):D(r)},[i]),J=x(r=>{p?p(r):B(r)},[p]),rr=x(r=>{u?u(r):R(r)},[u]),nr=g(()=>c||0===U.items.length?t:t.filter(r=>{const n=U.items.map(n=>{const t=e.find(r=>r.field===n.field);if(!t)return!0;const a=t.valueGetter?t.valueGetter(r):r[n.field],o=(t.filterOperators||Qn(t.type)).find(r=>r.value===n.operator);if(!o)return!0;return o.getApplyFilterFn(n)(a)});return"and"===U.logicOperator?n.every(r=>r):n.some(r=>r)}),[t,U,e,c]),er=g(()=>{if(0===K.length)return nr;const r=[...nr],n=K[0],t=e.find(r=>r.field===n.field);return t?(r.sort((r,e)=>{const a=t.valueGetter?t.valueGetter(r):r[n.field],o=t.valueGetter?t.valueGetter(e):e[n.field];if(null==a&&null==o)return 0;if(null==a)return 1;if(null==o)return-1;let i=0;return i="number"===t.type?Number(a)-Number(o):"date"===t.type?new Date(a).getTime()-new Date(o).getTime():String(a).localeCompare(String(o)),"asc"===n.sort?i:-i}),r):r},[nr,K,e]),tr=g(()=>{if(!f)return er;const r=O*W,n=r+W;return er.slice(r,n)},[er,O,W,f]),or=x((r,n)=>{if(!r.sortable)return;let e;e=null===n?[]:[{field:r.field,sort:n}],J(e)},[J]),ir=x(r=>{const n=Q.includes(r)?Q.filter(n=>n!==r):[...Q,r];rr(n)},[Q,rr]),lr=x(()=>{if(Q.length===tr.length)rr([]);else{const r=tr.map((r,n)=>a(r,n));rr(r)}},[Q,tr,rr,a]),cr=Math.ceil(er.length/W),dr=U.items.length>0,sr=(r,n,t=!1)=>{if(!r.pinned)return{};const a={position:"sticky",zIndex:t?101:100,background:t?"#fafafa":"inherit"};if("left"===r.pinned){let r=m?58:0;for(let t=0;t<n;t++)"left"===e[t].pinned&&(r+=e[t].width||150);a.left=r}else if("right"===r.pinned){let n=0;for(let t=e.indexOf(r)+1;t<e.length;t++)"right"===e[t].pinned&&(n+=e[t].width||150);a.right=n}return a};return n("div",{className:`vertex-datagrid ${`vertex-datagrid--${_}`} ${`vertex-datagrid--${j}`} ${k?"vertex-datagrid--auto-height":""} ${S||""}`,...M,children:[r("div",{className:"vertex-datagrid-container",children:n("table",{className:"vertex-datagrid-table",children:[r("thead",{className:"vertex-datagrid-thead",children:n("tr",{children:[m&&r("th",{className:"vertex-datagrid-th vertex-datagrid-checkbox-cell",children:r(hr,{checked:Q.length===tr.length&&tr.length>0,indeterminate:Q.length>0&&Q.length<tr.length,onChange:lr})}),e.map((e,t)=>{const a=K.find(r=>r.field===e.field),o=!!a,i=null==a?void 0:a.sort,l=U.items.some(r=>r.field===e.field),c=sr(e,t,!0);return r("th",{className:`vertex-datagrid-th ${e.sortable?"vertex-datagrid-th--sortable":""} ${e.pinned?`vertex-datagrid-th--pinned-${e.pinned}`:""}`,style:{width:e.width,minWidth:e.minWidth,maxWidth:e.maxWidth,textAlign:e.headerAlign||e.align||"left",flex:e.flex,...c},children:n("div",{className:"vertex-datagrid-th-content",children:[n("div",{className:"vertex-datagrid-th-label",onClick:()=>e.sortable&&or(e,o?"asc"===i?"desc":null:"asc"),children:[r("span",{className:"vertex-datagrid-th-text",children:e.headerName}),e.sortable&&r("div",{className:"vertex-datagrid-sort-icon "+(o?"vertex-datagrid-sort-icon--active":""),children:o?r("asc"===i?Ur:Kr,{size:18}):r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",opacity:"0.4",children:r("path",{d:"M12 5v14M5 12l7 7 7-7"})})})]}),!z&&(e.sortable||e.filterable)&&n("button",{className:"vertex-datagrid-column-menu-btn "+(l?"vertex-datagrid-column-menu-btn--filtered":""),onClick:r=>{r.stopPropagation(),q({column:e,anchorEl:r.currentTarget})},title:"Column options",children:[n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:[r("circle",{cx:"12",cy:"5",r:"2"}),r("circle",{cx:"12",cy:"12",r:"2"}),r("circle",{cx:"12",cy:"19",r:"2"})]}),l&&r("span",{className:"vertex-datagrid-filter-badge"})]})]})},e.field)})]})}),r("tbody",{className:"vertex-datagrid-tbody",children:y?r("tr",{children:r("td",{colSpan:e.length+(m?1:0),className:"vertex-datagrid-loading",children:n("div",{className:"vertex-datagrid-loading-content",children:[r("div",{className:"vertex-datagrid-spinner"}),r(Sn,{size:"sm",color:"secondary",children:"Loading..."})]})})}):0===tr.length?r("tr",{children:r("td",{colSpan:e.length+(m?1:0),className:"vertex-datagrid-empty",children:n("div",{className:"vertex-datagrid-empty-content",children:[n("svg",{width:"64",height:"64",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1",opacity:"0.3",children:[r("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),r("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),r("line",{x1:"9",y1:"21",x2:"9",y2:"9"})]}),r(Sn,{size:"sm",color:"secondary",children:"No rows"})]})})}):tr.map((t,o)=>{const i=a(t,o),l=Q.includes(i);return n("tr",{className:"vertex-datagrid-row "+(l?"vertex-datagrid-row--selected":""),children:[m&&r("td",{className:"vertex-datagrid-td vertex-datagrid-checkbox-cell",children:r(hr,{checked:l,onChange:()=>ir(i)})}),e.map((n,e)=>{const a=n.valueGetter?n.valueGetter(t):t[n.field],o=n.valueFormatter?n.valueFormatter(a):a,i=n.renderCell?n.renderCell({row:t,value:a,field:n.field}):o,l=sr(n,e,!1);return r("td",{className:"vertex-datagrid-td "+(n.pinned?`vertex-datagrid-td--pinned-${n.pinned}`:""),style:{textAlign:n.align||"left",...l},children:i},n.field)})]},i)})})]})}),!N&&f&&n("div",{className:"vertex-datagrid-footer",children:[r("div",{className:"vertex-datagrid-footer-left",children:dr&&n("button",{className:"vertex-datagrid-filter-chip",onClick:()=>H(!0),children:[r("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),n("span",{children:[U.items.length," ",1===U.items.length?"filter":"filters"]})]})}),r("div",{className:"vertex-datagrid-footer-center",children:r(Sn,{size:"sm",color:"secondary",children:0===er.length?"0 rows":`${O*W+1}–${Math.min((O+1)*W,er.length)} of ${er.length}`})}),n("div",{className:"vertex-datagrid-footer-right",children:[n("label",{className:"vertex-datagrid-pagesize-label",children:[r(Sn,{size:"sm",color:"secondary",children:"Rows per page:"}),r("select",{value:W,onChange:r=>{P(Number(r.target.value)),F(0)},className:"vertex-datagrid-pagesize-select",children:w.map(n=>r("option",{value:n,children:n},n))})]}),n("div",{className:"vertex-datagrid-pagination",children:[r("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>F(0),disabled:0===O,title:"First page",children:r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M11 17l-5-5 5-5M18 17l-5-5 5-5"})})}),r("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>F(r=>Math.max(0,r-1)),disabled:0===O,title:"Previous page",children:r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M15 18l-6-6 6-6"})})}),n(Sn,{size:"sm",color:"secondary",children:["Page ",O+1," of ",cr||1]}),r("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>F(r=>Math.min(cr-1,r+1)),disabled:O>=cr-1,title:"Next page",children:r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M9 18l6-6-6-6"})})}),r("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>F(cr-1),disabled:O>=cr-1,title:"Last page",children:r("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r("path",{d:"M13 17l5-5-5-5M6 17l5-5-5-5"})})})]})]})]}),Y&&r(Zn,{column:Y.column,anchorEl:Y.anchorEl,onClose:()=>q(null),onSort:r=>or(Y.column,r),onFilter:()=>{X(Y.column.field),H(!0)},currentSort:null===($=K.find(r=>r.field===Y.column.field))||void 0===$?void 0:$.sort,hasFilter:U.items.some(r=>r.field===Y.column.field)}),V&&r(Jn,{columns:e,filterModel:U,onFilterModelChange:Z,onClose:()=>{H(!1),X(void 0)},targetColumn:G})]})};re.displayName="DataGrid";const ne=sr(re);vr("/* 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 ee=a.forwardRef(({textAlign:n="center",orientation:e="horizontal",variant:t="fullWidth",light:a=!1,flexItem:o=!1,children:i,component:l,className:c="",role:d,...s},v)=>{const x=l||(i||"vertical"===e?"div":"hr"),p=d||("hr"!==x?"separator":void 0),m=["vtx-divider",`vtx-divider--${e}`,`vtx-divider--${t}`,a&&"vtx-divider--light",o&&"vtx-divider--flex-item",i&&"vtx-divider--with-children",i&&`vtx-divider--text-${n}`,c].filter(Boolean).join(" ");return r(x,{ref:v,className:m,role:p,..."vertical"===e&&"hr"!==x?{"aria-orientation":"vertical"}:{},...s,children:i&&r("span",{className:"vtx-divider-wrapper",children:i})})});ee.displayName="Divider";const te=sr(ee);vr("/* 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 ae=a.forwardRef(({notifications:e,onNotificationClick:t,onMarkAllAsRead:a,onClose:o},i)=>{const l=e.filter(r=>!r.read).length;return n("div",{ref:i,className:"vtx-header-notifications-panel",children:[r("div",{className:"vtx-header-notifications-header",children:n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"subtitle2",noMargin:!0,children:"Notifications"}),l>0&&a&&r("button",{className:"vtx-header-notifications-mark-read",onClick:()=>{a(),o()},children:"Mark all as read"})]})}),r("div",{className:"vtx-header-notifications-list",children:0===e.length?n("div",{className:"vtx-header-notifications-empty",children:[r(zr,{}),r(Sn,{variant:"body2",color:"neutral.500",noMargin:!0,children:"No notifications"})]}):e.map(e=>n("div",{className:`vtx-header-notification-item ${e.read?"":"vtx-header-notification-item--unread"} ${e.type?`vtx-header-notification-item--${e.type}`:""}`,onClick:()=>{null==t||t(e),o()},children:[e.icon&&r("div",{className:"vtx-header-notification-icon",children:e.icon}),n("div",{className:"vtx-header-notification-content",children:[r(Sn,{variant:"body2",noMargin:!0,style:{fontWeight:e.read?400:600},children:e.title}),e.description&&r(Sn,{variant:"caption",color:"neutral.600",noMargin:!0,children:e.description}),r(Sn,{variant:"caption",color:"neutral.500",noMargin:!0,style:{marginTop:"4px"},children:e.time})]}),!e.read&&r("div",{className:"vtx-header-notification-dot"})]},e.id))})]})});ae.displayName="NotificationPanel";const oe=a.forwardRef(({logo:e,title:t,onToggleSidebar:a,showToggle:o=!0,notifications:l=[],onNotificationClick:s,onMarkAllAsRead:v,userName:x,userSubtitle:p,userAvatar:m,userMenuItems:h=[],actions:g,className:u="",sticky:f=!0},b)=>{const[w,y]=d(!1),[k,_]=d(!1),z=i(null),N=i(null),C=i(null),S=l.filter(r=>!r.read).length;c(()=>{const r=r=>{z.current&&!z.current.contains(r.target)&&C.current&&!C.current.contains(r.target)&&y(!1),N.current&&!N.current.contains(r.target)&&_(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]);const M=["vtx-header",f&&"vtx-header--sticky",u].filter(Boolean).join(" ");return n("header",{ref:b,className:M,children:[n(Nn,{align:"center",gap:16,style:{flex:1},children:[o&&a&&r("button",{className:"vtx-header-toggle",onClick:a,"aria-label":"Toggle sidebar",children:r(Nr,{})}),e&&r("div",{className:"vtx-header-logo",children:e}),t&&r(Sn,{variant:"h6",noMargin:!0,className:"vtx-header-title",children:t})]}),g&&r("div",{className:"vtx-header-actions",children:g}),n("div",{className:"vtx-header-right",children:[l&&l.length>0&&n("div",{className:"vtx-header-notifications",ref:z,children:[n("button",{className:"vtx-header-icon-button "+(w?"vtx-header-icon-button--active":""),onClick:()=>y(!w),"aria-label":"Notifications",children:[r(zr,{}),S>0&&r(Xn,{variant:"error",size:"sm",style:{position:"absolute",top:"4px",right:"4px",minWidth:"18px",height:"18px",padding:"0 4px"},children:S>9?"9+":S})]}),w&&r(ae,{ref:C,notifications:l,onNotificationClick:s,onMarkAllAsRead:v,onClose:()=>y(!1)})]}),x&&n("div",{className:"vtx-header-user-menu",ref:N,children:[n("button",{className:"vtx-header-user-button "+(k?"vtx-header-user-button--active":""),onClick:()=>_(!k),"aria-label":"User menu",children:[r(qn,{src:m,alt:x,size:"sm"}),!m&&r("span",{className:"vtx-header-avatar-fallback",children:x.split(" ").map(r=>r[0]).join("").slice(0,2)}),n("div",{className:"vtx-header-user-info",children:[r(Sn,{variant:"body2",noMargin:!0,style:{fontWeight:600},children:x}),p&&r(Sn,{variant:"caption",color:"neutral.600",noMargin:!0,children:p})]}),r(yr,{})]}),k&&r("div",{className:"vtx-header-user-dropdown",children:r(In,{items:h,responsive:!1})})]})]})]})});oe.displayName="Header";const ie=sr(oe);vr("/* ===================================\n SideMenu - Enterprise Sidebar Navigation\n =================================== */\n\n/* CSS Variables for Theming - Using Theme Tokens */\n:root {\n /* Default/Light Theme - Using theme token colors */\n --vtx-sidemenu-bg: var(--vtx-color-neutral-50, #ffffff);\n --vtx-sidemenu-border: var(--vtx-color-neutral-200, #e5e5e5);\n --vtx-sidemenu-shadow: var(--vtx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n \n --vtx-sidemenu-item-color: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-item-hover-bg: var(--vtx-color-neutral-100, #f5f5f5);\n --vtx-sidemenu-item-active-bg: var(--vtx-color-primary-50, #eff6ff);\n --vtx-sidemenu-item-active-color: var(--vtx-color-primary-600, #2563eb);\n --vtx-sidemenu-item-icon-color: var(--vtx-color-neutral-500, #737373);\n --vtx-sidemenu-item-icon-active-color: var(--vtx-color-primary-600, #2563eb);\n \n --vtx-sidemenu-submenu-bg: var(--vtx-color-neutral-50, #fafafa);\n --vtx-sidemenu-submenu-border: var(--vtx-color-neutral-100, #f5f5f5);\n \n --vtx-sidemenu-header-border: var(--vtx-color-neutral-200, #e5e5e5);\n --vtx-sidemenu-footer-border: var(--vtx-color-neutral-200, #e5e5e5);\n \n --vtx-sidemenu-toggle-bg: var(--vtx-color-neutral-100, #f5f5f5);\n --vtx-sidemenu-toggle-hover-bg: var(--vtx-color-neutral-200, #e5e5e5);\n --vtx-sidemenu-toggle-color: var(--vtx-color-neutral-500, #737373);\n \n --vtx-sidemenu-badge-bg: var(--vtx-color-error-500, #ef4444);\n --vtx-sidemenu-badge-color: var(--vtx-color-neutral-50, #ffffff);\n \n --vtx-sidemenu-transition-speed: var(--vtx-transition-base, 200ms);\n --vtx-sidemenu-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ===================================\n Base Sidebar Structure\n =================================== */\n\n.vtx-sidemenu {\n display: flex;\n flex-direction: column;\n background-color: var(--vtx-sidemenu-bg);\n height: 100vh;\n overflow: hidden;\n transition: width var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n position: relative;\n flex-shrink: 0;\n}\n\n.vtx-sidemenu--elevated {\n box-shadow: var(--vtx-sidemenu-shadow);\n}\n\n.vtx-sidemenu--bordered {\n border-right: 1px solid var(--vtx-sidemenu-border);\n}\n\n.vtx-sidemenu--right {\n border-right: none;\n border-left: 1px solid var(--vtx-sidemenu-border);\n}\n\n.vtx-sidemenu--collapsed {\n transition: width var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n}\n\n/* ===================================\n Header Section\n =================================== */\n\n.vtx-sidemenu-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px 16px;\n border-bottom: 1px solid var(--vtx-sidemenu-header-border);\n flex-shrink: 0;\n min-height: 72px;\n}\n\n.vtx-sidemenu-header-content {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-header {\n justify-content: center;\n padding: 20px 8px;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-header-content {\n display: none;\n}\n\n/* ===================================\n Content Section (Scrollable Menu Items)\n =================================== */\n\n.vtx-sidemenu-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 12px 12px;\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, #d4d4d4);\n border-radius: var(--vtx-border-radius-sm, 0.125rem);\n}\n\n.vtx-sidemenu-content::-webkit-scrollbar-thumb:hover {\n background: var(--vtx-color-neutral-400, #a3a3a3);\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-content {\n padding: 12px 8px;\n}\n\n/* ===================================\n Footer Section\n =================================== */\n\n.vtx-sidemenu-footer {\n border-top: 1px solid var(--vtx-sidemenu-footer-border);\n padding: 16px 12px;\n flex-shrink: 0;\n}\n\n.vtx-sidemenu--collapsed .vtx-sidemenu-footer {\n padding: 16px 8px;\n text-align: center;\n}\n\n/* ===================================\n Menu Items - Professional Style (Same as Menu component)\n =================================== */\n\n.vtx-sidemenu-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 text-decoration: none;\n outline: none;\n border-right: none;\n border-top: none;\n border-bottom: none;\n text-align: left;\n width: 100%;\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:active:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active) {\n background: var(--vtx-color-neutral-200);\n transform: scale(0.98);\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 Menu Item - Professional Style */\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--active:hover {\n background-color: var(--vtx-color-primary-100);\n}\n\n/* Disabled Menu Item */\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 gap: 0;\n}\n\n/* Icon Styling - Professional (Same as Menu) */\n.vtx-sidemenu-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n color: var(--vtx-color-neutral-600);\n transition: color 0.15s ease-in-out;\n}\n\n.vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled) .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-sidemenu-item-icon svg {\n width: 100%;\n height: 100%;\n transition: inherit;\n}\n\n/* Text Content */\n.vtx-sidemenu-item-label {\n flex: 1;\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Badge */\n.vtx-sidemenu-item-badge {\n font-size: var(--vtx-font-size-xs);\n font-weight: var(--vtx-font-weight-semibold);\n min-width: 20px;\n height: 18px;\n padding: 0 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--vtx-radius-full);\n background: var(--vtx-color-error-500);\n color: white;\n line-height: 1;\n top: 8px;\n right: 8px;\n box-shadow: 0 0 0 2px var(--vtx-sidemenu-bg);\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.7;\n }\n}\n\n/* Chevron Icon */\n.vtx-sidemenu-chevron {\n display: flex;\n align-items: center;\n color: var(--vtx-color-neutral-400);\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.vtx-sidemenu-chevron--open {\n transform: rotate(180deg);\n}\n\n/* ===================================\n Submenu - Professional Style (Same as Menu)\n =================================== */\n\n.vtx-sidemenu-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-sidemenu-submenu .vtx-sidemenu-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-sidemenu-submenu .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-submenu .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-submenu .vtx-sidemenu-item--active:hover {\n background-color: var(--vtx-color-primary-100);\n}\n\n.vtx-sidemenu-submenu .vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n color: var(--vtx-color-primary-600);\n}\n\n/* Nested submenu - additional indentation */\n.vtx-sidemenu-submenu .vtx-sidemenu-submenu {\n padding-left: var(--vtx-spacing-4);\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* ===================================\n Collapse Toggle Button\n =================================== */\n\n.vtx-sidemenu-collapse-wrapper {\n padding: 12px 16px;\n display: flex;\n justify-content: center;\n border-top: 1px solid var(--vtx-sidemenu-header-border);\n}\n\n.vtx-sidemenu-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--vtx-sidemenu-toggle-bg);\n border: none;\n cursor: pointer;\n color: var(--vtx-sidemenu-toggle-color);\n transition: all var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n outline: none;\n}\n\n.vtx-sidemenu-toggle:hover {\n background-color: var(--vtx-sidemenu-toggle-hover-bg);\n}\n\n.vtx-sidemenu-toggle:focus-visible {\n outline: 2px solid var(--vtx-color-primary-600, #2563eb);\n outline-offset: 2px;\n}\n\n.vtx-sidemenu-toggle-icon {\n transition: transform var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n}\n\n.vtx-sidemenu-toggle-icon--rotated {\n transform: rotate(180deg);\n}\n\n/* ===================================\n VARIANT: Compact\n =================================== */\n\n.vtx-sidemenu--compact .vtx-sidemenu-item-content {\n padding: 8px 12px;\n}\n\n.vtx-sidemenu--compact .vtx-sidemenu-content {\n padding: 4px;\n}\n\n.vtx-sidemenu--compact .vtx-sidemenu-header {\n padding: 16px 12px;\n min-height: 56px;\n}\n\n.vtx-sidemenu--compact .vtx-sidemenu-item-label {\n font-size: 13px;\n}\n\n.vtx-sidemenu--compact .vtx-sidemenu-item-icon {\n width: 18px;\n height: 18px;\n}\n\n/* ===================================\n VARIANT: Modern\n =================================== */\n\n.vtx-sidemenu--modern .vtx-sidemenu-item {\n border-radius: 12px;\n position: relative;\n overflow: hidden;\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n opacity: 0;\n transition: opacity var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item--active::before {\n opacity: 1;\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled) {\n transform: translateX(2px);\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item-icon {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.vtx-sidemenu--modern .vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.7;\n }\n}\n\n/* ===================================\n VARIANT: Enterprise\n =================================== */\n\n.vtx-sidemenu--enterprise {\n border-right: 1px solid #e5e7eb;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-item {\n border-radius: 6px;\n margin-bottom: 2px;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-item-content {\n padding: 12px 16px;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-item-label {\n font-size: 14px;\n font-weight: 500;\n letter-spacing: -0.01em;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-item--active {\n background-color: var(--vtx-color-primary-50, #eff6ff);\n border-left: 3px solid var(--vtx-color-primary-600, #2563eb);\n padding-left: 13px;\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-header {\n padding: var(--vtx-spacing-6, 1.5rem) var(--vtx-spacing-5, 1.25rem);\n border-bottom: 2px solid var(--vtx-color-neutral-200, #e5e5e5);\n}\n\n.vtx-sidemenu--enterprise .vtx-sidemenu-submenu {\n background-color: var(--vtx-color-neutral-50, #fafafa);\n border-left: 2px solid var(--vtx-color-neutral-200, #e5e5e5);\n margin-left: var(--vtx-spacing-3, 0.75rem);\n border-radius: 0 var(--vtx-border-radius-lg, 0.5rem) var(--vtx-border-radius-lg, 0.5rem) 0;\n}\n\n/* ===================================\n VARIANT: Minimal\n =================================== */\n\n.vtx-sidemenu--minimal {\n background-color: transparent;\n box-shadow: none;\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-item {\n border-radius: 4px;\n margin-bottom: 0;\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled) {\n background-color: rgba(0, 0, 0, 0.03);\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-item--active {\n background-color: rgba(37, 99, 235, 0.08);\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-header,\n.vtx-sidemenu--minimal .vtx-sidemenu-footer {\n border-color: transparent;\n}\n\n.vtx-sidemenu--minimal .vtx-sidemenu-submenu {\n background-color: transparent;\n}\n\n/* ===================================\n THEME: Dark - Using Theme Tokens\n =================================== */\n\n.vtx-sidemenu--dark {\n --vtx-sidemenu-bg: var(--vtx-color-neutral-800, #262626);\n --vtx-sidemenu-border: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-shadow: var(--vtx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n \n --vtx-sidemenu-item-color: var(--vtx-color-neutral-200, #e5e5e5);\n --vtx-sidemenu-item-hover-bg: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-item-active-bg: var(--vtx-color-primary-600, #2563eb);\n --vtx-sidemenu-item-active-color: var(--vtx-color-neutral-50, #fafafa);\n --vtx-sidemenu-item-icon-color: var(--vtx-color-neutral-400, #a3a3a3);\n --vtx-sidemenu-item-icon-active-color: var(--vtx-color-neutral-50, #fafafa);\n \n --vtx-sidemenu-submenu-bg: var(--vtx-color-neutral-900, #171717);\n --vtx-sidemenu-submenu-border: var(--vtx-color-neutral-700, #404040);\n \n --vtx-sidemenu-header-border: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-footer-border: var(--vtx-color-neutral-700, #404040);\n \n --vtx-sidemenu-toggle-bg: var(--vtx-color-neutral-700, #404040);\n --vtx-sidemenu-toggle-hover-bg: var(--vtx-color-neutral-600, #525252);\n --vtx-sidemenu-toggle-color: var(--vtx-color-neutral-400, #a3a3a3);\n}\n\n/* ===================================\n THEME: Primary - Using Theme Tokens\n =================================== */\n\n.vtx-sidemenu--primary {\n --vtx-sidemenu-bg: var(--vtx-color-primary-800, #1e40af);\n --vtx-sidemenu-border: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-shadow: var(--vtx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n \n --vtx-sidemenu-item-color: var(--vtx-color-primary-100, #dbeafe);\n --vtx-sidemenu-item-hover-bg: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-item-active-bg: var(--vtx-color-primary-500, #3b82f6);\n --vtx-sidemenu-item-active-color: var(--vtx-color-neutral-50, #fafafa);\n --vtx-sidemenu-item-icon-color: var(--vtx-color-primary-300, #93c5fd);\n --vtx-sidemenu-item-icon-active-color: var(--vtx-color-neutral-50, #fafafa);\n \n --vtx-sidemenu-submenu-bg: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-submenu-border: var(--vtx-color-primary-800, #1e40af);\n \n --vtx-sidemenu-header-border: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-footer-border: var(--vtx-color-primary-900, #1e3a8a);\n \n --vtx-sidemenu-toggle-bg: var(--vtx-color-primary-900, #1e3a8a);\n --vtx-sidemenu-toggle-hover-bg: var(--vtx-color-primary-700, #1d4ed8);\n --vtx-sidemenu-toggle-color: var(--vtx-color-primary-300, #93c5fd);\n}\n\n/* ===================================\n THEME: Gradient\n =================================== */\n\n.vtx-sidemenu--gradient {\n background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);\n --vtx-sidemenu-bg: transparent;\n --vtx-sidemenu-border: rgba(255, 255, 255, 0.1);\n --vtx-sidemenu-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);\n \n --vtx-sidemenu-item-color: rgba(255, 255, 255, 0.9);\n --vtx-sidemenu-item-hover-bg: rgba(255, 255, 255, 0.1);\n --vtx-sidemenu-item-active-bg: rgba(255, 255, 255, 0.2);\n --vtx-sidemenu-item-active-color: #ffffff;\n --vtx-sidemenu-item-icon-color: rgba(255, 255, 255, 0.7);\n --vtx-sidemenu-item-icon-active-color: #ffffff;\n \n --vtx-sidemenu-submenu-bg: rgba(0, 0, 0, 0.1);\n --vtx-sidemenu-submenu-border: rgba(255, 255, 255, 0.1);\n \n --vtx-sidemenu-header-border: rgba(255, 255, 255, 0.1);\n --vtx-sidemenu-footer-border: rgba(255, 255, 255, 0.1);\n \n --vtx-sidemenu-toggle-bg: rgba(255, 255, 255, 0.1);\n --vtx-sidemenu-toggle-hover-bg: rgba(255, 255, 255, 0.2);\n --vtx-sidemenu-toggle-color: rgba(255, 255, 255, 0.9);\n}\n\n/* ===================================\n Responsive Adjustments\n =================================== */\n\n/* Mobile Menu Button */\n.vtx-mobile-menu-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border: none;\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\n background-color: transparent;\n color: var(--vtx-color-neutral-700, #404040);\n cursor: pointer;\n transition: all var(--vtx-transition-base, 200ms) cubic-bezier(0.4, 0, 0.2, 1);\n outline: none;\n position: relative;\n overflow: hidden;\n}\n\n.vtx-mobile-menu-button::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--vtx-color-neutral-900, #171717);\n opacity: 0;\n transition: opacity var(--vtx-transition-base, 200ms) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.vtx-mobile-menu-button:hover::before {\n opacity: 0.05;\n}\n\n.vtx-mobile-menu-button:active::before {\n opacity: 0.1;\n}\n\n.vtx-mobile-menu-button:focus-visible {\n outline: 2px solid var(--vtx-color-primary-600, #2563eb);\n outline-offset: 2px;\n}\n\n.vtx-mobile-menu-button svg {\n position: relative;\n z-index: 1;\n}\n\n/* Button Variants */\n.vtx-mobile-menu-button--default {\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\n}\n\n.vtx-mobile-menu-button--default:hover {\n background-color: var(--vtx-color-neutral-200, #e5e5e5);\n}\n\n.vtx-mobile-menu-button--ghost {\n background-color: transparent;\n border: 1px solid var(--vtx-color-neutral-300, #d4d4d4);\n}\n\n.vtx-mobile-menu-button--ghost:hover {\n border-color: var(--vtx-color-neutral-400, #a3a3a3);\n background-color: var(--vtx-color-neutral-50, #fafafa);\n}\n\n.vtx-mobile-menu-button--minimal {\n background-color: transparent;\n}\n\n/* Hide on desktop by default */\n@media (min-width: 769px) {\n .vtx-mobile-menu-button {\n display: none;\n }\n}\n\n/* Mobile: Overlay Mode */\n.vtx-sidemenu--mobile {\n position: fixed;\n left: 0;\n top: 0;\n z-index: var(--vtx-z-index-modal, 1200);\n transform: translateX(-100%);\n transition: transform var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n box-shadow: var(--vtx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));\n}\n\n.vtx-sidemenu--mobile.vtx-sidemenu--right {\n left: auto;\n right: 0;\n transform: translateX(100%);\n}\n\n.vtx-sidemenu--mobile.vtx-sidemenu--mobile-open {\n transform: translateX(0);\n}\n\n/* Backdrop */\n.vtx-sidemenu-backdrop {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: calc(var(--vtx-z-index-modal, 1200) - 1);\n animation: fadeIn 200ms var(--vtx-sidemenu-transition-easing);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Mobile Close Button */\n.vtx-sidemenu-mobile-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\n background-color: transparent;\n border: none;\n cursor: pointer;\n color: var(--vtx-sidemenu-item-color);\n transition: all var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\n outline: none;\n flex-shrink: 0;\n}\n\n.vtx-sidemenu-mobile-close:hover {\n background-color: var(--vtx-sidemenu-item-hover-bg);\n}\n\n.vtx-sidemenu-mobile-close:focus-visible {\n outline: 2px solid var(--vtx-color-primary-600, #2563eb);\n outline-offset: 2px;\n}\n\n/* Mobile: Larger touch targets */\n.vtx-sidemenu--mobile .vtx-sidemenu-item-content {\n padding: 14px 16px;\n min-height: 48px;\n}\n\n.vtx-sidemenu--mobile .vtx-sidemenu-item-icon {\n width: 24px;\n height: 24px;\n}\n\n.vtx-sidemenu--mobile .vtx-sidemenu-toggle {\n width: 44px;\n height: 44px;\n}\n\n.vtx-sidemenu--mobile .vtx-sidemenu-header {\n min-height: 64px;\n padding: var(--vtx-spacing-4, 1rem) var(--vtx-spacing-4, 1rem);\n}\n\n/* Desktop: Push Mode */\n@media (min-width: 769px) {\n .vtx-sidemenu {\n position: relative;\n transform: none !important;\n }\n}\n\n/* Tablet: Adjust for medium screens */\n@media (max-width: 1024px) and (min-width: 769px) {\n .vtx-sidemenu {\n width: 240px !important;\n }\n \n .vtx-sidemenu--collapsed {\n width: 64px !important;\n }\n}\n\n/* ===================================\n Accessibility\n =================================== */\n\n@media (prefers-reduced-motion: reduce) {\n .vtx-sidemenu,\n .vtx-sidemenu-item,\n .vtx-sidemenu-toggle,\n .vtx-sidemenu-item-icon,\n .vtx-sidemenu-item-chevron,\n .vtx-sidemenu-submenu {\n transition: none;\n animation: none;\n }\n}\n\n/* High Contrast Mode */\n@media (prefers-contrast: high) {\n .vtx-sidemenu {\n border: 2px solid currentColor;\n }\n \n .vtx-sidemenu-item--active {\n outline: 2px solid currentColor;\n outline-offset: -2px;\n }\n}\n");const le=({isOpen:n})=>r("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",className:"vtx-sidemenu-chevron "+(n?"vtx-sidemenu-chevron--open":""),children:r("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),ce=a.forwardRef(({label:t,onClick:a,icon:o,disabled:i=!1,active:l=!1,items:c,badge:s,href:v,collapsed:x=!1,level:p=0},m)=>{const[h,g]=d(!1),u=c&&c.length>0,f=r(e,{children:n(Nn,{align:"center",gap:x?0:12,style:{flex:1,minWidth:0},children:[o&&r("span",{className:"vtx-sidemenu-item-icon",children:o}),!x&&n(e,{children:[r(Sn,{variant:"body2",noMargin:!0,style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t}),s&&r("span",{className:"vtx-sidemenu-item-badge",children:s}),u&&r(le,{isOpen:h})]})]})}),b=["vtx-sidemenu-item",l&&"vtx-sidemenu-item--active",i&&"vtx-sidemenu-item--disabled",u&&"vtx-sidemenu-item--has-submenu",x&&"vtx-sidemenu-item--collapsed"].filter(Boolean).join(" ");return n(e,{children:[r(v?"a":"div",{ref:m,className:b,onClick:r=>{i||(u?(r.preventDefault(),g(!h)):a&&(r.preventDefault(),a()))},onKeyDown:r=>{i||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),u?g(!h):null==a||a())},role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i,"aria-expanded":u?h:void 0,href:v,title:x?t:void 0,"data-label":x?t:void 0,children:f}),u&&h&&!x&&r("div",{className:"vtx-sidemenu-submenu",children:c.map((n,e)=>r(ce,{...n,collapsed:x,level:p+1},e))})]})});ce.displayName="SideMenuItem";const de=a.forwardRef(({items:e,collapsed:t=!1,onCollapseToggle:a,className:o="",width:i="260px",collapsedWidth:l="80px",header:c,footer:d},s)=>{const v=t?"number"==typeof l?`${l}px`:l:"number"==typeof i?`${i}px`:i,x=["vtx-sidemenu",t&&"vtx-sidemenu--collapsed",o].filter(Boolean).join(" ");return n("aside",{ref:s,className:x,style:{width:v},role:"navigation",children:[c&&r("div",{className:"vtx-sidemenu-header",children:c}),r("div",{className:"vtx-sidemenu-content",children:e.map((n,e)=>r(ce,{...n,collapsed:t},e))}),d&&r("div",{className:"vtx-sidemenu-footer",children:d})]})});de.displayName="SideMenu";const se=sr(de);function ve({columns:t,data:o,getRowKey:i,striped:l=!1,hoverable:c=!0,bordered:s=!1,size:v,caption:p,emptyMessage:m="No data available",loading:h=!1,loadingContent:u,scrollable:f=!0,maxHeight:b,onRowClick:w,isRowSelected:y,onRowSelect:k,sortable:_=!1,sortConfig:z,onSortChange:N,className:C="",containerClassName:S="",selectable:M=!1,selectedRows:T=[],onSelectionChange:$,pagination:I=!1,page:j=0,rowsPerPage:A=10,rowsPerPageOptions:D=[5,10,25,50],onPageChange:L,onRowsPerPageChange:B,dense:E=!1,expandableRows:R=!1,renderExpandedRow:O,expandedRows:F=[],onExpandRow:W,stickyHeader:P=!1,toolbar:V,filterable:H=!1,filters:Y={},onFiltersChange:q,...G}){const{theme:X}=ar(),U=v||X.defaultSize,[K,Q]=d(z||null),[Z,J]=d(T),[rr,nr]=d(F),[er,tr]=d(j),[or,ir]=d(A),[lr,cr]=d(Y),dr=z||K,sr=T.length>0?T:Z,vr=F.length>0?F:rr,xr=L?j:er,pr=B?A:or,mr=Object.keys(Y).length>0?Y:lr,gr=r=>{if(!_)return;const n=(null==dr?void 0:dr.key)===r&&"asc"===dr.direction?"desc":"asc",e={key:r,direction:n};N?N(r,n):Q(e)},ur=g(()=>{if(!dr||!_)return o;const r=t.find(r=>r.key===dr.key),n=null==r?void 0:r.sortFn;return[...o].sort((r,e)=>{if(n)return"asc"===dr.direction?n(r,e):n(e,r);const t=r[dr.key],a=e[dr.key];if("string"==typeof t&&"string"==typeof a)return"asc"===dr.direction?t.localeCompare(a):a.localeCompare(t);if("number"==typeof t&&"number"==typeof a)return"asc"===dr.direction?t-a:a-t;const o=String(t),i=String(a);return"asc"===dr.direction?o.localeCompare(i):i.localeCompare(o)})},[o,dr,t,_]),fr=g(()=>H&&0!==Object.keys(mr).length?ur.filter(r=>Object.entries(mr).every(([n,e])=>{if(!e)return!0;const a=t.find(r=>r.key===n);if(null==a?void 0:a.filterFn)return a.filterFn(r,e);const o=r[n];return String(o||"").toLowerCase().includes(e.toLowerCase())})):ur,[ur,H,mr,t]),br=g(()=>{if(!I)return fr;const r=xr*pr;return fr.slice(r,r+pr)},[fr,I,xr,pr]),wr=I?br:fr,kr=x(r=>{if(!M)return;const n=r?wr.map((r,n)=>i(r,n)):[];$?$(n):J(n)},[M,wr,i,$]),_r=x((r,n)=>{if(!M)return;const e=n?[...sr,r]:sr.filter(n=>n!==r);$?$(e):J(e)},[M,sr,$]),zr=M&&wr.length>0&&wr.every((r,n)=>sr.includes(i(r,n))),Nr=M&&sr.length>0&&!zr,Tr=x(r=>{if(!R)return;const n=vr.includes(r)?vr.filter(n=>n!==r):[...vr,r];W?W(r):nr(n)},[R,vr,W]),$r=x(r=>{L?L(r):tr(r)},[L]),Ir=x(r=>{B?B(r):(ir(r),tr(0))},[B]),jr=x((r,n)=>{const e={...mr,[r]:n};n||delete e[r],q?q(e):cr(e),I&&(L?L(0):tr(0))},[mr,q,I,L]),Ar=["vtx-table-container",f&&"vtx-table-container--scrollable",b&&"vtx-table-container--fixed-header",P&&"vtx-table-container--sticky-header",S].filter(Boolean).join(" "),Dr=["vtx-table",`vtx-table--${U}`,E&&"vtx-table--dense",l&&"vtx-table--striped",c&&"vtx-table--hoverable",s&&"vtx-table--bordered",(w||M)&&"vtx-table--clickable",P&&"vtx-table--sticky-header",C].filter(Boolean).join(" "),Lr=(r,n,e)=>{k&&k(r,n),null==w||w(r,n,e)},Br=n=>{if(!_)return null;const e=(null==dr?void 0:dr.key)===n,t=null==dr?void 0:dr.direction;return r("span",e?{className:"vtx-table-sort-icon vtx-table-sort-icon--active",children:r("asc"===t?Ur:Kr,{size:14})}:{className:"vtx-table-sort-icon vtx-table-sort-icon--inactive",children:r(Ur,{size:14})})};return n("div",{className:"vtx-table-wrapper",children:[V&&r("div",{className:"vtx-table-toolbar",children:"object"==typeof V&&null!==V&&!a.isValidElement(V)&&"title"in V?n(Nn,{justify:"between",align:"center",style:{width:"100%"},children:[V.title&&r(Sn,{variant:"h6",noMargin:!0,children:V.title}),V.actions&&r("div",{className:"vtx-table-toolbar-actions",children:V.actions})]}):r(e,{children:V})}),M&&sr.length>0&&r("div",{className:"vtx-table-selection-toolbar",children:r(Nn,{align:"center",gap:16,children:n(Sn,{variant:"body2",noMargin:!0,children:[sr.length," selected"]})})}),r("div",{className:Ar,style:{maxHeight:b},children:n("table",{className:Dr,...G,children:[p&&r("caption",{className:"vtx-table-caption",children:p}),r("thead",{className:"vtx-table-header",children:n("tr",{children:[M&&r("th",{className:"vtx-table-header-cell vtx-table-cell--checkbox",children:r(hr,{checked:zr,indeterminate:Nr,onChange:r=>kr(r.target.checked),"aria-label":"Select all rows"})}),R&&r("th",{className:"vtx-table-header-cell vtx-table-cell--expand"}),t.map(e=>{const t=_&&!1!==e.sortable,a=H&&!1!==e.filterable,o=["vtx-table-header-cell",t&&"vtx-table-header-cell--sortable",e.sticky&&`vtx-table-header-cell--sticky-${e.sticky}`,e.headerClassName].filter(Boolean).join(" ");return r("th",{className:o,style:{width:e.width,minWidth:e.minWidth,maxWidth:e.maxWidth,textAlign:e.align||"left"},"aria-sort":(null==dr?void 0:dr.key)===e.key?"asc"===dr.direction?"ascending":"descending":void 0,children:n("div",{className:"vtx-table-header-content",children:[n("div",{className:"vtx-table-header-label",onClick:()=>t&&gr(e.key),onKeyDown:r=>{!t||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),gr(e.key))},role:t?"button":void 0,tabIndex:t?0:void 0,style:{cursor:t?"pointer":"default"},children:[r("span",{children:e.header}),t&&Br(e.key)]}),a&&r("div",{className:"vtx-table-filter",children:r(cn,{size:"sm",placeholder:e.filterPlaceholder||`Filter ${e.header}...`,value:mr[e.key]||"",onChange:r=>jr(e.key,r.target.value),className:"vtx-table-filter-input"})})]})},e.key)})]})}),r("tbody",{className:"vtx-table-body",children:h?r("tr",{children:r("td",{colSpan:t.length+(M?1:0)+(R?1:0),className:"vtx-table-loading",children:u||r("span",{className:"vtx-table-loading-spinner",children:"Loading..."})})}):0===wr.length?r("tr",{children:r("td",{colSpan:t.length+(M?1:0)+(R?1:0),className:"vtx-table-empty",children:m})}):wr.map((e,o)=>{const l=i(e,o),c=sr.includes(l),d=vr.includes(l),s=["vtx-table-row",c&&"vtx-table-row--selected",d&&"vtx-table-row--expanded"].filter(Boolean).join(" ");return n(a.Fragment,{children:[n("tr",{className:s,onClick:r=>{M&&!r.target.closest("input, button")||Lr(e,o,r)},role:w?"button":void 0,tabIndex:w?0:void 0,"aria-selected":c,onKeyDown:r=>{!w||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),Lr(e,o,r))},children:[M&&r("td",{className:"vtx-table-cell vtx-table-cell--checkbox",children:r(hr,{checked:c,onChange:r=>{r.stopPropagation(),_r(l,r.target.checked)},"aria-label":`Select row ${o+1}`})}),R&&r("td",{className:"vtx-table-cell vtx-table-cell--expand",children:r("button",{className:"vtx-table-expand-button",onClick:r=>{r.stopPropagation(),Tr(l)},"aria-label":d?"Collapse row":"Expand row","aria-expanded":d,children:r(d?Cr:yr,{size:16})})}),t.map(n=>{const t=["vtx-table-cell",n.sticky&&`vtx-table-cell--sticky-${n.sticky}`,n.className].filter(Boolean).join(" ");return r("td",{className:t,style:{textAlign:n.align||"left",width:n.width,minWidth:n.minWidth,maxWidth:n.maxWidth},children:n.render?n.render(e,o):e[n.key]},n.key)})]}),R&&d&&O&&r("tr",{className:"vtx-table-row-expanded",children:r("td",{colSpan:t.length+(M?1:0)+1,className:"vtx-table-cell-expanded",children:O(e,o)})})]},l)})})]})}),I&&r("div",{className:"vtx-table-pagination",children:n(Nn,{align:"center",justify:"between",style:{width:"100%"},children:[n(Nn,{align:"center",gap:8,children:[r(Sn,{variant:"body2",color:"neutral.600",noMargin:!0,children:"Rows per page:"}),r("select",{className:"vtx-table-pagination-select",value:pr,onChange:r=>Ir(Number(r.target.value)),"aria-label":"Rows per page",children:D.map(n=>r("option",{value:n,children:n},n))})]}),n(Nn,{align:"center",gap:16,children:[n(Sn,{variant:"body2",color:"neutral.600",noMargin:!0,children:[xr*pr+1,"–",Math.min((xr+1)*pr,fr.length)," of"," ",fr.length]}),n(Nn,{align:"center",gap:4,children:[r("button",{className:"vtx-table-pagination-button",onClick:()=>$r(0),disabled:0===xr,"aria-label":"First page",title:"First page",children:r(Qr,{size:18})}),r("button",{className:"vtx-table-pagination-button",onClick:()=>$r(xr-1),disabled:0===xr,"aria-label":"Previous page",title:"Previous page",children:r(Sr,{size:18})}),r("button",{className:"vtx-table-pagination-button",onClick:()=>$r(xr+1),disabled:(xr+1)*pr>=fr.length,"aria-label":"Next page",title:"Next page",children:r(Mr,{size:18})}),r("button",{className:"vtx-table-pagination-button",onClick:()=>$r(Math.ceil(fr.length/pr)-1),disabled:(xr+1)*pr>=fr.length,"aria-label":"Last page",title:"Last page",children:r(Zr,{size:18})})]})]})]})})]})}vr("/* Table Wrapper & Toolbar */\n.vtx-table-wrapper {\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: white;\n border-radius: var(--vtx-radius-lg);\n border: 1px solid var(--vtx-color-neutral-200);\n overflow: hidden;\n}\n\n.vtx-table-toolbar {\n padding: var(--vtx-spacing-4) var(--vtx-spacing-6);\n border-bottom: 1px solid var(--vtx-color-neutral-200);\n background-color: white;\n}\n\n.vtx-table-toolbar-actions {\n display: flex;\n align-items: center;\n gap: var(--vtx-spacing-2);\n}\n\n.vtx-table-selection-toolbar {\n padding: var(--vtx-spacing-3) var(--vtx-spacing-6);\n background-color: var(--vtx-color-primary-50);\n border-bottom: 1px solid var(--vtx-color-primary-100);\n}\n\n.vtx-table-container {\n width: 100%;\n overflow-x: auto;\n}\n\n.vtx-table-container--fixed-header,\n.vtx-table-container--sticky-header {\n overflow-y: auto;\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--sticky-header .vtx-table-header {\n position: sticky;\n top: 0;\n z-index: 10;\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 background-color: var(--vtx-color-neutral-50);\n}\n\n.vtx-table-header-cell--sortable {\n cursor: pointer;\n user-select: none;\n transition: background-color var(--vtx-transition-fast);\n}\n\n.vtx-table-header-cell--sortable:hover {\n background-color: var(--vtx-color-neutral-100);\n}\n\n.vtx-table-header-content {\n display: flex;\n flex-direction: column;\n gap: var(--vtx-spacing-2);\n width: 100%;\n}\n\n.vtx-table-header-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--vtx-spacing-2);\n width: 100%;\n}\n\n.vtx-table-header-label > span {\n flex: 1;\n}\n\n.vtx-table-sort-icon {\n display: flex;\n align-items: center;\n color: var(--vtx-color-neutral-400);\n transition: color var(--vtx-transition-fast);\n flex-shrink: 0;\n}\n\n.vtx-table-sort-icon--active {\n color: var(--vtx-color-primary-600);\n}\n\n.vtx-table-sort-icon--inactive {\n opacity: 0.4;\n}\n\n.vtx-table-header-cell--sortable:hover .vtx-table-sort-icon--inactive {\n opacity: 0.7;\n color: var(--vtx-color-neutral-600);\n}\n\n/* Filter Input */\n.vtx-table-filter {\n margin-top: var(--vtx-spacing-1);\n}\n\n.vtx-table-filter-input {\n width: 100%;\n font-size: var(--vtx-font-size-sm);\n min-width: 0;\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-row--selected {\n background-color: var(--vtx-color-primary-50);\n}\n\n.vtx-table-row--expanded {\n border-bottom: none;\n}\n\n.vtx-table-row-expanded {\n border-bottom: 1px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-table-row-expanded:last-child {\n border-bottom: none;\n}\n\n.vtx-table-cell-expanded {\n padding: var(--vtx-spacing-4);\n background-color: var(--vtx-color-neutral-50);\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.vtx-table-cell--checkbox {\n width: 48px;\n padding: var(--vtx-spacing-2);\n}\n\n.vtx-table-cell--expand {\n width: 48px;\n padding: var(--vtx-spacing-2);\n}\n\n.vtx-table-expand-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: transparent;\n border-radius: var(--vtx-radius-md);\n cursor: pointer;\n color: var(--vtx-color-neutral-600);\n transition: all var(--vtx-transition-fast);\n}\n\n.vtx-table-expand-button:hover {\n background-color: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-900);\n}\n\n/* Sizes */\n.vtx-table--sm .vtx-table-header-cell,\n.vtx-table--sm .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--lg .vtx-table-header-cell,\n.vtx-table--lg .vtx-table-cell {\n padding: var(--vtx-spacing-4) var(--vtx-spacing-6);\n font-size: var(--vtx-font-size-lg);\n}\n\n.vtx-table--dense .vtx-table-header-cell,\n.vtx-table--dense .vtx-table-cell {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n font-size: var(--vtx-font-size-sm);\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.vtx-table--hoverable .vtx-table-row--selected:hover {\n background-color: var(--vtx-color-primary-100);\n}\n\n/* Clickable */\n.vtx-table--clickable .vtx-table-row {\n cursor: pointer;\n}\n\n/* Bordered */\n.vtx-table--bordered .vtx-table-cell,\n.vtx-table--bordered .vtx-table-header-cell {\n border-right: 1px solid var(--vtx-color-neutral-200);\n}\n\n.vtx-table--bordered .vtx-table-cell:last-child,\n.vtx-table--bordered .vtx-table-header-cell:last-child {\n border-right: none;\n}\n\n/* Empty state */\n.vtx-table-empty {\n padding: var(--vtx-spacing-12) var(--vtx-spacing-4);\n text-align: center;\n color: var(--vtx-color-neutral-500);\n font-style: italic;\n}\n\n/* Loading state */\n.vtx-table-loading {\n padding: var(--vtx-spacing-12) var(--vtx-spacing-4);\n text-align: center;\n color: var(--vtx-color-neutral-600);\n}\n\n.vtx-table-loading-spinner {\n display: inline-block;\n animation: vtx-spin 1s linear infinite;\n}\n\n@keyframes vtx-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Pagination */\n.vtx-table-pagination {\n display: flex;\n align-items: center;\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\n border-top: 1px solid var(--vtx-color-neutral-200);\n background-color: white;\n}\n\n.vtx-table-pagination-select {\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\n border: 1px solid var(--vtx-color-neutral-300);\n border-radius: var(--vtx-radius-md);\n font-size: var(--vtx-font-size-sm);\n color: var(--vtx-color-neutral-900);\n background-color: white;\n cursor: pointer;\n transition: border-color var(--vtx-transition-fast);\n}\n\n.vtx-table-pagination-select:hover {\n border-color: var(--vtx-color-neutral-400);\n}\n\n.vtx-table-pagination-select:focus {\n outline: none;\n border-color: var(--vtx-color-primary-500);\n box-shadow: 0 0 0 3px var(--vtx-color-primary-100);\n}\n\n.vtx-table-pagination-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: transparent;\n border-radius: var(--vtx-radius-md);\n color: var(--vtx-color-neutral-600);\n cursor: pointer;\n transition: all var(--vtx-transition-fast);\n}\n\n.vtx-table-pagination-button:hover:not(:disabled) {\n background-color: var(--vtx-color-neutral-100);\n color: var(--vtx-color-neutral-900);\n}\n\n.vtx-table-pagination-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n/* Sticky columns */\n.vtx-table-cell--sticky-left,\n.vtx-table-header-cell--sticky-left {\n position: sticky;\n left: 0;\n z-index: 2;\n background-color: white;\n box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);\n}\n\n.vtx-table-cell--sticky-right,\n.vtx-table-header-cell--sticky-right {\n position: sticky;\n right: 0;\n z-index: 2;\n background-color: white;\n box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);\n}\n\n.vtx-table-header-cell--sticky-left,\n.vtx-table-header-cell--sticky-right {\n z-index: 11;\n background-color: var(--vtx-color-neutral-50);\n}\n"),ve.displayName="Table";const xe=sr(ve);vr("/* ==================== Timeline Base ==================== */\r\n.timeline {\r\n display: flex;\r\n width: 100%;\r\n position: relative;\r\n}\r\n\r\n/* ==================== Orientation ==================== */\r\n.timeline--horizontal {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n}\r\n\r\n.timeline--vertical {\r\n flex-direction: column;\r\n align-items: stretch;\r\n}\r\n\r\n/* ==================== Timeline Step ==================== */\r\n.timeline-step {\r\n display: flex;\r\n position: relative;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n}\r\n\r\n.timeline--horizontal .timeline-step {\r\n flex-direction: column;\r\n align-items: center;\r\n flex: 1 1 0;\r\n min-width: 0;\r\n position: relative;\r\n}\r\n\r\n.timeline--vertical .timeline-step {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n padding: var(--vtx-spacing-2, 8px) 0;\r\n position: relative;\r\n}\r\n\r\n/* Clickable steps */\r\n.timeline-step--clickable {\r\n cursor: pointer;\r\n}\r\n\r\n.timeline-step--clickable:hover .timeline-step-icon-wrapper {\r\n transform: scale(1.1);\r\n}\r\n\r\n/* ==================== Step Indicator ==================== */\r\n.timeline-step-indicator {\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.timeline--horizontal .timeline-step-indicator {\r\n margin-bottom: var(--vtx-spacing-2, 8px);\r\n}\r\n\r\n.timeline--vertical .timeline-step-indicator {\r\n margin-right: var(--vtx-spacing-3, 12px);\r\n align-items: flex-start;\r\n}\r\n\r\n/* ==================== Step Icon Wrapper ==================== */\r\n.timeline-step-icon-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n background: var(--vtx-color-neutral-200, #e5e5e5);\r\n color: var(--vtx-color-neutral-600, #525252);\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n flex-shrink: 0;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n/* Size variants */\r\n.timeline--sm {\r\n --icon-size: 24px;\r\n}\r\n\r\n.timeline--sm .timeline-step-icon-wrapper {\r\n width: var(--icon-size);\r\n height: var(--icon-size);\r\n}\r\n\r\n.timeline--md {\r\n --icon-size: 32px;\r\n}\r\n\r\n.timeline--md .timeline-step-icon-wrapper {\r\n width: var(--icon-size);\r\n height: var(--icon-size);\r\n}\r\n\r\n.timeline--lg {\r\n --icon-size: 40px;\r\n}\r\n\r\n.timeline--lg .timeline-step-icon-wrapper {\r\n width: var(--icon-size);\r\n height: var(--icon-size);\r\n}\r\n\r\n/* ==================== Step States ==================== */\r\n\r\n/* Completed State */\r\n.timeline-step--completed .timeline-step-icon-wrapper {\r\n background: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n.timeline-step--completed .timeline-step-label {\r\n color: var(--vtx-color-neutral-700, #404040);\r\n}\r\n\r\n/* Active State */\r\n.timeline-step--active .timeline-step-icon-wrapper {\r\n background: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n box-shadow: 0 0 0 4px var(--step-color-light, var(--vtx-color-success-100, #dcfce7));\r\n}\r\n\r\n.timeline-step--active .timeline-step-label {\r\n color: var(--vtx-color-neutral-900, #171717);\r\n}\r\n\r\n/* Pending State */\r\n.timeline-step--pending .timeline-step-icon-wrapper {\r\n background: var(--vtx-color-neutral-200, #e5e5e5);\r\n color: var(--vtx-color-neutral-500, #737373);\r\n}\r\n\r\n.timeline-step--pending .timeline-step-label {\r\n color: var(--vtx-color-neutral-500, #737373);\r\n}\r\n\r\n/* ==================== Connector Lines ==================== */\r\n.timeline-connector {\r\n background: var(--vtx-color-neutral-300, #d4d4d4);\r\n position: absolute;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n z-index: 0;\r\n}\r\n\r\n/* Horizontal connectors */\r\n.timeline--horizontal .timeline-connector {\r\n height: 3px;\r\n top: calc(var(--icon-size) / 2);\r\n transform: translateY(-50%);\r\n left: calc(50% + var(--icon-size) / 2);\r\n right: calc(-50% + var(--icon-size) / 2);\r\n width: auto;\r\n}\r\n\r\n/* Vertical connectors */\r\n.timeline--vertical .timeline-connector {\r\n width: 3px;\r\n left: calc(var(--icon-size) / 2);\r\n transform: translateX(-50%);\r\n top: calc(var(--icon-size) + var(--vtx-spacing-2, 8px));\r\n bottom: calc(-100% + var(--vtx-spacing-2, 8px));\r\n height: auto;\r\n}\r\n\r\n/* Filled/Active connector */\r\n.timeline-connector--filled {\r\n background: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n}\r\n\r\n/* ==================== Icons ==================== */\r\n.timeline-step-checkmark {\r\n width: 60%;\r\n height: 60%;\r\n}\r\n\r\n.timeline-step-number {\r\n font-size: 0.75em;\r\n font-weight: 600;\r\n line-height: 1;\r\n}\r\n\r\n.timeline-step-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: currentColor;\r\n}\r\n\r\n.timeline-step-custom-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.875em;\r\n}\r\n\r\n/* ==================== Step Content ==================== */\r\n.timeline-step-content {\r\n text-align: center;\r\n min-width: 0;\r\n}\r\n\r\n.timeline--horizontal .timeline-step-content {\r\n width: 100%;\r\n}\r\n\r\n.timeline--vertical .timeline-step-content {\r\n flex: 1;\r\n text-align: left;\r\n}\r\n\r\n.timeline-step-label {\r\n word-wrap: break-word;\r\n overflow-wrap: break-word;\r\n hyphens: auto;\r\n}\r\n\r\n.timeline--horizontal .timeline-step-label {\r\n display: block;\r\n}\r\n\r\n.timeline-step-description {\r\n margin-top: var(--vtx-spacing-1, 4px);\r\n opacity: 0.8;\r\n}\r\n\r\n/* ==================== Variants ==================== */\r\n\r\n/* Circle Variant - Larger circles */\r\n.timeline--circle .timeline-step-icon-wrapper {\r\n border: 2px solid var(--vtx-color-neutral-300, #d4d4d4);\r\n}\r\n\r\n.timeline--circle .timeline-step--completed .timeline-step-icon-wrapper,\r\n.timeline--circle .timeline-step--active .timeline-step-icon-wrapper {\r\n border-color: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n}\r\n\r\n/* Simple Variant - Minimal style */\r\n.timeline--simple .timeline-step-icon-wrapper {\r\n background: transparent;\r\n border: 2px solid var(--vtx-color-neutral-300, #d4d4d4);\r\n}\r\n\r\n.timeline--simple .timeline-step--completed .timeline-step-icon-wrapper,\r\n.timeline--simple .timeline-step--active .timeline-step-icon-wrapper {\r\n border-color: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n background: var(--step-color, var(--vtx-color-success-600, #16a34a));\r\n}\r\n\r\n/* ==================== Color Variants ==================== */\r\n.timeline--primary {\r\n --step-color: var(--vtx-color-primary-600, #2563eb);\r\n --step-color-light: var(--vtx-color-primary-100, #dbeafe);\r\n}\r\n\r\n.timeline--success {\r\n --step-color: var(--vtx-color-success-600, #16a34a);\r\n --step-color-light: var(--vtx-color-success-50, #f0fdf4);\r\n}\r\n\r\n.timeline--info {\r\n --step-color: var(--vtx-color-info-600, #2563eb);\r\n --step-color-light: var(--vtx-color-info-50, #eff6ff);\r\n}\r\n\r\n.timeline--warning {\r\n --step-color: var(--vtx-color-warning-600, #d97706);\r\n --step-color-light: var(--vtx-color-warning-50, #fffbeb);\r\n}\r\n\r\n.timeline--error {\r\n --step-color: var(--vtx-color-error-600, #dc2626);\r\n --step-color-light: var(--vtx-color-error-50, #fef2f2);\r\n}\r\n\r\n/* ==================== Responsive Design ==================== */\r\n\r\n@media (max-width: 768px) {\r\n .timeline--horizontal .timeline-step-content {\r\n font-size: 0.875rem;\r\n }\r\n\r\n .timeline--horizontal .timeline-step-label {\r\n font-size: 0.875rem;\r\n }\r\n\r\n .timeline--md {\r\n --icon-size: 28px;\r\n }\r\n\r\n .timeline--lg {\r\n --icon-size: 36px;\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .timeline--horizontal .timeline-step {\r\n min-width: 70px;\r\n }\r\n\r\n .timeline--horizontal .timeline-step-label {\r\n font-size: 0.8125rem;\r\n }\r\n\r\n .timeline-step-description {\r\n font-size: 0.6875rem;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .timeline--horizontal {\r\n overflow-x: auto;\r\n -webkit-overflow-scrolling: touch;\r\n padding-bottom: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .timeline--horizontal .timeline-step {\r\n min-width: 60px;\r\n }\r\n\r\n .timeline--horizontal .timeline-step-label {\r\n font-size: 0.75rem;\r\n line-height: 1.3;\r\n }\r\n\r\n .timeline--sm {\r\n --icon-size: 20px;\r\n }\r\n\r\n .timeline--md {\r\n --icon-size: 24px;\r\n }\r\n\r\n .timeline--lg {\r\n --icon-size: 32px;\r\n }\r\n\r\n .timeline-step-description {\r\n display: none;\r\n }\r\n\r\n .timeline--vertical .timeline-step-content {\r\n font-size: 0.875rem;\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .timeline--horizontal .timeline-step {\r\n min-width: 50px;\r\n }\r\n\r\n .timeline--horizontal .timeline-step-label {\r\n font-size: 0.6875rem;\r\n }\r\n\r\n .timeline--sm {\r\n --icon-size: 18px;\r\n }\r\n\r\n .timeline--md {\r\n --icon-size: 22px;\r\n }\r\n\r\n .timeline--lg {\r\n --icon-size: 28px;\r\n }\r\n}\r\n");const pe=({steps:e,currentStep:t,orientation:a="horizontal",variant:o="default",showCheckmarks:i=!0,color:l="success",size:c="md",className:d="",style:s})=>{const v=e.map(r=>"string"==typeof r?{label:r}:r),x=(n,e,t)=>n.icon?r("span",{className:"timeline-step-custom-icon",children:n.icon}):"completed"===t&&i?r("svg",{className:"timeline-step-checkmark",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})}):r("span","numbered"===o?{className:"timeline-step-number",children:e+1}:{className:"timeline-step-dot"});return r("div",{className:`timeline timeline--${a} timeline--${o} timeline--${l} timeline--${c} ${d}`,style:s,children:v.map((e,a)=>{const o=(r=>r<t?"completed":r===t?"active":"pending")(a),i=a===v.length-1,l=!!e.onClick,c=(r=>r<t)(a);return n("div",{className:`timeline-step timeline-step--${o} ${l?"timeline-step--clickable":""}`,onClick:()=>(r=>{r.onClick&&r.onClick()})(e),children:[r("div",{className:"timeline-step-indicator",children:r("div",{className:"timeline-step-icon-wrapper",children:x(e,a,o)})}),!i&&r("div",{className:"timeline-connector "+(c?"timeline-connector--filled":"")}),n("div",{className:"timeline-step-content",children:[r(Sn,{variant:"body2",weight:"active"===o?"semibold":"medium",noMargin:!0,className:"timeline-step-label",children:e.label}),e.description&&r(Sn,{variant:"caption",noMargin:!0,className:"timeline-step-description",children:e.description})]})]},a)})})};pe.displayName="Timeline";vr("/* 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 me=a.forwardRef(({container:n=!1,item:e=!1,spacing:t,rowSpacing:a,columnSpacing:o,xs:i,sm:l,md:c,lg:d,xl:s,justifyContent:v,alignItems:x,alignContent:p,direction:m="row",wrap:h="wrap",className:g="",children:u,style:f,...b},w)=>{const y=["vtx-grid",n&&"vtx-grid-container",e&&"vtx-grid-item",n&&void 0!==t&&`vtx-grid-spacing-${t}`,n&&void 0!==a&&`vtx-grid-row-spacing-${a}`,n&&void 0!==o&&`vtx-grid-column-spacing-${o}`,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!==d&&"vtx-grid-lg"+(!0===d?"":"auto"===d?"-auto":`-${d}`),void 0!==s&&"vtx-grid-xl"+(!0===s?"":"auto"===s?"-auto":`-${s}`),n&&"row"!==m&&`vtx-grid-direction-${m}`,n&&"wrap"!==h&&`vtx-grid-wrap-${h}`,g].filter(Boolean).join(" "),k={...f};return n&&(v&&(k.justifyContent=v),x&&(k.alignItems=x),p&&(k.alignContent=p)),r("div",{ref:w,className:y,style:Object.keys(k).length>0?k:void 0,...b,children:u})});me.displayName="Grid";const he=sr(me);vr(".infocard-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2rem;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n\r\n.infocard-icon--primary {\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n.infocard-icon--secondary {\r\n background: var(--vtx-color-secondary-100, #f3e8ff);\r\n color: var(--vtx-color-secondary-600, #7c3aed);\r\n}\r\n.infocard-icon--success {\r\n background: var(--vtx-color-success-100, #e6f4ea);\r\n color: var(--vtx-color-success-600, #388e3c);\r\n}\r\n.infocard-icon--danger {\r\n background: var(--vtx-color-danger-100, #ffebee);\r\n color: var(--vtx-color-danger-600, #d32f2f);\r\n}\r\n.infocard-icon--warning {\r\n background: var(--vtx-color-warning-100, #fff8e1);\r\n color: var(--vtx-color-warning-600, #fbc02d);\r\n}\r\n.infocard-icon--info {\r\n background: var(--vtx-color-info-100, #e3f7fc);\r\n color: var(--vtx-color-info-600, #0288d1);\r\n}\r\n");const ge=a.forwardRef(({icon:e,iconVariant:t="primary",text:a,subText:o,className:i="",style:l,...c},d)=>r(Kn,{variant:"outlined",className:i,style:l,ref:d,...c,children:n(he,{container:!0,spacing:2,alignItems:"center",wrap:"nowrap",justifyContent:"center",children:[r(he,{item:!0,xs:"auto",children:r(Nn,{align:"center",justify:"center",children:r("span",{className:`infocard-icon infocard-icon--${t}`,children:e})})}),n(he,{item:!0,xs:!0,children:[r(Sn,{variant:"caption",children:a}),o&&r(Sn,{variant:"subtitle2",children:o})]})]})}));ge.displayName="InfoCardBase";const ue=a.forwardRef(({value:e,label:t,className:a="",style:o,...i},l)=>r(Kn,{variant:"outlined",className:a,style:o,ref:l,...i,children:n(Nn,{direction:"column",align:"center",justify:"center",style:{minHeight:80},children:[r(Sn,{variant:"h4",children:e}),t&&r(Sn,{variant:"caption",children:t})]})}));ue.displayName="InfoCardMetric";const fe={Base:sr(ge),Metric:sr(ue)};vr("/* Base InfoText Styles */\r\n.infotext-base {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n.infotext-stat {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n.infotext-feature {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n.infotext-compact {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n.infotext-vertical {\r\n /* Container styles handled by Flex component */\r\n}\r\n\r\n/* Icon Wrapper */\r\n.infotext-icon-wrapper {\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Plain Icon (no circle background) */\r\n.infotext-icon-plain {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n width: 40px;\r\n height: 40px;\r\n transition: all 0.2s ease-in-out;\r\n}\r\n\r\n.infotext-icon-small-plain {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n width: 24px;\r\n height: 24px;\r\n transition: all 0.2s ease-in-out;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Icon Styles */\r\n.infotext-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n transition: all 0.2s ease-in-out;\r\n}\r\n\r\n.infotext-icon--primary {\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n\r\n.infotext-icon--secondary {\r\n background: var(--vtx-color-secondary-100, #f3e8ff);\r\n color: var(--vtx-color-secondary-600, #7c3aed);\r\n}\r\n\r\n.infotext-icon--success {\r\n background: var(--vtx-color-success-100, #e6f4ea);\r\n color: var(--vtx-color-success-600, #388e3c);\r\n}\r\n\r\n.infotext-icon--danger {\r\n background: var(--vtx-color-danger-100, #ffebee);\r\n color: var(--vtx-color-danger-600, #d32f2f);\r\n}\r\n\r\n.infotext-icon--warning {\r\n background: var(--vtx-color-warning-100, #fff8e1);\r\n color: var(--vtx-color-warning-600, #fbc02d);\r\n}\r\n\r\n.infotext-icon--info {\r\n background: var(--vtx-color-info-100, #e3f7fc);\r\n color: var(--vtx-color-info-600, #0288d1);\r\n}\r\n\r\n/* Small Icon Styles for Compact Variant */\r\n.infotext-icon-small {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n transition: all 0.2s ease-in-out;\r\n flex-shrink: 0;\r\n}\r\n\r\n.infotext-icon-small--primary {\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n\r\n.infotext-icon-small--secondary {\r\n background: var(--vtx-color-secondary-100, #f3e8ff);\r\n color: var(--vtx-color-secondary-600, #7c3aed);\r\n}\r\n\r\n.infotext-icon-small--success {\r\n background: var(--vtx-color-success-100, #e6f4ea);\r\n color: var(--vtx-color-success-600, #388e3c);\r\n}\r\n\r\n.infotext-icon-small--danger {\r\n background: var(--vtx-color-danger-100, #ffebee);\r\n color: var(--vtx-color-danger-600, #d32f2f);\r\n}\r\n\r\n.infotext-icon-small--warning {\r\n background: var(--vtx-color-warning-100, #fff8e1);\r\n color: var(--vtx-color-warning-600, #fbc02d);\r\n}\r\n\r\n.infotext-icon-small--info {\r\n background: var(--vtx-color-info-100, #e3f7fc);\r\n color: var(--vtx-color-info-600, #0288d1);\r\n}\r\n\r\n/* Badge Styles */\r\n.infotext-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2px 8px;\r\n border-radius: 12px;\r\n font-size: 0.75rem;\r\n font-weight: 500;\r\n background: var(--vtx-color-primary-100, #e3f2fd);\r\n color: var(--vtx-color-primary-600, #1976d2);\r\n}\r\n\r\n/* Hover Effects (Optional) */\r\n.infotext-base:hover .infotext-icon,\r\n.infotext-stat:hover .infotext-icon,\r\n.infotext-feature:hover .infotext-icon,\r\n.infotext-vertical:hover .infotext-icon {\r\n transform: scale(1.05);\r\n}\r\n\r\n.infotext-compact:hover .infotext-icon-small {\r\n transform: scale(1.1);\r\n}\r\n");const be=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,heading:o,subText:i,className:l="",style:c,...d},s)=>n(Nn,{direction:"row",align:"center",gap:8,className:`infotext-base ${l}`,style:c,ref:s,...d,children:[r(Nn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:r("span",a?{className:`infotext-icon infotext-icon--${t}`,children:e}:{className:"infotext-icon-plain",children:e})}),n(Nn,{direction:"column",gap:4,children:[r(Sn,{variant:"body1",weight:"medium",noMargin:!0,children:o}),i&&r(Sn,{variant:"caption",color:"text-secondary",noMargin:!0,children:i})]})]}));be.displayName="InfoTextBase";const we=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,value:o,label:i,subText:l,className:c="",style:d,...s},v)=>n(Nn,{direction:"row",align:"center",gap:8,className:`infotext-stat ${c}`,style:d,ref:v,...s,children:[e&&r(Nn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:r("span",a?{className:`infotext-icon infotext-icon--${t}`,children:e}:{className:"infotext-icon-plain",children:e})}),n(Nn,{direction:"column",gap:4,children:[r(Sn,{variant:"h5",weight:"bold",noMargin:!0,children:o}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:i}),l&&r(Sn,{variant:"caption",color:"text-secondary",noMargin:!0,children:l})]})]}));we.displayName="InfoTextStat";const ye=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,title:o,description:i,badge:l,className:c="",style:d,...s},v)=>n(Nn,{direction:"row",align:"start",gap:8,className:`infotext-feature ${c}`,style:d,ref:v,...s,children:[r(Nn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:r("span",a?{className:`infotext-icon infotext-icon--${t}`,children:e}:{className:"infotext-icon-plain",children:e})}),n(Nn,{direction:"column",gap:6,style:{flex:1},children:[n(Nn,{align:"center",gap:8,children:[r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:o}),l&&r("span",{className:"infotext-badge",children:l})]}),r(Sn,{variant:"body2",color:"text-secondary",noMargin:!0,children:i})]})]}));ye.displayName="InfoTextFeature";const ke=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,text:o,className:i="",style:l,...c},d)=>n(Nn,{direction:"row",align:"center",gap:8,className:`infotext-compact ${i}`,style:l,ref:d,...c,children:[r("span",a?{className:`infotext-icon-small infotext-icon-small--${t}`,children:e}:{className:"infotext-icon-small-plain",children:e}),r(Sn,{variant:"body2",noMargin:!0,children:o})]}));ke.displayName="InfoTextCompact";const _e=a.forwardRef(({icon:e,iconVariant:t="primary",iconCircle:a=!0,heading:o,subText:i,className:l="",style:c,...d},s)=>n(Nn,{direction:"column",align:"center",gap:10,className:`infotext-vertical ${l}`,style:c,ref:s,...d,children:[r(Nn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:r("span",a?{className:`infotext-icon infotext-icon--${t}`,children:e}:{className:"infotext-icon-plain",children:e})}),n(Nn,{direction:"column",gap:4,align:"center",children:[r(Sn,{variant:"body1",weight:"medium",align:"center",noMargin:!0,children:o}),i&&r(Sn,{variant:"caption",color:"text-secondary",align:"center",noMargin:!0,children:i})]})]}));_e.displayName="InfoTextVertical";const ze={Base:sr(be),Stat:sr(we),Feature:sr(ye),Compact:sr(ke),Vertical:sr(_e)};vr("/* ==================== Base ProductCard ==================== */\r\n.productcard {\r\n max-width: 320px;\r\n width: 100%;\r\n border: 1px solid var(--vtx-color-neutral-200, #e0e0e0);\r\n border-radius: var(--vtx-radius-lg, 12px);\r\n position: relative;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n overflow: hidden;\r\n}\r\n\r\n.productcard:hover {\r\n box-shadow: var(--vtx-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));\r\n transform: translateY(-4px);\r\n}\r\n\r\n.productcard-image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 200px;\r\n overflow: hidden;\r\n background: linear-gradient(135deg, var(--vtx-color-primary-50, #f5f5f5), var(--vtx-color-neutral-100, #fafafa));\r\n}\r\n\r\n.productcard-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: var(--vtx-transition-slow, transform 0.4s ease);\r\n}\r\n\r\n.productcard-image-wrapper:hover .productcard-image {\r\n transform: scale(1.08);\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .productcard {\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-image-wrapper {\r\n height: 180px;\r\n }\r\n}\r\n\r\n/* Badges */\r\n.productcard-badges {\r\n position: absolute;\r\n top: 12px;\r\n left: 12px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n z-index: 2;\r\n}\r\n\r\n.productcard-featured-badge {\r\n background: linear-gradient(135deg, var(--vtx-color-primary-600, #2563eb) 0%, var(--vtx-color-secondary-600, #7c3aed) 100%);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n font-size: 11px;\r\n font-weight: 600;\r\n padding: 4px 10px;\r\n border-radius: 4px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.15));\r\n}\r\n\r\n.productcard-discount-badge {\r\n background: var(--vtx-color-error-600, #dc2626);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n font-size: 12px;\r\n font-weight: 700;\r\n padding: 4px 10px;\r\n border-radius: 4px;\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 8px rgba(220, 38, 38, 0.3));\r\n}\r\n\r\n/* Wishlist Button */\r\n.productcard-wishlist-btn {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n border: none;\r\n background: rgba(255, 255, 255, 0.95);\r\n color: var(--vtx-color-neutral-500, #737373);\r\n font-size: 1.25rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: 3;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));\r\n}\r\n\r\n.productcard-wishlist-btn:hover {\r\n background: var(--vtx-color-neutral-50, #ffffff);\r\n color: var(--vtx-color-error-600, #dc2626);\r\n transform: scale(1.1);\r\n box-shadow: var(--vtx-shadow-md, 0 4px 12px rgba(220, 38, 38, 0.2));\r\n}\r\n\r\n.productcard-wishlist-btn--active {\r\n background: var(--vtx-color-error-600, #dc2626);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n.productcard-wishlist-btn--active:hover {\r\n background: var(--vtx-color-error-700, #b91c1c);\r\n transform: scale(1.1);\r\n}\r\n\r\n/* Hover Overlay for Quick View */\r\n.productcard-hover-overlay {\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n width: 100%;\r\n background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);\r\n opacity: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-end;\r\n padding: var(--vtx-spacing-4, 16px);\r\n z-index: 2;\r\n transition: var(--vtx-transition-normal, opacity 0.3s ease);\r\n pointer-events: none;\r\n}\r\n\r\n.productcard-image-wrapper:hover .productcard-hover-overlay {\r\n opacity: 1;\r\n pointer-events: all;\r\n}\r\n\r\n/* Category Chip */\r\n.productcard-category {\r\n font-size: 12px;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n}\r\n\r\n.productcard-category:hover {\r\n background-color: var(--vtx-color-primary-600, #1976d2);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n cursor: pointer;\r\n}\r\n\r\n/* Weight/Units */\r\n.productcard-weight {\r\n font-size: 14px;\r\n color: var(--vtx-color-neutral-600, #757575);\r\n}\r\n\r\n/* Rating */\r\n.productcard-rating-wrapper {\r\n font-size: 14px;\r\n}\r\n\r\n.productcard-rating {\r\n color: var(--vtx-color-warning-500, #fbc02d);\r\n font-size: 16px;\r\n line-height: 1;\r\n letter-spacing: 1px;\r\n}\r\n\r\n/* Price */\r\n.productcard-price {\r\n color: var(--vtx-color-error-600, #dc2626);\r\n font-size: 18px;\r\n font-weight: 700;\r\n}\r\n\r\n.productcard-original-price {\r\n color: var(--vtx-color-neutral-500, #999);\r\n text-decoration: line-through;\r\n font-size: 14px;\r\n}\r\n\r\n/* Quantity Selector */\r\n.productcard-quantity-selector {\r\n border-radius: 6px;\r\n width: 100%;\r\n height: 44px;\r\n border: 1px solid var(--vtx-color-neutral-300, #ddd);\r\n}\r\n\r\n.productcard-quantity-value {\r\n text-align: center;\r\n font-size: 16px;\r\n font-weight: 600;\r\n min-width: 40px;\r\n}\r\n\r\n/* ==================== Compact ProductCard ==================== */\r\n.productcard-compact {\r\n transition: box-shadow 0.2s ease-in-out;\r\n}\r\n\r\n.productcard-compact:hover {\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.productcard-image-compact-wrapper {\r\n position: relative;\r\n width: 100px;\r\n height: 100px;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n border-radius: 8px;\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n}\r\n\r\n.productcard-image-compact {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.3s ease-in-out;\r\n}\r\n\r\n.productcard-image-compact-wrapper:hover .productcard-image-compact {\r\n transform: scale(1.05);\r\n}\r\n\r\n.productcard-badge-compact {\r\n position: absolute;\r\n top: 6px;\r\n left: 6px;\r\n z-index: 1;\r\n}\r\n\r\n.productcard-rating-compact {\r\n color: var(--vtx-color-warning-500, #fbc02d);\r\n font-size: 0.875rem;\r\n line-height: 1;\r\n}\r\n\r\n/* ==================== List ProductCard ==================== */\r\n.productcard-list {\r\n padding: 16px;\r\n border-bottom: 1px solid var(--vtx-color-neutral-200, #e0e0e0);\r\n transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n.productcard-list:hover {\r\n background-color: var(--vtx-color-neutral-50, #fafafa);\r\n}\r\n\r\n.productcard-image-list-wrapper {\r\n position: relative;\r\n width: 120px;\r\n height: 120px;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n border-radius: 8px;\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n}\r\n\r\n.productcard-image-list {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.productcard-badge-list {\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n z-index: 1;\r\n}\r\n\r\n.productcard-quantity-btn {\r\n width: 32px;\r\n height: 32px;\r\n border: 1px solid var(--vtx-color-neutral-300, #d0d0d0);\r\n border-radius: 4px;\r\n background-color: var(--vtx-color-neutral-50, #fafafa);\r\n color: var(--vtx-color-text-primary, #212121);\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease-in-out;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.productcard-quantity-btn:hover {\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n border-color: var(--vtx-color-neutral-400, #bdbdbd);\r\n}\r\n\r\n.productcard-quantity-btn:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n/* ==================== Featured ProductCard ==================== */\r\n.productcard-featured {\r\n max-width: 100%;\r\n transition: box-shadow 0.2s ease-in-out;\r\n}\r\n\r\n.productcard-featured:hover {\r\n box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.productcard-image-featured-wrapper {\r\n position: relative;\r\n width: 300px;\r\n height: 300px;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n}\r\n\r\n.productcard-image-featured {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.3s ease-in-out;\r\n}\r\n\r\n.productcard-image-featured-wrapper:hover .productcard-image-featured {\r\n transform: scale(1.05);\r\n}\r\n\r\n.productcard-badge-featured {\r\n position: absolute;\r\n top: 16px;\r\n left: 16px;\r\n z-index: 1;\r\n}\r\n\r\n.productcard-rating-large {\r\n color: var(--vtx-color-warning-500, #fbc02d);\r\n font-size: 1.25rem;\r\n line-height: 1;\r\n}\r\n\r\n.productcard-feature-bullet {\r\n color: var(--vtx-color-success-600, #388e3c);\r\n font-size: 1.125rem;\r\n font-weight: bold;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ==================== Wide Variant (Horizontal Layout) ==================== */\r\n.productcard-wide {\r\n max-width: 100%;\r\n width: 100%;\r\n border: 1px solid var(--vtx-color-neutral-200, #e0e0e0);\r\n border-radius: var(--vtx-radius-lg, 12px);\r\n overflow: hidden;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n display: flex;\r\n}\r\n\r\n.productcard-wide:hover {\r\n box-shadow: var(--vtx-shadow-lg, 0 6px 20px rgba(0, 0, 0, 0.1));\r\n transform: translateY(-2px);\r\n}\r\n\r\n.productcard-wide-image-wrapper {\r\n position: relative;\r\n width: 240px;\r\n height: 100%;\r\n min-height: 200px;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n background: linear-gradient(135deg, var(--vtx-color-primary-50, #f5f5f5), var(--vtx-color-neutral-100, #fafafa));\r\n}\r\n\r\n.productcard-wide-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: var(--vtx-transition-slow, transform 0.4s ease);\r\n}\r\n\r\n.productcard-wide-image-wrapper:hover .productcard-wide-image {\r\n transform: scale(1.06);\r\n}\r\n\r\n/* Wide variant rating */\r\n.productcard-wide .productcard-rating {\r\n font-size: 18px;\r\n letter-spacing: 2px;\r\n}\r\n\r\n/* Wide variant cart actions */\r\n.productcard-wide .productcard-quantity-selector {\r\n width: 100%;\r\n height: 44px;\r\n}\r\n\r\n/* Wide variant content padding adjustments */\r\n.productcard-wide .productcard-category {\r\n font-size: 12px;\r\n padding: 4px 12px;\r\n}\r\n\r\n.productcard-wide .productcard-price {\r\n font-size: 24px;\r\n}\r\n\r\n/* ==================== Minimal Variant ==================== */\r\n.productcard-minimal {\r\n max-width: 240px;\r\n position: relative;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n}\r\n\r\n.productcard-minimal:hover {\r\n transform: translateY(-2px);\r\n}\r\n\r\n.productcard-minimal-image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 240px;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n background: linear-gradient(135deg, var(--vtx-color-primary-50, #f5f5f5), var(--vtx-color-neutral-100, #fafafa));\r\n margin-bottom: 12px;\r\n}\r\n\r\n.productcard-minimal-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: var(--vtx-transition-slow, transform 0.4s ease);\r\n}\r\n\r\n.productcard-minimal-image-wrapper:hover .productcard-minimal-image {\r\n transform: scale(1.08);\r\n}\r\n\r\n.productcard-minimal-discount {\r\n position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n background: var(--vtx-color-error-600, #dc2626);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n font-size: 11px;\r\n font-weight: 700;\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 6px rgba(220, 38, 38, 0.3));\r\n z-index: 2;\r\n}\r\n\r\n.productcard-minimal-wishlist {\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n border: none;\r\n background: rgba(255, 255, 255, 0.95);\r\n color: var(--vtx-color-neutral-500, #737373);\r\n font-size: 1.1rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: 3;\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n box-shadow: var(--vtx-shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.1));\r\n}\r\n\r\n.productcard-minimal-wishlist:hover {\r\n background: var(--vtx-color-neutral-50, #ffffff);\r\n color: var(--vtx-color-error-600, #dc2626);\r\n transform: scale(1.1);\r\n}\r\n\r\n.productcard-minimal-wishlist--active {\r\n background: var(--vtx-color-error-600, #dc2626);\r\n color: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n.productcard-rating-minimal {\r\n color: var(--vtx-color-warning-500, #fbc02d);\r\n font-size: 15px;\r\n line-height: 1;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.productcard-quantity-selector-minimal {\r\n height: 36px;\r\n border-radius: 6px;\r\n border: 1px solid var(--vtx-color-neutral-300, #ddd);\r\n padding: 0 8px;\r\n}\r\n\r\n/* ==================== Responsive ==================== */\r\n\r\n/* Tablet and below */\r\n@media (max-width: 768px) {\r\n .productcard {\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-featured {\r\n flex-direction: column !important;\r\n }\r\n \r\n .productcard-image-featured-wrapper {\r\n width: 100%;\r\n max-width: 100%;\r\n height: 250px;\r\n }\r\n \r\n .productcard-wide {\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-wide > div {\r\n flex-direction: column !important;\r\n }\r\n \r\n .productcard-wide-image-wrapper {\r\n width: 100%;\r\n height: 220px;\r\n min-height: 220px;\r\n }\r\n \r\n .productcard-wide .productcard-rating {\r\n font-size: 16px;\r\n letter-spacing: 1.5px;\r\n }\r\n \r\n .productcard-wide .productcard-quantity-selector {\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-wide .productcard-price {\r\n font-size: 22px;\r\n }\r\n \r\n .productcard-minimal {\r\n max-width: 100%;\r\n }\r\n \r\n .productcard-minimal-image-wrapper {\r\n height: 220px;\r\n }\r\n}\r\n\r\n/* Mobile */\r\n@media (max-width: 480px) {\r\n .productcard-image-wrapper {\r\n height: 180px;\r\n }\r\n \r\n .productcard-wide-image-wrapper {\r\n height: 200px;\r\n min-height: 200px;\r\n }\r\n \r\n .productcard-image-featured-wrapper {\r\n height: 200px;\r\n }\r\n \r\n .productcard-minimal-image-wrapper {\r\n height: 200px;\r\n }\r\n \r\n .productcard-image-list-wrapper {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n \r\n .productcard-rating {\r\n font-size: 15px;\r\n }\r\n \r\n .productcard-wide .productcard-rating {\r\n font-size: 15px;\r\n }\r\n}\r\n\r\n/* Small mobile */\r\n@media (max-width: 375px) {\r\n .productcard-image-wrapper {\r\n height: 160px;\r\n }\r\n \r\n .productcard-wide-image-wrapper {\r\n height: 180px;\r\n min-height: 180px;\r\n }\r\n \r\n .productcard-image-featured-wrapper {\r\n height: 180px;\r\n }\r\n \r\n .productcard-minimal-image-wrapper {\r\n height: 180px;\r\n }\r\n \r\n .productcard-rating {\r\n font-size: 14px;\r\n }\r\n}\r\n");const Ne=a.forwardRef(({id:e,image:t,imageAlt:a="Product",category:o,name:i,weight:l,units:c,price:s,originalPrice:v,discount:x,rating:p,initialQuantity:m=0,featured:h=!1,featuredText:g="Featured",showWishlist:u=!1,isWishlisted:f=!1,cartIcon:b,wishlistIcon:w,wishlistFilledIcon:y,quickViewIcon:k,onAddToCart:_,onIncrementCart:z,onDecrementCart:N,onWishlist:C,onQuickView:S,onClick:M,loading:T=!1,className:$="",style:I,...j},A)=>{const[D,L]=d(m),[B,E]=d(!1),R=B||T;return r(Kn,{variant:"outlined",className:`productcard ${$}`,style:{padding:0,...I},ref:A,...j,children:n(Nn,{direction:"column",children:[n("div",{className:"productcard-image-wrapper",onClick:M,style:{cursor:M?"pointer":"default"},children:[r("img",{src:t,alt:a,className:"productcard-image"}),n("div",{className:"productcard-badges",children:[h&&r("span",{className:"productcard-featured-badge",children:g}),x&&r("span",{className:"productcard-discount-badge",children:x})]}),u&&C&&r("button",{className:"productcard-wishlist-btn "+(f?"productcard-wishlist-btn--active":""),onClick:r=>{r.stopPropagation(),C()},"aria-label":f?"Remove from wishlist":"Add to wishlist",children:f?y||w||"♥":w||"♡"}),S&&r("div",{className:"productcard-hover-overlay",children:r(pr,{variant:"secondary",size:"sm",leftIcon:k||"👁",onClick:r=>{r.stopPropagation(),S()},children:"Quick View"})})]}),n(Nn,{direction:"column",gap:5,style:{padding:"12px"},children:[o&&r("div",{style:{display:"inline-flex",alignSelf:"flex-start"},children:r(sn,{label:o,variant:"outlined",className:"productcard-category"})}),r(Sn,{variant:"body1",noMargin:!0,onClick:M,style:{cursor:M?"pointer":"default"},children:i}),(void 0!==l||c)&&r(Sn,{variant:"body1",noMargin:!0,className:"productcard-weight",children:void 0!==l&&c?`${l} ${c}`:void 0!==l?l:"-"}),void 0!==p&&n(Nn,{align:"center",gap:5,className:"productcard-rating-wrapper",children:[n("div",{className:"productcard-rating",children:["★".repeat(Math.floor(p)),"☆".repeat(5-Math.floor(p))]}),r(Sn,{variant:"caption",noMargin:!0,children:p})]}),n(Nn,{align:"center",gap:8,children:[n(Sn,{variant:"h5",noMargin:!0,className:"productcard-price",children:["$",Number(s).toFixed(2)]}),v&&v>s&&n(Sn,{variant:"body2",noMargin:!0,className:"productcard-original-price",children:["$",Number(v).toFixed(2)]})]}),R?r(pr,{fullWidth:!0,loading:!0,variant:"primary",children:"Loading"}):0===D?r(pr,{fullWidth:!0,variant:"primary",leftIcon:b,onClick:async()=>{if(_){E(!0);try{await _(e,1),L(1)}catch(r){console.error("Add to cart error:",r)}finally{E(!1)}}},children:"Add to cart"}):n(Nn,{align:"center",direction:"row",justify:"between",className:"productcard-quantity-selector",children:[r(pr,{variant:"secondary",onClick:async()=>{if(N&&!(D<=0)){E(!0);try{await N(e,D),L(D-1)}catch(r){console.error("Decrement error:",r)}finally{E(!1)}}},children:"-"}),r(Sn,{noMargin:!0,className:"productcard-quantity-value",children:D}),r(pr,{variant:"secondary",onClick:async()=>{if(z){E(!0);try{await z(e,D),L(D+1)}catch(r){console.error("Increment error:",r)}finally{E(!1)}}},children:"+"})]})]})]})})});Ne.displayName="ProductCardBase";const Ce=a.forwardRef(({imagePosition:e="left",...t},a)=>{const{id:o,image:i,imageAlt:l="Product",category:c,name:s,weight:v,units:x,price:p,originalPrice:m,discount:h,rating:g,initialQuantity:u=0,featured:f=!1,featuredText:b="Featured",showWishlist:w=!1,isWishlisted:y=!1,cartIcon:k,wishlistIcon:_,wishlistFilledIcon:z,quickViewIcon:N,onAddToCart:C,onIncrementCart:S,onDecrementCart:M,onWishlist:T,onQuickView:$,onClick:I,loading:j=!1,className:A="",style:D}=t,[L,B]=d(u),[E,R]=d(!1),O=E||j;return r(Kn,{variant:"outlined",className:`productcard-wide ${A}`,style:{padding:0,...D},ref:a,children:n(Nn,{direction:"left"===e?"row":"row-reverse",children:[n("div",{className:"productcard-wide-image-wrapper",onClick:I,style:{cursor:I?"pointer":"default"},children:[r("img",{src:i,alt:l,className:"productcard-wide-image"}),n("div",{className:"productcard-badges",children:[f&&r("span",{className:"productcard-featured-badge",children:b}),h&&r("span",{className:"productcard-discount-badge",children:h})]}),w&&T&&r("button",{className:"productcard-wishlist-btn "+(y?"productcard-wishlist-btn--active":""),onClick:r=>{r.stopPropagation(),T()},children:y?z||_||"♥":_||"♡"})]}),n(Nn,{direction:"column",gap:12,style:{padding:"16px 20px",flex:1,minWidth:0},children:[c&&r("div",{style:{display:"inline-flex",alignSelf:"flex-start"},children:r(sn,{label:c,variant:"outlined",className:"productcard-category"})}),n(Nn,{direction:"column",gap:6,children:[r(Sn,{variant:"h5",weight:"bold",noMargin:!0,onClick:I,style:{cursor:I?"pointer":"default",wordBreak:"break-word"},children:s}),(void 0!==v||x)&&r(Sn,{variant:"body2",noMargin:!0,className:"productcard-weight",children:void 0!==v&&x?`${v} ${x}`:void 0!==v?v:"-"})]}),void 0!==g&&n(Nn,{align:"center",gap:6,children:[n("div",{className:"productcard-rating",children:["★".repeat(Math.floor(g)),"☆".repeat(5-Math.floor(g))]}),r(Sn,{variant:"caption",noMargin:!0,children:g})]}),n(Nn,{align:"center",gap:8,wrap:"wrap",style:{marginTop:"auto"},children:[n(Sn,{variant:"h4",weight:"bold",noMargin:!0,className:"productcard-price",children:["$",Number(p).toFixed(2)]}),m&&m>p&&n(Sn,{variant:"body1",noMargin:!0,className:"productcard-original-price",children:["$",Number(m).toFixed(2)]})]}),n(Nn,{gap:12,align:"center",direction:"row",wrap:"wrap",children:[r("div",{style:{flex:"1 1 auto",minWidth:"140px"},children:O?r(pr,{fullWidth:!0,loading:!0,variant:"primary",children:"Loading"}):0===L?r(pr,{fullWidth:!0,variant:"primary",leftIcon:k,onClick:async()=>{if(C){R(!0);try{await C(o,1),B(1)}catch(r){console.error("Add to cart error:",r)}finally{R(!1)}}},children:"Add to cart"}):n(Nn,{align:"center",direction:"row",justify:"between",className:"productcard-quantity-selector",children:[r(pr,{variant:"secondary",onClick:async()=>{if(M&&!(L<=0)){R(!0);try{await M(o,L),B(L-1)}catch(r){console.error("Decrement error:",r)}finally{R(!1)}}},children:"-"}),r(Sn,{noMargin:!0,className:"productcard-quantity-value",children:L}),r(pr,{variant:"primary",onClick:async()=>{if(S){R(!0);try{await S(o,L),B(L+1)}catch(r){console.error("Increment error:",r)}finally{R(!1)}}},children:"+"})]})}),$&&r(pr,{variant:"outline",size:"md",leftIcon:N||"👁",onClick:$,children:"View"})]})]})]})})});Ce.displayName="ProductCardWide";const Se=a.forwardRef((e,t)=>{const{id:a,image:o,imageAlt:i="Product",name:l,price:c,originalPrice:s,discount:v,rating:x,initialQuantity:p=0,showWishlist:m=!1,isWishlisted:h=!1,cartIcon:g,wishlistIcon:u,wishlistFilledIcon:f,onAddToCart:b,onIncrementCart:w,onDecrementCart:y,onWishlist:k,onClick:_,loading:z=!1,className:N="",style:C}=e,[S,M]=d(p),[T,$]=d(!1),I=T||z;return n("div",{className:`productcard-minimal ${N}`,style:C,ref:t,children:[n("div",{className:"productcard-minimal-image-wrapper",onClick:_,style:{cursor:_?"pointer":"default"},children:[r("img",{src:o,alt:i,className:"productcard-minimal-image"}),v&&r("span",{className:"productcard-minimal-discount",children:v}),m&&k&&r("button",{className:"productcard-minimal-wishlist "+(h?"productcard-minimal-wishlist--active":""),onClick:r=>{r.stopPropagation(),k()},children:h?f||u||"♥":u||"♡"})]}),n(Nn,{direction:"column",gap:8,style:{padding:"12px 0"},children:[r(Sn,{variant:"body1",weight:"medium",noMargin:!0,onClick:_,style:{cursor:_?"pointer":"default"},children:l}),n(Nn,{align:"center",gap:8,children:[n(Sn,{variant:"h6",weight:"bold",noMargin:!0,className:"productcard-price",children:["$",Number(c).toFixed(2)]}),s&&s>c&&n(Sn,{variant:"caption",noMargin:!0,className:"productcard-original-price",children:["$",Number(s).toFixed(2)]})]}),void 0!==x&&n("div",{className:"productcard-rating-minimal",children:["★".repeat(Math.floor(x)),"☆".repeat(5-Math.floor(x))]}),I?r(pr,{loading:!0,variant:"primary",size:"sm",children:"Loading"}):0===S?r(pr,{variant:"primary",size:"sm",leftIcon:g,onClick:async()=>{if(b){$(!0);try{await b(a,1),M(1)}catch(r){console.error("Add to cart error:",r)}finally{$(!1)}}},fullWidth:!0,children:"Add"}):n(Nn,{align:"center",justify:"between",className:"productcard-quantity-selector-minimal",children:[r(pr,{variant:"secondary",size:"sm",onClick:async()=>{if(y&&!(S<=0)){$(!0);try{await y(a,S),M(S-1)}catch(r){console.error("Decrement error:",r)}finally{$(!1)}}},children:"-"}),r(Sn,{variant:"body2",noMargin:!0,weight:"medium",children:S}),r(pr,{variant:"primary",size:"sm",onClick:async()=>{if(w){$(!0);try{await w(a,S),M(S+1)}catch(r){console.error("Increment error:",r)}finally{$(!1)}}},children:"+"})]})]})]})});Se.displayName="ProductCardMinimal";const Me={Base:sr(Ne),Wide:sr(Ce),Minimal:sr(Se)};vr("/* ==================== Order Card ==================== */\r\n.ordercard {\r\n width: 100%;\r\n max-width: 100%;\r\n padding: var(--vtx-spacing-3, 12px);\r\n transition: var(--vtx-transition-normal, all 0.3s ease);\r\n cursor: pointer;\r\n}\r\n\r\n.ordercard:hover {\r\n box-shadow: var(--vtx-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));\r\n transform: translateY(-2px);\r\n}\r\n\r\n/* Header Section */\r\n.ordercard-header {\r\n padding-bottom: var(--vtx-spacing-2, 8px);\r\n margin-bottom: var(--vtx-spacing-2, 8px);\r\n border-bottom: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n}\r\n\r\n/* Image Wrapper */\r\n.ordercard-image-wrapper {\r\n width: 56px;\r\n height: 56px;\r\n flex-shrink: 0;\r\n border-radius: var(--vtx-radius-md, 8px);\r\n overflow: hidden;\r\n background: var(--vtx-color-neutral-100, #f5f5f5);\r\n}\r\n\r\n.ordercard-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n/* Product Name */\r\n.ordercard-product-name {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n line-height: 1.5;\r\n word-break: break-word;\r\n color: var(--vtx-color-neutral-800, #262626);\r\n}\r\n\r\n/* More Items Text */\r\n.ordercard-more-items {\r\n opacity: 0.8;\r\n}\r\n\r\n/* Delivery Date */\r\n.ordercard-delivery {\r\n opacity: 0.85;\r\n}\r\n\r\n/* Price */\r\n.ordercard-price {\r\n color: var(--vtx-color-neutral-900, #171717);\r\n font-size: 1.125rem;\r\n}\r\n\r\n/* Track Button */\r\n.ordercard-track-btn {\r\n flex-shrink: 0;\r\n min-width: 110px;\r\n}\r\n\r\n/* Content Section */\r\n.ordercard-content {\r\n align-items: flex-start;\r\n padding: var(--vtx-spacing-2, 8px) 0;\r\n}\r\n\r\n/* Footer Section */\r\n.ordercard-footer {\r\n padding-top: var(--vtx-spacing-2, 8px);\r\n margin-top: var(--vtx-spacing-2, 8px);\r\n border-top: 1px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n}\r\n\r\n/* ==================== Responsive Design ==================== */\r\n\r\n/* Tablet and below */\r\n@media (max-width: 768px) {\r\n .ordercard {\r\n padding: var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .ordercard-image-wrapper {\r\n width: 52px;\r\n height: 52px;\r\n }\r\n\r\n .ordercard-track-btn {\r\n min-width: 100px;\r\n }\r\n}\r\n\r\n/* Mobile */\r\n@media (max-width: 480px) {\r\n .ordercard {\r\n padding: var(--vtx-spacing-2, 8px) var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .ordercard-image-wrapper {\r\n width: 48px;\r\n height: 48px;\r\n }\r\n\r\n .ordercard-content {\r\n padding: var(--vtx-spacing-1, 4px) 0;\r\n }\r\n\r\n .ordercard-footer {\r\n flex-direction: column;\r\n align-items: stretch !important;\r\n gap: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .ordercard-track-btn {\r\n width: 100%;\r\n min-width: unset;\r\n }\r\n\r\n .ordercard-price {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n/* Small mobile - very compact */\r\n@media (max-width: 375px) {\r\n .ordercard {\r\n padding: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .ordercard-image-wrapper {\r\n width: 46px;\r\n height: 46px;\r\n }\r\n\r\n .ordercard-header {\r\n padding-bottom: var(--vtx-spacing-1, 4px);\r\n margin-bottom: var(--vtx-spacing-1, 4px);\r\n }\r\n\r\n .ordercard-content {\r\n gap: var(--vtx-spacing-2, 8px);\r\n }\r\n}\r\n\r\n/* ==================== Long Text Handling ==================== */\r\n\r\n/* Ensure long text doesn't break layout */\r\n.ordercard * {\r\n min-width: 0;\r\n}\r\n\r\n/* Status badge should not wrap */\r\n.ordercard .vtx-badge {\r\n flex-shrink: 0;\r\n white-space: nowrap;\r\n}\r\n\r\n/* ==================== Print Styles ==================== */\r\n@media print {\r\n .ordercard {\r\n box-shadow: none !important;\r\n border: 1px solid var(--vtx-color-neutral-300, #d4d4d4);\r\n }\r\n\r\n .ordercard:hover {\r\n transform: none;\r\n }\r\n\r\n .ordercard-track-btn {\r\n display: none;\r\n }\r\n}\r\n");const Te=a.forwardRef(({orderId:e,orderNumber:t,status:a="pending",statusText:o,items:i,deliveryDate:l,deliveryLabel:c="Delivered on",totalAmount:d,currency:s="₹",onTrackOrder:v,onViewDetails:x,trackButtonText:p="Track Order",className:m="",style:h,...g},u)=>{const f=i[0],b=i.length-1;return r(Kn,{variant:"outlined",className:`ordercard ${m}`,style:h,onClick:x?()=>x(e):void 0,ref:u,...g,children:n(Nn,{direction:"column",gap:0,children:[n(Nn,{align:"center",justify:"between",wrap:"wrap",gap:8,className:"ordercard-header",children:[r(Sn,{variant:"body1",weight:"semibold",noMargin:!0,children:t||`Order #${e}`}),r(Xn,{variant:(()=>{switch(a){case"delivered":return"success";case"cancelled":return"error";case"processing":case"shipped":return"info";case"pending":return"warning";default:return"neutral"}})(),children:o||a.charAt(0).toUpperCase()+a.slice(1)})]}),n(Nn,{direction:"row",gap:10,className:"ordercard-content",children:[f.image&&r("div",{className:"ordercard-image-wrapper",children:r("img",{src:f.image,alt:f.name,className:"ordercard-image"})}),n(Nn,{direction:"column",gap:2,style:{flex:1,minWidth:0},children:[n(Sn,{variant:"body2",weight:"medium",noMargin:!0,className:"ordercard-product-name",children:[f.name,f.quantity&&f.quantity>1&&` × ${f.quantity}`]}),b>0&&n(Sn,{variant:"caption",noMargin:!0,className:"ordercard-more-items",children:["+ ",b," more ",1===b?"item":"items"]})]})]}),n(Nn,{direction:"row",align:"center",justify:"between",wrap:"wrap",gap:8,className:"ordercard-footer",children:[n(Nn,{direction:"column",gap:2,style:{flex:"1 1 auto",minWidth:"140px"},children:[l&&n(Sn,{variant:"caption",noMargin:!0,className:"ordercard-delivery",children:[c,": ",l]}),n(Sn,{variant:"body1",weight:"bold",noMargin:!0,className:"ordercard-price",children:[s,d.toLocaleString()]})]}),v&&r(pr,{variant:"primary",size:"sm",onClick:r=>{null==r||r.stopPropagation(),v(e)},className:"ordercard-track-btn",children:p})]})]})})});Te.displayName="OrderCard";const $e=sr(Te);vr("/* ==================== Info List Card ==================== */\r\n.info-list-card {\r\n padding: var(--vtx-spacing-4, 16px);\r\n width: 100%;\r\n max-width: 100%;\r\n}\r\n\r\n.info-list-card--compact {\r\n padding: var(--vtx-spacing-3, 12px);\r\n}\r\n\r\n/* ==================== Heading ==================== */\r\n.info-list-card-heading {\r\n color: var(--vtx-color-neutral-900, #171717);\r\n line-height: 1.3;\r\n word-break: break-word;\r\n}\r\n\r\n/* ==================== Items Container ==================== */\r\n.info-list-card-items {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-3, 12px);\r\n}\r\n\r\n.info-list-card--compact .info-list-card-items {\r\n gap: var(--vtx-spacing-2, 8px);\r\n}\r\n\r\n/* ==================== Individual Item ==================== */\r\n.info-list-card-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-4, 16px);\r\n min-height: 24px;\r\n}\r\n\r\n/* ==================== Label ==================== */\r\n.info-list-card-label {\r\n color: var(--vtx-color-neutral-600, #525252);\r\n flex: 0 0 auto;\r\n max-width: 50%;\r\n word-break: break-word;\r\n line-height: 1.5;\r\n}\r\n\r\n/* ==================== Value ==================== */\r\n.info-list-card-value {\r\n color: var(--vtx-color-neutral-900, #171717);\r\n text-align: right;\r\n flex: 1 1 auto;\r\n word-break: break-word;\r\n line-height: 1.5;\r\n min-width: 0;\r\n}\r\n\r\n/* ==================== Value Variants ==================== */\r\n.info-list-card-value.value-primary {\r\n color: var(--vtx-color-primary-600, #2563eb);\r\n}\r\n\r\n.info-list-card-value.value-success {\r\n color: var(--vtx-color-success-600, #16a34a);\r\n}\r\n\r\n.info-list-card-value.value-warning {\r\n color: var(--vtx-color-warning-600, #d97706);\r\n}\r\n\r\n.info-list-card-value.value-error {\r\n color: var(--vtx-color-error-600, #dc2626);\r\n}\r\n\r\n.info-list-card-value.value-muted {\r\n color: var(--vtx-color-neutral-500, #737373);\r\n}\r\n\r\n.info-list-card-value.value-bold {\r\n font-weight: var(--vtx-font-weight-semibold, 600);\r\n}\r\n\r\n.info-list-card-value.value-large {\r\n font-size: 1.125rem;\r\n font-weight: var(--vtx-font-weight-bold, 700);\r\n}\r\n\r\n/* ==================== Responsive Design ==================== */\r\n\r\n/* Tablet */\r\n@media (max-width: 768px) {\r\n .info-list-card {\r\n padding: var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .info-list-card-item {\r\n gap: var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .info-list-card-label {\r\n max-width: 45%;\r\n font-size: 0.875rem;\r\n }\r\n\r\n .info-list-card-value {\r\n font-size: 0.875rem;\r\n }\r\n}\r\n\r\n/* Mobile */\r\n@media (max-width: 480px) {\r\n .info-list-card {\r\n padding: var(--vtx-spacing-3, 12px);\r\n }\r\n\r\n .info-list-card--compact {\r\n padding: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .info-list-card-items {\r\n gap: var(--vtx-spacing-2, 8px);\r\n }\r\n\r\n .info-list-card--compact .info-list-card-items {\r\n gap: var(--vtx-spacing-1, 4px);\r\n }\r\n\r\n .info-list-card-item {\r\n gap: var(--vtx-spacing-2, 8px);\r\n min-height: 20px;\r\n }\r\n\r\n .info-list-card-label {\r\n max-width: 48%;\r\n font-size: 0.8125rem;\r\n }\r\n\r\n .info-list-card-value {\r\n font-size: 0.8125rem;\r\n }\r\n\r\n .info-list-card-value.value-large {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n/* Small Mobile */\r\n@media (max-width: 375px) {\r\n .info-list-card-item {\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1, 4px);\r\n align-items: stretch;\r\n }\r\n\r\n .info-list-card-label {\r\n max-width: 100%;\r\n }\r\n\r\n .info-list-card-value {\r\n text-align: left;\r\n }\r\n}\r\n\r\n/* ==================== Long Text Handling ==================== */\r\n\r\n/* Ensure long text doesn't break layout */\r\n.info-list-card-item * {\r\n min-width: 0;\r\n overflow-wrap: break-word;\r\n word-wrap: break-word;\r\n hyphens: auto;\r\n}\r\n\r\n/* ==================== Print Styles ==================== */\r\n@media print {\r\n .info-list-card {\r\n box-shadow: none !important;\r\n border: 1px solid var(--vtx-color-neutral-300, #d4d4d4);\r\n page-break-inside: avoid;\r\n }\r\n\r\n .info-list-card-item {\r\n page-break-inside: avoid;\r\n }\r\n}\r\n");const Ie=a.forwardRef(({heading:t,items:o,showDividers:i=!1,compact:l=!1,variant:c="outlined",className:d="",style:s,...v},x)=>{const p=o.filter(r=>!r.hidden);return n(Kn,{variant:"flat"===c?"filled":c,className:`info-list-card ${l?"info-list-card--compact":""} ${d}`,style:s,ref:x,...v,children:[t&&n(e,{children:[r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,className:"info-list-card-heading",children:t}),r(te,{style:{margin:"12px 0 16px 0"}})]}),r("div",{className:"info-list-card-items",children:p.map((e,t)=>n(a.Fragment,{children:[n("div",{className:"info-list-card-item",children:[r("div",{className:`info-list-card-label ${e.labelClass||""}`,children:"string"==typeof e.label?r(Sn,{variant:"body2",noMargin:!0,children:e.label}):e.label}),r("div",{className:`info-list-card-value ${e.valueClass||""}`,children:"string"==typeof e.value||"number"==typeof e.value?r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:e.value}):e.value})]}),i&&t<p.length-1&&r(te,{style:{margin:l?"8px 0":"12px 0"}})]},t))})]})});Ie.displayName="InfoListCard";const je=sr(Ie);vr(".orderconfirmation {\r\n width: 100%;\r\n max-width: 100%;\r\n}\r\n\r\n/* Header */\r\n.orderconfirmation-header {\r\n background: linear-gradient(135deg, var(--vtx-color-success-50) 0%, var(--vtx-color-success-100) 100%);\r\n border: 1px solid var(--vtx-color-success-200);\r\n padding: var(--vtx-spacing-6);\r\n}\r\n\r\n.orderconfirmation-success-icon {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-success-500);\r\n color: var(--vtx-color-white);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 32px;\r\n font-weight: bold;\r\n box-shadow: var(--vtx-shadow-md);\r\n}\r\n\r\n.orderconfirmation-subtitle {\r\n color: var(--vtx-color-neutral-600);\r\n max-width: 400px;\r\n}\r\n\r\n/* Items Card */\r\n.orderconfirmation-items-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderconfirmation-item {\r\n width: 100%;\r\n}\r\n\r\n.orderconfirmation-item-image-wrapper {\r\n width: 64px;\r\n height: 64px;\r\n flex-shrink: 0;\r\n border-radius: var(--vtx-radius-md);\r\n overflow: hidden;\r\n background: var(--vtx-color-neutral-100);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.orderconfirmation-item-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.orderconfirmation-item-name {\r\n color: var(--vtx-color-neutral-900);\r\n word-break: break-word;\r\n overflow-wrap: break-word;\r\n hyphens: auto;\r\n}\r\n\r\n.orderconfirmation-item-variant {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.orderconfirmation-item-unit-price {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n/* Summary Card */\r\n.orderconfirmation-summary-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderconfirmation-discount {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n.orderconfirmation-total {\r\n color: var(--vtx-color-primary-600);\r\n font-size: 1.125rem;\r\n}\r\n\r\n/* Address Card */\r\n.orderconfirmation-address-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderconfirmation-address {\r\n color: var(--vtx-color-neutral-700);\r\n line-height: 1.6;\r\n}\r\n\r\n.orderconfirmation-address-name {\r\n font-weight: 600;\r\n color: var(--vtx-color-neutral-900);\r\n margin-bottom: 4px;\r\n}\r\n\r\n/* Actions Card */\r\n.orderconfirmation-actions-card {\r\n padding: var(--vtx-spacing-4);\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n/* Help Card */\r\n.orderconfirmation-help-card {\r\n padding: var(--vtx-spacing-3);\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.orderconfirmation-help-text {\r\n color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.orderconfirmation-help-email {\r\n color: var(--vtx-color-neutral-600);\r\n font-weight: 500;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 640px) {\r\n .orderconfirmation-header {\r\n padding: var(--vtx-spacing-4);\r\n }\r\n\r\n .orderconfirmation-success-icon {\r\n width: 48px;\r\n height: 48px;\r\n font-size: 28px;\r\n }\r\n\r\n .orderconfirmation-items-card,\r\n .orderconfirmation-summary-card,\r\n .orderconfirmation-address-card {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .orderconfirmation-item-image-wrapper {\r\n width: 56px;\r\n height: 56px;\r\n }\r\n\r\n .orderconfirmation-item {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .orderconfirmation-total {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .orderconfirmation-success-icon {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 24px;\r\n }\r\n\r\n .orderconfirmation-item-image-wrapper {\r\n width: 48px;\r\n height: 48px;\r\n }\r\n}\r\n");const Ae=a.forwardRef(({orderId:t,orderNumber:a,orderDate:o,status:i="confirmed",statusText:l,headerText:c="Order Confirmed!",headerSubtitle:d="Thank you for your order. We'll send you a confirmation email shortly.",customerEmail:s,customerPhone:v,shippingAddress:x,billingAddress:p,items:m,subtotal:h,shippingCost:g=0,tax:u=0,discount:f=0,total:b,currency:w="₹",paymentMethod:y,transactionId:k,estimatedDelivery:_,trackingNumber:z,onDownloadInvoice:N,onContinueShopping:C,onTrackOrder:S,onViewDetails:M,onContactSupport:T,onShareOrder:$,downloadInvoiceText:I="Download Invoice",continueShoppingText:j="Continue Shopping",trackOrderText:A="Track Order",viewDetailsText:D="View Details",contactSupportText:L="Contact Support",shareOrderText:B="Share",showActions:E=!0,hideDownloadInvoice:R=!1,hideContinueShopping:O=!1,hideTrackOrder:F=!1,hideContactSupport:W=!1,className:P="",style:V,...H},Y)=>{const q=e=>n("div",{className:"orderconfirmation-address",children:[r("div",{className:"orderconfirmation-address-name",children:e.name}),r("div",{children:e.addressLine1}),e.addressLine2&&r("div",{children:e.addressLine2}),n("div",{children:[e.city,", ",e.state," ",e.zipCode]}),e.phone&&n("div",{children:["Phone: ",e.phone]})]}),G=[{label:"Order Number",value:a||`#${t}`,valueClass:"value-bold"},o?{label:"Order Date",value:o}:{label:"",value:"",hidden:!0},{label:"Status",value:r(Xn,{variant:(()=>{switch(i){case"confirmed":case"delivered":return"success";case"cancelled":return"error";case"processing":return"info";case"pending":return"warning";default:return"neutral"}})(),children:l||i.charAt(0).toUpperCase()+i.slice(1)})},_?{label:"Estimated Delivery",value:_,valueClass:"value-primary"}:{label:"",value:"",hidden:!0},z?{label:"Tracking Number",value:z,valueClass:"value-bold"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),X=[s?{label:"Email",value:s}:{label:"",value:"",hidden:!0},v?{label:"Phone",value:v}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),U=[y?{label:"Payment Method",value:y}:{label:"",value:"",hidden:!0},k?{label:"Transaction ID",value:k,valueClass:"value-muted"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden);return r("div",{className:`orderconfirmation ${P}`,style:V,ref:Y,...H,children:n(Nn,{direction:"column",gap:20,children:[r(Kn,{variant:"filled",className:"orderconfirmation-header",children:n(Nn,{direction:"column",align:"center",gap:12,children:[r("span",{className:"orderconfirmation-success-icon",children:r(Tr,{size:32})}),r(Sn,{variant:"h4",weight:"bold",align:"center",noMargin:!0,children:c}),r(Sn,{variant:"body1",align:"center",noMargin:!0,className:"orderconfirmation-subtitle",children:d}),n(Xn,{variant:"success",style:{padding:"8px 20px",borderRadius:"20px",fontWeight:600,marginTop:"8px"},children:["Order ",a||`#${t}`]})]})}),r(je,{heading:"Order Details",items:G,variant:"outlined",showDividers:!0}),X.length>0&&r(je,{heading:"Customer Information",items:X,variant:"outlined",showDividers:!0}),n(Kn,{variant:"outlined",className:"orderconfirmation-items-card",children:[n(Sn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:["Order Items (",m.length,")"]}),r(Nn,{direction:"column",gap:12,children:m.map((e,t)=>n("div",{children:[n(Nn,{direction:"row",gap:12,className:"orderconfirmation-item",children:[e.image&&r("div",{className:"orderconfirmation-item-image-wrapper",children:r("img",{src:e.image,alt:e.name,className:"orderconfirmation-item-image"})}),n(Nn,{direction:"column",gap:4,style:{flex:1,minWidth:0},children:[r(Sn,{variant:"body2",weight:"medium",noMargin:!0,className:"orderconfirmation-item-name",children:e.name}),e.variant&&r(Sn,{variant:"caption",noMargin:!0,className:"orderconfirmation-item-variant",children:e.variant}),n(Sn,{variant:"caption",noMargin:!0,children:["Qty: ",e.quantity]})]}),n(Nn,{direction:"column",align:"end",gap:2,children:[n(Sn,{variant:"body2",weight:"semibold",noMargin:!0,children:[w,(e.price*e.quantity).toLocaleString()]}),n(Sn,{variant:"caption",noMargin:!0,className:"orderconfirmation-item-unit-price",children:[w,e.price.toLocaleString()," each"]})]})]}),t<m.length-1&&r(te,{style:{margin:"12px 0"}})]},e.id))})]}),n(Kn,{variant:"outlined",className:"orderconfirmation-summary-card",children:[r(Sn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:"Payment Summary"}),n(Nn,{direction:"column",gap:8,children:[n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Subtotal"}),n(Sn,{variant:"body2",noMargin:!0,children:[w,h.toLocaleString()]})]}),g>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Shipping"}),n(Sn,{variant:"body2",noMargin:!0,children:[w,g.toLocaleString()]})]}),u>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Tax"}),n(Sn,{variant:"body2",noMargin:!0,children:[w,u.toLocaleString()]})]}),f>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,className:"orderconfirmation-discount",children:"Discount"}),n(Sn,{variant:"body2",noMargin:!0,className:"orderconfirmation-discount",children:["-",w,f.toLocaleString()]})]}),r(te,{style:{margin:"8px 0"}}),n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body1",weight:"bold",noMargin:!0,children:"Total"}),n(Sn,{variant:"body1",weight:"bold",noMargin:!0,className:"orderconfirmation-total",children:[w,b.toLocaleString()]})]})]}),U.length>0&&n(e,{children:[r(te,{style:{margin:"12px 0"}}),r(Nn,{direction:"column",gap:8,children:U.map((e,t)=>n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:e.label}),r(Sn,{variant:"body2",noMargin:!0,className:e.valueClass,children:e.value})]},t))})]})]}),n(Nn,{direction:"row",gap:16,wrap:"wrap",children:[r(Kn,{variant:"outlined",className:"orderconfirmation-address-card",style:{flex:"1 1 280px"},children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Wr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Address"})]}),r(te,{}),q(x)]})}),p&&r(Kn,{variant:"outlined",className:"orderconfirmation-address-card",style:{flex:"1 1 280px"},children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Or,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Billing Address"})]}),r(te,{}),q(p)]})})]}),E&&r(Kn,{variant:"outlined",className:"orderconfirmation-actions-card",children:n(Nn,{direction:"column",gap:16,children:[r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"What's Next?"}),r(te,{}),n(Nn,{direction:"row",gap:12,wrap:"wrap",children:[!R&&N&&r(pr,{variant:"primary",size:"md",onClick:()=>N(t),leftIcon:r(Dr,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:I}),!F&&S&&z&&r(pr,{variant:"primary",size:"md",onClick:()=>S(t),leftIcon:r(Lr,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:A})]}),n(Nn,{direction:"row",gap:12,wrap:"wrap",children:[!O&&C&&r(pr,{variant:"outline",size:"md",onClick:C,leftIcon:r(Br,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:j}),M&&r(pr,{variant:"outline",size:"md",onClick:()=>M(t),leftIcon:r(Rr,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:D})]}),n(Nn,{direction:"row",gap:12,wrap:"wrap",justify:"center",children:[!W&&T&&r(pr,{variant:"ghost",size:"md",onClick:()=>T(t),leftIcon:r(Fr,{size:18}),children:L}),$&&r(pr,{variant:"ghost",size:"md",onClick:()=>$(t),leftIcon:r(Er,{size:18}),children:B})]})]})}),r(Kn,{variant:"filled",className:"orderconfirmation-help-card",style:{background:"var(--vtx-color-primary-50)",border:"1px solid var(--vtx-color-primary-100)"},children:n(Nn,{direction:"column",gap:12,align:"center",children:[n(Nn,{align:"center",gap:8,children:[r(Fr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Need Help?"})]}),r(Sn,{variant:"body2",align:"center",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)"},children:"Our support team is available 24/7 to assist you with your order"}),n(Nn,{direction:"row",gap:16,wrap:"wrap",justify:"center",style:{marginTop:"4px"},children:[n(Nn,{align:"center",gap:6,children:[r(Fr,{size:16}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:"support@example.com"})]}),n(Nn,{align:"center",gap:6,children:[r(Pr,{size:16}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:"1-800-123-4567"})]})]})]})})]})})});Ae.displayName="OrderConfirmation";const De=sr(Ae);vr(".orderdetails {\r\n width: 100%;\r\n max-width: 100%;\r\n}\r\n\r\n/* Header */\r\n.orderdetails-header {\r\n padding: var(--vtx-spacing-4);\r\n background: var(--vtx-color-neutral-50);\r\n border: 2px solid var(--vtx-color-neutral-300);\r\n}\r\n\r\n.orderdetails-date {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* Items Card */\r\n.orderdetails-items-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderdetails-item {\r\n width: 100%;\r\n}\r\n\r\n.orderdetails-item-image-wrapper {\r\n width: 64px;\r\n height: 64px;\r\n flex-shrink: 0;\r\n border-radius: var(--vtx-radius-md);\r\n overflow: hidden;\r\n background: var(--vtx-color-neutral-100);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.orderdetails-item-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.orderdetails-item-name {\r\n color: var(--vtx-color-neutral-900);\r\n word-break: break-word;\r\n overflow-wrap: break-word;\r\n hyphens: auto;\r\n}\r\n\r\n.orderdetails-item-variant,\r\n.orderdetails-item-sku {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.orderdetails-item-unit-price {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n/* Summary Card */\r\n.orderdetails-summary-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderdetails-discount {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n.orderdetails-total {\r\n color: var(--vtx-color-primary-600);\r\n font-size: 1.125rem;\r\n}\r\n\r\n/* Address Card */\r\n.orderdetails-address-card {\r\n padding: var(--vtx-spacing-4);\r\n}\r\n\r\n.orderdetails-address {\r\n color: var(--vtx-color-neutral-700);\r\n line-height: 1.6;\r\n}\r\n\r\n.orderdetails-address-name {\r\n font-weight: 600;\r\n color: var(--vtx-color-neutral-900);\r\n margin-bottom: 4px;\r\n}\r\n\r\n/* Actions Card */\r\n.orderdetails-actions-card {\r\n padding: var(--vtx-spacing-4);\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n/* Help Card */\r\n.orderdetails-help-card {\r\n padding: var(--vtx-spacing-3);\r\n background: var(--vtx-color-neutral-50);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.orderdetails-help-text {\r\n color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.orderdetails-help-email {\r\n color: var(--vtx-color-neutral-600);\r\n font-weight: 500;\r\n}\r\n\r\n/* Tracking Link */\r\n.orderdetails-tracking-link {\r\n color: var(--vtx-color-primary-600);\r\n text-decoration: none;\r\n font-weight: 600;\r\n transition: color var(--vtx-transition-base);\r\n}\r\n\r\n.orderdetails-tracking-link:hover {\r\n color: var(--vtx-color-primary-700);\r\n text-decoration: underline;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 640px) {\r\n .orderdetails-header {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .orderdetails-items-card,\r\n .orderdetails-summary-card,\r\n .orderdetails-address-card,\r\n .orderdetails-actions-card {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .orderdetails-item-image-wrapper {\r\n width: 56px;\r\n height: 56px;\r\n }\r\n\r\n .orderdetails-item {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .orderdetails-total {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .orderdetails-item-image-wrapper {\r\n width: 48px;\r\n height: 48px;\r\n }\r\n}\r\n");const Le=a.forwardRef(({orderId:t,orderNumber:a,orderDate:o,status:i,statusText:l,customerName:c,customerEmail:d,customerPhone:s,shippingAddress:v,billingAddress:x,items:p,subtotal:m,shippingCost:h=0,tax:g=0,discount:u=0,total:f,currency:b="₹",couponCode:w,paymentMethod:y,paymentStatus:k,transactionId:_,estimatedDelivery:z,deliveredDate:N,trackingNumber:C,trackingUrl:S,carrier:M,onDownloadInvoice:T,onTrackOrder:$,onCancelOrder:I,onReturnOrder:j,onReorder:A,onContactSupport:D,onWriteReview:L,downloadInvoiceText:B="Download Invoice",trackOrderText:E="Track Package",cancelOrderText:R="Cancel Order",returnOrderText:O="Return Items",reorderText:F="Reorder",contactSupportText:W="Contact Support",writeReviewText:P="Write Review",showActions:V=!0,allowCancel:H=!0,allowReturn:Y=!0,allowReorder:q=!0,className:G="",style:X,...U},K)=>{const Q=()=>{switch(k){case"paid":return"success";case"failed":return"error";case"pending":return"warning";case"refunded":return"info";default:return"neutral"}},Z=e=>n("div",{className:"orderdetails-address",children:[r("div",{className:"orderdetails-address-name",children:e.name}),r("div",{children:e.addressLine1}),e.addressLine2&&r("div",{children:e.addressLine2}),n("div",{children:[e.city,", ",e.state," ",e.zipCode]}),e.phone&&n("div",{children:["Phone: ",e.phone]})]}),J=H&&("pending"===i||"processing"===i),rr=Y&&"delivered"===i,nr=C&&("shipped"===i||"delivered"===i),er=[c?{label:"Name",value:c}:{label:"",value:"",hidden:!0},d?{label:"Email",value:d}:{label:"",value:"",hidden:!0},s?{label:"Phone",value:s}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),tr=[y?{label:"Payment Method",value:y}:{label:"",value:"",hidden:!0},k?{label:"Payment Status",value:r(Xn,{variant:Q(),children:k.charAt(0).toUpperCase()+k.slice(1)})}:{label:"",value:"",hidden:!0},_?{label:"Transaction ID",value:_,valueClass:"value-muted"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden);return r("div",{className:`orderdetails ${G}`,style:X,ref:K,...U,children:n(Nn,{direction:"column",gap:24,children:[n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"h3",weight:"bold",noMargin:!0,children:"Order Details"}),n(Sn,{variant:"body1",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)"},children:["Placed on ",o]})]}),r(Kn,{variant:"outlined",style:{padding:"32px 24px"},children:r(pe,{steps:["Order Placed","Packed","Shipped","Delivered"],currentStep:(()=>{switch(i){case"pending":case"cancelled":case"returned":default:return 0;case"processing":case"confirmed":return 1;case"shipped":return 2;case"delivered":return 3}})(),orientation:"horizontal",variant:"circle",showCheckmarks:!0,color:"success",size:"md"})}),n(Nn,{direction:"row",gap:16,wrap:"wrap",children:[r(Kn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Order Number"}),r(Sn,{variant:"h6",weight:"bold",noMargin:!0,children:a||`#${t}`})]})}),r(Kn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Status"}),r(Xn,{variant:(()=>{switch(i){case"delivered":return"success";case"cancelled":case"returned":return"error";case"shipped":case"processing":return"info";case"pending":return"warning";default:return"neutral"}})(),style:{alignSelf:"flex-start",padding:"4px 12px"},children:l||i.charAt(0).toUpperCase()+i.slice(1)})]})}),(N||z)&&r(Kn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:N?"Delivered On":"Estimated Delivery"}),r(Sn,{variant:"h6",weight:"bold",noMargin:!0,style:{color:N?"var(--vtx-color-success-600)":"inherit"},children:N||z})]})}),k&&r(Kn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:n(Nn,{direction:"column",gap:8,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Payment"}),r(Xn,{variant:Q(),style:{alignSelf:"flex-start",padding:"4px 12px"},children:k.charAt(0).toUpperCase()+k.slice(1)})]})})]}),V&&(T||nr&&$)&&n(Nn,{direction:"row",gap:12,wrap:"wrap",children:[T&&r(pr,{variant:"outline",size:"md",onClick:()=>T(t),leftIcon:r(Dr,{size:18}),style:{flex:"1 1 auto",minWidth:"180px"},children:B}),nr&&$&&r(pr,{variant:"primary",size:"md",onClick:()=>$(t),leftIcon:r(Lr,{size:18}),style:{flex:"1 1 auto",minWidth:"180px"},children:E})]}),(C||M)&&r(Kn,{variant:"outlined",children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Vr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Information"})]}),r(te,{}),n(Nn,{direction:"column",gap:12,children:[C&&n(Nn,{direction:"column",gap:4,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",fontSize:"0.75rem"},children:"Tracking Number"}),S?r("a",{href:S,target:"_blank",rel:"noopener noreferrer",style:{color:"var(--vtx-color-primary-600)",fontWeight:600,textDecoration:"none"},children:C}):r(Sn,{variant:"body2",weight:"semibold",noMargin:!0,children:C})]}),M&&n(Nn,{direction:"column",gap:4,children:[r(Sn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",fontSize:"0.75rem"},children:"Carrier"}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:M})]})]})]})}),n(Kn,{variant:"outlined",className:"orderdetails-items-card",children:[n(Sn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:["Items (",p.length,")"]}),r(Nn,{direction:"column",gap:12,children:p.map((e,t)=>n("div",{children:[n(Nn,{direction:"row",gap:12,className:"orderdetails-item",children:[e.image&&r("div",{className:"orderdetails-item-image-wrapper",children:r("img",{src:e.image,alt:e.name,className:"orderdetails-item-image"})}),n(Nn,{direction:"column",gap:4,style:{flex:1,minWidth:0},children:[r(Sn,{variant:"body2",weight:"medium",noMargin:!0,className:"orderdetails-item-name",children:e.name}),e.variant&&r(Sn,{variant:"caption",noMargin:!0,className:"orderdetails-item-variant",children:e.variant}),n(Sn,{variant:"caption",noMargin:!0,children:["Qty: ",e.quantity]})]}),n(Nn,{direction:"column",align:"end",gap:2,children:[n(Sn,{variant:"body2",weight:"semibold",noMargin:!0,children:[b,(e.price*e.quantity).toLocaleString()]}),n(Sn,{variant:"caption",noMargin:!0,className:"orderdetails-item-unit-price",children:[b,e.price.toLocaleString()," each"]})]})]}),t<p.length-1&&r(te,{style:{margin:"12px 0"}})]},e.id))})]}),n(Kn,{variant:"outlined",className:"orderdetails-summary-card",children:[r(Sn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:"Order Summary"}),n(Nn,{direction:"column",gap:8,children:[n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Subtotal"}),n(Sn,{variant:"body2",noMargin:!0,children:[b,m.toLocaleString()]})]}),h>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Shipping"}),n(Sn,{variant:"body2",noMargin:!0,children:[b,h.toLocaleString()]})]}),g>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:"Tax"}),n(Sn,{variant:"body2",noMargin:!0,children:[b,g.toLocaleString()]})]}),w&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,className:"orderdetails-coupon",children:"Coupon Applied"}),r(Sn,{variant:"body2",noMargin:!0,className:"orderdetails-coupon",children:w})]}),u>0&&n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,className:"orderdetails-discount",children:"Discount"}),n(Sn,{variant:"body2",noMargin:!0,className:"orderdetails-discount",children:["-",b,u.toLocaleString()]})]}),r(te,{style:{margin:"8px 0"}}),n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body1",weight:"bold",noMargin:!0,children:"Total"}),n(Sn,{variant:"body1",weight:"bold",noMargin:!0,className:"orderdetails-total",children:[b,f.toLocaleString()]})]})]}),tr.length>0&&n(e,{children:[r(te,{style:{margin:"12px 0"}}),r(Nn,{direction:"column",gap:8,children:tr.map((e,t)=>n(Nn,{justify:"between",align:"center",children:[r(Sn,{variant:"body2",noMargin:!0,children:e.label}),r(Sn,{variant:"body2",noMargin:!0,className:e.valueClass,children:e.value})]},t))})]})]}),er.length>0&&r(je,{heading:"Customer Information",items:er,variant:"outlined",showDividers:!0}),n(Nn,{direction:"row",gap:16,wrap:"wrap",children:[r(Kn,{variant:"outlined",className:"orderdetails-address-card",style:{flex:"1 1 280px"},children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Wr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Address"})]}),r(te,{}),Z(v)]})}),x&&r(Kn,{variant:"outlined",className:"orderdetails-address-card",style:{flex:"1 1 280px"},children:n(Nn,{direction:"column",gap:12,children:[n(Nn,{align:"center",gap:8,children:[r(Or,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Billing Address"})]}),r(te,{}),Z(x)]})})]}),V&&r(Kn,{variant:"outlined",className:"orderdetails-actions-card",children:n(Nn,{direction:"column",gap:16,children:[r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Order Actions"}),r(te,{}),n(Nn,{direction:"row",gap:12,wrap:"wrap",children:[J&&I&&r(pr,{variant:"outline",size:"md",onClick:()=>I(t),leftIcon:r(Hr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px",borderColor:"var(--vtx-color-error-500)",color:"var(--vtx-color-error-600)"},children:R}),rr&&j&&r(pr,{variant:"outline",size:"md",onClick:()=>j(t),leftIcon:r(Yr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:O}),q&&A&&r(pr,{variant:"outline",size:"md",onClick:()=>A(t),leftIcon:r(qr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:F})]}),n(Nn,{direction:"row",gap:12,wrap:"wrap",children:["delivered"===i&&L&&r(pr,{variant:"ghost",size:"md",onClick:()=>L(t),leftIcon:r(Gr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:P}),D&&r(pr,{variant:"ghost",size:"md",onClick:()=>D(t),leftIcon:r(Fr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:W})]})]})}),r(Kn,{variant:"filled",className:"orderdetails-help-card",style:{background:"var(--vtx-color-primary-50)",border:"1px solid var(--vtx-color-primary-100)"},children:n(Nn,{direction:"column",gap:12,align:"center",children:[n(Nn,{align:"center",gap:8,children:[r(Fr,{size:20}),r(Sn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Need Help?"})]}),r(Sn,{variant:"body2",align:"center",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)"},children:"Our support team is available 24/7 to assist you with your order"}),n(Nn,{direction:"row",gap:16,wrap:"wrap",justify:"center",style:{marginTop:"4px"},children:[n(Nn,{align:"center",gap:6,children:[r(Fr,{size:16}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:"support@example.com"})]}),n(Nn,{align:"center",gap:6,children:[r(Pr,{size:16}),r(Sn,{variant:"body2",weight:"medium",noMargin:!0,children:"1-800-123-4567"})]})]})]})})]})})});Le.displayName="OrderDetails";const Be=sr(Le);vr("/* ===================================================================\r\n Header - Professional Design System\r\n =================================================================== */\r\n\r\n.vtx-header {\r\n width: 100%;\r\n position: relative;\r\n z-index: 1000;\r\n}\r\n\r\n.vtx-header__container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: var(--vtx-header-height, 64px);\r\n padding: 0 var(--vtx-spacing-lg, 24px);\r\n max-width: var(--vtx-header-max-width, 1440px);\r\n margin: 0 auto;\r\n background-color: var(--header-bg, #ffffff);\r\n color: var(--header-color, #1f2937);\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.vtx-header--full-width .vtx-header__container {\r\n max-width: 100%;\r\n}\r\n\r\n.vtx-header--elevated .vtx-header__container {\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-header--sticky {\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n/* ===================================================================\r\n Scroll Behavior - Transparent to Solid\r\n =================================================================== */\r\n\r\n/* Initial state: transparent background + white text */\r\n.vtx-header--scroll-behavior .vtx-header__container {\r\n background-color: transparent;\r\n color: #ffffff;\r\n box-shadow: none;\r\n}\r\n\r\n/* Nav links, search, and icons white initially */\r\n.vtx-header--scroll-behavior .vtx-header__nav-link {\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--scroll-behavior .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--scroll-behavior .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n.vtx-header--scroll-behavior .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.vtx-header--scroll-behavior .vtx-header__logo {\r\n color: #ffffff;\r\n}\r\n\r\n/* Scrolled state: white background + dark text */\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__container {\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__nav-link {\r\n color: #1f2937;\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__search-input {\r\n background-color: rgba(0, 0, 0, 0.03);\r\n border-color: rgba(0, 0, 0, 0.1);\r\n color: #1f2937;\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__search-input::placeholder {\r\n color: #9ca3af;\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__search-icon {\r\n color: #9ca3af;\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled .vtx-header__logo {\r\n color: #1f2937;\r\n}\r\n\r\n/* Two-row layout scroll behavior */\r\n.vtx-header--scroll-behavior.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n background-color: transparent;\r\n color: #ffffff;\r\n border-bottom-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n border-bottom-color: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n/* Override theme colors when using scroll behavior - force transparent + white initially */\r\n.vtx-header--scroll-behavior.vtx-header--primary .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--secondary .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--dark .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--light .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--gradient .vtx-header__container {\r\n background-color: transparent !important;\r\n background: transparent !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n/* Scrolled state for all themes - white background + dark text */\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--primary .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--secondary .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--dark .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--light .vtx-header__container,\r\n.vtx-header--scroll-behavior.vtx-header--scrolled.vtx-header--gradient .vtx-header__container {\r\n background-color: #ffffff !important;\r\n background: #ffffff !important;\r\n color: #1f2937 !important;\r\n}\r\n\r\n/* ===================================================================\r\n Top Bar\r\n =================================================================== */\r\n\r\n.vtx-header__topbar {\r\n width: 100%;\r\n min-height: 36px;\r\n display: flex;\r\n align-items: center;\r\n font-size: 0.8125rem;\r\n line-height: 1.4;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n}\r\n\r\n.vtx-header__topbar-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n max-width: var(--vtx-header-max-width, 1440px);\r\n margin: 0 auto;\r\n padding: 0 var(--vtx-spacing-lg, 24px);\r\n gap: var(--vtx-spacing-md, 16px);\r\n}\r\n\r\n.vtx-header--full-width .vtx-header__topbar-container {\r\n max-width: 100%;\r\n}\r\n\r\n.vtx-header__topbar-left,\r\n.vtx-header__topbar-right {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-md, 16px);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-header__topbar-content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n text-align: center;\r\n gap: var(--vtx-spacing-sm, 8px);\r\n}\r\n\r\n.vtx-header__topbar-dismiss {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: all 0.2s ease;\r\n color: inherit;\r\n opacity: 0.7;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-header__topbar-dismiss:hover {\r\n opacity: 1;\r\n background-color: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n/* Top Bar Variants */\r\n.vtx-header__topbar--subtle {\r\n background-color: #f8f9fa;\r\n color: #495057;\r\n}\r\n\r\n.vtx-header__topbar--bold {\r\n background-color: #343a40;\r\n color: #ffffff;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.vtx-header__topbar--bold .vtx-header__topbar-dismiss:hover {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n.vtx-header__topbar--accent {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: #ffffff;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.vtx-header__topbar--accent .vtx-header__topbar-dismiss:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.vtx-header__topbar--dark {\r\n background-color: #1a1a1a;\r\n color: #e9ecef;\r\n border-bottom-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.vtx-header__topbar--dark .vtx-header__topbar-dismiss:hover {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.vtx-header__topbar--gradient {\r\n background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);\r\n color: #ffffff;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.vtx-header__topbar--gradient .vtx-header__topbar-dismiss:hover {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n/* ===================================================================\r\n Logo\r\n =================================================================== */\r\n\r\n.vtx-header__logo {\r\n display: flex;\r\n align-items: center;\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n flex-shrink: 0;\r\n color: inherit;\r\n}\r\n\r\n.vtx-header__logo img {\r\n max-height: 40px;\r\n height: auto;\r\n}\r\n\r\n/* ===================================================================\r\n Desktop Navigation\r\n =================================================================== */\r\n\r\n.vtx-header--desktop .vtx-header__nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n flex: 1;\r\n margin: 0 32px;\r\n}\r\n\r\n.vtx-header__nav-item {\r\n position: relative;\r\n}\r\n\r\n.vtx-header__nav-link {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n padding: 8px 16px;\r\n text-decoration: none;\r\n color: inherit;\r\n border-radius: 8px;\r\n font-size: 0.9375rem;\r\n font-weight: 500;\r\n transition: all 0.2s ease;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-header__nav-link:hover {\r\n background-color: var(--hover-bg, rgba(0, 0, 0, 0.05));\r\n}\r\n\r\n.vtx-header__nav-link--active {\r\n background-color: var(--active-bg, rgba(0, 0, 0, 0.08));\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-header__nav-link--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__nav-icon,\r\n.vtx-header__nav-label,\r\n.vtx-header__nav-badge,\r\n.vtx-header__nav-chevron {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-header__nav-label {\r\n flex: 1;\r\n}\r\n\r\n.vtx-header__nav-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n margin-left: 4px;\r\n}\r\n\r\n/* Badge component styling overrides for header context */\r\n.vtx-header__nav-badge .vtx-badge,\r\n.vtx-header__dropdown-badge .vtx-badge,\r\n.vtx-header__mega-menu-badge .vtx-badge,\r\n.vtx-header__mobile-nav-badge .vtx-badge {\r\n margin: 0;\r\n}\r\n\r\n/* ===================================================================\r\n Dropdown Menus\r\n =================================================================== */\r\n\r\n.vtx-header__dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n margin-top: 8px;\r\n min-width: 200px;\r\n background-color: #ffffff;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\r\n padding: 8px;\r\n z-index: 1001;\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header__dropdown-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 12px;\r\n text-decoration: none;\r\n color: #1f2937;\r\n border-radius: 6px;\r\n font-size: 0.875rem;\r\n transition: all 0.2s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-header__dropdown-item:hover {\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-header__dropdown-item--active {\r\n background-color: rgba(59, 130, 246, 0.1);\r\n color: #3b82f6;\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-header__dropdown-item--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__dropdown-icon,\r\n.vtx-header__dropdown-label,\r\n.vtx-header__dropdown-badge {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-header__dropdown-label {\r\n flex: 1;\r\n}\r\n\r\n/* ===================================================================\r\n Mega Menu\r\n =================================================================== */\r\n\r\n.vtx-header__mega-menu {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n margin-top: 8px;\r\n background-color: #ffffff;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\r\n padding: 24px;\r\n z-index: 1001;\r\n min-width: 600px;\r\n max-width: 900px;\r\n}\r\n\r\n.vtx-header__mega-menu-container {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 32px;\r\n}\r\n\r\n.vtx-header__mega-menu-column-title {\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: #6b7280;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.vtx-header__mega-menu-items {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.vtx-header__mega-menu-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n padding: 12px;\r\n text-decoration: none;\r\n color: #1f2937;\r\n border-radius: 8px;\r\n transition: all 0.2s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-header__mega-menu-item:hover {\r\n background-color: rgba(0, 0, 0, 0.03);\r\n}\r\n\r\n.vtx-header__mega-menu-item--active {\r\n background-color: rgba(59, 130, 246, 0.08);\r\n color: #3b82f6;\r\n}\r\n\r\n.vtx-header__mega-menu-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n background-color: rgba(59, 130, 246, 0.1);\r\n border-radius: 8px;\r\n flex-shrink: 0;\r\n color: #3b82f6;\r\n}\r\n\r\n.vtx-header__mega-menu-item-content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.vtx-header__mega-menu-item-label {\r\n display: block;\r\n font-size: 0.875rem;\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.vtx-header__mega-menu-item-description {\r\n display: block;\r\n font-size: 0.8125rem;\r\n color: #6b7280;\r\n line-height: 1.4;\r\n}\r\n\r\n.vtx-header__mega-menu-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n margin-top: 2px;\r\n}\r\n\r\n/* ===================================================================\r\n Search\r\n =================================================================== */\r\n\r\n.vtx-header__search {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n max-width: 400px;\r\n}\r\n\r\n.vtx-header__search-icon {\r\n position: absolute;\r\n left: 12px;\r\n color: #9ca3af;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__search-input {\r\n width: 100%;\r\n height: 40px;\r\n padding: 0 16px 0 40px;\r\n border: 1px solid rgba(0, 0, 0, 0.1);\r\n border-radius: 8px;\r\n font-size: 0.875rem;\r\n background-color: rgba(0, 0, 0, 0.03);\r\n color: inherit;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header__search-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n background-color: #ffffff;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.vtx-header__search-input::placeholder {\r\n color: #9ca3af;\r\n}\r\n\r\n/* ===================================================================\r\n Actions\r\n =================================================================== */\r\n\r\n.vtx-header__actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.vtx-header__actions-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n/* ===================================================================\r\n Two-Row Layout\r\n =================================================================== */\r\n\r\n.vtx-header--layout-two-row {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__top-row {\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n height: 64px;\r\n justify-content: space-between;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__bottom-row {\r\n background-color: rgba(0, 0, 0, 0.03);\r\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__bottom-row .vtx-header__container {\r\n height: 56px;\r\n justify-content: center;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav {\r\n margin: 0;\r\n flex: 1;\r\n max-width: 1400px;\r\n justify-content: space-evenly;\r\n gap: 0;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-item {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-item:not(:last-child)::after {\r\n content: '|';\r\n color: rgba(0, 0, 0, 0.15);\r\n margin: 0 16px;\r\n font-weight: 300;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-link {\r\n padding: 8px 24px;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n letter-spacing: 0.01em;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-link:hover {\r\n background-color: rgba(0, 0, 0, 0.04);\r\n transform: translateY(-1px);\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-link--active {\r\n background-color: rgba(0, 0, 0, 0.06);\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__nav-link--active::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -14px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 60%;\r\n height: 3px;\r\n background-color: currentColor;\r\n border-radius: 3px 3px 0 0;\r\n}\r\n\r\n.vtx-header--layout-two-row .vtx-header__search--expanded {\r\n flex: 1;\r\n max-width: 600px;\r\n margin: 0 32px;\r\n}\r\n\r\n/* Two-Row Bottom Style Variants */\r\n.vtx-header--layout-two-row.vtx-header--divider .vtx-header__top-row {\r\n border-bottom: 2px solid rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--divider .vtx-header__bottom-row {\r\n background-color: transparent;\r\n box-shadow: none;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--dark-bottom .vtx-header__bottom-row {\r\n background-color: rgba(0, 0, 0, 0.08);\r\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--dark-bottom .vtx-header__nav-link {\r\n color: rgba(0, 0, 0, 0.85);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--dark-bottom .vtx-header__nav-link:hover {\r\n background-color: rgba(0, 0, 0, 0.06);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--gradient-bottom .vtx-header__bottom-row {\r\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.05) 100%);\r\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--elevated-bottom .vtx-header__bottom-row {\r\n background-color: #ffffff;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--elevated-bottom .vtx-header__top-row {\r\n border-bottom: none;\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--elevated-bottom .vtx-header__nav-link--active {\r\n background-color: transparent;\r\n}\r\n\r\n.vtx-header--layout-two-row.vtx-header--elevated-bottom .vtx-header__nav-link:hover {\r\n background-color: rgba(0, 0, 0, 0.02);\r\n}\r\n\r\n/* ===================================================================\r\n Centered Layout\r\n =================================================================== */\r\n\r\n.vtx-header--layout-centered .vtx-header__container {\r\n justify-content: center;\r\n gap: 32px;\r\n}\r\n\r\n.vtx-header--layout-centered .vtx-header__logo {\r\n position: absolute;\r\n left: 24px;\r\n}\r\n\r\n.vtx-header--layout-centered .vtx-header__actions {\r\n position: absolute;\r\n right: 24px;\r\n}\r\n\r\n.vtx-header--layout-centered .vtx-header__nav {\r\n margin: 0;\r\n flex: 0;\r\n}\r\n\r\n/* ===================================================================\r\n Mobile Styles\r\n =================================================================== */\r\n\r\n.vtx-header--mobile .vtx-header__menu-toggle {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n cursor: pointer;\r\n border-radius: 8px;\r\n color: inherit;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header--mobile .vtx-header__menu-toggle:hover {\r\n background-color: var(--hover-bg, rgba(0, 0, 0, 0.05));\r\n}\r\n\r\n.vtx-header__overlay {\r\n position: fixed;\r\n inset: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n z-index: 999;\r\n animation: fadeIn 0.3s ease;\r\n}\r\n\r\n@keyframes fadeIn {\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-header__mobile-menu {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n bottom: 0;\r\n width: 280px;\r\n background-color: #ffffff;\r\n box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);\r\n z-index: 1000;\r\n transform: translateX(-100%);\r\n transition: transform 0.3s ease;\r\n overflow-y: auto;\r\n}\r\n\r\n.vtx-header__mobile-menu--open {\r\n transform: translateX(0);\r\n}\r\n\r\n.vtx-header__mobile-menu-content {\r\n padding: 24px;\r\n}\r\n\r\n.vtx-header__mobile-search {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.vtx-header__mobile-search-icon {\r\n position: absolute;\r\n left: 12px;\r\n color: #9ca3af;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__mobile-search-input {\r\n width: 100%;\r\n height: 40px;\r\n padding: 0 16px 0 40px;\r\n border: 1px solid rgba(0, 0, 0, 0.1);\r\n border-radius: 8px;\r\n font-size: 0.875rem;\r\n background-color: rgba(0, 0, 0, 0.03);\r\n color: #1f2937;\r\n}\r\n\r\n.vtx-header__mobile-search-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n background-color: #ffffff;\r\n}\r\n\r\n.vtx-header__mobile-nav {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.vtx-header__mobile-nav-item {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-header__mobile-nav-link-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.vtx-header__mobile-nav-link {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px;\r\n text-decoration: none;\r\n color: #1f2937;\r\n border-radius: 8px;\r\n font-size: 0.9375rem;\r\n font-weight: 500;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header__mobile-nav-link:hover {\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-header__mobile-nav-link--active {\r\n background-color: rgba(59, 130, 246, 0.1);\r\n color: #3b82f6;\r\n font-weight: 600;\r\n}\r\n\r\n.vtx-header__mobile-nav-link--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-header__mobile-nav-icon,\r\n.vtx-header__mobile-nav-label,\r\n.vtx-header__mobile-nav-badge {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-header__mobile-nav-label {\r\n flex: 1;\r\n}\r\n\r\n.vtx-header__mobile-nav-toggle {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n padding: 0;\r\n border: none;\r\n background: transparent;\r\n cursor: pointer;\r\n border-radius: 6px;\r\n color: #6b7280;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.vtx-header__mobile-nav-toggle:hover {\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-header__mobile-nav-toggle--expanded {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.vtx-header__mobile-nav-children {\r\n padding-left: 20px;\r\n margin-top: 4px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.vtx-header__mobile-nav-item--level-1 .vtx-header__mobile-nav-link {\r\n padding-left: 24px;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vtx-header__mobile-actions {\r\n margin-top: 24px;\r\n padding-top: 24px;\r\n border-top: 1px solid rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* ===================================================================\r\n Theme Variants\r\n =================================================================== */\r\n\r\n/* Primary */\r\n.vtx-header--primary {\r\n --header-bg: #3b82f6;\r\n --header-color: #ffffff;\r\n --hover-bg: rgba(255, 255, 255, 0.1);\r\n --active-bg: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n/* Apply theme to single-row container */\r\n.vtx-header--primary.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--primary.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--primary.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n.vtx-header--primary .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--primary .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n.vtx-header--primary .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n/* Secondary */\r\n.vtx-header--secondary {\r\n --header-bg: #6366f1;\r\n --header-color: #ffffff;\r\n --hover-bg: rgba(255, 255, 255, 0.1);\r\n --active-bg: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n.vtx-header--secondary.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--secondary.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--secondary.vtx-header--layout-two-row .vtx-header__top-row .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n.vtx-header--secondary .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--secondary .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n.vtx-header--secondary .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n/* Dark */\r\n.vtx-header--dark {\r\n --header-bg: #1f2937;\r\n --header-color: #ffffff;\r\n --hover-bg: rgba(255, 255, 255, 0.1);\r\n --active-bg: rgba(255, 255, 255, 0.15);\r\n}.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--dark.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--dark.vtx-header--layout-two-row .vtx-header__top-row\r\n\r\n.vtx-header--dark .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n.vtx-header--dark .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--dark .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.6);\r\n}\r\n\r\n.vtx-header--dark .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.6);\r\n}\r\n\r\n/* Light */\r\n.vtx-header--light {\r\n --header-bg: #f9fafb;\r\n --header-color: #1f2937;\r\n --hover-bg: rgba(0, 0, 0, 0.05);\r\n --active-bg: rgba(0, 0, 0, 0.08);\r\n}.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--light.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--light.vtx-header--layout-two-row .vtx-header__top-row\r\n\r\n.vtx-header--light .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n/* Transparent */\r\n.vtx-header--transparent {\r\n --header-bg: transparent;\r\n --header-color: #1f2937;\r\n --hover-bg: rgba(0, 0, 0, 0.05);\r\n --active-bg: rgba(0, 0, 0, 0.08);\r\n}.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--transparent.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--transparent.vtx-header--layout-two-row .vtx-header__top-row\r\n\r\n.vtx-header--transparent .vtx-header__container {\r\n background-color: var(--header-bg);\r\n color: var(--header-color);\r\n}\r\n\r\n/* Gradient */\r\n.vtx-header--gradient {\r\n --header-color: #ffffff;\r\n --hover-bg: rgba(255, 255, 255, 0.1);\r\n --active-bg: rgba(255, 255, 255, 0.15);\r\n}.vtx-header--layout-single-row .vtx-header__container,\r\n.vtx-header--gradient.vtx-header--layout-centered .vtx-header__container,\r\n.vtx-header--gradient.vtx-header--layout-two-row .vtx-header__top-row\r\n\r\n.vtx-header--gradient .vtx-header__container {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: var(--header-color);\r\n}\r\n\r\n.vtx-header--gradient .vtx-header__search-input {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n}\r\n\r\n.vtx-header--gradient .vtx-header__search-input::placeholder {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n.vtx-header--gradient .vtx-header__search-icon {\r\n color: rgba(255, 255, 255, 0.7);\r\n}\r\n\r\n/* ===================================================================\r\n Responsive Adjustments\r\n =================================================================== */\r\n\r\n@media (max-width: 768px) {\r\n .vtx-header__container {\r\n padding: 0 16px;\r\n }\r\n\r\n .vtx-header__topbar-container {\r\n padding: 0 16px;\r\n }\r\n}\r\n");const Ee=a.forwardRef(({logo:e,navItems:t=[],actions:o,variant:i="primary",elevated:l=!1,sticky:c=!1,fullWidth:s=!1,searchEnabled:v=!1,searchPlaceholder:x="Search...",onSearch:p,onLogoClick:m,layout:h="single-row",twoRowBottomStyle:g="default",topBar:u,scrollBehavior:f,scrollThreshold:b=50,onScrollStateChange:w,className:y="",style:k,..._},z)=>{const[N,C]=d(""),[S,M]=d(null),[T,$]=d(!1),[I,j]=d(!1);a.useEffect(()=>{if(!f)return;const r=()=>{const r=window.scrollY>b;j(n=>(n!==r&&(null==w||w(r)),r))};return window.addEventListener("scroll",r,{passive:!0}),()=>window.removeEventListener("scroll",r)},[f,b,w]);const A=["vtx-header","vtx-header--desktop",`vtx-header--${i}`,`vtx-header--layout-${h}`,"two-row"===h&&"default"!==g&&`vtx-header--${g}`,l&&"vtx-header--elevated",c&&"vtx-header--sticky",s&&"vtx-header--full-width",u&&!T&&"vtx-header--has-topbar",f&&"vtx-header--scroll-behavior",f&&I&&"vtx-header--scrolled",y].filter(Boolean).join(" "),D=r=>{r.preventDefault(),p&&p(N)},L=e=>{const t=e.children&&e.children.length>0,a=e.megaMenu&&e.megaMenuColumns&&e.megaMenuColumns.length>0,o=S===e.id;return n("div",{className:`vtx-header__nav-item ${t||a?"vtx-header__nav-item--has-dropdown":""} ${a?"vtx-header__nav-item--mega":""}`,onMouseEnter:()=>(t||a)&&M(e.id),onMouseLeave:()=>(t||a)&&M(null),children:[n("a",{href:e.href,onClick:r=>{e.onClick&&(r.preventDefault(),e.onClick())},className:`vtx-header__nav-link ${e.active?"vtx-header__nav-link--active":""} ${e.disabled?"vtx-header__nav-link--disabled":""}`,"aria-current":e.active?"page":void 0,"aria-disabled":e.disabled,children:[e.icon&&r("span",{className:"vtx-header__nav-icon",children:e.icon}),r("span",{className:"vtx-header__nav-label",children:e.label}),e.badge&&r(Xn,{size:"sm",variant:"error",className:"vtx-header__nav-badge",children:e.badge}),(t||a)&&r(yr,{className:"vtx-header__nav-chevron",size:16})]}),a&&o&&r("div",{className:"vtx-header__mega-menu",children:r("div",{className:"vtx-header__mega-menu-container",children:e.megaMenuColumns.map((e,t)=>n("div",{className:"vtx-header__mega-menu-column",children:[e.title&&r(Sn,{variant:"overline",weight:"bold",className:"vtx-header__mega-menu-column-title",children:e.title}),r("div",{className:"vtx-header__mega-menu-items",children:e.items.map(e=>n("a",{href:e.href,onClick:r=>{e.onClick&&(r.preventDefault(),e.onClick())},className:"vtx-header__mega-menu-item "+(e.active?"vtx-header__mega-menu-item--active":""),children:[e.icon&&r("span",{className:"vtx-header__mega-menu-icon",children:e.icon}),n("div",{className:"vtx-header__mega-menu-item-content",children:[r(Sn,{variant:"body2",weight:"semibold",className:"vtx-header__mega-menu-item-label",children:e.label}),e.description&&r(Sn,{variant:"caption",color:"#6b7280",className:"vtx-header__mega-menu-item-description",children:e.description})]}),e.badge&&r(Xn,{size:"sm",variant:"error",className:"vtx-header__mega-menu-badge",children:e.badge})]},e.id))})]},t))})}),t&&!a&&o&&r("div",{className:"vtx-header__dropdown",children:e.children.map(e=>n("a",{href:e.href,onClick:r=>{e.onClick&&(r.preventDefault(),e.onClick())},className:`vtx-header__dropdown-item ${e.active?"vtx-header__dropdown-item--active":""} ${e.disabled?"vtx-header__dropdown-item--disabled":""}`,children:[e.icon&&r("span",{className:"vtx-header__dropdown-icon",children:e.icon}),r("span",{className:"vtx-header__dropdown-label",children:e.label}),e.badge&&r(Xn,{size:"sm",variant:"error",className:"vtx-header__dropdown-badge",children:e.badge})]},e.id))})]},e.id)},B=()=>{if(!u||T)return null;const e=u.variant||"subtle";return r("div",{className:`vtx-header__topbar vtx-header__topbar--${e}`,children:n("div",{className:"vtx-header__topbar-container",children:[u.leftContent&&r("div",{className:"vtx-header__topbar-left",children:u.leftContent}),u.content&&r("div",{className:"vtx-header__topbar-content",children:u.content}),u.rightContent&&r("div",{className:"vtx-header__topbar-right",children:u.rightContent}),u.dismissible&&r("button",{className:"vtx-header__topbar-dismiss",onClick:()=>{var r;$(!0),null===(r=u.onDismiss)||void 0===r||r.call(u)},"aria-label":"Dismiss",children:r(Hr,{size:14})})]})})};return n("header","single-row"===h?{ref:z,className:A,style:k,..._,children:[B(),n("div",{className:"vtx-header__container",children:[e&&r("div",{className:"vtx-header__logo",onClick:m,style:{cursor:m?"pointer":"default"},children:e}),t.length>0&&r("nav",{className:"vtx-header__nav","aria-label":"Main navigation",children:t.map(L)}),n("div",{className:"vtx-header__actions",children:[v&&n("form",{onSubmit:D,className:"vtx-header__search",children:[r(Xr,{className:"vtx-header__search-icon",size:18}),r("input",{type:"search",placeholder:x,value:N,onChange:r=>C(r.target.value),className:"vtx-header__search-input","aria-label":"Search"})]}),o&&r("div",{className:"vtx-header__actions-group",children:o})]})]})]}:"two-row"===h?{ref:z,className:A,style:k,..._,children:[B(),r("div",{className:"vtx-header__top-row",children:n("div",{className:"vtx-header__container",children:[e&&r("div",{className:"vtx-header__logo",onClick:m,style:{cursor:m?"pointer":"default"},children:e}),v&&n("form",{onSubmit:D,className:"vtx-header__search vtx-header__search--expanded",children:[r(Xr,{className:"vtx-header__search-icon",size:18}),r("input",{type:"search",placeholder:x,value:N,onChange:r=>C(r.target.value),className:"vtx-header__search-input","aria-label":"Search"})]}),o&&r("div",{className:"vtx-header__actions-group",children:o})]})}),t.length>0&&r("div",{className:"vtx-header__bottom-row",children:r("div",{className:"vtx-header__container",children:r("nav",{className:"vtx-header__nav","aria-label":"Main navigation",children:t.map(L)})})})]}:{ref:z,className:A,style:k,..._,children:[B(),n("div",{className:"vtx-header__container",children:[e&&r("div",{className:"vtx-header__logo",onClick:m,style:{cursor:m?"pointer":"default"},children:e}),t.length>0&&r("nav",{className:"vtx-header__nav","aria-label":"Main navigation",children:t.map(L)}),n("div",{className:"vtx-header__actions",children:[v&&n("form",{onSubmit:D,className:"vtx-header__search",children:[r(Xr,{className:"vtx-header__search-icon",size:18}),r("input",{type:"search",placeholder:x,value:N,onChange:r=>C(r.target.value),className:"vtx-header__search-input","aria-label":"Search"})]}),o&&r("div",{className:"vtx-header__actions-group",children:o})]})]})]})});Ee.displayName="HeaderDesktop";const Re=a.forwardRef(({logo:t,navItems:a=[],actions:o,variant:i="primary",elevated:l=!1,sticky:c=!1,searchEnabled:s=!1,searchPlaceholder:v="Search...",onSearch:x,onLogoClick:p,menuOpen:m,onMenuOpenChange:h,className:g="",style:u,...f},b)=>{const[w,y]=d(!1),[k,_]=d(""),[z,N]=d(new Set),C=void 0!==m,S=C?m:w,M=r=>{C?null==h||h(r):y(r)},T=["vtx-header","vtx-header--mobile",`vtx-header--${i}`,l&&"vtx-header--elevated",c&&"vtx-header--sticky",S&&"vtx-header--menu-open",g].filter(Boolean).join(" "),$=r=>{const n=new Set(z);n.has(r)?n.delete(r):n.add(r),N(n)},I=(e,t=0)=>{const a=e.children&&e.children.length>0,o=z.has(e.id);return n("div",{className:`vtx-header__mobile-nav-item vtx-header__mobile-nav-item--level-${t}`,children:[n("div",{className:"vtx-header__mobile-nav-link-wrapper",children:[n("a",{href:e.href,onClick:r=>{a?(r.preventDefault(),$(e.id)):e.onClick?(r.preventDefault(),e.onClick(),M(!1)):M(!1)},className:`vtx-header__mobile-nav-link ${e.active?"vtx-header__mobile-nav-link--active":""} ${e.disabled?"vtx-header__mobile-nav-link--disabled":""}`,"aria-current":e.active?"page":void 0,"aria-disabled":e.disabled,children:[e.icon&&r("span",{className:"vtx-header__mobile-nav-icon",children:e.icon}),r("span",{className:"vtx-header__mobile-nav-label",children:e.label}),e.badge&&r(Xn,{size:"sm",variant:"error",className:"vtx-header__mobile-nav-badge",children:e.badge})]}),a&&r("button",{className:"vtx-header__mobile-nav-toggle "+(o?"vtx-header__mobile-nav-toggle--expanded":""),onClick:()=>$(e.id),"aria-label":`Toggle ${e.label} submenu`,"aria-expanded":o,children:r(yr,{size:16})})]}),a&&o&&r("div",{className:"vtx-header__mobile-nav-children",children:e.children.map(r=>I(r,t+1))})]},e.id)};return n(e,{children:[r("header",{ref:b,className:T,style:u,...f,children:n("div",{className:"vtx-header__container",children:[r("button",{className:"vtx-header__menu-toggle",onClick:()=>M(!S),"aria-label":"Toggle menu","aria-expanded":S,children:r(S?Hr:Nr,{size:24})}),t&&r("div",{className:"vtx-header__logo",onClick:p,style:{cursor:p?"pointer":"default"},children:t}),o&&r("div",{className:"vtx-header__actions-group",children:o})]})}),S&&r("div",{className:"vtx-header__overlay",onClick:()=>M(!1),"aria-hidden":"true"}),r("div",{className:"vtx-header__mobile-menu "+(S?"vtx-header__mobile-menu--open":""),children:n("div",{className:"vtx-header__mobile-menu-content",children:[s&&n("form",{onSubmit:r=>{r.preventDefault(),x&&x(k)},className:"vtx-header__mobile-search",children:[r(Xr,{className:"vtx-header__mobile-search-icon",size:18}),r("input",{type:"search",placeholder:v,value:k,onChange:r=>_(r.target.value),className:"vtx-header__mobile-search-input","aria-label":"Search"})]}),a.length>0&&r("nav",{className:"vtx-header__mobile-nav","aria-label":"Mobile navigation",children:a.map(r=>I(r))}),o&&r("div",{className:"vtx-header__mobile-actions",children:o})]})})]})});Re.displayName="HeaderMobile";const Oe=({desktopProps:n,mobileProps:e,breakpoint:t=768})=>{const[o,i]=d(!1);return a.useEffect(()=>{const r=()=>{i(window.innerWidth<t)};return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[t]),o?r(Re,{...e}):r(Ee,{...n})};Oe.displayName="HeaderResponsive";const Fe={Desktop:sr(Ee),Mobile:sr(Re),Responsive:Oe};export{wn as Accordion,bn as AccordionItem,_n as Alert,qn as Avatar,Xn as Badge,pr as Button,Kn as Card,hr as Checkbox,ur as CheckboxGroup,sn as Chip,ne as DataGrid,te as Divider,Nn as Flex,he as Grid,ie as Header,Fe as HomeHeader,fe as InfoCard,je as InfoListCard,ze as InfoText,cn as Input,In as Menu,Tn as MenuItem,An as Modal,xn as MultiSelect,$e as OrderCard,De as OrderConfirmation,Be as OrderDetails,Me as ProductCard,mn as Radio,gn as RadioGroup,fn as Select,se as SideMenu,xe as Table,Sn as Text,tr as ThemeProvider,pe as Timeline,Bn as Toast,Vn as ToastContainer,Hn as Tooltip,rr as generateCSSVariables,nr as injectCSSVariables,Wn as toast,J as tokens,en as useBodyScrollLock,Jr as useClickOutside,on as useDebounce,nn as useEscapeKey,rn as useFocusTrap,an as useId,ar as useThemeContext,Rn as useToast};
2
2
  //# sourceMappingURL=index.esm.js.map